Merge pull request #291 from VariantEffect/estelle/userAuthoriazation…

…Check Solve any users can click edit or add button in experiment, score set and experiment set pages.
VariantEffect · Oct 11, 2024 · 07d3d34 · 07d3d34
2 parents 579260a + 3cf8bd2
commit 07d3d34
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 11 deletions.
diff --git a/src/components/screens/ExperimentSetView.vue b/src/components/screens/ExperimentSetView.vue
@@ -4,7 +4,7 @@
       <div class="mave-1000px-col">
         <div class="mave-screen-title-bar">
           <div class="mave-screen-title">{{item.urn}}</div>
-          <div v-if="userIsAuthenticated">
+          <div v-if="userIsAuthenticated & userIsAuthorized">
             <div class="mave-screen-title-controls">
               <Button class="p-button-sm" @click="addExperiment">Add an experiment</Button>
             </div>
@@ -40,8 +40,10 @@
 <script>
 
 import _ from 'lodash'
+import axios from 'axios'
 import {marked} from 'marked'
 import Button from 'primevue/button'
+import config from '@/config'
 
 import DefaultLayout from '@/components/layout/DefaultLayout'
 import PageLoading from '@/components/common/PageLoading'
@@ -73,10 +75,15 @@ export default {
 
   data () {
     return {
-      associatedExperiments: []
+      associatedExperiments: [],
+      userIsAuthorized: false
     }
   },
 
+  mounted: async function() {
+    await this.checkUserAuthorization()
+  },
+
   watch: {
     itemId: {
       handler: function(newValue, oldValue) {
@@ -94,6 +101,18 @@ export default {
     addExperiment: function() {
       this.$router.push({name: 'createExperimentInExperimentSet', params: {urn: this.item.urn}})
     },
+    checkUserAuthorization: async function() {
+      await this.checkAuthorization()
+    },
+    checkAuthorization: async function() {
+      try {
+        // this response should be true to get authorization
+        let response = await axios.get(`${config.apiBaseUrl}/permissions/user-is-permitted/experiment-set/${this.itemId}/add_experiment`)
+        this.userIsAuthorized = response.data
+      } catch (err) {
+        console.log(`Error to get authorization:`, err)
+      }
+    },
     markdownToHtml: function(markdown) {
       return marked(markdown)
     },
@@ -104,6 +123,7 @@ export default {
 
 }
 
+
 </script>
 
 <style scoped>

diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
@@ -6,12 +6,12 @@
           <div class="mave-screen-title">{{ item.title || 'Untitled experiment' }}</div>
           <div v-if="userIsAuthenticated">
             <div v-if="!item.publishedDate" class="mave-screen-title-controls">
-              <Button class="p-button-sm" @click="addScoreSet">Add a score set</Button>
-              <Button class="p-button-sm" @click="editItem">Edit</Button>
-              <Button class="p-button-sm p-button-danger" @click="deleteItem">Delete</Button>
+              <Button v-if="userIsAuthorized.add_score_set" class="p-button-sm" @click="addScoreSet">Add a score set</Button>
+              <Button v-if="userIsAuthorized.update" class="p-button-sm" @click="editItem">Edit</Button>
+              <Button v-if="userIsAuthorized.delete" class="p-button-sm p-button-danger" @click="deleteItem">Delete</Button>
             </div>
             <div v-else>
-              <Button class="p-button-sm" @click="addScoreSet">Add a score set</Button>
+              <Button v-if="userIsAuthorized.add_score_set" class="p-button-sm" @click="addScoreSet">Add a score set</Button>
             </div>
           </div>
         </div>
@@ -259,8 +259,17 @@ export default {
     dialogVisible: [],
     readMore: true,
     fullDescription: [],
+    userIsAuthorized: {
+      add_score_set: false,
+      delete: false,
+      update: false,
+    }
   }),
 
+  mounted: async function() {
+    await this.checkUserAuthorization()
+  },
+
   computed: {
     contributors: function() {
       return _.sortBy(
@@ -289,6 +298,20 @@ export default {
     addScoreSet: function() {
       this.$router.push({name: 'createScoreSetInExperiment', params: {urn: this.item.urn}})
     },
+    checkUserAuthorization: async function() {
+      await this.checkAuthorization()
+    },
+    checkAuthorization: async function() {
+      const actions = ['add_score_set', 'delete', 'update']
+      try {
+        for (const action of actions) {
+          let response = await axios.get(`${config.apiBaseUrl}/permissions/user-is-permitted/experiment/${this.itemId}/${action}`)
+          this.userIsAuthorized[action] = response.data
+        }
+      } catch (err) {
+        console.log(`Error to get authorization:`, err)
+      }
+    },
     editItem: function () {
       if (this.item) {
         this.$router.replace({ path: `/experiments/${this.item.urn}/edit` })

diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
@@ -52,12 +52,12 @@
           <div class="mave-screen-title">{{ item.title || 'Untitled score set' }}</div>
           <div v-if="userIsAuthenticated">
             <div v-if="!item.publishedDate" class="mave-screen-title-controls">
-              <Button class="p-button-sm" @click="editItem">Edit</Button>
-              <Button class="p-button-sm" @click="publishItem">Publish</Button>
-              <Button class="p-button-sm p-button-danger" @click="deleteItem">Delete</Button>
+              <Button v-if="userIsAuthorized.update" class="p-button-sm" @click="editItem">Edit</Button>
+              <Button v-if="userIsAuthorized.publish" class="p-button-sm" @click="publishItem">Publish</Button>
+              <Button v-if="userIsAuthorized.delete" class="p-button-sm p-button-danger" @click="deleteItem">Delete</Button>
             </div>
             <div v-if="item.publishedDate" class="mave-screen-title-controls">
-              <Button class="p-button-sm" @click="editItem">Edit</Button>
+              <Button v-if="userIsAuthorized.update" class="p-button-sm" @click="editItem">Edit</Button>
             </div>
           </div>
         </div>
@@ -496,8 +496,16 @@ export default {
     readMore: true,
     showHeatmap: true,
     heatmapExists: false,
-    selectedVariant: null
+    selectedVariant: null,
+    userIsAuthorized: {
+      delete: false,
+      publish: false,
+      update: false,
+    }
   }),
+  mounted: async function() {
+    await this.checkUserAuthorization()
+  },
   watch: {
     itemId: {
       handler: function(newValue, oldValue) {
@@ -528,6 +536,21 @@ export default {
   },
   methods: {
     variantNotNullOrNA,
+    checkUserAuthorization: async function() {
+      await this.checkAuthorization()
+    },
+    checkAuthorization: async function() {
+      // Response should be true to get authorization
+      const actions = ['delete', 'publish', 'update']
+      try {
+        for (const action of actions) {
+          let response = await axios.get(`${config.apiBaseUrl}/permissions/user-is-permitted/score-set/${this.itemId}/${action}`)
+          this.userIsAuthorized[action] = response.data
+        }
+      } catch (err) {
+        console.log(`Error to get authorization:`, err)
+      }
+    },
     editItem: function() {
       if (this.item) {
         this.$router.replace({ path: `/score-sets/${this.item.urn}/edit` })