frontend: disable editing for guests in CampProgram.vue

Disable the edit switch. Add tooltip that guests know why they can't edit the picasso. Don't show the add button. Issue: ecamp#1415
BacLuc · Jan 9, 2022 · 126876b · 126876b
1 parent 2921ea7
commit 126876b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -395,7 +395,8 @@
       },
       "picasso": {
         "editMode": "Edit mode",
-        "title": "Picasso"
+        "title": "Picasso",
+        "guestsCannotEdit": "A guest cannot edit the picasso"
       }
     },
     "campCreate": {

diff --git a/frontend/src/views/camp/CampProgram.vue b/frontend/src/views/camp/CampProgram.vue
@@ -6,12 +6,22 @@ Show all activity schedule entries of a single period.
   <content-card :title="$tc('views.camp.picasso.title')" toolbar>
     <template #title-actions>
       <period-switcher v-if="$vuetify.breakpoint.xsOnly" :period="period" />
-      <e-switch
-        v-model="editMode"
-        class="ml-5"
-        :label="$tc('views.camp.picasso.editMode')" />
+      <v-tooltip :disabled="isContributor" bottom>
+        <template #activator="{ on, attrs }">
+          <div
+            v-bind="attrs"
+            v-on="on">
+            <e-switch
+              v-model="editMode"
+              class="ml-5"
+              :disabled="!isContributor"
+              :label="$tc('views.camp.picasso.editMode')" />
+          </div>
+        </template>
+        <span>{{ $tc('views.camp.picasso.guestsCannotEdit') }}</span>
+      </v-tooltip>
     </template>
-    <schedule-entries :period="period" :show-button="true">
+    <schedule-entries :period="period" :show-button="isContributor">
       <template #default="slotProps">
         <template v-if="slotProps.loading">
           <v-skeleton-loader type="table" />
@@ -32,6 +42,7 @@ Show all activity schedule entries of a single period.
   </content-card>
 </template>
 <script>
+import { campRoleMixin } from '@/mixins/campRoleMixin'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import Picasso from '@/components/camp/picasso/Picasso.vue'
 import ScheduleEntries from '@/components/scheduleEntry/ScheduleEntries.vue'
@@ -45,13 +56,19 @@ export default {
     Picasso,
     ScheduleEntries
   },
+  mixins: [campRoleMixin],
   props: {
     period: { type: Function, required: true }
   },
   data () {
     return {
       editMode: false
     }
+  },
+  computed: {
+    camp () {
+      return this.period().camp()
+    }
   }
 }
 </script>