From 7cda30bf50cb7c2b1810da2d44bcefed6b07368a Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 10 May 2024 18:18:51 +0200
Subject: [PATCH] Create AbsenceReasonGroupSelect to generically select absence
 reasons

---
 .../frontend/components/AbsenceReasonChip.vue |  9 +-
 .../components/AbsenceReasonGroupSelect.vue   | 85 +++++++++++++++++++
 .../kolego/frontend/components/helper.graphql |  2 +
 aleksis/apps/kolego/frontend/messages/de.json |  3 +-
 aleksis/apps/kolego/frontend/messages/en.json |  3 +-
 5 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue

diff --git a/aleksis/apps/kolego/frontend/components/AbsenceReasonChip.vue b/aleksis/apps/kolego/frontend/components/AbsenceReasonChip.vue
index bcfda05..cf56cd9 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 0000000..1f64054
--- /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 3d46b24..f5b0bea 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 9edbf5f..636ce7d 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 bf07fb2..acc168b 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"
     }
   }
 }
-- 
GitLab