Add composables for label types

frontend/composables/labelType/useFormCreate.ts

@@ -0,0 +1,29 @@
+import { ref, useRouter } from '@nuxtjs/composition-api'
+import { LabelRepository } from '@/domain/models/label/labelRepository'
+import { LabelItem } from '@/domain/models/label/label'
+import { useLabelType } from './useLabelType'
+
+export const useFormCreate = (repository: LabelRepository) => {
+  const { labelTypes, createLabelType, fetchLabelTypes } = useLabelType(repository)
+  const editedItem = ref<LabelItem>(LabelItem.create())
+  const router = useRouter()
+
+  const save = async (projectId: string) => {
+    await createLabelType(projectId, editedItem.value)
+    router.push(`/projects/${projectId}/labels`)
+  }
+
+  const saveAndAnother = async (projectId: string) => {
+    await createLabelType(projectId, editedItem.value)
+    editedItem.value = LabelItem.create()
+    await fetchLabelTypes(projectId)
+  }
+
+  return {
+    fetchLabelTypes,
+    save,
+    saveAndAnother,
+    labelTypes,
+    editedItem
+  }
+}

frontend/composables/labelType/useFormEdit.ts

@@ -0,0 +1,24 @@
+import { ref, useRouter } from '@nuxtjs/composition-api'
+import { LabelRepository } from '@/domain/models/label/labelRepository'
+import { LabelItem } from '@/domain/models/label/label'
+import { useLabelType } from './useLabelType'
+
+export const useFormEdit = (repository: LabelRepository) => {
+  const { labelTypes, updateLabelType, fetchLabelTypes, findLabelTypeById } =
+    useLabelType(repository)
+  const editedItem = ref<LabelItem>(LabelItem.create())
+  const router = useRouter()
+
+  const save = async (projectId: string): Promise<void> => {
+    await updateLabelType(projectId, editedItem.value)
+    router.push(`/projects/${projectId}/labels`)
+  }
+
+  return {
+    fetchLabelTypes,
+    findLabelTypeById,
+    save,
+    labelTypes,
+    editedItem
+  }
+}

frontend/composables/labelType/useLabelType.ts

@@ -0,0 +1,51 @@
+import { computed, ref } from '@nuxtjs/composition-api'
+import { LabelRepository } from '@/domain/models/label/labelRepository'
+import { LabelItem } from '@/domain/models/label/label'
+
+export const useLabelType = (repository: LabelRepository) => {
+  const labelTypes = ref<LabelItem[]>([])
+  const isLoading = ref(false)
+
+  const fetchLabelTypes = async (projectId: string) => {
+    isLoading.value = true
+    labelTypes.value = await repository.list(projectId)
+    isLoading.value = false
+  }
+
+  const createLabelType = async (projectId: string, labelType: LabelItem) => {
+    await repository.create(projectId, labelType)
+    await fetchLabelTypes(projectId)
+  }
+
+  const updateLabelType = async (projectId: string, labelType: LabelItem) => {
+    await repository.update(projectId, labelType)
+    await fetchLabelTypes(projectId)
+  }
+
+  const deleteLabelTypes = async (projectId: string, items: LabelItem[]) => {
+    await repository.bulkDelete(
+      projectId,
+      items.map((item) => item.id)
+    )
+    await fetchLabelTypes(projectId)
+  }
+
+  const findLabelTypeById = async (projectId: string, labelTypeId: number) => {
+    return await repository.findById(projectId, labelTypeId)
+  }
+
+  const usedShortKeys = computed(() => {
+    return Object.fromEntries(labelTypes.value.map((item) => [item.id, [item.suffixKey]]))
+  })
+
+  return {
+    labelTypes,
+    isLoading,
+    createLabelType,
+    fetchLabelTypes,
+    updateLabelType,
+    deleteLabelTypes,
+    findLabelTypeById,
+    usedShortKeys
+  }
+}

frontend/pages/projects/_id/labels/_label_id/edit.vue

@@ -8,9 +8,10 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { LabelDTO } from '~/services/application/label/labelData'
-import { ProjectDTO } from '~/services/application/project/projectData'
 import FormCreate from '~/components/label/FormCreate.vue'
+import { validateEditPage } from '~/plugins/labelType/validators'
+import { LabelItem } from '~/domain/models/label/label'
+import { LabelRepository } from '~/domain/models/label/labelRepository'
 
 export default Vue.extend({
   components: {
@@ -19,28 +20,12 @@ export default Vue.extend({
 
   layout: 'project',
 
-  validate({ params, query, app }) {
-    if (!['category', 'span', 'relation'].includes(query.type as string)) {
-      return false
-    }
-    if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: ProjectDTO) => {
-        return res.canDefineLabel
-      })
-    }
-    return false
-  },
+  validate: validateEditPage,
 
   data() {
     return {
-      editedItem: {
-        text: '',
-        prefixKey: null,
-        suffixKey: null,
-        backgroundColor: '#73D8FF',
-        textColor: '#ffffff'
-      } as LabelDTO,
-      items: [] as LabelDTO[]
+      editedItem: LabelItem.create(),
+      items: [] as LabelItem[]
     }
   },
 
@@ -49,30 +34,27 @@ export default Vue.extend({
       return this.$route.params.id
     },
 
-    labelId(): string {
-      return this.$route.params.label_id
-    },
-
-    service(): any {
+    repository(): LabelRepository {
       const type = this.$route.query.type
       if (type === 'category') {
-        return this.$services.categoryType
+        return this.$repositories.categoryType
       } else if (type === 'span') {
-        return this.$services.spanType
+        return this.$repositories.spanType
       } else {
-        return this.$services.relationType
+        return this.$repositories.relationType
       }
     }
   },
 
   async created() {
-    this.items = await this.service.list(this.projectId)
-    this.editedItem = await this.service.findById(this.projectId, this.labelId)
+    const labelId = this.$route.params.label_id
+    this.items = await this.repository.list(this.projectId)
+    this.editedItem = await this.repository.findById(this.projectId, parseInt(labelId))
   },
 
   methods: {
     async save() {
-      await this.service.update(this.projectId, this.editedItem)
+      await this.repository.update(this.projectId, this.editedItem)
       this.$router.push(`/projects/${this.projectId}/labels`)
     }
   }

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

@@ -1,6 +1,11 @@
 <template>
-  <form-create v-slot="slotProps" v-bind.sync="editedItem" :items="items">
-    <v-btn :disabled="!slotProps.valid" color="primary" class="text-capitalize" @click="save">
+  <form-create v-slot="slotProps" v-bind.sync="editedItem" :items="labelTypes">
+    <v-btn
+      :disabled="!slotProps.valid"
+      color="primary"
+      class="text-capitalize"
+      @click="save(projectId)"
+    >
       Save
     </v-btn>
 
@@ -9,7 +14,7 @@
       color="primary"
       style="text-transform: none"
       outlined
-      @click="saveAndAnother"
+      @click="saveAndAnother(projectId)"
     >
       Save and add another
     </v-btn>
@@ -17,63 +22,34 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { ProjectDTO } from '~/services/application/project/projectData'
-import { LabelItem } from '~/domain/models/label/label'
-import { LabelRepository } from '~/domain/models/label/labelRepository'
+import { useContext, defineComponent } from '@nuxtjs/composition-api'
 import FormCreate from '~/components/label/FormCreate.vue'
+import { useFormCreate } from '~/composables/labelType/useFormCreate'
+import { validateItemPage } from '~/plugins/labelType/validators'
 
-export default Vue.extend({
+export default defineComponent({
   components: {
     FormCreate
   },
 
   layout: 'project',
 
-  validate({ params, query, app }) {
-    if (!['category', 'span', 'relation'].includes(query.type as string)) {
-      return false
-    }
-    if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: ProjectDTO) => {
-        return res.canDefineLabel
-      })
-    }
-    return false
-  },
-
-  data() {
-    return {
-      editedItem: LabelItem.create(),
-      items: [] as LabelItem[]
-    }
-  },
-
-  computed: {
-    projectId(): string {
-      return this.$route.params.id
-    },
+  validate: validateItemPage,
 
-    repository(): LabelRepository {
-      const type = this.$route.query.type
-      return this.$repositories[`${type}Type`]
-    }
-  },
+  setup() {
+    const { app, params, query } = useContext()
+    const projectId = params.value.id
+    const repository = app.$repositories[`${query.value.type}Type`]
+    const { labelTypes, editedItem, save, saveAndAnother, fetchLabelTypes } =
+      useFormCreate(repository)
+    fetchLabelTypes(projectId)
 
-  async created() {
-    this.items = await this.repository.list(this.projectId)
-  },
-
-  methods: {
-    async save() {
-      await this.repository.create(this.projectId, this.editedItem)
-      this.$router.push(`/projects/${this.projectId}/labels`)
-    },
-
-    async saveAndAnother() {
-      await this.repository.create(this.projectId, this.editedItem)
-      this.editedItem = LabelItem.create()
-      this.items = await this.repository.list(this.projectId)
+    return {
+      projectId,
+      labelTypes,
+      editedItem,
+      save,
+      saveAndAnother
     }
   }
 })

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

@@ -4,8 +4,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ProjectDTO } from '~/services/application/project/projectData'
 import FormImport from '~/components/label/FormImport.vue'
+import { validateItemPage } from '~/plugins/labelType/validators'
 
 export default Vue.extend({
   components: {
@@ -14,17 +14,7 @@ export default Vue.extend({
 
   layout: 'project',
 
-  validate({ params, query, app }) {
-    if (!['category', 'span', 'relation'].includes(query.type as string)) {
-      return false
-    }
-    if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: ProjectDTO) => {
-        return res.canDefineLabel
-      })
-    }
-    return false
-  },
+  validate: validateItemPage,
 
   data() {
     return {

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

@@ -42,13 +42,12 @@ export default Vue.extend({
 
   layout: 'project',
 
-  validate({ params, app }) {
-    if (/^\d+$/.test(params.id)) {
-      return app.$services.project.findById(params.id).then((res: ProjectDTO) => {
-        return res.canDefineLabel
-      })
+  async validate({ params, app }) {
+    if (!/^\d+$/.test(params.id)) {
+      return false
     }
-    return false
+    const project = await app.$services.project.findById(params.id)
+    return project.canDefineLabel
   },
 
   data() {

frontend/plugins/labelType/validators.ts

@@ -0,0 +1,22 @@
+const validateItemPage = async ({ params, query, app }: { params: any; query: any; app: any }) => {
+  if (!/^\d+$/.test(params.id)) {
+    return false
+  }
+  if (!['category', 'span', 'relation'].includes(query.type as string)) {
+    return false
+  }
+  const project = await app.$services.project.findById(params.id)
+  return project.canDefineLabel
+}
+
+const validateEditPage = ({ params, query, app }: { params: any; query: any; app: any }) => {
+  if (!validateItemPage({ params, query, app })) {
+    return false
+  }
+  if (!/^\d+$/.test(params.label_id)) {
+    return false
+  }
+  return true
+}
+
+export { validateItemPage, validateEditPage }