Add group-selection to the coursebook-print-dialog

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookControls.vue

@@ -72,6 +72,8 @@ import CoursebookPrintDialog from "./CoursebookPrintDialog.vue";
       <coursebook-print-dialog
         v-if="pageType === 'documentations'"
         :loading="selectLoading"
+        :available-groups="groups"
+        :value="currentGroups"
       />
     </div>
   </div>
@@ -135,6 +137,13 @@ export default {
           o.id === this.value.objId,
       );
     },
+    currentGroups() {
+      return this.groups.filter(
+        (o) =>
+          TYPENAMES_TO_TYPES[o.__typename] === this.value.objType &&
+          o.id === this.value.objId,
+      );
+    },
     pageTypeButtonText() {
       if (this.value.pageType === "documentations") {
         return this.$t("alsijil.coursebook.filter.page_type.absences");

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookPrintDialog.vue

@@ -19,6 +19,19 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
     <template #title>
       {{ $t("alsijil.coursebook.print_title") }}
     </template>
+    <template #content>
+      <v-autocomplete
+        :items="availableGroups"
+        item-text="name"
+        item-value="id"
+        :value="value"
+        @input="setGroupSelection"
+        @click:clear="setGroupSelection"
+        multiple
+        chips
+        deletable-chips
+      />
+    </template>
   </mobile-fullscreen-dialog>
 </template>
 
@@ -29,6 +42,21 @@ import SecondaryActionButton from "aleksis.core/components/generic/buttons/Secon
 export default {
   name: "CoursebookPrintDialog",
   props: {
+    /**
+     * Groups available for selection
+     */
+    availableGroups: {
+      type: Array,
+      required: true,
+    },
+    /**
+     * Initially selected groups
+     */
+    value: {
+      type: Array,
+      required: false,
+      default: [],
+    },
     /**
      * Loading state
      */
@@ -38,10 +66,28 @@ export default {
       default: false,
     },
   },
+  emits: ["input"],
   data() {
     return {
       dialog: false,
+      currentGroupSelection: [],
     };
   },
+  computed: {
+    selectedGroups() {
+      if (this.currentGroupSelection.length == 0) {
+        return this.value.map((group) => group.id);
+      } else {
+        return this.currentGroupSelection;
+      }
+    },
+  },
+  methods: {
+    setGroupSelection(groups) {
+      this.$emit("input", groups);
+      this.currentGroupSelection=groups;
+      console.log(groups);
+    },
+  },
 };
 </script>