From 9ac851eaa3a5c6df794be0d60b63002679f6e273 Mon Sep 17 00:00:00 2001
From: BacLuc <lucius.bachmann@gmx.ch>
Date: Sun, 6 Jun 2021 15:09:20 +0200
Subject: [PATCH] frontend/Activity.vue: disable editing activities for guests

For that we have to propagate a disabled property to all involved components.

Issue: #1415
---
 .../components/activity/CardContentNode.vue   | 16 ++++++++++----
 .../src/components/activity/ContentNode.vue   |  4 +++-
 .../activity/DraggableContentNodes.vue        |  8 ++++---
 .../activity/content/ColumnLayout.vue         |  3 ++-
 .../activity/content/LAThematicArea.vue       |  2 +-
 .../components/activity/content/Material.vue  |  3 ++-
 .../src/components/activity/content/Notes.vue |  2 +-
 .../activity/content/SafetyConcept.vue        |  2 +-
 .../activity/content/Storyboard.vue           | 12 +++++------
 .../activity/content/Storycontext.vue         |  2 +-
 .../src/components/form/api/ApiSortable.vue   |  4 +++-
 .../src/components/material/MaterialTable.vue | 20 ++++++++++--------
 frontend/src/mixins/campRoleMixin.js          | 21 +++++++++++++++++++
 frontend/src/mixins/contentNodeMixin.js       |  3 ++-
 frontend/src/views/activity/Activity.vue      | 21 +++++++++++++------
 15 files changed, 86 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/mixins/campRoleMixin.js

diff --git a/frontend/src/components/activity/CardContentNode.vue b/frontend/src/components/activity/CardContentNode.vue
index 3d1c560fcc..c1ff40a3b3 100644
--- a/frontend/src/components/activity/CardContentNode.vue
+++ b/frontend/src/components/activity/CardContentNode.vue
@@ -2,7 +2,8 @@
   <v-card :elevation="draggable ? 4 : 0" :class="{ 'mx-2 my-2': draggable }">
     <v-card-title hide-actions class="pa-0 pr-sm-2">
       <v-toolbar dense flat>
-        <v-menu bottom
+        <v-menu v-if="!disabled"
+                bottom
                 right
                 offset-y>
           <template #activator="{ on, attrs }">
@@ -26,6 +27,9 @@
             </v-row>
           </v-container>
         </v-menu>
+        <v-icon v-else>
+          {{ currentIcon }}
+        </v-icon>
 
         <div
           v-if="editInstanceName"
@@ -46,7 +50,7 @@
           </v-toolbar-title>
         </div>
 
-        <v-menu v-if="!layoutMode"
+        <v-menu v-if="!layoutMode && !disabled"
                 bottom
                 left
                 offset-y>
@@ -67,7 +71,7 @@
           </v-list>
         </v-menu>
         <dialog-entity-delete
-          v-else
+          v-else-if="!disabled"
           :entity="contentNode">
           <template #activator="{ on }">
             <v-btn icon
@@ -101,7 +105,8 @@ export default {
   props: {
     contentNode: { type: Object, required: true },
     layoutMode: { type: Boolean, required: true },
-    draggable: { type: Boolean, default: false }
+    draggable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {
@@ -139,6 +144,9 @@ export default {
   },
   methods: {
     toggleEditInstanceName (e) {
+      if (this.disabled) {
+        return
+      }
       this.editInstanceName = !this.editInstanceName
     }
   }
diff --git a/frontend/src/components/activity/ContentNode.vue b/frontend/src/components/activity/ContentNode.vue
index 4ce63967d7..c6173f790f 100644
--- a/frontend/src/components/activity/ContentNode.vue
+++ b/frontend/src/components/activity/ContentNode.vue
@@ -6,6 +6,7 @@
              :content-node="contentNode"
              :layout-mode="layoutMode"
              :draggable="draggable"
+             :disabled="disabled"
              v-bind="$attrs" />
 </template>
 
@@ -35,7 +36,8 @@ export default {
   props: {
     contentNode: { type: Object, required: true },
     layoutMode: { type: Boolean, required: true },
-    draggable: { type: Boolean, default: false }
+    draggable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   }
 }
 </script>
diff --git a/frontend/src/components/activity/DraggableContentNodes.vue b/frontend/src/components/activity/DraggableContentNodes.vue
index 0c5c51dd67..699b7eecb0 100644
--- a/frontend/src/components/activity/DraggableContentNodes.vue
+++ b/frontend/src/components/activity/DraggableContentNodes.vue
@@ -15,7 +15,8 @@
                     class="content-node"
                     :content-node="allContentNodesById[id]"
                     :layout-mode="layoutMode"
-                    :draggable="draggingEnabled" />
+                    :draggable="draggingEnabled"
+                    :disabled="disabled" />
     </draggable>
 
     <button-nested-content-node-add v-if="layoutMode"
@@ -40,7 +41,8 @@ export default {
   props: {
     layoutMode: { type: Boolean, default: false },
     slotName: { type: String, required: true },
-    parentContentNode: { type: Object, required: true }
+    parentContentNode: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {
@@ -52,7 +54,7 @@ export default {
       return keyBy(this.parentContentNode.owner().contentNodes().items, 'id')
     },
     draggingEnabled () {
-      return this.layoutMode && this.$vuetify.breakpoint.mdAndUp
+      return this.layoutMode && this.$vuetify.breakpoint.mdAndUp && !this.disabled
     },
     contentNodeIds () {
       return sortBy(
diff --git a/frontend/src/components/activity/content/ColumnLayout.vue b/frontend/src/components/activity/content/ColumnLayout.vue
index 4693825548..6b0aa6c416 100644
--- a/frontend/src/components/activity/content/ColumnLayout.vue
+++ b/frontend/src/components/activity/content/ColumnLayout.vue
@@ -17,7 +17,8 @@
                       @resize-stop="saveColumnWidths">
       <draggable-content-nodes :slot-name="slot"
                                :layout-mode="layoutMode"
-                               :parent-content-node="contentNode" />
+                               :parent-content-node="contentNode"
+                               :disabled="disabled" />
 
       <template #menu>
         <column-operations :content-node="contentNode" :min-column-width="minWidth(slot)" :total-width="12" />
diff --git a/frontend/src/components/activity/content/LAThematicArea.vue b/frontend/src/components/activity/content/LAThematicArea.vue
index ed2d194f7f..da9231f8ca 100644
--- a/frontend/src/components/activity/content/LAThematicArea.vue
+++ b/frontend/src/components/activity/content/LAThematicArea.vue
@@ -5,7 +5,7 @@
         <v-list-item v-for="option in contentNode.options().items"
                      :key="option.id"
                      tag="label"
-                     :disabled="layoutMode">
+                     :disabled="layoutMode || disabled">
           <v-list-item-action>
             <api-checkbox fieldname="checked" :uri="option._meta.self" />
           </v-list-item-action>
diff --git a/frontend/src/components/activity/content/Material.vue b/frontend/src/components/activity/content/Material.vue
index 701392a339..5eb16a38ad 100644
--- a/frontend/src/components/activity/content/Material.vue
+++ b/frontend/src/components/activity/content/Material.vue
@@ -5,7 +5,8 @@
                       :content-node="contentNode"
                       :layout-mode="layoutMode"
                       :material-item-collection="contentNode.materialItems()"
-                      :group-by-list="$vuetify.breakpoint.xs" />
+                      :group-by-list="$vuetify.breakpoint.xs"
+                      :disabled="disabled" />
     </div>
   </card-content-node>
 </template>
diff --git a/frontend/src/components/activity/content/Notes.vue b/frontend/src/components/activity/content/Notes.vue
index 607881ab5e..0e0188bd09 100644
--- a/frontend/src/components/activity/content/Notes.vue
+++ b/frontend/src/components/activity/content/Notes.vue
@@ -7,7 +7,7 @@
           :label="$tc('contentNode.notes.name')"
           rows="4"
           auto-grow
-          :disabled="layoutMode"
+          :disabled="layoutMode || disabled"
           :filled="layoutMode" />
       </api-form>
     </div>
diff --git a/frontend/src/components/activity/content/SafetyConcept.vue b/frontend/src/components/activity/content/SafetyConcept.vue
index dc069fa207..258125de91 100644
--- a/frontend/src/components/activity/content/SafetyConcept.vue
+++ b/frontend/src/components/activity/content/SafetyConcept.vue
@@ -6,7 +6,7 @@
           fieldname="text"
           :placeholder="$tc('contentNode.safetyConcept.name')"
           rows="2"
-          :disabled="layoutMode"
+          :disabled="layoutMode || disabled"
           :filled="layoutMode" />
       </api-form>
     </div>
diff --git a/frontend/src/components/activity/content/Storyboard.vue b/frontend/src/components/activity/content/Storyboard.vue
index d911729df5..05330c2d10 100644
--- a/frontend/src/components/activity/content/Storyboard.vue
+++ b/frontend/src/components/activity/content/Storyboard.vue
@@ -14,7 +14,7 @@
         <v-col cols="1" />
       </v-row>
 
-      <api-sortable v-slot="sortable" :collection="sections">
+      <api-sortable v-slot="sortable" :disabled="layoutMode || disabled" :collection="sections">
         <api-form :entity="sortable.entity">
           <v-row dense>
             <v-col cols="2">
@@ -22,7 +22,7 @@
                 fieldname="column1"
                 auto-grow
                 rows="2"
-                :disabled="layoutMode"
+                :disabled="layoutMode || disabled"
                 :filled="layoutMode" />
             </v-col>
             <v-col cols="7">
@@ -30,7 +30,7 @@
                 fieldname="column2"
                 auto-grow
                 rows="4"
-                :disabled="layoutMode"
+                :disabled="layoutMode || disabled"
                 :filled="layoutMode" />
             </v-col>
             <v-col cols="2">
@@ -38,11 +38,11 @@
                 fieldname="column3"
                 auto-grow
                 rows="2"
-                :disabled="layoutMode"
+                :disabled="layoutMode || disabled"
                 :filled="layoutMode" />
             </v-col>
             <v-col cols="1">
-              <v-container v-if="!layoutMode" class="ma-0 pa-0">
+              <v-container v-if="!layoutMode && !disabled" class="ma-0 pa-0">
                 <v-row no-gutters>
                   <v-col cols="6">
                     <div class="section-buttons">
@@ -85,7 +85,7 @@
       <!-- add at end position -->
       <v-row no-gutters justify="center">
         <v-col cols="1">
-          <v-btn v-if="!layoutMode"
+          <v-btn v-if="!layoutMode && !disabled"
                  icon
                  small
                  class="button-add"
diff --git a/frontend/src/components/activity/content/Storycontext.vue b/frontend/src/components/activity/content/Storycontext.vue
index 5669c45b1b..c0c30807d0 100644
--- a/frontend/src/components/activity/content/Storycontext.vue
+++ b/frontend/src/components/activity/content/Storycontext.vue
@@ -7,7 +7,7 @@
           :placeholder="$tc('contentNode.storycontext.name')"
           rows="2"
           auto-grow
-          :disabled="layoutMode"
+          :disabled="layoutMode || disabled"
           :filled="layoutMode" />
       </api-form>
     </div>
diff --git a/frontend/src/components/form/api/ApiSortable.vue b/frontend/src/components/form/api/ApiSortable.vue
index 45e4b14054..1883ff4182 100644
--- a/frontend/src/components/form/api/ApiSortable.vue
+++ b/frontend/src/components/form/api/ApiSortable.vue
@@ -5,6 +5,7 @@
     handle=".drag-and-drop-handle"
     :animation="200"
     :force-fallback="true"
+    :disabled="disabled"
     @sort="onSort"
     @start="dragging = true"
     @end="dragging = false">
@@ -30,7 +31,8 @@ export default {
   },
   props: {
     /* reference to sortable API collection */
-    collection: { type: Function, required: true }
+    collection: { type: Function, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data () {
     return {
diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
index 1caa04fad3..d471610dd4 100644
--- a/frontend/src/components/material/MaterialTable.vue
+++ b/frontend/src/components/material/MaterialTable.vue
@@ -37,7 +37,7 @@
     <template #[`item.quantity`]="{ item }">
       <api-text-field
         v-if="!item.readonly"
-        :disabled="layoutMode"
+        :disabled="layoutMode || disabled"
         dense
         :uri="item.uri"
         fieldname="quantity" />
@@ -47,7 +47,7 @@
     <template #[`item.unit`]="{ item }">
       <api-text-field
         v-if="!item.readonly"
-        :disabled="layoutMode"
+        :disabled="layoutMode || disabled"
         dense
         :uri="item.uri"
         fieldname="unit" />
@@ -57,7 +57,7 @@
     <template #[`item.article`]="{ item }">
       <api-text-field
         v-if="!item.readonly"
-        :disabled="layoutMode"
+        :disabled="layoutMode || disabled"
         dense
         :uri="item.uri"
         fieldname="article" />
@@ -67,7 +67,7 @@
     <template #[`item.listName`]="{ item }">
       <api-select
         v-if="!item.readonly"
-        :disabled="layoutMode"
+        :disabled="layoutMode || disabled"
         dense
         :uri="item.uri"
         relation="materialList"
@@ -86,7 +86,7 @@
       <div v-if="!item.readonly" class="d-flex">
         <!-- edit dialog (mobile only) -->
         <dialog-material-item-edit
-          v-if="!$vuetify.breakpoint.smAndUp && !layoutMode"
+          v-if="!$vuetify.breakpoint.smAndUp && !layoutMode && !disabled"
           class="float-left"
           :material-item-uri="item.uri">
           <template #activator="{ on }">
@@ -98,7 +98,7 @@
         </dialog-material-item-edit>
 
         <!-- delete button (behind menu) -->
-        <v-menu v-if="!layoutMode">
+        <v-menu v-if="!layoutMode && !disabled">
           <template #activator="{ on, attrs }">
             <v-btn icon v-bind="attrs" v-on="on">
               <v-icon>mdi-dots-vertical</v-icon>
@@ -145,7 +145,7 @@
     <template #[`body.append`]="{ headers }">
       <!-- add new item (desktop view) -->
       <material-create-item
-        v-if="!layoutMode && $vuetify.breakpoint.smAndUp"
+        v-if="!layoutMode && $vuetify.breakpoint.smAndUp && !disabled"
         key="addItemRow"
         :camp="camp"
         :columns="headers.length"
@@ -154,7 +154,7 @@
 
     <template #footer>
       <!-- add new item (mobile view) -->
-      <div v-if="!layoutMode && !$vuetify.breakpoint.smAndUp" class="mt-5">
+      <div v-if="!layoutMode && !$vuetify.breakpoint.smAndUp && !disabled" class="mt-5">
         <dialog-material-item-create
           :camp="camp"
           :material-item-collection="materialItemCollection"
@@ -209,6 +209,8 @@ export default {
     // camp Entity
     camp: { type: Object, required: true },
 
+    disabled: { type: Boolean, default: false },
+
     // layoutMode=true --> data editing is disabled
     layoutMode: { type: Boolean, required: false, default: false },
 
@@ -283,7 +285,7 @@ export default {
           listName: item.materialList().name,
           activity: item.contentNode ? item.contentNode().id : null,
           entityObject: item,
-          readonly: this.period && item.contentNode, // if complete component is in period overview, disable editing of material that belongs to contentNodes (Acitity material)
+          readonly: (this.period && item.contentNode), // if complete component is in period overview, disable editing of material that belongs to contentNodes (Acitity material)
           class: this.period && item.contentNode ? 'readonly' : 'period'
         }))
 
diff --git a/frontend/src/mixins/campRoleMixin.js b/frontend/src/mixins/campRoleMixin.js
new file mode 100644
index 0000000000..fb1cd8e9a3
--- /dev/null
+++ b/frontend/src/mixins/campRoleMixin.js
@@ -0,0 +1,21 @@
+export const campRoleMixin = {
+  computed: {
+    isContributor () {
+      return this.isMember || this.isManager
+    },
+    isGuest () {
+      return this.camp?.role === 'guest'
+    },
+    isManager () {
+      return this.camp?.role === 'manager'
+    },
+    isMember () {
+      return this.camp?.role === 'member'
+    }
+  },
+  mounted () {
+    if (typeof this.camp !== 'object') {
+      throw new Error('User of the campRoleMixin must expose a method/proxy camp()')
+    }
+  }
+}
diff --git a/frontend/src/mixins/contentNodeMixin.js b/frontend/src/mixins/contentNodeMixin.js
index f88b25ba9a..fc058be751 100644
--- a/frontend/src/mixins/contentNodeMixin.js
+++ b/frontend/src/mixins/contentNodeMixin.js
@@ -2,7 +2,8 @@ export const contentNodeMixin = {
   props: {
     contentNode: { type: Object, required: true },
     layoutMode: { type: Boolean, required: true },
-    draggable: { type: Boolean, default: false }
+    draggable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
   },
   computed: {
     camp () {
diff --git a/frontend/src/views/activity/Activity.vue b/frontend/src/views/activity/Activity.vue
index 1ba3a1c7c6..ac82732936 100644
--- a/frontend/src/views/activity/Activity.vue
+++ b/frontend/src/views/activity/Activity.vue
@@ -8,7 +8,7 @@ Displays a single activity
       <template #title>
         <v-toolbar-title class="font-weight-bold">
           {{ scheduleEntry().number }}
-          <v-menu v-if="!category._meta.loading" offset-y :disabled="layoutMode">
+          <v-menu v-if="!category._meta.loading" offset-y :disabled="layoutMode || !isContributor">
             <template #activator="{ on, attrs }">
               <v-chip
                 :color="category.color"
@@ -34,7 +34,7 @@ Displays a single activity
           </v-menu>
           <a v-if="!editActivityTitle"
              style="color: inherit"
-             @click="editActivityTitle = true">
+             @click="makeTitleEditable();">
             {{ activity.title }}
           </a>
         </v-toolbar-title>
@@ -54,6 +54,7 @@ Displays a single activity
         <v-btn v-if="!layoutMode"
                color="primary"
                outlined
+               :disabled="!isContributor"
                @click="layoutMode = true">
           <template v-if="$vuetify.breakpoint.smAndUp">
             <v-icon left>mdi-puzzle-edit-outline</v-icon>
@@ -61,7 +62,7 @@ Displays a single activity
           </template>
           <template v-else>{{ $tc('views.activity.activity.layout') }}</template>
         </v-btn>
-        <v-btn v-else
+        <v-btn v-else-if="isContributor"
                color="success"
                outlined
                @click="layoutMode = false">
@@ -126,7 +127,7 @@ Displays a single activity
                     :name="$tc('entity.activity.fields.location')"
                     :uri="activity._meta.self"
                     fieldname="location"
-                    :disabled="layoutMode"
+                    :disabled="layoutMode || !isContributor"
                     dense />
                 </v-col>
               </v-row>
@@ -141,7 +142,7 @@ Displays a single activity
                     small-chips
                     :uri="activity._meta.self"
                     fieldname="campCollaborations"
-                    :disabled="layoutMode"
+                    :disabled="layoutMode || !isContributor"
                     :items="availableCampCollaborations" />
                 </v-col>
               </v-row>
@@ -150,7 +151,8 @@ Displays a single activity
           <content-node
             v-if="activity.rootContentNode"
             :content-node="activity.rootContentNode()"
-            :layout-mode="layoutMode" />
+            :layout-mode="layoutMode"
+            :disabled="isContributor === false" />
         </template>
       </v-card-text>
     </content-card>
@@ -163,6 +165,7 @@ import ApiTextField from '@/components/form/api/ApiTextField.vue'
 import ApiSelect from '@/components/form/api/ApiSelect.vue'
 import ContentNode from '@/components/activity/ContentNode.vue'
 import { defineHelpers } from '@/common/helpers/scheduleEntry/dateHelperUTC.js'
+import { campRoleMixin } from '@/mixins/campRoleMixin'
 
 export default {
   name: 'Activity',
@@ -172,6 +175,7 @@ export default {
     ApiSelect,
     ContentNode
   },
+  mixins: [campRoleMixin],
   props: {
     scheduleEntry: {
       type: Function,
@@ -227,6 +231,11 @@ export default {
       return this.contentNodes.items.filter(cn => {
         return cn.contentType().id === contentType.id
       }).length
+    },
+    makeTitleEditable () {
+      if (this.isContributor) {
+        this.editActivityTitle = true
+      }
     }
   }
 }