Merge pull request #1400 from doccano/fix/menu

Hide label and relation from the sidebar

frontend/components/layout/TheSideBar.vue

@@ -46,6 +46,11 @@ export default {
       type: Object,
       default: () => {},
       required: true
+    },
+    project: {
+      type: Object,
+      default: () => {},
+      required: true
     }
   },
 
@@ -58,24 +63,66 @@ export default {
   computed: {
     filteredItems() {
       const items = [
-        { icon: 'mdi-home', text: this.$t('projectHome.home'), link: '', adminOnly: false },
-        { icon: 'mdi-database', text: this.$t('dataset.dataset'), link: 'dataset', adminOnly: true },
-        { icon: 'label', text: this.$t('labels.labels'), link: 'labels', adminOnly: true },
-        { icon: 'label', text: 'Relations', link: 'links', adminOnly: true },
-        { icon: 'person', text: this.$t('members.members'), link: 'members', adminOnly: true },
-        { icon: 'mdi-comment-account-outline', text: 'Comments', link: 'comments', adminOnly: true },
-        { icon: 'mdi-book-open-outline', text: this.$t('guideline.guideline'), link: 'guideline', adminOnly: true },
-        { icon: 'mdi-chart-bar', text: this.$t('statistics.statistics'), link: 'statistics', adminOnly: true },
-        { icon: 'mdi-cog', text: this.$t('settings.title'), link: 'settings', adminOnly: true }
+        {
+          icon: 'mdi-home',
+          text: this.$t('projectHome.home'),
+          link: '',
+          isVisible: true
+        },
+        {
+          icon: 'mdi-database',
+          text: this.$t('dataset.dataset'),
+          link: 'dataset',
+          isVisible: this.role.is_project_admin
+        },
+        {
+          icon: 'label',
+          text: this.$t('labels.labels'),
+          link: 'labels',
+          isVisible: this.role.is_project_admin && this.project.canDefineLabel
+        },
+        {
+          icon: 'label',
+          text: 'Relations',
+          link: 'links',
+          isVisible: this.role.is_project_admin && this.project.canDefineRelation
+        },
+        {
+          icon: 'person',
+          text: this.$t('members.members'),
+          link: 'members',
+          isVisible: this.role.is_project_admin
+        },
+        {
+          icon: 'mdi-comment-account-outline',
+          text: 'Comments',
+          link: 'comments',
+          isVisible: this.role.is_project_admin
+        },
+        {
+          icon: 'mdi-book-open-outline',
+          text: this.$t('guideline.guideline'),
+          link: 'guideline',
+          isVisible: this.role.is_project_admin
+        },
+        {
+          icon: 'mdi-chart-bar',
+          text: this.$t('statistics.statistics'),
+          link: 'statistics',
+          isVisible: this.role.is_project_admin
+        },
+        {
+          icon: 'mdi-cog',
+          text: this.$t('settings.title'),
+          link: 'settings',
+          isVisible: this.role.is_project_admin
+        }
       ]
-      return items.filter(item => this.isVisible(item))
+      return items.filter(item => item.isVisible)
     }
   },
 
   methods: {
-    isVisible(item) {
-      return !item.adminOnly || this.role.is_project_admin
-    },
     toLabeling() {
       const query = this.$services.option.findOption(this.$route.params.id)
       this.$router.push({

frontend/domain/models/project/project.ts

@@ -90,6 +90,22 @@ export class ProjectReadItem {
     return role && !role.is_annotator
   }
 
+  get canDefineLabel() {
+    const allowedProjectTypes = [
+      'DocumentClassification',
+      'SequenceLabeling',
+      'ImageClassification'
+    ]
+    return allowedProjectTypes.includes(this.project_type)
+  }
+
+  get canDefineRelation() {
+    const allowedProjectTypes = [
+      'SequenceLabeling'
+    ]
+    return allowedProjectTypes.includes(this.project_type)
+  }
+
   get filterOption() {
     if (this.project_type === 'DocumentClassification') {
       return 'categories__isnull'

frontend/layouts/project.vue

@@ -15,6 +15,7 @@
       <the-side-bar
         :link="getLink"
         :role="getCurrentUserRole"
+        :project="currentProject"
       />
     </v-navigation-drawer>
 
@@ -55,7 +56,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters('projects', ['getLink', 'getCurrentUserRole'])
+    ...mapGetters('projects', ['getLink', 'getCurrentUserRole', 'currentProject'])
   }
 }
 </script>

frontend/layouts/workspace.vue

@@ -14,6 +14,7 @@
       <the-side-bar
         :link="getLink"
         :role="getCurrentUserRole"
+        :project="currentProject"
       />
     </v-navigation-drawer>
 
@@ -43,7 +44,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters('projects', ['getLink', 'getCurrentUserRole'])
+    ...mapGetters('projects', ['getLink', 'getCurrentUserRole', 'currentProject'])
   },
   
   watch: {

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

@@ -56,6 +56,7 @@ import FormDelete from '@/components/label/FormDelete.vue'
 import FormUpload from '@/components/label/FormUpload.vue'
 import LabelList from '@/components/label/LabelList.vue'
 import { LabelDTO } from '~/services/application/label/labelData'
+import { ProjectDTO } from '~/services/application/project/projectData'
 
 export default Vue.extend({
   layout: 'project',
@@ -183,8 +184,14 @@ export default Vue.extend({
     }
   },
 
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+  validate({ params, app }) {
+    if (/^\d+$/.test(params.id)) {
+      return app.$services.project.findById(params.id)
+      .then((res:ProjectDTO) => {
+        return res.canDefineLabel
+      })
+    }
+    return false
   }
 })
 </script>

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

@@ -46,6 +46,7 @@ import FormCreate from '@/components/links/FormCreate.vue'
 import FormDelete from '@/components/links/FormDelete.vue'
 import LinksList from '~/components/links/LinksList.vue'
 import { LinkTypeDTO } from '~/services/application/links/linkData'
+import { ProjectDTO } from '~/services/application/project/projectData'
 
 export default Vue.extend({
   layout: 'project',
@@ -142,8 +143,14 @@ export default Vue.extend({
     }
   },
 
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+  validate({ params, app }) {
+    if (/^\d+$/.test(params.id)) {
+      return app.$services.project.findById(params.id)
+      .then((res:ProjectDTO) => {
+        return res.canDefineRelation
+      })
+    }
+    return false
   }
 })
 </script>

frontend/services/application/project/projectData.ts

@@ -15,6 +15,8 @@ export class ProjectDTO {
   permitApprove: Boolean
   filterOption: String
   tags: Object[]
+  canDefineLabel: Boolean
+  canDefineRelation: Boolean
 
   constructor(item: ProjectReadItem) {
     this.id = item.id
@@ -31,6 +33,8 @@ export class ProjectDTO {
     this.permitApprove = item.permitApprove
     this.filterOption = item.filterOption
     this.tags = item.tags
+    this.canDefineLabel = item.canDefineLabel
+    this.canDefineRelation = item.canDefineRelation
   }
 }