Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

Merge pull request 'unit/#99-damage-reports' (#113) from unit/#99-damage-reports into milestone/ff-admin-unit

Browse source 
Reviewed-on: #113
This commit is contained in:
Julian Krauser 2025-07-17 08:50:13 +00:00
commit c5687729a9
32 changed files with 1065 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/admin/management/setting/AppSetting.vue
View file

@ -18,7 +18,23 @@
<CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
</div>
<input v-else id="show_link_to_calendar" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
<label for="show_link_to_calendar">Kalender-Link anzeigen</label>
<label for="show_link_to_calendar"><i>Kalender</i> Link anzeigen</label>
</div>
<div class="w-full flex flex-row items-center gap-2">
<div
v-if="!enableEdit"
class="border-2 border-gray-500 rounded-sm"
:class="appSettings['app.show_link_to_damagereport'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
>
<CheckIcon v-if="appSettings['app.show_link_to_damagereport']" class="h-2.5 w-2.5 stroke-4 text-white" />
</div>
<input
v-else
id="show_link_to_damagereport"
type="checkbox"
:checked="appSettings['app.show_link_to_damagereport']"
/>
<label for="show_link_to_damagereport"><i>Schaden melden</i> Link anzeigen</label>
</div>
</BaseSetting>
</template>
@ -60,6 +76,10 @@ export default defineComponent({
key: "app.show_link_to_calendar",
value: formData.show_link_to_calendar.checked,
},
{
key: "app.show_link_to_damagereport",
value: formData.show_link_to_damagereport.checked,
},
]);
},
},

28
src/components/admin/unit/damageReport/DamageReportListItem.vue
View file

@ -1,15 +1,34 @@
<template>
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
<RouterLink
:to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: damageReport.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 justify-between items-center">
<p>
{{ damageReport.related.name }}
{{ damageReport?.related?.name ?? "Ohne Zuordnung" }}
<small v-if="damageReport?.related">({{ damageReport.related.code }})</small>
</p>
<div class="flex flex-row gap-2">
<div v-if="damageReport.images.length != 0" class="cursor-pointer">
<PhotoIcon class="w-5 h-5" />
</div>
<div v-if="damageReport.location" class="cursor-pointer">
<MapPinIcon class="w-5 h-5" />
</div>
<div v-if="damageReport.reportedBy" class="cursor-pointer">
<UserIcon class="w-5 h-5" />
</div>
<div v-if="damageReport.maintenance" class="cursor-pointer">
<WrenchScrewdriverIcon class="w-5 h-5" />
</div>
</div>
</div>
<div class="p-2">
<p v-if="damageReport.related">Code: {{ damageReport.related.code }}</p>
<p>gemeldet: {{ new Date(damageReport.reportedAt).toLocaleString("de") }}</p>
<p>Status: {{ damageReport.status }}</p>
<p v-if="damageReport.description">Beschreibung: {{ damageReport.description }}</p>
</div>
</div>
</RouterLink>
</template>
<script setup lang="ts">
@ -17,6 +36,7 @@ import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
import { MapPinIcon, PhotoIcon, UserIcon, WrenchScrewdriverIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">

126
src/components/public/damageReport/CheckEntry.vue Normal file
View file

@ -0,0 +1,126 @@
<template>
<div class="flex flex-col gap-2">
<p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
<div class="flex flex-col gap-2">
<p class="mx-auto">Eingaben prüfen</p>
<div v-if="check.gear" class="rounded-md p-2 box-border border-2 font-medium border-primary text-black">
<p>
{{ check.gear.name }} <small>({{ check.gear.code }})</small>
</p>
<p>Typ: {{ check.gear.type }}</p>
</div>
<div>
<label for="description">Beschreibung des Schadens</label>
<textarea id="description" readonly :value="check.description"></textarea>
</div>
<div>
<label for="location">Fundort (optional)</label>
<textarea id="location" readonly :value="check.location"></textarea>
</div>
<div>
<label for="note">Anmerkung für Bearbeiter (optional)</label>
<textarea id="note" readonly :value="check.note"></textarea>
</div>
<div>
<label for="reportedBy">Gemeldet von (optional)</label>
<input id="reportedBy" type="text" readonly :value="check.reportedBy" />
</div>
<div>
<label for="image">Bild (optional)</label>
<img ref="vis" class="mt-2 max-h-36 mx-auto" />
</div>
</div>
<div class="flex flex-row gap-2">
<button primary :disabled="status == 'loading' || status == 'success'" @click="submit">
Schadensmeldung absenden
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status == 'success'" />
<FailureXMark v-else-if="status == 'failed'" />
</div>
<p v-if="message" class="text-center">{{ message }}</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
check: {
type: Object as PropType<{
gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
description: string;
location: string;
note: string;
reportedBy: string;
image: undefined | File;
}>,
required: true,
},
},
emits: {
nextStep: (s: string) => true,
stepBack: () => true,
},
data() {
return {
status: undefined as undefined | "loading" | "success" | "failed",
message: "" as string,
};
},
mounted() {
if (this.check.image) {
this.setImage(this.check.image);
}
},
methods: {
setImage(img: File) {
let image = this.$refs.vis as HTMLImageElement;
const reader = new FileReader();
reader.onload = function (e) {
image.src = e.target?.result as string;
};
reader.readAsDataURL(img);
},
submit() {
this.status = "loading";
this.message = "";
const formData = new FormData();
if (this.check.gear) formData.append("related", JSON.stringify(this.check.gear));
formData.append("description", this.check.description);
formData.append("location", this.check.location);
formData.append("note", this.check.note);
formData.append("reportedBy", this.check.reportedBy);
if (this.check.image) formData.append("images", this.check.image);
this.$http
.post("/public/reportdamage", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
this.status = "success";
setTimeout(() => {
this.$emit("nextStep", "result");
}, 2000);
})
.catch((err) => {
this.status = "failed";
this.message = err.message;
});
},
},
});
</script>

90
src/components/public/damageReport/InputData.vue Normal file
View file

@ -0,0 +1,90 @@
<template>
<form class="flex flex-col gap-2" @submit.prevent="setup">
<p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
<div class="flex flex-col gap-2">
<div>
<label for="description">Beschreibung des Schadens</label>
<textarea id="description" required :value="data.description"></textarea>
</div>
<div>
<label for="location">Fundort (optional)</label>
<textarea id="location" :value="data.location"></textarea>
</div>
<div>
<label for="note">Anmerkung für Bearbeiter (optional)</label>
<textarea id="note" :value="data.note"></textarea>
</div>
<div>
<label for="reportedBy">Gemeldet von (optional)</label>
<input id="reportedBy" type="text" placeholder="dein Name" :value="data.reportedBy" />
</div>
<div>
<label for="image">Bild (optional)</label>
<input id="image" type="file" accept="image/*" @change="(e: any) => setImage(e.target.files[0])" />
<img ref="vis" class="mt-2 max-h-36 mx-auto" />
</div>
</div>
<button type="submit" primary>weiter</button>
</form>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import ScanInput from "@/components/scanner/ScanInput.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
data: {
type: Object as PropType<{
gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
description: string;
location: string;
note: string;
reportedBy: string;
image: undefined | File;
}>,
required: true,
},
},
emits: {
nextStep: (s: string) => true,
stepBack: () => true,
data: (d: { description: string; location: string; note: string; reportedBy: string; image?: File }) => true,
},
mounted() {
if (this.data.image) {
this.setImage(this.data.image);
}
},
methods: {
setup(e: any) {
let formData = e.target.elements;
this.$emit("data", {
description: formData.description.value,
location: formData.location.value,
note: formData.note.value,
reportedBy: formData.reportedBy.value,
image: formData.image.files[0],
});
this.$emit("nextStep", "check");
},
setImage(img: File) {
let image = this.$refs.vis as HTMLImageElement;
const reader = new FileReader();
reader.onload = function (e) {
image.src = e.target?.result as string;
};
reader.readAsDataURL(img);
},
},
});
</script>

28
src/components/public/damageReport/Result.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div class="flex flex-col gap-2">
<h1 class="font-medium text-center">Schadensmeldung eingereicht</h1>
<br />
<p>
Deine Schadensmeldung wurde erfolgreich übermittelt.
<br />
Die Verwantwortlichen werden benachtichtigt.
<br />
Du kannst diese Seite jetzt schließen.
</p>
<br />
<p class="text-primary cursor-pointer self-end" @click="$emit('start')">neue Meldung einreichen</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
</script>
<script lang="ts">
export default defineComponent({
emits: {
start: () => true,
},
});
</script>

116
src/components/public/damageReport/SelectGear.vue Normal file
View file

@ -0,0 +1,116 @@
<template>
<div class="flex flex-col gap-2">
<p class="text-primary cursor-pointer" @click="$emit('stepBack')">zurück</p>
<Scanner v-if="!scanned" useInput @code="checkCode" />
<div v-if="scanned" class="contents">
<div class="flex flex-col gap-2 h-80 overflow-y-scroll pr-2">
<div v-if="status != undefined" class="flex flex-row gap-2 h-7 w-7 mx-auto">
<p>Suche</p>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status == 'success'" />
<FailureXMark v-else-if="status == 'failed'" />
</div>
<p v-else-if="available.length == 0" class="mx-auto">nichts gefunden</p>
<div
v-for="item in available"
:key="item.id"
class="rounded-md p-2 cursor-pointer box-border border-2 font-medium"
:class="
item.type == selected?.type && item.id == selected.id
? 'bg-primary text-white border-transparent hover:bg-accent'
: 'border-primary text-black hover:bg-primary hover:text-white'
"
@click="selected = item"
>
<p>
{{ item.name }} <small>({{ item.code }})</small>
</p>
<p>Typ: {{ item.type }}</p>
</div>
</div>
<button
v-if="selected != undefined"
primary
:disabled="status == 'loading'"
@click="
$emit('data', selected);
$emit('nextStep', 'input');
"
>
mit ausgewähltem fortfahren
</button>
<button
primary-outline
:disabled="status == 'loading'"
@click="
scanned = false;
code = '';
"
>
neu Scannen
</button>
</div>
<p v-if="message" class="text-center">{{ message }}</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import ScanInput from "@/components/scanner/ScanInput.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import Scanner from "@/components/scanner/Scanner.vue";
import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
</script>
<script lang="ts">
export default defineComponent({
emits: {
nextStep: (s: string) => true,
stepBack: () => true,
data: (gear: MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel) => true,
},
data() {
return {
code: "" as string,
status: undefined as undefined | "loading" | "success" | "failed",
message: "" as string,
available: [] as Array<MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel>,
selected: undefined as
| undefined
| MinifiedEquipmentViewModel
| MinifiedVehicleViewModel
| MinifiedWearableViewModel,
scanned: false as boolean,
};
},
methods: {
checkCode(c: string) {
this.available = [];
this.selected = undefined;
this.scanned = true;
this.status = "loading";
this.code = c;
this.$http
.get(`/public/reportdamage?code=${this.code}`)
.then((res) => {
this.available = res.data;
this.status = "success";
})
.catch((err) => {
this.status = "failed";
})
.finally(() => {
setTimeout(() => {
this.status = undefined;
}, 1500);
});
},
},
});
</script>

19
src/components/public/damageReport/Start.vue Normal file
View file

@ -0,0 +1,19 @@
<template>
<div class="flex flex-col gap-2">
<br />
<button primary @click="$emit('nextStep', 'select')">Barcode verwenden</button>
<button primary-outline @click="$emit('nextStep', 'input')">ohne Barcode fortfahren</button>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
</script>
<script lang="ts">
export default defineComponent({
emits: {
nextStep: (s: string) => true,
},
});
</script>

16
src/components/scanner/Scanner.vue
View file

@ -10,13 +10,16 @@
@detect="onDetect"
@camera-on="onCameraReady"
/>
<br />
<select v-model="selectedCamera">
<option v-for="c in selecteableCameras" :value="c">{{ c.label }}</option>
</select>
<div>
<label for="manual">Code eingeben</label>
<input v-if="useInput" id="manual" type="text" v-model="detected" />
</div>
<div class="flex flex-row justify-end gap-4 py-2">
<button primary-outline @click="paused = false" :disabled="!paused">weiter scannen</button>
<button primary-outline @click="commit">bestätigen</button>
<button primary-outline @click="commit" :disabled="detected == ''">bestätigen</button>
</div>
</div>
</template>
@ -36,7 +39,13 @@ import { QrcodeStream, type DetectedBarcode } from "vue-qrcode-reader";
<script lang="ts">
export default defineComponent({
emits: ["code"],
props: {
useInput: {
type: Boolean,
default: false,
},
},
emits: ["code", "ready"],
data() {
return {
selecteableCameras: defaultConstraintOptions,
@ -51,6 +60,7 @@ export default defineComponent({
if (!this.selectedCamera) {
this.selectedCamera = this.selecteableCameras[0];
}
this.$emit("ready");
},
onDetect(result: Array<DetectedBarcode>) {
this.paused = true;

4
src/global.ts Normal file
View file

@ -0,0 +1,4 @@
declare global {
//type Optional<T> = T | { [K in keyof T]?: never };
type Optional<T> = T | never;
}

4
src/main.css
View file

@ -74,12 +74,12 @@ button:not([class*="ql"] *):not([class*="fc"]):not([id*="headlessui-combobox"]),
button[primary]:not([primary="false"]),
[button][primary]:not([primary="false"]) {
@apply border-2 border-transparent text-white bg-primary hover:bg-primary;
@apply border-2 border-transparent text-white bg-primary hover:bg-accent;
}
button[primary-outline]:not([primary-outline="false"]),
[button][primary-outline]:not([primary-outline="false"]) {
@apply border-2 border-primary text-black hover:bg-primary;
@apply border-2 border-primary text-black hover:bg-primary hover:text-white;
}
button:disabled,

44
src/router/index.ts
View file

@ -20,6 +20,7 @@ import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectio
import { setVehicleTypeId } from "./unit/vehicleType";
import { resetInspectionStores, setInspectionId } from "./unit/inspection";
import { setWearableTypeId } from "./unit/wearableType";
import { resetDamageReportStores, setDamageReportId } from "./unit/damageReport";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -697,19 +698,47 @@ const router = createRouter({
{
path: "damage-report",
name: "admin-unit-damage_report-route",
component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "damage_report" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-unit-damage_report",
component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
redirect: { name: "admin-unit-damage_report-open" },
},
{
path: "done",
name: "admin-unit-damage_report-done",
component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
path: "status",
name: "admin-unit-damage_report-statusrouting",
component: () => import("@/views/admin/unit/damageReport/DamageReportStatusRouting.vue"),
beforeEnter: [resetDamageReportStores],
children: [
{
path: "open",
name: "admin-unit-damage_report-open",
component: () => import("@/views/admin/unit/damageReport/DamageReport.vue"),
},
{
path: "done",
name: "admin-unit-damage_report-done",
component: () => import("@/views/admin/unit/damageReport/DamageReportClosed.vue"),
},
],
},
{
path: ":damageReportId",
name: "admin-unit-damage_report-routing",
component: () => import("@/views/admin/unit/damageReport/DamageReportRouting.vue"),
beforeEnter: [setDamageReportId],
props: true,
children: [
{
path: "",
name: "admin-unit-damage_report-overview",
component: () => import("@/views/admin/unit/damageReport/Overview.vue"),
props: true,
},
],
},
],
},
@ -1444,6 +1473,11 @@ const router = createRouter({
},
],
},
{
path: "damagereport",
name: "public-damage_report",
component: () => import("@/views/public/damageReport/Report.vue"),
},
],
},
{

20
src/router/unit/damageReport.ts Normal file
View file

@ -0,0 +1,20 @@
import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
export async function setDamageReportId(to: any, from: any, next: any) {
const damageReportStore = useDamageReportStore();
damageReportStore.activeDamageReport = to.params?.damageReportId ?? null;
//xystore().$reset();
next();
}
export async function resetDamageReportStores(to: any, from: any, next: any) {
const damageReportStore = useDamageReportStore();
damageReportStore.activeDamageReport = null;
damageReportStore.activeDamageReportObj = null;
//xystore().$reset();
next();
}

76
src/stores/admin/unit/damageReport/damageReport.ts
View file

@ -1,9 +1,5 @@
import { defineStore } from "pinia";
import type {
DamageReportViewModel,
CreateDamageReportViewModel,
UpdateDamageReportViewModel,
} from "@/viewmodels/admin/unit/damageReport.models";
import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
@ -13,28 +9,46 @@ export const useDamageReportStore = defineStore("damageReport", {
damageReports: [] as Array<DamageReportViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
activeDamageReport: null as string | null,
activeDamageReportObj: null as DamageReportViewModel | null,
loadingActive: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchDamageReports(offset = 0, count = 25, search = "", clear = false) {
formatQueryReturnToPagination(result: AxiosResponse<any, any>, offset: number) {
this.totalCount = result.data.total;
result.data.damageReports
.filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
.map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
return {
...elem,
tab_pos: index + offset,
};
})
.forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
this.damageReports.push(elem);
});
},
fetchOpenDamageReports(offset = 0, count = 25, search = "", clear = false) {
if (clear) this.damageReports = [];
this.loading = "loading";
//TODO enable fetch of done reports
http
.get(`/admin/damageReport?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.get(`/admin/damageReport?done=false&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.then((result) => {
this.totalCount = result.data.total;
result.data.damageReports
.filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
.map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
return {
...elem,
tab_pos: index + offset,
};
})
.forEach((elem: DamageReportViewModel & { tab_pos: number }) => {
this.damageReports.push(elem);
});
this.formatQueryReturnToPagination(result, offset);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
fetchDoneDamageReports(offset = 0, count = 25, search = "", clear = false) {
if (clear) this.damageReports = [];
this.loading = "loading";
http
.get(`/admin/damageReport?done=true&offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.then((result) => {
this.formatQueryReturnToPagination(result, offset);
this.loading = "fetched";
})
.catch((err) => {
@ -60,14 +74,32 @@ export const useDamageReportStore = defineStore("damageReport", {
return { ...res, data: res.data.damageReports };
});
},
fetchDamageReportByActiveId() {
this.loadingActive = "loading";
http
.get(`/admin/damageReport/${this.activeDamageReport}`)
.then((res) => {
this.activeDamageReportObj = res.data;
this.loadingActive = "fetched";
})
.catch((err) => {
this.loadingActive = "failed";
});
},
fetchDamageReportById(id: string) {
return http.get(`/admin/damageReport/${id}`);
},
loadDamageReportImage(url: string) {
return http.get(`/admin/damageReport/${this.activeDamageReportObj?.id}/${url}`, {
responseType: "blob",
});
},
async updateDamageReport(damageReport: UpdateDamageReportViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/damageReport/${damageReport.id}`, {
// TODO: data
status: damageReport.status,
noteByWorker: damageReport.noteByWorker,
done: damageReport.done,
});
this.fetchDamageReports();
return result;
},
},

2
src/stores/admin/unit/equipment/damageReport.ts
View file

@ -22,7 +22,7 @@ export const useEquipmentDamageReportStore = defineStore("equipmentDamageReport"
)
.then((result) => {
this.totalCount = result.data.total;
result.data.reports
result.data.damageReports
.filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
.map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
return {

2
src/stores/admin/unit/vehicle/damageReport.ts
View file

@ -22,7 +22,7 @@ export const useVehicleDamageReportStore = defineStore("vehicleDamageReport", {
)
.then((result) => {
this.totalCount = result.data.total;
result.data.reports
result.data.damageReports
.filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
.map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
return {

2
src/stores/admin/unit/wearable/damageReport.ts
View file

@ -22,7 +22,7 @@ export const useWearableDamageReportStore = defineStore("wearableDamageReport",
)
.then((result) => {
this.totalCount = result.data.total;
result.data.reports
result.data.damageReports
.filter((elem: DamageReportViewModel) => this.damageReports.findIndex((m) => m.id == elem.id) == -1)
.map((elem: DamageReportViewModel, index: number): DamageReportViewModel & { tab_pos: number } => {
return {

2
src/stores/configuration.ts
View file

@ -10,6 +10,7 @@ export const useConfigurationStore = defineStore("configuration", {
clubWebsite: "",
appCustom_login_message: "",
appShow_link_to_calendar: false as boolean,
appShow_link_to_damagereport: false as boolean,
serverOffline: false as boolean,
};
@ -25,6 +26,7 @@ export const useConfigurationStore = defineStore("configuration", {
this.clubWebsite = res.data["club.website"];
this.appCustom_login_message = res.data["app.custom_login_message"];
this.appShow_link_to_calendar = res.data["app.show_link_to_calendar"];
this.appShow_link_to_damagereport = res.data["app.show_link_to_damagereport"];
})
.catch(() => {
this.serverOffline = true;

3
src/types/settingTypes.ts
View file

@ -8,6 +8,7 @@ export type SettingString =
| "club.website"
| "app.custom_login_message"
| "app.show_link_to_calendar"
| "app.show_link_to_damagereport"
| "session.jwt_expiration"
| "session.refresh_expiration"
| "session.pwa_refresh_expiration"
@ -32,6 +33,7 @@ export type SettingValueMapping = {
"club.website": string;
"app.custom_login_message": string;
"app.show_link_to_calendar": boolean;
"app.show_link_to_damagereport": boolean;
"session.jwt_expiration": string;
"session.refresh_expiration": string;
"session.pwa_refresh_expiration": string;
@ -66,6 +68,7 @@ export const settingsType: SettingsSchema = {
"club.website": { type: "url", optional: true },
"app.custom_login_message": { type: "string", optional: true },
"app.show_link_to_calendar": { type: "boolean", default: true },
"app.show_link_to_damagereport": { type: "boolean", default: false },
"session.jwt_expiration": { type: "ms", default: "15m" },
"session.refresh_expiration": { type: "ms", default: "1d" },
"session.pwa_refresh_expiration": { type: "ms", default: "5d" },

8
src/viewmodels/admin/unit/damageReport.models.ts
View file

@ -26,10 +26,13 @@ export type DamageReportViewModel = {
status: string;
done: boolean;
description: string;
imageCount: number;
location: string;
noteByReporter: string;
noteByWorker: string;
images: string[];
reportedBy: string;
maintenance?: MaintenanceViewModel;
} & DamageReportAssigned;
} & Optional<DamageReportAssigned>;
export interface CreateDamageReportViewModel {
description: string;
@ -41,5 +44,6 @@ export interface CreateDamageReportViewModel {
export interface UpdateDamageReportViewModel {
id: string;
status: string;
noteByWorker: string;
done: boolean;
}

8
src/viewmodels/admin/unit/equipment/equipment.models.ts
View file

@ -11,6 +11,14 @@ export interface EquipmentViewModel {
equipmentType: EquipmentTypeViewModel;
}
export interface MinifiedEquipmentViewModel {
id: string;
code?: string;
name: string;
type: string;
assigned: "equipment";
}
export interface CreateEquipmentViewModel {
code?: string;
name: string;

8
src/viewmodels/admin/unit/vehicle/vehicle.models.ts
View file

@ -11,6 +11,14 @@ export interface VehicleViewModel {
vehicleType: VehicleTypeViewModel;
}
export interface MinifiedVehicleViewModel {
id: string;
code?: string;
name: string;
type: string;
assigned: "vehicle";
}
export interface CreateVehicleViewModel {
code?: string;
name: string;

8
src/viewmodels/admin/unit/wearable/wearable.models.ts
View file

@ -14,6 +14,14 @@ export interface WearableViewModel {
wearableType: WearableTypeViewModel;
}
export interface MinifiedWearableViewModel {
id: string;
code?: string;
name: string;
type: string;
assigned: "wearable";
}
export interface CreateWearableViewModel {
code?: string;
name: string;

5
src/views/Login.vue
View file

@ -69,6 +69,9 @@
<RouterLink v-if="appShow_link_to_calendar" :to="{ name: 'public-calendar' }" button primary-outline>
zum Kalender
</RouterLink>
<RouterLink v-if="appShow_link_to_damagereport" :to="{ name: 'public-damage_report' }" button primary-outline>
Schaden melden
</RouterLink>
</div>
<FormBottomBar />
@ -100,7 +103,7 @@ export default defineComponent({
};
},
computed: {
...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar"]),
...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar", "appShow_link_to_damagereport"]),
},
mounted() {
this.username = localStorage.getItem("username") ?? "";

8
src/views/admin/unit/damageReport/DamageReport.vue
View file

@ -4,8 +4,8 @@
:items="damageReports"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchDamageReports(offset, count, search)"
@search="(search) => fetchDamageReports(0, maxEntriesPerPage, search, true)"
@load-data="(offset, count, search) => fetchOpenDamageReports(offset, count, search)"
@search="(search) => fetchOpenDamageReports(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: DamageReportViewModel }">
<DamageReportListItem :damageReport="row" />
@ -37,10 +37,10 @@ export default defineComponent({
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchDamageReports(0, this.maxEntriesPerPage, "", true);
this.fetchOpenDamageReports(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useDamageReportStore, ["fetchDamageReports"]),
...mapActions(useDamageReportStore, ["fetchOpenDamageReports"]),
},
});
</script>

46
src/views/admin/unit/damageReport/DamageReportClosed.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<div class="flex flex-col w-full h-full gap-2 justify-center">
<Pagination
:items="damageReports"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchDoneDamageReports(offset, count, search)"
@search="(search) => fetchDoneDamageReports(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: DamageReportViewModel }">
<DamageReportListItem :damageReport="row" />
</template>
</Pagination>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useAbilityStore } from "@/stores/ability";
import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
import Pagination from "@/components/Pagination.vue";
import DamageReportListItem from "@/components/admin/unit/damageReport/DamageReportListItem.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useDamageReportStore, ["damageReports", "totalCount", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchDoneDamageReports(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useDamageReportStore, ["fetchDoneDamageReports"]),
},
});
</script>

42
src/views/admin/unit/damageReport/DamageReportRouting.vue
View file

@ -1,9 +1,29 @@
<template>
<MainTemplate title="Schadensmeldungen">
<MainTemplate>
<template #headerInsert>
<RouterLink :to="{ name: 'admin-unit-damage_report-open' }" class="text-primary">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<h1 class="font-bold text-xl h-8 min-h-fit">
Schadensmeldung:
{{ activeDamageReportObj?.related?.name ?? "Ohne Zuordnung" }}
<small v-if="activeDamageReportObj?.related">({{ activeDamageReportObj.related.code }})</small>
</h1>
<RouterLink
v-if="activeDamageReportObj?.related && can('read', 'unit', 'equipment')"
:to="{
name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
}"
>
<ArrowTopRightOnSquareIcon class="w-5 h-5" />
</RouterLink>
</template>
<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">
<div hidden class="w-full flex flex-row max-lg:flex-wrap justify-center">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
@ -34,21 +54,29 @@ import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { RouterLink, RouterView } from "vue-router";
import { useAbilityStore } from "@/stores/ability";
import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
props: {
damageReportId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-damage_report", title: "offen" },
{ route: "admin-unit-damage_report-done", title: "bearbeitet" },
],
tabs: [{ route: "admin-unit-damage_report-overview", title: "Übersicht" }],
};
},
computed: {
...mapState(useDamageReportStore, ["activeDamageReportObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchDamageReportByActiveId();
},
methods: {
...mapActions(useDamageReportStore, ["fetchDamageReportByActiveId"]),
},
});
</script>

54
src/views/admin/unit/damageReport/DamageReportStatusRouting.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<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"
>
<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 />
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { RouterLink, RouterView } from "vue-router";
import { useAbilityStore } from "@/stores/ability";
import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
tabs: [
{ route: "admin-unit-damage_report-open", title: "offen" },
{ route: "admin-unit-damage_report-done", title: "bearbeitet" },
],
};
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
});
</script>

141
src/views/admin/unit/damageReport/Overview.vue Normal file
View file

@ -0,0 +1,141 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
<div>
<label for="status">Status</label>
<input id="status" ref="status" type="text" :readonly="!editStatus" :value="activeDamageReportObj.status" />
</div>
<div>
<label for="noteByWorker">Anmerkung durch Bearbeiter</label>
<textarea
id="noteByWorker"
ref="noteByWorker"
:readonly="!editStatus"
placeholder="---"
:value="activeDamageReportObj.noteByWorker"
></textarea>
</div>
<button
v-if="!editStatus && !activeDamageReportObj.done"
primary
class="w-fit! self-end"
@click="editStatus = true"
>
Status ändern
</button>
<div v-else-if="!activeDamageReportObj.done" class="flex flex-row gap-2 justify-end">
<button primary-outline class="w-fit!" @click="saveStatus(true)">speichern und abschließen</button>
<button primary class="w-fit!" @click="saveStatus(false)">Status speichern</button>
</div>
<br />
<div>
<label for="description">Beschreibung des Schadens</label>
<textarea id="description" readonly :value="activeDamageReportObj.description"></textarea>
</div>
<div>
<label for="location">Fundort</label>
<textarea id="location" readonly placeholder="---" :value="activeDamageReportObj.location"></textarea>
</div>
<div>
<label for="noteByReporter">Anmerkung für Bearbeiter</label>
<textarea
id="noteByReporter"
readonly
placeholder="---"
:value="activeDamageReportObj.noteByReporter"
></textarea>
</div>
<div>
<label for="reportedBy">Gemeldet von</label>
<input id="reportedBy" type="text" readonly placeholder="---" :value="activeDamageReportObj.reportedBy" />
</div>
<div>
<label>Bild</label>
<div ref="imgs">
<small v-if="activeDamageReportObj.images.length == 0">Keine Bilder hochgeladen</small>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
damageReportId: String,
},
watch: {
activeDamageReportObj(val: DamageReportViewModel, oldVal: DamageReportViewModel | null) {
if (val && oldVal == null) this.loadImages();
},
},
data() {
return {
editStatus: false as boolean,
loading: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapWritableState(useDamageReportStore, ["activeDamageReportObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.loadImages();
},
methods: {
...mapActions(useDamageReportStore, ["loadDamageReportImage", "updateDamageReport"]),
loadImages() {
for (const i of this.activeDamageReportObj?.images ?? []) {
this.loadDamageReportImage(i)
.then((response) => {
const contentType =
response.headers && response.headers["content-type"] ? response.headers["content-type"] : "image/*";
const blob = new Blob([response.data], { type: contentType });
const img = document.createElement("img");
img.src = window.URL.createObjectURL(blob);
img.alt = "Schadensbild";
img.classList = "h-35 w-auto";
(this.$refs.imgs as HTMLElement).appendChild(img);
})
.catch((err) => {
console.log(err);
});
}
},
saveStatus(finish: boolean) {
if (this.activeDamageReportObj == null) return;
this.loading = "loading";
let update: UpdateDamageReportViewModel = {
id: this.activeDamageReportObj.id,
status: (this.$refs.status as HTMLInputElement).value,
noteByWorker: (this.$refs.noteByWorker as HTMLInputElement).value,
done: finish,
};
this.updateDamageReport(update)
.then((res) => {
this.activeDamageReportObj!.done = update.done;
this.activeDamageReportObj!.status = update.status;
this.activeDamageReportObj!.noteByWorker = update.noteByWorker;
this.loading = "success";
this.editStatus = false;
})
.catch((err) => {
this.loading = "failed";
})
.finally(() => {
setTimeout(() => {
this.loading = undefined;
}, 2000);
});
},
},
});
</script>

38
src/views/admin/unit/equipment/DamageReport.vue
View file

@ -3,22 +3,37 @@
<Pagination
:items="damageReports"
:totalCount="totalCount"
:indicateLoading="false"
@load-data="(offset, count, search) => {}"
@search="(search) => {}"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchDamageReportForEquipment(offset, count, search)"
@search="(search) => fetchDamageReportForEquipment(0, 25, search, true)"
>
<template #pageRow="{ row }: { row: DamageReportViewModel }">
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
<RouterLink
:to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: 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.done" class="w-5 h-5" />
<PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
<p>{{ row.reportedAt }} - {{ row.status }}</p>
<p class="grow">{{ new Date(row.reportedAt).toLocaleString("de") }} - {{ row.status }}</p>
<div class="flex flex-row gap-2">
<div v-if="row.images.length != 0" class="cursor-pointer">
<PhotoIcon class="w-5 h-5" />
</div>
<div v-if="row.location" class="cursor-pointer">
<MapPinIcon class="w-5 h-5" />
</div>
<div v-if="row.reportedBy" class="cursor-pointer">
<UserIcon class="w-5 h-5" />
</div>
<div v-if="row.maintenance" class="cursor-pointer">
<WrenchScrewdriverIcon class="w-5 h-5" />
</div>
</div>
</div>
<div class="p-2">
<p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
<p>Beschreibung: {{ row.description }}</p>
</div>
</div>
</RouterLink>
</template>
</Pagination>
</div>
@ -31,7 +46,7 @@ import { useAbilityStore } from "@/stores/ability";
import { useEquipmentDamageReportStore } from "@/stores/admin/unit/equipment/damageReport";
import Pagination from "@/components/Pagination.vue";
import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
@ -44,13 +59,10 @@ export default defineComponent({
...mapState(useEquipmentDamageReportStore, ["damageReports", "loading", "totalCount"]),
},
mounted() {
this.fetchItem();
this.fetchDamageReportForEquipment(0, 25, "", true);
},
methods: {
...mapActions(useEquipmentDamageReportStore, ["fetchDamageReportForEquipment"]),
fetchItem() {
this.fetchDamageReportForEquipment();
},
},
});
</script>

36
src/views/admin/unit/vehicle/DamageReport.vue
View file

@ -4,21 +4,36 @@
:items="damageReports"
:totalCount="totalCount"
:indicateLoading="false"
@load-data="(offset, count, search) => {}"
@search="(search) => {}"
@load-data="(offset, count, search) => fetchDamageReportForVehicle(offset, count, search)"
@search="(search) => fetchDamageReportForVehicle(0, 25, search, true)"
>
<template #pageRow="{ row }: { row: DamageReportViewModel }">
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
<RouterLink
:to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: 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.done" class="w-5 h-5" />
<PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
<p>{{ row.reportedAt }} - {{ row.status }}</p>
<p class="grow">{{ new Date(row.reportedAt).toLocaleString("de") }} - {{ row.status }}</p>
<div class="flex flex-row gap-2">
<div v-if="row.images.length != 0" class="cursor-pointer">
<PhotoIcon class="w-5 h-5" />
</div>
<div v-if="row.location" class="cursor-pointer">
<MapPinIcon class="w-5 h-5" />
</div>
<div v-if="row.reportedBy" class="cursor-pointer">
<UserIcon class="w-5 h-5" />
</div>
<div v-if="row.maintenance" class="cursor-pointer">
<WrenchScrewdriverIcon class="w-5 h-5" />
</div>
</div>
</div>
<div class="p-2">
<p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
<p>Beschreibung: {{ row.description }}</p>
</div>
</div>
</RouterLink>
</template>
</Pagination>
</div>
@ -31,7 +46,7 @@ import { useAbilityStore } from "@/stores/ability";
import { useVehicleDamageReportStore } from "@/stores/admin/unit/vehicle/damageReport";
import Pagination from "@/components/Pagination.vue";
import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
@ -44,13 +59,10 @@ export default defineComponent({
...mapState(useVehicleDamageReportStore, ["damageReports", "loading", "totalCount"]),
},
mounted() {
this.fetchItem();
this.fetchDamageReportForVehicle(0, 25, "", true);
},
methods: {
...mapActions(useVehicleDamageReportStore, ["fetchDamageReportForVehicle"]),
fetchItem() {
this.fetchDamageReportForVehicle();
},
},
});
</script>

36
src/views/admin/unit/wearable/DamageReport.vue
View file

@ -4,21 +4,36 @@
:items="damageReports"
:totalCount="totalCount"
:indicateLoading="false"
@load-data="(offset, count, search) => {}"
@search="(search) => {}"
@load-data="(offset, count, search) => fetchDamageReportForWearable(offset, count, search)"
@search="(search) => fetchDamageReportForWearable(0, 25, search, true)"
>
<template #pageRow="{ row }: { row: DamageReportViewModel }">
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
<RouterLink
:to="{ name: 'admin-unit-damage_report-overview', params: { damageReportId: 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.done" class="w-5 h-5" />
<PhotoIcon v-if="row.imageCount != 0" class="w-5 h-5" />
<p>{{ row.reportedAt }} - {{ row.status }}</p>
<p class="grow">{{ new Date(row.reportedAt).toLocaleString("de") }} - {{ row.status }}</p>
<div class="flex flex-row gap-2">
<div v-if="row.images.length != 0" class="cursor-pointer">
<PhotoIcon class="w-5 h-5" />
</div>
<div v-if="row.location" class="cursor-pointer">
<MapPinIcon class="w-5 h-5" />
</div>
<div v-if="row.reportedBy" class="cursor-pointer">
<UserIcon class="w-5 h-5" />
</div>
<div v-if="row.maintenance" class="cursor-pointer">
<WrenchScrewdriverIcon class="w-5 h-5" />
</div>
</div>
</div>
<div class="p-2">
<p v-if="row.reportedBy">gemeldet von: {{ row.reportedBy }}</p>
<p>Beschreibung: {{ row.description }}</p>
</div>
</div>
</RouterLink>
</template>
</Pagination>
</div>
@ -31,7 +46,7 @@ import { useAbilityStore } from "@/stores/ability";
import { useWearableDamageReportStore } from "@/stores/admin/unit/wearable/damageReport";
import Pagination from "@/components/Pagination.vue";
import type { DamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
import { PhotoIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
import { PhotoIcon, PencilSquareIcon, MapPinIcon, WrenchScrewdriverIcon, UserIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
@ -44,13 +59,10 @@ export default defineComponent({
...mapState(useWearableDamageReportStore, ["damageReports", "loading", "totalCount"]),
},
mounted() {
this.fetchItem();
this.fetchDamageReportForWearable(0, 25, "", true);
},
methods: {
...mapActions(useWearableDamageReportStore, ["fetchDamageReportForWearable"]),
fetchItem() {
this.fetchDamageReportForWearable();
},
},
});
</script>

114
src/views/public/damageReport/Report.vue Normal file
View file

@ -0,0 +1,114 @@
<template>
<MainTemplate title="Schaden melden" :showBack="false">
<template #main>
<RouterLink :to="{ name: 'login' }" class="w-fit! text-primary">
{{ dictionary[step] == "result" ? "zurück zu Startseite" : "abbrechen" }}
</RouterLink>
<div class="max-w-md w-full flex flex-col gap-4 mx-auto">
<CheckProgressBar :total="dictionary.length" :step="step" :successfull="successfull" />
<Start v-if="dictionary[step] == 'start'" @nextStep="selectNextStep" @stepBack="stepBack" />
<SelectGear
v-else-if="dictionary[step] == 'select'"
@nextStep="selectNextStep"
@stepBack="stepBack"
@data="(gear) => (content.gear = gear)"
/>
<InputData
v-else-if="dictionary[step] == 'input'"
:data="content"
@nextStep="selectNextStep"
@stepBack="stepBack"
@data="updateContent"
/>
<CheckEntry
v-else-if="dictionary[step] == 'check'"
:check="content"
@nextStep="selectNextStep"
@stepBack="stepBack"
/>
<Result v-else-if="dictionary[step] == 'result'" @start="reset" />
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import MainTemplate from "@/templates/Main.vue";
import CheckProgressBar from "@/components/CheckProgressBar.vue";
import Start from "@/components/public/damageReport/Start.vue";
import SelectGear from "@/components/public/damageReport/SelectGear.vue";
import InputData from "@/components/public/damageReport/InputData.vue";
import CheckEntry from "@/components/public/damageReport/CheckEntry.vue";
import Result from "@/components/public/damageReport/Result.vue";
import type { MinifiedEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { MinifiedVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
import type { MinifiedWearableViewModel } from "@/viewmodels/admin/unit/wearable/wearable.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
dictionary: ["start", "select", "input", "check", "result"],
step: 0 as number,
successfull: 0 as number,
usingBarcode: false,
content: {
gear: undefined,
description: "",
location: "",
note: "",
reportedBy: "",
image: undefined,
} as {
gear: undefined | MinifiedEquipmentViewModel | MinifiedVehicleViewModel | MinifiedWearableViewModel;
description: string;
location: string;
note: string;
reportedBy: string;
image: undefined | File;
},
};
},
computed: {
stepIndex() {
return (dict: string) => this.dictionary.findIndex((d) => d == dict);
},
},
methods: {
selectNextStep(s: string) {
let index = this.dictionary.findIndex((d) => d == s);
if (this.step == 0 && index == 2) this.usingBarcode = true;
this.step = index;
this.successfull = index - 1;
},
updateContent(d: { description: string; location: string; note: string; reportedBy: string; image?: File }) {
this.content.description = d.description;
this.content.location = d.location;
this.content.note = d.note;
this.content.reportedBy = d.reportedBy;
if (d.image) this.content.image = d.image;
},
stepBack() {
console.log("hi");
if (this.step == 2 && this.usingBarcode) this.step = 0;
else this.step--;
this.successfull = Math.max(0, this.step - 1);
},
reset() {
this.step = 0;
this.successfull = 0;
this.usingBarcode = false;
this.content = {
gear: undefined,
description: "",
location: "",
note: "",
reportedBy: "",
image: undefined,
};
},
},
});
</script>