frontend/Admin.vue: disable if user is not manager

Issue: ecamp#1415

frontend/src/components/camp/CampAddress.vue

@@ -9,16 +9,20 @@ Displays address and allows to edit
       <api-form :entity="camp()">
         <api-text-field
           fieldname="addressName"
-          :name="$tc('entity.camp.fields.addressName')" />
+          :name="$tc('entity.camp.fields.addressName')"
+          :disabled="disabled" />
         <api-text-field
           fieldname="addressStreet"
-          :name="$tc('entity.camp.fields.addressStreet')" />
+          :name="$tc('entity.camp.fields.addressStreet')"
+          :disabled="disabled" />
         <api-text-field
           fieldname="addressZipcode"
-          :name="$tc('entity.camp.fields.addressZipcode')" />
+          :name="$tc('entity.camp.fields.addressZipcode')"
+          :disabled="disabled" />
         <api-text-field
           fieldname="addressCity"
-          :name="$tc('entity.camp.fields.addressCity')" />
+          :name="$tc('entity.camp.fields.addressCity')"
+          :disabled="disabled" />
       </api-form>
     </div>
   </content-group>
@@ -36,6 +40,10 @@ export default {
     camp: {
       type: Function,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   }
 }

frontend/src/components/camp/CampCategories.vue

@@ -7,7 +7,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
     <slot name="title">
       <div class="ec-content-group__title py-1 subtitle-1">
         {{ $tc('components.camp.campCategories.title') }}
-        <dialog-category-create :camp="camp()">
+        <dialog-category-create v-if="!disabled" :camp="camp()">
           <template #activator="{ on }">
             <button-add color="secondary" text
                         :hide-label="true"
@@ -30,7 +30,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
             <v-chip dark :color="category.color">
               (1.{{ category.numberingStyle }}) {{ category.short }}: {{ category.name }}
 
-              <dialog-category-edit :camp="camp()" :category="category">
+              <dialog-category-edit v-if="!disabled" :camp="camp()" :category="category">
                 <template #activator="{ on }">
                   <v-icon class="ml-2" size="150%" v-on="on">mdi-pencil</v-icon>
                 </template>
@@ -39,7 +39,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
           </v-list-item-title>
         </v-list-item-content>
 
-        <v-list-item-action style="display: inline">
+        <v-list-item-action v-if="!disabled" style="display: inline">
           <v-item-group>
             <button-edit
               class="mr-1"
@@ -50,7 +50,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
           </v-item-group>
         </v-list-item-action>
 
-        <v-menu offset-y>
+        <v-menu v-if="!disabled" offset-y>
           <template #activator="{ on, attrs }">
             <v-btn icon v-bind="attrs" v-on="on">
               <v-icon>mdi-dots-vertical</v-icon>
@@ -116,7 +116,8 @@ export default {
     ContentGroup
   },
   props: {
-    camp: { type: Function, required: true }
+    camp: { type: Function, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {}

frontend/src/components/camp/CampMaterialLists.vue

@@ -3,7 +3,7 @@
     <slot name="title">
       <div class="ec-content-group__title py-1 subtitle-1">
         {{ $tc('components.camp.campMaterialLists.title') }}
-        <dialog-material-list-create :camp="camp()">
+        <dialog-material-list-create v-if="!disabled" :camp="camp()">
           <template #activator="{ on }">
             <button-add color="secondary" text
                         class="my-n1"
@@ -20,7 +20,8 @@
         v-for="materialList in materialLists.items"
         :key="materialList.id"
         class="px-0"
-        :material-list="materialList" />
+        :material-list="materialList"
+        :disabled="disabled" />
     </v-list>
   </content-group>
 </template>
@@ -35,7 +36,8 @@ export default {
   name: 'CampMaterialLists',
   components: { ContentGroup, ButtonAdd, CampMaterialListsItem, DialogMaterialListCreate },
   props: {
-    camp: { type: Function, required: true }
+    camp: { type: Function, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {

frontend/src/components/camp/CampMaterialListsItem.vue

@@ -4,7 +4,7 @@
       <v-list-item-title>{{ materialList.name }}</v-list-item-title>
     </v-list-item-content>
 
-    <v-list-item-action style="display: inline">
+    <v-list-item-action v-if="!disabled" style="display: inline">
       <v-item-group>
         <dialog-material-list-edit :material-list="materialList">
           <template #activator="{ on }">
@@ -14,7 +14,7 @@
       </v-item-group>
     </v-list-item-action>
 
-    <v-menu offset-y>
+    <v-menu v-if="!disabled" offset-y>
       <template #activator="{ on, attrs }">
         <v-btn icon v-bind="attrs" v-on="on">
           <v-icon>mdi-dots-vertical</v-icon>
@@ -52,7 +52,8 @@ export default {
   name: 'CampMaterialListsItem',
   components: { DialogEntityDelete, DialogMaterialListEdit, ButtonEdit, ButtonDelete },
   props: {
-    materialList: { type: Object, required: true }
+    materialList: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   }
 }
 </script>

frontend/src/components/camp/CampPeriods.vue

@@ -7,7 +7,7 @@ Displays all periods of a single camp and allows to edit them & create new ones
     <slot name="title">
       <div class="ec-content-group__title py-1 subtitle-1">
         {{ $tc('components.camp.campPeriods.title', api.get().camps().items.length) }}
-        <dialog-period-create :camp="camp()">
+        <dialog-period-create v-if="!disabled" :camp="camp()">
           <template #activator="{ on }">
             <button-add color="secondary" text
                         class="my-n2"
@@ -25,7 +25,8 @@ Displays all periods of a single camp and allows to edit them & create new ones
         v-for="period in periods.items"
         :key="period.id"
         class="px-0"
-        :period="period" />
+        :period="period"
+        :disabled="disabled" />
     </v-list>
   </content-group>
 </template>
@@ -40,7 +41,8 @@ export default {
   name: 'CampPeriods',
   components: { ContentGroup, ButtonAdd, PeriodItem, DialogPeriodCreate },
   props: {
-    camp: { type: Function, required: true }
+    camp: { type: Function, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {}

frontend/src/components/camp/CampPeriodsListItem.vue

@@ -12,7 +12,7 @@ Displays a single period as a list item including controls to edit and delete it
       </v-list-item-subtitle>
     </v-list-item-content>
 
-    <v-list-item-action style="display: inline">
+    <v-list-item-action v-if="!disabled" style="display: inline">
       <v-item-group>
         <dialog-period-edit :period="period">
           <template #activator="{ on }">
@@ -22,7 +22,7 @@ Displays a single period as a list item including controls to edit and delete it
       </v-item-group>
     </v-list-item-action>
 
-    <v-menu offset-y>
+    <v-menu v-if="!disabled" offset-y>
       <template #activator="{ on, attrs }">
         <v-btn icon v-bind="attrs" v-on="on">
           <v-icon>mdi-dots-vertical</v-icon>
@@ -65,7 +65,8 @@ export default {
   name: 'CampPeriods',
   components: { DialogEntityDelete, DialogPeriodEdit, ButtonEdit, ButtonDelete },
   props: {
-    period: { type: Object, required: true }
+    period: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   },
   computed: {
     isLastPeriod () {

frontend/src/components/camp/CampSettings.vue

@@ -10,14 +10,17 @@ Displays details on a single camp and allows to edit them.
         <api-text-field
           fieldname="name"
           :label="$tc('entity.camp.fields.name')"
-          vee-rules="required" />
+          vee-rules="required"
+          :disabled="disabled" />
         <api-text-field
           fieldname="title"
           :name="$tc('entity.camp.fields.title')"
-          vee-rules="required" />
+          vee-rules="required"
+          :disabled="disabled" />
         <api-text-field
           fieldname="motto"
-          :name="$tc('entity.camp.fields.motto')" />
+          :name="$tc('entity.camp.fields.motto')"
+          :disabled="disabled" />
       </api-form>
     </div>
   </content-group>
@@ -35,6 +38,10 @@ export default {
     camp: {
       type: Function,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

frontend/src/views/camp/Admin.vue

@@ -7,18 +7,18 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
     <v-card-text>
       <v-row>
         <v-col cols="12" lg="6">
-          <camp-settings :camp="camp" />
-          <camp-address :camp="camp" />
+          <camp-settings :camp="camp" :disabled="!isManager" />
+          <camp-address :camp="camp" :disabled="!isManager" />
 
           <v-btn v-if="$vuetify.breakpoint.xsOnly" :to="{name: 'camp/collaborators', query: {isDetail: true}}">
             {{ $tc('views.camp.admin.collaborators') }}
           </v-btn>
-          <camp-periods :camp="camp" />
+          <camp-periods :camp="camp" :disabled="!isManager" />
         </v-col>
         <v-col cols="12" lg="6">
-          <camp-categories :camp="camp" />
+          <camp-categories :camp="camp" :disabled="!isManager" />
 
-          <camp-material-lists :camp="camp" />
+          <camp-material-lists :camp="camp" :disabled="!isManager" />
         </v-col>
       </v-row>
       <v-row>
@@ -38,6 +38,7 @@ import CampMaterialLists from '@/components/camp/CampMaterialLists.vue'
 import CampCategories from '@/components/camp/CampCategories.vue'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import CampDangerZone from '@/components/camp/CampDangerZone.vue'
+import { campRoleMixin } from '@/mixins/campRoleMixin'
 
 export default {
   name: 'Admin',
@@ -50,17 +51,13 @@ export default {
     CampMaterialLists,
     CampCategories
   },
+  mixins: [campRoleMixin],
   props: {
     camp: { type: Function, required: true }
   },
   data () {
     return {}
   },
-  computed: {
-    isManager () {
-      return this.camp().role === 'manager'
-    }
-  },
   mounted () {
     this.api.reload(this.camp())
     this.api.reload(this.camp().materialLists())