From 7c29e277fd13d9b19a05cd099dd6f683c090f52a Mon Sep 17 00:00:00 2001 From: Lightling Date: Sun, 2 Mar 2025 15:46:49 -0500 Subject: [PATCH] organization --- .nvmrc | 1 + package-lock.json | 18 ++++ package.json | 1 + src/router.ts | 4 +- src/store.ts | 22 ++++- src/views/Editor/DataEditor.vue | 85 +++++++++++++++++++ src/views/Editor/Editor.vue | 41 +++++++++ .../{Editor.vue => Editor/FieldEditor.vue} | 83 ++---------------- src/views/{ => Home}/Home.vue | 14 +-- src/vite-env.d.ts | 10 +-- tsconfig.json | 5 ++ vite.config.ts | 29 +++++-- 12 files changed, 212 insertions(+), 101 deletions(-) create mode 100644 .nvmrc create mode 100644 src/views/Editor/DataEditor.vue create mode 100644 src/views/Editor/Editor.vue rename src/views/{Editor.vue => Editor/FieldEditor.vue} (55%) rename src/views/{ => Home}/Home.vue (98%) diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..dc0bb0f --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v22.12.0 diff --git a/package-lock.json b/package-lock.json index 2eab453..c5655b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ }, "devDependencies": { "@tauri-apps/cli": "2.3.1", + "@types/node": "22.12.0", "@vitejs/plugin-vue": "5.2.1", "pug": "3.0.3", "sass": "1.85.1", @@ -1394,6 +1395,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/node": { + "version": "22.12.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.12.0.tgz", + "integrity": "sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": "~6.20.0" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz", @@ -2727,6 +2738,13 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "6.20.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", + "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==", + "dev": true, + "license": "MIT" + }, "node_modules/uuid": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz", diff --git a/package.json b/package.json index befec82..6334a40 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ }, "devDependencies": { "@tauri-apps/cli": "2.3.1", + "@types/node": "22.12.0", "@vitejs/plugin-vue": "5.2.1", "pug": "3.0.3", "sass": "1.85.1", diff --git a/src/router.ts b/src/router.ts index a2359a5..fd0434b 100644 --- a/src/router.ts +++ b/src/router.ts @@ -3,8 +3,8 @@ import { createRouter, } from 'vue-router' -import Editor from './views/Editor.vue' -import Home from './views/Home.vue' +import Editor from 'src/views/Editor/Editor.vue' +import Home from 'src/views/Home/Home.vue' export const routes = [ { path: '/', component: Home }, diff --git a/src/store.ts b/src/store.ts index 19056a9..f7f90f1 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,14 +1,32 @@ import { defineStore } from 'pinia' -import { type Inventory } from './types/data' +import { type Inventory } from 'src/types/data' + +interface InventoryState { + filePath: string, + data: Inventory | null, +} + +const fileTree = (state: InventoryState) => state.filePath.split(/(\\)|(\/)/gm) export const useAppStore = defineStore('appStore', { state: () => ({ currentInventory: { filePath: '', data: null as Inventory | null, - }, + } as InventoryState, }), + getters: { + fileTree: (state) => fileTree(state.currentInventory), + fileDirectory: (state) => { + const split = fileTree(state.currentInventory) + return state.currentInventory.filePath.replace(split[split.length - 1], '') + }, + fileName: (state) => { + const split = fileTree(state.currentInventory) + return split[split.length - 1] + }, + }, }) export type AppStoreDefinition = Omit< diff --git a/src/views/Editor/DataEditor.vue b/src/views/Editor/DataEditor.vue new file mode 100644 index 0000000..c9681fb --- /dev/null +++ b/src/views/Editor/DataEditor.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/src/views/Editor/Editor.vue b/src/views/Editor/Editor.vue new file mode 100644 index 0000000..17659f2 --- /dev/null +++ b/src/views/Editor/Editor.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/views/Editor.vue b/src/views/Editor/FieldEditor.vue similarity index 55% rename from src/views/Editor.vue rename to src/views/Editor/FieldEditor.vue index 54e01b3..6160d29 100644 --- a/src/views/Editor.vue +++ b/src/views/Editor/FieldEditor.vue @@ -3,35 +3,21 @@ import { ref } from 'vue' import Button from 'primevue/button' import DataTable from 'primevue/datatable' import Column from 'primevue/column' -import ColumnGroup from 'primevue/columngroup' -import Image from 'primevue/image' import InputText from 'primevue/inputtext' -import Row from 'primevue/row' import Select from 'primevue/select' import { FieldTypes, -} from '../types/data' -import { useAppStore } from '../store' + type Column as DataColumn, +} from 'src/types/data' -const appStore = useAppStore() - -const sampleData = ref([...appStore.currentInventory.data?.rows || []]) -const editingRows = ref([]) - -const sampleFields = ref([...appStore.currentInventory.data?.columns || []]) +const model = defineModel() const editingFields = ref([]) -const onRowEditSave = (event: { newData: any, index: number }) => { - let { newData, index } = event - sampleData.value[index] = newData - console.log(sampleData.value) -} - const onFieldEditSave = (event: { newData: any, index: number }) => { let { newData, index } = event - sampleFields.value[index] = newData - console.log(sampleFields.value) + model.value![index] = newData + console.log(model.value) } @@ -39,7 +25,7 @@ const onFieldEditSave = (event: { newData: any, index: number }) => { DataTable( @row-edit-save='onFieldEditSave' v-model:editingRows='editingFields' - :value='sampleFields' + :value='model' editMode='row' tableStyle='min-width: 50rem' ) @@ -121,62 +107,7 @@ DataTable( slotProps.editorCancelCallback(e) }` ) -DataTable( - @row-edit-save='onRowEditSave' - v-model:editingRows='editingRows' - :value='sampleData' - editMode='row' - tableStyle='min-width: 50rem' -) - Column( - v-for='col of sampleFields' - :key='col.name' - :field='col.name' - :header='col.name' - style='width:5rem;' - ) - template( - #body='slotProps' - ) - div( - v-if='col.type === "image"' - ) - Image( - v-if='slotProps.data.image' - :src='slotProps.data.image.src' - :alt='slotProps.data.image.alt' - preview - ) - span( - v-else - ) No image - div( - v-else - ) - span {{ slotProps.data[col.name] }} - template( - #editor='{ data, field }' - ) - div( - v-if='col.type === "image"' - ) - span Not Implemented - div( - v-else - ) - InputText( - v-model='data[field]' - fluid - ) - Column( - :rowEditor='true' - style='width:10%;min-width:8rem;' - bodyStyle='text-align:center;' - ) - diff --git a/src/views/Home.vue b/src/views/Home/Home.vue similarity index 98% rename from src/views/Home.vue rename to src/views/Home/Home.vue index f13fcee..3c40b25 100644 --- a/src/views/Home.vue +++ b/src/views/Home/Home.vue @@ -13,7 +13,7 @@ import InputGroup from 'primevue/inputgroup' import InputGroupAddon from 'primevue/inputgroupaddon' import Panel from 'primevue/panel' -import { useAppStore } from '../store' +import { useAppStore } from 'src/store' const router = useRouter() const toast = useToast() @@ -105,11 +105,7 @@ section.home-page template(#header) h2 Open Recent File .content - InputGroup - Button.submit( - label='Browse...' - @click='onFind' - ) + p Not Yet Implemented p or... Panel template(#header) @@ -145,7 +141,11 @@ section.home-page template(#header) h2 Open An Existing File .content - p Not Yet Implemented + InputGroup + Button.submit( + label='Browse...' + @click='onFind' + )