fill out inspection and inspection plan

src/components/admin/unit/inspection/FileInput.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>{{ inspectionPoint.title }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="inspectionPoint.description" class="pb-2">Beschreibung: {{ inspectionPoint.description }}</p>
+      <hr v-if="inspectionPoint.description" />
+      <label :for="inspectionPoint.id">{{ inspectionPoint.others == "pdf" ? "PDF" : "Bild" }}-Datei</label>
+      <button
+        :primary="value != ''"
+        :primary-outline="value == ''"
+        type="button"
+        class="flex flex-row gap-2"
+        @click="($refs.fileInput as HTMLInputElement).click()"
+      >
+        <span v-if="value == ''">Datei wählen</span><span v-else>Datei gewählt</span>
+        <CheckIcon v-if="value != ''" class="h-5 w-5" />
+      </button>
+      <input
+        ref="fileInput"
+        :id="inspectionPoint.id"
+        :name="inspectionPoint.id"
+        type="file"
+        :accept="inspectionPoint.others == 'pdf' ? 'application/pdf' : 'image/*'"
+        hidden
+        @change="selectFile"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+import { CheckIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: {
+    "update:model-value": (p: string) => {
+      return true;
+    },
+    "update:upload": (p: File | null) => {
+      return true;
+    },
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string | number) {
+        this.$emit("update:model-value", val.toString());
+      },
+    },
+  },
+  methods: {
+    selectFile(e: Event) {
+      this.$emit("update:upload", (e.target as HTMLInputElement).files?.[0] ?? null);
+      this.value = "set";
+    },
+  },
+});
+</script>