field editor validation & chips label

src/components/InputChips.vue

@@ -6,6 +6,9 @@ import InputGroup from 'primevue/inputgroup'
 import InputText from 'primevue/inputtext'
 
 const model = defineModel<string[]>()
+const props = defineProps<{
+  label?: string,
+}>()
 const entry = ref('')
 const preventSubmit = computed(() => entry.value === '' || model.value?.includes(entry.value))
 const emits = defineEmits<{
@@ -40,13 +43,9 @@ const onSubmit = (event: Event) => {
 
 <template lang="pug">
 .input-chips
-  .chips
-    Chip(
-      v-for='chip in model'
-      :label='chip'
-      :onRemove='(e) => onRemove(chip)'
-      removable
-    )
+  label(
+    v-if='label'
+  ) {{ label }}
   InputGroup
     InputText(
       v-model='entry'
@@ -60,8 +59,16 @@ const onSubmit = (event: Event) => {
       :disabled='preventSubmit'
       @click='onSubmit'
     )
+  .chips
+    Chip(
+      v-for='chip in model'
+      :label='chip'
+      :onRemove='(e) => onRemove(chip)'
+      removable
+    )
 </template>
 
 <style scoped lang="sass">
-
+.chips
+  margin-top: 0.5rem
 </style>

src/views/Editor/FieldEditor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { v1 as uuidv1 } from 'uuid'
+import { useToast } from 'primevue'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import DataTable from 'primevue/datatable'
@@ -14,6 +15,8 @@ import {
 } from 'src/types/data'
 import InputChips from 'src/components/InputChips.vue'
 
+const toast = useToast()
+
 const emits = defineEmits<{
   (e: 'dirty'): void
 }>()
@@ -21,10 +24,26 @@ const model = defineModel<DataColumn[]>({ required: true })
 const editingFields = ref([])
 const expandedRows = ref([])
 
-const onFieldEditSave = (event: { newData: any, index: number }) => {
+const isIncomingFieldValid = (field: DataColumn, indexOfNewField: number) => {
+  if (model.value.some((other: DataColumn, index: number) => index !== indexOfNewField && other.name === field.name)) {
+    toast.add({
+      severity: 'error',
+      summary: 'Unable to save field',
+      detail: `Field name "${field.name}" is already taken by another field`,
+    })
+
+    return false
+  }
+
+  return true
+}
+
+const onFieldEditSave = (event: { newData: any, index: number, originalEvent: MouseEvent }) => {
   let { newData, index } = event
-  model.value[index] = newData
-  emits('dirty')
+  if (isIncomingFieldValid(newData, index)) {
+    model.value[index] = newData
+    emits('dirty')
+  }
 }
 
 const onAddField = (event: Event) => {
@@ -172,6 +191,7 @@ DataTable.field-editor(
       InputChips(
         v-model='slotProps.data.options'
         @dirty='$emit("dirty")'
+        label='Define Available Options'
       )
     p(
       v-else