From 723c38ca586e2a85ba0af7ba430ab9f0aa1b625c Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 24 Feb 2022 09:01:32 +0900
Subject: [PATCH] Enable to create relation type in frontend

---
 .../projects/_id/labels/_label_id/edit.vue    |  6 ++--
 frontend/pages/projects/_id/labels/add.vue    |  6 ++--
 frontend/pages/projects/_id/labels/import.vue |  6 ++--
 frontend/pages/projects/_id/labels/index.vue  | 30 ++++++++++++-------
 frontend/plugins/services.ts                  |  9 ++----
 5 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/frontend/pages/projects/_id/labels/_label_id/edit.vue b/frontend/pages/projects/_id/labels/_label_id/edit.vue
index faccf5a4..fe1810e9 100644
--- a/frontend/pages/projects/_id/labels/_label_id/edit.vue
+++ b/frontend/pages/projects/_id/labels/_label_id/edit.vue
@@ -29,7 +29,7 @@ export default Vue.extend({
   layout: 'project',
 
   validate({ params, query, app }) {
-    if (!['category', 'span'].includes((query.type as string))) {
+    if (!['category', 'span', 'relation'].includes((query.type as string))) {
       return false
     }
     if (/^\d+$/.test(params.id)) {
@@ -67,8 +67,10 @@ export default Vue.extend({
       const type = this.$route.query.type
       if (type === 'category') {
         return this.$services.categoryType
-      } else {
+      } else if (type === 'span'){
         return this.$services.spanType
+      } else {
+        return this.$services.relationType
       }
     },
   },
diff --git a/frontend/pages/projects/_id/labels/add.vue b/frontend/pages/projects/_id/labels/add.vue
index 429b5db4..223f56b7 100644
--- a/frontend/pages/projects/_id/labels/add.vue
+++ b/frontend/pages/projects/_id/labels/add.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
   layout: 'project',
 
   validate({ params, query, app }) {
-    if (!['category', 'span'].includes((query.type as string))) {
+    if (!['category', 'span', 'relation'].includes((query.type as string))) {
       return false
     }
     if (/^\d+$/.test(params.id)) {
@@ -80,8 +80,10 @@ export default Vue.extend({
       const type = this.$route.query.type
       if (type === 'category') {
         return this.$services.categoryType
-      } else {
+      } else if (type === 'span') {
         return this.$services.spanType
+      } else {
+        return this.$services.relationType
       }
     },
   },
diff --git a/frontend/pages/projects/_id/labels/import.vue b/frontend/pages/projects/_id/labels/import.vue
index ff0dade3..162f0c5d 100644
--- a/frontend/pages/projects/_id/labels/import.vue
+++ b/frontend/pages/projects/_id/labels/import.vue
@@ -19,7 +19,7 @@ export default Vue.extend({
   layout: 'project',
 
   validate({ params, query, app }) {
-    if (!['category', 'span'].includes((query.type as string))) {
+    if (!['category', 'span', 'relation'].includes((query.type as string))) {
       return false
     }
     if (/^\d+$/.test(params.id)) {
@@ -46,8 +46,10 @@ export default Vue.extend({
       const type = this.$route.query.type
       if (type === 'category') {
         return this.$services.categoryType
-      } else {
+      } else if (type === 'span') {
         return this.$services.spanType
+      } else {
+        return this.$services.relationType
       }
     },
   },
diff --git a/frontend/pages/projects/_id/labels/index.vue b/frontend/pages/projects/_id/labels/index.vue
index e15f59bb..fc572677 100644
--- a/frontend/pages/projects/_id/labels/index.vue
+++ b/frontend/pages/projects/_id/labels/index.vue
@@ -1,8 +1,14 @@
 <template>
   <v-card>
     <v-tabs v-if="hasMultiType" v-model="tab">
-      <v-tab class="text-capitalize">Category</v-tab>
-      <v-tab class="text-capitalize">Span</v-tab>
+      <template v-if="isIntentDetectionAndSlotFilling">
+        <v-tab class="text-capitalize">Category</v-tab>
+        <v-tab class="text-capitalize">Span</v-tab>
+      </template>
+      <template v-else>
+        <v-tab class="text-capitalize">Span</v-tab>
+        <v-tab class="text-capitalize">Relation</v-tab>
+      </template>
     </v-tabs>
     <v-card-title>
       <action-menu
@@ -68,7 +74,7 @@ export default Vue.extend({
       items: [] as LabelDTO[],
       selected: [] as LabelDTO[],
       isLoading: false,
-      tab: null,
+      tab: 0,
       project: {} as ProjectDTO,
     }
   },
@@ -84,18 +90,22 @@ export default Vue.extend({
 
     hasMultiType(): boolean {
       if ('projectType' in this.project) {
-        return this.project.projectType === 'IntentDetectionAndSlotFilling'
+        return this.isIntentDetectionAndSlotFilling || !!this.project.useRelation
       } else {
         return false
       }
     },
 
+    isIntentDetectionAndSlotFilling(): boolean {
+      return this.project.projectType === 'IntentDetectionAndSlotFilling'
+    },
+
     labelType(): string {
       if (this.hasMultiType) {
-        if (this.tab === 0) {
-          return 'category'
+        if (this.isIntentDetectionAndSlotFilling){
+          return ['category', 'span'][this.tab!]
         } else {
-          return 'span'
+          return ['span', 'relation'][this.tab!]
         }
       } else if (this.project.projectType.endsWith('Classification')) {
         return 'category'
@@ -109,10 +119,10 @@ export default Vue.extend({
         return
       }
       if (this.hasMultiType) {
-        if (this.tab === 0) {
-          return this.$services.categoryType
+        if (this.isIntentDetectionAndSlotFilling) {
+          return [this.$services.categoryType, this.$services.spanType][this.tab!]
         } else {
-          return this.$services.spanType
+          return [this.$services.spanType, this.$services.relationType][this.tab!]
         }
       } else if (this.project.projectType.endsWith('Classification')) {
         return this.$services.categoryType
diff --git a/frontend/plugins/services.ts b/frontend/plugins/services.ts
index c0d814e3..9635db24 100644
--- a/frontend/plugins/services.ts
+++ b/frontend/plugins/services.ts
@@ -42,13 +42,11 @@ import { DownloadFormatApplicationService } from '~/services/application/downloa
 import { APITagRepository } from '~/repositories/tag/apiTagRepository'
 import { TagApplicationService } from '~/services/application/tag/tagApplicationService'
 import {ApiLinkRepository} from "~/repositories/links/apiLinkRepository";
-import {LinkTypesApplicationService} from "~/services/application/links/linkTypesApplicationService";
-import {ApiLinkTypesRepository} from "~/repositories/links/apiLinkTypesRepository";
 
 export interface Services {
   categoryType: LabelApplicationService,
   spanType: LabelApplicationService,
-  linkTypes: LinkTypesApplicationService,
+  relationType: LabelApplicationService,
   member: MemberApplicationService,
   user: UserApplicationService,
   role: RoleApplicationService,
@@ -78,7 +76,6 @@ declare module 'vue/types/vue' {
 }
 
 const plugin: Plugin = (context, inject) => {
-  const linkTypesRepository = new ApiLinkTypesRepository()
   const memberRepository     = new APIMemberRepository()
   const userRepository       = new APIUserRepository()
   const roleRepository       = new APIRoleRepository()
@@ -103,7 +100,7 @@ const plugin: Plugin = (context, inject) => {
 
   const categoryType  = new LabelApplicationService(new APILabelRepository('category-type'))
   const spanType      = new LabelApplicationService(new APILabelRepository('span-type'))
-  const linkTypes = new LinkTypesApplicationService(linkTypesRepository)
+  const relationType      = new LabelApplicationService(new APILabelRepository('relation-type'))
   const member     = new MemberApplicationService(memberRepository)
   const user       = new UserApplicationService(userRepository)
   const role       = new RoleApplicationService(roleRepository)
@@ -128,7 +125,7 @@ const plugin: Plugin = (context, inject) => {
   const services: Services = {
     categoryType,
     spanType,
-    linkTypes,
+    relationType,
     member,
     user,
     role,