Delete organisms/LabelList

frontend/components/containers/LabelList.vue

@@ -1,22 +1,84 @@
 <template>
-  <label-list
+  <v-data-table
+    :value="selected"
     :headers="headers"
-    :labels="items"
-    :selected="selected"
+    :items="items"
+    :search="search"
     :loading="loading"
-    @update-selected="updateSelected"
-    @update-label="handleUpdateLabel"
-  />
+    loading-text="Loading... Please wait"
+    item-key="id"
+    show-select
+    @input="updateSelected"
+  >
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        prepend-inner-icon="search"
+        label="Search"
+        single-line
+        hide-details
+        filled
+      />
+    </template>
+    <template v-slot:item.text="{ item }">
+      <v-edit-dialog>
+        {{ item.text }}
+        <template v-slot:input>
+          <v-text-field
+            :value="item.text"
+            :rules="labelNameRules"
+            label="Edit"
+            single-line
+            @change="handleUpdateLabel({ id: item.id, text: $event })"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+    <template v-slot:item.suffix_key="{ item }">
+      <v-edit-dialog>
+        <div>{{ item.suffix_key }}</div>
+        <template v-slot:input>
+          <v-select
+            :value="item.suffix_key"
+            :items="keys"
+            label="Key"
+            @change="handleUpdateLabel({ id: item.id, suffix_key: $event })"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+    <template v-slot:item.background_color="{ item }">
+      <v-edit-dialog>
+        <v-chip
+          :color="item.background_color"
+          :text-color="textColor(item.background_color)"
+          dark
+        >
+          {{ item.background_color }}
+        </v-chip>
+        <template v-slot:input>
+          <v-color-picker
+            :value="item.backgroundColor"
+            :rules="colorRules"
+            show-swatches
+            hide-mode-switch
+            width="800"
+            mode="hexa"
+            class="ma-2"
+            @update:color="handleUpdateLabel({ id:item.id, background_color: $event.hex })"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
 import { mapState, mapActions, mapMutations } from 'vuex'
-import LabelList from '@/components/organisms/LabelList'
+import { colorRules, labelNameRules } from '@/rules/index'
+import { idealColor } from '~/plugins/utils'
 
 export default {
-  components: {
-    LabelList
-  },
   data() {
     return {
       headers: [
@@ -34,12 +96,19 @@ export default {
           sortable: false,
           value: 'background_color'
         }
-      ]
+      ],
+      search: '',
+      colorRules,
+      labelNameRules
     }
   },
 
   computed: {
-    ...mapState('labels', ['items', 'selected', 'loading'])
+    ...mapState('labels', ['items', 'selected', 'loading']),
+
+    keys() {
+      return 'abcdefghijklmnopqrstuvwxyz'.split('')
+    }
   },
 
   created() {
@@ -56,6 +125,10 @@ export default {
         ...payload
       }
       this.updateLabel(data)
+    },
+
+    textColor(backgroundColor) {
+      return idealColor(backgroundColor)
     }
   }
 }

frontend/components/organisms/LabelList.vue

@@ -1,126 +0,0 @@
-<template>
-  <v-data-table
-    :value="selected"
-    :headers="headers"
-    :items="labels"
-    :search="search"
-    :loading="loading"
-    loading-text="Loading... Please wait"
-    item-key="id"
-    show-select
-    @input="update"
-  >
-    <template v-slot:top>
-      <v-text-field
-        v-model="search"
-        prepend-inner-icon="search"
-        label="Search"
-        single-line
-        hide-details
-        filled
-      />
-    </template>
-    <template v-slot:item.text="{ item }">
-      <v-edit-dialog>
-        {{ item.text }}
-        <template v-slot:input>
-          <v-text-field
-            :value="item.text"
-            :rules="labelNameRules"
-            label="Edit"
-            single-line
-            @change="updateLabel({ id: item.id, text: $event })"
-          />
-        </template>
-      </v-edit-dialog>
-    </template>
-    <template v-slot:item.suffix_key="{ item }">
-      <v-edit-dialog>
-        <div>{{ item.suffix_key }}</div>
-        <template v-slot:input>
-          <v-select
-            :value="item.suffix_key"
-            :items="keys"
-            label="Key"
-            @change="updateLabel({ id: item.id, suffix_key: $event })"
-          />
-        </template>
-      </v-edit-dialog>
-    </template>
-    <template v-slot:item.background_color="{ item }">
-      <v-edit-dialog>
-        <v-chip
-          :color="item.background_color"
-          :text-color="textColor(item.background_color)"
-          dark
-        >
-          {{ item.background_color }}
-        </v-chip>
-        <template v-slot:input>
-          <v-color-picker
-            :value="item.backgroundColor"
-            :rules="colorRules"
-            show-swatches
-            hide-mode-switch
-            width="800"
-            mode="hexa"
-            class="ma-2"
-            @update:color="updateLabel({ id:item.id, background_color: $event.hex })"
-          />
-        </template>
-      </v-edit-dialog>
-    </template>
-  </v-data-table>
-</template>
-
-<script>
-import { colorRules, labelNameRules } from '@/rules/index'
-import { idealColor } from '~/plugins/utils'
-
-export default {
-  props: {
-    headers: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    labels: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    selected: {
-      type: Array,
-      default: () => [],
-      required: true
-    },
-    keys: {
-      type: Array,
-      default: () => 'abcdefghijklmnopqrstuvwxyz'.split('')
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-      required: true
-    }
-  },
-  data() {
-    return {
-      search: '',
-      colorRules,
-      labelNameRules
-    }
-  },
-  methods: {
-    textColor(backgroundColor) {
-      return idealColor(backgroundColor)
-    },
-    update(selected) {
-      this.$emit('update-selected', selected)
-    },
-    updateLabel(payload) {
-      this.$emit('update-label', payload)
-    }
-  }
-}
-</script>