Set visibility to the side bar according to the project role

Author: Hironsan

frontend/components/organisms/layout/TheSideBar.vue

@@ -11,14 +11,8 @@
       Start annotation
     </v-btn>
     <template v-for="(item, i) in items">
-      <v-divider
-        v-if="item.divider"
-        :key="i"
-        dark
-        class="my-4"
-      />
       <v-list-item
-        v-else
+        v-if="isVisible(item)"
         :key="i"
         @click="$router.push('/projects/' + $route.params.id + '/' + item.link)"
       >
@@ -44,18 +38,23 @@ export default {
       type: String,
       default: '',
       required: true
+    },
+    role: {
+      type: Object,
+      default: () => {},
+      required: true
     }
   },
 
   data() {
     return {
       items: [
-        { icon: 'mdi-home', text: 'Home', link: '' },
-        { icon: 'mdi-database', text: 'Dataset', link: 'dataset' },
-        { icon: 'label', text: 'Labels', link: 'labels' },
-        { icon: 'person', text: 'Members', link: 'members' },
-        { icon: 'mdi-book-open-outline', text: 'Guideline', link: 'guideline' },
-        { icon: 'mdi-chart-bar', text: 'Statistics', link: 'statistics' }
+        { icon: 'mdi-home', text: 'Home', link: '', adminOnly: false },
+        { icon: 'mdi-database', text: 'Dataset', link: 'dataset', adminOnly: true },
+        { icon: 'label', text: 'Labels', link: 'labels', adminOnly: true },
+        { icon: 'person', text: 'Members', link: 'members', adminOnly: true },
+        { icon: 'mdi-book-open-outline', text: 'Guideline', link: 'guideline', adminOnly: true },
+        { icon: 'mdi-chart-bar', text: 'Statistics', link: 'statistics', adminOnly: true }
       ]
     }
   },
@@ -64,6 +63,12 @@ export default {
     to() {
       return `/projects/${this.$route.params.id}/${this.link}`
     }
+  },
+
+  methods: {
+    isVisible(item) {
+      return !item.adminOnly || this.role.is_project_admin
+    }
   }
 }
 </script>

frontend/layouts/annotation.vue

@@ -12,7 +12,10 @@
       clipped
       color=""
     >
-      <the-side-bar :link="getLink" />
+      <the-side-bar
+        :link="getLink"
+        :role="getCurrentUserRole"
+      />
     </v-navigation-drawer>
 
     <nuxt />
@@ -36,7 +39,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters('projects', ['getLink'])
+    ...mapGetters('projects', ['getLink', 'getCurrentUserRole'])
   },
 
   created() {

frontend/layouts/project.vue

@@ -12,7 +12,10 @@
       clipped
       color=""
     >
-      <the-side-bar :link="getLink" />
+      <the-side-bar
+        :link="getLink"
+        :role="getCurrentUserRole"
+      />
     </v-navigation-drawer>
 
     <v-content>
@@ -50,7 +53,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters('projects', ['getLink'])
+    ...mapGetters('projects', ['getLink', 'getCurrentUserRole'])
   },
 
   created() {

frontend/store/projects.js

@@ -14,6 +14,9 @@ export const getters = {
   currentProject(state) {
     return state.current
   },
+  getCurrentUserRole(state) {
+    return state.current.current_users_role || {}
+  },
   getFilterOption(state) {
     if (state.current.project_type === 'DocumentClassification') {
       return 'doc_annotations__isnull'