field editor

package-lock.json

@@ -12,6 +12,7 @@
         "@tauri-apps/api": "2.3.0",
         "@tauri-apps/plugin-opener": "2.2.6",
         "pinia": "3.0.1",
+        "primeicons": "7.0.0",
         "primevue": "4.3.1",
         "uuid": "11.1.0",
         "vue": "3.5.13",
@@ -2359,6 +2360,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
     "node_modules/primevue": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.1.tgz",

package.json

@@ -14,6 +14,7 @@
     "@tauri-apps/api": "2.3.0",
     "@tauri-apps/plugin-opener": "2.2.6",
     "pinia": "3.0.1",
+    "primeicons": "7.0.0",
     "primevue": "4.3.1",
     "uuid": "11.1.0",
     "vue": "3.5.13",

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import Aura from '@primeuix/themes/aura'
 import PrimeVue from 'primevue/config'
+import 'primeicons/primeicons.css'
 
 import { router } from './router'
 import App from './App.vue'

src/types/data.ts

@@ -0,0 +1,25 @@
+export const FieldTypes = [
+  'text',
+  'image',
+  'number',
+  'dropdown',
+  'toggle',
+] as const
+
+export type FieldType = typeof FieldTypes[number]
+
+export interface Column {
+  name: string
+  type: FieldType
+}
+
+export type Columns = Column[]
+
+export type Row = {
+  _id: string
+} & Record<string, string>
+
+export interface Inventory {
+  columns: Column[]
+  rows: Row[]
+}

src/views/Editor.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 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'
 
 const sampleData = ref([
   {
@@ -35,20 +40,112 @@ const sampleData = ref([
 const editingRows = ref([])
 
 const sampleFields = ref([
-  { field: 'name', header: 'Name', type: 'text' },
+  { name: 'name', type: 'text' },
-  { field: 'category', header: 'Category', type: 'text' },
+  { name: 'category', type: 'text' },
-  { field: 'quantity', header: 'Quantity', type: 'text' },
+  { name: 'quantity', type: 'text' },
-  { field: 'image', header: 'Image', type: 'image' },
+  { name: 'image', type: 'image' },
 ])
+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)
+}
 </script>
 
 <template lang="pug">
+DataTable(
+  @row-edit-save='onFieldEditSave'
+  v-model:editingRows='editingFields'
+  :value='sampleFields'
+  editMode='row'
+  tableStyle='min-width: 50rem'
+)
+  Column(
+    field='name'
+    header='Name'
+  )
+    template(
+      #body='slotProps'
+    )
+      span {{ slotProps.data.name }}
+    template(
+      #editor='{ data, field }'
+    )
+      InputText(
+        v-model='data[field]'
+        fluid
+      )
+  Column(
+    field='type'
+    header='Type'
+  )
+    template(
+      #body='slotProps'
+    )
+      span {{ slotProps.data.type }}
+    template(
+      #editor='{ data, field }'
+    )
+      Select(
+        v-model='data[field]'
+        :options='FieldTypes'
+      )
+  Column(
+    rowEditor
+    style='width:10%;min-width:8rem;'
+    bodyStyle='text-align:center;'
+  )
+    template(
+      #body='slotProps'
+    )
+      Button(
+        icon='pi pi-pencil'
+        aria-label='Row Edit'
+        rounded
+        severity='secondary'
+        variant='text'
+        :onClick=`(e) => {
+          slotProps.editorInitCallback(e)
+        }`
+      )
+      Button(
+        icon='pi pi-trash'
+        aria-label='Delete'
+        rounded
+        severity='danger'
+        variant='text'
+      )
+    template(
+      #editor='slotProps'
+    )
+      Button(
+        icon='pi pi-save'
+        aria-label='Save Edit'
+        rounded
+        severity='secondary'
+        variant='text'
+        :onClick=`(e) => {
+          slotProps.editorSaveCallback(e)
+        }`
+      )
+      Button(
+        icon='pi pi-times'
+        aria-label='Cancel Edit'
+        rounded
+        severity='secondary'
+        variant='text'
+        :onClick=`(e) => {
+          slotProps.editorCancelCallback(e)
+        }`
+      )
 DataTable(
   @row-edit-save='onRowEditSave'
   v-model:editingRows='editingRows'
@@ -58,9 +155,9 @@ DataTable(
 )
   Column(
     v-for='col of sampleFields'
-    :key='col.field'
+    :key='col.name'
-    :field='col.field'
+    :field='col.name'
-    :header='col.header'
+    :header='col.name'
     style='width:5rem;'
   )
     template(
@@ -81,7 +178,7 @@ DataTable(
       div(
         v-else
       )
-        span {{ slotProps.data[col.field] }}
+        span {{ slotProps.data[col.name] }}
     template(
       #editor='{ data, field }'
     )
@@ -101,8 +198,6 @@ DataTable(
     style='width:10%;min-width:8rem;'
     bodyStyle='text-align:center;'
   )
-      //- span {{ slotProps.data[col.field] }}
-      //-<Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
 </template>
 
 <style lang="sass">