organization

.nvmrc

@@ -0,0 +1 @@
+v22.12.0

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",

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",

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 },

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<

src/views/Editor/DataEditor.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Image from 'primevue/image'
+import InputText  from 'primevue/inputtext'
+
+import {
+  type Row as DataRow,
+  type Column as DataColumn,
+} from 'src/types/data'
+
+const props = defineProps<{
+  columns: DataColumn[],
+}>()
+const model = defineModel<DataRow[]>()
+const editingRows = ref([])
+
+const onRowEditSave = (event: { newData: any, index: number }) => {
+  let { newData, index } = event
+  model.value![index] = newData
+  console.log(model.value)
+}
+</script>
+
+<template lang="pug">
+DataTable(
+  @row-edit-save='onRowEditSave'
+  v-model:editingRows='editingRows'
+  :value='model'
+  editMode='row'
+  tableStyle='min-width: 50rem'
+)
+  Column(
+    v-for='col of columns'
+    :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;'
+  )
+</template>
+
+<style scoped lang="sass">
+:deep(.p-image)
+  img
+    max-width: 16rem
+</style>

src/views/Editor/Editor.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
+import TabPanels from 'primevue/tabpanels'
+import TabPanel from 'primevue/tabpanel'
+
+import {
+  FieldTypes,
+} from 'src/types/data'
+import { useAppStore } from 'src/store'
+import DataEditor from './DataEditor.vue'
+import FieldEditor from './FieldEditor.vue'
+
+const appStore = useAppStore()
+
+const data = ref([...appStore.currentInventory.data?.rows || []])
+const fields = ref([...appStore.currentInventory.data?.columns || []])
+</script>
+
+<template lang="pug">
+Tabs(value='data-editor')
+  TabList
+    Tab(value='data-editor') Data Editor
+    Tab(value='field-editor') Field Editor
+  TabPanels
+    TabPanel(value='field-editor')
+      FieldEditor(
+        v-model='fields'
+      )
+    TabPanel(value='data-editor')
+      DataEditor(
+        v-model='data'
+        :columns='fields'
+      )
+</template>
+
+<style scoped lang="sass">
+
+</style>

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<DataColumn[]>()
 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)
 }
 </script>
 
@@ -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;'
-  )
 </template>
 
-<style lang="sass">
-.p-image
-  img
-    max-width: 16rem
+<style scoped lang="sass">
 </style>

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'
+        )
 </template>
 
 <style scoped lang="sass">

src/vite-env.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="vite/client" />
+/// <reference types='vite/client' />
 
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

tsconfig.json

@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "src/*": ["./src/*"]
+    },
+
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",

vite.config.ts

@@ -1,13 +1,24 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import * as path from 'path'
 
-// @ts-expect-error process is a nodejs global
-const host = process.env.TAURI_DEV_HOST;
+// //@ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [vue()],
-
+  plugins: [vue({
+    template: {
+      preprocessOptions: {
+        basedir: path.resolve(__dirname, './')
+      },
+    }
+  })],
+  resolve: {
+    alias: {
+      'src': path.resolve(__dirname, './src'),
+    },
+  },
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
   // 1. prevent vite from obscuring rust errors
@@ -19,14 +30,14 @@ export default defineConfig(async () => ({
     host: host || false,
     hmr: host
       ? {
-          protocol: "ws",
+          protocol: 'ws',
           host,
           port: 1421,
         }
       : undefined,
     watch: {
       // 3. tell vite to ignore watching `src-tauri`
-      ignored: ["**/src-tauri/**"],
+      ignored: ['**/src-tauri/**'],
     },
   },
-}));
+}))