Adjust UI to limited permissions of outsiders

Author: carlobeltrame

frontend/src/components/activity/ScheduleEntry.vue

@@ -264,7 +264,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/navigation/UserMeta.vue

@@ -191,6 +191,12 @@ export default {
       authUser: 'getLoggedInUser',
     }),
     currentCampCollaboration() {
+      if (
+        typeof this.camp?.campCollaborations !== 'function' ||
+        this.camp.campCollaborations()._meta.loading
+      ) {
+        return undefined
+      }
       return this.camp
         ?.campCollaborations()
         .items.find(

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

@@ -27,7 +27,9 @@
       :camp="camp"
       :filter-fn="filterFn"
       :loading-endpoints="{}"
+      :hide-self-filter="isOutsider"
       :hide-period-filter="hidePeriodFilter"
+      :hide-collaborator-filter="isOutsider"
       :hide-day-filter="hideDayFilter"
     />
     <template #moreActions>
@@ -38,10 +40,12 @@
 <script>
 import ScheduleEntryFilters from '../../program/ScheduleEntryFilters.vue'
 import DetailPane from '../../generic/DetailPane.vue'
+import { campRoleMixin } from '../../../mixins/campRoleMixin.js'
 
 export default {
   name: 'DialogScheduleEntryFilter',
   components: { DetailPane, ScheduleEntryFilters },
+  mixins: [campRoleMixin],
   props: {
     camp: { type: Object, required: true },
     filterFn: { type: Function, required: true },

frontend/src/components/program/ScheduleEntryFilters.vue

@@ -4,20 +4,22 @@
     class="d-flex flex-wrap items-baseline"
     style="overflow-y: auto; gap: 10px"
   >
-    <BooleanFilter
-      v-if="loadingEndpoints !== true && loadingEndpoints.campCollaborations !== true"
-      v-model="showOnlyMyActivities"
-      :label="$tc('components.program.scheduleEntryFilters.onlyMyActivities')"
-      :result-count="myActivitiesCount"
-    />
-    <v-skeleton-loader
-      v-else
-      type="button"
-      class="v-skeleton-loader--inherit-size"
-      height="32"
-      width="160px"
-    />
-    <FilterDivider />
+    <template v-if="!hideSelfFilter">
+      <BooleanFilter
+        v-if="loadingEndpoints !== true && loadingEndpoints.campCollaborations !== true"
+        v-model="showOnlyMyActivities"
+        :label="$tc('components.program.scheduleEntryFilters.onlyMyActivities')"
+        :result-count="myActivitiesCount"
+      />
+      <v-skeleton-loader
+        v-else
+        type="button"
+        class="v-skeleton-loader--inherit-size"
+        height="32"
+        width="160px"
+      />
+      <FilterDivider />
+    </template>
     <template v-if="!!periods && !hidePeriodFilter">
       <template v-if="loadingEndpoints !== true && loadingEndpoints.periods !== true">
         <SelectFilter
@@ -37,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"
@@ -184,10 +191,18 @@ export default {
       type: Function,
       default: () => [],
     },
+    hideSelfFilter: {
+      type: Boolean,
+      default: false,
+    },
     hidePeriodFilter: {
       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/mixins/campRoleMixin.js

@@ -12,6 +12,9 @@ export const campRoleMixin = {
     isMember() {
       return this.role === 'member'
     },
+    isOutsider() {
+      return !this.role
+    },
     role() {
       const currentUserLink = this.$store.getters.getLoggedInUser?._meta.self
       const result = this._campCollaborations
@@ -22,8 +25,10 @@ export const campRoleMixin = {
       return result?.role
     },
     _campCollaborations() {
-      const campCollaborations = this._camp?.campCollaborations()
-      return campCollaborations?.items
+      if (typeof this.camp.campCollaborations !== 'function') {
+        return []
+      }
+      return this._camp?.campCollaborations()?.items
     },
     _camp() {
       if (typeof this.camp === 'function') {

frontend/src/views/camp/CampProgram.vue

@@ -44,7 +44,7 @@ Show all activity schedule entries of a single period.
       />
       <v-menu offset-y>
         <template #activator="{ on, attrs }">
-          <v-btn icon v-bind="attrs" v-on="on" data-testid="campprogram-menu">
+          <v-btn icon v-bind="attrs" data-testid="campprogram-menu" v-on="on">
             <v-badge
               v-if="!$vuetify.breakpoint.smAndUp && filteredPropertiesCount > 0"
               overlap
@@ -91,6 +91,8 @@ Show all activity schedule entries of a single period.
       :loading-endpoints="loadingEndpoints"
       :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

@@ -14,6 +14,8 @@
         class="ma-4"
         :loading-endpoints="true"
         :camp="camp"
+        :hide-self-filter="isOutsider"
+        :hide-collaborator-filter="isOutsider"
         hide-day-filter
         :periods="periods"
       />
@@ -25,6 +27,8 @@
         :loading-endpoints="loadingEndpoints"
         :camp="camp"
         :periods="periods"
+        :hide-self-filter="isOutsider"
+        :hide-collaborator-filter="isOutsider"
         hide-day-filter
         :filter-fn="filterFn"
       />
@@ -153,6 +157,7 @@ import AvatarRow from '@/components/generic/AvatarRow.vue'
 import ScheduleEntryFilters from '@/components/program/ScheduleEntryFilters.vue'
 import dayjs from '@/common/helpers/dayjs.js'
 import { filterMatchScheduleEntry } from '@/common/helpers/filterMatchScheduleEntry.js'
+import { campRoleMixin } from '../../mixins/campRoleMixin.js'
 
 export default {
   name: 'Dashboard',
@@ -162,7 +167,7 @@ export default {
     ActivityRow,
     ContentCard,
   },
-  mixins: [dateHelperUTCFormatted],
+  mixins: [dateHelperUTCFormatted, campRoleMixin],
   props: {
     camp: { type: Object, required: true },
   },

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/desktop/NavTopbar.vue

@@ -45,7 +45,7 @@
         <span class="blue-grey--text"><v-icon small right>mdi-open-in-new</v-icon></span>
       </v-btn>
     </v-toolbar-items>
-    <UserMeta :camp="camp" />
+    <UserMeta :camp="isOutsider ? null : camp" />
   </v-app-bar>
 </template>