base views and store
This commit is contained in:
parent
b9b0381356
commit
b56347c172
29 changed files with 655 additions and 22 deletions
116
src/views/admin/unit/repair/Overview.vue
Normal file
116
src/views/admin/unit/repair/Overview.vue
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="activeRepairObj != 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="activeRepairObj.status" />
|
||||
</div>
|
||||
<button
|
||||
v-if="!editStatus && !activeRepairObj.finishedAt"
|
||||
primary
|
||||
class="w-fit! self-end"
|
||||
@click="editStatus = true"
|
||||
>
|
||||
Status ändern
|
||||
</button>
|
||||
<div v-else-if="!activeRepairObj.finishedAt" 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="activeRepairObj.description"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="responsible">Verantwortlich</label>
|
||||
<input id="responsible" type="text" readonly placeholder="---" :value="activeRepairObj.responsible" />
|
||||
</div>
|
||||
<div>
|
||||
<label>Bild</label>
|
||||
<div ref="imgs">
|
||||
<small v-if="activeRepairObj.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 { useRepairStore } from "@/stores/admin/unit/repair";
|
||||
import type { RepairViewModel, UpdateRepairViewModel } from "@/viewmodels/admin/unit/repair.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
repairId: String,
|
||||
},
|
||||
watch: {
|
||||
activeRepairObj(val: RepairViewModel, oldVal: RepairViewModel | null) {
|
||||
if (val && oldVal == null) this.loadImages();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editStatus: false as boolean,
|
||||
loading: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(useRepairStore, ["activeRepairObj"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.loadImages();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRepairStore, ["loadRepairImage", "updateRepair"]),
|
||||
loadImages() {
|
||||
for (const i of this.activeRepairObj?.images ?? []) {
|
||||
this.loadRepairImage(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.activeRepairObj == null) return;
|
||||
this.loading = "loading";
|
||||
let update: UpdateRepairViewModel = {
|
||||
id: this.activeRepairObj.id,
|
||||
status: (this.$refs.status as HTMLInputElement).value,
|
||||
noteByWorker: (this.$refs.noteByWorker as HTMLInputElement).value,
|
||||
done: finish,
|
||||
};
|
||||
this.updateRepair(update)
|
||||
.then((res) => {
|
||||
this.activeRepairObj!.status = update.status;
|
||||
this.loading = "success";
|
||||
this.editStatus = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = "failed";
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loading = undefined;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
46
src/views/admin/unit/repair/RepairClosed.vue
Normal file
46
src/views/admin/unit/repair/RepairClosed.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="flex flex-col w-full h-full gap-2 justify-center">
|
||||
<Pagination
|
||||
:items="repairs"
|
||||
:totalCount="totalCount"
|
||||
:indicateLoading="loading == 'loading'"
|
||||
@load-data="(offset, count, search) => fetchDoneRepairs(offset, count, search)"
|
||||
@search="(search) => fetchDoneRepairs(0, maxEntriesPerPage, search, true)"
|
||||
>
|
||||
<template #pageRow="{ row }: { row: RepairViewModel }">
|
||||
<RepairListItem :repair="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 { useRepairStore } from "@/stores/admin/unit/repair";
|
||||
import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import RepairListItem from "@/components/admin/unit/repair/RepairListItem.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
maxEntriesPerPage: 25,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRepairStore, ["repairs", "totalCount", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchDoneRepairs(0, this.maxEntriesPerPage, "", true);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRepairStore, ["fetchDoneRepairs"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
46
src/views/admin/unit/repair/RepairOpen.vue
Normal file
46
src/views/admin/unit/repair/RepairOpen.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<div class="flex flex-col w-full h-full gap-2 justify-center">
|
||||
<Pagination
|
||||
:items="repairs"
|
||||
:totalCount="totalCount"
|
||||
:indicateLoading="loading == 'loading'"
|
||||
@load-data="(offset, count, search) => fetchOpenRepairs(offset, count, search)"
|
||||
@search="(search) => fetchOpenRepairs(0, maxEntriesPerPage, search, true)"
|
||||
>
|
||||
<template #pageRow="{ row }: { row: RepairViewModel }">
|
||||
<RepairListItem :repair="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 { useRepairStore } from "@/stores/admin/unit/repair";
|
||||
import type { RepairViewModel } from "@/viewmodels/admin/unit/repair.models";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import RepairListItem from "@/components/admin/unit/repair/RepairListItem.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
maxEntriesPerPage: 25,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRepairStore, ["repairs", "totalCount", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchOpenRepairs(0, this.maxEntriesPerPage, "", true);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRepairStore, ["fetchOpenRepairs"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
82
src/views/admin/unit/repair/RepairRouting.vue
Normal file
82
src/views/admin/unit/repair/RepairRouting.vue
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<RouterLink :to="{ name: 'admin-unit-repair-open' }" class="text-primary">zurück zur Liste</RouterLink>
|
||||
</template>
|
||||
<template #topBar>
|
||||
<h1 class="font-bold text-xl h-8 min-h-fit">
|
||||
Schadensmeldung:
|
||||
{{ activeRepairObj?.related?.name ?? "Ohne Zuordnung" }}
|
||||
<small v-if="activeRepairObj?.related">({{ activeRepairObj.related.code }})</small>
|
||||
</h1>
|
||||
|
||||
<RouterLink
|
||||
v-if="activeRepairObj?.related && can('read', 'unit', activeRepairObj.assigned)"
|
||||
:to="{
|
||||
name: `admin-unit-${activeRepairObj.assigned}-overview`,
|
||||
params: { [`${activeRepairObj.assigned}Id`]: activeRepairObj.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 hidden 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 { useRepairStore } from "@/stores/admin/unit/repair";
|
||||
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
repairId: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [{ route: "admin-unit-repair-overview", title: "Übersicht" }],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRepairStore, ["activeRepairObj"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchRepairByActiveId();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRepairStore, ["fetchRepairByActiveId"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
54
src/views/admin/unit/repair/RepairStatusRouting.vue
Normal file
54
src/views/admin/unit/repair/RepairStatusRouting.vue
Normal 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-repair-open", title: "offen" },
|
||||
{ route: "admin-unit-repair-done", title: "bearbeitet" },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue