base views and store

src/views/admin/unit/damageReport/DamageReport.vue

@@ -19,7 +19,7 @@ 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 { useDamageReportStore } from "@/stores/admin/unit/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";

src/views/admin/unit/damageReport/DamageReportClosed.vue

@@ -19,7 +19,7 @@ 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 { useDamageReportStore } from "@/stores/admin/unit/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";

src/views/admin/unit/damageReport/DamageReportRouting.vue

@@ -11,7 +11,7 @@
       </h1>
 
       <RouterLink
-        v-if="activeDamageReportObj?.related && can('read', 'unit', 'equipment')"
+        v-if="activeDamageReportObj?.related && can('read', 'unit', activeDamageReportObj.assigned)"
         :to="{
           name: `admin-unit-${activeDamageReportObj.assigned}-overview`,
           params: { [`${activeDamageReportObj.assigned}Id`]: activeDamageReportObj.related.id ?? '_' },
@@ -54,7 +54,7 @@ import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { RouterLink, RouterView } from "vue-router";
 import { useAbilityStore } from "@/stores/ability";
-import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 </script>
 

src/views/admin/unit/damageReport/Overview.vue

@@ -63,7 +63,7 @@
 import { defineComponent } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
 import { useAbilityStore } from "@/stores/ability";
-import { useDamageReportStore } from "@/stores/admin/unit/damageReport/damageReport";
+import { useDamageReportStore } from "@/stores/admin/unit/damageReport";
 import type { DamageReportViewModel, UpdateDamageReportViewModel } from "@/viewmodels/admin/unit/damageReport.models";
 </script>
 

src/views/admin/unit/equipment/DamageReport.vue

@@ -25,7 +25,7 @@
               <div v-if="row.reportedBy" class="cursor-pointer">
                 <UserIcon class="w-5 h-5" />
               </div>
-              <div v-if="row.maintenance" class="cursor-pointer">
+              <div v-if="row.repair" class="cursor-pointer">
                 <WrenchScrewdriverIcon class="w-5 h-5" />
               </div>
             </div>

src/views/admin/unit/equipment/EquipmentRouting.vue

@@ -55,9 +55,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-unit-equipment-overview", title: "Übersicht" },
-        { route: "admin-unit-equipment-maintenance", title: "Wartungen/Reparaturen" },
         { route: "admin-unit-equipment-inspection", title: "Prüfungen" },
+        { route: "admin-unit-equipment-maintenance", title: "Wartungen" },
         { route: "admin-unit-equipment-damage_report", title: "Schadensmeldungen" },
+        { route: "admin-unit-equipment-repair", title: "Reparaturen" },
       ],
     };
   },

src/views/admin/unit/maintenance/Maintenance.vue

@@ -19,7 +19,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useAbilityStore } from "@/stores/ability";
-import { useMaintenanceStore } from "@/stores/admin/unit/maintenance/maintenance";
+import { useMaintenanceStore } from "@/stores/admin/unit/maintenance";
 import type { MaintenanceViewModel } from "@/viewmodels/admin/unit/maintenance.models";
 import Pagination from "@/components/Pagination.vue";
 import MaintenanceListItem from "@/components/admin/unit/maintenance/MaintenanceListItem.vue";

src/views/admin/unit/repair/Overview.vue

@@ -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>

src/views/admin/unit/repair/RepairClosed.vue

@@ -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>

src/views/admin/unit/repair/RepairOpen.vue

@@ -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>

src/views/admin/unit/repair/RepairRouting.vue

@@ -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>

src/views/admin/unit/repair/RepairStatusRouting.vue

@@ -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>

src/views/admin/unit/vehicle/DamageReport.vue

@@ -25,7 +25,7 @@
               <div v-if="row.reportedBy" class="cursor-pointer">
                 <UserIcon class="w-5 h-5" />
               </div>
-              <div v-if="row.maintenance" class="cursor-pointer">
+              <div v-if="row.repair" class="cursor-pointer">
                 <WrenchScrewdriverIcon class="w-5 h-5" />
               </div>
             </div>

src/views/admin/unit/vehicle/VehicleRouting.vue

@@ -55,9 +55,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-unit-vehicle-overview", title: "Übersicht" },
-        { route: "admin-unit-vehicle-maintenance", title: "Wartungen/Reparaturen" },
         { route: "admin-unit-vehicle-inspection", title: "Prüfungen" },
+        { route: "admin-unit-vehicle-maintenance", title: "Wartungen" },
         { route: "admin-unit-vehicle-damage_report", title: "Schadensmeldungen" },
+        { route: "admin-unit-vehicle-repair", title: "Reparaturen" },
       ],
     };
   },

src/views/admin/unit/wearable/DamageReport.vue

@@ -25,7 +25,7 @@
               <div v-if="row.reportedBy" class="cursor-pointer">
                 <UserIcon class="w-5 h-5" />
               </div>
-              <div v-if="row.maintenance" class="cursor-pointer">
+              <div v-if="row.repair" class="cursor-pointer">
                 <WrenchScrewdriverIcon class="w-5 h-5" />
               </div>
             </div>

src/views/admin/unit/wearable/WearableRouting.vue

@@ -55,9 +55,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-unit-wearable-overview", title: "Übersicht" },
-        { route: "admin-unit-wearable-maintenance", title: "Wartungen/Reparaturen" },
         { route: "admin-unit-wearable-inspection", title: "Prüfungen" },
+        { route: "admin-unit-wearable-maintenance", title: "Wartungen" },
         { route: "admin-unit-wearable-damage_report", title: "Schadensmeldungen" },
+        { route: "admin-unit-wearable-repair", title: "Reparaturen" },
       ],
     };
   },