<script setup> import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue"; import SecondaryActionButton from "aleksis.core/components/generic/buttons/SecondaryActionButton.vue"; </script> <template> <mobile-fullscreen-dialog v-model="dialog" > <template #activator> <secondary-action-button i18n-key="alsijil.coursebook.print" icon-text="$print" :loading="loading" @click="dialog=true" :disabled="dialog" /> </template> <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> <script> /** * This component provides a dialog for configuring the coursebook-printout */ 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 */ loading: { type: Boolean, required: false, 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>