create from template options

src/types/data.ts

@@ -53,4 +53,5 @@ export type Row = {
 export interface Inventory {
   columns: Column[]
   rows: Row[]
+  templates: Row[]
 }

src/views/Editor/DataEditor.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import {
+  computed,
+  ref,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import { v7 as uuidv7 } from 'uuid'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
@@ -7,6 +12,8 @@ import Column from 'primevue/column'
 import Chip from 'primevue/chip'
 import DataTable from 'primevue/datatable'
 import Image from 'primevue/image'
+import InputGroup from 'primevue/inputgroup'
+import InputGroupAddon from 'primevue/inputgroupaddon'
 import InputText  from 'primevue/inputtext'
 import MultiSelect from 'primevue/multiselect'
 import Select from 'primevue/select'
@@ -20,6 +27,7 @@ import { type EditingRow } from './types'
 
 const props = defineProps<{
   columns: DataColumn[],
+  templates: DataRow[],
 }>()
 const emits = defineEmits<{
   (e: 'dirty'): void
@@ -31,6 +39,17 @@ const editingImage = ref(false)
 const editingImageRow = ref(null as EditingRow | null)
 const columnsByKey = computed(() => Object.assign({}, ...props.columns.map(c => ({[c.name]: c}))))
 const columnsPrimary = computed(() => props.columns.filter(column => !column.secondary))
+const selectedTemplate = ref(null as DataRow | null) // simply used to reset dropdown when selected
+const templateDropdown: any = useTemplateRef('template-dropdown' as any) // pug seems to mess with id'ing the ref, so cast as any
+
+watch(selectedTemplate, async (selected, old) => {
+  if (!!selected) {
+    requestAnimationFrame(() => {
+      onAddRow(undefined, selected)
+      selectedTemplate.value = null
+    })
+  }
+})
 
 const onRowEditSave = (event: { newData: any, index: number }) => {
   let { newData, index } = event
@@ -38,9 +57,13 @@ const onRowEditSave = (event: { newData: any, index: number }) => {
   emits('dirty')
 }
 
-const onAddRow = (event: Event) => {
+const onAddRow = (event?: Event, template?: DataRow) => {
-  event.preventDefault()
+  event?.preventDefault()
-  model.value.push({ _id: uuidv7() })
+  if (!!template) {
+    model.value.push({ ...template, _id: uuidv7() })
+  } else {
+    model.value.push({ _id: uuidv7() })
+  }
   emits('dirty')
 
   requestAnimationFrame(() => {
@@ -287,12 +310,20 @@ DataTable.data-editor(
 p(
   v-else
 ) There are no items yet!
-Button(
+InputGroup
-  icon='pi pi-plus'
+  Button(
-  aria-label='Add New Item'
+    icon='pi pi-plus'
-  label='Add New Item'
+    aria-label='Add New Item'
-  @click='onAddRow'
+    label='Add New Item'
-)
+    @click='onAddRow'
+  )
+  Select(
+    v-model='selectedTemplate'
+    :options='templates'
+    optionLabel='name'
+    placeholder='New From Template'
+    ref='template-dropdown'
+  )
 </template>
 
 <style scoped lang="sass">

src/views/Editor/Editor.vue

@@ -25,6 +25,7 @@ const router = useRouter()
 const toast = useToast()
 
 const data = ref(appStore.currentInventory.data?.rows)
+const templates = ref(appStore.currentInventory.data?.templates)
 const fields = ref(appStore.currentInventory.data?.columns)
 const dirty = ref(false)
 const fileDirectory = ref(appStore.fileDirectory)
@@ -89,6 +90,7 @@ Tabs.tabs(value='data-editor')
   TabList
     Tab(value='data-editor') Data Editor
     Tab(value='field-editor') Field Editor
+    Tab(value='template-editor') Template Editor
   TabPanels
     TabPanel(value='field-editor')
       FieldEditor(
@@ -99,6 +101,14 @@ Tabs.tabs(value='data-editor')
       DataEditor(
         v-model='data'
         :columns='fields'
+        :templates='templates'
+        @dirty='onDirty'
+      )
+    TabPanel(value='template-editor')
+      DataEditor(
+        v-model='templates'
+        :columns='fields'
+        :templates='templates'
         @dirty='onDirty'
       )
 </template>

src/views/Home/Home.vue

@@ -46,6 +46,7 @@ const onCreate = async (e: Event) => {
       { name: 'image', type: 'image' },
     ],
     rows: [],
+    templates: [],
   }
   router.push('/editor')
 }