80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<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 && editable }"
|
|
:disabled="!editable"
|
|
/>
|
|
</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: "",
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
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>
|