Persist some frontend preferences in localStorage

frontend/src/components/activity/ScheduleEntry.vue

@@ -8,7 +8,7 @@ Displays a single scheduleEntry
     toolbar
     back
     :loaded="!scheduleEntry()._meta.loading && !activity.camp()._meta.loading"
-    :max-width="isLocalPaperDisplaySize ? '944px' : ''"
+    :max-width="isPaperDisplaySize ? '944px' : ''"
   >
     <template #title>
       <v-toolbar-title class="font-weight-bold">
@@ -93,7 +93,7 @@ Displays a single scheduleEntry
         <template v-else>{{ $tc('global.button.back') }}</template>
       </v-btn>
 
-      <TogglePaperSize :value="isPaperDisplaySize" @input="toggleDisplaySize" />
+      <TogglePaperSize v-model="isPaperDisplaySize" />
       <!-- hamburger menu -->
       <v-menu v-if="!layoutMode" offset-y>
         <template #activator="{ on, attrs }">
@@ -240,24 +240,21 @@ Displays a single scheduleEntry
 </template>
 
 <script>
-import { computed } from 'vue'
 import { sortBy } from 'lodash'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import ApiTextField from '@/components/form/api/ApiTextField.vue'
 import RootNode from '@/components/activity/RootNode.vue'
 import ActivityResponsibles from '@/components/activity/ActivityResponsibles.vue'
 import { dateHelperUTCFormatted } from '@/mixins/dateHelperUTCFormatted.js'
 import { campRoleMixin } from '@/mixins/campRoleMixin'
-import { periodRoute, scheduleEntryRoute } from '@/router.js'
-import router from '@/router.js'
+import router, { periodRoute, scheduleEntryRoute } from '@/router.js'
 import DownloadNuxtPdf from '@/components/print/print-nuxt/DownloadNuxtPdfListItem.vue'
 import DownloadClientPdf from '@/components/print/print-client/DownloadClientPdfListItem.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
 import CopyActivityInfoDialog from '@/components/activity/CopyActivityInfoDialog.vue'
 import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
 import TogglePaperSize from '@/components/activity/TogglePaperSize.vue'
-import { useDisplaySize } from '@/components/activity/useDisplaySize.js'
 
 export default {
   name: 'ScheduleEntry',
@@ -279,7 +276,7 @@ export default {
       preferredContentTypes: () => this.preferredContentTypes,
       allContentNodes: () => this.contentNodes,
       camp: () => this.camp,
-      isPaperDisplaySize: computed(() => this.isPaperDisplaySize),
+      isPaperDisplaySize: () => this.isPaperDisplaySize,
     }
   },
   props: {
@@ -288,9 +285,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    return useDisplaySize()
-  },
   data() {
     return {
       layoutMode: false,
@@ -348,6 +342,17 @@ export default {
         ],
       }
     },
+    isPaperDisplaySize: {
+      get() {
+        return this.$store.getters.getPaperDisplaySize(this.camp._meta.self)
+      },
+      set(value) {
+        this.$store.commit('setPaperDisplaySize', {
+          campUri: this.camp._meta.self,
+          paperDisplaySize: value,
+        })
+      },
+    },
   },
 
   // reload data every time user navigates to Activity view

frontend/src/components/activity/content/ResponsiveLayout.vue

@@ -121,7 +121,7 @@ export default {
     },
     isDefaultVariant() {
       return (
-        !this.isPaperDisplaySize &&
+        !this.isPaperDisplaySize() &&
         this.clientWidth >= ASIDE_CONTENT_WIDTH + MAIN_CONTENT_WIDTH + GAP
       )
     },

frontend/src/components/print/PrintConfigurator.vue

@@ -1,7 +1,7 @@
 <template>
   <v-skeleton-loader v-if="camp()._meta.loading" type="article" />
   <div v-else>
-    <PagesOverview v-model="cnf.contents">
+    <PagesOverview v-model="cnf.contents" @input="onChange">
       <PagesConfig
         v-for="(content, idx) in cnf.contents"
         :key="idx"
@@ -11,12 +11,13 @@
           contentComponents[content.type].design.multiple ||
           content.options?.periods?.length > 1
         "
-        @remove="cnf.contents.splice(idx, 1)"
+        @remove="removeContent(idx)"
       >
         <component
           :is="contentComponents[content.type]"
-          v-model="content.options"
+          :value="content.options"
           :camp="camp()"
+          @input="onChange"
         />
       </PagesConfig>
 
@@ -36,7 +37,7 @@
             v-for="(component, idx) in contentComponents"
             :key="idx"
             @click="
-              cnf.contents.push({
+              addContent({
                 type: idx,
                 options: component.defaultOptions(),
               })
@@ -108,6 +109,8 @@ import PagesConfig from './configurator/PagesConfig.vue'
 import DownloadNuxtPdfButton from '@/components/print/print-nuxt/DownloadNuxtPdfButton.vue'
 import DownloadClientPdfButton from '@/components/print/print-client/DownloadClientPdfButton.vue'
 import { getEnv } from '@/environment.js'
+import cloneDeep from 'lodash/cloneDeep'
+import VueI18n from '../../plugins/i18n/index.js'
 
 export default {
   name: 'PrintConfigurator',
@@ -142,19 +145,25 @@ export default {
         Activity: ActivityConfig,
         Toc: TocConfig,
       },
-      cnf: {
-        language: '',
-        documentName: this.camp().name,
-        camp: this.camp()._meta.self,
-        contents: this.defaultContents(),
-      },
       previewTab: null,
     }
   },
   computed: {
     lang() {
       return this.$store.state.lang.language
     },
+    cnf() {
+      return this.repairConfig(
+        cloneDeep(
+          this.$store.getters.getLastPrintConfig(this.camp()._meta.self, {
+            language: this.lang,
+            documentName: this.camp().name,
+            camp: this.camp()._meta.self,
+            contents: this.defaultContents(),
+          })
+        )
+      )
+    },
     isDev() {
       return getEnv().FEATURE_DEVELOPER ?? false
     },
@@ -176,6 +185,12 @@ export default {
       })
   },
   methods: {
+    resetConfig() {
+      this.$store.commit('setLastPrintConfig', {
+        campUri: this.camp()._meta.self,
+        printConfig: undefined,
+      })
+    },
     defaultContents() {
       const contents = [
         {
@@ -217,6 +232,42 @@ export default {
 
       return contents
     },
+    addContent(content) {
+      this.cnf.contents.push(content)
+      this.onChange()
+    },
+    removeContent(idx) {
+      this.cnf.contents.splice(idx, 1)
+      this.onChange()
+    },
+    onChange() {
+      this.$nextTick(() => {
+        this.$store.commit('setLastPrintConfig', {
+          campUri: this.camp()._meta.self,
+          printConfig: cloneDeep(this.cnf),
+        })
+      })
+    },
+    repairConfig(config) {
+      if (!config) config = {}
+      if (!(config.language in VueI18n.availableLocales)) config.language = 'en'
+      if (!config.documentName) config.documentName = this.camp().name
+      if (config.camp !== this.camp()._meta.self) config.camp = this.camp()._meta.self
+      if (typeof config.contents?.map !== 'function') {
+        config.contents = this.defaultContents()
+      }
+      config.contents = config.contents
+        .map((content) => {
+          if (!content.type) return null
+          const component = this.contentComponents[content.type]
+          if (!component) return null
+          if (typeof component.repairConfig !== 'function') return content
+          return component.repairConfig(content, this.camp())
+        })
+        .filter((component) => component)
+
+      return config
+    },
   },
 }
 </script>

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

@@ -6,6 +6,7 @@
       :items="scheduleEntries"
       :label="$tc('components.print.config.activityConfig.activity')"
       :filled="false"
+      @input="$emit('input')"
     />
     <v-skeleton-loader v-else type="image" height="56" />
   </div>

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

@@ -6,17 +6,32 @@
       :items="periods"
       multiple
       :filled="false"
+      @input="$emit('input')"
     />
     <e-select
       v-model="options.orientation"
       :label="$tc('components.print.config.picassoConfig.orientation')"
       :items="orientations"
       :filled="false"
+      @input="$emit('input')"
     />
   </div>
 </template>
 
 <script>
+import cloneDeep from 'lodash/cloneDeep'
+
+const ORIENTATIONS = [
+  {
+    value: 'L',
+    text: 'Landscape',
+  },
+  {
+    value: 'P',
+    text: 'Portrait',
+  },
+]
+
 export default {
   name: 'PicassoConfig',
   props: {
@@ -25,16 +40,7 @@ export default {
   },
   data() {
     return {
-      orientations: [
-        {
-          value: 'L',
-          text: 'Landscape',
-        },
-        {
-          value: 'P',
-          text: 'Portrait',
-        },
-      ],
+      orientations: cloneDeep(ORIENTATIONS),
     }
   },
   computed: {
@@ -62,5 +68,17 @@ export default {
   design: {
     multiple: false,
   },
+  repairConfig(config, camp) {
+    if (!config.options) config.options = {}
+    if (!config.options.periods) config.options.periods = []
+    const knownPeriods = camp.periods().items.map((p) => p._meta.self)
+    config.options.periods = config.options.periods.filter((period) => {
+      return knownPeriods.includes(period)
+    })
+    if (!(config.options.orientation in ORIENTATIONS.map((o) => o.value))) {
+      config.options.orientation = 'L'
+    }
+    return config
+  },
 }
 </script>

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

@@ -6,10 +6,12 @@
       :label="$tc('components.print.config.programConfig.periods')"
       multiple
       :filled="false"
+      @input="$emit('input')"
     />
     <e-checkbox
       v-model="options.dayOverview"
       :label="$tc('components.print.config.programConfig.dayOverview')"
+      @input="$emit('input')"
     />
   </div>
 </template>
@@ -46,5 +48,15 @@ export default {
   design: {
     multiple: true,
   },
+  repairConfig(config, camp) {
+    if (!config.options) config.options = {}
+    if (!config.options.periods) config.options.periods = []
+    const knownPeriods = camp.periods().items.map((p) => p._meta.self)
+    config.options.periods = config.options.periods.filter((period) => {
+      return knownPeriods.includes(period)
+    })
+    if (typeof config.options.dayOverview !== 'boolean') config.options.dayOverview = true
+    return config
+  },
 }
 </script>

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

@@ -6,6 +6,7 @@
       :label="$tc('components.print.config.storyConfig.periods')"
       multiple
       :filled="false"
+      @input="$emit('input')"
     />
   </div>
 </template>
@@ -44,5 +45,14 @@ export default {
   design: {
     multiple: false,
   },
+  repairConfig(config, camp) {
+    if (!config.options) config.options = {}
+    if (!config.options.periods) config.options.periods = []
+    const knownPeriods = camp.periods().items.map((p) => p._meta.self)
+    config.options.periods = config.options.periods.filter((period) => {
+      return knownPeriods.includes(period)
+    })
+    return config
+  },
 }
 </script>