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

Enable Edit and View of Reports

Browse source
This commit is contained in:
Julian Krauser 2025-07-17 10:37:40 +02:00
parent 5ea5a0160a
commit 31b7ec9c3e
10 changed files with 162 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/views/admin/unit/damageReport/Overview.vue
View file

@ -3,7 +3,29 @@
<div v-if="activeDamageReportObj != null" class="flex flex-col gap-2 w-full">
<div>
<label for="status">Status</label>
<input id="status" type="text" readonly :value="activeDamageReportObj.status" />
<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>
@ -12,19 +34,26 @@
</div>
<div>
<label for="location">Fundort</label>
<textarea id="location" readonly :value="activeDamageReportObj.location || '---'"></textarea>
<textarea id="location" readonly placeholder="---" :value="activeDamageReportObj.location"></textarea>
</div>
<div>
<label for="note">Anmerkung für Bearbeiter</label>
<textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
<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 :value="activeDamageReportObj.reportedBy || '---'" />
<input id="reportedBy" type="text" readonly placeholder="---" :value="activeDamageReportObj.reportedBy" />
</div>
<div>
<label>Bild</label>
<div ref="imgs"></div>
<div ref="imgs">
<small v-if="activeDamageReportObj.images.length == 0">Keine Bilder hochgeladen</small>
</div>
</div>
</div>
</div>
@ -32,9 +61,10 @@
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
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">
@ -42,18 +72,26 @@ export default defineComponent({
props: {
damageReportId: String,
},
watch: {
activeDamageReportObj(val: DamageReportViewModel, oldVal: DamageReportViewModel | null) {
if (val && oldVal == null) this.loadImages();
},
},
data() {
return {};
return {
editStatus: false as boolean,
loading: undefined as undefined | "loading" | "success" | "failed",
};
},
computed: {
...mapState(useDamageReportStore, ["activeDamageReportObj"]),
...mapWritableState(useDamageReportStore, ["activeDamageReportObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.loadImages();
},
methods: {
...mapActions(useDamageReportStore, ["loadDamageReportImage"]),
...mapActions(useDamageReportStore, ["loadDamageReportImage", "updateDamageReport"]),
loadImages() {
for (const i of this.activeDamageReportObj?.images ?? []) {
this.loadDamageReportImage(i)
@ -72,6 +110,32 @@ export default defineComponent({
});
}
},
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">{{ row.reportedAt }} - {{ 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">{{ row.reportedAt }} - {{ 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">{{ row.reportedAt }} - {{ 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>