Use form rules from Core for AbsenceCreationForm

aleksis/apps/alsijil/frontend/components/coursebook/absences/AbsenceCreationForm.vue

@@ -12,7 +12,11 @@
             multiple
             chips
             deletable-chips
-            :rules="rules"
+            :rules="
+              $rules().build([
+                (value) => value.length > 0 || $t('forms.errors.required'),
+              ])
+            "
             :value="persons"
             :loading="$apollo.queries.allPersons.loading"
             @input="$emit('persons', $event)"
@@ -25,7 +29,7 @@
             <date-field
               :label="$t('forms.labels.start')"
               :max="endDate"
-              :rules="rules"
+              :rules="$rules().required.build()"
               :value="startDate"
               @input="$emit('start-date', $event)"
             />
@@ -36,7 +40,7 @@
             <date-field
               :label="$t('forms.labels.end')"
               :min="startDate"
-              :rules="rules"
+              :rules="$rules().required.build()"
               :value="endDate"
               @input="$emit('end-date', $event)"
             />
@@ -53,7 +57,7 @@
       <v-row>
         <div aria-required="true">
           <absence-reason-group-select
-            :rules="rules"
+            :rules="$rules().required.build()"
             :value="absenceReason"
             @input="$emit('absence-reason', $event)"
           />
@@ -67,6 +71,7 @@
 import AbsenceReasonGroupSelect from "aleksis.apps.kolego/components/AbsenceReasonGroupSelect.vue";
 import DateField from "aleksis.core/components/generic/forms/DateField.vue";
 import { persons } from "./absenceCreation.graphql";
+import formRulesMixin from "aleksis.core/mixins/formRulesMixin.js";
 
 export default {
   name: "AbsenceCreationForm",
@@ -74,6 +79,7 @@ export default {
     AbsenceReasonGroupSelect,
     DateField,
   },
+  mixins: [formRulesMixin],
   emits: [
     "valid",
     "persons",
@@ -107,10 +113,5 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      rules: [(value) => value.length > 0],
-    };
-  },
 };
 </script>