Add active subjects as suggestions when creating a time entry.

src/components/SelectField.vue

@@ -49,6 +49,7 @@ function onInputUpdate(event: Event) {
                 'focus:outline-none focus:ring-2 ring-blue-700',
             ]"
             title="Auswahl löschen"
+            type="button"
             @click="emit('update:value', '')"
         >
             <IconCross :size="16" />

src/components/SelectSubjectField.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { computed, onMounted } from "vue";
+import SelectField, { Option } from "./SelectField.vue";
+import SubjectTag from "../blocks/SubjectTag.vue";
+import { getSubjects, subjects } from "../utils/subjects";
+import { Subject } from "../@types/models";
+
+const props = defineProps<{
+    value: string;
+    name: string;
+    label: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "update:value", value: string): void;
+}>();
+
+onMounted(() => {
+    getSubjects();
+});
+
+const subjectOptions = computed(() => {
+    return subjects.value.map((subject): Option => ({ label: subject.name, value: subject.name }));
+});
+
+const activeSubjects = computed(() => {
+    return subjects.value.filter((subject) => subject.isActive);
+});
+
+function selectSubject(subject: Subject) {
+    emit("update:value", subject.name);
+}
+</script>
+
+<template>
+    <div class="flex flex-wrap gap-4 mb-2">
+        <SubjectTag
+            v-for="subject in activeSubjects"
+            class="cursor-pointer"
+            :subject="subject"
+            @click="selectSubject(subject)"
+        />
+    </div>
+    <SelectField
+        :value="value"
+        @update:value="emit('update:value', $event)"
+        :options="subjectOptions"
+        name="subject"
+        label="Fach auswählen"
+        clearable
+    />
+</template>

src/modals/EditTimeEntryModal.vue

@@ -6,7 +6,7 @@ import Modal from "../components/Modal.vue";
 import FormGroup from "../components/FormGroup.vue";
 import InputField from "../components/InputField.vue";
 import DatePicker from "../components/DatePicker.vue";
-import SelectField, { Option } from "../components/SelectField.vue";
+import SelectSubjectField from "../components/SelectSubjectField.vue";
 import TimeField from "../components/TimeField.vue";
 import { getSubject, getSubjects, subjects } from "../utils/subjects";
 import { timeEntries } from "../utils/timeEntries";
@@ -98,14 +98,6 @@ watch([date, start, end], () => {
     dateEnd.value = new CustomDate(dateObj);
 });
 
-onMounted(() => {
-    getSubjects();
-});
-
-const subjectOptions = computed(() => {
-    return subjects.value.map((subject): Option => ({ label: subject.name, value: subject.name }));
-});
-
 const newEntry = computed(() => !timeEntry.value);
 
 async function submitTimeEntry() {
@@ -162,13 +154,7 @@ async function submitTimeEntry() {
             <InputField v-model:value="description" name="description" label="Beschreibung" autofocus />
         </FormGroup>
         <FormGroup label="Fach" name="subject" :errors="validationErrors">
-            <SelectField
-                v-model:value="subject"
-                :options="subjectOptions"
-                name="subject"
-                label="Fach auswählen"
-                clearable
-            />
+            <SelectSubjectField v-model:value="subject" name="subject" label="Fach" />
         </FormGroup>
     </Modal>
 </template>