frontend/Collaborators.vue: enable/show edit functions only for manager

Issue: ecamp#1415
BacLuc · Jun 6, 2021 · e45f9f8 · e45f9f8
1 parent 6afa4cb
commit e45f9f8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/frontend/src/components/camp/CollaboratorListItem.vue b/frontend/src/components/camp/CollaboratorListItem.vue
@@ -15,6 +15,7 @@
       v-if="collaborator.status === 'invited'"
       class="ml-2">
       <icon-button
+        v-if="!disabled"
         color="normal"
         icon="mdi-refresh"
         :animate="resendingEmail"
@@ -36,10 +37,12 @@
         item-text="translation"
         :my="0"
         dense
-        vee-rules="required" />
+        vee-rules="required"
+        :disabled="disabled" />
     </v-list-item-action>
     <v-list-item-action class="ml-2">
       <button-delete
+        v-if="!disabled"
         icon="mdi-cancel"
         @click="api.del(collaborator)">
         {{ $tc("components.camp.collaboratorListItem.deactivate") }}
@@ -58,7 +61,8 @@ export default {
   name: 'CollaboratorListItem',
   components: { ButtonDelete, ApiSelect, UserAvatar, IconButton },
   props: {
-    collaborator: { type: Object, required: true }
+    collaborator: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data: () => ({
     resendingEmail: false

diff --git a/frontend/src/components/camp/InactiveCollaboratorListItem.vue b/frontend/src/components/camp/InactiveCollaboratorListItem.vue
@@ -12,14 +12,16 @@
       </v-list-item-subtitle>
     </v-list-item-content>
     <v-list-item-action class="ml-5">
-      <icon-button color="normal"
-                   icon="mdi-refresh"
-                   @click="api.patch(collaborator, {status: 'invited'})">
+      <icon-button
+        v-if="!disabled"
+        color="normal"
+        icon="mdi-refresh"
+        @click="api.patch(collaborator, {status: 'invited'})">
         {{ $tc('components.camp.inactiveCampCollaboratorListItem.inviteAgain') }}
       </icon-button>
     </v-list-item-action>
     <v-list-item-action>
-      <dialog-entity-delete :entity="collaborator">
+      <dialog-entity-delete v-if="!disabled" :entity="collaborator">
         <template #activator="{ on }">
           <button-delete v-on="on" />
         </template>
@@ -50,7 +52,8 @@ export default {
   name: 'InactiveCollaboratorListItem',
   components: { IconButton, ButtonDelete, DialogEntityDelete, UserAvatar },
   props: {
-    collaborator: { type: Object, required: true }
+    collaborator: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   }
 }
 </script>

diff --git a/frontend/src/views/camp/Collaborators.vue b/frontend/src/views/camp/Collaborators.vue
@@ -9,27 +9,30 @@ Displays collaborators of a single camp.
           <v-skeleton-loader v-if="collaborators.length <= 0" type="list-item-avatar-two-line@3" class="px-0" />
           <collaborator-list-item
             v-for="collaborator in establishedCollaborators"
-            :key="collaborator._meta.self" :collaborator="collaborator" />
+            :key="collaborator._meta.self" :collaborator="collaborator"
+            :disabled="!isManager" />
         </v-list>
       </content-group>
 
       <content-group v-if="invitedCollaborators.length > 0" :title="$tc('views.camp.collaborators.openInvitations')">
         <v-list>
           <collaborator-list-item
             v-for="collaborator in invitedCollaborators"
-            :key="collaborator._meta.self" :collaborator="collaborator" />
+            :key="collaborator._meta.self" :collaborator="collaborator"
+            :disabled="!isManager" />
         </v-list>
       </content-group>
 
       <content-group v-if="inactiveCollaborators.length > 0" :title="$tc('views.camp.collaborators.inactiveCollaborators')">
         <v-list>
           <inactive-collaborator-list-item
             v-for="collaborator in inactiveCollaborators"
-            :key="collaborator._meta.self" :collaborator="collaborator" />
+            :key="collaborator._meta.self" :collaborator="collaborator"
+            :disabled="!isManager" />
         </v-list>
       </content-group>
 
-      <content-group :title="$tc('views.camp.collaborators.invite')">
+      <content-group v-if="isManager" :title="$tc('views.camp.collaborators.invite')">
         <v-form @submit.prevent="invite">
           <v-container>
             <v-row
@@ -78,6 +81,7 @@ import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 import ETextField from '@/components/form/base/ETextField.vue'
 import ESelect from '@/components/form/base/ESelect.vue'
 import InactiveCollaboratorListItem from '@/components/camp/InactiveCollaboratorListItem.vue'
+import { campRoleMixin } from '@/mixins/campRoleMixin'
 
 const DEFAULT_INVITE_ROLE = 'member'
 
@@ -92,6 +96,7 @@ export default {
     ESelect,
     InactiveCollaboratorListItem
   },
+  mixins: [campRoleMixin],
   props: {
     camp: { type: Function, required: true }
   },