extend inspection_plan by wearable and enable optional interval
This commit is contained in:
parent
91ad11e20c
commit
583233b95e
6 changed files with 74 additions and 35 deletions
|
@ -7,7 +7,12 @@
|
|||
<p>{{ inspectionPlan.title }} - {{ inspectionPlan.related.type }}</p>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p>Interval: {{ inspectionPlan.inspectionInterval }}</p>
|
||||
<p v-if="inspectionPlan.inspectionInterval">Prüfinterval: {{ inspectionPlan.inspectionInterval }}</p>
|
||||
<p v-if="inspectionPlan.remindTime">Erinnerung: {{ inspectionPlan.remindTime }}</p>
|
||||
<div v-if="inspectionPlan.inspectionPoints.length == 0" class="flex flex-row gap-2 items-center">
|
||||
<ExclamationTriangleIcon class="h-5 w-5 text-error" />
|
||||
<p>Prüfplan noch nicht fertig gestellt. Es fehlen Prüfpunkte!</p>
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
@ -17,6 +22,7 @@ import { defineComponent, type PropType } from "vue";
|
|||
import { mapState, mapActions } from "pinia";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspection/inspectionPlan.models";
|
||||
import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -52,6 +52,11 @@ export default defineComponent({
|
|||
showQRCode: false as boolean,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
linkToScan() {
|
||||
this.renderQRCode();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useScannerStore, ["inUse", "roomId", "results"]),
|
||||
linkToScan() {
|
||||
|
@ -59,6 +64,14 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.renderQRCode();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useScannerStore, ["startSession", "endSession", "removeElementFromResults"]),
|
||||
commit(c: string) {
|
||||
this.$emit("code", c);
|
||||
},
|
||||
renderQRCode() {
|
||||
QRCode.toDataURL(this.linkToScan, {
|
||||
width: 300,
|
||||
margin: 2,
|
||||
|
@ -71,12 +84,9 @@ export default defineComponent({
|
|||
.then((res) => {
|
||||
(this.$refs.qr as HTMLImageElement).src = res;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useScannerStore, ["startSession", "endSession", "removeElementFromResults"]),
|
||||
commit(c: string) {
|
||||
this.$emit("code", c);
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
@ -37,12 +37,21 @@
|
|||
v-model="inspectionPlan"
|
||||
/>
|
||||
|
||||
<div v-if="selectedInspectionPlan?.inspectionPoints.length == 0">
|
||||
Dieser Prüfplan ist noch nicht fertig gestellt!
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="nextInspection" class="flex flex-row justify-between">
|
||||
Nächste Prüfung (optional) - Intervall: {{ selectedInspectionPlan?.inspectionInterval ?? "xx" }}
|
||||
<label for="nextInspection" class="flex flex-row gap-2 justify-between">
|
||||
Nächste Prüfung
|
||||
<span v-if="selectedInspectionPlan?.inspectionInterval">
|
||||
- Intervall: {{ selectedInspectionPlan.inspectionInterval }}
|
||||
</span>
|
||||
<span v-else> (optional) </span>
|
||||
<div class="grow"></div>
|
||||
<InspectionTimeFormatExplainIcon />
|
||||
</label>
|
||||
<input id="nextInspection" type="date" />
|
||||
<input id="nextInspection" type="date" :required="selectedInspectionPlan?.inspectionInterval != undefined" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
|
@ -27,7 +27,8 @@
|
|||
</div>
|
||||
|
||||
<EquipmentTypeSearchSelect v-if="active == 'equipment'" title="Typ" v-model="selectedType" />
|
||||
<VehicleTypeSearchSelect v-else title="Typ" v-model="selectedType" />
|
||||
<VehicleTypeSearchSelect v-else-if="active == 'vehicle'" title="Typ" v-model="selectedType" />
|
||||
<WearableTypeSearchSelect v-else title="Typ" v-model="selectedType" />
|
||||
|
||||
<div>
|
||||
<label for="name">Bezeichnung</label>
|
||||
|
@ -35,28 +36,26 @@
|
|||
</div>
|
||||
<div>
|
||||
<label for="interval" class="flex flex-row justify-between">
|
||||
Intervall
|
||||
Prüfintervall (optional)
|
||||
<InspectionTimeFormatExplainIcon />
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="interval"
|
||||
placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
|
||||
required
|
||||
pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
|
||||
title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="remind" class="flex flex-row justify-between">
|
||||
Erinnerung vor Fälligkeit
|
||||
Erinnerung vor Fälligkeit (optional)
|
||||
<InspectionTimeFormatExplainIcon />
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="remind"
|
||||
placeholder="<zahl>-(d|m|y) oder DD/MM oder DD/*"
|
||||
required
|
||||
pattern="^\d+-(d|m|y)$|^\d{2}/\d{2}$|^\d{2}/\*$"
|
||||
title="Eingabe muss im Format <zahl>-(d|m|y), DD/MM oder DD/* sein"
|
||||
/>
|
||||
|
@ -95,6 +94,7 @@ import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipme
|
|||
import EquipmentTypeSearchSelect from "@/components/search/EquipmentTypeSearchSelect.vue";
|
||||
import VehicleTypeSearchSelect from "@/components/search/VehicleTypeSearchSelect.vue";
|
||||
import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";
|
||||
import WearableTypeSearchSelect from "@/components/search/WearableTypeSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -104,7 +104,7 @@ export default defineComponent({
|
|||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: null as any,
|
||||
selectedType: "" as string,
|
||||
active: "equipment" as "equipment" | "vehicle",
|
||||
active: "equipment" as "equipment" | "vehicle" | "wearable",
|
||||
tabs: [
|
||||
{
|
||||
key: "equipment",
|
||||
|
@ -114,7 +114,11 @@ export default defineComponent({
|
|||
key: "vehicle",
|
||||
title: "Fahrzeug",
|
||||
},
|
||||
] as Array<{ key: "equipment" | "vehicle"; title: string }>,
|
||||
{
|
||||
key: "wearable",
|
||||
title: "Kleidung",
|
||||
},
|
||||
] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -124,8 +128,8 @@ export default defineComponent({
|
|||
let query = this.$route.query;
|
||||
const queryType = Array.isArray(query.type) ? query.type[0] : query.type;
|
||||
const queryId = Array.isArray(query.id) ? query.id[0] : query.id;
|
||||
if (["vehicle", "equipment"].includes(queryType ?? "")) {
|
||||
this.active = queryType as "equipment" | "vehicle";
|
||||
if (["vehicle", "equipment", "wearable"].includes(queryType ?? "")) {
|
||||
this.active = queryType as "equipment" | "vehicle" | "wearable";
|
||||
this.selectedType = queryId as string;
|
||||
}
|
||||
},
|
||||
|
|
|
@ -10,19 +10,28 @@
|
|||
Intervall
|
||||
<InspectionTimeFormatExplainIcon />
|
||||
</label>
|
||||
<input type="text" id="interval" :value="activeInspectionPlanObj.inspectionInterval" readonly />
|
||||
<input
|
||||
type="text"
|
||||
id="interval"
|
||||
:value="activeInspectionPlanObj.inspectionInterval"
|
||||
readonly
|
||||
placeholder="---"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="remind" class="flex flex-row justify-between">
|
||||
Erinnerung vor Fälligkeit
|
||||
<InspectionTimeFormatExplainIcon />
|
||||
</label>
|
||||
<input type="text" id="remind" :value="activeInspectionPlanObj.remindTime" readonly />
|
||||
<input type="text" id="remind" :value="activeInspectionPlanObj.remindTime" readonly placeholder="---" />
|
||||
</div>
|
||||
</div>
|
||||
<p>Prüfungspunkte:</p>
|
||||
<div v-if="activeInspectionPlanObj?.inspectionPoints" class="flex flex-col gap-2 grow overflow-y-scroll">
|
||||
<small v-if="activeInspectionPlanObj?.inspectionPoints.length == 0">keine Prüfpunkte enthalten</small>
|
||||
<div v-if="activeInspectionPlanObj?.inspectionPoints.length == 0" class="flex flex-row gap-2 items-center">
|
||||
<ExclamationTriangleIcon class="h-5 w-5 text-error" />
|
||||
<p>keine Prüfpunkte enthalten</p>
|
||||
</div>
|
||||
<div
|
||||
v-for="point in activeInspectionPlanObj?.inspectionPoints"
|
||||
class="flex flex-col h-fit w-full border border-primary rounded-md"
|
||||
|
@ -50,6 +59,7 @@ import { mapActions, mapState } from "pinia";
|
|||
import Spinner from "@/components/Spinner.vue";
|
||||
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
|
||||
import InspectionTimeFormatExplainIcon from "@/components/admin/unit/InspectionTimeFormatExplainIcon.vue";
|
||||
import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<div class="flex flex-row gap-4">
|
||||
<RouterLink
|
||||
:to="{ name: 'admin-unit-inspection_plan-create', query: { type: 'vehicle', id: vehicleTypeId } }"
|
||||
:to="{ name: 'admin-unit-inspection_plan-create', query: { type: 'wearable', id: wearableTypeId } }"
|
||||
:disabled="!can('read', 'unit', 'inspection_plan')"
|
||||
button
|
||||
primary
|
||||
|
@ -24,7 +24,7 @@
|
|||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useVehicleTypeInspectionPlanStore } from "@/stores/admin/unit/vehicleType/inspectionPlan";
|
||||
import { useWearableTypeInspectionPlanStore } from "@/stores/admin/unit/wearableType/inspectionPlan";
|
||||
import TypeInspectionPlanListItem from "@/components/admin/unit/inspectionPlan/TypeInspectionPlanListItem.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
</script>
|
||||
|
@ -32,19 +32,19 @@ import Spinner from "@/components/Spinner.vue";
|
|||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
vehicleTypeId: String,
|
||||
wearableTypeId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
...mapState(useVehicleTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
|
||||
...mapState(useWearableTypeInspectionPlanStore, ["inspectionPlans", "loading"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useVehicleTypeInspectionPlanStore, ["fetchInspectionPlanForVehicleType"]),
|
||||
...mapActions(useWearableTypeInspectionPlanStore, ["fetchInspectionPlanForWearableType"]),
|
||||
fetchItem() {
|
||||
this.fetchInspectionPlanForVehicleType();
|
||||
this.fetchInspectionPlanForWearableType();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue