91 lines
2.7 KiB
Vue
91 lines
2.7 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>
|
|
<DocumentCheckIcon class="w-5 h-5 cursor-pointer" @click="openDetailView" />
|
|
</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()"
|
|
:disabled="!editable"
|
|
>
|
|
<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 { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
|
|
import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
|
|
import { CheckIcon, DocumentCheckIcon } from "@heroicons/vue/24/outline";
|
|
import { mapActions } from "pinia";
|
|
import { useModalStore } from "@/stores/modal";
|
|
</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": (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: {
|
|
...mapActions(useModalStore, ["openModal"]),
|
|
selectFile(e: Event) {
|
|
this.$emit("update:upload", (e.target as HTMLInputElement).files?.[0] ?? null);
|
|
this.value = "set";
|
|
},
|
|
openDetailView() {
|
|
this.openModal(
|
|
markRaw(defineAsyncComponent(() => import("@/components/admin/unit/inspection/UploadedFileViewModal.vue"))),
|
|
this.inspectionPoint
|
|
);
|
|
},
|
|
},
|
|
});
|
|
</script>
|