Initial

src/views/TemplatesView.vue

@@ -0,0 +1,85 @@
+<template>
+  <section class="content-grid">
+    <v-card class="span-5 panel-pad">
+      <h2 class="section-title mb-4">Asset template</h2>
+      <v-text-field v-model="localForm.name" label="Name" />
+      <v-textarea v-model="localForm.description" label="Description" rows="2" />
+      <v-select v-model="localForm.defaults.category" :items="categoryItems" label="Category" />
+      <v-text-field v-model.number="localForm.defaults.useful_life_months" type="number" label="Useful life months" />
+      <v-select v-model="localForm.defaults.depreciation_method" :items="methodItems" item-title="title" item-value="value" label="Depreciation method" />
+      <v-divider class="my-4" />
+      <div class="toolbar-row mb-3">
+        <h3 class="section-title">Custom fields</h3>
+        <v-spacer />
+        <v-btn variant="tonal" size="small" prepend-icon="mdi-plus" @click="addField">Add field</v-btn>
+      </div>
+      <div v-if="!localForm.custom_fields.length" class="quiet text-body-2 mb-4">No custom fields defined.</div>
+      <div v-for="(field, index) in localForm.custom_fields" :key="field.local_id" class="custom-field-row">
+        <v-text-field v-model="field.label" label="Label" @update:model-value="syncFieldKey(field)" />
+        <v-text-field v-model="field.key" label="Key" />
+        <v-select v-model="field.type" :items="customFieldTypes" item-title="title" item-value="value" label="Type" />
+        <v-text-field v-if="field.type !== 'bool'" v-model="field.defaultValue" label="Default" />
+        <v-switch v-else v-model="field.defaultValue" label="Default" color="primary" density="compact" hide-details />
+        <v-switch v-model="field.required" label="Required" color="primary" density="compact" hide-details />
+        <v-btn icon="mdi-delete" variant="text" color="error" @click="localForm.custom_fields.splice(index, 1)" />
+      </div>
+      <v-btn color="primary" prepend-icon="mdi-content-save" @click="$emit('save-template', localForm)">Save template</v-btn>
+    </v-card>
+    <v-card class="span-7 panel-pad">
+      <h2 class="section-title mb-4">Templates</h2>
+      <v-list lines="two">
+        <v-list-item v-for="template in templates" :key="template.id" prepend-icon="mdi-form-select">
+          <v-list-item-title>{{ template.name }}</v-list-item-title>
+          <v-list-item-subtitle>{{ template.description }}</v-list-item-subtitle>
+          <template #append>
+            <v-chip size="small" variant="tonal">{{ template.custom_fields.length }} fields</v-chip>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </section>
+</template>
+
+<script>
+import { slugFieldKey } from '../utils/assets';
+import { clonePlain } from '../utils/clone';
+
+export default {
+  props: {
+    categoryItems: { type: Array, required: true },
+    customFieldTypes: { type: Array, required: true },
+    methodItems: { type: Array, required: true },
+    templateForm: { type: Object, required: true },
+    templates: { type: Array, required: true }
+  },
+  emits: ['save-template'],
+  data() {
+    return {
+      localForm: clonePlain(this.templateForm)
+    };
+  },
+  watch: {
+    templateForm: {
+      handler(value) {
+        this.localForm = clonePlain(value);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    addField() {
+      this.localForm.custom_fields.push({
+        local_id: crypto.randomUUID ? crypto.randomUUID() : String(Date.now() + Math.random()),
+        key: '',
+        label: '',
+        type: 'text',
+        required: false,
+        defaultValue: ''
+      });
+    },
+    syncFieldKey(field) {
+      if (!field.key) field.key = slugFieldKey(field.label);
+    }
+  }
+};
+</script>