save inspectionPoints

This commit is contained in:
Julian Krauser 2025-07-09 16:01:15 +02:00
parent eb4d338583
commit 23bdde5fc2
13 changed files with 407 additions and 72 deletions

View file

@ -30,10 +30,17 @@
<VehicleSearchSelect v-else-if="active == 'vehicle'" title="Fahrzeug" useScanner v-model="related" />
<WearableSearchSelect v-else title="Kleidung" useScanner v-model="related" />
<InspectionPlanSearchSelect title="Prüfplan" :type="active" v-model="inspectionPlan" />
<InspectionPlanSearchSelectWithRelated
title="Prüfplan"
:relatedType="active"
:relatedTypeId="relatedType"
v-model="inspectionPlan"
/>
<div>
<label for="nextInspection">Nächste Prüfung (optional) {{ " - Intervall: xx-x" }}</label>
<label for="nextInspection">
Nächste Prüfung (optional) - Intervall: {{ selectedInspectionPlan?.inspectionInterval }}
</label>
<input id="nextInspection" type="date" />
</div>
@ -64,10 +71,15 @@ import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import InspectionPlanSearchSelect from "@/components/search/InspectionPlanSearchSelect.vue";
import EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
import WearableSearchSelect from "@/components/search/WearableSearchSelect.vue";
import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
import InspectionPlanSearchSelectWithRelated from "@/components/search/InspectionPlanSearchSelectWithRelated.vue";
import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
import { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
import { useWearableStore } from "@/stores/admin/unit/wearable/wearable";
</script>
<script lang="ts">
@ -80,11 +92,20 @@ export default defineComponent({
relatedId: String,
inspectionPlanId: String,
},
watch: {
inspectionPlan() {
if (this.inspectionPlan != "") this.getInspectionPlanData();
},
related() {
this.getTypeIdToRelated();
},
},
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: null as any,
related: "",
relatedType: "",
inspectionPlan: "",
active: "equipment" as "equipment" | "vehicle" | "wearable",
tabs: [
@ -101,6 +122,7 @@ export default defineComponent({
title: "Kleidung",
},
] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
selectedInspectionPlan: undefined as undefined | InspectionPlanViewModel,
};
},
mounted() {
@ -110,5 +132,49 @@ export default defineComponent({
this.related = this.relatedId ?? "";
}
},
methods: {
...mapActions(useInspectionPlanStore, ["fetchInspectionPlanById"]),
...mapActions(useEquipmentStore, ["fetchEquipmentById"]),
...mapActions(useVehicleStore, ["fetchVehicleById"]),
...mapActions(useWearableStore, ["fetchWearableById"]),
getInspectionPlanData() {
this.fetchInspectionPlanById(this.inspectionPlan)
.then((res) => {
this.selectedInspectionPlan = res.data;
})
.catch((err) => {});
},
getTypeIdToRelated() {
if (this.related == "") {
this.relatedType = "";
return;
}
if (this.active == "equipment") {
this.fetchEquipmentById(this.related)
.then((res) => {
this.relatedType = res.data.equipmentTypeId;
})
.catch(() => {
this.relatedType = "";
});
} else if (this.active == "vehicle") {
this.fetchVehicleById(this.related)
.then((res) => {
this.relatedType = res.data.vehicleTypeId;
})
.catch(() => {
this.relatedType = "";
});
} else if (this.active == "wearable") {
this.fetchWearableById(this.related)
.then((res) => {
this.relatedType = res.data.wearableTypeId;
})
.catch(() => {
this.relatedType = "";
});
}
},
},
});
</script>

View file

@ -3,34 +3,35 @@
<RouterLink to="./" class="text-primary">zurück zur Übersicht</RouterLink>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<div
v-else-if="inspectionPlan != null"
class="flex flex-col grow gap-4 py-2 w-full max-w-xl mx-auto overflow-hidden"
>
<div v-else-if="localPoints != null" class="flex flex-col grow gap-4 py-2 w-full max-w-xl mx-auto overflow-hidden">
<p class="mx-auto">Prüfplan-Punkte bearbeiten</p>
<div class="flex flex-row justify-center gap-4">
<div
class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
@click="addItemToArray(InspectionPointEnum.oknok)"
title="OK Nicht OK"
>
<ClipboardDocumentCheckIcon class="w-7 h-7" />
</div>
<div
class="p-3 border border-gray-300 rounded-md shadow cursor-pointer pointer-events-none opacity-50"
class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
@click="addItemToArray(InspectionPointEnum.file)"
title="Datei-Upload"
>
<DocumentIcon class="w-7 h-7" />
</div>
<div
class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
@click="addItemToArray(InspectionPointEnum.number)"
title="Zahl-Eingabe"
>
<CalculatorIcon class="w-7 h-7" />
</div>
<div
class="p-3 border border-gray-300 rounded-md shadow cursor-pointer"
@click="addItemToArray(InspectionPointEnum.text)"
title="Text-Eingabe"
>
<BoldIcon class="w-7 h-7" />
</div>
@ -42,7 +43,7 @@
:key="index"
:model-value="point"
:index="index"
:total-count="inspectionPoints.length"
:total-count="localPoints.length"
@update:model-value="updateItemFromArray"
@up="changeSort('up', point.id, index)"
@down="changeSort('down', point.id, index)"
@ -54,7 +55,13 @@
<button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
abbrechen
</button>
<button primary type="submit" class="w-fit!" :disabled="status == 'loading'" @click="triggerUpdate">
<button
primary
type="submit"
class="w-fit!"
:disabled="status == 'loading' || canSaveOrReset"
@click="triggerUpdate"
>
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
@ -68,13 +75,7 @@
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
import type {
CreateInspectionPlanViewModel,
InspectionPlanViewModel,
InspectionPointViewModel,
UpdateInspectionPlanViewModel,
} from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
import type { InspectionPointViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
@ -84,6 +85,7 @@ import { BoldIcon, CalculatorIcon, ClipboardDocumentCheckIcon, DocumentIcon } fr
import { InspectionPointEnum } from "@/enums/inspectionEnum";
import { v4 as uuid } from "uuid";
import InspectionPointListItem from "@/components/admin/unit/inspectionPlan/InspectionPointListItem.vue";
import { useInspectionPointStore } from "@/stores/admin/unit/inspectionPlan/inspectionPoint";
</script>
<script lang="ts">
@ -92,33 +94,28 @@ export default defineComponent({
inspectionPlanId: String,
},
watch: {
loadingActive() {
if (this.loading == "loading") {
this.loading = this.loadingActive;
}
if (this.loadingActive == "fetched") this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
loading() {
if (this.loading == "fetched") this.localPoints = cloneDeep(this.inspectionPoints);
},
},
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
inspectionPlan: null as null | InspectionPlanViewModel,
timeout: null as any,
inspectionPoints: [] as Array<InspectionPointViewModel>,
localPoints: [] as Array<InspectionPointViewModel>,
};
},
computed: {
canSaveOrReset(): boolean {
return isEqual(this.activeInspectionPlanObj, this.inspectionPlan);
return isEqual(this.inspectionPoints, this.localPoints);
},
...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
...mapState(useInspectionPointStore, ["inspectionPoints", "loading"]),
sortedPoints() {
return this.inspectionPoints.slice().sort((a, b) => a.sort - b.sort);
return this.localPoints.slice().sort((a, b) => a.sort - b.sort);
},
},
mounted() {
this.fetchItem();
this.fetchInspectionPoints();
},
beforeUnmount() {
try {
@ -126,63 +123,51 @@ export default defineComponent({
} catch (error) {}
},
methods: {
...mapActions(useInspectionPlanStore, ["updateActiveInspectionPlan", "fetchInspectionPlanByActiveId"]),
...mapActions(useInspectionPointStore, ["fetchInspectionPoints", "updateActiveInspectionPoints"]),
resetForm() {
this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
},
fetchItem() {
this.fetchInspectionPlanByActiveId();
this.localPoints = cloneDeep(this.inspectionPoints);
},
addItemToArray(type: InspectionPointEnum) {
this.inspectionPoints.push({
this.localPoints.push({
id: uuid(),
title: "",
description: "",
type,
sort: this.inspectionPoints.length,
sort: this.localPoints.length,
});
},
updateItemFromArray(pkg: InspectionPointViewModel) {
let index = this.inspectionPoints.findIndex((ip) => ip.id == pkg.id);
this.inspectionPoints[index] = pkg;
let index = this.localPoints.findIndex((ip) => ip.id == pkg.id);
this.localPoints[index] = pkg;
},
removeItemFromArray(id: string) {
let index = this.inspectionPoints.findIndex((ip) => ip.id == id);
let index = this.localPoints.findIndex((ip) => ip.id == id);
if (index !== -1) {
this.inspectionPoints.splice(index, 1);
this.localPoints.splice(index, 1);
this.normalizeSort();
}
},
changeSort(dir: "up" | "down", thisId: string, index: number) {
let affected = this.sortedPoints[dir == "up" ? index - 1 : index + 1];
if (affected) {
this.inspectionPoints.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
this.inspectionPoints.find((a) => a.id == affected.id)!.sort =
dir == "up" ? affected.sort + 1 : affected.sort - 1;
this.localPoints.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
this.localPoints.find((a) => a.id == affected.id)!.sort = dir == "up" ? affected.sort + 1 : affected.sort - 1;
}
this.normalizeSort();
},
normalizeSort() {
let rightSort = this.sortedPoints.every((val, index) => val.sort == index);
if (!rightSort) {
this.inspectionPoints.forEach((e, index) => {
this.localPoints.forEach((e, index) => {
e.sort = this.sortedPoints.findIndex((sp) => sp.id == e.id);
});
}
},
triggerUpdate(e: any) {
if (this.inspectionPlan == null) return;
let formData = e.target.elements;
let updateInspectionPlan: UpdateInspectionPlanViewModel = {
id: this.inspectionPlan.id,
title: formData.name.value,
inspectionInterval: formData.interval.value,
remindTime: formData.remind.value,
};
if (this.localPoints.length == 0) return;
this.status = "loading";
this.updateActiveInspectionPlan(updateInspectionPlan)
this.updateActiveInspectionPoints(this.localPoints)
.then((res) => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {