inspection plan execute

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

@@ -0,0 +1,63 @@
+<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" />
+      <RadioGroup v-model="value" :name="inspectionPoint.id" class="flex flex-row gap-2">
+        <RadioGroupOption
+          v-for="option in options"
+          :key="option.key"
+          button
+          :primary="value == option.key"
+          :primary-outline="value != option.key"
+          :value="option.key"
+        >
+          {{ option.title }}
+        </RadioGroupOption>
+      </RadioGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
+import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspection.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    inspectionPoint: {
+      type: Object as PropType<InspectionPointViewModel>,
+      required: true,
+    },
+    modelValue: {
+      type: String as PropType<"true" | "false">,
+      default: "false",
+    },
+  },
+  emits: ["update:model-value"],
+  data() {
+    return {
+      options: [
+        { key: "true", title: "OK" },
+        { key: "false", title: "nicht OK" },
+      ],
+    };
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(val: string) {
+        this.$emit("update:model-value", val);
+      },
+    },
+  },
+});
+</script>