Persist dashboard filters in query params

frontend/src/helpers/formatHalHelper.js

@@ -0,0 +1,25 @@
+/**
+ * The Type of Object in qualified hal format for api
+ * @typedef {'categories'|'camp_collaborations'|'periods'} HalType
+ */
+/**
+ * Format of the Hal Uri
+ * @typedef {`/${HalType}/${string}`} HalUri
+ */
+/**
+ * Formats the Hal-Object-URI to the id
+ * @param uri {HalUri} the ID (from the hal object)
+ * @return {string} the ID of the uri
+ */
+export const halUriToId = (uri) => {
+  return uri.substring(uri.lastIndexOf('/') + 1)
+}
+/**
+ * Formats an id and a Datatype to a hal-object-id
+ * @param dataType {HalType} the datatype of the object
+ * @param id {string} the id of the object
+ * @return {HalUri}
+ */
+export const idToHalUri = (dataType, id) => {
+  return `/${dataType}/${id}`
+}

frontend/src/views/camp/Dashboard.vue

@@ -180,15 +180,30 @@ 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 { groupBy, keyBy, mapValues } from 'lodash'
 import campCollaborationDisplayName from '../../common/helpers/campCollaborationDisplayName.js'
 import { dateHelperUTCFormatted } from '@/mixins/dateHelperUTCFormatted.js'
 import TextAlignBaseline from '@/components/layout/TextAlignBaseline.vue'
-import { FormatHalHelperMixin } from '@/mixins/formatHalHelperMixin'
+import { halUriToId, idToHalUri } from '@/helpers/formatHalHelper.js'
+import { mapGetters } from 'vuex'
 
 function filterEquals(arr1, arr2) {
   return JSON.stringify(arr1) === JSON.stringify(arr2)
 }
+/**
+ * Allowed Url param keys
+ * @typedef {'period'|'responsible'|'category'} UrlParamKey
+ */
+/**
+ * The Allowed Url parameter keys
+ * @type {UrlParamKey[]} UrlParamKeys
+ */
+const urlParamKeys = ['period', 'responsible', 'category']
+
+/**
+ * Map for url param keys to hal types
+ * @type {{(typeof urlParamKeys[number]):HalType }}
+ */
 const URL_PARAM_TO_HAL_TYPE = {
   category: 'categories',
   responsible: 'camp_collaborations',
@@ -206,14 +221,16 @@ export default {
     ContentCard,
     UserAvatar,
   },
-  mixins: [dateHelperUTCFormatted, FormatHalHelperMixin],
+  mixins: [dateHelperUTCFormatted],
   props: {
     camp: { type: Function, required: true },
   },
   data() {
     return {
-      loggedInUser: null,
       loading: true,
+      /**
+       * Contains the Values declared initially. In the unverified values from the Url params will be written in the filter.url
+       * @type {{period:null|HalUri,responsible:HalUri[],category: HalUri[],url?:{period?:null|HalUri,responsible?:HalUri[],category?: HalUri[]}}} Filter*/
       filter: {
         period: null,
         responsible: [],
@@ -317,10 +334,13 @@ export default {
           .filter(([_, value]) => !!value)
           .map(([key, value]) => [
             key,
-            Array.isArray(value) ? value.map((e) => this.toId(e)) : this.toId(value),
+            Array.isArray(value) ? value.map((e) => halUriToId(e)) : halUriToId(value),
           ])
       )
     },
+    ...mapGetters({
+      loggedInUser: 'getLoggedInUser',
+    }),
   },
   watch: {
     'filter.category': 'persistRouterState',
@@ -330,36 +350,69 @@ export default {
   async mounted() {
     this.api.reload(this.camp())
 
-    const [loggedInUser] = await Promise.all([
-      this.$auth.loadUser(),
-      this.camp().periods()._meta.load,
+    const loadingDataPromise = Promise.all([
+      this.loggedInUser._meta.load,
       this.camp().activities()._meta.load,
-      this.camp().categories()._meta.load,
     ])
 
-    this.loggedInUser = loggedInUser
+    // Once camp data is loaded validate and map values from url param to filter
+    await Promise.all([
+      this.camp().categories()._meta.load,
+      this.camp().periods()._meta.load,
+      this.camp().campCollaborations()._meta.load,
+      loadingDataPromise,
+    ]).then(([categories, periods, collaborators]) => {
+      const availableCategoryIds = categories.allItems.map((value) => value._meta.self)
+      const availablePeriodsIds = periods.allItems.map((value) => value._meta.self)
+      const availableCollaboratorIds = collaborators.allItems.map(
+        (value) => value._meta.self
+      )
+
+      const category = (this.filter.url?.category ?? []).filter((value) =>
+        availableCategoryIds.includes(value)
+      )
+      const responsible = (this.filter.url?.responsible ?? []).filter((value) =>
+        availableCollaboratorIds.includes(value)
+      )
+      const period = availablePeriodsIds.includes(this.filter.url?.period)
+        ? this.filter.url.period
+        : null
+
+      this.filter = {
+        category,
+        responsible,
+        period,
+      }
+    })
+
     this.loading = false
   },
   beforeMount() {
-    let fromUrl = Object.fromEntries(
+    this.filter.url = Object.fromEntries(
+      /**
+       * @type {[UrlParamKey,(HalUri[])|HalUri]}
+       */
       Object.entries(this.$route.query)
+        .filter(([key, value]) => urlParamKeys.includes(key) && !!value)
         .map(([key, value]) => [key, value, URL_PARAM_TO_HAL_TYPE[key]])
         .map(([key, value, type]) => {
           if (typeof value === 'string') {
             let halUriValue =
-              key === 'period' ? this.toUri(type, value) : [this.toUri(type, value)]
+              key === 'period' ? idToHalUri(type, value) : [idToHalUri(type, value)]
             return [key, halUriValue]
           }
           if (Array.isArray(value)) {
             let uriValues = value
               .filter((entry) => !!entry)
-              .map((entry) => this.toUri(type, entry))
+              .map((entry) => idToHalUri(type, entry))
             return [key, uriValues]
           }
           return [key, null]
         })
+        .filter(([_, value]) => {
+          return !!value
+        })
     )
-    this.filter = { ...this.filter, ...fromUrl }
   },
   methods: {
     campCollaborationDisplayName(campCollaboration) {

frontend/src/views/camp/__tests__/Dashboard.spec.js

@@ -26,7 +26,7 @@ describe('Dashboard view', () => {
     }
     await flushPromises()
 
-    expect(vueWrapper.vm.$data.filter).toMatchObject(expectedFilterValues)
+    expect(vueWrapper.vm.$data.filter.url).toMatchObject(expectedFilterValues)
   })
   it('Parses filter value into URL', async () => {
     const filter = {
@@ -40,9 +40,10 @@ describe('Dashboard view', () => {
       filter,
     })
     const options = { ...DEFAULT_DASHBOARD_OPTIONS(), data }
-    shallowMount(Dashboard, options)
+    const wrapper = shallowMount(Dashboard, options)
 
     await flushPromises()
+    wrapper.vm.persistRouterState()
 
     const expectedURLParams = {
       responsible: ['fe6557a4b89f'],