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

collection details

Browse source
This commit is contained in:
Julian Krauser 2025-03-26 12:20:06 +01:00
parent 3e87bbc267
commit 45fe7b34c3
19 changed files with 782 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -100,7 +100,7 @@ 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 type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
</script>

2
src/components/admin/unit/equipment/EquipmentListItem.vue
View file

@ -18,7 +18,7 @@
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
</script>
<script lang="ts">

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

@ -100,7 +100,7 @@ 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 type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
</script>

2
src/components/admin/unit/equipmentType/EquipmentTypeListItem.vue
View file

@ -18,7 +18,7 @@
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
import type { EquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
</script>
<script lang="ts">

2
src/components/admin/unit/respiratoryGear/CreateRespiratoryGearModal.vue
View file

@ -100,7 +100,7 @@ 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 type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
</script>

2
src/components/admin/unit/respiratoryMission/CreateRespiratoryMissionModal.vue
View file

@ -100,7 +100,7 @@ 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 type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
</script>

2
src/components/admin/unit/respiratoryWearer/CreateRespiratoryWearerModal.vue
View file

@ -100,7 +100,7 @@ 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 type { CreateEquipmentViewModel } from "@/viewmodels/admin/unit/equipmentType/equipment.models";
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
</script>

187
src/router/index.ts
View file

@ -330,6 +330,35 @@ const router = createRouter({
name: "admin-unit-equipment",
component: () => import("@/views/admin/unit/equipment/Equipment.vue"),
},
{
path: ":equipmentId",
name: "admin-unit-equipment-routing",
component: () => import("@/views/admin/unit/equipment/EquipmentRouting.vue"),
beforeEnter: [] /** set equipment ID */,
props: true,
children: [
{
path: "overview",
name: "admin-unit-equipment-overview",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "xy",
name: "admin-unit-equipment-xy",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-equipment-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "equipment" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
@ -344,6 +373,35 @@ const router = createRouter({
name: "admin-unit-vehicle",
component: () => import("@/views/admin/unit/vehicle/Vehicle.vue"),
},
{
path: ":vehicleId",
name: "admin-unit-vehicle-routing",
component: () => import("@/views/admin/unit/vehicle/VehicleRouting.vue"),
beforeEnter: [] /** set vehicle ID */,
props: true,
children: [
{
path: "overview",
name: "admin-unit-vehicle-overview",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "xy",
name: "admin-unit-vehicle-xy",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-vehicle-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "vehicle" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
@ -358,6 +416,35 @@ const router = createRouter({
name: "admin-unit-respiratory_gear",
component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGear.vue"),
},
{
path: ":respiratoryGearId",
name: "admin-unit-respiratory_gear-routing",
component: () => import("@/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue"),
beforeEnter: [] /** set respiratory_gear ID */,
props: true,
children: [
{
path: "overview",
name: "admin-unit-respiratory_gear-overview",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "xy",
name: "admin-unit-respiratory_gear-xy",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-respiratory_gear-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "respiratory_gear" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
@ -372,13 +459,42 @@ const router = createRouter({
name: "admin-unit-respiratory_wearer",
component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearer.vue"),
},
{
path: ":respiratoryWearerId",
name: "admin-unit-respiratory_wearer-routing",
component: () => import("@/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue"),
beforeEnter: [] /** set respiratory_wearer ID */,
props: true,
children: [
{
path: "overview",
name: "admin-unit-respiratory_wearer-overview",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "xy",
name: "admin-unit-respiratory_wearer-xy",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-respiratory_wearer-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "respiratory_wearer" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
path: "respiratory-mission",
name: "admin-unit-respiratory_mission-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "respiratory_gear" },
meta: { type: "read", section: "unit", module: "respiratory_mission" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
@ -386,6 +502,35 @@ const router = createRouter({
name: "admin-unit-respiratory_mission",
component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMission.vue"),
},
{
path: ":respiratoryMissionId",
name: "admin-unit-respiratory_mission-routing",
component: () => import("@/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue"),
beforeEnter: [] /** set respiratory_mission ID */,
props: true,
children: [
{
path: "overview",
name: "admin-unit-respiratory_mission-overview",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "xy",
name: "admin-unit-respiratory_mission-xy",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-respiratory_mission-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "respiratory_mission" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
{
@ -404,10 +549,46 @@ const router = createRouter({
},
{
path: "equipment-type",
name: "admin-unit-equipment_type",
component: () => import("@/views/admin/unit/equipmentType/EquipmentType.vue"),
name: "admin-unit-equipment_type-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "unit", module: "equipment_type" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-unit-equipment_type",
component: () => import("@/views/admin/unit/equipmentType/EquipmentType.vue"),
},
{
path: ":equipmentTypeId",
name: "admin-unit-equipment_type-routing",
component: () => import("@/views/admin/unit/equipmentType/EquipmentTypeRouting.vue"),
beforeEnter: [] /** set equipment_type ID */,
props: true,
children: [
{
path: "overview",
name: "admin-unit-equipment_type-overview",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "xy",
name: "admin-unit-equipment_type-xy",
component: () => import("@/views/admin/ViewSelect.vue"),
props: true,
},
{
path: "edit",
name: "admin-unit-equipment_type-edit",
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "update", section: "unit", module: "equipment_type" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
],
},
],
},
],
},

2
src/stores/admin/unit/equipment/equipment.ts
View file

@ -4,7 +4,7 @@ import type {
CreateEquipmentViewModel,
EquipmentStatisticsViewModel,
UpdateEquipmentViewModel,
} from "@/viewmodels/admin/unit/equipment/equipment.models";
} from "@/viewmodels/admin/unit/equipmentType/equipment.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";

62
src/stores/admin/unit/equipmentType.ts → src/stores/admin/unit/equipmentType/equipmentType.ts
View file

@ -13,6 +13,9 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
equipmentTypes: [] as Array<EquipmentTypeViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
activeEquipmentType: null as string | null,
activeEquipmentTypeObj: null as EquipmentTypeViewModel | null,
loadingActive: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
@ -41,13 +44,13 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
});
},
async getAllEquipmentTypes(): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
return await http.get(`/admin/equipmentType?noLimit=true`).then((res) => {
return { ...res, data: res.data.equipments };
});
},
async getEquipmentTypesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
return await http
.post(`/admin/equipment/ids`, {
.post(`/admin/equipmentType/ids`, {
ids,
})
.then((res) => {
@ -55,42 +58,51 @@ export const useEquipmentTypeStore = defineStore("equipmentType", {
});
},
async searchEquipmentTypes(search: string): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/equipment?search=${search}&noLimit=true`).then((res) => {
return await http.get(`/admin/equipmentType?search=${search}&noLimit=true`).then((res) => {
return { ...res, data: res.data.equipments };
});
},
fetchEquipmentTypeByActiveId() {
this.loadingActive = "loading";
http
.get(`/admin/equipmentType/${this.activeEquipmentType}`)
.then((res) => {
this.activeEquipmentTypeObj = res.data;
this.loadingActive = "fetched";
})
.catch((err) => {
this.loadingActive = "failed";
});
},
fetchEquipmentTypeById(id: string) {
return http.get(`/admin/equipment/${id}`);
return http.get(`/admin/equipmentType/${id}`);
},
fetchEquipmentTypeStatisticsById(id: string) {
return http.get(`/admin/equipment/${id}/statistics`);
},
async createEquipmentType(equipment: CreateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/equipment`, {
salutationId: equipment.salutationId,
firstname: equipment.firstname,
lastname: equipment.lastname,
nameaffix: equipment.nameaffix,
birthdate: equipment.birthdate,
internalId: equipment.internalId,
async createEquipmentType(equipmentType: CreateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/equipmentType`, {
salutationId: equipmentType.salutationId,
firstname: equipmentType.firstname,
lastname: equipmentType.lastname,
nameaffix: equipmentType.nameaffix,
birthdate: equipmentType.birthdate,
internalId: equipmentType.internalId,
});
this.fetchEquipmentTypes();
return result;
},
async updateEquipmentType(equipment: UpdateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/equipment/${equipment.id}`, {
salutationId: equipment.salutationId,
firstname: equipment.firstname,
lastname: equipment.lastname,
nameaffix: equipment.nameaffix,
birthdate: equipment.birthdate,
internalId: equipment.internalId,
async updateActiveEquipmentType(equipmentType: UpdateEquipmentTypeViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/equipmentType/${equipmentType.id}`, {
salutationId: equipmentType.salutationId,
firstname: equipmentType.firstname,
lastname: equipmentType.lastname,
nameaffix: equipmentType.nameaffix,
birthdate: equipmentType.birthdate,
internalId: equipmentType.internalId,
});
this.fetchEquipmentTypes();
return result;
},
async deleteEquipmentType(equipment: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/equipment/${equipment}`);
async deleteEquipmentType(equipmentType: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/equipmentType/${equipmentType}`);
this.fetchEquipmentTypes();
return result;
},

0
src/viewmodels/admin/unit/equipment/equipment.models.ts → src/viewmodels/admin/unit/equipmentType/equipment.models.ts
View file

4
src/views/admin/unit/equipment/Equipment.vue
View file

@ -23,7 +23,7 @@
<div class="flex flex-row gap-4">
<button v-if="can('create', 'club', 'equipment')" primary class="!w-fit" @click="openCreateModal">
Gerätschaft erstellen
Gerätschaft erfassen
</button>
</div>
</div>
@ -39,7 +39,7 @@ import { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
import { useModalStore } from "@/stores/modal";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";
import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipment/equipment.models";
import type { EquipmentViewModel } from "../../../../viewmodels/admin/unit/equipmentType/equipment.models";
import EquipmentListItem from "../../../../components/admin/unit/equipment/EquipmentListItem.vue";
</script>

88
src/views/admin/unit/equipment/EquipmentRouting.vue Normal file
View file

@ -0,0 +1,88 @@
<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">
{{ activeEquipmentObj?.lastname }}, {{ activeEquipmentObj?.firstname }}
</h1>
<RouterLink v-if="can('update', 'unit', 'equipment')" :to="{ name: 'admin-unit-equipment-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon v-if="can('delete', 'unit', 'equipment')" 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 { useEquipmentStore } from "@/stores/admin/unit/equipment/equipment";
</script>
<script lang="ts">
export default defineComponent({
props: {
equipmentId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-equipment-overview", title: "Übersicht" },
{ route: "admin-unit-equipment-xy", title: "xy" },
],
};
},
computed: {
...mapState(useEquipmentStore, ["activeEquipmentObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchEquipmentByActiveId();
},
methods: {
...mapActions(useEquipmentStore, ["fetchEquipmentByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
this.equipmentId ?? ""
);
},
},
});
</script>

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

@ -34,7 +34,7 @@
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType";
import { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
import { useModalStore } from "@/stores/modal";
import Pagination from "@/components/Pagination.vue";
import { useAbilityStore } from "@/stores/ability";

92
src/views/admin/unit/equipmentType/EquipmentTypeRouting.vue Normal file
View file

@ -0,0 +1,92 @@
<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">
{{ activeEquipmentTypeObj?.lastname }}, {{ activeEquipmentTypeObj?.firstname }}
</h1>
<RouterLink v-if="can('update', 'unit', 'equipment_type')" :to="{ name: 'admin-unit-equipment_type-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon
v-if="can('delete', 'unit', 'equipment_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 { useEquipmentTypeStore } from "@/stores/admin/unit/equipmentType/equipmentType";
</script>
<script lang="ts">
export default defineComponent({
props: {
equipmentTypeId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-equipment_type-overview", title: "Übersicht" },
{ route: "admin-unit-equipment_type-xy", title: "xy" },
],
};
},
computed: {
...mapState(useEquipmentTypeStore, ["activeEquipmentTypeObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchEquipmentTypeByActiveId();
},
methods: {
...mapActions(useEquipmentTypeStore, ["fetchEquipmentTypeByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
this.equipmentTypeId ?? ""
);
},
},
});
</script>

92
src/views/admin/unit/respiratoryGear/RespiratoryGearRouting.vue Normal file
View file

@ -0,0 +1,92 @@
<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">
{{ activeRespiratoryGearObj?.lastname }}, {{ activeRespiratoryGearObj?.firstname }}
</h1>
<RouterLink v-if="can('update', 'unit', 'respiratory_gear')" :to="{ name: 'admin-unit-respiratory_gear-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon
v-if="can('delete', 'unit', 'respiratory_gear')"
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 { useRespiratoryGearStore } from "@/stores/admin/unit/respiratoryGear/respiratoryGear";
</script>
<script lang="ts">
export default defineComponent({
props: {
respiratoryGearId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-respiratory_gear-overview", title: "Übersicht" },
{ route: "admin-unit-respiratory_gear-xy", title: "xy" },
],
};
},
computed: {
...mapState(useRespiratoryGearStore, ["activeRespiratoryGearObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchRespiratoryGearByActiveId();
},
methods: {
...mapActions(useRespiratoryGearStore, ["fetchRespiratoryGearByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
this.respiratoryGearId ?? ""
);
},
},
});
</script>

95
src/views/admin/unit/respiratoryMission/RespiratoryMissionRouting.vue Normal file
View file

@ -0,0 +1,95 @@
<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">
{{ activeRespiratoryMissionObj?.lastname }}, {{ activeRespiratoryMissionObj?.firstname }}
</h1>
<RouterLink
v-if="can('update', 'unit', 'respiratory_mission')"
:to="{ name: 'admin-unit-respiratory_mission-edit' }"
>
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon
v-if="can('delete', 'unit', 'respiratory_mission')"
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 { useRespiratoryMissionStore } from "@/stores/admin/unit/respiratoryMission/respiratoryMission";
</script>
<script lang="ts">
export default defineComponent({
props: {
respiratoryMissionId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-respiratory_mission-overview", title: "Übersicht" },
{ route: "admin-unit-respiratory_mission-xy", title: "xy" },
],
};
},
computed: {
...mapState(useRespiratoryMissionStore, ["activeRespiratoryMissionObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchRespiratoryMissionByActiveId();
},
methods: {
...mapActions(useRespiratoryMissionStore, ["fetchRespiratoryMissionByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
this.respiratoryMissionId ?? ""
);
},
},
});
</script>

95
src/views/admin/unit/respiratoryWearer/RespiratoryWearerRouting.vue Normal file
View file

@ -0,0 +1,95 @@
<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">
{{ activeRespiratoryWearerObj?.lastname }}, {{ activeRespiratoryWearerObj?.firstname }}
</h1>
<RouterLink
v-if="can('update', 'unit', 'respiratory_wearer')"
:to="{ name: 'admin-unit-respiratory_wearer-edit' }"
>
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon
v-if="can('delete', 'unit', 'respiratory_wearer')"
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 { useRespiratoryWearerStore } from "@/stores/admin/unit/respiratoryWearer/respiratoryWearer";
</script>
<script lang="ts">
export default defineComponent({
props: {
respiratoryWearerId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-respiratory_wearer-overview", title: "Übersicht" },
{ route: "admin-unit-respiratory_wearer-xy", title: "xy" },
],
};
},
computed: {
...mapState(useRespiratoryWearerStore, ["activeRespiratoryWearerObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchRespiratoryWearerByActiveId();
},
methods: {
...mapActions(useRespiratoryWearerStore, ["fetchRespiratoryWearerByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
this.respiratoryWearerId ?? ""
);
},
},
});
</script>

88
src/views/admin/unit/vehicle/VehicleRouting.vue Normal file
View file

@ -0,0 +1,88 @@
<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">
{{ activeVehicleObj?.lastname }}, {{ activeVehicleObj?.firstname }}
</h1>
<RouterLink v-if="can('update', 'unit', 'vehicle')" :to="{ name: 'admin-unit-vehicle-edit' }">
<PencilIcon class="w-5 h-5" />
</RouterLink>
<TrashIcon v-if="can('delete', 'unit', 'vehicle')" 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 { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
</script>
<script lang="ts">
export default defineComponent({
props: {
vehicleId: String,
},
data() {
return {
tabs: [
{ route: "admin-unit-vehicle-overview", title: "Übersicht" },
{ route: "admin-unit-vehicle-xy", title: "xy" },
],
};
},
computed: {
...mapState(useVehicleStore, ["activeVehicleObj"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchVehicleByActiveId();
},
methods: {
...mapActions(useVehicleStore, ["fetchVehicleByActiveId"]),
...mapActions(useModalStore, ["openModal"]),
openDeleteModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
this.vehicleId ?? ""
);
},
},
});
</script>