WIP working on making reactivity work

frontend/src/components/print/PrintConfigurator.vue

@@ -214,6 +214,11 @@ export default {
           type: 'Program',
           options: {
             periods: [period._meta.self],
+            filter: {
+              category: [],
+              responsible: [],
+              progressLabel: [],
+            },
           },
         })
       })

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

@@ -13,16 +13,61 @@
       :label="$tc('components.print.config.programConfig.dayOverview')"
       @input="$emit('input')"
     />
+    <v-dialog
+      v-model="openFilter"
+      :fullscreen="$vuetify.breakpoint.smAndDown"
+      width="1000"
+    >
+      <template #activator="{ on, attrs }">
+        <v-chip
+          :input-value="openFilter"
+          outlined
+          class="align-self-center mt-4"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon left size="20">mdi-filter</v-icon>
+          {{ $tc('components.print.config.programConfig.filterActivities') }}
+        </v-chip>
+      </template>
+      <v-card>
+        <ScheduleEntryFilters
+          v-model="options.filter"
+          class="py-4 justify-center"
+          :loading-endpoints="loadingEndpoints"
+          :camp="camp"
+        />
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
+import ScheduleEntryFilters from '../../program/ScheduleEntryFilters.vue'
+
 export default {
   name: 'ProgramConfig',
+  components: { ScheduleEntryFilters },
   props: {
     value: { type: Object, required: true },
     camp: { type: Object, required: true },
   },
+  data() {
+    return {
+      openFilter: false,
+      filter: this.value.filter || {
+        category: [],
+        responsible: [],
+        progressLabel: [],
+      },
+      loadingEndpoints: {
+        categories: true,
+        periods: true,
+        campCollaborations: true,
+        progressLabels: true,
+      },
+    }
+  },
   computed: {
     options: {
       get() {
@@ -39,6 +84,15 @@ export default {
       }))
     },
   },
+  watch: {
+    'options.filter': {
+      handler(newVal, oldVal) {
+        console.log('helloo?', oldVal, newVal)
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) this.$emit('input')
+      },
+      deep: true,
+    },
+  },
   defaultOptions() {
     return {
       periods: [],
@@ -56,6 +110,34 @@ export default {
       return knownPeriods.includes(period)
     })
     if (typeof config.options.dayOverview !== 'boolean') config.options.dayOverview = true
+    if (!config.options.filter) {
+      config.options.filter = {
+        category: [],
+        responsible: [],
+        progressLabel: [],
+      }
+    }
+    if (!config.options.filter.category) config.options.filter.category = []
+    const knownCategories = camp.categories().items.map((c) => c._meta.self)
+    config.options.filter.category = config.options.filter.category.filter((category) => {
+      return knownCategories.includes(category)
+    })
+    if (!config.options.filter.responsible) config.options.filter.responsible = []
+    const knownCampCollaborations = camp
+      .campCollaborations()
+      .items.map((c) => c._meta.self)
+    config.options.filter.responsible = config.options.filter.responsible.filter(
+      (responsible) => {
+        return knownCampCollaborations.includes(responsible)
+      }
+    )
+    if (!config.options.filter.progressLabel) config.options.filter.progressLabel = []
+    const knownProgressLabels = camp.progressLabels().items.map((l) => l._meta.self)
+    config.options.filter.progressLabel = config.options.filter.progressLabel.filter(
+      (progressLabel) => {
+        return knownProgressLabels.includes(progressLabel)
+      }
+    )
     return config
   },
 }

frontend/src/locales/de.json

@@ -309,6 +309,7 @@
         },
         "programConfig": {
           "dayOverview": "Tagesübersicht",
+          "filterActivities": "Aktivitäten filtern",
           "periods": "Lagerabschnitt(e)"
         },
         "storyConfig": {