repair create and view

This commit is contained in:
Julian Krauser 2025-07-21 12:58:32 +02:00
parent b5a3ff4dc6
commit c79d5bb1cd
18 changed files with 1046 additions and 59 deletions

View file

@ -5,20 +5,32 @@
</template>
<template #topBar>
<h1 class="font-bold text-xl h-8 min-h-fit">
Schadensmeldung:
{{ activeDamageReportObj?.title }} -
{{ activeDamageReportObj?.related?.name ?? "Ohne Zuordnung" }}
<small v-if="activeDamageReportObj?.related">({{ activeDamageReportObj.related.code }})</small>
</h1>
<RouterLink
v-if="activeDamageReportObj?.related && can('read', 'unit', activeDamageReportObj.assigned)"
:to="{
name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
}"
>
<ArrowTopRightOnSquareIcon class="w-5 h-5" />
</RouterLink>
<div class="flex flex-row gap-2">
<RouterLink
v-if="activeDamageReportObj?.repair && can('read', 'unit', 'repair')"
:to="{
name: `admin-unit-repair-overview`,
params: { repairId: activeDamageReportObj.repair.id },
}"
title="Zur verbundenen Reparatur"
>
<WrenchScrewdriverIcon class="w-5 h-5" />
</RouterLink>
<RouterLink
v-if="activeDamageReportObj?.related && can('read', 'unit', activeDamageReportObj.assigned)"
:to="{
name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
}"
>
<ArrowTopRightOnSquareIcon class="w-5 h-5" />
</RouterLink>
</div>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
@ -55,7 +67,7 @@ import MainTemplate from "@/templates/Main.vue";
import { RouterLink, RouterView } from "vue-router";
import { useAbilityStore } from "@/stores/ability";
import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
import { ArrowTopRightOnSquareIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">

View file

@ -2,27 +2,25 @@
<MainTemplate title="Schadensmeldungen">
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
<div class="flex flex-col grow gap-2 overflow-hidden">
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
v-slot="{ isExactActive }"
:to="{ name: tab.route }"
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
v-slot="{ isExactActive }"
:to="{ name: tab.route }"
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
]"
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
]"
>
{{ tab.title }}
</p>
</RouterLink>
</div>
<RouterView />
{{ tab.title }}
</p>
</RouterLink>
</div>
<RouterView />
</div>
</template>
</MainTemplate>

View file

@ -0,0 +1,62 @@
<template>
<div class="flex flex-col gap-2 h-full w-full">
<Pagination
:items="repairs"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchRepairForEquipment(offset, count, search)"
@search="(search) => fetchRepairForEquipment(0, 25, search, true)"
>
<template #pageRow="{ row }: { row: RepairViewModel }">
<RouterLink
:to="{ name: 'admin-unit-repair-overview', params: { repairId: row.id } }"
class="flex flex-col h-fit w-full border border-primary rounded-md"
>
<div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
<PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
<p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
</div>
<div class="p-2">
<p>Beschreibung: {{ row.description }}</p>
</div>
</RouterLink>
</template>
</Pagination>
<RouterLink
:to="{ name: 'admin-unit-repair-create', params: { type: 'equipment', relatedId: equipmentId } }"
button
primary
class="w-fit!"
>
Reparatur erstellen
</RouterLink>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { useEquipmentRepairStore } from "@/stores/admin/unit/equipment/repair";
import Pagination from "@/components/Pagination.vue";
import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
props: {
equipmentId: String,
},
computed: {
...mapState(useAbilityStore, ["can"]),
...mapState(useEquipmentRepairStore, ["repairs", "loading", "totalCount"]),
},
mounted() {
this.fetchRepairForEquipment(0, 25, "", true);
},
methods: {
...mapActions(useEquipmentRepairStore, ["fetchRepairForEquipment"]),
},
});
</script>

View file

@ -0,0 +1,171 @@
<template>
<MainTemplate title="Reparatur erstellen">
<template #main>
<form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="createNewRepair">
<div class="flex flex-row">
<div
v-for="tab in tabs"
:key="tab.key"
class="w-1/2 p-0.5 first:pl-0 last:pr-0 cursor-pointer"
@click="
active = tab.key;
related = '';
reports = [];
"
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
tab.key == active
? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none'
: ' hover:bg-red-200',
]"
>
{{ tab.title }}
</p>
</div>
</div>
<EquipmentSearchSelect v-if="active == 'equipment'" title="Gerät" useScanner v-model="related" />
<VehicleSearchSelect v-else-if="active == 'vehicle'" title="Fahrzeug" useScanner v-model="related" />
<WearableSearchSelect v-else title="Kleidung" useScanner v-model="related" />
<div>
<label for="title"> Kurzbeschreibung </label>
<input id="title" type="text" required />
</div>
<div>
<label for="description"> Beschreibung (optional) </label>
<textarea id="description" class="h-24"></textarea>
</div>
<div>
<label for="responsible"> Verantwortlich (optional) </label>
<input id="responsible" type="text" />
</div>
<DamageReportSearchSelectMultipleWithRelated
title="verbundene Schadensmeldungen zu dieser Reparatur (optional)"
:related="active"
:relatedId="related"
v-model="reports"
/>
<div class="flex flex-row justify-end gap-2">
<RouterLink
:to="{ name: 'admin-unit-repair' }"
primary-outline
button
class="w-fit!"
:disabled="status == 'loading' || status?.status == 'success'"
>
abbrechen
</RouterLink>
<button primary type="submit" class="w-fit!" :disabled="status == 'loading'">starten</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState } from "pinia";
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 EquipmentSearchSelect from "@/components/search/EquipmentSearchSelect.vue";
import VehicleSearchSelect from "@/components/search/VehicleSearchSelect.vue";
import WearableSearchSelect from "@/components/search/WearableSearchSelect.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";
import type { CreateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
import { useRepairStore } from "@/stores/admin/unit/repair";
import DamageReportSearchSelectMultipleWithRelated from "@/components/search/DamageReportSearchSelectMultipleWithRelated.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
type: {
type: String as PropType<"vehicle" | "equipment" | "wearable">,
default: "equipment",
},
relatedId: {
type: String,
default: "",
},
},
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: null as any,
related: "",
active: "equipment" as "equipment" | "vehicle" | "wearable",
tabs: [
{
key: "equipment",
title: "Gerät",
},
{
key: "vehicle",
title: "Fahrzeug",
},
{
key: "wearable",
title: "Kleidung",
},
] as Array<{ key: "equipment" | "vehicle" | "wearable"; title: string }>,
reports: [] as Array<string>,
};
},
mounted() {
if (["vehicle", "equipment", "wearable"].includes(this.type)) {
this.active = this.type;
this.related = this.relatedId ?? "";
}
},
methods: {
...mapActions(useRepairStore, ["createRepair"]),
...mapActions(useEquipmentStore, ["fetchEquipmentById"]),
...mapActions(useVehicleStore, ["fetchVehicleById"]),
...mapActions(useWearableStore, ["fetchWearableById"]),
createNewRepair(e: any) {
if (this.related == "") return;
let formData = e.target.elements;
let createRepair: CreateRepairViewModel = {
affected: this.active,
affectedId: this.related,
title: formData.responsible.value,
description: formData.description.value,
responsible: formData.responsible.value,
reports: this.reports,
};
this.status = "loading";
this.createRepair(createRepair)
.then((res) => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.$router.push({
name: "admin-unit-repair-overview",
params: {
repairId: res.data,
},
});
}, 1500);
})
.catch((err) => {
this.status = { status: "failed" };
});
},
},
});
</script>

View file

@ -5,7 +5,7 @@
</template>
<template #topBar>
<h1 class="font-bold text-xl h-8 min-h-fit">
Schadensmeldung:
{{ activeRepairObj?.title }} -
{{ activeRepairObj?.related?.name ?? "Ohne Zuordnung" }}
<small v-if="activeRepairObj?.related">({{ activeRepairObj.related.code }})</small>
</h1>

View file

@ -2,27 +2,28 @@
<MainTemplate title="Schadensmeldungen">
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
<div class="flex flex-col grow gap-2 overflow-hidden">
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
v-slot="{ isExactActive }"
:to="{ name: tab.route }"
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
v-slot="{ isExactActive }"
:to="{ name: tab.route }"
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
]"
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
isExactActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
]"
>
{{ tab.title }}
</p>
</RouterLink>
</div>
<RouterView />
{{ tab.title }}
</p>
</RouterLink>
</div>
<RouterView />
<RouterLink :to="{ name: 'admin-unit-repair-create' }" button primary class="w-fit!">
Reparatur erstellen
</RouterLink>
</div>
</template>
</MainTemplate>

View file

@ -0,0 +1,62 @@
<template>
<div class="flex flex-col gap-2 h-full w-full">
<Pagination
:items="repairs"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchRepairForVehicle(offset, count, search)"
@search="(search) => fetchRepairForVehicle(0, 25, search, true)"
>
<template #pageRow="{ row }: { row: RepairViewModel }">
<RouterLink
:to="{ name: 'admin-unit-repair-overview', params: { repairId: row.id } }"
class="flex flex-col h-fit w-full border border-primary rounded-md"
>
<div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
<PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
<p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
</div>
<div class="p-2">
<p>Beschreibung: {{ row.description }}</p>
</div>
</RouterLink>
</template>
</Pagination>
<RouterLink
:to="{ name: 'admin-unit-repair-create', params: { type: 'vehicle', relatedId: vehicleId } }"
button
primary
class="w-fit!"
>
Reparatur erstellen
</RouterLink>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { useVehicleRepairStore } from "@/stores/admin/unit/vehicle/repair";
import Pagination from "@/components/Pagination.vue";
import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
props: {
vehicleId: String,
},
computed: {
...mapState(useAbilityStore, ["can"]),
...mapState(useVehicleRepairStore, ["repairs", "loading", "totalCount"]),
},
mounted() {
this.fetchRepairForVehicle(0, 25, "", true);
},
methods: {
...mapActions(useVehicleRepairStore, ["fetchRepairForVehicle"]),
},
});
</script>

View file

@ -0,0 +1,62 @@
<template>
<div class="flex flex-col gap-2 h-full w-full">
<Pagination
:items="repairs"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchRepairForWearable(offset, count, search)"
@search="(search) => fetchRepairForWearable(0, 25, search, true)"
>
<template #pageRow="{ row }: { row: RepairViewModel }">
<RouterLink
:to="{ name: 'admin-unit-repair-overview', params: { repairId: row.id } }"
class="flex flex-col h-fit w-full border border-primary rounded-md"
>
<div class="bg-primary p-2 text-white flex flex-row gap-2 items-center">
<PencilSquareIcon v-if="row.finishedAt == null" class="w-5 h-5" />
<p class="grow">{{ new Date(row.createdAt).toLocaleString("de") }} - {{ row.status }}</p>
</div>
<div class="p-2">
<p>Beschreibung: {{ row.description }}</p>
</div>
</RouterLink>
</template>
</Pagination>
<RouterLink
:to="{ name: 'admin-unit-repair-create', params: { type: 'wearable', relatedId: wearableId } }"
button
primary
class="w-fit!"
>
Reparatur erstellen
</RouterLink>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { useWearableRepairStore } from "@/stores/admin/unit/wearable/repair";
import Pagination from "@/components/Pagination.vue";
import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
props: {
wearableId: String,
},
computed: {
...mapState(useAbilityStore, ["can"]),
...mapState(useWearableRepairStore, ["repairs", "loading", "totalCount"]),
},
mounted() {
this.fetchRepairForWearable(0, 25, "", true);
},
methods: {
...mapActions(useWearableRepairStore, ["fetchRepairForWearable"]),
},
});
</script>