Adjust UI to limited permissions of outsiders

Author: carlobeltrame

frontend/src/components/activity/ScheduleEntry.vue

@@ -269,7 +269,7 @@ Displays a single scheduleEntry
                   />
                 </v-col>
               </v-row>
-              <v-row dense>
+              <v-row v-if="!isOutsider" dense>
                 <v-col>
                   <ActivityResponsibles
                     :activity="activity"

frontend/src/components/print/config/DialogScheduleEntryFilter.vue

@@ -29,6 +29,7 @@
       :loading-endpoints="{}"
       :hide-self-filter="isOutsider"
       :hide-period-filter="hidePeriodFilter"
+      :hide-collaborator-filter="isOutsider"
       :hide-day-filter="hideDayFilter"
     />
     <template #moreActions>

frontend/src/components/program/ScheduleEntryFilters.vue

@@ -39,35 +39,40 @@
         width="150"
       />
     </template>
-    <SelectFilter
-      v-if="loadingEndpoints !== true && loadingEndpoints.campCollaborations !== true"
-      v-model="value.responsible"
-      multiple
-      and-filter
-      :items="campCollaborations"
-      :display-field="campCollaborationDisplayName"
-      :label="$tc('components.program.scheduleEntryFilters.responsible')"
-      @input="(val) => updateFilter({ responsible: val })"
-    >
-      <template #item="{ item }">
-        <template v-if="item.exclusiveNone">
-          {{ item.text }}
-        </template>
-        <template v-else>
-          <TextAlignBaseline class="mr-1">
-            <UserAvatar :camp-collaboration="campCollaborations[item.value]" size="20" />
-          </TextAlignBaseline>
-          {{ item.text }}
+    <template v-if="!hideCollaboratorFilter">
+      <SelectFilter
+        v-if="loadingEndpoints !== true && loadingEndpoints.campCollaborations !== true"
+        v-model="value.responsible"
+        multiple
+        and-filter
+        :items="campCollaborations"
+        :display-field="campCollaborationDisplayName"
+        :label="$tc('components.program.scheduleEntryFilters.responsible')"
+        @input="(val) => updateFilter({ responsible: val })"
+      >
+        <template #item="{ item }">
+          <template v-if="item.exclusiveNone">
+            {{ item.text }}
+          </template>
+          <template v-else>
+            <TextAlignBaseline class="mr-1">
+              <UserAvatar
+                :camp-collaboration="campCollaborations[item.value]"
+                size="20"
+              />
+            </TextAlignBaseline>
+            {{ item.text }}
+          </template>
         </template>
-      </template>
-    </SelectFilter>
-    <v-skeleton-loader
-      v-else
-      type="button"
-      class="v-skeleton-loader--inherit-size"
-      height="32"
-      width="130"
-    />
+      </SelectFilter>
+      <v-skeleton-loader
+        v-else
+        type="button"
+        class="v-skeleton-loader--inherit-size"
+        height="32"
+        width="130"
+      />
+    </template>
     <SelectFilter
       v-if="loadingEndpoints !== true && loadingEndpoints.categories !== true"
       v-model="value.category"
@@ -194,6 +199,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideCollaboratorFilter: {
+      type: Boolean,
+      default: false,
+    },
     hideDayFilter: {
       type: Boolean,
       default: false,

frontend/src/components/program/picasso/Picasso.vue

@@ -54,7 +54,12 @@ Listing all given activity schedule entries in a calendar view.
                     )
             }}
           </div>
-          <day-responsibles :date="date" :period="period" :readonly="!editable" />
+          <day-responsibles
+            v-if="!isOutsider"
+            :date="date"
+            :period="period"
+            :readonly="!editable"
+          />
         </slot>
       </template>
 
@@ -88,13 +93,15 @@ import DayResponsibles from './DayResponsibles.vue'
 import { ONE_DAY_IN_MILLISECONDS } from '@/helpers/vCalendarDragAndDrop.js'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import PicassoEntry from './PicassoEntry.vue'
+import { campRoleMixin } from '@/mixins/campRoleMixin.js'
 
 export default {
   name: 'Picasso',
   components: {
     PicassoEntry,
     DayResponsibles,
   },
+  mixins: [campRoleMixin],
   props: {
     // period for which to show picasso
     period: {

frontend/src/views/camp/CampProgram.vue

@@ -94,6 +94,7 @@ Show all activity schedule entries of a single period.
       :camp="camp"
       :filter-fn="filterFn"
       :hide-self-filter="isOutsider"
+      :hide-collaborator-filter="isOutsider"
       hide-period-filter
       hide-day-filter
       @height-changed="scheduleEntryFiltersHeightChanged"

frontend/src/views/camp/Dashboard.vue

@@ -15,6 +15,7 @@
         :loading-endpoints="true"
         :camp="camp"
         :hide-self-filter="isOutsider"
+        :hide-collaborator-filter="isOutsider"
         hide-day-filter
         :periods="periods"
       />
@@ -27,6 +28,7 @@
         :camp="camp"
         :periods="periods"
         :hide-self-filter="isOutsider"
+        :hide-collaborator-filter="isOutsider"
         hide-day-filter
         :filter-fn="filterFn"
       />

frontend/src/views/camp/admin/SideBarAdmin.vue

@@ -13,6 +13,7 @@
         icon="mdi-view-dashboard-outline"
       />
       <SidebarListItem
+        v-if="!isOutsider"
         :to="adminRoute(camp, 'collaborators')"
         :title="$tc('views.camp.admin.sideBarAdmin.itemCollaborators')"
         icon="mdi-account-group-outline"
@@ -24,6 +25,7 @@
         icon="mdi-clipboard-list-outline"
       />
       <SidebarListItem
+        v-if="!isOutsider"
         :to="adminRoute(camp, 'material')"
         :title="$tc('views.camp.admin.sideBarAdmin.itemMaterialLists')"
         icon="mdi-package-variant-closed"

frontend/src/views/camp/navigation/mobile/NavSidebar.vue

@@ -65,14 +65,16 @@
           :title="$tc('views.camp.navigation.mobile.navSidebar.itemChecklists')"
           icon="mdi-clipboard-list-outline"
         />
-        <v-divider inset />
+        <v-divider v-if="!isOutsider" inset />
         <SidebarListItem
+          v-if="!isOutsider"
           :title="$tc('views.camp.navigation.mobile.navSidebar.itemCollaborators')"
           icon="mdi-account-group"
           :to="adminRoute(camp, 'collaborators')"
         />
-        <v-divider inset />
+        <v-divider v-if="!isOutsider" inset />
         <SidebarListItem
+          v-if="!isOutsider"
           :to="adminRoute(camp, 'material')"
           :title="$tc('views.camp.navigation.mobile.navSidebar.itemMaterialLists')"
           icon="mdi-package-variant"
@@ -127,13 +129,15 @@ import UserAvatar from '@/components/user/UserAvatar.vue'
 import SidebarListItem from '@/components/layout/SidebarListItem.vue'
 import { mapGetters } from 'vuex'
 import { getEnv } from '@/environment.js'
+import { campRoleMixin } from '@/mixins/campRoleMixin.js'
 
 export default {
   name: 'NavSidebar',
   components: {
     SidebarListItem,
     UserAvatar,
   },
+  mixins: [campRoleMixin],
   props: {
     value: { type: Boolean, required: true },
     camp: { type: Object, required: true },