Enhance label validation

frontend/components/label/FormCreate.vue

@@ -8,14 +8,11 @@
     @cancel="$emit('cancel')"
   >
     <template #content>
-      <v-form
-        ref="form"
-        v-model="valid"
-      >
+      <v-form v-model="valid">
         <v-text-field
           v-model="item.text"
           :label="$t('labels.labelName')"
-          :rules="labelNameRules($t('rules.labelNameRules'))"
+          :rules="[rules.required, rules.counter, rules.nameDuplicated]"
           prepend-icon="label"
           single-line
           counter
@@ -25,11 +22,12 @@
           v-model="item.suffix_key"
           :items="shortkeys"
           :label="$t('labels.key')"
+          :rules="[rules.keyDuplicated]"
           prepend-icon="mdi-keyboard"
         />
         <v-color-picker
           v-model="item.background_color"
-          :rules="colorRules($t('rules.colorRules'))"
+          :rules="[rules.required]"
           show-swatches
           hide-mode-switch
           width="800"
@@ -42,7 +40,6 @@
 <script lang="ts">
 import Vue from 'vue'
 import BaseCard from '@/components/molecules/BaseCard.vue'
-import { colorRules, labelNameRules } from '@/rules/index'
 
 export default Vue.extend({
   components: {
@@ -54,14 +51,31 @@ export default Vue.extend({
       type: Object,
       default: () => {},
       required: true
+    },
+    usedNames: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    usedKeys: {
+      type: Array,
+      default: () => [],
+      required: true
     }
   },
 
   data() {
     return {
       valid: false,
-      labelNameRules,
-      colorRules
+      rules: {
+        required: (v: string) => !!v || 'Required',
+        // @ts-ignore
+        counter: (v: string) => (v && v.length <= 30) || this.$t('rules.labelNameRules').labelLessThan30Chars,
+        // @ts-ignore
+        nameDuplicated: (v: string) => (!this.usedNames.includes(v)) || this.$t('rules.labelNameRules').duplicated,
+        // @ts-ignore
+        keyDuplicated: (v: string) => !this.usedKeys.includes(v) || this.$t('rules.keyNameRules').duplicated,
+      }
     }
   },
 
@@ -71,22 +85,14 @@ export default Vue.extend({
     },
     item: {
       get() {
-        // Property '$emit' does not exist on type '() => any'
         // @ts-ignore
         return this.value
       },
       set(val) {
-        // Property '$emit' does not exist on type '() => any'
         // @ts-ignore
         this.$emit('input', val)
       }
     }
-  },
-
-  methods: {
-    hoge() {
-      this.$emit('inpupt')
-    }
   }
 })
 </script>

frontend/pages/projects/_id/labels/index.vue

@@ -17,6 +17,8 @@
       <v-dialog v-model="dialogCreate">
         <form-create
           v-model="editedItem"
+          :used-keys="usedKeys"
+          :used-names="usedNames"
           @cancel="close"
           @save="save"
         />
@@ -96,6 +98,12 @@ export default Vue.extend({
     },
     projectId(): string {
       return this.$route.params.id
+    },
+    usedNames(): string[] {
+      return this.items.map(item => item.text)
+    },
+    usedKeys(): string[] {
+      return this.items.map(item => item.suffix_key).filter(item => item !==null) as string[]
     }
   },