diff --git a/aleksis/apps/kolego/frontend/components/AbsenceReasonChip.vue b/aleksis/apps/kolego/frontend/components/AbsenceReasonChip.vue index bcfda0556c059b9981625e10e871583db246813b..cf56cd91c43ff2ec1abcd446c266044f799e1a5f 100644 --- a/aleksis/apps/kolego/frontend/components/AbsenceReasonChip.vue +++ b/aleksis/apps/kolego/frontend/components/AbsenceReasonChip.vue @@ -24,10 +24,15 @@ export default { </script> <template> - <v-chip :color="absenceReason.colour"> + <v-chip + :color="absenceReason.colour" + :value="absenceReason.id" + v-bind="$attrs" + v-on="$listeners" + > <v-avatar left v-if="absenceReason.default"> <v-tooltip bottom> - <template v-slot:activator="{ on, attrs }"> + <template #activator="{ on, attrs }"> <v-icon v-bind="attrs" v-on="on" small> mdi-flare </v-icon> </template> <span>{{ $t("kolego.absence_reason.default") }}</span> diff --git a/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue b/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue new file mode 100644 index 0000000000000000000000000000000000000000..1f64054af2041213c28eeaa6e7a592786c62f857 --- /dev/null +++ b/aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue @@ -0,0 +1,85 @@ +<script setup> +import AbsenceReasonChip from "./AbsenceReasonChip.vue"; +</script> +<script> +import { gqlAbsenceReasons } from "./helper.graphql"; + +export default { + name: "AbsenceReasonGroupSelect", + extends: "v-chip-group", + data() { + return { + absenceReasons: [], + }; + }, + apollo: { + absenceReasons: gqlAbsenceReasons, + }, + props: { + allowEmpty: { + type: Boolean, + default: false, + }, + value: { + type: [String, Number], + required: true, + }, + emptyValue: { + type: [String, Number], + required: false, + default: "present", + }, + }, + computed: { + /** + * Determines whether the chips can be shown. + * + * Due to the eagerness of vuetify, we can only mount the chip-group, after the selected item has been loaded. + * Otherwise, vuetify would set the value to the first existing one. However, if it's possible to not be + * absent, we can show the chip-group directly, as the present chip is hardcoded. + * + * @return {boolean} Whether to mount the chip-group + */ + showChips() { + return ( + !this.$apollo.queries.absenceReasons.loading || + (this.allowEmpty && this.value === this.emptyValue) + ); + }, + }, +}; +</script> + +<template> + <v-chip-group + column + :value="value" + @change="$emit('input', $event)" + mandatory + v-if="showChips" + > + <v-chip + v-if="allowEmpty" + color="success" + :value="emptyValue" + filter + outlined + > + {{ $t("kolego.absence_reason.present") }} + </v-chip> + <absence-reason-chip + v-for="absenceReason in absenceReasons" + :key="absenceReason.id" + :absence-reason="absenceReason" + filter + outlined + /> + </v-chip-group> + <v-skeleton-loader v-else type="chip@4" class="d-flex flex-wrap gap" /> +</template> + +<style scoped> +.gap { + gap: 0.5em; +} +</style> diff --git a/aleksis/apps/kolego/frontend/components/helper.graphql b/aleksis/apps/kolego/frontend/components/helper.graphql index 3d46b24fef7f937d3db7ce2d50a55dfa3ade5978..f5b0bea84a06a6a1eea522d278c390f3ca8c6d92 100644 --- a/aleksis/apps/kolego/frontend/components/helper.graphql +++ b/aleksis/apps/kolego/frontend/components/helper.graphql @@ -3,6 +3,8 @@ query gqlAbsenceReasons { id shortName name + default + colour } } diff --git a/aleksis/apps/kolego/frontend/messages/de.json b/aleksis/apps/kolego/frontend/messages/de.json index 9edbf5f80740ebe5eaa89cd43ecef973b10a568f..636ce7dbaa960bea65d215440a048dc4a1f2e4b7 100644 --- a/aleksis/apps/kolego/frontend/messages/de.json +++ b/aleksis/apps/kolego/frontend/messages/de.json @@ -13,7 +13,8 @@ "title_plural": "Abwesenheitsgründe", "create": "Abwesenheitsgrund erstellen", "short_name": "Kurzname", - "name": "Name" + "name": "Name", + "present": "Anwesend" } } } diff --git a/aleksis/apps/kolego/frontend/messages/en.json b/aleksis/apps/kolego/frontend/messages/en.json index bf07fb2bc0e3ae9dc6c35d5a84d830d6cbee7b64..acc168b7b6f115d634742ea12eb38ff5ac2167de 100644 --- a/aleksis/apps/kolego/frontend/messages/en.json +++ b/aleksis/apps/kolego/frontend/messages/en.json @@ -16,7 +16,8 @@ "name": "Name", "colour": "Colour", "default": "Default Absence Reason", - "default_helptext": "Will disable previous default when enabled" + "default_helptext": "Will disable previous default when enabled", + "present": "Present" } } }