Update LabelDTO

frontend/components/label/FormCreate.vue

@@ -10,27 +10,30 @@
     <template #content>
       <v-form v-model="valid">
         <v-text-field
-          v-model="item.text"
+          :value="text"
           :label="$t('labels.labelName')"
           :rules="[rules.required, rules.counter, rules.nameDuplicated]"
           prepend-icon="label"
           single-line
           counter
           autofocus
+          @input="updateValue('text', $event)"
         />
         <v-select
-          v-model="item.suffix_key"
+          :value="suffixKey"
           :items="shortkeys"
           :label="$t('labels.key')"
           :rules="[rules.keyDuplicated]"
           prepend-icon="mdi-keyboard"
+          @input="updateValue('suffixKey', $event)"
         />
         <v-color-picker
-          v-model="item.background_color"
+          :value="backgroundColor"
           :rules="[rules.required]"
           show-swatches
           hide-mode-switch
           width="800"
+          @input="updateValue('backgroundColor', $event)"
         />
       </v-form>
     </template>
@@ -47,9 +50,18 @@ export default Vue.extend({
   },
 
   props: {
-    value: {
-      type: Object,
-      default: () => {},
+    text: {
+      type: String,
+      default: '',
+      required: true
+    },
+    suffixKey: {
+      type: String,
+      default: null,
+    },
+    backgroundColor: {
+      type: String,
+      default: '#ffffff',
       required: true
     },
     usedNames: {
@@ -82,16 +94,12 @@ export default Vue.extend({
   computed: {
     shortkeys() {
       return '0123456789abcdefghijklmnopqrstuvwxyz'.split('')
-    },
-    item: {
-      get() {
-        // @ts-ignore
-        return this.value
-      },
-      set(val) {
-        // @ts-ignore
-        this.$emit('input', val)
-      }
+    }
+  },
+
+  methods: {
+    updateValue(key: string, value: string) {
+      this.$emit(`update:${key}`, value);
     }
   }
 })

frontend/components/label/LabelList.vue

@@ -27,10 +27,10 @@
         filled
       />
     </template>
-    <template v-slot:[`item.background_color`]="props">
+    <template v-slot:[`item.backgroundColor`]="props">
       <v-chip
-        :color="props.item.background_color"
-        :text-color="$contrastColor(props.item.background_color)"
+        :color="props.item.backgroundColor"
+        :text-color="$contrastColor(props.item.backgroundColor)"
       >
         {{ props.item.background_color }}
       </v-chip>
@@ -79,8 +79,8 @@ export default Vue.extend({
     headers() {
       return [
         { text: this.$t('generic.name'),    value: 'text' },
-        { text: this.$t('labels.shortkey'), value: 'suffix_key' },
-        { text: this.$t('labels.color'),    value: 'background_color' },
+        { text: this.$t('labels.shortkey'), value: 'suffixKey' },
+        { text: this.$t('labels.color'),    value: 'backgroundColor' },
         { text: 'Actions', value: 'actions', sortable: false },
       ]
     }

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

@@ -16,7 +16,7 @@
       </v-btn>
       <v-dialog v-model="dialogCreate">
         <form-create
-          v-model="editedItem"
+          v-bind.sync="editedItem"
           :used-keys="usedKeys"
           :used-names="usedNames"
           @cancel="close"
@@ -82,17 +82,17 @@ export default Vue.extend({
       editedIndex: -1,
       editedItem: {
         text: '',
-        prefix_key: null,
-        suffix_key: null,
-        background_color: '#2196F3',
-        text_color: '#ffffff'
+        prefixKey: null,
+        suffixKey: null,
+        backgroundColor: '#2196F3',
+        textColor: '#ffffff'
       } as LabelDTO,
       defaultItem: {
         text: '',
-        prefix_key: null,
-        suffix_key: null,
-        background_color: '#2196F3',
-        text_color: '#ffffff'
+        prefixKey: null,
+        suffixKey: null,
+        backgroundColor: '#2196F3',
+        textColor: '#ffffff'
       } as LabelDTO,
       items: [] as LabelDTO[],
       selected: [] as LabelDTO[],
@@ -114,7 +114,7 @@ export default Vue.extend({
     },
     usedKeys(): string[] {
       const item = this.items[this.editedIndex] // to remove myself
-      return this.items.filter(_ => _ !== item).map(item => item.suffix_key)
+      return this.items.filter(_ => _ !== item).map(item => item.suffixKey)
                        .filter(item => item !==null) as string[]
     }
   },

frontend/services/application/label.service.ts

@@ -4,18 +4,18 @@ import { LabelItemListRepository } from '@/repositories/label/interface'
 export class LabelDTO {
   id: number
   text: string
-  prefix_key: string | null
-  suffix_key: string | null
-  background_color: string
-  text_color: string
+  prefixKey: string | null
+  suffixKey: string | null
+  backgroundColor: string
+  textColor: string
 
   constructor(item: LabelItem) {
     this.id = item.id
     this.text = item.text
-    this.prefix_key = item.prefixKey
-    this.suffix_key = item.suffixKey
-    this.background_color = item.backgroundColor
-    this.text_color = '#ffffff'
+    this.prefixKey = item.prefixKey
+    this.suffixKey = item.suffixKey
+    this.backgroundColor = item.backgroundColor
+    this.textColor = '#ffffff'
   }
 }
 
@@ -30,12 +30,12 @@ export class LabelApplicationService {
   }
 
   public create(projectId: string, item: LabelDTO): void {
-    const label = new LabelItem(0, item.text, item.prefix_key, item.suffix_key, item.background_color, item.text_color)
+    const label = new LabelItem(0, item.text, item.prefixKey, item.suffixKey, item.backgroundColor, item.textColor)
     this.repository.create(projectId, label)
   }
 
   public update(projectId: string, item: LabelDTO): void {
-    const label = new LabelItem(item.id, item.text, item.prefix_key, item.suffix_key, item.background_color, item.text_color)
+    const label = new LabelItem(item.id, item.text, item.prefixKey, item.suffixKey, item.backgroundColor, item.textColor)
     this.repository.update(projectId, label)
   }