Move label logic to label page

frontend/components/label/LabelList.vue

@@ -17,41 +17,6 @@
     show-select
   >
     <template v-slot:top>
-      <v-toolbar flat>
-        <action-menu
-          @create="dialogCreate=true"
-          @upload="dialogUpload=true"
-          @download="download"
-        />
-        <v-btn
-          class="text-capitalize ms-2"
-          :disabled="!canDelete"
-          outlined
-          @click.stop="dialogDelete=true"
-        >
-          {{ $t('generic.delete') }}
-        </v-btn>
-        <v-dialog v-model="dialogCreate">
-          <form-create
-            v-model="editedItem"
-            @cancel="close"
-            @save="save"
-          />
-        </v-dialog>
-        <v-dialog v-model="dialogUpload">
-          <form-upload
-            @cancel="dialogUpload=false"
-            @upload="upload"
-          />
-        </v-dialog>
-        <v-dialog v-model="dialogDelete">
-          <form-delete
-            :selected="selected"
-            @cancel="dialogDelete=false"
-            @remove="remove"
-          />
-        </v-dialog>
-      </v-toolbar>
       <v-text-field
         v-model="search"
         prepend-inner-icon="search"
@@ -72,7 +37,7 @@
     <template v-slot:[`item.actions`]="{ item }">
       <v-icon
         small
-        @click="editItem(item)"
+        @click="$emit('edit', item)"
       >
         mdi-pencil
       </v-icon>
@@ -81,131 +46,57 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 import { LabelDTO } from '@/services/application/label.service'
-import ActionMenu from './ActionMenu.vue'
-import FormCreate from './FormCreate.vue'
-import FormDelete from './FormDelete.vue'
-import FormUpload from './FormUpload.vue'
 
 export default Vue.extend({
-  components: {
-    ActionMenu,
-    FormCreate,
-    FormDelete,
-    FormUpload
+
+  props: {
+    isLoading: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    items: {
+      type: Array as PropType<LabelDTO[]>,
+      default: () => [],
+      required: true
+    },
+    value: {
+      type: Array as PropType<LabelDTO[]>,
+      default: () => [],
+      required: true
+    }
   },
 
   data() {
     return {
-      dialogCreate: false,
-      dialogDelete: false,
-      dialogUpload: false,
-      headers: [
-        { text: this.$t('generic.name'),    value: 'text' },
-        { text: this.$t('labels.shortkey'), value: 'suffix_key' },
-        { text: this.$t('labels.color'),    value: 'background_color' },
-        { text: 'Actions', value: 'actions', sortable: false },
-      ],
-      editedIndex: -1,
-      editedItem: {
-        text: '',
-        prefix_key: null,
-        suffix_key: null,
-        background_color: '#2196F3',
-        text_color: '#ffffff'
-      } as LabelDTO,
-      defaultItem: {
-        text: '',
-        prefix_key: null,
-        suffix_key: null,
-        background_color: '#2196F3',
-        text_color: '#ffffff'
-      } as LabelDTO,
-      isLoading: false,
-      items: [] as LabelDTO[],
-      selected: [] as LabelDTO[],
       search: ''
     }
   },
 
   computed: {
-    canDelete(): boolean {
-      return this.selected.length > 0
-    },
-    projectId(): string {
-      return this.$route.params.id
-    }
-  },
-
-  created() {
-    this.list()
-  },
-
-  methods: {
-    async list() {
-      this.isLoading = true
-      this.items = await this.$services.label.list(this.projectId)
-      this.isLoading = false
-    },
-
-    async create(item: LabelDTO) {
-      await this.$services.label.create(this.projectId, item)
-      this.list()
-      this.dialogCreate = false
-    },
-
-    async update(item: LabelDTO) {
-      await this.$services.label.update(this.projectId, item)
-      this.list()
-      this.dialogCreate = false
-    },
-
-    async remove() {
-      await this.$services.label.bulkDelete(this.projectId, this.selected)
-      this.list()
-      this.dialogDelete = false
-      this.selected = []
-    },
-
-    async download() {
-      await this.$services.label.export(this.projectId)
-    },
-
-    async upload(file: File) {
-      await this.$services.label.upload(this.projectId, file)
-      this.list()
-      this.dialogUpload = false
-    },
-
-    editItem(item: LabelDTO) {
-      this.editedIndex = this.items.indexOf(item)
-      this.editedItem = Object.assign({}, item)
-      this.dialogCreate = true
-    },
-
-    close() {
-      this.dialogCreate = false
-      this.$nextTick(() => {
-        this.editedItem = Object.assign({}, this.defaultItem)
-        this.editedIndex = -1
-      })
+    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: 'Actions', value: 'actions', sortable: false },
+      ]
     },
-
-    save() {
-      if (this.editedIndex > -1) {
-        this.update(this.editedItem)
-      } else {
-        this.create(this.editedItem)
+    
+    selected: {
+      get(): LabelDTO[] {
+        // Property 'value' 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)
       }
-      this.close()
     }
-  }  
+  }
 })
 </script>
-
-<style scoped>
-::v-deep .v-dialog {
-  width: 800px;
-}
-</style>

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

@@ -1,21 +1,176 @@
 <template>
   <v-card>
-    <label-list />
+    <v-card-title>
+      <action-menu
+        @create="dialogCreate=true"
+        @upload="dialogUpload=true"
+        @download="download"
+      />
+      <v-btn
+        class="text-capitalize ms-2"
+        :disabled="!canDelete"
+        outlined
+        @click.stop="dialogDelete=true"
+      >
+        {{ $t('generic.delete') }}
+      </v-btn>
+      <v-dialog v-model="dialogCreate">
+        <form-create
+          v-model="editedItem"
+          @cancel="close"
+          @save="save"
+        />
+      </v-dialog>
+      <v-dialog v-model="dialogUpload">
+        <form-upload
+          @cancel="dialogUpload=false"
+          @upload="upload"
+        />
+      </v-dialog>
+      <v-dialog v-model="dialogDelete">
+        <form-delete
+          :selected="selected"
+          @cancel="dialogDelete=false"
+          @remove="remove"
+        />
+      </v-dialog>
+    </v-card-title>
+    <label-list
+      v-model="selected"
+      :items="items"
+      :is-loading="isLoading"
+      @edit="editItem"
+    />
   </v-card>
 </template>
 
-<script>
-import LabelList from '@/components/label/LabelList'
+<script lang="ts">
+import Vue from 'vue'
+import { LabelDTO } from '@/services/application/label.service'
+import ActionMenu from '@/components/label/ActionMenu.vue'
+import FormCreate from '@/components/label/FormCreate.vue'
+import FormDelete from '@/components/label/FormDelete.vue'
+import FormUpload from '@/components/label/FormUpload.vue'
+import LabelList from '@/components/label/LabelList.vue'
 
-export default {
+export default Vue.extend({
   layout: 'project',
 
   components: {
+    ActionMenu,
+    FormCreate,
+    FormDelete,
+    FormUpload,
     LabelList
   },
 
+  data() {
+    return {
+      dialogCreate: false,
+      dialogDelete: false,
+      dialogUpload: false,
+      editedIndex: -1,
+      editedItem: {
+        text: '',
+        prefix_key: null,
+        suffix_key: null,
+        background_color: '#2196F3',
+        text_color: '#ffffff'
+      } as LabelDTO,
+      defaultItem: {
+        text: '',
+        prefix_key: null,
+        suffix_key: null,
+        background_color: '#2196F3',
+        text_color: '#ffffff'
+      } as LabelDTO,
+      items: [] as LabelDTO[],
+      selected: [] as LabelDTO[],
+      isLoading: false
+    }
+  },
+
+  computed: {
+    canDelete(): boolean {
+      return this.selected.length > 0
+    },
+    projectId(): string {
+      return this.$route.params.id
+    }
+  },
+
+  created() {
+    this.list()
+  },
+
+  methods: {
+    async list() {
+      this.isLoading = true
+      this.items = await this.$services.label.list(this.projectId)
+      this.isLoading = false
+    },
+
+    async create(item: LabelDTO) {
+      await this.$services.label.create(this.projectId, item)
+      this.list()
+      this.dialogCreate = false
+    },
+
+    async update(item: LabelDTO) {
+      await this.$services.label.update(this.projectId, item)
+      this.list()
+      this.dialogCreate = false
+    },
+
+    async remove() {
+      await this.$services.label.bulkDelete(this.projectId, this.selected)
+      this.list()
+      this.dialogDelete = false
+      this.selected = []
+    },
+
+    async download() {
+      await this.$services.label.export(this.projectId)
+    },
+
+    async upload(file: File) {
+      await this.$services.label.upload(this.projectId, file)
+      this.list()
+      this.dialogUpload = false
+    },
+
+    editItem(item: LabelDTO) {
+      this.editedIndex = this.items.indexOf(item)
+      this.editedItem = Object.assign({}, item)
+      this.dialogCreate = true
+    },
+
+    close() {
+      this.dialogCreate = false
+      this.$nextTick(() => {
+        this.editedItem = Object.assign({}, this.defaultItem)
+        this.editedIndex = -1
+      })
+    },
+
+    save() {
+      if (this.editedIndex > -1) {
+        this.update(this.editedItem)
+      } else {
+        this.create(this.editedItem)
+      }
+      this.close()
+    }
+  },
+
   validate({ params }) {
     return /^\d+$/.test(params.id)
   }
-}
+})
 </script>
+
+<style scoped>
+::v-deep .v-dialog {
+  width: 800px;
+}
+</style>