Merge branch '21-allow-manual-passing-of-absence-reasons-to-chip-select' into 'master'

Resolve "Allow manual passing of absence reasons to chip select"

Closes #21

See merge request AlekSIS/onboarding/AlekSIS-App-Kolego!33

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

@@ -6,11 +6,15 @@ export default {
   data() {
     return {
       absenceReasons: [],
-      innerValue: undefined,
     };
   },
   apollo: {
-    absenceReasons: gqlAbsenceReasons,
+    absenceReasons: {
+      query: gqlAbsenceReasons,
+      skip() {
+        return this.customAbsenceReasons > 0;
+      },
+    },
   },
   props: {
     allowEmpty: {
@@ -22,6 +26,20 @@ export default {
       required: false,
       default: "present",
     },
+    customAbsenceReasons: {
+      type: Array,
+      required: false,
+      default: [],
+    },
+  },
+  computed: {
+    innerAbsenceReasons() {
+      if (this.customAbsenceReasons.length > 0) {
+        return this.customAbsenceReasons;
+      } else {
+        return this.absenceReasons;
+      }
+    },
   },
   methods: {
     emit(value) {
@@ -51,7 +69,7 @@ export default {
         {{ $t("kolego.absence_reason.present") }}
       </v-btn>
       <v-btn
-        v-for="absenceReason in absenceReasons"
+        v-for="absenceReason in innerAbsenceReasons"
         :key="'absence-reason-' + absenceReason.id"
         :color="absenceReason.colour"
         outlined

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

@@ -17,12 +17,10 @@ export default {
     absenceReasons: {
       query: gqlAbsenceReasons,
       result({ data }) {
-        if (!this.innerValue) {
-          const defaultReason = data.absenceReasons.find((ar) => ar.default);
-          if (defaultReason) {
-            this.updateInnerValue(defaultReason.id);
-          }
-        }
+        this.setDefaultReason(data.absenceReasons);
+      },
+      skip() {
+        return this.customAbsenceReasonsExists;
       },
     },
   },
@@ -46,6 +44,11 @@ export default {
       required: false,
       default: false,
     },
+    customAbsenceReasons: {
+      type: Array,
+      required: false,
+      default: [],
+    },
   },
   computed: {
     /**
@@ -59,24 +62,51 @@ export default {
      */
     showChips() {
       return (
-        !this.$apollo.queries.absenceReasons.loading ||
-        (this.allowEmpty && this.value === this.emptyValue)
+        ((!this.$apollo.queries.absenceReasons.loading &&
+          this.absenceReasons.length) ||
+          this.customAbsenceReasonsExists ||
+          (this.allowEmpty && this.value === this.emptyValue)) &&
+        this.innerValue
       );
     },
+    customAbsenceReasonsExists() {
+      return this.customAbsenceReasons.length > 0;
+    },
+    innerAbsenceReasons() {
+      if (this.customAbsenceReasonsExists) {
+        return this.customAbsenceReasons;
+      } else {
+        return this.absenceReasons;
+      }
+    },
   },
   mounted() {
     this.innerValue = this.value;
+    if (this.customAbsenceReasons) {
+      this.setDefaultReason(this.customAbsenceReasons);
+    }
   },
   watch: {
     value(newValue) {
       this.innerValue = newValue;
     },
+    customAbsenceReasons(newValue) {
+      this.setDefaultReason(newValue);
+    },
   },
   methods: {
     updateInnerValue($event) {
       this.innerValue = $event;
       this.$emit("input", $event);
     },
+    setDefaultReason(absenceReasons) {
+      if (!this.innerValue) {
+        const defaultReason = absenceReasons.find((ar) => ar.default);
+        if (defaultReason) {
+          this.updateInnerValue(defaultReason.id);
+        }
+      }
+    },
   },
 };
 </script>
@@ -103,7 +133,7 @@ export default {
       </v-avatar>
     </v-chip>
     <absence-reason-chip
-      v-for="absenceReason in absenceReasons"
+      v-for="absenceReason in innerAbsenceReasons"
       :key="absenceReason.id"
       :absence-reason="absenceReason"
       filter