repair create and view
This commit is contained in:
parent
b5a3ff4dc6
commit
c79d5bb1cd
18 changed files with 1046 additions and 59 deletions
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
62
src/views/admin/unit/equipment/Repair.vue
Normal file
62
src/views/admin/unit/equipment/Repair.vue
Normal 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>
|
171
src/views/admin/unit/repair/RepairCreate.vue
Normal file
171
src/views/admin/unit/repair/RepairCreate.vue
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
62
src/views/admin/unit/vehicle/Repair.vue
Normal file
62
src/views/admin/unit/vehicle/Repair.vue
Normal 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>
|
62
src/views/admin/unit/wearable/Repair.vue
Normal file
62
src/views/admin/unit/wearable/Repair.vue
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue