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

inspection plans and vehicle types

Browse source
This commit is contained in:
Julian Krauser 2025-04-11 14:14:11 +02:00
parent 00fad29b25
commit e25d91802c
32 changed files with 1384 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
src/components/admin/unit/equipment/CreateEquipmentModal.vue
View file

@ -1,155 +0,0 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Mitglied erstellen</p>
</div>
<br />
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
<div>
<Listbox v-model="selectedSalutation" name="salutation" by="id">
<ListboxLabel>Anrede</ListboxLabel>
<div class="relative mt-1">
<ListboxButton
class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
>
<span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
</ListboxButton>
<transition
leave-active-class="transition duration-100 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
>
<ListboxOption
v-slot="{ active, selected }"
v-for="salutation in salutations"
:key="salutation.id"
:value="salutation"
as="template"
>
<li
:class="[
active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
'relative cursor-default select-none py-2 pl-10 pr-4',
]"
>
<span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
salutation.salutation
}}</span>
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
</div>
<div>
<label for="firstname">Vorname</label>
<input type="text" id="firstname" required />
</div>
<div>
<label for="lastname">Nachname</label>
<input type="text" id="lastname" required />
</div>
<div>
<label for="nameaffix">Nameaffix (optional)</label>
<input type="text" id="nameaffix" />
</div>
<div>
<label for="birthdate">Geburtsdatum</label>
<input type="date" id="birthdate" required />
</div>
<div>
<label for="internalId">Interne ID (optional)</label>
<input type="text" id="internalId" />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
abbrechen
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
import type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
selectedSalutation: null as null | SalutationViewModel,
};
},
computed: {
...mapState(useSalutationStore, ["salutations"]),
},
mounted() {
this.fetchSalutations();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useEquipmentStore, ["createEquipment"]),
...mapActions(useSalutationStore, ["fetchSalutations"]),
triggerCreate(e: any) {
if (!this.selectedSalutation) return;
let formData = e.target.elements;
let createEquipment: CreateEquipmentViewModel = {
code: "",
name: "",
location: "",
equipmentTypeId: "",
};
this.status = "loading";
this.createEquipment(createEquipment)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});
</script>

5
src/components/admin/unit/equipmentType/CreateEquipmentTypeModal.vue
View file

@ -13,10 +13,6 @@
<label for="description">Beschreibung (optional)</label>
<textarea id="description" class="h-18"></textarea>
</div>
<div>
<label for="interval">Intervall (optional)</label>
<input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
@ -68,7 +64,6 @@ export default defineComponent({
let createEquipmentType: CreateEquipmentTypeViewModel = {
type: formData.type.value,
description: formData.description.value,
inspectionInterval: formData.interval.value || null,
};
this.status = "loading";
this.createEquipmentType(createEquipmentType)

33
src/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<RouterLink
:to="{ name: 'admin-unit-inspection_plan-overview', params: { inspectionPlanId: inspectionPlan.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>
{{ inspectionPlan.title }}
</p>
</div>
<div class="p-2">
<p v-if="inspectionPlan">Code: {{ inspectionPlan }}</p>
</div>
</RouterLink>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
inspectionPlan: { type: Object as PropType<InspectionPlanViewModel>, default: {} },
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
});
</script>

82
src/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Typ erstellen</p>
</div>
<br />
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
<div>
<label for="type">Typ</label>
<input type="text" id="type" required />
</div>
<div>
<label for="description">Beschreibung (optional)</label>
<textarea id="description" class="h-18"></textarea>
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
abbrechen
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
import type { CreateVehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useVehicleTypeStore, ["createVehicleType"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createVehicleType: CreateVehicleTypeViewModel = {
type: formData.type.value,
description: formData.description.value,
};
this.status = "loading";
this.createVehicleType(createVehicleType)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});
</script>

83
src/components/admin/unit/vehicleType/DeleteVehicleTypeModal.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Ausrüstung-Type löschen</p>
</div>
<br />
<p class="text-center">Type {{ vehicleType?.type }} löschen?</p>
<br />
<div class="flex flex-row gap-2">
<button
primary
type="submit"
:disabled="status == 'loading' || status?.status == 'success'"
@click="triggerDelete"
>
löschen
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
abbrechen
</button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useVehicleTypeStore, ["vehicleTypes"]),
vehicleType() {
return this.vehicleTypes.find((m) => m.id == this.data);
},
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useVehicleTypeStore, ["deleteVehicleType"]),
triggerDelete() {
this.status = "loading";
this.deleteVehicleType(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.$router.push({ name: "admin-unit-vehicle_type" });
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});
</script>

30
src/components/admin/unit/vehicleType/VehicleTypeListItem.vue Normal file
View file

@ -0,0 +1,30 @@
<template>
<RouterLink
:to="{ name: 'admin-unit-vehicle_type-overview', params: { vehicleTypeId: vehicleType.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>
{{ vehicleType.type }}
</p>
</div>
</RouterLink>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
vehicleType: { type: Object as PropType<VehicleTypeViewModel>, default: {} },
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
});
</script>

1
src/demodata/equipmentType.ts
View file

@ -5,6 +5,5 @@ export const equipmentTypeDemoData: Array<EquipmentTypeViewModel> = [
id: "xyz",
type: "B-Schlauch",
description: "Shläuche vom Typ B",
inspectionInterval: "1-m",
},
];

12
src/demodata/inspectionPlan.ts Normal file
View file

@ -0,0 +1,12 @@
import type { InspectionPlanViewModel } from "../viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
import { equipmentTypeDemoData } from "./equipmentType";
export const inspectionPlanDemoData: Array<InspectionPlanViewModel> = [
{
id: "abc",
title: "Sichtprüfung",
inspectionInterval: "1-m",
equipmentTypeId: equipmentTypeDemoData[0].id,
equipmentType: equipmentTypeDemoData[0],
},
];

9
src/demodata/vehicleType.ts Normal file
View file

@ -0,0 +1,9 @@
import type { VehicleTypeViewModel } from "../viewmodels/admin/unit/vehicleType/vehicleType.models";
export const vehicleTypeDemoData: Array<VehicleTypeViewModel> = [
{
id: "xyz",
type: "HLF",
description: "HLF",
},
];

4
src/demodata/wearableType.ts
View file

@ -3,7 +3,7 @@ import type { WearableTypeViewModel } from "../viewmodels/admin/unit/wearableTyp
export const wearableTypeDemoData: Array<WearableTypeViewModel> = [
{
id: "xyz",
type: "B-Schlauch",
description: "Shläuche vom Typ B",
type: "Jacke",
description: "Bayern 2000",
},
];

89
src/router/index.ts
View file

@ -18,6 +18,7 @@ import { resetRespiratoryGearStores, setRespiratoryGearId } from "./unit/respira
import { resetRespiratoryWearerStores, setRespiratoryWearerId } from "./unit/respiratoryWearer";
import { resetRespiratoryMissionStores, setRespiratoryMissionId } from "./unit/respiratoryMission";
import { resetWearableStores, setWearableId } from "./unit/wearable";
import { resetInspectionPlanStores, setInspectionPlanId } from "./unit/inspectionPlan";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -739,6 +740,49 @@ const router = createRouter({
},
],
},
{
path: "vehicle-type",
name: "admin-unit-vehicle_type-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "vehicle_type" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-unit-vehicle_type",
component: () => import("@/views/admin/unit/vehicleType/VehicleType.vue"),
},
{
path: ":vehicleTypeId",
name: "admin-unit-vehicle_type-routing",
component: () => import("@/views/admin/unit/vehicleType/VehicleTypeRouting.vue"),
beforeEnter: [setEquipmentTypeId],
props: true,
children: [
{
path: "overview",
name: "admin-unit-vehicle_type-overview",
component: () => import("@/views/admin/unit/vehicleType/Overview.vue"),
props: true,
},
{
path: "inspection-plan",
name: "admin-unit-vehicle_type-inspection_plan",
component: () => import("@/views/admin/unit/vehicleType/InspectionPlans.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-vehicle_type-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "equipment_type" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
path: "wearable-type",
name: "admin-unit-wearable_type-route",
@ -761,6 +805,51 @@ const router = createRouter({
},
],
},
{
path: "inspection-plan",
name: "admin-unit-inspection_plan-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "inspection_plan" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-unit-inspection_plan",
component: () => import("@/views/admin/unit/inspectionPlan/InspectionPlan.vue"),
beforeEnter: [resetInspectionPlanStores],
},
{
path: "create",
name: "admin-unit-inspection_plan-create",
component: () => import("@/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue"),
meta: { type: "create", section: "unit", module: "equipment" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: ":inspectionPlanId",
name: "admin-unit-inspection_plan-routing",
component: () => import("@/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue"),
beforeEnter: [setInspectionPlanId],
props: true,
children: [
{
path: "",
name: "admin-unit-inspection_plan-overview",
component: () => import("@/views/admin/unit/inspectionPlan/Overview.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-inspection_plan-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "inspection_plan" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
],
},
{

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

@ -0,0 +1,20 @@
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
export async function setInspectionPlanId(to: any, from: any, next: any) {
const InspectionPlanStore = useInspectionPlanStore();
InspectionPlanStore.activeInspectionPlan = to.params?.inspectionPlanId ?? null;
//useXYStore().$reset();
next();
}
export async function resetInspectionPlanStores(to: any, from: any, next: any) {
const InspectionPlanStore = useInspectionPlanStore();
InspectionPlanStore.activeInspectionPlan = null;
InspectionPlanStore.activeInspectionPlanObj = null;
//useXYStore().$reset();
next();
}

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

@ -0,0 +1,20 @@
import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
export async function setVehicleTypeId(to: any, from: any, next: any) {
const vehicleTypeStore = useVehicleTypeStore();
vehicleTypeStore.activeVehicleType = to.params?.vehicleTypeId ?? null;
//useXYStore().$reset();
next();
}
export async function resetVehicleTypeStores(to: any, from: any, next: any) {
const vehicleTypeStore = useVehicleTypeStore();
vehicleTypeStore.activeVehicleType = null;
vehicleTypeStore.activeVehicleTypeObj = null;
//useXYStore().$reset();
next();
}

6
src/stores/admin/navigation.ts
View file

@ -126,9 +126,15 @@ export const useNavigationStore = defineStore("navigation", {
...(abilityStore.can("read", "unit", "equipment_type")
? [{ key: "equipment_type", title: "Geräte-Typen" }]
: []),
...(abilityStore.can("read", "unit", "vehicle_type")
? [{ key: "vehicle_type", title: "Fahrzeug-Arten" }]
: []),
...(abilityStore.can("read", "unit", "wearable_type")
? [{ key: "wearable_type", title: "Kleidungs-Arten" }]
: []),
...(abilityStore.can("read", "unit", "inspection_plan")
? [{ key: "inspection_plan", title: "Prüfpläne" }]
: []),
],
},
configuration: {

110
src/stores/admin/unit/inspectionPlan/inspectionPlan.ts Normal file
View file

@ -0,0 +1,110 @@
import { defineStore } from "pinia";
import type {
InspectionPlanViewModel,
CreateInspectionPlanViewModel,
UpdateInspectionPlanViewModel,
} from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import { inspectionPlanDemoData } from "@/demodata/inspectionPlan";
export const useInspectionPlanStore = defineStore("inspectionPlan", {
state: () => {
return {
inspectionPlans: [] as Array<InspectionPlanViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
activeInspectionPlan: null as string | null,
activeInspectionPlanObj: null as InspectionPlanViewModel | null,
loadingActive: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchInspectionPlans(offset = 0, count = 25, search = "", clear = false) {
this.inspectionPlans = inspectionPlanDemoData.map((e, i) => ({ ...e, tab_pos: i }));
this.totalCount = this.inspectionPlans.length;
this.loading = "fetched";
return;
if (clear) this.inspectionPlans = [];
this.loading = "loading";
http
.get(`/admin/inspectionPlan?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.then((result) => {
this.totalCount = result.data.total;
result.data.inspectionPlans
.filter((elem: InspectionPlanViewModel) => this.inspectionPlans.findIndex((m) => m.id == elem.id) == -1)
.map((elem: InspectionPlanViewModel, index: number): InspectionPlanViewModel & { tab_pos: number } => {
return {
...elem,
tab_pos: index + offset,
};
})
.forEach((elem: InspectionPlanViewModel & { tab_pos: number }) => {
this.inspectionPlans.push(elem);
});
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
async getAllInspectionPlans(): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/inspectionPlan?noLimit=true`).then((res) => {
return { ...res, data: res.data.inspectionPlans };
});
},
async getInspectionPlansByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
return await http
.post(`/admin/inspectionPlan/ids`, {
ids,
})
.then((res) => {
return { ...res, data: res.data.inspectionPlans };
});
},
async searchInspectionPlans(search: string): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/inspectionPlan?search=${search}&noLimit=true`).then((res) => {
return { ...res, data: res.data.inspectionPlans };
});
},
fetchInspectionPlanByActiveId() {
this.activeInspectionPlanObj = inspectionPlanDemoData.find(
(e) => e.id == this.activeInspectionPlan
) as InspectionPlanViewModel;
this.loading = "fetched";
return;
this.loadingActive = "loading";
http
.get(`/admin/inspectionPlan/${this.activeInspectionPlan}`)
.then((res) => {
this.activeInspectionPlanObj = res.data;
this.loadingActive = "fetched";
})
.catch((err) => {
this.loadingActive = "failed";
});
},
fetchInspectionPlanById(id: string) {
return http.get(`/admin/inspectionPlan/${id}`);
},
async createInspectionPlan(inspectionPlan: CreateInspectionPlanViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/inspectionPlan`, {
// TODO: data
});
this.fetchInspectionPlans();
return result;
},
async updateActiveInspectionPlan(inspectionPlan: UpdateInspectionPlanViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/inspectionPlan/${inspectionPlan.id}`, {
// TODO: data
});
this.fetchInspectionPlans();
return result;
},
async deleteInspectionPlan(inspectionPlan: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/inspectionPlan/${inspectionPlan}`);
this.fetchInspectionPlans();
return result;
},
},
});

101
src/stores/admin/unit/vehicleType/vehicleType.ts Normal file
View file

@ -0,0 +1,101 @@
import { defineStore } from "pinia";
import type {
VehicleTypeViewModel,
CreateVehicleTypeViewModel,
UpdateVehicleTypeViewModel,
} from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import { vehicleTypeDemoData } from "../../../../demodata/vehicleType";
export const useVehicleTypeStore = defineStore("vehicleType", {
state: () => {
return {
vehicleTypes: [] as Array<VehicleTypeViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
activeVehicleType: null as string | null,
activeVehicleTypeObj: null as VehicleTypeViewModel | null,
loadingActive: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchVehicleTypes(offset = 0, count = 25, search = "", clear = false) {
this.vehicleTypes = vehicleTypeDemoData.map((e, i) => ({ ...e, tab_pos: i }));
this.totalCount = this.vehicleTypes.length;
this.loading = "fetched";
return;
if (clear) this.vehicleTypes = [];
this.loading = "loading";
http
.get(`/admin/vehicleType?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
.then((result) => {
this.totalCount = result.data.total;
result.data.vehicles
.filter((elem: VehicleTypeViewModel) => this.vehicleTypes.findIndex((m) => m.id == elem.id) == -1)
.map((elem: VehicleTypeViewModel, index: number): VehicleTypeViewModel & { tab_pos: number } => {
return {
...elem,
tab_pos: index + offset,
};
})
.forEach((elem: VehicleTypeViewModel & { tab_pos: number }) => {
this.vehicleTypes.push(elem);
});
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
async getAllVehicleTypes(): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/vehicleType?noLimit=true`).then((res) => {
return { ...res, data: res.data.vehicles };
});
},
async searchVehicleTypes(search: string): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/vehicleType?search=${search}&noLimit=true`).then((res) => {
return { ...res, data: res.data.vehicles };
});
},
fetchVehicleTypeByActiveId() {
this.activeVehicleTypeObj = vehicleTypeDemoData.find(
(e) => e.id == this.activeVehicleType
) as VehicleTypeViewModel;
this.loadingActive = "fetched";
return;
this.loadingActive = "loading";
http
.get(`/admin/vehicleType/${this.activeVehicleType}`)
.then((res) => {
this.activeVehicleTypeObj = res.data;
this.loadingActive = "fetched";
})
.catch((err) => {
this.loadingActive = "failed";
});
},
fetchVehicleTypeById(id: string) {
return http.get(`/admin/vehicleType/${id}`);
},
async createVehicleType(vehicleType: CreateVehicleTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/vehicleType`, {
// TODO: data
});
this.fetchVehicleTypes();
return result;
},
async updateActiveVehicleType(vehicleType: UpdateVehicleTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/vehicleType/${vehicleType.id}`, {
// TODO: data
});
this.fetchVehicleTypes();
return result;
},
async deleteVehicleType(vehicleType: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/vehicleType/${vehicleType}`);
this.fetchVehicleTypes();
return result;
},
},
});

6
src/types/permissionTypes.ts
View file

@ -12,6 +12,8 @@ export type PermissionModule =
| "equipment"
| "equipment_type"
| "vehicle"
| "vehicle_type"
| "inspection_plan"
| "respiratory_gear"
| "respiratory_wearer"
| "respiratory_mission"
@ -70,6 +72,8 @@ export const permissionModules: Array<PermissionModule> = [
"equipment",
"equipment_type",
"vehicle",
"vehicle_type",
"inspection_plan",
"respiratory_gear",
"respiratory_wearer",
"respiratory_mission",
@ -101,6 +105,8 @@ export const sectionsAndModules: SectionsAndModulesObject = {
"equipment",
"equipment_type",
"vehicle",
"vehicle_type",
"inspection_plan",
"respiratory_gear",
"respiratory_wearer",
"respiratory_mission",

3
src/viewmodels/admin/unit/equipmentType/equipmentType.models.ts
View file

@ -2,19 +2,16 @@ export interface EquipmentTypeViewModel {
id: string;
type: string;
description: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
// attached inspection plans
}
export interface CreateEquipmentTypeViewModel {
type: string;
description: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
}
export interface UpdateEquipmentTypeViewModel {
id: string;
type: string;
description: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
}

21
src/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models.ts Normal file
View file

@ -0,0 +1,21 @@
import type { EquipmentTypeViewModel } from "../equipmentType/equipmentType.models";
export interface InspectionPlanViewModel {
id: string;
title: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
equipmentTypeId: string;
equipmentType: EquipmentTypeViewModel;
}
export interface CreateInspectionPlanViewModel {
title: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
equipmentTypeId: string;
}
export interface UpdateInspectionPlanViewModel {
id: string;
title: string;
inspectionInterval?: `${number}-${"d" | "m" | "y"}` | `${number}/${number}`;
}

16
src/viewmodels/admin/unit/vehicleType/vehicleType.models.ts Normal file
View file

@ -0,0 +1,16 @@
export interface VehicleTypeViewModel {
id: string;
type: string;
description: string;
}
export interface CreateVehicleTypeViewModel {
type: string;
description: string;
}
export interface UpdateVehicleTypeViewModel {
id: string;
type: string;
description: string;
}

2
src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
<RouterLink :to="{ name: 'admin-unit-equipment_type' }" class="text-primary">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">

4
src/views/admin/unit/equipmentType/Overview.vue
View file

@ -9,10 +9,6 @@
<label for="description">Beschreibung</label>
<textarea id="description" :value="activeEquipmentTypeObj.description" class="h-18" readonly></textarea>
</div>
<div>
<label for="interval">Intervall</label>
<input type="text" id="interval" :value="activeEquipmentTypeObj.inspectionInterval" reaonly />
</div>
</div>
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />

209
src/views/admin/unit/inspectionPlan/CreateInspectionPlan.vue Normal file
View file

@ -0,0 +1,209 @@
<template>
<MainTemplate>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Ausrüstung erfassen</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<form class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerCreate">
<div>
<Combobox v-model="selectedType">
<ComboboxLabel>Typ</ComboboxLabel>
<div class="relative mt-1">
<ComboboxInput
class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
@input="query = $event.target.value"
/>
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
<TransitionRoot
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@after-leave="query = ''"
>
<ComboboxOptions
class="z-20 absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
>
<ComboboxOption v-if="loading || deferingSearch" as="template" disabled>
<li class="flex flex-row gap-2 text-text relative cursor-default select-none py-2 pl-3 pr-4">
<Spinner />
<span class="font-normal block truncate">suche</span>
</li>
</ComboboxOption>
<ComboboxOption v-else-if="filtered.length === 0 && query == ''" as="template" disabled>
<li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
<span class="font-normal block truncate">tippe, um zu suchen...</span>
</li>
</ComboboxOption>
<ComboboxOption v-else-if="filtered.length === 0" as="template" disabled>
<li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
<span class="font-normal block truncate">Keine Auswahl gefunden.</span>
</li>
</ComboboxOption>
<ComboboxOption
v-if="!(loading || deferingSearch)"
v-for="type in filtered"
as="template"
:key="type.id"
:value="type.id"
v-slot="{ selected, active }"
>
<li
class="relative cursor-default select-none py-2 pl-10 pr-4"
:class="{
'bg-primary text-white': active,
'text-gray-900': !active,
}"
>
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ type.type }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-primary': !active }"
>
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</TransitionRoot>
</div>
</Combobox>
</div>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" required />
</div>
<div>
<label for="interval">Intervall (optional)</label>
<input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
</div>
<div class="flex flex-row justify-end gap-2">
<RouterLink
:to="{ name: 'admin-unit-inspectionPlan' }"
primary-outline
button
class="!w-fit"
:disabled="status == 'loading' || status?.status == 'success'"
>
abbrechen
</RouterLink>
<button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import {
Combobox,
ComboboxLabel,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
import type { CreateInspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
import ScanInput from "@/components/ScanInput.vue";
import type { EquipmentTypeViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipmentType.models";
import { useEquipmentTypeStore } from "../../../../stores/admin/unit/equipmentType/equipmentType";
</script>
<script lang="ts">
export default defineComponent({
watch: {
query() {
this.deferingSearch = true;
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.deferingSearch = false;
this.search();
}, 600);
},
},
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: null as any,
selectedType: null as null | string,
loading: false as boolean,
deferingSearch: false as boolean,
timer: undefined as any,
query: "" as string,
filtered: [] as Array<EquipmentTypeViewModel>,
};
},
computed: {
...mapState(useInspectionPlanStore, ["inspectionPlans"]),
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useInspectionPlanStore, ["createInspectionPlan"]),
...mapActions(useEquipmentTypeStore, ["searchEquipmentTypes"]),
search() {
this.filtered = [];
if (this.query == "") return;
this.loading = true;
this.searchEquipmentTypes(this.query)
.then((res) => {
this.filtered = res.data;
})
.catch((err) => {})
.finally(() => {
this.loading = false;
});
},
triggerCreate(e: any) {
if (this.selectedType == null) return;
let formData = e.target.elements;
let createInspectionPlan: CreateInspectionPlanViewModel = {
title: formData.name.value,
equipmentTypeId: "",
inspectionInterval: formData.name.value || null,
};
this.status = "loading";
this.createInspectionPlan(createInspectionPlan)
.then((res) => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.$router.push({
name: "admin-unit-inspectionPlan-overview",
params: {
inspectionPlanId: res.data,
},
});
}, 1500);
})
.catch((err) => {
this.status = { status: "failed" };
});
},
},
});
</script>

70
src/views/admin/unit/inspectionPlan/InspectionPlan.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<MainTemplate>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Prüfpläne</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination
:items="inspectionPlans"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
useSearch
useScanner
@load-data="(offset, count, search) => fetchInspectionPlans(offset, count, search)"
@search="(search) => fetchInspectionPlans(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: InspectionPlanViewModel }">
<InspectionPlanListItem :inspectionPlan="row" />
</template>
</Pagination>
<div class="flex flex-row gap-4">
<RouterLink
v-if="can('create', 'unit', 'inspection_plan')"
:to="{ name: 'admin-unit-inspection_plan-create' }"
primary
button
class="!w-fit"
>
Prüfplan erstellen
</RouterLink>
</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 { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
import type { InspectionPlanViewModel } from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
import InspectionPlanListItem from "@/components/admin/unit/inspectionPlan/InspectionPlanListItem.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
currentPage: 0,
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useInspectionPlanStore, ["inspectionPlans", "totalCount", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchInspectionPlans(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useInspectionPlanStore, ["fetchInspectionPlans"]),
},
});
</script>

56
src/views/admin/unit/inspectionPlan/InspectionPlanRouting.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8 min-h-fit grow">
{{ activeInspectionPlanObj?.title }}
</h1>
<RouterLink v-if="can('update', 'unit', 'inspection_plan')" :to="{ name: 'admin-unit-inspection_plan-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
</div>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
<RouterView />
</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 { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { useAbilityStore } from "@/stores/ability";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
</script>
<script lang="ts">
export default defineComponent({
props: {
inspectionPlanId: String,
},
data() {
return {
tabs: [{ route: "admin-unit-inspection_plan-overview", title: "Übersicht" }],
};
},
computed: {
...mapState(useInspectionPlanStore, ["activeInspectionPlanObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchInspectionPlanByActiveId();
},
methods: {
...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
},
});
</script>

43
src/views/admin/unit/inspectionPlan/Overview.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<div v-if="activeInspectionPlanObj != null" class="flex flex-col gap-2 w-full">
<div>
<label for="type">Typ</label>
<input type="text" id="type" :value="activeInspectionPlanObj.equipmentType.type" readonly />
</div>
<div>
<label for="interval">Intervall</label>
<input type="text" id="interval" :value="activeInspectionPlanObj.inspectionInterval" reaonly />
</div>
</div>
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
<p v-else-if="loadingActive == 'failed'" @click="fetchInspectionPlanByActiveId" class="cursor-pointer">
&#8634; laden fehlgeschlagen
</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
</script>
<script lang="ts">
export default defineComponent({
props: {
inspectionPlanId: String,
},
computed: {
...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
},
mounted() {
this.fetchInspectionPlanByActiveId();
},
methods: {
...mapActions(useInspectionPlanStore, ["fetchInspectionPlanByActiveId"]),
},
});
</script>

117
src/views/admin/unit/inspectionPlan/UpdateInspectionPlan.vue Normal file
View file

@ -0,0 +1,117 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="inspectionPlan != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<p class="mx-auto">Ausrüstung bearbeiten</p>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" required v-model="inspectionPlan.title" />
</div>
<div>
<label for="interval">Intervall (optional)</label>
<input type="text" id="interval" placeholder="<number>-(d|m|y) oder DD/MM" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
abbrechen
</button>
<button primary type="submit" class="!w-fit" :disabled="status == 'loading'">speichern</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useInspectionPlanStore } from "@/stores/admin/unit/inspectionPlan/inspectionPlan";
import type {
CreateInspectionPlanViewModel,
InspectionPlanViewModel,
UpdateInspectionPlanViewModel,
} from "@/viewmodels/admin/unit/inspectionPlan/inspectionPlan.models";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import ScanInput from "@/components/ScanInput.vue";
import isEqual from "lodash.isequal";
import cloneDeep from "lodash.clonedeep";
</script>
<script lang="ts">
export default defineComponent({
props: {
inspectionPlanId: String,
},
watch: {
loadingActive() {
if (this.loading == "loading") {
this.loading = this.loadingActive;
}
if (this.loadingActive == "fetched") this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
},
},
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
inspectionPlan: null as null | InspectionPlanViewModel,
timeout: null as any,
};
},
computed: {
canSaveOrReset(): boolean {
return isEqual(this.activeInspectionPlanObj, this.inspectionPlan);
},
...mapState(useInspectionPlanStore, ["activeInspectionPlanObj", "loadingActive"]),
},
mounted() {
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useInspectionPlanStore, ["updateActiveInspectionPlan", "fetchInspectionPlanByActiveId"]),
resetForm() {
this.inspectionPlan = cloneDeep(this.activeInspectionPlanObj);
},
fetchItem() {
this.fetchInspectionPlanByActiveId();
},
triggerUpdate(e: any) {
if (this.inspectionPlan == null) return;
let formData = e.target.elements;
let updateInspectionPlan: UpdateInspectionPlanViewModel = {
id: this.inspectionPlan.id,
title: formData.name.value,
inspectionInterval: formData.location.value || null,
};
this.status = "loading";
this.updateActiveInspectionPlan(updateInspectionPlan)
.then((res) => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});
</script>

42
src/views/admin/unit/vehicleType/InspectionPlans.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<Pagination
:items="[]"
:totalCount="0"
:indicateLoading="false"
@load-data="(offset, count, search) => {}"
@search="(search) => {}"
>
<template #pageRow="{ row }: { row: { id: string } }">
<p>{{ row }}</p>
</template>
</Pagination>
<div class="flex flex-row gap-4">
<button v-if="can('create', 'unit', 'equipment_type')" primary class="!w-fit" @click="">
Prüfplan erstellen
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
currentPage: 0,
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useAbilityStore, ["can"]),
},
});
</script>

43
src/views/admin/unit/vehicleType/Overview.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<div v-if="activeVehicleTypeObj != null" class="flex flex-col gap-2 w-full">
<div>
<label for="type">Typ</label>
<input type="text" id="type" :value="activeVehicleTypeObj.type" readonly />
</div>
<div>
<label for="description">Beschreibung</label>
<textarea id="description" :value="activeVehicleTypeObj.description" class="h-18" readonly></textarea>
</div>
</div>
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
<p v-else-if="loadingActive == 'failed'" @click="fetchVehicleTypeByActiveId" class="cursor-pointer">
&#8634; laden fehlgeschlagen
</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
</script>
<script lang="ts">
export default defineComponent({
props: {
vehicleTypeId: String,
},
computed: {
...mapState(useVehicleTypeStore, ["activeVehicleTypeObj", "loadingActive"]),
},
mounted() {
this.fetchVehicleTypeByActiveId();
},
methods: {
...mapActions(useVehicleTypeStore, ["fetchVehicleTypeByActiveId"]),
},
});
</script>

70
src/views/admin/unit/vehicleType/VehicleType.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<MainTemplate>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Geräte-Typen</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination
:items="vehicleTypes"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
useSearch
@load-data="(offset, count, search) => fetchVehicleTypes(offset, count, search)"
@search="(search) => fetchVehicleTypes(0, maxEntriesPerPage, search, true)"
>
<template #pageRow="{ row }: { row: VehicleTypeViewModel }">
<VehicleTypeListItem :vehicleType="row" />
</template>
</Pagination>
<div class="flex flex-row gap-4">
<button v-if="can('create', 'unit', 'vehicle_type')" primary class="!w-fit" @click="openCreateModal">
Geräte-Typ erstellen
</button>
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
import { useModalStore } from "@/stores/modal";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
import type { VehicleTypeViewModel } from "@/viewmodels/admin/unit/vehicleType/vehicleType.models";
import VehicleTypeListItem from "@/components/admin/unit/vehicleType/VehicleTypeListItem.vue";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
currentPage: 0,
maxEntriesPerPage: 25,
};
},
computed: {
...mapState(useVehicleTypeStore, ["vehicleTypes", "totalCount", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchVehicleTypes(0, this.maxEntriesPerPage, "", true);
},
methods: {
...mapActions(useVehicleTypeStore, ["fetchVehicleTypes"]),
...mapActions(useModalStore, ["openModal"]),
openCreateModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue")))
);
},
},
});
</script>

92
src/views/admin/unit/vehicleType/VehicleTypeRouting.vue Normal file
View file

@ -0,0 +1,92 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink :to="{ name: 'admin-unit-vehicle_type' }" class="text-primary">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8 min-h-fit grow">
{{ activeVehicleTypeObj?.type }}
</h1>
<RouterLink v-if="can('update', 'unit', 'vehicle_type')" :to="{ name: 'admin-unit-vehicle_type-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon
v-if="can('delete', 'unit', 'vehicle_type')"
class="w-5 h-5 cursor-pointer"
@click="openDeleteModal"
/>
</div>
</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">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
v-slot="{ isActive }"
: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-none',
isActive ? 'bg-red-200 shadow 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 { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { RouterLink, RouterView } from "vue-router";
import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { useModalStore } from "@/stores/modal";
import { useAbilityStore } from "@/stores/ability";
import { useVehicleTypeStore } from "@/stores/admin/unit/vehicleType/vehicleType";
</script>
<script lang="ts">
export default defineComponent({
props: {
vehicleTypeId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-vehicle_type-overview", title: "Übersicht" },
{ route: "admin-unit-vehicle_type-inspection_plan", title: "Prüfpläne" },
],
};
},
computed: {
...mapState(useVehicleTypeStore, ["activeVehicleTypeObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchVehicleTypeByActiveId();
},
methods: {
...mapActions(useVehicleTypeStore, ["fetchVehicleTypeByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicleType/CreateVehicleTypeModal.vue"))),
this.vehicleTypeId ?? ""
);
},
},
});
</script>

2
src/views/admin/unit/wearableType/UpdateWearableType.vue
View file

@ -7,7 +7,7 @@
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<p class="mx-auto">Kleidung bearbeiten</p>
<p class="mx-auto">Kleidungstyp bearbeiten</p>
<div>
<label for="name">Bezeichnung</label>
<input type="text" id="name" required v-model="wearableType.type" />