fill out inspection and inspection plan

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

@@ -0,0 +1,75 @@
+<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">
+        Zahl <small>{{ restrictedRange }}</small>
+      </label>
+      <input
+        :id="inspectionPoint.id"
+        :name="inspectionPoint.id"
+        type="number"
+        v-model="value"
+        :min="inspectionPoint.min"
+        :max="inspectionPoint.max"
+        :class="{ 'ring-red-500! ring-1!': isInRange }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:model-value"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string | number) {
+        this.$emit("update:model-value", val.toString());
+      },
+    },
+    restrictedRange() {
+      let range = "";
+      if (this.inspectionPoint.min != null) range += `min. ${this.inspectionPoint.min}`;
+      if (this.inspectionPoint.max != null) range += ` bis max. ${this.inspectionPoint.max}`;
+      return range;
+    },
+    isInRange() {
+      if (this.inspectionPoint.min != null && this.inspectionPoint.max != null)
+        return Number(this.value) < this.inspectionPoint.min || this.inspectionPoint.max < Number(this.value);
+
+      if (this.inspectionPoint.min != null) return Number(this.value) < this.inspectionPoint.min;
+
+      if (this.inspectionPoint.max != null) return this.inspectionPoint.max < Number(this.value);
+
+      return false;
+    },
+  },
+  mounted() {
+    if (!this.value) {
+      this.value = String(this.inspectionPoint.min ?? 0);
+    }
+  },
+});
+</script>