show details to damage
This commit is contained in:
parent
93a04abee1
commit
5ea5a0160a
10 changed files with 332 additions and 41 deletions
|
|
@ -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
46
src/views/admin/unit/damageReport/DamageReportClosed.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
77
src/views/admin/unit/damageReport/Overview.vue
Normal file
77
src/views/admin/unit/damageReport/Overview.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<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" type="text" readonly :value="activeDamageReportObj.status" />
|
||||
</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 :value="activeDamageReportObj.location || '---'"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="note">Anmerkung für Bearbeiter</label>
|
||||
<textarea id="note" readonly :value="activeDamageReportObj.note || '---'"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="reportedBy">Gemeldet von</label>
|
||||
<input id="reportedBy" type="text" readonly :value="activeDamageReportObj.reportedBy || '---'" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Bild</label>
|
||||
<div ref="imgs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
damageReportId: String,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useDamageReportStore, ["activeDamageReportObj"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.loadImages();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useDamageReportStore, ["loadDamageReportImage"]),
|
||||
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);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue