From 19f936b0be6119c359b9736533775abb75d82396 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sun, 9 Oct 2022 00:27:21 +0200
Subject: [PATCH 01/34] Create new dashboard mockup

---
 frontend/src/router.js                   |   6 +
 frontend/src/views/camp/DashboardNew.vue | 374 +++++++++++++++++++++++
 2 files changed, 380 insertions(+)
 create mode 100644 frontend/src/views/camp/DashboardNew.vue

diff --git a/frontend/src/router.js b/frontend/src/router.js
index 33743ddc44..3e83b4b2fa 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -247,6 +247,12 @@ export default new Router({
           name: 'camp/dashboard',
           component: () => import('./views/camp/Dashboard.vue'),
         },
+        {
+          path: 'dashboard-new',
+          name: 'camp/dashboard/new',
+          component: () =>
+            import(/* webpackChungName: "camp" */ './views/camp/DashboardNew.vue'),
+        },
         {
           path: '',
           name: 'camp/home',
diff --git a/frontend/src/views/camp/DashboardNew.vue b/frontend/src/views/camp/DashboardNew.vue
new file mode 100644
index 0000000000..847edcd071
--- /dev/null
+++ b/frontend/src/views/camp/DashboardNew.vue
@@ -0,0 +1,374 @@
+<!--
+Admin screen of a camp: Displays details & periods of a single camp and allows to edit them.
+-->
+
+<template>
+  <content-card :title="camp().title" toolbar>
+    <v-card-text>
+      {{ $tc('views.camp.dashboard.viewDescription', 1, { title: camp().title }) }}
+    </v-card-text>
+
+    <v-skeleton-loader v-if="loading" type="article" />
+
+    <v-card-text>
+      <ETextField
+        v-model="filter.title"
+        placeholder="Titel"
+        rounded
+        outlined
+      />
+      <div class="d-flex my-2" style="gap: 0.5rem; overflow-x: scroll">
+        <ESelect
+          outlined
+          rounded
+          v-model="filter.collaborator"
+          placeholder="Collaborator"
+          multiple
+          dense
+          :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
+          chips
+        />
+        <div></div>
+        <ESelect
+          outlined
+          rounded
+          v-model="filter.category"
+          placeholder="Category"
+          multiple
+          dense
+          :items="['LS', 'LA', 'TABS', 'ES']"
+          chips
+        />
+        <div></div>
+        <ESelect
+          outlined
+          rounded
+          v-model="filter.period"
+          placeholder="Period"
+          multiple
+          dense
+          :items="['Vorlager', 'Hauptlager']"
+        />
+        <div></div>
+        <v-btn
+          rounded
+          outlined
+          elevation="4"
+          @click="
+            filter = {
+              period: '',
+              days: '',
+              collaborator: [],
+              category: '',
+              title: '',
+            }
+          "
+        >Reset filters<v-icon small right>mdi-filter-remove</v-icon></v-btn
+        >
+      </div>
+
+      <div style="display: flow-root">
+        <table style="width: -moz-fit-content; width: -webkit-fill-available">
+          <thead>
+            <tr>
+              <th>Nr</th>
+              <th>Cat.</th>
+              <th align="right" style="padding-right: 10px">Duration</th>
+              <th align="right" style="padding-right: 10px">Time</th>
+              <th align="left" width="100%">Title</th>
+              <th align="left">Collaborators</th>
+            </tr>
+          </thead>
+          <template v-for="period in events">
+            <thead :key="period.id + '_head'">
+              <tr>
+                <th
+                  colspan="6"
+                  style="
+                    text-align: left;
+                    padding-top: 10px;
+                    border-bottom: 1px solid grey;
+                  "
+                >
+                  {{ period.id }}
+                </th>
+              </tr>
+            </thead>
+            <tbody v-for="day in period.days" :key="period.id + '_body'">
+              <tr v-for="scheduleEntry in day.scheduleEntries">
+                <th align="left">{{ day.id }}.{{ scheduleEntry.id }}</th>
+
+                <td align="center">
+                  <v-chip
+                    :color="categories[scheduleEntry.category]"
+                    class="e-category-chip tabular-nums"
+                    dark
+                    small
+                  >
+                    {{ scheduleEntry.category }}
+                  </v-chip>
+                </td>
+
+                <td align="right" style="padding-right: 10px">
+                  {{ scheduleEntry.duration }}
+                </td>
+
+                <td align="right" style="padding-right: 10px">
+                  {{ scheduleEntry.start }}:00
+                </td>
+                <td>
+                  <b>{{ scheduleEntry.title }}</b>
+                </td>
+                <td>{{ scheduleEntry.collaborators.join(', ') }}</td>
+              </tr>
+            </tbody>
+          </template>
+        </table>
+      </div>
+    </v-card-text>
+  </content-card>
+</template>
+
+<script>
+import { campRoute, scheduleEntryRoute } from '@/router.js'
+import ContentCard from '@/components/layout/ContentCard.vue'
+import UserAvatar from '../../components/user/UserAvatar.vue'
+import {
+  dateShort,
+  dateLong,
+  hourShort,
+} from '@/common/helpers/dateHelperUTCFormatted.js'
+import { sortBy } from 'lodash'
+import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+import CategoryChip from '@/components/story/CategoryChip.vue'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    CategoryChip,
+    ContentCard,
+    UserAvatar,
+  },
+  props: {
+    camp: { type: Function, required: true },
+  },
+  data() {
+    return {
+      loading: true,
+      openPeriods: [],
+      filter: {
+        period: '',
+        days: '',
+        collaborator: ['Linux'],
+        category: '',
+        title: '',
+      },
+      categories: {
+        LS: 'red',
+        LA: '#4caf50',
+        TABS: 'red',
+        ES: '#11a1e1',
+      },
+      results: [
+        {
+          id: 'Vorlager',
+          days: [
+            {
+              id: 1,
+              scheduleEntries: [
+                {
+                  id: 1,
+                  start: '18',
+                  duration: '2h',
+                  title: 'Stafetten',
+                  collaborators: ['Ikarus', 'Forte'],
+                  category: 'LS',
+                },
+                {
+                  id: 2,
+                  start: '20',
+                  duration: '1h',
+                  title: 'Essen',
+                  collaborators: ['Linux'],
+                  category: 'ES',
+                },
+                {
+                  id: 3,
+                  start: '21',
+                  duration: '30m',
+                  title: 'c',
+                  collaborators: ['Cosinus'],
+                  category: 'LS',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'Hauptlager',
+          days: [
+            {
+              id: 2,
+              scheduleEntries: [
+                {
+                  id: 1,
+                  start: '8',
+                  duration: '2h',
+                  title: 'Morgenfit',
+                  collaborators: ['Linux', 'Smiley'],
+                  category: 'LA',
+                },
+                {
+                  id: 2,
+                  start: '10',
+                  duration: '1h',
+                  title: 'Atelier',
+                  collaborators: ['Cosinus'],
+                  category: 'LP',
+                },
+                {
+                  id: 3,
+                  start: '12',
+                  duration: '30m',
+                  title: 'Zmittag',
+                  collaborators: ['Forte'],
+                  category: 'ES',
+                },
+              ],
+            },
+            {
+              id: 3,
+              scheduleEntries: [
+                {
+                  id: 1,
+                  start: '10',
+                  duration: '7h',
+                  title: 'Geländegame',
+                  collaborators: ['Olippo', 'Forte'],
+                  category: 'LS',
+                },
+                {
+                  id: 2,
+                  start: '17',
+                  duration: '4h',
+                  title: 'Partyznacht',
+                  collaborators: ['Linux'],
+                  category: 'ES',
+                },
+                {
+                  id: 3,
+                  start: '21',
+                  duration: '30m',
+                  title: 'TABS',
+                  collaborators: ['Smiley'],
+                  category: 'TABS',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    }
+  },
+  computed: {
+    events() {
+      return this.results
+        .filter((period) => period.id.includes(this.filter.period))
+        .map((period) => ({
+          ...period,
+          days: period.days.map(({ id, scheduleEntries }) => ({
+            id,
+            scheduleEntries: scheduleEntries.filter((scheduleEntry) => {
+              return (
+                scheduleEntry.title.includes(this.filter.title) &&
+                (this.filter.category === ''
+                  ? true
+                  : Array.isArray(this.filter.category)
+                  ? this.filter.category.some(
+                      (category) => scheduleEntry.category === category
+                    )
+                  : scheduleEntry.category.includes(this.filter.category)) &&
+                (this.filter.collaborator === ''
+                  ? true
+                  : Array.isArray(this.filter.collaborator)
+                  ? this.filter.collaborator.every((collaborator) =>
+                      scheduleEntry.collaborators.some((col) => col === collaborator)
+                    )
+                  : scheduleEntry.collaborators.includes(this.filter.collaborator)) &&
+                scheduleEntry.category.includes(this.filter.category)
+              )
+            }),
+          })),
+        }))
+    },
+    // returns scheduleEntries per day without the need for an additional API call for each day
+    scheduleEntriesByDay() {
+      let scheduleEntriesByDay = []
+
+      this.camp()
+        .periods()
+        .items.forEach(function (period) {
+          period.scheduleEntries().items.forEach(function (scheduleEntry) {
+            const dayUri = scheduleEntry.day()._meta.self
+            if (!(dayUri in scheduleEntriesByDay)) {
+              scheduleEntriesByDay[dayUri] = []
+            }
+            scheduleEntriesByDay[dayUri].push(scheduleEntry)
+          })
+        })
+
+      return scheduleEntriesByDay
+    },
+  },
+  async mounted() {
+    const [periods] = await Promise.all([
+      this.camp().periods()._meta.load,
+      this.camp().activities()._meta.load,
+      this.camp().categories()._meta.load,
+    ])
+
+    this.openPeriods = periods.items
+      .map((period, idx) => (Date.parse(period.end) >= new Date() ? idx : null))
+      .filter((idx) => idx !== null)
+
+    this.loading = false
+  },
+  methods: {
+    dateShort,
+    dateLong,
+    hourShort,
+    campRoute,
+    scheduleEntryRoute,
+    showAnyPeriod(camp) {
+      return camp.periods().items.some(this.showPeriod)
+    },
+    showPeriod(period) {
+      return period.days().items.some(this.showDay)
+    },
+    showDay(day) {
+      return (this.scheduleEntriesByDay[day._meta.self] || []).some(
+        this.showScheduleEntry
+      )
+    },
+    showScheduleEntry(scheduleEntry) {
+      const authUser = this.$auth.user()
+      const activityResponsibles = scheduleEntry.activity().activityResponsibles().items
+      return activityResponsibles.some((activityResponsible) => {
+        const campCollaboration = activityResponsible.campCollaboration()
+        return (
+          !campCollaboration._meta.loading &&
+          typeof campCollaboration.user === 'function' &&
+          campCollaboration.user().id === authUser.id
+        )
+      })
+    },
+    sortActivityResponsibles(activityResponsibles) {
+      return sortBy(activityResponsibles, (activityResponsible) =>
+        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
+      )
+    },
+  },
+}
+</script>
+
+<style scoped></style>

From 50a03856be11e56a459f023375ca57041252b6cf Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 22 Oct 2022 12:42:10 +0200
Subject: [PATCH 02/34] Refine design

---
 frontend/src/views/camp/DashboardNew.vue | 113 ++++++++++++-----------
 1 file changed, 61 insertions(+), 52 deletions(-)

diff --git a/frontend/src/views/camp/DashboardNew.vue b/frontend/src/views/camp/DashboardNew.vue
index 847edcd071..b4bc40e99d 100644
--- a/frontend/src/views/camp/DashboardNew.vue
+++ b/frontend/src/views/camp/DashboardNew.vue
@@ -4,57 +4,54 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
 
 <template>
   <content-card :title="camp().title" toolbar>
-    <v-card-text>
-      {{ $tc('views.camp.dashboard.viewDescription', 1, { title: camp().title }) }}
-    </v-card-text>
 
-    <v-skeleton-loader v-if="loading" type="article" />
+    <template #title>
 
-    <v-card-text>
-      <ETextField
-        v-model="filter.title"
-        placeholder="Titel"
-        rounded
-        outlined
-      />
-      <div class="d-flex my-2" style="gap: 0.5rem; overflow-x: scroll">
-        <ESelect
-          outlined
+      <v-card-text>
+        <ETextField
+          v-model="filter.title"
+          placeholder="Aktivitäten suchen"
           rounded
-          v-model="filter.collaborator"
-          placeholder="Collaborator"
-          multiple
-          dense
-          :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
-          chips
-        />
-        <div></div>
-        <ESelect
           outlined
-          rounded
-          v-model="filter.category"
-          placeholder="Category"
-          multiple
-          dense
-          :items="['LS', 'LA', 'TABS', 'ES']"
-          chips
-        />
-        <div></div>
-        <ESelect
-          outlined
-          rounded
-          v-model="filter.period"
-          placeholder="Period"
-          multiple
-          dense
-          :items="['Vorlager', 'Hauptlager']"
         />
-        <div></div>
-        <v-btn
-          rounded
-          outlined
-          elevation="4"
-          @click="
+        <div class="d-flex my-2" style="gap: 0.5rem; overflow-x: scroll">
+          <ESelect
+            outlined
+            rounded
+            v-model="filter.collaborator"
+            placeholder="Collaborator"
+            multiple
+            dense
+            :items="[{text: 'Alle', value: ''}, 'Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
+            chips
+          />
+          <div></div>
+          <ESelect
+            outlined
+            rounded
+            v-model="filter.category"
+            placeholder="Category"
+            multiple
+            dense
+            :items="['LS', 'LA', 'TABS', 'ES']"
+            chips
+          />
+          <div></div>
+          <ESelect
+            outlined
+            rounded
+            v-model="filter.period"
+            placeholder="Period"
+            multiple
+            dense
+            :items="[{text: 'Alle', value: ''}, {text:'Vorlager', value:'Vorlager'}, {text: 'Hauptlager', value: 'Hauptlager'}]"
+          />
+          <div></div>
+          <v-btn
+            rounded
+            outlined
+            elevation="4"
+            @click="
             filter = {
               period: '',
               days: '',
@@ -63,9 +60,17 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
               title: '',
             }
           "
-        >Reset filters<v-icon small right>mdi-filter-remove</v-icon></v-btn
-        >
-      </div>
+          >Reset filters<v-icon small right>mdi-filter-remove</v-icon></v-btn
+          >
+        </div>
+      </v-card-text>
+    </template>
+    <v-card-text>
+      {{ $tc('views.camp.dashboard.viewDescription', 1, { title: camp().title }) }}
+    </v-card-text>
+
+    <v-skeleton-loader v-if="loading" type="article" />
+
 
       <div style="display: flow-root">
         <table style="width: -moz-fit-content; width: -webkit-fill-available">
@@ -96,7 +101,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
             </thead>
             <tbody v-for="day in period.days" :key="period.id + '_body'">
               <tr v-for="scheduleEntry in day.scheduleEntries">
-                <th align="left">{{ day.id }}.{{ scheduleEntry.id }}</th>
+                <th align="left" class="tabular-nums">{{ day.id }}.{{ scheduleEntry.id }}</th>
 
                 <td align="center">
                   <v-chip
@@ -119,7 +124,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
                 <td>
                   <b>{{ scheduleEntry.title }}</b>
                 </td>
-                <td>{{ scheduleEntry.collaborators.join(', ') }}</td>
+                <td align="right">{{ scheduleEntry.collaborators.join(', ') }}</td>
               </tr>
             </tbody>
           </template>
@@ -273,7 +278,11 @@ export default {
   computed: {
     events() {
       return this.results
-        .filter((period) => period.id.includes(this.filter.period))
+        .filter((period) =>
+          Array.isArray(this.filter.period)
+            ? this.filter.period.some((filter) => period.id.includes(filter))
+            : period.id.includes(this.filter.period)
+        )
         .map((period) => ({
           ...period,
           days: period.days.map(({ id, scheduleEntries }) => ({

From e69c3795c3107a5b334f06be8a5c42702c535652 Mon Sep 17 00:00:00 2001
From: Manuel Meister <news.manuelsworld@gmail.com>
Date: Sat, 29 Oct 2022 22:45:42 +0200
Subject: [PATCH 03/34] Refine dashboard design

---
 .../src/components/dashboard/ActivityRow.vue  |  76 ++++
 .../components/dashboard/BaselineCenter.vue   |  34 ++
 .../components/dashboard/BooleanFilter.vue    |  21 +
 .../components/dashboard/FilterDivider.vue    |  16 +
 .../src/components/dashboard/SelectFilter.vue | 137 +++++++
 frontend/src/components/user/AvatarRow.vue    |  56 +++
 frontend/src/router.js                        |   3 +-
 frontend/src/scss/global.scss                 |   4 +
 frontend/src/views/camp/DashboardNew.vue      | 384 +++++++++---------
 9 files changed, 536 insertions(+), 195 deletions(-)
 create mode 100644 frontend/src/components/dashboard/ActivityRow.vue
 create mode 100644 frontend/src/components/dashboard/BaselineCenter.vue
 create mode 100644 frontend/src/components/dashboard/BooleanFilter.vue
 create mode 100644 frontend/src/components/dashboard/FilterDivider.vue
 create mode 100644 frontend/src/components/dashboard/SelectFilter.vue
 create mode 100644 frontend/src/components/user/AvatarRow.vue

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
new file mode 100644
index 0000000000..82a84778d1
--- /dev/null
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -0,0 +1,76 @@
+<template>
+  <tr class="row">
+    <th align="left" class="tabular-nums" scope="row">
+      <BaselineCenter smaller>{{ scheduleEntry.number }}</BaselineCenter>
+      <br />
+      <CategoryChip small dense :category="scheduleEntry.category" class="d-sm-none" />
+    </th>
+    <td class="d-none d-sm-table-cell">
+      <CategoryChip small dense :category="scheduleEntry.category" />
+    </td>
+    <td>
+      {{ scheduleEntry.start.padStart(2, '0') }}:00<br />
+      <span class="e-subtitle">{{ scheduleEntry.duration }}</span>
+    </td>
+    <td width="100%" class="contentrow">
+      <a :to="{ name: 'dashboard' }" class="black--text">
+        {{ scheduleEntry.title }}<br />
+      </a>
+      <span class="e-subtitle">{{ scheduleEntry.location }}</span>
+    </td>
+    <td class="contentrow avatarrow overflow-visible">
+      <AvatarRow :users="scheduleEntry.collaborators" size="28" class="ml-auto" />
+    </td>
+  </tr>
+</template>
+
+<script>
+import AvatarRow from '@/components/user/AvatarRow.vue'
+import CategoryChip from '@/components/generic/CategoryChip.vue'
+import BaselineCenter from '@/components/dashboard/BaselineCenter.vue'
+
+export default {
+  name: 'ActivityRow',
+  components: { BaselineCenter, CategoryChip, AvatarRow },
+  props: {
+    scheduleEntry: { type: Object, required: true },
+  },
+}
+</script>
+
+<style scoped>
+.row {
+  display: table-row;
+  gap: 1rem;
+  vertical-align: baseline;
+}
+
+tr + tr :is(td, th) {
+  border-top: 1px solid #ddd;
+}
+
+:is(td, th) {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+:is(td, th) + :is(td, th) {
+  padding-left: 0.5rem;
+}
+
+.contentrow {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.avatarrow {
+  vertical-align: middle;
+}
+
+.e-subtitle {
+  font-size: 0.9em;
+  color: #666;
+}
+</style>
diff --git a/frontend/src/components/dashboard/BaselineCenter.vue b/frontend/src/components/dashboard/BaselineCenter.vue
new file mode 100644
index 0000000000..06faff6446
--- /dev/null
+++ b/frontend/src/components/dashboard/BaselineCenter.vue
@@ -0,0 +1,34 @@
+<template>
+  <span :class="['e-bc', smaller && 'e-bc--smaller']"
+    ><span class="content"><slot /></span
+  ></span>
+</template>
+
+<script>
+export default {
+  name: 'BaselineCenter',
+  props: {
+    smaller: Boolean,
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.e-bc {
+  display: inline-flex;
+  vertical-align: baseline;
+  align-items: center;
+
+  &::before {
+    user-select: none;
+    pointer-events: none;
+    content: '\200B';
+    font-size: 1em;
+    line-height: 1;
+  }
+
+  &.e-bc--smaller .content {
+    font-size: 0.75em;
+  }
+}
+</style>
diff --git a/frontend/src/components/dashboard/BooleanFilter.vue b/frontend/src/components/dashboard/BooleanFilter.vue
new file mode 100644
index 0000000000..e21abe0592
--- /dev/null
+++ b/frontend/src/components/dashboard/BooleanFilter.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-chip
+    label
+    outlined
+    :color="value ? 'primary' : null"
+    @click="$emit('input', !value)"
+    >{{ label }}</v-chip
+  >
+</template>
+
+<script>
+export default {
+  name: 'BooleanFilter',
+  props: {
+    value: Boolean,
+    label: { type: String, required: true },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/dashboard/FilterDivider.vue b/frontend/src/components/dashboard/FilterDivider.vue
new file mode 100644
index 0000000000..ff1d156e3a
--- /dev/null
+++ b/frontend/src/components/dashboard/FilterDivider.vue
@@ -0,0 +1,16 @@
+<template>
+  <span>|</span>
+</template>
+
+<script>
+export default {
+  name: 'FilterDivider',
+}
+</script>
+
+<style scoped>
+span {
+  color: rgba(0, 0, 0, 0.12);
+  align-self: center;
+}
+</style>
diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
new file mode 100644
index 0000000000..02b6d831f6
--- /dev/null
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -0,0 +1,137 @@
+<template>
+  <v-menu offset-y :close-on-content-click="!multiple">
+    <template #activator="{ on, attrs }">
+      <v-chip
+        label
+        outlined
+        :color="active || value.length !== 0 ? 'primary' : null"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <template v-if="hasSelection">
+          <span class="d-none d-sm-inline">{{
+            labelValue ? `${label}: ${labelValue}` : label
+          }}</span>
+          <span class="d-sm-none">{{ labelValue || label }}</span>
+        </template>
+        <template v-else>
+          {{ label }}
+        </template>
+        <v-icon right>mdi-chevron-down</v-icon>
+      </v-chip>
+    </template>
+    <v-list dense>
+      <v-list-item
+        dense
+        :input-value="value.length === 0"
+        color="primary"
+        @click.prevent="clear()"
+      >
+        <v-list-item-title>Alle</v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-for="(item, index) in processedItems"
+        :key="index"
+        dense
+        :input-value="item.selected"
+        color="primary"
+        @click.prevent="toggle(item.value)"
+      >
+        <v-list-item-title>
+          <slot name="item" v-bind="{ item, index }">{{ item.text }} </slot>
+        </v-list-item-title>
+        <v-list-item-action v-if="multiple">
+          <v-checkbox v-model="item.selected" dense />
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  name: 'SelectFilter',
+  props: {
+    active: Boolean,
+    label: { type: String, required: true },
+    multiple: { type: Boolean, default: false },
+    value: { type: [Array, String], default: () => [] },
+    items: { type: Array, default: () => [] },
+  },
+  data: () => ({
+    changed: false,
+    internalSelectedArray: [],
+    internalSelectedString: '',
+  }),
+  computed: {
+    processedItems() {
+      return this.items.map((item) => ({
+        text: item.text ?? item,
+        value: item.value ?? item,
+        selected: this.multiple
+          ? this.value.includes(item.value ?? item) ||
+            this.internalSelectedArray.includes(item.value ?? item)
+          : this.value === (item.value ?? item),
+      }))
+    },
+    hasSelection() {
+      return (
+        this.value &&
+        (this.multiple
+          ? this.internalSelectedArray && this.value === this.internalSelectedArray
+          : this.internalSelectedString && this.value === this.internalSelectedString)
+      )
+    },
+    labelValue() {
+      return this.multiple
+        ? [
+            this.internalSelectedArray.slice(0, -1).join(', '),
+            this.internalSelectedArray.at(-1),
+          ]
+            .filter((i) => i !== '')
+            .join(' & ')
+        : this.internalSelectedString
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        if (this.multiple) {
+          this.internalSelectedArray = newValue
+        } else {
+          this.internalSelectedString = newValue
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    clear() {
+      this.changed = false
+      if (this.multiple) {
+        this.internalSelectedArray = []
+        this.$emit('input', this.internalSelectedArray)
+      } else {
+        this.internalSelectedString = ''
+        this.$emit('input', '')
+      }
+    },
+    toggle(item) {
+      this.changed = true
+      if (this.multiple) {
+        this.internalSelectedArray.includes(item)
+          ? (this.internalSelectedArray = this.internalSelectedArray.filter(
+              (selected) => selected !== item
+            ))
+          : this.internalSelectedArray.push(item)
+        this.$emit('input', this.internalSelectedArray)
+      } else {
+        this.internalSelectedString = item
+        this.$emit('input', item)
+      }
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/user/AvatarRow.vue b/frontend/src/components/user/AvatarRow.vue
new file mode 100644
index 0000000000..44adde8c0f
--- /dev/null
+++ b/frontend/src/components/user/AvatarRow.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="avatarrow" :style="avatarrow">
+    <div v-for="user in users" :key="user.id" class="avataritem">
+      <UserAvatar :size="Number(size)" :user="user" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AvatarRow',
+  props: {
+    users: { type: Array, default: () => [] },
+    size: { type: [Number, String], default: 20 },
+  },
+  computed: {
+    maxWidth() {
+      return (this.users?.length - 1) * (Number(this.size) * 0.25) + Number(this.size)
+    },
+    avatarrow() {
+      return {
+        'max-width': `${this.maxWidth}px`,
+        'font-size': `${this.size}px`,
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.avatarrow {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 0.75em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  transition: gap 0.25s ease;
+}
+
+@media #{map-get($display-breakpoints, 'md-and-up')} {
+  .avatarrow {
+    gap: 1.1em;
+  }
+}
+
+.avatarrow:hover {
+  gap: 1.1em;
+}
+
+.avataritem {
+  display: grid;
+  width: 0;
+  place-content: center;
+  text-decoration: none;
+}
+</style>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 3e83b4b2fa..0798b37dd8 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -250,8 +250,7 @@ export default new Router({
         {
           path: 'dashboard-new',
           name: 'camp/dashboard/new',
-          component: () =>
-            import(/* webpackChungName: "camp" */ './views/camp/DashboardNew.vue'),
+          component: () => import('./views/camp/DashboardNew.vue'),
         },
         {
           path: '',
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index c5a29d99ab..37b11af379 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -94,3 +94,7 @@ body {
 .pb-safe {
   padding-bottom: env(safe-area-inset-bottom);
 }
+
+.d-flow-root {
+  display: flow-root;
+}
diff --git a/frontend/src/views/camp/DashboardNew.vue b/frontend/src/views/camp/DashboardNew.vue
index b4bc40e99d..7ab0c73969 100644
--- a/frontend/src/views/camp/DashboardNew.vue
+++ b/frontend/src/views/camp/DashboardNew.vue
@@ -3,139 +3,116 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
 -->
 
 <template>
-  <content-card :title="camp().title" toolbar>
-
-    <template #title>
-
-      <v-card-text>
-        <ETextField
-          v-model="filter.title"
-          placeholder="Aktivitäten suchen"
-          rounded
-          outlined
+  <content-card title="Aktivitäten" toolbar>
+    <div class="d-flow-root">
+      <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
+        <BooleanFilter
+          label="Nur meine Aktivitäten"
+          :value="
+            filter.collaborator.includes('Linux') && filter.collaborator.length === 1
+          "
+          @input="toggleMeFilter()"
         />
-        <div class="d-flex my-2" style="gap: 0.5rem; overflow-x: scroll">
-          <ESelect
-            outlined
-            rounded
-            v-model="filter.collaborator"
-            placeholder="Collaborator"
-            multiple
-            dense
-            :items="[{text: 'Alle', value: ''}, 'Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
-            chips
-          />
-          <div></div>
-          <ESelect
-            outlined
-            rounded
-            v-model="filter.category"
-            placeholder="Category"
-            multiple
-            dense
-            :items="['LS', 'LA', 'TABS', 'ES']"
-            chips
-          />
-          <div></div>
-          <ESelect
-            outlined
-            rounded
-            v-model="filter.period"
-            placeholder="Period"
-            multiple
-            dense
-            :items="[{text: 'Alle', value: ''}, {text:'Vorlager', value:'Vorlager'}, {text: 'Hauptlager', value: 'Hauptlager'}]"
-          />
-          <div></div>
-          <v-btn
-            rounded
-            outlined
-            elevation="4"
-            @click="
+        <FilterDivider />
+        <SelectFilter
+          v-model="filter.collaborator"
+          multiple
+          :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
+          label="Verantwortlich"
+        >
+          <template #item="{ item }">
+            <UserAvatar :user="users[item.value]" size="18" class="mr-1" />
+            {{ item.text }}
+          </template>
+        </SelectFilter>
+        <SelectFilter
+          v-model="filter.category"
+          :items="['LS', 'LA', 'LP', 'TA', 'ES']"
+          label="Kategorie"
+        >
+          <template #item="{ item }">
+            <CategoryChip dense :category="categories[item.value]" class="mr-1" />
+            {{ categories[item.value].name }}
+          </template>
+        </SelectFilter>
+        <SelectFilter
+          v-if="results.length > 1"
+          v-model="filter.period"
+          :items="[
+            { text: 'Vorlager', value: 'Vorlager' },
+            { text: 'Hauptlager', value: 'Hauptlager' },
+          ]"
+          label="Lagerabschnitt"
+        />
+        <v-chip
+          v-if="filter.period || filter.collaborator.length > 0 || filter.category"
+          label
+          outlined
+          @click="
             filter = {
               period: '',
-              days: '',
               collaborator: [],
               category: '',
-              title: '',
             }
           "
-          >Reset filters<v-icon small right>mdi-filter-remove</v-icon></v-btn
-          >
-        </div>
-      </v-card-text>
-    </template>
-    <v-card-text>
-      {{ $tc('views.camp.dashboard.viewDescription', 1, { title: camp().title }) }}
-    </v-card-text>
-
-    <v-skeleton-loader v-if="loading" type="article" />
-
-
-      <div style="display: flow-root">
-        <table style="width: -moz-fit-content; width: -webkit-fill-available">
-          <thead>
-            <tr>
-              <th>Nr</th>
-              <th>Cat.</th>
-              <th align="right" style="padding-right: 10px">Duration</th>
-              <th align="right" style="padding-right: 10px">Time</th>
-              <th align="left" width="100%">Title</th>
-              <th align="left">Collaborators</th>
-            </tr>
-          </thead>
-          <template v-for="period in events">
-            <thead :key="period.id + '_head'">
-              <tr>
-                <th
-                  colspan="6"
-                  style="
-                    text-align: left;
-                    padding-top: 10px;
-                    border-bottom: 1px solid grey;
-                  "
-                >
-                  {{ period.id }}
-                </th>
-              </tr>
-            </thead>
-            <tbody v-for="day in period.days" :key="period.id + '_body'">
-              <tr v-for="scheduleEntry in day.scheduleEntries">
-                <th align="left" class="tabular-nums">{{ day.id }}.{{ scheduleEntry.id }}</th>
-
-                <td align="center">
-                  <v-chip
-                    :color="categories[scheduleEntry.category]"
-                    class="e-category-chip tabular-nums"
-                    dark
-                    small
-                  >
-                    {{ scheduleEntry.category }}
-                  </v-chip>
-                </td>
-
-                <td align="right" style="padding-right: 10px">
-                  {{ scheduleEntry.duration }}
-                </td>
-
-                <td align="right" style="padding-right: 10px">
-                  {{ scheduleEntry.start }}:00
-                </td>
-                <td>
-                  <b>{{ scheduleEntry.title }}</b>
-                </td>
-                <td align="right">{{ scheduleEntry.collaborators.join(', ') }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </table>
+        >
+          <v-icon left>mdi-close</v-icon>
+          Filter entfernen
+        </v-chip>
       </div>
-    </v-card-text>
+      <table
+        v-for="period in events"
+        :key="period.id"
+        class="mx-4 mt-6 mb-3"
+        style="border-collapse: collapse"
+      >
+        <caption class="font-weight-bold text-left">
+          {{
+            period.id
+          }}
+        </caption>
+        <thead :key="period.id + '_head'">
+          <tr class="d-sr-only">
+            <th :id="period.id + 'th-number'" scope="col">Nummer</th>
+            <th :id="period.id + 'th-category'" scope="col">Kategorie</th>
+            <th :id="period.id + 'th-time'" scope="col">Zeit</th>
+            <th :id="period.id + 'th-title'" scope="col">Titel</th>
+            <th :id="period.id + 'th-responsible'" scope="col">Verantwortlich</th>
+          </tr>
+        </thead>
+        <tbody
+          v-for="day in period.days"
+          :key="period.id + day.id"
+          :aria-labelledby="period.id + day.id + 'th'"
+        >
+          <tr>
+            <th
+              :id="period.id + day.id + 'th'"
+              colspan="5"
+              scope="colgroup"
+              align="left"
+              style="
+                padding-top: 0.75rem;
+                font-weight: 400;
+                color: #666;
+                font-size: 0.9rem;
+              "
+            >
+              {{ day.date }}
+            </th>
+          </tr>
+          <ActivityRow
+            v-for="scheduleEntry in day.scheduleEntries"
+            :key="day.id + scheduleEntry.id"
+            :schedule-entry="scheduleEntry"
+          />
+        </tbody>
+      </table>
+    </div>
   </content-card>
 </template>
 
 <script>
-import { campRoute, scheduleEntryRoute } from '@/router.js'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import UserAvatar from '../../components/user/UserAvatar.vue'
 import {
@@ -143,13 +120,20 @@ import {
   dateLong,
   hourShort,
 } from '@/common/helpers/dateHelperUTCFormatted.js'
-import { sortBy } from 'lodash'
-import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
-import CategoryChip from '@/components/story/CategoryChip.vue'
+import CategoryChip from '@/components/generic/CategoryChip.vue'
+import BooleanFilter from '@/components/dashboard/BooleanFilter.vue'
+import SelectFilter from '@/components/dashboard/SelectFilter.vue'
+import ActivityRow from '@/components/dashboard/ActivityRow.vue'
+import dayjs from 'dayjs'
+import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 
 export default {
-  name: 'Dashboard',
+  name: 'DashboardNew',
   components: {
+    FilterDivider,
+    ActivityRow,
+    SelectFilter,
+    BooleanFilter,
     CategoryChip,
     ContentCard,
     UserAvatar,
@@ -163,16 +147,23 @@ export default {
       openPeriods: [],
       filter: {
         period: '',
-        days: '',
-        collaborator: ['Linux'],
+        collaborator: [],
         category: '',
-        title: '',
+      },
+      users: {
+        Linux: { id: 'ab000df0', displayName: 'Linux' },
+        Olippo: { id: 'ff776300', displayName: 'Olippo' },
+        Forte: { id: 'ff783008', displayName: 'Forte' },
+        Smiley: { id: 'df98651b', displayName: 'Smiley' },
+        Ikarus: { id: '5192fab6', displayName: 'Ikarus' },
+        Cosinus: { id: 'bcc0dd05', displayName: 'Cosinus' },
       },
       categories: {
-        LS: 'red',
-        LA: '#4caf50',
-        TABS: 'red',
-        ES: '#11a1e1',
+        LS: { short: 'LS', color: '#4caf50', name: 'Lagersport' },
+        LA: { short: 'LA', color: '#ffa200', name: 'Lageraktivität' },
+        LP: { short: 'LP', color: '#99ccff', name: 'Lagerprogramm' },
+        TA: { short: 'TA', color: '#ffffff', name: 'Tagesabschluss' },
+        ES: { short: 'ES', color: '#bbbbbb', name: 'Essen' },
       },
       results: [
         {
@@ -183,25 +174,31 @@ export default {
               scheduleEntries: [
                 {
                   id: 1,
+                  number: '1.1',
                   start: '18',
                   duration: '2h',
                   title: 'Stafetten',
-                  collaborators: ['Ikarus', 'Forte'],
+                  location: 'Sportfeld',
+                  collaborators: ['Ikarus', 'Forte', 'Linux'],
                   category: 'LS',
                 },
                 {
                   id: 2,
+                  number: '1.2',
                   start: '20',
                   duration: '1h',
                   title: 'Essen',
-                  collaborators: ['Linux'],
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Forte'],
                   category: 'ES',
                 },
                 {
                   id: 3,
+                  number: '1.3',
                   start: '21',
                   duration: '30m',
-                  title: 'c',
+                  title: 'Once upon a time there was a long title',
+                  location: 'Gschichtliruum',
                   collaborators: ['Cosinus'],
                   category: 'LS',
                 },
@@ -217,26 +214,32 @@ export default {
               scheduleEntries: [
                 {
                   id: 1,
+                  number: '2.1',
                   start: '8',
                   duration: '2h',
                   title: 'Morgenfit',
+                  location: 'Wiese',
                   collaborators: ['Linux', 'Smiley'],
                   category: 'LA',
                 },
                 {
                   id: 2,
+                  number: '2.2',
                   start: '10',
                   duration: '1h',
                   title: 'Atelier',
-                  collaborators: ['Cosinus'],
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Cosinus', 'Linux'],
                   category: 'LP',
                 },
                 {
                   id: 3,
+                  number: '2.3',
                   start: '12',
                   duration: '30m',
                   title: 'Zmittag',
-                  collaborators: ['Forte'],
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Ikarus'],
                   category: 'ES',
                 },
               ],
@@ -246,27 +249,33 @@ export default {
               scheduleEntries: [
                 {
                   id: 1,
+                  number: '3.1',
                   start: '10',
                   duration: '7h',
                   title: 'Geländegame',
-                  collaborators: ['Olippo', 'Forte'],
+                  location: 'Wald',
+                  collaborators: ['Olippo', 'Forte', 'Linux'],
                   category: 'LS',
                 },
                 {
                   id: 2,
+                  number: '3.2',
                   start: '17',
                   duration: '4h',
                   title: 'Partyznacht',
+                  location: 'Aufenthaltsraum',
                   collaborators: ['Linux'],
                   category: 'ES',
                 },
                 {
                   id: 3,
+                  number: '3.3',
                   start: '21',
                   duration: '30m',
-                  title: 'TABS',
+                  title: 'Tabs',
+                  location: 'Feuerschale',
                   collaborators: ['Smiley'],
-                  category: 'TABS',
+                  category: 'TA',
                 },
               ],
             },
@@ -278,37 +287,34 @@ export default {
   computed: {
     events() {
       return this.results
-        .filter((period) =>
-          Array.isArray(this.filter.period)
-            ? this.filter.period.some((filter) => period.id.includes(filter))
-            : period.id.includes(this.filter.period)
+        .filter(
+          (period) =>
+            this.filter.period.length === 0 ||
+            (Array.isArray(this.filter.period)
+              ? this.filter.period.some((filter) => period.id.includes(filter))
+              : period.id.includes(this.filter.period))
         )
         .map((period) => ({
           ...period,
-          days: period.days.map(({ id, scheduleEntries }) => ({
-            id,
-            scheduleEntries: scheduleEntries.filter((scheduleEntry) => {
-              return (
-                scheduleEntry.title.includes(this.filter.title) &&
-                (this.filter.category === ''
-                  ? true
-                  : Array.isArray(this.filter.category)
-                  ? this.filter.category.some(
-                      (category) => scheduleEntry.category === category
-                    )
-                  : scheduleEntry.category.includes(this.filter.category)) &&
-                (this.filter.collaborator === ''
-                  ? true
-                  : Array.isArray(this.filter.collaborator)
-                  ? this.filter.collaborator.every((collaborator) =>
-                      scheduleEntry.collaborators.some((col) => col === collaborator)
-                    )
-                  : scheduleEntry.collaborators.includes(this.filter.collaborator)) &&
-                scheduleEntry.category.includes(this.filter.category)
-              )
-            }),
-          })),
+          days: period.days
+            .map(({ id, scheduleEntries }) => ({
+              id,
+              date: dayjs().add(id, 'day').format('dd, D. MMM YYYY'),
+              scheduleEntries: scheduleEntries
+                .filter((scheduleEntry) => {
+                  return this.filterScheduleEntry(scheduleEntry)
+                })
+                .map((scheduleEntry) => ({
+                  ...scheduleEntry,
+                  collaborators: scheduleEntry.collaborators.map(
+                    (collaborator) => this.users[collaborator]
+                  ),
+                  category: this.categories[scheduleEntry.category],
+                })),
+            }))
+            .filter(({ scheduleEntries }) => scheduleEntries.length > 0),
         }))
+        .filter(({ days }) => days.length > 0)
     },
     // returns scheduleEntries per day without the need for an additional API call for each day
     scheduleEntriesByDay() {
@@ -343,38 +349,30 @@ export default {
     this.loading = false
   },
   methods: {
+    dayjs,
     dateShort,
     dateLong,
     hourShort,
-    campRoute,
-    scheduleEntryRoute,
-    showAnyPeriod(camp) {
-      return camp.periods().items.some(this.showPeriod)
-    },
-    showPeriod(period) {
-      return period.days().items.some(this.showDay)
-    },
-    showDay(day) {
-      return (this.scheduleEntriesByDay[day._meta.self] || []).some(
-        this.showScheduleEntry
+    matchCollaborators: function (scheduleEntry) {
+      return (
+        this.filter.collaborator.length === 0 ||
+        this.filter.collaborator.every((collaborator) =>
+          scheduleEntry.collaborators.some((col) => col === collaborator)
+        )
       )
     },
-    showScheduleEntry(scheduleEntry) {
-      const authUser = this.$auth.user()
-      const activityResponsibles = scheduleEntry.activity().activityResponsibles().items
-      return activityResponsibles.some((activityResponsible) => {
-        const campCollaboration = activityResponsible.campCollaboration()
-        return (
-          !campCollaboration._meta.loading &&
-          typeof campCollaboration.user === 'function' &&
-          campCollaboration.user().id === authUser.id
-        )
-      })
+    matchCategory: function (scheduleEntry) {
+      return scheduleEntry.category.includes(this.filter.category)
     },
-    sortActivityResponsibles(activityResponsibles) {
-      return sortBy(activityResponsibles, (activityResponsible) =>
-        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
-      )
+    filterScheduleEntry(scheduleEntry) {
+      return this.matchCollaborators(scheduleEntry) && this.matchCategory(scheduleEntry)
+    },
+    toggleMeFilter() {
+      this.filter.collaborator =
+        this.filter.collaborator.includes('Linux') &&
+        this.filter.collaborator.length === 1
+          ? []
+          : ['Linux']
     },
   },
 }

From 87ee43730fd840b1fc84f0bbf669a28c94bde911 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 00:17:39 +0100
Subject: [PATCH 04/34] Rename components

---
 frontend/src/router.js                   |   5 -
 frontend/src/views/camp/Dashboard.vue    | 427 ++++++++++++++++-------
 frontend/src/views/camp/DashboardNew.vue | 381 --------------------
 frontend/src/views/camp/DashboardOld.vue | 202 +++++++++++
 4 files changed, 505 insertions(+), 510 deletions(-)
 delete mode 100644 frontend/src/views/camp/DashboardNew.vue
 create mode 100644 frontend/src/views/camp/DashboardOld.vue

diff --git a/frontend/src/router.js b/frontend/src/router.js
index 0798b37dd8..33743ddc44 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -247,11 +247,6 @@ export default new Router({
           name: 'camp/dashboard',
           component: () => import('./views/camp/Dashboard.vue'),
         },
-        {
-          path: 'dashboard-new',
-          name: 'camp/dashboard/new',
-          component: () => import('./views/camp/DashboardNew.vue'),
-        },
         {
           path: '',
           name: 'camp/home',
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 2be88ec59d..fcea731756 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -3,106 +3,116 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
 -->
 
 <template>
-  <content-card :title="camp().title" toolbar>
-    <v-card-text>
-      {{ $tc('views.camp.dashboard.viewDescription', 1, { title: camp().title }) }}
-    </v-card-text>
-
-    <v-skeleton-loader v-if="loading" type="article" />
-
-    <template v-else-if="showAnyPeriod(camp())">
-      <v-expansion-panels v-model="openPeriods" multiple flat accordion>
-        <template v-for="period in camp().periods().items">
-          <v-expansion-panel v-if="showPeriod(period)" :key="period._meta.self">
-            <v-expansion-panel-header>
-              <h3>
-                {{ period.description }}
-              </h3>
-            </v-expansion-panel-header>
-            <v-expansion-panel-content>
-              <v-row>
-                <template v-for="day in period.days().items">
-                  <template v-if="showDay(day)">
-                    <v-col :key="day._meta.self" cols="12" class="pb-0">
-                      <h4>{{ day.dayOffset + 1 }}) {{ dateLong(day.start) }}</h4>
-                    </v-col>
-                    <template
-                      v-for="scheduleEntry in scheduleEntriesByDay[day._meta.self]"
-                    >
-                      <v-col
-                        v-if="showScheduleEntry(scheduleEntry)"
-                        :key="scheduleEntry._meta.self"
-                        cols="12"
-                        sm="6"
-                        md="4"
-                        lg="3"
-                      >
-                        <v-card
-                          :color="scheduleEntry.activity().category().color"
-                          :to="scheduleEntryRoute(scheduleEntry)"
-                        >
-                          <v-card-title>
-                            {{ scheduleEntry.activity().category().short }}
-                            {{ scheduleEntry.number }}:
-                            {{ scheduleEntry.activity().title }}
-                            <v-spacer />
-                            <user-avatar
-                              v-for="ar in sortActivityResponsibles(
-                                scheduleEntry.activity().activityResponsibles().items
-                              )"
-                              :key="ar._meta.self"
-                              :camp-collaboration="ar.campCollaboration()"
-                              :size="24"
-                              style="margin: 2px"
-                            />
-                          </v-card-title>
-                          <v-card-subtitle>
-                            {{
-                              dateShort(scheduleEntry.start) ==
-                              dateShort(scheduleEntry.end)
-                                ? ''
-                                : dateShort(scheduleEntry.start)
-                            }}
-                            <b> {{ hourShort(scheduleEntry.start) }} </b>
-                            -
-                            {{
-                              dateShort(scheduleEntry.start) ==
-                              dateShort(scheduleEntry.end)
-                                ? ''
-                                : dateShort(scheduleEntry.end)
-                            }}
-                            <b> {{ hourShort(scheduleEntry.end) }} </b>
-                          </v-card-subtitle>
-                        </v-card>
-                      </v-col>
-                    </template>
-                  </template>
-                </template>
-              </v-row>
-            </v-expansion-panel-content>
-          </v-expansion-panel>
-        </template>
-      </v-expansion-panels>
-    </template>
-    <template v-else>
-      <v-card-text>
-        <p style="text-align: center">
-          {{ $tc('views.camp.dashboard.noActivitiesLine1') }} <br />
-          {{ $tc('views.camp.dashboard.noActivitiesLine2') }} <br />
-        </p>
-        <p style="text-align: center">
-          <v-btn color="success" :to="campRoute(camp(), 'program')">
-            <v-icon size="150%" left> mdi-view-dashboard-variant </v-icon>
-            {{ $tc('views.camp.dashboard.program') }}
-          </v-btn>
-        </p>
-      </v-card-text>
-    </template>
+  <content-card title="Aktivitäten" toolbar>
+    <div class="d-flow-root">
+      <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
+        <BooleanFilter
+          label="Nur meine Aktivitäten"
+          :value="
+            filter.collaborator.includes('Linux') && filter.collaborator.length === 1
+          "
+          @input="toggleMeFilter()"
+        />
+        <FilterDivider />
+        <SelectFilter
+          v-model="filter.collaborator"
+          multiple
+          :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
+          label="Verantwortlich"
+        >
+          <template #item="{ item }">
+            <UserAvatar :user="users[item.value]" size="18" class="mr-1" />
+            {{ item.text }}
+          </template>
+        </SelectFilter>
+        <SelectFilter
+          v-model="filter.category"
+          :items="['LS', 'LA', 'LP', 'TA', 'ES']"
+          label="Kategorie"
+        >
+          <template #item="{ item }">
+            <CategoryChip dense :category="categories[item.value]" class="mr-1" />
+            {{ categories[item.value].name }}
+          </template>
+        </SelectFilter>
+        <SelectFilter
+          v-if="results.length > 1"
+          v-model="filter.period"
+          :items="[
+            { text: 'Vorlager', value: 'Vorlager' },
+            { text: 'Hauptlager', value: 'Hauptlager' },
+          ]"
+          label="Lagerabschnitt"
+        />
+        <v-chip
+          v-if="filter.period || filter.collaborator.length > 0 || filter.category"
+          label
+          outlined
+          @click="
+            filter = {
+              period: '',
+              collaborator: [],
+              category: '',
+            }
+          "
+        >
+          <v-icon left>mdi-close</v-icon>
+          Filter entfernen
+        </v-chip>
+      </div>
+      <table
+        v-for="period in events"
+        :key="period.id"
+        class="mx-4 mt-6 mb-3"
+        style="border-collapse: collapse"
+      >
+        <caption class="font-weight-bold text-left">
+          {{
+            period.id
+          }}
+        </caption>
+        <thead :key="period.id + '_head'">
+          <tr class="d-sr-only">
+            <th :id="period.id + 'th-number'" scope="col">Nummer</th>
+            <th :id="period.id + 'th-category'" scope="col">Kategorie</th>
+            <th :id="period.id + 'th-time'" scope="col">Zeit</th>
+            <th :id="period.id + 'th-title'" scope="col">Titel</th>
+            <th :id="period.id + 'th-responsible'" scope="col">Verantwortlich</th>
+          </tr>
+        </thead>
+        <tbody
+          v-for="day in period.days"
+          :key="period.id + day.id"
+          :aria-labelledby="period.id + day.id + 'th'"
+        >
+          <tr>
+            <th
+              :id="period.id + day.id + 'th'"
+              colspan="5"
+              scope="colgroup"
+              align="left"
+              style="
+                padding-top: 0.75rem;
+                font-weight: 400;
+                color: #666;
+                font-size: 0.9rem;
+              "
+            >
+              {{ day.date }}
+            </th>
+          </tr>
+          <ActivityRow
+            v-for="scheduleEntry in day.scheduleEntries"
+            :key="day.id + scheduleEntry.id"
+            :schedule-entry="scheduleEntry"
+          />
+        </tbody>
+      </table>
+    </div>
   </content-card>
 </template>
 
 <script>
-import { campRoute, scheduleEntryRoute } from '@/router.js'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import UserAvatar from '../../components/user/UserAvatar.vue'
 import {
@@ -110,12 +120,21 @@ import {
   dateLong,
   hourShort,
 } from '@/common/helpers/dateHelperUTCFormatted.js'
-import { sortBy } from 'lodash'
-import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+import CategoryChip from '@/components/generic/CategoryChip.vue'
+import BooleanFilter from '@/components/dashboard/BooleanFilter.vue'
+import SelectFilter from '@/components/dashboard/SelectFilter.vue'
+import ActivityRow from '@/components/dashboard/ActivityRow.vue'
+import dayjs from 'dayjs'
+import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 
 export default {
   name: 'Dashboard',
   components: {
+    FilterDivider,
+    ActivityRow,
+    SelectFilter,
+    BooleanFilter,
+    CategoryChip,
     ContentCard,
     UserAvatar,
   },
@@ -126,9 +145,177 @@ export default {
     return {
       loading: true,
       openPeriods: [],
+      filter: {
+        period: '',
+        collaborator: [],
+        category: '',
+      },
+      users: {
+        Linux: { id: 'ab000df0', displayName: 'Linux' },
+        Olippo: { id: 'ff776300', displayName: 'Olippo' },
+        Forte: { id: 'ff783008', displayName: 'Forte' },
+        Smiley: { id: 'df98651b', displayName: 'Smiley' },
+        Ikarus: { id: '5192fab6', displayName: 'Ikarus' },
+        Cosinus: { id: 'bcc0dd05', displayName: 'Cosinus' },
+      },
+      categories: {
+        LS: { short: 'LS', color: '#4caf50', name: 'Lagersport' },
+        LA: { short: 'LA', color: '#ffa200', name: 'Lageraktivität' },
+        LP: { short: 'LP', color: '#99ccff', name: 'Lagerprogramm' },
+        TA: { short: 'TA', color: '#ffffff', name: 'Tagesabschluss' },
+        ES: { short: 'ES', color: '#bbbbbb', name: 'Essen' },
+      },
+      results: [
+        {
+          id: 'Vorlager',
+          days: [
+            {
+              id: 1,
+              scheduleEntries: [
+                {
+                  id: 1,
+                  number: '1.1',
+                  start: '18',
+                  duration: '2h',
+                  title: 'Stafetten',
+                  location: 'Sportfeld',
+                  collaborators: ['Ikarus', 'Forte', 'Linux'],
+                  category: 'LS',
+                },
+                {
+                  id: 2,
+                  number: '1.2',
+                  start: '20',
+                  duration: '1h',
+                  title: 'Essen',
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Forte'],
+                  category: 'ES',
+                },
+                {
+                  id: 3,
+                  number: '1.3',
+                  start: '21',
+                  duration: '30m',
+                  title: 'Once upon a time there was a long title',
+                  location: 'Gschichtliruum',
+                  collaborators: ['Cosinus'],
+                  category: 'LS',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 'Hauptlager',
+          days: [
+            {
+              id: 2,
+              scheduleEntries: [
+                {
+                  id: 1,
+                  number: '2.1',
+                  start: '8',
+                  duration: '2h',
+                  title: 'Morgenfit',
+                  location: 'Wiese',
+                  collaborators: ['Linux', 'Smiley'],
+                  category: 'LA',
+                },
+                {
+                  id: 2,
+                  number: '2.2',
+                  start: '10',
+                  duration: '1h',
+                  title: 'Atelier',
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Cosinus', 'Linux'],
+                  category: 'LP',
+                },
+                {
+                  id: 3,
+                  number: '2.3',
+                  start: '12',
+                  duration: '30m',
+                  title: 'Zmittag',
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Ikarus'],
+                  category: 'ES',
+                },
+              ],
+            },
+            {
+              id: 3,
+              scheduleEntries: [
+                {
+                  id: 1,
+                  number: '3.1',
+                  start: '10',
+                  duration: '7h',
+                  title: 'Geländegame',
+                  location: 'Wald',
+                  collaborators: ['Olippo', 'Forte', 'Linux'],
+                  category: 'LS',
+                },
+                {
+                  id: 2,
+                  number: '3.2',
+                  start: '17',
+                  duration: '4h',
+                  title: 'Partyznacht',
+                  location: 'Aufenthaltsraum',
+                  collaborators: ['Linux'],
+                  category: 'ES',
+                },
+                {
+                  id: 3,
+                  number: '3.3',
+                  start: '21',
+                  duration: '30m',
+                  title: 'Tabs',
+                  location: 'Feuerschale',
+                  collaborators: ['Smiley'],
+                  category: 'TA',
+                },
+              ],
+            },
+          ],
+        },
+      ],
     }
   },
   computed: {
+    events() {
+      return this.results
+        .filter(
+          (period) =>
+            this.filter.period.length === 0 ||
+            (Array.isArray(this.filter.period)
+              ? this.filter.period.some((filter) => period.id.includes(filter))
+              : period.id.includes(this.filter.period))
+        )
+        .map((period) => ({
+          ...period,
+          days: period.days
+            .map(({ id, scheduleEntries }) => ({
+              id,
+              date: dayjs().add(id, 'day').format('dd, D. MMM YYYY'),
+              scheduleEntries: scheduleEntries
+                .filter((scheduleEntry) => {
+                  return this.filterScheduleEntry(scheduleEntry)
+                })
+                .map((scheduleEntry) => ({
+                  ...scheduleEntry,
+                  collaborators: scheduleEntry.collaborators.map(
+                    (collaborator) => this.users[collaborator]
+                  ),
+                  category: this.categories[scheduleEntry.category],
+                })),
+            }))
+            .filter(({ scheduleEntries }) => scheduleEntries.length > 0),
+        }))
+        .filter(({ days }) => days.length > 0)
+    },
     // returns scheduleEntries per day without the need for an additional API call for each day
     scheduleEntriesByDay() {
       let scheduleEntriesByDay = []
@@ -162,38 +349,30 @@ export default {
     this.loading = false
   },
   methods: {
+    dayjs,
     dateShort,
     dateLong,
     hourShort,
-    campRoute,
-    scheduleEntryRoute,
-    showAnyPeriod(camp) {
-      return camp.periods().items.some(this.showPeriod)
-    },
-    showPeriod(period) {
-      return period.days().items.some(this.showDay)
-    },
-    showDay(day) {
-      return (this.scheduleEntriesByDay[day._meta.self] || []).some(
-        this.showScheduleEntry
+    matchCollaborators: function (scheduleEntry) {
+      return (
+        this.filter.collaborator.length === 0 ||
+        this.filter.collaborator.every((collaborator) =>
+          scheduleEntry.collaborators.some((col) => col === collaborator)
+        )
       )
     },
-    showScheduleEntry(scheduleEntry) {
-      const authUser = this.$store.state.auth.user
-      const activityResponsibles = scheduleEntry.activity().activityResponsibles().items
-      return activityResponsibles.some((activityResponsible) => {
-        const campCollaboration = activityResponsible.campCollaboration()
-        return (
-          !campCollaboration._meta.loading &&
-          typeof campCollaboration.user === 'function' &&
-          campCollaboration.user().id === authUser.id
-        )
-      })
+    matchCategory: function (scheduleEntry) {
+      return scheduleEntry.category.includes(this.filter.category)
     },
-    sortActivityResponsibles(activityResponsibles) {
-      return sortBy(activityResponsibles, (activityResponsible) =>
-        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
-      )
+    filterScheduleEntry(scheduleEntry) {
+      return this.matchCollaborators(scheduleEntry) && this.matchCategory(scheduleEntry)
+    },
+    toggleMeFilter() {
+      this.filter.collaborator =
+        this.filter.collaborator.includes('Linux') &&
+        this.filter.collaborator.length === 1
+          ? []
+          : ['Linux']
     },
   },
 }
diff --git a/frontend/src/views/camp/DashboardNew.vue b/frontend/src/views/camp/DashboardNew.vue
deleted file mode 100644
index 7ab0c73969..0000000000
--- a/frontend/src/views/camp/DashboardNew.vue
+++ /dev/null
@@ -1,381 +0,0 @@
-<!--
-Admin screen of a camp: Displays details & periods of a single camp and allows to edit them.
--->
-
-<template>
-  <content-card title="Aktivitäten" toolbar>
-    <div class="d-flow-root">
-      <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
-        <BooleanFilter
-          label="Nur meine Aktivitäten"
-          :value="
-            filter.collaborator.includes('Linux') && filter.collaborator.length === 1
-          "
-          @input="toggleMeFilter()"
-        />
-        <FilterDivider />
-        <SelectFilter
-          v-model="filter.collaborator"
-          multiple
-          :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
-          label="Verantwortlich"
-        >
-          <template #item="{ item }">
-            <UserAvatar :user="users[item.value]" size="18" class="mr-1" />
-            {{ item.text }}
-          </template>
-        </SelectFilter>
-        <SelectFilter
-          v-model="filter.category"
-          :items="['LS', 'LA', 'LP', 'TA', 'ES']"
-          label="Kategorie"
-        >
-          <template #item="{ item }">
-            <CategoryChip dense :category="categories[item.value]" class="mr-1" />
-            {{ categories[item.value].name }}
-          </template>
-        </SelectFilter>
-        <SelectFilter
-          v-if="results.length > 1"
-          v-model="filter.period"
-          :items="[
-            { text: 'Vorlager', value: 'Vorlager' },
-            { text: 'Hauptlager', value: 'Hauptlager' },
-          ]"
-          label="Lagerabschnitt"
-        />
-        <v-chip
-          v-if="filter.period || filter.collaborator.length > 0 || filter.category"
-          label
-          outlined
-          @click="
-            filter = {
-              period: '',
-              collaborator: [],
-              category: '',
-            }
-          "
-        >
-          <v-icon left>mdi-close</v-icon>
-          Filter entfernen
-        </v-chip>
-      </div>
-      <table
-        v-for="period in events"
-        :key="period.id"
-        class="mx-4 mt-6 mb-3"
-        style="border-collapse: collapse"
-      >
-        <caption class="font-weight-bold text-left">
-          {{
-            period.id
-          }}
-        </caption>
-        <thead :key="period.id + '_head'">
-          <tr class="d-sr-only">
-            <th :id="period.id + 'th-number'" scope="col">Nummer</th>
-            <th :id="period.id + 'th-category'" scope="col">Kategorie</th>
-            <th :id="period.id + 'th-time'" scope="col">Zeit</th>
-            <th :id="period.id + 'th-title'" scope="col">Titel</th>
-            <th :id="period.id + 'th-responsible'" scope="col">Verantwortlich</th>
-          </tr>
-        </thead>
-        <tbody
-          v-for="day in period.days"
-          :key="period.id + day.id"
-          :aria-labelledby="period.id + day.id + 'th'"
-        >
-          <tr>
-            <th
-              :id="period.id + day.id + 'th'"
-              colspan="5"
-              scope="colgroup"
-              align="left"
-              style="
-                padding-top: 0.75rem;
-                font-weight: 400;
-                color: #666;
-                font-size: 0.9rem;
-              "
-            >
-              {{ day.date }}
-            </th>
-          </tr>
-          <ActivityRow
-            v-for="scheduleEntry in day.scheduleEntries"
-            :key="day.id + scheduleEntry.id"
-            :schedule-entry="scheduleEntry"
-          />
-        </tbody>
-      </table>
-    </div>
-  </content-card>
-</template>
-
-<script>
-import ContentCard from '@/components/layout/ContentCard.vue'
-import UserAvatar from '../../components/user/UserAvatar.vue'
-import {
-  dateShort,
-  dateLong,
-  hourShort,
-} from '@/common/helpers/dateHelperUTCFormatted.js'
-import CategoryChip from '@/components/generic/CategoryChip.vue'
-import BooleanFilter from '@/components/dashboard/BooleanFilter.vue'
-import SelectFilter from '@/components/dashboard/SelectFilter.vue'
-import ActivityRow from '@/components/dashboard/ActivityRow.vue'
-import dayjs from 'dayjs'
-import FilterDivider from '@/components/dashboard/FilterDivider.vue'
-
-export default {
-  name: 'DashboardNew',
-  components: {
-    FilterDivider,
-    ActivityRow,
-    SelectFilter,
-    BooleanFilter,
-    CategoryChip,
-    ContentCard,
-    UserAvatar,
-  },
-  props: {
-    camp: { type: Function, required: true },
-  },
-  data() {
-    return {
-      loading: true,
-      openPeriods: [],
-      filter: {
-        period: '',
-        collaborator: [],
-        category: '',
-      },
-      users: {
-        Linux: { id: 'ab000df0', displayName: 'Linux' },
-        Olippo: { id: 'ff776300', displayName: 'Olippo' },
-        Forte: { id: 'ff783008', displayName: 'Forte' },
-        Smiley: { id: 'df98651b', displayName: 'Smiley' },
-        Ikarus: { id: '5192fab6', displayName: 'Ikarus' },
-        Cosinus: { id: 'bcc0dd05', displayName: 'Cosinus' },
-      },
-      categories: {
-        LS: { short: 'LS', color: '#4caf50', name: 'Lagersport' },
-        LA: { short: 'LA', color: '#ffa200', name: 'Lageraktivität' },
-        LP: { short: 'LP', color: '#99ccff', name: 'Lagerprogramm' },
-        TA: { short: 'TA', color: '#ffffff', name: 'Tagesabschluss' },
-        ES: { short: 'ES', color: '#bbbbbb', name: 'Essen' },
-      },
-      results: [
-        {
-          id: 'Vorlager',
-          days: [
-            {
-              id: 1,
-              scheduleEntries: [
-                {
-                  id: 1,
-                  number: '1.1',
-                  start: '18',
-                  duration: '2h',
-                  title: 'Stafetten',
-                  location: 'Sportfeld',
-                  collaborators: ['Ikarus', 'Forte', 'Linux'],
-                  category: 'LS',
-                },
-                {
-                  id: 2,
-                  number: '1.2',
-                  start: '20',
-                  duration: '1h',
-                  title: 'Essen',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Forte'],
-                  category: 'ES',
-                },
-                {
-                  id: 3,
-                  number: '1.3',
-                  start: '21',
-                  duration: '30m',
-                  title: 'Once upon a time there was a long title',
-                  location: 'Gschichtliruum',
-                  collaborators: ['Cosinus'],
-                  category: 'LS',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: 'Hauptlager',
-          days: [
-            {
-              id: 2,
-              scheduleEntries: [
-                {
-                  id: 1,
-                  number: '2.1',
-                  start: '8',
-                  duration: '2h',
-                  title: 'Morgenfit',
-                  location: 'Wiese',
-                  collaborators: ['Linux', 'Smiley'],
-                  category: 'LA',
-                },
-                {
-                  id: 2,
-                  number: '2.2',
-                  start: '10',
-                  duration: '1h',
-                  title: 'Atelier',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Cosinus', 'Linux'],
-                  category: 'LP',
-                },
-                {
-                  id: 3,
-                  number: '2.3',
-                  start: '12',
-                  duration: '30m',
-                  title: 'Zmittag',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Ikarus'],
-                  category: 'ES',
-                },
-              ],
-            },
-            {
-              id: 3,
-              scheduleEntries: [
-                {
-                  id: 1,
-                  number: '3.1',
-                  start: '10',
-                  duration: '7h',
-                  title: 'Geländegame',
-                  location: 'Wald',
-                  collaborators: ['Olippo', 'Forte', 'Linux'],
-                  category: 'LS',
-                },
-                {
-                  id: 2,
-                  number: '3.2',
-                  start: '17',
-                  duration: '4h',
-                  title: 'Partyznacht',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Linux'],
-                  category: 'ES',
-                },
-                {
-                  id: 3,
-                  number: '3.3',
-                  start: '21',
-                  duration: '30m',
-                  title: 'Tabs',
-                  location: 'Feuerschale',
-                  collaborators: ['Smiley'],
-                  category: 'TA',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    }
-  },
-  computed: {
-    events() {
-      return this.results
-        .filter(
-          (period) =>
-            this.filter.period.length === 0 ||
-            (Array.isArray(this.filter.period)
-              ? this.filter.period.some((filter) => period.id.includes(filter))
-              : period.id.includes(this.filter.period))
-        )
-        .map((period) => ({
-          ...period,
-          days: period.days
-            .map(({ id, scheduleEntries }) => ({
-              id,
-              date: dayjs().add(id, 'day').format('dd, D. MMM YYYY'),
-              scheduleEntries: scheduleEntries
-                .filter((scheduleEntry) => {
-                  return this.filterScheduleEntry(scheduleEntry)
-                })
-                .map((scheduleEntry) => ({
-                  ...scheduleEntry,
-                  collaborators: scheduleEntry.collaborators.map(
-                    (collaborator) => this.users[collaborator]
-                  ),
-                  category: this.categories[scheduleEntry.category],
-                })),
-            }))
-            .filter(({ scheduleEntries }) => scheduleEntries.length > 0),
-        }))
-        .filter(({ days }) => days.length > 0)
-    },
-    // returns scheduleEntries per day without the need for an additional API call for each day
-    scheduleEntriesByDay() {
-      let scheduleEntriesByDay = []
-
-      this.camp()
-        .periods()
-        .items.forEach(function (period) {
-          period.scheduleEntries().items.forEach(function (scheduleEntry) {
-            const dayUri = scheduleEntry.day()._meta.self
-            if (!(dayUri in scheduleEntriesByDay)) {
-              scheduleEntriesByDay[dayUri] = []
-            }
-            scheduleEntriesByDay[dayUri].push(scheduleEntry)
-          })
-        })
-
-      return scheduleEntriesByDay
-    },
-  },
-  async mounted() {
-    const [periods] = await Promise.all([
-      this.camp().periods()._meta.load,
-      this.camp().activities()._meta.load,
-      this.camp().categories()._meta.load,
-    ])
-
-    this.openPeriods = periods.items
-      .map((period, idx) => (Date.parse(period.end) >= new Date() ? idx : null))
-      .filter((idx) => idx !== null)
-
-    this.loading = false
-  },
-  methods: {
-    dayjs,
-    dateShort,
-    dateLong,
-    hourShort,
-    matchCollaborators: function (scheduleEntry) {
-      return (
-        this.filter.collaborator.length === 0 ||
-        this.filter.collaborator.every((collaborator) =>
-          scheduleEntry.collaborators.some((col) => col === collaborator)
-        )
-      )
-    },
-    matchCategory: function (scheduleEntry) {
-      return scheduleEntry.category.includes(this.filter.category)
-    },
-    filterScheduleEntry(scheduleEntry) {
-      return this.matchCollaborators(scheduleEntry) && this.matchCategory(scheduleEntry)
-    },
-    toggleMeFilter() {
-      this.filter.collaborator =
-        this.filter.collaborator.includes('Linux') &&
-        this.filter.collaborator.length === 1
-          ? []
-          : ['Linux']
-    },
-  },
-}
-</script>
-
-<style scoped></style>
diff --git a/frontend/src/views/camp/DashboardOld.vue b/frontend/src/views/camp/DashboardOld.vue
new file mode 100644
index 0000000000..f2b6af5ec2
--- /dev/null
+++ b/frontend/src/views/camp/DashboardOld.vue
@@ -0,0 +1,202 @@
+<!--
+Admin screen of a camp: Displays details & periods of a single camp and allows to edit them.
+-->
+
+<template>
+  <content-card :title="camp().title" toolbar>
+    <v-card-text>
+      {{ $tc('views.camp.dashboardOld.viewDescription', 1, { title: camp().title }) }}
+    </v-card-text>
+
+    <v-skeleton-loader v-if="loading" type="article" />
+
+    <template v-else-if="showAnyPeriod(camp())">
+      <v-expansion-panels v-model="openPeriods" multiple flat accordion>
+        <template v-for="period in camp().periods().items">
+          <v-expansion-panel v-if="showPeriod(period)" :key="period._meta.self">
+            <v-expansion-panel-header>
+              <h3>
+                {{ period.description }}
+              </h3>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-row>
+                <template v-for="day in period.days().items">
+                  <template v-if="showDay(day)">
+                    <v-col :key="day._meta.self" cols="12" class="pb-0">
+                      <h4>{{ day.dayOffset + 1 }}) {{ dateLong(day.start) }}</h4>
+                    </v-col>
+                    <template
+                      v-for="scheduleEntry in scheduleEntriesByDay[day._meta.self]"
+                    >
+                      <v-col
+                        v-if="showScheduleEntry(scheduleEntry)"
+                        :key="scheduleEntry._meta.self"
+                        cols="12"
+                        sm="6"
+                        md="4"
+                        lg="3"
+                      >
+                        <v-card
+                          :color="scheduleEntry.activity().category().color"
+                          :to="scheduleEntryRoute(scheduleEntry)"
+                        >
+                          <v-card-title>
+                            {{ scheduleEntry.activity().category().short }}
+                            {{ scheduleEntry.number }}:
+                            {{ scheduleEntry.activity().title }}
+                            <v-spacer />
+                            <user-avatar
+                              v-for="ar in sortActivityResponsibles(
+                                scheduleEntry.activity().activityResponsibles().items
+                              )"
+                              :key="ar._meta.self"
+                              :camp-collaboration="ar.campCollaboration()"
+                              :size="24"
+                              style="margin: 2px"
+                            />
+                          </v-card-title>
+                          <v-card-subtitle>
+                            {{
+                              dateShort(scheduleEntry.start) ==
+                              dateShort(scheduleEntry.end)
+                                ? ''
+                                : dateShort(scheduleEntry.start)
+                            }}
+                            <b> {{ hourShort(scheduleEntry.start) }} </b>
+                            -
+                            {{
+                              dateShort(scheduleEntry.start) ==
+                              dateShort(scheduleEntry.end)
+                                ? ''
+                                : dateShort(scheduleEntry.end)
+                            }}
+                            <b> {{ hourShort(scheduleEntry.end) }} </b>
+                          </v-card-subtitle>
+                        </v-card>
+                      </v-col>
+                    </template>
+                  </template>
+                </template>
+              </v-row>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </template>
+      </v-expansion-panels>
+    </template>
+    <template v-else>
+      <v-card-text>
+        <p style="text-align: center">
+          {{ $tc('views.camp.dashboardOld.noActivitiesLine1') }} <br />
+          {{ $tc('views.camp.dashboardOld.noActivitiesLine2') }} <br />
+        </p>
+        <p style="text-align: center">
+          <v-btn color="success" :to="campRoute(camp(), 'program')">
+            <v-icon size="150%" left> mdi-view-dashboard-variant </v-icon>
+            {{ $tc('views.camp.dashboardOld.program') }}
+          </v-btn>
+        </p>
+      </v-card-text>
+    </template>
+  </content-card>
+</template>
+
+<script>
+import { campRoute, scheduleEntryRoute } from '@/router.js'
+import ContentCard from '@/components/layout/ContentCard.vue'
+import UserAvatar from '../../components/user/UserAvatar.vue'
+import {
+  dateShort,
+  dateLong,
+  hourShort,
+} from '@/common/helpers/dateHelperUTCFormatted.js'
+import { sortBy } from 'lodash'
+import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    ContentCard,
+    UserAvatar,
+  },
+  props: {
+    camp: { type: Function, required: true },
+  },
+  data() {
+    return {
+      loading: true,
+      openPeriods: [],
+    }
+  },
+  computed: {
+    // returns scheduleEntries per day without the need for an additional API call for each day
+    scheduleEntriesByDay() {
+      let scheduleEntriesByDay = []
+
+      this.camp()
+        .periods()
+        .items.forEach(function (period) {
+          period.scheduleEntries().items.forEach(function (scheduleEntry) {
+            const dayUri = scheduleEntry.day()._meta.self
+            if (!(dayUri in scheduleEntriesByDay)) {
+              scheduleEntriesByDay[dayUri] = []
+            }
+            scheduleEntriesByDay[dayUri].push(scheduleEntry)
+          })
+        })
+
+      return scheduleEntriesByDay
+    },
+  },
+  async mounted() {
+    const [periods] = await Promise.all([
+      this.camp().periods()._meta.load,
+      this.camp().activities()._meta.load,
+      this.camp().categories()._meta.load,
+    ])
+
+    this.openPeriods = periods.items
+      .map((period, idx) => (Date.parse(period.end) >= new Date() ? idx : null))
+      .filter((idx) => idx !== null)
+
+    this.loading = false
+  },
+  methods: {
+    dateShort,
+    dateLong,
+    hourShort,
+    campRoute,
+    scheduleEntryRoute,
+    showAnyPeriod(camp) {
+      return camp.periods().items.some(this.showPeriod)
+    },
+    showPeriod(period) {
+      return period.days().items.some(this.showDay)
+    },
+    showDay(day) {
+      return (this.scheduleEntriesByDay[day._meta.self] || []).some(
+        this.showScheduleEntry
+      )
+    },
+    showScheduleEntry(scheduleEntry) {
+      const authUser = this.$store.state.auth.user
+      const activityResponsibles = scheduleEntry.activity().activityResponsibles().items
+      return activityResponsibles.some((activityResponsible) => {
+        const campCollaboration = activityResponsible.campCollaboration()
+        return (
+          !campCollaboration._meta.loading &&
+          typeof campCollaboration.user === 'function' &&
+          campCollaboration.user().id === authUser.id
+        )
+      })
+    },
+    sortActivityResponsibles(activityResponsibles) {
+      return sortBy(activityResponsibles, (activityResponsible) =>
+        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
+      )
+    },
+  },
+}
+</script>
+
+<style scoped></style>

From c42bb76abe8dd1b71d6414c53769692b73062366 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 00:24:52 +0100
Subject: [PATCH 05/34] Use translations

---
 frontend/src/locales/de.json          | 17 ++++++++++---
 frontend/src/locales/en.json          | 17 ++++++++++---
 frontend/src/views/camp/Dashboard.vue | 36 ++++++++++++++++-----------
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 59568220c2..e6a1768488 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -371,10 +371,19 @@
         "title": "Team"
       },
       "dashboard": {
-        "noActivitiesLine1": "Du bist noch für keinen Block zuständig.",
-        "noActivitiesLine2": "Den ganzen Picasso kannst du dir hier ansehen.",
-        "program": "Programm",
-        "viewDescription": "Du arbeitest an \"{title}\" mit. Hier siehst du alle Blöcke, für welche du zuständig bist."
+        "activities": "Aktivitäten",
+        "category": "Kategorie",
+        "clearFilters": "Filter entfernen",
+        "columns": {
+          "category": "Kategorie",
+          "number": "Nummer",
+          "responsible": "Verantwortlich",
+          "time": "Zeit",
+          "title": "Titel"
+        },
+        "onlyMyActivities": "Nur meine Aktivitäten",
+        "period": "Lagerabschnitt",
+        "responsible": "Verantwortlich"
       },
       "invitation": {
         "acceptCurrentAuth": "Einladung mit aktuellem Account akzeptieren",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 0be3bdf02a..13f959c992 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -368,10 +368,19 @@
         "title": "Team"
       },
       "dashboard": {
-        "noActivitiesLine1": "You are not yet responsible for any activity.",
-        "noActivitiesLine2": "You can see the whole program here.",
-        "program": "Program",
-        "viewDescription": "You work on \"{title}\". Here you can see all the activities for which you are responsible."
+        "activities": "Activities",
+        "category": "Category",
+        "clearFilters": "Clear filters",
+        "columns": {
+          "category": "Category",
+          "number": "Number",
+          "responsible": "Responsible",
+          "time": "Time",
+          "title": "Title"
+        },
+        "onlyMyActivities": "Only my activities",
+        "period": "Period",
+        "responsible": "Responsible"
       },
       "invitation": {
         "acceptCurrentAuth": "Accept invitation with current account",
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index fcea731756..f8c73d3ed4 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -1,13 +1,9 @@
-<!--
-Admin screen of a camp: Displays details & periods of a single camp and allows to edit them.
--->
-
 <template>
-  <content-card title="Aktivitäten" toolbar>
+  <content-card :title="$tc('views.camp.dashboard.activities')" toolbar>
     <div class="d-flow-root">
       <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
         <BooleanFilter
-          label="Nur meine Aktivitäten"
+          :label="$tc('views.camp.dashboard.onlyMyActivities')"
           :value="
             filter.collaborator.includes('Linux') && filter.collaborator.length === 1
           "
@@ -18,7 +14,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
           v-model="filter.collaborator"
           multiple
           :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
-          label="Verantwortlich"
+          :label="$tc('views.camp.dashboard.responsible')"
         >
           <template #item="{ item }">
             <UserAvatar :user="users[item.value]" size="18" class="mr-1" />
@@ -28,7 +24,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
         <SelectFilter
           v-model="filter.category"
           :items="['LS', 'LA', 'LP', 'TA', 'ES']"
-          label="Kategorie"
+          :label="$tc('views.camp.dashboard.category')"
         >
           <template #item="{ item }">
             <CategoryChip dense :category="categories[item.value]" class="mr-1" />
@@ -42,7 +38,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
             { text: 'Vorlager', value: 'Vorlager' },
             { text: 'Hauptlager', value: 'Hauptlager' },
           ]"
-          label="Lagerabschnitt"
+          :label="$tc('views.camp.dashboard.period')"
         />
         <v-chip
           v-if="filter.period || filter.collaborator.length > 0 || filter.category"
@@ -57,7 +53,7 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
           "
         >
           <v-icon left>mdi-close</v-icon>
-          Filter entfernen
+          {{ $tc('views.camp.dashboard.clearFilters') }}
         </v-chip>
       </div>
       <table
@@ -73,11 +69,21 @@ Admin screen of a camp: Displays details & periods of a single camp and allows t
         </caption>
         <thead :key="period.id + '_head'">
           <tr class="d-sr-only">
-            <th :id="period.id + 'th-number'" scope="col">Nummer</th>
-            <th :id="period.id + 'th-category'" scope="col">Kategorie</th>
-            <th :id="period.id + 'th-time'" scope="col">Zeit</th>
-            <th :id="period.id + 'th-title'" scope="col">Titel</th>
-            <th :id="period.id + 'th-responsible'" scope="col">Verantwortlich</th>
+            <th :id="period.id + 'th-number'" scope="col">
+              {{ $tc('views.camp.dashboard.columns.number') }}
+            </th>
+            <th :id="period.id + 'th-category'" scope="col">
+              {{ $tc('views.camp.dashboard.columns.category') }}
+            </th>
+            <th :id="period.id + 'th-time'" scope="col">
+              {{ $tc('views.camp.dashboard.columns.time') }}
+            </th>
+            <th :id="period.id + 'th-title'" scope="col">
+              {{ $tc('views.camp.dashboard.columns.title') }}
+            </th>
+            <th :id="period.id + 'th-responsible'" scope="col">
+              {{ $tc('views.camp.dashboard.columns.responsible') }}
+            </th>
           </tr>
         </thead>
         <tbody

From 27653d27251bc53a48f1290397eec2d955badeb9 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 00:42:23 +0100
Subject: [PATCH 06/34] Use computed v-model for quick filter button

---
 frontend/src/views/camp/Dashboard.vue | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index f8c73d3ed4..50c88da5c5 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -3,11 +3,8 @@
     <div class="d-flow-root">
       <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
         <BooleanFilter
+          v-model="showOnlyMyActivities"
           :label="$tc('views.camp.dashboard.onlyMyActivities')"
-          :value="
-            filter.collaborator.includes('Linux') && filter.collaborator.length === 1
-          "
-          @input="toggleMeFilter()"
         />
         <FilterDivider />
         <SelectFilter
@@ -340,6 +337,17 @@ export default {
 
       return scheduleEntriesByDay
     },
+    showOnlyMyActivities: {
+      get() {
+        return (
+          this.filter.collaborator.includes('Linux') &&
+          this.filter.collaborator.length === 1
+        )
+      },
+      set(value) {
+        this.filter.collaborator = value ? ['Linux'] : []
+      },
+    },
   },
   async mounted() {
     const [periods] = await Promise.all([
@@ -373,13 +381,6 @@ export default {
     filterScheduleEntry(scheduleEntry) {
       return this.matchCollaborators(scheduleEntry) && this.matchCategory(scheduleEntry)
     },
-    toggleMeFilter() {
-      this.filter.collaborator =
-        this.filter.collaborator.includes('Linux') &&
-        this.filter.collaborator.length === 1
-          ? []
-          : ['Linux']
-    },
   },
 }
 </script>

From 1cd702ccc9208d4c6bd3bdb97de77dfac2c5c6c0 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 01:28:42 +0100
Subject: [PATCH 07/34] Simplify SelectFilter

---
 .../src/components/dashboard/SelectFilter.vue | 123 ++++++------------
 frontend/src/locales/de.json                  |   5 +
 frontend/src/locales/en.json                  |   5 +
 frontend/src/views/camp/Dashboard.vue         |  14 +-
 4 files changed, 59 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 02b6d831f6..48af9b8bb7 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -1,44 +1,30 @@
 <template>
   <v-menu offset-y :close-on-content-click="!multiple">
     <template #activator="{ on, attrs }">
-      <v-chip
-        label
-        outlined
-        :color="active || value.length !== 0 ? 'primary' : null"
-        v-bind="attrs"
-        v-on="on"
-      >
-        <template v-if="hasSelection">
-          <span class="d-none d-sm-inline">{{
-            labelValue ? `${label}: ${labelValue}` : label
-          }}</span>
-          <span class="d-sm-none">{{ labelValue || label }}</span>
-        </template>
-        <template v-else>
-          {{ label }}
-        </template>
+      <v-chip label outlined :color="active ? 'primary' : null" v-bind="attrs" v-on="on">
+        <span class="d-none d-sm-inline">{{
+          labelValue ? `${label}: ${labelValue}` : label
+        }}</span>
+        <span class="d-sm-none">{{ labelValue || label }}</span>
         <v-icon right>mdi-chevron-down</v-icon>
       </v-chip>
     </template>
     <v-list dense>
-      <v-list-item
-        dense
-        :input-value="value.length === 0"
-        color="primary"
-        @click.prevent="clear()"
-      >
-        <v-list-item-title>Alle</v-list-item-title>
+      <v-list-item dense color="primary" @click.prevent="clear()">
+        <v-list-item-title>{{
+          $tc('components.dashboard.selectFilter.all')
+        }}</v-list-item-title>
       </v-list-item>
       <v-list-item
-        v-for="(item, index) in processedItems"
-        :key="index"
+        v-for="(item, self) in processedItems"
+        :key="self"
         dense
         :input-value="item.selected"
         color="primary"
         @click.prevent="toggle(item.value)"
       >
         <v-list-item-title>
-          <slot name="item" v-bind="{ item, index }">{{ item.text }} </slot>
+          <slot name="item" v-bind="{ item, self }">{{ item.text }} </slot>
         </v-list-item-title>
         <v-list-item-action v-if="multiple">
           <v-checkbox v-model="item.selected" dense />
@@ -49,85 +35,54 @@
 </template>
 
 <script>
+import { get, keyBy } from 'lodash'
+
 export default {
   name: 'SelectFilter',
   props: {
-    active: Boolean,
     label: { type: String, required: true },
     multiple: { type: Boolean, default: false },
-    value: { type: [Array, String], default: () => [] },
+    value: { type: [Array, String], default: null },
     items: { type: Array, default: () => [] },
+    displayField: { type: String, required: true },
+    valueField: { type: String, default: '_meta.self' },
   },
-  data: () => ({
-    changed: false,
-    internalSelectedArray: [],
-    internalSelectedString: '',
-  }),
   computed: {
-    processedItems() {
-      return this.items.map((item) => ({
-        text: item.text ?? item,
-        value: item.value ?? item,
-        selected: this.multiple
-          ? this.value.includes(item.value ?? item) ||
-            this.internalSelectedArray.includes(item.value ?? item)
-          : this.value === (item.value ?? item),
-      }))
+    active() {
+      return this.value?.length > 0
     },
-    hasSelection() {
-      return (
-        this.value &&
-        (this.multiple
-          ? this.internalSelectedArray && this.value === this.internalSelectedArray
-          : this.internalSelectedString && this.value === this.internalSelectedString)
+    processedItems() {
+      return keyBy(
+        this.items.map((item) => {
+          const text = get(item, this.displayField)
+          const value = get(item, this.valueField)
+          const selected = this.multiple
+            ? this.value?.includes(value)
+            : this.value === value
+          return { text, value, selected }
+        }),
+        'value'
       )
     },
     labelValue() {
       return this.multiple
-        ? [
-            this.internalSelectedArray.slice(0, -1).join(', '),
-            this.internalSelectedArray.at(-1),
-          ]
-            .filter((i) => i !== '')
-            .join(' & ')
-        : this.internalSelectedString
-    },
-  },
-  watch: {
-    value: {
-      handler(newValue) {
-        if (this.multiple) {
-          this.internalSelectedArray = newValue
-        } else {
-          this.internalSelectedString = newValue
-        }
-      },
-      immediate: true,
+        ? (this.value || []).map((item) => this.processedItems[item].text).join(', ')
+        : this.processedItems[this.value].text
     },
   },
   methods: {
     clear() {
-      this.changed = false
-      if (this.multiple) {
-        this.internalSelectedArray = []
-        this.$emit('input', this.internalSelectedArray)
-      } else {
-        this.internalSelectedString = ''
-        this.$emit('input', '')
-      }
+      this.$emit('input', null)
     },
     toggle(item) {
-      this.changed = true
       if (this.multiple) {
-        this.internalSelectedArray.includes(item)
-          ? (this.internalSelectedArray = this.internalSelectedArray.filter(
-              (selected) => selected !== item
-            ))
-          : this.internalSelectedArray.push(item)
-        this.$emit('input', this.internalSelectedArray)
+        const newValue = this.value?.includes(item)
+          ? this.value.filter((value) => value !== item)
+          : (this.value || []).concat([item])
+        this.$emit('input', newValue)
       } else {
-        this.internalSelectedString = item
-        this.$emit('input', item)
+        const newValue = this.value === item ? null : item
+        this.$emit('input', newValue)
       }
     },
   },
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index e6a1768488..35efa85e69 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -97,6 +97,11 @@
         "inviteAgain": "Erneut einladen"
       }
     },
+    "dashboard": {
+      "selectFilter": {
+        "all": "Alle"
+      }
+    },
     "dialog": {
       "dialogEntityDelete": {
         "title": "Wirklich löschen?",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 13f959c992..ab10dce655 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -97,6 +97,11 @@
         "inviteAgain": "Invite again"
       }
     },
+    "dashboard": {
+      "selectFilter": {
+        "all": "All"
+      }
+    },
     "dialog": {
       "dialogEntityDelete": {
         "title": "Really delete?",
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 50c88da5c5..7caaa67626 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -10,7 +10,8 @@
         <SelectFilter
           v-model="filter.collaborator"
           multiple
-          :items="['Forte', 'Linux', 'Smiley', 'Olippo', 'Cosinus', 'Ikarus']"
+          :items="users"
+          display-field="displayName"
           :label="$tc('views.camp.dashboard.responsible')"
         >
           <template #item="{ item }">
@@ -38,7 +39,11 @@
           :label="$tc('views.camp.dashboard.period')"
         />
         <v-chip
-          v-if="filter.period || filter.collaborator.length > 0 || filter.category"
+          v-if="
+            filter.period ||
+            (filter.collaborator && filter.collaborator.length > 0) ||
+            filter.category
+          "
           label
           outlined
           @click="
@@ -340,8 +345,8 @@ export default {
     showOnlyMyActivities: {
       get() {
         return (
-          this.filter.collaborator.includes('Linux') &&
-          this.filter.collaborator.length === 1
+          this.filter.collaborator?.includes('Linux') &&
+          this.filter.collaborator?.length === 1
         )
       },
       set(value) {
@@ -369,6 +374,7 @@ export default {
     hourShort,
     matchCollaborators: function (scheduleEntry) {
       return (
+        this.filter.collaborator === null ||
         this.filter.collaborator.length === 0 ||
         this.filter.collaborator.every((collaborator) =>
           scheduleEntry.collaborators.some((col) => col === collaborator)

From 6ff51113b3bf3941f907cbc1bbd3d9730da9aabb Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 01:45:57 +0100
Subject: [PATCH 08/34] Fix the button for selecting own activities

---
 frontend/src/views/camp/Dashboard.vue | 31 +++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 7caaa67626..67dafb203b 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -151,6 +151,7 @@ export default {
   },
   data() {
     return {
+      loggedInUser: null,
       loading: true,
       openPeriods: [],
       filter: {
@@ -158,14 +159,6 @@ export default {
         collaborator: [],
         category: '',
       },
-      users: {
-        Linux: { id: 'ab000df0', displayName: 'Linux' },
-        Olippo: { id: 'ff776300', displayName: 'Olippo' },
-        Forte: { id: 'ff783008', displayName: 'Forte' },
-        Smiley: { id: 'df98651b', displayName: 'Smiley' },
-        Ikarus: { id: '5192fab6', displayName: 'Ikarus' },
-        Cosinus: { id: 'bcc0dd05', displayName: 'Cosinus' },
-      },
       categories: {
         LS: { short: 'LS', color: '#4caf50', name: 'Lagersport' },
         LA: { short: 'LA', color: '#ffa200', name: 'Lageraktivität' },
@@ -293,6 +286,20 @@ export default {
     }
   },
   computed: {
+    users() {
+      return this.camp()
+        .campCollaborations()
+        .items.map((collaboration) => {
+          if (collaboration.user === null) {
+            // Unregistered invited user
+            return {
+              displayName: collaboration.inviteEmail,
+              _meta: collaboration._meta,
+            }
+          }
+          return collaboration.user()
+        })
+    },
     events() {
       return this.results
         .filter(
@@ -345,17 +352,18 @@ export default {
     showOnlyMyActivities: {
       get() {
         return (
-          this.filter.collaborator?.includes('Linux') &&
+          this.filter.collaborator?.includes(this.loggedInUser?._meta?.self) &&
           this.filter.collaborator?.length === 1
         )
       },
       set(value) {
-        this.filter.collaborator = value ? ['Linux'] : []
+        this.filter.collaborator = value ? [this.loggedInUser._meta.self] : []
       },
     },
   },
   async mounted() {
-    const [periods] = await Promise.all([
+    const [loggedInUser, periods] = await Promise.all([
+      this.$auth.loadUser(),
       this.camp().periods()._meta.load,
       this.camp().activities()._meta.load,
       this.camp().categories()._meta.load,
@@ -365,6 +373,7 @@ export default {
       .map((period, idx) => (Date.parse(period.end) >= new Date() ? idx : null))
       .filter((idx) => idx !== null)
 
+    this.loggedInUser = loggedInUser
     this.loading = false
   },
   methods: {

From ecd99ba7dc15aa9ae01e2d3f1265f1f7b56216ca Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 01:51:22 +0100
Subject: [PATCH 09/34] Fix avatars in select

---
 .../src/components/dashboard/SelectFilter.vue |  4 +--
 frontend/src/views/camp/Dashboard.vue         | 26 +++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 48af9b8bb7..52c408ec7a 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -43,7 +43,7 @@ export default {
     label: { type: String, required: true },
     multiple: { type: Boolean, default: false },
     value: { type: [Array, String], default: null },
-    items: { type: Array, default: () => [] },
+    items: { type: Object, default: () => ({}) },
     displayField: { type: String, required: true },
     valueField: { type: String, default: '_meta.self' },
   },
@@ -53,7 +53,7 @@ export default {
     },
     processedItems() {
       return keyBy(
-        this.items.map((item) => {
+        Object.values(this.items).map((item) => {
           const text = get(item, this.displayField)
           const value = get(item, this.valueField)
           const selected = this.multiple
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 67dafb203b..f4b2564ba5 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -134,6 +134,7 @@ import SelectFilter from '@/components/dashboard/SelectFilter.vue'
 import ActivityRow from '@/components/dashboard/ActivityRow.vue'
 import dayjs from 'dayjs'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
+import { keyBy } from 'lodash'
 
 export default {
   name: 'Dashboard',
@@ -287,18 +288,21 @@ export default {
   },
   computed: {
     users() {
-      return this.camp()
-        .campCollaborations()
-        .items.map((collaboration) => {
-          if (collaboration.user === null) {
-            // Unregistered invited user
-            return {
-              displayName: collaboration.inviteEmail,
-              _meta: collaboration._meta,
+      return keyBy(
+        this.camp()
+          .campCollaborations()
+          .items.map((collaboration) => {
+            if (collaboration.user === null) {
+              // Unregistered invited user
+              return {
+                displayName: collaboration.inviteEmail,
+                _meta: collaboration._meta,
+              }
             }
-          }
-          return collaboration.user()
-        })
+            return collaboration.user()
+          }),
+        '_meta.self'
+      )
     },
     events() {
       return this.results

From 220991c0083d05b3f8d7733f66f15db97bf1f962 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 02:02:45 +0100
Subject: [PATCH 10/34] Adapt category filter to multiselect and real data

---
 frontend/src/views/camp/Dashboard.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index f4b2564ba5..e215b9dace 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -1,7 +1,11 @@
 <template>
   <content-card :title="$tc('views.camp.dashboard.activities')" toolbar>
     <div class="d-flow-root">
-      <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
+      <div
+        v-if="!loading"
+        class="d-flex flex-wrap ma-4"
+        style="overflow-y: auto; gap: 10px"
+      >
         <BooleanFilter
           v-model="showOnlyMyActivities"
           :label="$tc('views.camp.dashboard.onlyMyActivities')"
@@ -21,7 +25,9 @@
         </SelectFilter>
         <SelectFilter
           v-model="filter.category"
-          :items="['LS', 'LA', 'LP', 'TA', 'ES']"
+          multiple
+          :items="categories"
+          display-field="short"
           :label="$tc('views.camp.dashboard.category')"
         >
           <template #item="{ item }">
@@ -160,13 +166,6 @@ export default {
         collaborator: [],
         category: '',
       },
-      categories: {
-        LS: { short: 'LS', color: '#4caf50', name: 'Lagersport' },
-        LA: { short: 'LA', color: '#ffa200', name: 'Lageraktivität' },
-        LP: { short: 'LP', color: '#99ccff', name: 'Lagerprogramm' },
-        TA: { short: 'TA', color: '#ffffff', name: 'Tagesabschluss' },
-        ES: { short: 'ES', color: '#bbbbbb', name: 'Essen' },
-      },
       results: [
         {
           id: 'Vorlager',
@@ -304,6 +303,9 @@ export default {
         '_meta.self'
       )
     },
+    categories() {
+      return keyBy(this.camp().categories().items, '_meta.self')
+    },
     events() {
       return this.results
         .filter(

From 23e52cd10138830074fb4ae54d41ca5514f6fd2a Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 02:09:29 +0100
Subject: [PATCH 11/34] Adapt period filter to real data

---
 frontend/src/components/dashboard/SelectFilter.vue |  2 +-
 frontend/src/views/camp/Dashboard.vue              | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 52c408ec7a..3a06ffe63e 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -67,7 +67,7 @@ export default {
     labelValue() {
       return this.multiple
         ? (this.value || []).map((item) => this.processedItems[item].text).join(', ')
-        : this.processedItems[this.value].text
+        : this.processedItems[this.value]?.text
     },
   },
   methods: {
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index e215b9dace..0d25dfa04c 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -38,10 +38,8 @@
         <SelectFilter
           v-if="results.length > 1"
           v-model="filter.period"
-          :items="[
-            { text: 'Vorlager', value: 'Vorlager' },
-            { text: 'Hauptlager', value: 'Hauptlager' },
-          ]"
+          :items="periods"
+          display-field="description"
           :label="$tc('views.camp.dashboard.period')"
         />
         <v-chip
@@ -162,9 +160,9 @@ export default {
       loading: true,
       openPeriods: [],
       filter: {
-        period: '',
+        period: null,
         collaborator: [],
-        category: '',
+        category: [],
       },
       results: [
         {
@@ -306,6 +304,9 @@ export default {
     categories() {
       return keyBy(this.camp().categories().items, '_meta.self')
     },
+    periods() {
+      return keyBy(this.camp().periods().items, '_meta.self')
+    },
     events() {
       return this.results
         .filter(

From cd42b08367c297cad68f4d5da39afc2f3bd78cfc Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 14:02:30 +0100
Subject: [PATCH 12/34] The button is a filter preset for all filters

---
 frontend/src/views/camp/Dashboard.vue | 33 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 0d25dfa04c..4cf8ee47ed 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -12,7 +12,7 @@
         />
         <FilterDivider />
         <SelectFilter
-          v-model="filter.collaborator"
+          v-model="filter.responsible"
           multiple
           :items="users"
           display-field="displayName"
@@ -45,16 +45,16 @@
         <v-chip
           v-if="
             filter.period ||
-            (filter.collaborator && filter.collaborator.length > 0) ||
-            filter.category
+            (filter.responsible && filter.responsible.length > 0) ||
+            (filter.category && filter.category.length > 0)
           "
           label
           outlined
           @click="
             filter = {
-              period: '',
-              collaborator: [],
-              category: '',
+              period: null,
+              responsible: [],
+              category: [],
             }
           "
         >
@@ -140,6 +140,10 @@ import dayjs from 'dayjs'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 import { keyBy } from 'lodash'
 
+function filterEquals(arr1, arr2) {
+  return JSON.stringify(arr1) === JSON.stringify(arr2)
+}
+
 export default {
   name: 'Dashboard',
   components: {
@@ -161,7 +165,7 @@ export default {
       openPeriods: [],
       filter: {
         period: null,
-        collaborator: [],
+        responsible: [],
         category: [],
       },
       results: [
@@ -359,12 +363,15 @@ export default {
     showOnlyMyActivities: {
       get() {
         return (
-          this.filter.collaborator?.includes(this.loggedInUser?._meta?.self) &&
-          this.filter.collaborator?.length === 1
+          filterEquals(this.filter.responsible, [this.loggedInUser._meta.self]) &&
+          filterEquals(this.filter.category, []) &&
+          filterEquals(this.filter.period, null)
         )
       },
       set(value) {
-        this.filter.collaborator = value ? [this.loggedInUser._meta.self] : []
+        this.filter.responsible = value ? [this.loggedInUser._meta.self] : []
+        this.filter.category = []
+        this.filter.period = null
       },
     },
   },
@@ -390,9 +397,9 @@ export default {
     hourShort,
     matchCollaborators: function (scheduleEntry) {
       return (
-        this.filter.collaborator === null ||
-        this.filter.collaborator.length === 0 ||
-        this.filter.collaborator.every((collaborator) =>
+        this.filter.responsible === null ||
+        this.filter.responsible.length === 0 ||
+        this.filter.responsible.every((collaborator) =>
           scheduleEntry.collaborators.some((col) => col === collaborator)
         )
       )

From 2d57eda012a80d3dce945d828848579677c1d76b Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 14:27:50 +0100
Subject: [PATCH 13/34] Reimplement filtering and clean up dashboard

---
 frontend/src/views/camp/Dashboard.vue | 276 ++++++--------------------
 1 file changed, 62 insertions(+), 214 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 4cf8ee47ed..dd67f5ed4b 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -36,7 +36,7 @@
           </template>
         </SelectFilter>
         <SelectFilter
-          v-if="results.length > 1"
+          v-if="groupedScheduleEntries.length > 1"
           v-model="filter.period"
           :items="periods"
           display-field="description"
@@ -63,59 +63,59 @@
         </v-chip>
       </div>
       <table
-        v-for="period in events"
-        :key="period.id"
+        v-for="(periodDays, uri) in groupedScheduleEntries"
+        :key="uri"
         class="mx-4 mt-6 mb-3"
         style="border-collapse: collapse"
       >
         <caption class="font-weight-bold text-left">
           {{
-            period.id
+            periods[uri].description
           }}
         </caption>
-        <thead :key="period.id + '_head'">
+        <thead :key="uri + '_head'">
           <tr class="d-sr-only">
-            <th :id="period.id + 'th-number'" scope="col">
+            <th :id="uri + 'th-number'" scope="col">
               {{ $tc('views.camp.dashboard.columns.number') }}
             </th>
-            <th :id="period.id + 'th-category'" scope="col">
+            <th :id="uri + 'th-category'" scope="col">
               {{ $tc('views.camp.dashboard.columns.category') }}
             </th>
-            <th :id="period.id + 'th-time'" scope="col">
+            <th :id="uri + 'th-time'" scope="col">
               {{ $tc('views.camp.dashboard.columns.time') }}
             </th>
-            <th :id="period.id + 'th-title'" scope="col">
+            <th :id="uri + 'th-title'" scope="col">
               {{ $tc('views.camp.dashboard.columns.title') }}
             </th>
-            <th :id="period.id + 'th-responsible'" scope="col">
+            <th :id="uri + 'th-responsible'" scope="col">
               {{ $tc('views.camp.dashboard.columns.responsible') }}
             </th>
           </tr>
         </thead>
         <tbody
-          v-for="day in period.days"
-          :key="period.id + day.id"
-          :aria-labelledby="period.id + day.id + 'th'"
+          v-for="(dayScheduleEntries, dayUri) in periodDays"
+          :key="dayUri"
+          :aria-labelledby="dayUri + 'th'"
         >
           <tr>
             <th
-              :id="period.id + day.id + 'th'"
+              :id="dayUri + 'th'"
               colspan="5"
               scope="colgroup"
-              align="left"
               style="
                 padding-top: 0.75rem;
                 font-weight: 400;
                 color: #666;
                 font-size: 0.9rem;
+                text-align: left;
               "
             >
-              {{ day.date }}
+              {{ days[dayUri].date }}
             </th>
           </tr>
           <ActivityRow
-            v-for="scheduleEntry in day.scheduleEntries"
-            :key="day.id + scheduleEntry.id"
+            v-for="scheduleEntry in dayScheduleEntries"
+            :key="scheduleEntry._meta.self"
             :schedule-entry="scheduleEntry"
           />
         </tbody>
@@ -127,18 +127,12 @@
 <script>
 import ContentCard from '@/components/layout/ContentCard.vue'
 import UserAvatar from '../../components/user/UserAvatar.vue'
-import {
-  dateShort,
-  dateLong,
-  hourShort,
-} from '@/common/helpers/dateHelperUTCFormatted.js'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
 import BooleanFilter from '@/components/dashboard/BooleanFilter.vue'
 import SelectFilter from '@/components/dashboard/SelectFilter.vue'
 import ActivityRow from '@/components/dashboard/ActivityRow.vue'
-import dayjs from 'dayjs'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
-import { keyBy } from 'lodash'
+import { keyBy, groupBy, mapValues } from 'lodash'
 
 function filterEquals(arr1, arr2) {
   return JSON.stringify(arr1) === JSON.stringify(arr2)
@@ -162,129 +156,11 @@ export default {
     return {
       loggedInUser: null,
       loading: true,
-      openPeriods: [],
       filter: {
         period: null,
         responsible: [],
         category: [],
       },
-      results: [
-        {
-          id: 'Vorlager',
-          days: [
-            {
-              id: 1,
-              scheduleEntries: [
-                {
-                  id: 1,
-                  number: '1.1',
-                  start: '18',
-                  duration: '2h',
-                  title: 'Stafetten',
-                  location: 'Sportfeld',
-                  collaborators: ['Ikarus', 'Forte', 'Linux'],
-                  category: 'LS',
-                },
-                {
-                  id: 2,
-                  number: '1.2',
-                  start: '20',
-                  duration: '1h',
-                  title: 'Essen',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Forte'],
-                  category: 'ES',
-                },
-                {
-                  id: 3,
-                  number: '1.3',
-                  start: '21',
-                  duration: '30m',
-                  title: 'Once upon a time there was a long title',
-                  location: 'Gschichtliruum',
-                  collaborators: ['Cosinus'],
-                  category: 'LS',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          id: 'Hauptlager',
-          days: [
-            {
-              id: 2,
-              scheduleEntries: [
-                {
-                  id: 1,
-                  number: '2.1',
-                  start: '8',
-                  duration: '2h',
-                  title: 'Morgenfit',
-                  location: 'Wiese',
-                  collaborators: ['Linux', 'Smiley'],
-                  category: 'LA',
-                },
-                {
-                  id: 2,
-                  number: '2.2',
-                  start: '10',
-                  duration: '1h',
-                  title: 'Atelier',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Cosinus', 'Linux'],
-                  category: 'LP',
-                },
-                {
-                  id: 3,
-                  number: '2.3',
-                  start: '12',
-                  duration: '30m',
-                  title: 'Zmittag',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Ikarus'],
-                  category: 'ES',
-                },
-              ],
-            },
-            {
-              id: 3,
-              scheduleEntries: [
-                {
-                  id: 1,
-                  number: '3.1',
-                  start: '10',
-                  duration: '7h',
-                  title: 'Geländegame',
-                  location: 'Wald',
-                  collaborators: ['Olippo', 'Forte', 'Linux'],
-                  category: 'LS',
-                },
-                {
-                  id: 2,
-                  number: '3.2',
-                  start: '17',
-                  duration: '4h',
-                  title: 'Partyznacht',
-                  location: 'Aufenthaltsraum',
-                  collaborators: ['Linux'],
-                  category: 'ES',
-                },
-                {
-                  id: 3,
-                  number: '3.3',
-                  start: '21',
-                  duration: '30m',
-                  title: 'Tabs',
-                  location: 'Feuerschale',
-                  collaborators: ['Smiley'],
-                  category: 'TA',
-                },
-              ],
-            },
-          ],
-        },
-      ],
     }
   },
   computed: {
@@ -311,54 +187,51 @@ export default {
     periods() {
       return keyBy(this.camp().periods().items, '_meta.self')
     },
-    events() {
-      return this.results
-        .filter(
-          (period) =>
-            this.filter.period.length === 0 ||
-            (Array.isArray(this.filter.period)
-              ? this.filter.period.some((filter) => period.id.includes(filter))
-              : period.id.includes(this.filter.period))
-        )
-        .map((period) => ({
-          ...period,
-          days: period.days
-            .map(({ id, scheduleEntries }) => ({
-              id,
-              date: dayjs().add(id, 'day').format('dd, D. MMM YYYY'),
-              scheduleEntries: scheduleEntries
-                .filter((scheduleEntry) => {
-                  return this.filterScheduleEntry(scheduleEntry)
-                })
-                .map((scheduleEntry) => ({
-                  ...scheduleEntry,
-                  collaborators: scheduleEntry.collaborators.map(
-                    (collaborator) => this.users[collaborator]
-                  ),
-                  category: this.categories[scheduleEntry.category],
-                })),
+    scheduleEntries() {
+      return Object.values(this.periods).flatMap(
+        (period) => period.scheduleEntries().items
+      )
+    },
+    days() {
+      return keyBy(
+        Object.values(this.periods).flatMap((period) => period.days().items),
+        '_meta.self'
+      )
+    },
+    filteredScheduleEntries() {
+      return this.scheduleEntries.filter(
+        (scheduleEntry) =>
+          // filter by period
+          (this.filter.period === null ||
+            scheduleEntry.period()._meta.self === this.filter.period) &&
+          // filter by categories: OR filter
+          (this.filter.category === null ||
+            this.filter.category.length === 0 ||
+            this.filter.category?.includes(
+              scheduleEntry.activity().category()._meta.self
+            )) &&
+          // filter by responsibles: AND filter
+          (this.filter.responsible === null ||
+            this.filter.responsible.length === 0 ||
+            this.filter.responsible?.every((responsible) => {
+              return scheduleEntry
+                .activity()
+                .activityResponsibles()
+                .items.map((responsible) => responsible._meta.self)
+                .includes(responsible)
             }))
-            .filter(({ scheduleEntries }) => scheduleEntries.length > 0),
-        }))
-        .filter(({ days }) => days.length > 0)
+      )
     },
-    // returns scheduleEntries per day without the need for an additional API call for each day
-    scheduleEntriesByDay() {
-      let scheduleEntriesByDay = []
-
-      this.camp()
-        .periods()
-        .items.forEach(function (period) {
-          period.scheduleEntries().items.forEach(function (scheduleEntry) {
-            const dayUri = scheduleEntry.day()._meta.self
-            if (!(dayUri in scheduleEntriesByDay)) {
-              scheduleEntriesByDay[dayUri] = []
-            }
-            scheduleEntriesByDay[dayUri].push(scheduleEntry)
-          })
+    groupedScheduleEntries() {
+      const groupedByPeriod = groupBy(
+        this.filteredScheduleEntries,
+        (scheduleEntry) => scheduleEntry.period()._meta.self
+      )
+      return mapValues(groupedByPeriod, (scheduleEntries) =>
+        groupBy(scheduleEntries, (scheduleEntry) => {
+          return scheduleEntry.day()._meta.self
         })
-
-      return scheduleEntriesByDay
+      )
     },
     showOnlyMyActivities: {
       get() {
@@ -376,41 +249,16 @@ export default {
     },
   },
   async mounted() {
-    const [loggedInUser, periods] = await Promise.all([
+    const [loggedInUser] = await Promise.all([
       this.$auth.loadUser(),
       this.camp().periods()._meta.load,
       this.camp().activities()._meta.load,
       this.camp().categories()._meta.load,
     ])
 
-    this.openPeriods = periods.items
-      .map((period, idx) => (Date.parse(period.end) >= new Date() ? idx : null))
-      .filter((idx) => idx !== null)
-
     this.loggedInUser = loggedInUser
     this.loading = false
   },
-  methods: {
-    dayjs,
-    dateShort,
-    dateLong,
-    hourShort,
-    matchCollaborators: function (scheduleEntry) {
-      return (
-        this.filter.responsible === null ||
-        this.filter.responsible.length === 0 ||
-        this.filter.responsible.every((collaborator) =>
-          scheduleEntry.collaborators.some((col) => col === collaborator)
-        )
-      )
-    },
-    matchCategory: function (scheduleEntry) {
-      return scheduleEntry.category.includes(this.filter.category)
-    },
-    filterScheduleEntry(scheduleEntry) {
-      return this.matchCollaborators(scheduleEntry) && this.matchCategory(scheduleEntry)
-    },
-  },
 }
 </script>
 

From afc6c25ef2133b6131a39334610526fb256e7738 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 15:28:09 +0100
Subject: [PATCH 14/34] Fix ActivityRow

---
 common/helpers/dateHelperUTCFormatted.js      |  9 ++-
 common/locales/de.json                        |  1 +
 common/locales/en.json                        |  1 +
 .../src/components/dashboard/ActivityRow.vue  | 67 ++++++++++++++-----
 .../components/dashboard/BaselineCenter.vue   | 34 ----------
 5 files changed, 62 insertions(+), 50 deletions(-)
 delete mode 100644 frontend/src/components/dashboard/BaselineCenter.vue

diff --git a/common/helpers/dateHelperUTCFormatted.js b/common/helpers/dateHelperUTCFormatted.js
index 9c2ffc11dc..f240a5f9c4 100644
--- a/common/helpers/dateHelperUTCFormatted.js
+++ b/common/helpers/dateHelperUTCFormatted.js
@@ -13,6 +13,13 @@ function hourShort(dateTimeString) {
   return dayjs.utc(dateTimeString).format(i18n.tc('global.datetime.hourShort'))
 }
 
+function timeDurationShort(start, end) {
+  const startTime = dayjs.utc(start)
+  const endTime = dayjs.utc(end)
+  const duration = dayjs(endTime.diff(startTime))
+  return duration.format(i18n.tc('global.datetime.durationShort'))
+}
+
 // short format of dateTime range
 // doesn't repeat end date if on the same day
 function rangeShort(start, end) {
@@ -42,4 +49,4 @@ function dateRange(start, end) {
   return `${dateShort(start)} - ${dateLong(end)}`
 }
 
-export { dateShort, dateLong, hourShort, dateRange, rangeShort }
+export { dateShort, dateLong, timeDurationShort, hourShort, dateRange, rangeShort }
diff --git a/common/locales/de.json b/common/locales/de.json
index 010ed1c39b..3e55f08a92 100644
--- a/common/locales/de.json
+++ b/common/locales/de.json
@@ -165,6 +165,7 @@
       "dateLong": "dd L",
       "dateShort": "dd D.M.",
       "dateTimeLong": "dd L HH:mm",
+      "durationShort": "H:mm",
       "hourLong": "HH:mm",
       "hourShort": "H:mm"
     }
diff --git a/common/locales/en.json b/common/locales/en.json
index 6c65786646..5903e22cf2 100644
--- a/common/locales/en.json
+++ b/common/locales/en.json
@@ -172,6 +172,7 @@
       "dateLong": "dd L",
       "dateShort": "dd M/D",
       "dateTimeLong": "dd L HH:mm",
+      "durationShort": "H:mm",
       "hourLong": "HH:mm",
       "hourShort": "h:mm A"
     }
diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 82a84778d1..19551e5c83 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -1,25 +1,25 @@
 <template>
   <tr class="row">
-    <th align="left" class="tabular-nums" scope="row">
-      <BaselineCenter smaller>{{ scheduleEntry.number }}</BaselineCenter>
+    <th style="text-align: left" class="tabular-nums" scope="row">
+      <span class="baseline-center"
+        ><span class="smaller">{{ scheduleEntry.number }}</span></span
+      >
       <br />
-      <CategoryChip small dense :category="scheduleEntry.category" class="d-sm-none" />
+      <CategoryChip small dense :category="category" class="d-sm-none" />
     </th>
     <td class="d-none d-sm-table-cell">
-      <CategoryChip small dense :category="scheduleEntry.category" />
+      <CategoryChip small dense :category="category" />
     </td>
-    <td>
-      {{ scheduleEntry.start.padStart(2, '0') }}:00<br />
-      <span class="e-subtitle">{{ scheduleEntry.duration }}</span>
+    <td class="nowrap">
+      {{ start }}<br />
+      <span class="e-subtitle">{{ duration }}</span>
     </td>
-    <td width="100%" class="contentrow">
-      <a :to="{ name: 'dashboard' }" class="black--text">
-        {{ scheduleEntry.title }}<br />
-      </a>
-      <span class="e-subtitle">{{ scheduleEntry.location }}</span>
+    <td style="width: 100%" class="contentrow">
+      <a :to="{ name: 'dashboard' }" class="black--text"> {{ title }}<br /> </a>
+      <span class="e-subtitle">{{ location }}</span>
     </td>
     <td class="contentrow avatarrow overflow-visible">
-      <AvatarRow :users="scheduleEntry.collaborators" size="28" class="ml-auto" />
+      <AvatarRow :users="collaborators" size="28" class="ml-auto" />
     </td>
   </tr>
 </template>
@@ -27,14 +27,37 @@
 <script>
 import AvatarRow from '@/components/user/AvatarRow.vue'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
-import BaselineCenter from '@/components/dashboard/BaselineCenter.vue'
+import {
+  hourShort,
+  timeDurationShort,
+} from '../../common/helpers/dateHelperUTCFormatted.js'
 
 export default {
   name: 'ActivityRow',
-  components: { BaselineCenter, CategoryChip, AvatarRow },
+  components: { CategoryChip, AvatarRow },
   props: {
     scheduleEntry: { type: Object, required: true },
   },
+  computed: {
+    collaborators() {
+      return this.scheduleEntry.activity().activityResponsibles().items
+    },
+    category() {
+      return this.scheduleEntry.activity().category()
+    },
+    title() {
+      return this.scheduleEntry.activity().title
+    },
+    location() {
+      return this.scheduleEntry.activity().location
+    },
+    start() {
+      return hourShort(this.scheduleEntry.start)
+    },
+    duration() {
+      return timeDurationShort(this.scheduleEntry.start, this.scheduleEntry.end)
+    },
+  },
 }
 </script>
 
@@ -73,4 +96,18 @@ tr + tr :is(td, th) {
   font-size: 0.9em;
   color: #666;
 }
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.smaller {
+  font-size: 0.75em;
+}
+
+.baseline-center {
+  display: inline-flex;
+  vertical-align: baseline;
+  align-items: center;
+}
 </style>
diff --git a/frontend/src/components/dashboard/BaselineCenter.vue b/frontend/src/components/dashboard/BaselineCenter.vue
deleted file mode 100644
index 06faff6446..0000000000
--- a/frontend/src/components/dashboard/BaselineCenter.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <span :class="['e-bc', smaller && 'e-bc--smaller']"
-    ><span class="content"><slot /></span
-  ></span>
-</template>
-
-<script>
-export default {
-  name: 'BaselineCenter',
-  props: {
-    smaller: Boolean,
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.e-bc {
-  display: inline-flex;
-  vertical-align: baseline;
-  align-items: center;
-
-  &::before {
-    user-select: none;
-    pointer-events: none;
-    content: '\200B';
-    font-size: 1em;
-    line-height: 1;
-  }
-
-  &.e-bc--smaller .content {
-    font-size: 0.75em;
-  }
-}
-</style>

From 9328499a36bda8e3beb109745a2e37ca4f8fa7be Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 15:41:09 +0100
Subject: [PATCH 15/34] Make activity title clickable

---
 frontend/src/components/dashboard/ActivityRow.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 19551e5c83..4e88807542 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -15,7 +15,9 @@
       <span class="e-subtitle">{{ duration }}</span>
     </td>
     <td style="width: 100%" class="contentrow">
-      <a :to="{ name: 'dashboard' }" class="black--text"> {{ title }}<br /> </a>
+      <router-link :to="routerLink" class="text-decoration-none black--text">
+        {{ title }}<br />
+      </router-link>
       <span class="e-subtitle">{{ location }}</span>
     </td>
     <td class="contentrow avatarrow overflow-visible">
@@ -57,6 +59,15 @@ export default {
     duration() {
       return timeDurationShort(this.scheduleEntry.start, this.scheduleEntry.end)
     },
+    routerLink() {
+      return {
+        name: 'activity',
+        params: {
+          campId: this.scheduleEntry.period().camp().id,
+          scheduleEntryId: this.scheduleEntry.id,
+        },
+      }
+    },
   },
 }
 </script>

From cddbce2257e0d67e86909f305dc9aaafd065c843 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 15:57:12 +0100
Subject: [PATCH 16/34] Fix avatar display

---
 .../src/components/dashboard/ActivityRow.vue   |  9 ++++++---
 .../{user => dashboard}/AvatarRow.vue          | 18 ++++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)
 rename frontend/src/components/{user => dashboard}/AvatarRow.vue (61%)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 4e88807542..8225c79a7f 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -21,13 +21,13 @@
       <span class="e-subtitle">{{ location }}</span>
     </td>
     <td class="contentrow avatarrow overflow-visible">
-      <AvatarRow :users="collaborators" size="28" class="ml-auto" />
+      <AvatarRow :camp-collaborations="collaborators" size="28" class="ml-auto" />
     </td>
   </tr>
 </template>
 
 <script>
-import AvatarRow from '@/components/user/AvatarRow.vue'
+import AvatarRow from './AvatarRow.vue'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
 import {
   hourShort,
@@ -42,7 +42,10 @@ export default {
   },
   computed: {
     collaborators() {
-      return this.scheduleEntry.activity().activityResponsibles().items
+      return this.scheduleEntry
+        .activity()
+        .activityResponsibles()
+        .items.map((responsible) => responsible.campCollaboration())
     },
     category() {
       return this.scheduleEntry.activity().category()
diff --git a/frontend/src/components/user/AvatarRow.vue b/frontend/src/components/dashboard/AvatarRow.vue
similarity index 61%
rename from frontend/src/components/user/AvatarRow.vue
rename to frontend/src/components/dashboard/AvatarRow.vue
index 44adde8c0f..db92f4ac60 100644
--- a/frontend/src/components/user/AvatarRow.vue
+++ b/frontend/src/components/dashboard/AvatarRow.vue
@@ -1,21 +1,31 @@
 <template>
   <div class="avatarrow" :style="avatarrow">
-    <div v-for="user in users" :key="user.id" class="avataritem">
-      <UserAvatar :size="Number(size)" :user="user" />
+    <div
+      v-for="campCollaboration in campCollaborations"
+      :key="campCollaboration && campCollaboration._meta.self"
+      class="avataritem"
+    >
+      <UserAvatar :size="Number(size)" :camp-collaboration="campCollaboration" />
     </div>
   </div>
 </template>
 
 <script>
+import UserAvatar from '@/components/user/UserAvatar.vue'
+
 export default {
   name: 'AvatarRow',
+  components: { UserAvatar },
   props: {
-    users: { type: Array, default: () => [] },
+    campCollaborations: { type: Array, default: () => [] },
     size: { type: [Number, String], default: 20 },
   },
   computed: {
     maxWidth() {
-      return (this.users?.length - 1) * (Number(this.size) * 0.25) + Number(this.size)
+      return (
+        (this.campCollaborations?.length - 1) * (Number(this.size) * 0.25) +
+        Number(this.size)
+      )
     },
     avatarrow() {
       return {

From 0c8286197fd2d6531b9dec31a34deb2f77eb73de Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 16:11:48 +0100
Subject: [PATCH 17/34] Fix responsibles filter

---
 .../src/components/dashboard/SelectFilter.vue | 10 ++++-
 frontend/src/views/camp/Dashboard.vue         | 44 +++++++++----------
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 3a06ffe63e..406dcaf757 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -44,7 +44,7 @@ export default {
     multiple: { type: Boolean, default: false },
     value: { type: [Array, String], default: null },
     items: { type: Object, default: () => ({}) },
-    displayField: { type: String, required: true },
+    displayField: { type: [String, Function], required: true },
     valueField: { type: String, default: '_meta.self' },
   },
   computed: {
@@ -54,7 +54,7 @@ export default {
     processedItems() {
       return keyBy(
         Object.values(this.items).map((item) => {
-          const text = get(item, this.displayField)
+          const text = this.displayValue(item)
           const value = get(item, this.valueField)
           const selected = this.multiple
             ? this.value?.includes(value)
@@ -71,6 +71,12 @@ export default {
     },
   },
   methods: {
+    displayValue(item) {
+      if (typeof this.displayField === 'function') {
+        return this.displayField(item)
+      }
+      return get(item, this.displayField)
+    },
     clear() {
       this.$emit('input', null)
     },
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index dd67f5ed4b..07811fde4c 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -14,12 +14,16 @@
         <SelectFilter
           v-model="filter.responsible"
           multiple
-          :items="users"
-          display-field="displayName"
+          :items="campCollaborations"
+          :display-field="campCollaborationDisplayName"
           :label="$tc('views.camp.dashboard.responsible')"
         >
           <template #item="{ item }">
-            <UserAvatar :user="users[item.value]" size="18" class="mr-1" />
+            <UserAvatar
+              :camp-collaboration="campCollaborations[item.value]"
+              size="18"
+              class="mr-1"
+            />
             {{ item.text }}
           </template>
         </SelectFilter>
@@ -133,6 +137,7 @@ import SelectFilter from '@/components/dashboard/SelectFilter.vue'
 import ActivityRow from '@/components/dashboard/ActivityRow.vue'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 import { keyBy, groupBy, mapValues } from 'lodash'
+import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
 
 function filterEquals(arr1, arr2) {
   return JSON.stringify(arr1) === JSON.stringify(arr2)
@@ -164,22 +169,8 @@ export default {
     }
   },
   computed: {
-    users() {
-      return keyBy(
-        this.camp()
-          .campCollaborations()
-          .items.map((collaboration) => {
-            if (collaboration.user === null) {
-              // Unregistered invited user
-              return {
-                displayName: collaboration.inviteEmail,
-                _meta: collaboration._meta,
-              }
-            }
-            return collaboration.user()
-          }),
-        '_meta.self'
-      )
+    campCollaborations() {
+      return keyBy(this.camp().campCollaborations().items, '_meta.self')
     },
     categories() {
       return keyBy(this.camp().categories().items, '_meta.self')
@@ -217,7 +208,7 @@ export default {
               return scheduleEntry
                 .activity()
                 .activityResponsibles()
-                .items.map((responsible) => responsible._meta.self)
+                .items.map((responsible) => responsible.campCollaboration()._meta.self)
                 .includes(responsible)
             }))
       )
@@ -236,17 +227,23 @@ export default {
     showOnlyMyActivities: {
       get() {
         return (
-          filterEquals(this.filter.responsible, [this.loggedInUser._meta.self]) &&
+          filterEquals(this.filter.responsible, [this.loggedInCampCollaboration]) &&
           filterEquals(this.filter.category, []) &&
           filterEquals(this.filter.period, null)
         )
       },
       set(value) {
-        this.filter.responsible = value ? [this.loggedInUser._meta.self] : []
+        this.filter.responsible = value ? [this.loggedInCampCollaboration] : []
         this.filter.category = []
         this.filter.period = null
       },
     },
+    loggedInCampCollaboration() {
+      return Object.values(this.campCollaborations).find(
+        (collaboration) =>
+          collaboration.user()._meta.self === this.loggedInUser._meta.self
+      )?._meta?.self
+    },
   },
   async mounted() {
     const [loggedInUser] = await Promise.all([
@@ -259,6 +256,9 @@ export default {
     this.loggedInUser = loggedInUser
     this.loading = false
   },
+  methods: {
+    campCollaborationDisplayName,
+  },
 }
 </script>
 

From a0066a4bf72ee6bed2faacba33a16a9a7d4a398c Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 16:26:25 +0100
Subject: [PATCH 18/34] Fix display of date

---
 frontend/src/views/camp/Dashboard.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 07811fde4c..8b1c4c65cc 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -114,7 +114,7 @@
                 text-align: left;
               "
             >
-              {{ days[dayUri].date }}
+              {{ dateLong(days[dayUri].start) }}
             </th>
           </tr>
           <ActivityRow
@@ -138,6 +138,7 @@ import ActivityRow from '@/components/dashboard/ActivityRow.vue'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
 import { keyBy, groupBy, mapValues } from 'lodash'
 import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
+import { dateLong } from '../../common/helpers/dateHelperUTCFormatted.js'
 
 function filterEquals(arr1, arr2) {
   return JSON.stringify(arr1) === JSON.stringify(arr2)
@@ -258,6 +259,7 @@ export default {
   },
   methods: {
     campCollaborationDisplayName,
+    dateLong,
   },
 }
 </script>

From b14e5b1d0fd9b8c1007a4a61d0b0e1d457b848db Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 16:30:10 +0100
Subject: [PATCH 19/34] Fix relevance detection of period filter

---
 frontend/src/views/camp/Dashboard.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 8b1c4c65cc..17116ba186 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -40,7 +40,7 @@
           </template>
         </SelectFilter>
         <SelectFilter
-          v-if="groupedScheduleEntries.length > 1"
+          v-if="multiplePeriods"
           v-model="filter.period"
           :items="periods"
           display-field="description"
@@ -136,7 +136,7 @@ import BooleanFilter from '@/components/dashboard/BooleanFilter.vue'
 import SelectFilter from '@/components/dashboard/SelectFilter.vue'
 import ActivityRow from '@/components/dashboard/ActivityRow.vue'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
-import { keyBy, groupBy, mapValues } from 'lodash'
+import { keyBy, groupBy, mapValues, uniq } from 'lodash'
 import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
 import { dateLong } from '../../common/helpers/dateHelperUTCFormatted.js'
 
@@ -245,6 +245,13 @@ export default {
           collaboration.user()._meta.self === this.loggedInUser._meta.self
       )?._meta?.self
     },
+    multiplePeriods() {
+      return (
+        uniq(
+          this.scheduleEntries.map((scheduleEntry) => scheduleEntry.period()._meta.self)
+        ).length > 1
+      )
+    },
   },
   async mounted() {
     const [loggedInUser] = await Promise.all([

From 22c1b568c47c37f4b307656748fd5f88a10c01c9 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Tue, 8 Nov 2022 16:31:19 +0100
Subject: [PATCH 20/34] Remove old dashboard implementation

---
 frontend/src/views/camp/DashboardOld.vue | 202 -----------------------
 1 file changed, 202 deletions(-)
 delete mode 100644 frontend/src/views/camp/DashboardOld.vue

diff --git a/frontend/src/views/camp/DashboardOld.vue b/frontend/src/views/camp/DashboardOld.vue
deleted file mode 100644
index f2b6af5ec2..0000000000
--- a/frontend/src/views/camp/DashboardOld.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<!--
-Admin screen of a camp: Displays details & periods of a single camp and allows to edit them.
--->
-
-<template>
-  <content-card :title="camp().title" toolbar>
-    <v-card-text>
-      {{ $tc('views.camp.dashboardOld.viewDescription', 1, { title: camp().title }) }}
-    </v-card-text>
-
-    <v-skeleton-loader v-if="loading" type="article" />
-
-    <template v-else-if="showAnyPeriod(camp())">
-      <v-expansion-panels v-model="openPeriods" multiple flat accordion>
-        <template v-for="period in camp().periods().items">
-          <v-expansion-panel v-if="showPeriod(period)" :key="period._meta.self">
-            <v-expansion-panel-header>
-              <h3>
-                {{ period.description }}
-              </h3>
-            </v-expansion-panel-header>
-            <v-expansion-panel-content>
-              <v-row>
-                <template v-for="day in period.days().items">
-                  <template v-if="showDay(day)">
-                    <v-col :key="day._meta.self" cols="12" class="pb-0">
-                      <h4>{{ day.dayOffset + 1 }}) {{ dateLong(day.start) }}</h4>
-                    </v-col>
-                    <template
-                      v-for="scheduleEntry in scheduleEntriesByDay[day._meta.self]"
-                    >
-                      <v-col
-                        v-if="showScheduleEntry(scheduleEntry)"
-                        :key="scheduleEntry._meta.self"
-                        cols="12"
-                        sm="6"
-                        md="4"
-                        lg="3"
-                      >
-                        <v-card
-                          :color="scheduleEntry.activity().category().color"
-                          :to="scheduleEntryRoute(scheduleEntry)"
-                        >
-                          <v-card-title>
-                            {{ scheduleEntry.activity().category().short }}
-                            {{ scheduleEntry.number }}:
-                            {{ scheduleEntry.activity().title }}
-                            <v-spacer />
-                            <user-avatar
-                              v-for="ar in sortActivityResponsibles(
-                                scheduleEntry.activity().activityResponsibles().items
-                              )"
-                              :key="ar._meta.self"
-                              :camp-collaboration="ar.campCollaboration()"
-                              :size="24"
-                              style="margin: 2px"
-                            />
-                          </v-card-title>
-                          <v-card-subtitle>
-                            {{
-                              dateShort(scheduleEntry.start) ==
-                              dateShort(scheduleEntry.end)
-                                ? ''
-                                : dateShort(scheduleEntry.start)
-                            }}
-                            <b> {{ hourShort(scheduleEntry.start) }} </b>
-                            -
-                            {{
-                              dateShort(scheduleEntry.start) ==
-                              dateShort(scheduleEntry.end)
-                                ? ''
-                                : dateShort(scheduleEntry.end)
-                            }}
-                            <b> {{ hourShort(scheduleEntry.end) }} </b>
-                          </v-card-subtitle>
-                        </v-card>
-                      </v-col>
-                    </template>
-                  </template>
-                </template>
-              </v-row>
-            </v-expansion-panel-content>
-          </v-expansion-panel>
-        </template>
-      </v-expansion-panels>
-    </template>
-    <template v-else>
-      <v-card-text>
-        <p style="text-align: center">
-          {{ $tc('views.camp.dashboardOld.noActivitiesLine1') }} <br />
-          {{ $tc('views.camp.dashboardOld.noActivitiesLine2') }} <br />
-        </p>
-        <p style="text-align: center">
-          <v-btn color="success" :to="campRoute(camp(), 'program')">
-            <v-icon size="150%" left> mdi-view-dashboard-variant </v-icon>
-            {{ $tc('views.camp.dashboardOld.program') }}
-          </v-btn>
-        </p>
-      </v-card-text>
-    </template>
-  </content-card>
-</template>
-
-<script>
-import { campRoute, scheduleEntryRoute } from '@/router.js'
-import ContentCard from '@/components/layout/ContentCard.vue'
-import UserAvatar from '../../components/user/UserAvatar.vue'
-import {
-  dateShort,
-  dateLong,
-  hourShort,
-} from '@/common/helpers/dateHelperUTCFormatted.js'
-import { sortBy } from 'lodash'
-import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
-
-export default {
-  name: 'Dashboard',
-  components: {
-    ContentCard,
-    UserAvatar,
-  },
-  props: {
-    camp: { type: Function, required: true },
-  },
-  data() {
-    return {
-      loading: true,
-      openPeriods: [],
-    }
-  },
-  computed: {
-    // returns scheduleEntries per day without the need for an additional API call for each day
-    scheduleEntriesByDay() {
-      let scheduleEntriesByDay = []
-
-      this.camp()
-        .periods()
-        .items.forEach(function (period) {
-          period.scheduleEntries().items.forEach(function (scheduleEntry) {
-            const dayUri = scheduleEntry.day()._meta.self
-            if (!(dayUri in scheduleEntriesByDay)) {
-              scheduleEntriesByDay[dayUri] = []
-            }
-            scheduleEntriesByDay[dayUri].push(scheduleEntry)
-          })
-        })
-
-      return scheduleEntriesByDay
-    },
-  },
-  async mounted() {
-    const [periods] = await Promise.all([
-      this.camp().periods()._meta.load,
-      this.camp().activities()._meta.load,
-      this.camp().categories()._meta.load,
-    ])
-
-    this.openPeriods = periods.items
-      .map((period, idx) => (Date.parse(period.end) >= new Date() ? idx : null))
-      .filter((idx) => idx !== null)
-
-    this.loading = false
-  },
-  methods: {
-    dateShort,
-    dateLong,
-    hourShort,
-    campRoute,
-    scheduleEntryRoute,
-    showAnyPeriod(camp) {
-      return camp.periods().items.some(this.showPeriod)
-    },
-    showPeriod(period) {
-      return period.days().items.some(this.showDay)
-    },
-    showDay(day) {
-      return (this.scheduleEntriesByDay[day._meta.self] || []).some(
-        this.showScheduleEntry
-      )
-    },
-    showScheduleEntry(scheduleEntry) {
-      const authUser = this.$store.state.auth.user
-      const activityResponsibles = scheduleEntry.activity().activityResponsibles().items
-      return activityResponsibles.some((activityResponsible) => {
-        const campCollaboration = activityResponsible.campCollaboration()
-        return (
-          !campCollaboration._meta.loading &&
-          typeof campCollaboration.user === 'function' &&
-          campCollaboration.user().id === authUser.id
-        )
-      })
-    },
-    sortActivityResponsibles(activityResponsibles) {
-      return sortBy(activityResponsibles, (activityResponsible) =>
-        campCollaborationDisplayName(activityResponsible.campCollaboration(), null, false)
-      )
-    },
-  },
-}
-</script>
-
-<style scoped></style>

From 7853f8bedc39ad16b128e35478267f67a86d7484 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 18:03:26 +0100
Subject: [PATCH 21/34] Fix n+1 query and API documentation

---
 api/src/Entity/Camp.php               |   2 +-
 frontend/src/views/camp/Dashboard.vue | 116 +++++++++++++-------------
 2 files changed, 60 insertions(+), 58 deletions(-)

diff --git a/api/src/Entity/Camp.php b/api/src/Entity/Camp.php
index 6796a8fdda..6d8fef773c 100644
--- a/api/src/Entity/Camp.php
+++ b/api/src/Entity/Camp.php
@@ -92,7 +92,7 @@ class Camp extends BaseEntity implements BelongsToCampInterface, CopyFromPrototy
      * All the programme that will be carried out during the camp. An activity may be carried out
      * multiple times in the same camp.
      */
-    #[ApiProperty(writable: false, example: '["/activities/1a2b3c4d"]')]
+    #[ApiProperty(writable: false, example: '/activities?camp=%2Fcamps%2F1a2b3c4d')]
     #[Groups(['read'])]
     #[ORM\OneToMany(targetEntity: Activity::class, mappedBy: 'camp', orphanRemoval: true)]
     public Collection $activities;
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 17116ba186..36a20aef97 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -66,64 +66,66 @@
           {{ $tc('views.camp.dashboard.clearFilters') }}
         </v-chip>
       </div>
-      <table
-        v-for="(periodDays, uri) in groupedScheduleEntries"
-        :key="uri"
-        class="mx-4 mt-6 mb-3"
-        style="border-collapse: collapse"
-      >
-        <caption class="font-weight-bold text-left">
-          {{
-            periods[uri].description
-          }}
-        </caption>
-        <thead :key="uri + '_head'">
-          <tr class="d-sr-only">
-            <th :id="uri + 'th-number'" scope="col">
-              {{ $tc('views.camp.dashboard.columns.number') }}
-            </th>
-            <th :id="uri + 'th-category'" scope="col">
-              {{ $tc('views.camp.dashboard.columns.category') }}
-            </th>
-            <th :id="uri + 'th-time'" scope="col">
-              {{ $tc('views.camp.dashboard.columns.time') }}
-            </th>
-            <th :id="uri + 'th-title'" scope="col">
-              {{ $tc('views.camp.dashboard.columns.title') }}
-            </th>
-            <th :id="uri + 'th-responsible'" scope="col">
-              {{ $tc('views.camp.dashboard.columns.responsible') }}
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          v-for="(dayScheduleEntries, dayUri) in periodDays"
-          :key="dayUri"
-          :aria-labelledby="dayUri + 'th'"
+      <template v-if="!loading">
+        <table
+          v-for="(periodDays, uri) in groupedScheduleEntries"
+          :key="uri"
+          class="mx-4 mt-6 mb-3"
+          style="border-collapse: collapse"
         >
-          <tr>
-            <th
-              :id="dayUri + 'th'"
-              colspan="5"
-              scope="colgroup"
-              style="
-                padding-top: 0.75rem;
-                font-weight: 400;
-                color: #666;
-                font-size: 0.9rem;
-                text-align: left;
-              "
-            >
-              {{ dateLong(days[dayUri].start) }}
-            </th>
-          </tr>
-          <ActivityRow
-            v-for="scheduleEntry in dayScheduleEntries"
-            :key="scheduleEntry._meta.self"
-            :schedule-entry="scheduleEntry"
-          />
-        </tbody>
-      </table>
+          <caption class="font-weight-bold text-left">
+            {{
+              periods[uri].description
+            }}
+          </caption>
+          <thead :key="uri + '_head'">
+            <tr class="d-sr-only">
+              <th :id="uri + 'th-number'" scope="col">
+                {{ $tc('views.camp.dashboard.columns.number') }}
+              </th>
+              <th :id="uri + 'th-category'" scope="col">
+                {{ $tc('views.camp.dashboard.columns.category') }}
+              </th>
+              <th :id="uri + 'th-time'" scope="col">
+                {{ $tc('views.camp.dashboard.columns.time') }}
+              </th>
+              <th :id="uri + 'th-title'" scope="col">
+                {{ $tc('views.camp.dashboard.columns.title') }}
+              </th>
+              <th :id="uri + 'th-responsible'" scope="col">
+                {{ $tc('views.camp.dashboard.columns.responsible') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            v-for="(dayScheduleEntries, dayUri) in periodDays"
+            :key="dayUri"
+            :aria-labelledby="dayUri + 'th'"
+          >
+            <tr>
+              <th
+                :id="dayUri + 'th'"
+                colspan="5"
+                scope="colgroup"
+                style="
+                  padding-top: 0.75rem;
+                  font-weight: 400;
+                  color: #666;
+                  font-size: 0.9rem;
+                  text-align: left;
+                "
+              >
+                {{ dateLong(days[dayUri].start) }}
+              </th>
+            </tr>
+            <ActivityRow
+              v-for="scheduleEntry in dayScheduleEntries"
+              :key="scheduleEntry._meta.self"
+              :schedule-entry="scheduleEntry"
+            />
+          </tbody>
+        </table>
+      </template>
     </div>
   </content-card>
 </template>

From 18bb96aaed7ec1452aedfa293249fe168c398141 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 18:10:58 +0100
Subject: [PATCH 22/34] Make duration more visually distinct

---
 common/locales/de.json | 2 +-
 common/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/locales/de.json b/common/locales/de.json
index 3e55f08a92..a8b4dbdcb6 100644
--- a/common/locales/de.json
+++ b/common/locales/de.json
@@ -165,7 +165,7 @@
       "dateLong": "dd L",
       "dateShort": "dd D.M.",
       "dateTimeLong": "dd L HH:mm",
-      "durationShort": "H:mm",
+      "durationShort": "H[h] m[min]",
       "hourLong": "HH:mm",
       "hourShort": "H:mm"
     }
diff --git a/common/locales/en.json b/common/locales/en.json
index 5903e22cf2..546d179ed2 100644
--- a/common/locales/en.json
+++ b/common/locales/en.json
@@ -172,7 +172,7 @@
       "dateLong": "dd L",
       "dateShort": "dd M/D",
       "dateTimeLong": "dd L HH:mm",
-      "durationShort": "H:mm",
+      "durationShort": "H[h] m[m]",
       "hourLong": "HH:mm",
       "hourShort": "h:mm A"
     }

From 267ea905b7ca642b663527da9b2e2ade9e41365a Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 18:21:07 +0100
Subject: [PATCH 23/34] Use built-in ListFormat for formatting lists of values

https://caniuse.com/?search=ListFormat
---
 frontend/src/components/dashboard/SelectFilter.vue | 13 ++++++++++---
 frontend/src/views/camp/Dashboard.vue              |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 406dcaf757..113b9fac55 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -46,6 +46,7 @@ export default {
     items: { type: Object, default: () => ({}) },
     displayField: { type: [String, Function], required: true },
     valueField: { type: String, default: '_meta.self' },
+    andFilter: { type: Boolean, default: false },
   },
   computed: {
     active() {
@@ -65,9 +66,15 @@ export default {
       )
     },
     labelValue() {
-      return this.multiple
-        ? (this.value || []).map((item) => this.processedItems[item].text).join(', ')
-        : this.processedItems[this.value]?.text
+      if (this.multiple) {
+        const list = (this.value || []).map((item) => this.processedItems[item].text)
+        const lang = document.querySelector('html').getAttribute('lang')
+        const listFormat = new Intl.ListFormat(lang, {
+          type: this.andFilter ? 'conjunction' : 'disjunction',
+        })
+        return listFormat.format(list)
+      }
+      return this.processedItems[this.value]?.text
     },
   },
   methods: {
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 36a20aef97..e846b27911 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -14,6 +14,7 @@
         <SelectFilter
           v-model="filter.responsible"
           multiple
+          and-filter
           :items="campCollaborations"
           :display-field="campCollaborationDisplayName"
           :label="$tc('views.camp.dashboard.responsible')"

From 682851b00c6e3e39b1cc3e864b576581af887442 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 18:28:20 +0100
Subject: [PATCH 24/34] Add an underline on hover for now

---
 frontend/src/components/dashboard/ActivityRow.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 8225c79a7f..fb7c1bab9b 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -15,7 +15,10 @@
       <span class="e-subtitle">{{ duration }}</span>
     </td>
     <td style="width: 100%" class="contentrow">
-      <router-link :to="routerLink" class="text-decoration-none black--text">
+      <router-link
+        :to="routerLink"
+        class="text-decoration-none text-decoration-hover-underline black--text"
+      >
         {{ title }}<br />
       </router-link>
       <span class="e-subtitle">{{ location }}</span>
@@ -124,4 +127,8 @@ tr + tr :is(td, th) {
   vertical-align: baseline;
   align-items: center;
 }
+
+.text-decoration-hover-underline:hover {
+  text-decoration: underline !important;
+}
 </style>

From 064ba9695ae00507ae973d1480f1049271b3dc17 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 18:51:01 +0100
Subject: [PATCH 25/34] Pass tc as argument to avoid console errors

---
 frontend/src/components/user/UserAvatar.vue | 2 +-
 frontend/src/views/camp/Dashboard.vue       | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/user/UserAvatar.vue b/frontend/src/components/user/UserAvatar.vue
index 5d4b30a0c1..8b2259f75d 100644
--- a/frontend/src/components/user/UserAvatar.vue
+++ b/frontend/src/components/user/UserAvatar.vue
@@ -49,7 +49,7 @@ export default {
       }
       return this.user
         ? userDisplayName(this.user)
-        : campCollaborationDisplayName(this.campCollaboration)
+        : campCollaborationDisplayName(this.campCollaboration, this.$tc.bind(this))
     },
     style() {
       return {
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index e846b27911..38a44c8526 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -268,7 +268,9 @@ export default {
     this.loading = false
   },
   methods: {
-    campCollaborationDisplayName,
+    campCollaborationDisplayName(campCollaboration) {
+      return campCollaborationDisplayName(campCollaboration, this.$tc.bind(this))
+    },
     dateLong,
   },
 }

From d6738b8847f2ee143c06dfd75ec0bfffb791ab37 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 18:56:33 +0100
Subject: [PATCH 26/34] Fix various console errors due to partially loaded data

---
 frontend/src/views/camp/Dashboard.vue | 66 ++++++++++++++-------------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index 38a44c8526..f23cecc09d 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -98,33 +98,35 @@
               </th>
             </tr>
           </thead>
-          <tbody
-            v-for="(dayScheduleEntries, dayUri) in periodDays"
-            :key="dayUri"
-            :aria-labelledby="dayUri + 'th'"
-          >
-            <tr>
-              <th
-                :id="dayUri + 'th'"
-                colspan="5"
-                scope="colgroup"
-                style="
-                  padding-top: 0.75rem;
-                  font-weight: 400;
-                  color: #666;
-                  font-size: 0.9rem;
-                  text-align: left;
-                "
-              >
-                {{ dateLong(days[dayUri].start) }}
-              </th>
-            </tr>
-            <ActivityRow
-              v-for="scheduleEntry in dayScheduleEntries"
-              :key="scheduleEntry._meta.self"
-              :schedule-entry="scheduleEntry"
-            />
-          </tbody>
+          <template v-if="!periods[uri].days()._meta.loading">
+            <tbody
+              v-for="(dayScheduleEntries, dayUri) in periodDays"
+              :key="dayUri"
+              :aria-labelledby="dayUri + 'th'"
+            >
+              <tr>
+                <th
+                  :id="dayUri + 'th'"
+                  colspan="5"
+                  scope="colgroup"
+                  style="
+                    padding-top: 0.75rem;
+                    font-weight: 400;
+                    color: #666;
+                    font-size: 0.9rem;
+                    text-align: left;
+                  "
+                >
+                  {{ dateLong(days[dayUri].start) }}
+                </th>
+              </tr>
+              <ActivityRow
+                v-for="scheduleEntry in dayScheduleEntries"
+                :key="scheduleEntry._meta.self"
+                :schedule-entry="scheduleEntry"
+              />
+            </tbody>
+          </template>
         </table>
       </template>
     </div>
@@ -243,10 +245,12 @@ export default {
       },
     },
     loggedInCampCollaboration() {
-      return Object.values(this.campCollaborations).find(
-        (collaboration) =>
-          collaboration.user()._meta.self === this.loggedInUser._meta.self
-      )?._meta?.self
+      return Object.values(this.campCollaborations).find((collaboration) => {
+        if (typeof collaboration.user !== 'function') {
+          return false
+        }
+        return collaboration.user()?._meta?.self === this.loggedInUser._meta.self
+      })?._meta?.self
     },
     multiplePeriods() {
       return (

From e8867365e3cf856e6d48fd68a3a665d9c8524464 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 19:04:01 +0100
Subject: [PATCH 27/34] Change label

---
 frontend/src/components/dashboard/SelectFilter.vue | 2 +-
 frontend/src/locales/de.json                       | 2 +-
 frontend/src/locales/en.json                       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 113b9fac55..0c45f5335c 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -12,7 +12,7 @@
     <v-list dense>
       <v-list-item dense color="primary" @click.prevent="clear()">
         <v-list-item-title>{{
-          $tc('components.dashboard.selectFilter.all')
+          $tc('components.dashboard.selectFilter.clear')
         }}</v-list-item-title>
       </v-list-item>
       <v-list-item
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 35efa85e69..9945c85f63 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -99,7 +99,7 @@
     },
     "dashboard": {
       "selectFilter": {
-        "all": "Alle"
+        "clear": "Zurücksetzen"
       }
     },
     "dialog": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index ab10dce655..1e02f3b78b 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -99,7 +99,7 @@
     },
     "dashboard": {
       "selectFilter": {
-        "all": "All"
+        "clear": "Clear"
       }
     },
     "dialog": {

From b704de43678a4c7e83064cd4aecafc47096501a9 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 19:19:24 +0100
Subject: [PATCH 28/34] Make period filter more intuitive and add fallback
 messages

---
 frontend/src/locales/de.json          |  4 +++-
 frontend/src/locales/en.json          |  4 +++-
 frontend/src/views/camp/Dashboard.vue | 22 ++++++++++++++++------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 9945c85f63..a387a802ee 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -386,9 +386,11 @@
           "time": "Zeit",
           "title": "Titel"
         },
+        "noEntries": "Keine Aktivitäten gefunden. Versuche die Filter zu entfernen oder lade die Seite neu.",
         "onlyMyActivities": "Nur meine Aktivitäten",
         "period": "Lagerabschnitt",
-        "responsible": "Verantwortlich"
+        "responsible": "Verantwortlich",
+        "welcome": "Willkommen in deinem neuen Lager. Es sind noch keine Aktivitäten erfasst. "
       },
       "invitation": {
         "acceptCurrentAuth": "Einladung mit aktuellem Account akzeptieren",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 1e02f3b78b..ea04d8f9a6 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -383,9 +383,11 @@
           "time": "Time",
           "title": "Title"
         },
+        "noEntries": "No activities found. Try clearing the selection filters and/or reloading the page.",
         "onlyMyActivities": "Only my activities",
         "period": "Period",
-        "responsible": "Responsible"
+        "responsible": "Responsible",
+        "welcome": "Welcome to your new camp. There aren't any activities defined yet."
       },
       "invitation": {
         "acceptCurrentAuth": "Accept invitation with current account",
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index f23cecc09d..c80004fee9 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -128,6 +128,15 @@
             </tbody>
           </template>
         </table>
+        <p
+          v-if="scheduleEntries.length > 0 && filteredScheduleEntries.length === 0"
+          class="ma-4"
+        >
+          {{ $tc('views.camp.dashboard.noEntries') }}
+        </p>
+        <p v-if="!scheduleEntriesLoading && scheduleEntries.length === 0" class="ma-4">
+          {{ $tc('views.camp.dashboard.welcome') }}
+        </p>
       </template>
     </div>
   </content-card>
@@ -141,7 +150,7 @@ import BooleanFilter from '@/components/dashboard/BooleanFilter.vue'
 import SelectFilter from '@/components/dashboard/SelectFilter.vue'
 import ActivityRow from '@/components/dashboard/ActivityRow.vue'
 import FilterDivider from '@/components/dashboard/FilterDivider.vue'
-import { keyBy, groupBy, mapValues, uniq } from 'lodash'
+import { keyBy, groupBy, mapValues } from 'lodash'
 import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
 import { dateLong } from '../../common/helpers/dateHelperUTCFormatted.js'
 
@@ -189,6 +198,11 @@ export default {
         (period) => period.scheduleEntries().items
       )
     },
+    scheduleEntriesLoading() {
+      return Object.values(this.periods).some(
+        (period) => period.scheduleEntries()._meta.loading
+      )
+    },
     days() {
       return keyBy(
         Object.values(this.periods).flatMap((period) => period.days().items),
@@ -253,11 +267,7 @@ export default {
       })?._meta?.self
     },
     multiplePeriods() {
-      return (
-        uniq(
-          this.scheduleEntries.map((scheduleEntry) => scheduleEntry.period()._meta.self)
-        ).length > 1
-      )
+      return Object.keys(this.periods).length > 1
     },
   },
   async mounted() {

From 6bc4f1d5e16ad4b2675924068b3212274d0a9801 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Wed, 9 Nov 2022 21:33:23 +0100
Subject: [PATCH 29/34] Add back a component for baseline alignment

---
 .../src/components/dashboard/ActivityRow.vue  |  7 +++--
 .../components/layout/TextAlignBaseline.vue   | 28 +++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/layout/TextAlignBaseline.vue

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index fb7c1bab9b..223bc44231 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -1,8 +1,8 @@
 <template>
   <tr class="row">
     <th style="text-align: left" class="tabular-nums" scope="row">
-      <span class="baseline-center"
-        ><span class="smaller">{{ scheduleEntry.number }}</span></span
+      <TextAlignBaseline
+        ><span class="smaller">{{ scheduleEntry.number }}</span></TextAlignBaseline
       >
       <br />
       <CategoryChip small dense :category="category" class="d-sm-none" />
@@ -36,10 +36,11 @@ import {
   hourShort,
   timeDurationShort,
 } from '../../common/helpers/dateHelperUTCFormatted.js'
+import TextAlignBaseline from '@/components/layout/TextAlignBaseline.vue'
 
 export default {
   name: 'ActivityRow',
-  components: { CategoryChip, AvatarRow },
+  components: { CategoryChip, AvatarRow, TextAlignBaseline },
   props: {
     scheduleEntry: { type: Object, required: true },
   },
diff --git a/frontend/src/components/layout/TextAlignBaseline.vue b/frontend/src/components/layout/TextAlignBaseline.vue
new file mode 100644
index 0000000000..d28a2c7c3b
--- /dev/null
+++ b/frontend/src/components/layout/TextAlignBaseline.vue
@@ -0,0 +1,28 @@
+<template>
+  <span class="e-bc"><slot /></span>
+</template>
+
+<script>
+export default {
+  name: 'TextAlignBaseline',
+  props: {
+    smaller: Boolean,
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.e-bc {
+  display: inline-flex;
+  vertical-align: baseline;
+  align-items: center;
+
+  &::before {
+    user-select: none;
+    pointer-events: none;
+    content: '\200B';
+    font-size: 1em;
+    line-height: 1;
+  }
+}
+</style>

From 922b797fcb0e93c03c6ad4e206484f2fd7c6a653 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Thu, 10 Nov 2022 11:15:35 +0100
Subject: [PATCH 30/34] Remove unused css style

---
 frontend/src/components/dashboard/ActivityRow.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 223bc44231..82a4900279 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -123,12 +123,6 @@ tr + tr :is(td, th) {
   font-size: 0.75em;
 }
 
-.baseline-center {
-  display: inline-flex;
-  vertical-align: baseline;
-  align-items: center;
-}
-
 .text-decoration-hover-underline:hover {
   text-decoration: underline !important;
 }

From 702e6992e88db764fd86cabe96481f8bf4d71a6c Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Fri, 11 Nov 2022 11:37:59 +0100
Subject: [PATCH 31/34] Clean up and add skeleton loaders

---
 .../src/components/dashboard/ActivityRow.vue  |   1 -
 frontend/src/views/camp/Dashboard.vue         | 187 +++++++++++-------
 2 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/frontend/src/components/dashboard/ActivityRow.vue b/frontend/src/components/dashboard/ActivityRow.vue
index 82a4900279..4a07ebc604 100644
--- a/frontend/src/components/dashboard/ActivityRow.vue
+++ b/frontend/src/components/dashboard/ActivityRow.vue
@@ -82,7 +82,6 @@ export default {
 <style scoped>
 .row {
   display: table-row;
-  gap: 1rem;
   vertical-align: baseline;
 }
 
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index c80004fee9..9ca6b88119 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -1,73 +1,77 @@
 <template>
   <content-card :title="$tc('views.camp.dashboard.activities')" toolbar>
     <div class="d-flow-root">
-      <div
-        v-if="!loading"
-        class="d-flex flex-wrap ma-4"
-        style="overflow-y: auto; gap: 10px"
-      >
+      <div class="d-flex flex-wrap ma-4" style="overflow-y: auto; gap: 10px">
         <BooleanFilter
+          v-if="!loading"
           v-model="showOnlyMyActivities"
           :label="$tc('views.camp.dashboard.onlyMyActivities')"
         />
+        <v-skeleton-loader v-else type="button" />
         <FilterDivider />
-        <SelectFilter
-          v-model="filter.responsible"
-          multiple
-          and-filter
-          :items="campCollaborations"
-          :display-field="campCollaborationDisplayName"
-          :label="$tc('views.camp.dashboard.responsible')"
-        >
-          <template #item="{ item }">
-            <UserAvatar
-              :camp-collaboration="campCollaborations[item.value]"
-              size="18"
-              class="mr-1"
-            />
-            {{ item.text }}
-          </template>
-        </SelectFilter>
-        <SelectFilter
-          v-model="filter.category"
-          multiple
-          :items="categories"
-          display-field="short"
-          :label="$tc('views.camp.dashboard.category')"
-        >
-          <template #item="{ item }">
-            <CategoryChip dense :category="categories[item.value]" class="mr-1" />
-            {{ categories[item.value].name }}
-          </template>
-        </SelectFilter>
-        <SelectFilter
-          v-if="multiplePeriods"
-          v-model="filter.period"
-          :items="periods"
-          display-field="description"
-          :label="$tc('views.camp.dashboard.period')"
-        />
-        <v-chip
-          v-if="
-            filter.period ||
-            (filter.responsible && filter.responsible.length > 0) ||
-            (filter.category && filter.category.length > 0)
-          "
-          label
-          outlined
-          @click="
-            filter = {
-              period: null,
-              responsible: [],
-              category: [],
-            }
-          "
-        >
-          <v-icon left>mdi-close</v-icon>
-          {{ $tc('views.camp.dashboard.clearFilters') }}
-        </v-chip>
+        <template v-if="!loading">
+          <SelectFilter
+            v-model="filter.responsible"
+            multiple
+            and-filter
+            :items="campCollaborations"
+            :display-field="campCollaborationDisplayName"
+            :label="$tc('views.camp.dashboard.responsible')"
+          >
+            <template #item="{ item }">
+              <UserAvatar
+                :camp-collaboration="campCollaborations[item.value]"
+                size="18"
+                class="mr-1"
+              />
+              {{ item.text }}
+            </template>
+          </SelectFilter>
+          <SelectFilter
+            v-model="filter.category"
+            multiple
+            :items="categories"
+            display-field="short"
+            :label="$tc('views.camp.dashboard.category')"
+          >
+            <template #item="{ item }">
+              <CategoryChip dense :category="categories[item.value]" class="mr-1" />
+              {{ categories[item.value].name }}
+            </template>
+          </SelectFilter>
+          <SelectFilter
+            v-if="multiplePeriods"
+            v-model="filter.period"
+            :items="periods"
+            display-field="description"
+            :label="$tc('views.camp.dashboard.period')"
+          />
+          <v-chip
+            v-if="
+              filter.period ||
+              (filter.responsible && filter.responsible.length > 0) ||
+              (filter.category && filter.category.length > 0)
+            "
+            label
+            outlined
+            @click="
+              filter = {
+                period: null,
+                responsible: [],
+                category: [],
+              }
+            "
+          >
+            <v-icon left>mdi-close</v-icon>
+            {{ $tc('views.camp.dashboard.clearFilters') }}
+          </v-chip>
+        </template>
+        <template v-else>
+          <v-skeleton-loader type="button" />
+          <v-skeleton-loader type="button" />
+        </template>
       </div>
-      <template v-if="!loading">
+      <template v-if="!loading && !scheduleEntriesLoading">
         <table
           v-for="(periodDays, uri) in groupedScheduleEntries"
           :key="uri"
@@ -105,18 +109,7 @@
               :aria-labelledby="dayUri + 'th'"
             >
               <tr>
-                <th
-                  :id="dayUri + 'th'"
-                  colspan="5"
-                  scope="colgroup"
-                  style="
-                    padding-top: 0.75rem;
-                    font-weight: 400;
-                    color: #666;
-                    font-size: 0.9rem;
-                    text-align: left;
-                  "
-                >
+                <th :id="dayUri + 'th'" colspan="5" scope="colgroup" class="day-header">
                   {{ dateLong(days[dayUri].start) }}
                 </th>
               </tr>
@@ -134,10 +127,46 @@
         >
           {{ $tc('views.camp.dashboard.noEntries') }}
         </p>
-        <p v-if="!scheduleEntriesLoading && scheduleEntries.length === 0" class="ma-4">
+        <p v-if="scheduleEntries.length === 0" class="ma-4">
           {{ $tc('views.camp.dashboard.welcome') }}
         </p>
       </template>
+      <table v-else class="mx-4 mt-6 mb-3 d-sr-none" style="border-collapse: collapse">
+        <caption>
+          <v-skeleton-loader type="heading" class="d-block mb-3" width="45ch" />
+        </caption>
+        <tbody>
+          <tr>
+            <th colspan="5" class="day-header">
+              <v-skeleton-loader type="text" width="15ch" />
+            </th>
+          </tr>
+          <tr
+            v-for="index in 3"
+            :key="index"
+            style="border-top: 1px solid #ddd; vertical-align: top"
+          >
+            <th class="pt-1">
+              <v-skeleton-loader type="text" width="2ch" />
+              <v-skeleton-loader type="text" width="3ch" class="d-sm-none" />
+            </th>
+            <td class="d-none d-sm-table-cell pl-2 pt-1">
+              <v-skeleton-loader type="text" width="3ch" />
+            </td>
+            <td class="nowrap pl-2 pt-1">
+              <v-skeleton-loader type="text" width="6ch" />
+              <v-skeleton-loader type="text" width="4ch" />
+            </td>
+            <td style="width: 100%" class="pl-2 pb-2 pt-1">
+              <v-skeleton-loader type="text" width="20ch" />
+              <v-skeleton-loader type="text" width="15ch" />
+            </td>
+            <td class="contentrow avatarrow overflow-visible pt-1">
+              <v-skeleton-loader type="heading" width="55" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
   </content-card>
 </template>
@@ -290,4 +319,12 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.day-header {
+  padding-top: 0.75rem;
+  font-weight: 400;
+  color: #666;
+  font-size: 0.9rem;
+  text-align: left;
+}
+</style>

From 8a37d7bee272f840ffe7b7d4afbf249133c51da6 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Fri, 11 Nov 2022 11:48:30 +0100
Subject: [PATCH 32/34] Add multiple modes of duration display

---
 common/helpers/dateHelperUTCFormatted.js | 16 +++++++++++++++-
 common/locales/de.json                   |  6 +++++-
 common/locales/en.json                   |  6 +++++-
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/common/helpers/dateHelperUTCFormatted.js b/common/helpers/dateHelperUTCFormatted.js
index f240a5f9c4..88cef46ed4 100644
--- a/common/helpers/dateHelperUTCFormatted.js
+++ b/common/helpers/dateHelperUTCFormatted.js
@@ -17,7 +17,21 @@ function timeDurationShort(start, end) {
   const startTime = dayjs.utc(start)
   const endTime = dayjs.utc(end)
   const duration = dayjs(endTime.diff(startTime))
-  return duration.format(i18n.tc('global.datetime.durationShort'))
+  const durationInMinutes = duration.valueOf() / 1000 / 60
+  if (durationInMinutes < 60) {
+    return i18n.tc('global.datetime.duration.minutesOnly', 0, {
+      minutes: durationInMinutes,
+    })
+  }
+  if (durationInMinutes % 60 === 0) {
+    return i18n.tc('global.datetime.duration.hoursOnly', 0, {
+      hours: durationInMinutes / 60,
+    })
+  }
+  return i18n.tc('global.datetime.duration.hoursAndMinutes', 0, {
+    hours: Math.floor(durationInMinutes / 60.0),
+    minutes: durationInMinutes % 60,
+  })
 }
 
 // short format of dateTime range
diff --git a/common/locales/de.json b/common/locales/de.json
index a8b4dbdcb6..0a06360a60 100644
--- a/common/locales/de.json
+++ b/common/locales/de.json
@@ -165,7 +165,11 @@
       "dateLong": "dd L",
       "dateShort": "dd D.M.",
       "dateTimeLong": "dd L HH:mm",
-      "durationShort": "H[h] m[min]",
+      "duration": {
+        "hoursAndMinutes": "{hours}h {minutes}min",
+        "hoursOnly": "{hours}h",
+        "minutesOnly": "{minutes}min"
+      },
       "hourLong": "HH:mm",
       "hourShort": "H:mm"
     }
diff --git a/common/locales/en.json b/common/locales/en.json
index 546d179ed2..8d068b2577 100644
--- a/common/locales/en.json
+++ b/common/locales/en.json
@@ -172,7 +172,11 @@
       "dateLong": "dd L",
       "dateShort": "dd M/D",
       "dateTimeLong": "dd L HH:mm",
-      "durationShort": "H[h] m[m]",
+      "duration": {
+        "hoursAndMinutes": "{hours}h {minutes}m",
+        "hoursOnly": "{hours}h",
+        "minutesOnly": "{minutes}m"
+      },
       "hourLong": "HH:mm",
       "hourShort": "h:mm A"
     }

From b0c70477d50a2cd4b0163b5272c61140a0155397 Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Fri, 11 Nov 2022 11:53:15 +0100
Subject: [PATCH 33/34] Visually distinguish clear option using an icon

---
 frontend/src/components/dashboard/SelectFilter.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index 0c45f5335c..b3a2fc2a49 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -11,9 +11,12 @@
     </template>
     <v-list dense>
       <v-list-item dense color="primary" @click.prevent="clear()">
-        <v-list-item-title>{{
-          $tc('components.dashboard.selectFilter.clear')
-        }}</v-list-item-title>
+        <v-list-item-title class="d-flex">
+          <span class="flex-grow-1">{{
+            $tc('components.dashboard.selectFilter.clear')
+          }}</span>
+          <v-icon right>mdi-close</v-icon>
+        </v-list-item-title>
       </v-list-item>
       <v-list-item
         v-for="(item, self) in processedItems"

From 8cb5b0199bc4353e82c9b7607594f8ba39a5a5bf Mon Sep 17 00:00:00 2001
From: Carlo Beltrame <carlo@beltra.me>
Date: Fri, 11 Nov 2022 12:16:26 +0100
Subject: [PATCH 34/34] Make clear option have less visual weight

---
 frontend/src/components/dashboard/SelectFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/dashboard/SelectFilter.vue b/frontend/src/components/dashboard/SelectFilter.vue
index b3a2fc2a49..4728baf072 100644
--- a/frontend/src/components/dashboard/SelectFilter.vue
+++ b/frontend/src/components/dashboard/SelectFilter.vue
@@ -11,11 +11,11 @@
     </template>
     <v-list dense>
       <v-list-item dense color="primary" @click.prevent="clear()">
-        <v-list-item-title class="d-flex">
+        <v-list-item-title class="d-flex align-center grey--text text--darken-1">
           <span class="flex-grow-1">{{
             $tc('components.dashboard.selectFilter.clear')
           }}</span>
-          <v-icon right>mdi-close</v-icon>
+          <v-icon right class="d-flex grey--text">mdi-close</v-icon>
         </v-list-item-title>
       </v-list-item>
       <v-list-item