fill out inspection and inspection plan
This commit is contained in:
parent
23bdde5fc2
commit
1409cf8045
12 changed files with 374 additions and 77 deletions
76
src/components/admin/unit/inspection/FileInput.vue
Normal file
76
src/components/admin/unit/inspection/FileInput.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="relative w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Prüfung abschließen</p>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="flex flex-row text-sm">
|
||||
<InformationCircleIcon class="text-gray-500 h-5 w-5" /> Nach abschluss der Prüfung können keine Änderung mehr an
|
||||
dieser vorgenommen werden. <br />
|
||||
Es wird ein PDF ausgedruckt und ist dann zu dieser Prüfung verfügbar.
|
||||
</p>
|
||||
<br />
|
||||
<button primary>Prüfung abschließen</button>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
75
src/components/admin/unit/inspection/NumberInput.vue
Normal file
75
src/components/admin/unit/inspection/NumberInput.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -36,8 +36,8 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: String as PropType<"true" | "false">,
|
||||
default: "false",
|
||||
type: String as PropType<"true" | "false" | "">,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
emits: ["update:model-value"],
|
||||
|
|
@ -59,5 +59,8 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.value == "") this.value = "false";
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,14 @@
|
|||
<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.type == "number" ? "Zahl" : "Freitext" }}</label>
|
||||
<input
|
||||
v-if="inspectionPoint.type == 'number'"
|
||||
<label :for="inspectionPoint.id">Freitext</label>
|
||||
<textarea
|
||||
:id="inspectionPoint.id"
|
||||
:name="inspectionPoint.id"
|
||||
type="number"
|
||||
required
|
||||
class="h-18"
|
||||
:class="{ 'ring-red-500! ring-1!': value == '' }"
|
||||
v-model="value"
|
||||
:min="inspectionPoint.min"
|
||||
:max="inspectionPoint.max"
|
||||
/>
|
||||
<textarea v-else :id="inspectionPoint.id" :name="inspectionPoint.id" required class="h-18" v-model="value" />
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<BoldIcon v-else-if="modelValue.type == InspectionPointEnum.text" class="w-6 h-6" />
|
||||
<DocumentIcon v-else-if="modelValue.type == InspectionPointEnum.file" class="w-6 h-6" />
|
||||
|
||||
<input type="text" placeholder="Titel" class="grow !w-fit" v-model="title" />
|
||||
<input type="text" placeholder="Titel" class="grow !w-fit" v-model="title" required />
|
||||
|
||||
<div class="flex flex-col">
|
||||
<ChevronUpIcon v-if="index != 0" class="text-white w-4 h-4 stroke-2 cursor-pointer" @click="$emit('up')" />
|
||||
|
|
@ -26,13 +26,17 @@
|
|||
</div>
|
||||
<div v-if="modelValue.type == InspectionPointEnum.number">
|
||||
<label for="max">Maximal</label>
|
||||
<input type="number" v-model="max" min="0" />
|
||||
<input type="number" v-model="max" :min="Number(min ?? 0) + 1" />
|
||||
</div>
|
||||
<div v-if="modelValue.type == InspectionPointEnum.file">
|
||||
<p>Dateiart</p>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button :primary="others == 'img'" :primary-outline="others != 'img'" @click="others = 'img'">Bild</button>
|
||||
<button :primary="others == 'pdf'" :primary-outline="others != 'pdf'" @click="others = 'pdf'">PDF</button>
|
||||
<button :primary="others == 'img'" :primary-outline="others != 'img'" type="button" @click="others = 'img'">
|
||||
Bild
|
||||
</button>
|
||||
<button :primary="others == 'pdf'" :primary-outline="others != 'pdf'" type="button" @click="others = 'pdf'">
|
||||
PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,7 +91,7 @@ export default defineComponent({
|
|||
return this.modelValue.min;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, min: val == "" ? null : val });
|
||||
this.$emit("update:model-value", { ...this.modelValue, min: String(val) == "" ? null : String(val) });
|
||||
},
|
||||
},
|
||||
max: {
|
||||
|
|
@ -95,7 +99,7 @@ export default defineComponent({
|
|||
return this.modelValue.max;
|
||||
},
|
||||
set(val: string) {
|
||||
this.$emit("update:model-value", { ...this.modelValue, max: val == "" ? null : val });
|
||||
this.$emit("update:model-value", { ...this.modelValue, max: String(val) == "" ? null : String(val) });
|
||||
},
|
||||
},
|
||||
others: {
|
||||
|
|
@ -107,5 +111,10 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.modelValue.type == InspectionPointEnum.file && !this.others) {
|
||||
this.others = "img";
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue