frontend/Activity.vue: disable editing activities for guests

For that we have to propagate a disabled property to all involved components. Issue: ecamp#1415
BacLuc · Jun 6, 2021 · 9ac851e · 9ac851e
1 parent 7ff466d
commit 9ac851e
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -14,35 +14,35 @@
         <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">
               <api-textarea
                 fieldname="column1"
                 auto-grow
                 rows="2"
-                :disabled="layoutMode"
+                :disabled="layoutMode || disabled"
                 :filled="layoutMode" />
             </v-col>
             <v-col cols="7">
               <api-textarea
                 fieldname="column2"
                 auto-grow
                 rows="4"
-                :disabled="layoutMode"
+                :disabled="layoutMode || disabled"
                 :filled="layoutMode" />
             </v-col>
             <v-col cols="2">
               <api-textarea
                 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 () {