Create AbsenceReasonGroupSelect to generically select absence reasons

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>

aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue

+<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>

aleksis/apps/kolego/frontend/components/helper.graphql

@@ -3,6 +3,8 @@ query gqlAbsenceReasons {
     id
     shortName
     name
+    default
+    colour
   }
 }
 

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"
     }
   }
 }

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"
     }
   }
 }