vehicle and equipment base
This commit is contained in:
parent
4338f58dea
commit
2b3231e26c
13 changed files with 912 additions and 8 deletions
157
src/components/admin/unit/equipment/CreateEquipmentModal.vue
Normal file
157
src/components/admin/unit/equipment/CreateEquipmentModal.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<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 = {
|
||||||
|
salutationId: this.selectedSalutation.id,
|
||||||
|
firstname: formData.firstname.value,
|
||||||
|
lastname: formData.lastname.value,
|
||||||
|
nameaffix: formData.nameaffix.value,
|
||||||
|
birthdate: formData.birthdate.value,
|
||||||
|
internalId: formData.internalId.value,
|
||||||
|
};
|
||||||
|
this.status = "loading";
|
||||||
|
this.createEquipment(createEquipment)
|
||||||
|
.then(() => {
|
||||||
|
this.status = { status: "success" };
|
||||||
|
this.timeout = setTimeout(() => {
|
||||||
|
this.closeModal();
|
||||||
|
}, 1500);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.status = { status: "failed" };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
33
src/components/admin/unit/equipment/EquipmentListItem.vue
Normal file
33
src/components/admin/unit/equipment/EquipmentListItem.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<RouterLink
|
||||||
|
:to="{ name: 'admin-unit-equipment-overview', params: { equipmentId: equipment.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>
|
||||||
|
{{ equipment.lastname }}, {{ equipment.firstname }} {{ equipment.nameaffix ? `- ${equipment.nameaffix}` : "" }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-2">
|
||||||
|
<p v-if="equipment.internalId">ID: {{ equipment.internalId }}</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 { EquipmentViewModel } from "@/viewmodels/admin/unit/equipment/equipment.models";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
equipment: { type: Object as PropType<EquipmentViewModel>, default: {} },
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(useAbilityStore, ["can"]),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
157
src/components/admin/unit/vehicle/CreateVehicleModal.vue
Normal file
157
src/components/admin/unit/vehicle/CreateVehicleModal.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
<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 { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
|
||||||
|
import type { CreateVehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.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(useVehicleStore, ["createVehicle"]),
|
||||||
|
...mapActions(useSalutationStore, ["fetchSalutations"]),
|
||||||
|
triggerCreate(e: any) {
|
||||||
|
if (!this.selectedSalutation) return;
|
||||||
|
let formData = e.target.elements;
|
||||||
|
let createVehicle: CreateVehicleViewModel = {
|
||||||
|
salutationId: this.selectedSalutation.id,
|
||||||
|
firstname: formData.firstname.value,
|
||||||
|
lastname: formData.lastname.value,
|
||||||
|
nameaffix: formData.nameaffix.value,
|
||||||
|
birthdate: formData.birthdate.value,
|
||||||
|
internalId: formData.internalId.value,
|
||||||
|
};
|
||||||
|
this.status = "loading";
|
||||||
|
this.createVehicle(createVehicle)
|
||||||
|
.then(() => {
|
||||||
|
this.status = { status: "success" };
|
||||||
|
this.timeout = setTimeout(() => {
|
||||||
|
this.closeModal();
|
||||||
|
}, 1500);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.status = { status: "failed" };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
31
src/components/admin/unit/vehicle/VehicleListItem.vue
Normal file
31
src/components/admin/unit/vehicle/VehicleListItem.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<RouterLink
|
||||||
|
:to="{ name: 'admin-unit-vehicle-overview', params: { vehicleId: vehicle.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>{{ vehicle.lastname }}, {{ vehicle.firstname }} {{ vehicle.nameaffix ? `- ${vehicle.nameaffix}` : "" }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-2">
|
||||||
|
<p v-if="vehicle.internalId">ID: {{ vehicle.internalId }}</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 { VehicleViewModel } from "@/viewmodels/admin/unit/vehicle/vehicle.models";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
vehicle: { type: Object as PropType<VehicleViewModel>, default: {} },
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(useAbilityStore, ["can"]),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -310,6 +310,43 @@ const router = createRouter({
|
||||||
component: () => import("@/views/RouterView.vue"),
|
component: () => import("@/views/RouterView.vue"),
|
||||||
meta: { type: "read", section: "unit" },
|
meta: { type: "read", section: "unit" },
|
||||||
beforeEnter: [abilityAndNavUpdate],
|
beforeEnter: [abilityAndNavUpdate],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "admin-unit-default",
|
||||||
|
component: () => import("@/views/admin/ViewSelect.vue"),
|
||||||
|
meta: { type: "read", section: "unit" },
|
||||||
|
beforeEnter: [abilityAndNavUpdate],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "equipment",
|
||||||
|
name: "admin-unit-equipment-route",
|
||||||
|
component: () => import("@/views/RouterView.vue"),
|
||||||
|
meta: { type: "read", section: "unit", module: "equipment" },
|
||||||
|
beforeEnter: [abilityAndNavUpdate],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "admin-unit-equipment",
|
||||||
|
component: () => import("@/views/admin/unit/equipment/Equipment.vue"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "vehicle",
|
||||||
|
name: "admin-unit-vehicle-route",
|
||||||
|
component: () => import("@/views/RouterView.vue"),
|
||||||
|
meta: { type: "read", section: "unit", module: "vehicle" },
|
||||||
|
beforeEnter: [abilityAndNavUpdate],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "",
|
||||||
|
name: "admin-unit-vehicle",
|
||||||
|
component: () => import("@/views/admin/unit/vehicle/Vehicle.vue"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "configuration",
|
path: "configuration",
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ export const useNavigationStore = defineStore("navigation", {
|
||||||
{
|
{
|
||||||
key: "unit",
|
key: "unit",
|
||||||
title: "Wehr",
|
title: "Wehr",
|
||||||
levelDefault: "",
|
levelDefault: "equipment",
|
||||||
} as topLevelNavigationModel,
|
} as topLevelNavigationModel,
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
|
|
@ -104,6 +104,13 @@ export const useNavigationStore = defineStore("navigation", {
|
||||||
...(abilityStore.can("read", "club", "listprint") ? [{ key: "listprint", title: "Liste Drucken" }] : []),
|
...(abilityStore.can("read", "club", "listprint") ? [{ key: "listprint", title: "Liste Drucken" }] : []),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
unit: {
|
||||||
|
mainTitle: "Wehr",
|
||||||
|
main: [
|
||||||
|
...(abilityStore.can("read", "unit", "equipment") ? [{ key: "equipment", title: "Gerätschaften" }] : []),
|
||||||
|
...(abilityStore.can("read", "unit", "vehicle") ? [{ key: "vehicle", title: "Fahrzeuge" }] : []),
|
||||||
|
],
|
||||||
|
},
|
||||||
configuration: {
|
configuration: {
|
||||||
mainTitle: "Einstellungen",
|
mainTitle: "Einstellungen",
|
||||||
main: [
|
main: [
|
||||||
|
|
|
||||||
128
src/stores/admin/unit/equipment/equipment.ts
Normal file
128
src/stores/admin/unit/equipment/equipment.ts
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
import type {
|
||||||
|
EquipmentViewModel,
|
||||||
|
CreateEquipmentViewModel,
|
||||||
|
EquipmentStatisticsViewModel,
|
||||||
|
UpdateEquipmentViewModel,
|
||||||
|
} from "@/viewmodels/admin/unit/equipment/equipment.models";
|
||||||
|
import { http } from "@/serverCom";
|
||||||
|
import type { AxiosResponse } from "axios";
|
||||||
|
|
||||||
|
export const useEquipmentStore = defineStore("equipment", {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
equipments: [] as Array<EquipmentViewModel & { tab_pos: number }>,
|
||||||
|
totalCount: 0 as number,
|
||||||
|
loading: "loading" as "loading" | "fetched" | "failed",
|
||||||
|
activeEquipment: null as string | null,
|
||||||
|
activeEquipmentObj: null as EquipmentViewModel | null,
|
||||||
|
activeEquipmentStatistics: null as EquipmentStatisticsViewModel | null,
|
||||||
|
loadingActive: "loading" as "loading" | "fetched" | "failed",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
fetchEquipments(offset = 0, count = 25, search = "", clear = false) {
|
||||||
|
if (clear) this.equipments = [];
|
||||||
|
this.loading = "loading";
|
||||||
|
http
|
||||||
|
.get(`/admin/equipment?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
|
||||||
|
.then((result) => {
|
||||||
|
this.totalCount = result.data.total;
|
||||||
|
result.data.equipments
|
||||||
|
.filter((elem: EquipmentViewModel) => this.equipments.findIndex((m) => m.id == elem.id) == -1)
|
||||||
|
.map((elem: EquipmentViewModel, index: number): EquipmentViewModel & { tab_pos: number } => {
|
||||||
|
return {
|
||||||
|
...elem,
|
||||||
|
tab_pos: index + offset,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.forEach((elem: EquipmentViewModel & { tab_pos: number }) => {
|
||||||
|
this.equipments.push(elem);
|
||||||
|
});
|
||||||
|
this.loading = "fetched";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.loading = "failed";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async getAllEquipments(): Promise<AxiosResponse<any, any>> {
|
||||||
|
return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
|
||||||
|
return { ...res, data: res.data.equipments };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async getEquipmentsByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
|
||||||
|
return await http
|
||||||
|
.post(`/admin/equipment/ids`, {
|
||||||
|
ids,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return { ...res, data: res.data.equipments };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async searchEquipments(search: string): Promise<AxiosResponse<any, any>> {
|
||||||
|
return await http.get(`/admin/equipment?search=${search}&noLimit=true`).then((res) => {
|
||||||
|
return { ...res, data: res.data.equipments };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchEquipmentByActiveId() {
|
||||||
|
this.loadingActive = "loading";
|
||||||
|
http
|
||||||
|
.get(`/admin/equipment/${this.activeEquipment}`)
|
||||||
|
.then((res) => {
|
||||||
|
this.activeEquipmentObj = res.data;
|
||||||
|
this.loadingActive = "fetched";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.loadingActive = "failed";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchEquipmentById(id: string) {
|
||||||
|
return http.get(`/admin/equipment/${id}`);
|
||||||
|
},
|
||||||
|
fetchEquipmentStatisticsByActiveId() {
|
||||||
|
http
|
||||||
|
.get(`/admin/equipment/${this.activeEquipment}/statistics`)
|
||||||
|
.then((res) => {
|
||||||
|
this.activeEquipmentStatistics = res.data;
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
async printEquipmentByActiveId() {
|
||||||
|
return http.get(`/admin/equipment/${this.activeEquipment}/print`, {
|
||||||
|
responseType: "blob",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchEquipmentStatisticsById(id: string) {
|
||||||
|
return http.get(`/admin/equipment/${id}/statistics`);
|
||||||
|
},
|
||||||
|
async createEquipment(equipment: CreateEquipmentViewModel): 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,
|
||||||
|
});
|
||||||
|
this.fetchEquipments();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
async updateActiveEquipment(equipment: UpdateEquipmentViewModel): 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,
|
||||||
|
});
|
||||||
|
this.fetchEquipments();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
async deleteEquipment(equipment: number): Promise<AxiosResponse<any, any>> {
|
||||||
|
const result = await http.delete(`/admin/equipment/${equipment}`);
|
||||||
|
this.fetchEquipments();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
128
src/stores/admin/unit/vehicle/vehicle.ts
Normal file
128
src/stores/admin/unit/vehicle/vehicle.ts
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
import { defineStore } from "pinia";
|
||||||
|
import type {
|
||||||
|
VehicleViewModel,
|
||||||
|
CreateVehicleViewModel,
|
||||||
|
VehicleStatisticsViewModel,
|
||||||
|
UpdateVehicleViewModel,
|
||||||
|
} from "@/viewmodels/admin/unit/vehicle/vehicle.models";
|
||||||
|
import { http } from "@/serverCom";
|
||||||
|
import type { AxiosResponse } from "axios";
|
||||||
|
|
||||||
|
export const useVehicleStore = defineStore("vehicle", {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
vehicles: [] as Array<VehicleViewModel & { tab_pos: number }>,
|
||||||
|
totalCount: 0 as number,
|
||||||
|
loading: "loading" as "loading" | "fetched" | "failed",
|
||||||
|
activeVehicle: null as string | null,
|
||||||
|
activeVehicleObj: null as VehicleViewModel | null,
|
||||||
|
activeVehicleStatistics: null as VehicleStatisticsViewModel | null,
|
||||||
|
loadingActive: "loading" as "loading" | "fetched" | "failed",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
fetchVehicles(offset = 0, count = 25, search = "", clear = false) {
|
||||||
|
if (clear) this.vehicles = [];
|
||||||
|
this.loading = "loading";
|
||||||
|
http
|
||||||
|
.get(`/admin/vehicle?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
|
||||||
|
.then((result) => {
|
||||||
|
this.totalCount = result.data.total;
|
||||||
|
result.data.vehicles
|
||||||
|
.filter((elem: VehicleViewModel) => this.vehicles.findIndex((m) => m.id == elem.id) == -1)
|
||||||
|
.map((elem: VehicleViewModel, index: number): VehicleViewModel & { tab_pos: number } => {
|
||||||
|
return {
|
||||||
|
...elem,
|
||||||
|
tab_pos: index + offset,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.forEach((elem: VehicleViewModel & { tab_pos: number }) => {
|
||||||
|
this.vehicles.push(elem);
|
||||||
|
});
|
||||||
|
this.loading = "fetched";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.loading = "failed";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async getAllVehicles(): Promise<AxiosResponse<any, any>> {
|
||||||
|
return await http.get(`/admin/vehicle?noLimit=true`).then((res) => {
|
||||||
|
return { ...res, data: res.data.vehicles };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async getVehiclesByIds(ids: Array<string>): Promise<AxiosResponse<any, any>> {
|
||||||
|
return await http
|
||||||
|
.post(`/admin/vehicle/ids`, {
|
||||||
|
ids,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
return { ...res, data: res.data.vehicles };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async searchVehicles(search: string): Promise<AxiosResponse<any, any>> {
|
||||||
|
return await http.get(`/admin/vehicle?search=${search}&noLimit=true`).then((res) => {
|
||||||
|
return { ...res, data: res.data.vehicles };
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchVehicleByActiveId() {
|
||||||
|
this.loadingActive = "loading";
|
||||||
|
http
|
||||||
|
.get(`/admin/vehicle/${this.activeVehicle}`)
|
||||||
|
.then((res) => {
|
||||||
|
this.activeVehicleObj = res.data;
|
||||||
|
this.loadingActive = "fetched";
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.loadingActive = "failed";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchVehicleById(id: string) {
|
||||||
|
return http.get(`/admin/vehicle/${id}`);
|
||||||
|
},
|
||||||
|
fetchVehicleStatisticsByActiveId() {
|
||||||
|
http
|
||||||
|
.get(`/admin/vehicle/${this.activeVehicle}/statistics`)
|
||||||
|
.then((res) => {
|
||||||
|
this.activeVehicleStatistics = res.data;
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
},
|
||||||
|
async printVehicleByActiveId() {
|
||||||
|
return http.get(`/admin/vehicle/${this.activeVehicle}/print`, {
|
||||||
|
responseType: "blob",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fetchVehicleStatisticsById(id: string) {
|
||||||
|
return http.get(`/admin/vehicle/${id}/statistics`);
|
||||||
|
},
|
||||||
|
async createVehicle(vehicle: CreateVehicleViewModel): Promise<AxiosResponse<any, any>> {
|
||||||
|
const result = await http.post(`/admin/vehicle`, {
|
||||||
|
salutationId: vehicle.salutationId,
|
||||||
|
firstname: vehicle.firstname,
|
||||||
|
lastname: vehicle.lastname,
|
||||||
|
nameaffix: vehicle.nameaffix,
|
||||||
|
birthdate: vehicle.birthdate,
|
||||||
|
internalId: vehicle.internalId,
|
||||||
|
});
|
||||||
|
this.fetchVehicles();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
async updateActiveVehicle(vehicle: UpdateVehicleViewModel): Promise<AxiosResponse<any, any>> {
|
||||||
|
const result = await http.patch(`/admin/vehicle/${vehicle.id}`, {
|
||||||
|
salutationId: vehicle.salutationId,
|
||||||
|
firstname: vehicle.firstname,
|
||||||
|
lastname: vehicle.lastname,
|
||||||
|
nameaffix: vehicle.nameaffix,
|
||||||
|
birthdate: vehicle.birthdate,
|
||||||
|
internalId: vehicle.internalId,
|
||||||
|
});
|
||||||
|
this.fetchVehicles();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
async deleteVehicle(vehicle: number): Promise<AxiosResponse<any, any>> {
|
||||||
|
const result = await http.delete(`/admin/vehicle/${vehicle}`);
|
||||||
|
this.fetchVehicles();
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -1,27 +1,33 @@
|
||||||
export type PermissionSection = "club" | "unit" | "configuration" | "management";
|
export type PermissionSection = "club" | "unit" | "configuration" | "management";
|
||||||
|
|
||||||
export type PermissionModule =
|
export type PermissionModule =
|
||||||
|
// club
|
||||||
| "member"
|
| "member"
|
||||||
| "calendar"
|
| "calendar"
|
||||||
| "newsletter"
|
| "newsletter"
|
||||||
| "newsletter_config"
|
|
||||||
| "protocol"
|
| "protocol"
|
||||||
|
| "query"
|
||||||
| "listprint"
|
| "listprint"
|
||||||
|
// unit
|
||||||
|
| "equipment"
|
||||||
|
| "vehicle"
|
||||||
|
// configuration
|
||||||
| "qualification"
|
| "qualification"
|
||||||
| "award"
|
| "award"
|
||||||
| "executive_position"
|
| "executive_position"
|
||||||
| "communication_type"
|
| "communication_type"
|
||||||
| "membership_status"
|
| "membership_status"
|
||||||
|
| "newsletter_config"
|
||||||
| "salutation"
|
| "salutation"
|
||||||
| "calendar_type"
|
| "calendar_type"
|
||||||
| "user"
|
|
||||||
| "role"
|
|
||||||
| "webapi"
|
|
||||||
| "query"
|
|
||||||
| "query_store"
|
| "query_store"
|
||||||
| "template"
|
| "template"
|
||||||
| "template_usage"
|
| "template_usage"
|
||||||
| "backup";
|
| "backup"
|
||||||
|
// management
|
||||||
|
| "user"
|
||||||
|
| "role"
|
||||||
|
| "webapi";
|
||||||
|
|
||||||
export type PermissionType = "read" | "create" | "update" | "delete";
|
export type PermissionType = "read" | "create" | "update" | "delete";
|
||||||
|
|
||||||
|
|
@ -52,6 +58,8 @@ export const permissionModules: Array<PermissionModule> = [
|
||||||
"newsletter_config",
|
"newsletter_config",
|
||||||
"protocol",
|
"protocol",
|
||||||
"listprint",
|
"listprint",
|
||||||
|
"equipment",
|
||||||
|
"vehicle",
|
||||||
"qualification",
|
"qualification",
|
||||||
"award",
|
"award",
|
||||||
"executive_position",
|
"executive_position",
|
||||||
|
|
@ -71,7 +79,7 @@ export const permissionModules: Array<PermissionModule> = [
|
||||||
export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
|
export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
|
||||||
export const sectionsAndModules: SectionsAndModulesObject = {
|
export const sectionsAndModules: SectionsAndModulesObject = {
|
||||||
club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
|
club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
|
||||||
unit: [],
|
unit: ["equipment", "vehicle"],
|
||||||
configuration: [
|
configuration: [
|
||||||
"qualification",
|
"qualification",
|
||||||
"award",
|
"award",
|
||||||
|
|
|
||||||
39
src/viewmodels/admin/unit/equipment/equipment.models.ts
Normal file
39
src/viewmodels/admin/unit/equipment/equipment.models.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
export interface EquipmentViewModel {
|
||||||
|
id: string;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EquipmentStatisticsViewModel {
|
||||||
|
id: string;
|
||||||
|
salutation: string;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
todayAge: number;
|
||||||
|
ageThisYear: number;
|
||||||
|
exactAge: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateEquipmentViewModel {
|
||||||
|
salutationId: number;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateEquipmentViewModel {
|
||||||
|
id: string;
|
||||||
|
salutationId: number;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
|
}
|
||||||
39
src/viewmodels/admin/unit/vehicle/vehicle.models.ts
Normal file
39
src/viewmodels/admin/unit/vehicle/vehicle.models.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
export interface VehicleViewModel {
|
||||||
|
id: string;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VehicleStatisticsViewModel {
|
||||||
|
id: string;
|
||||||
|
salutation: string;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
todayAge: number;
|
||||||
|
ageThisYear: number;
|
||||||
|
exactAge: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateVehicleViewModel {
|
||||||
|
salutationId: number;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateVehicleViewModel {
|
||||||
|
id: string;
|
||||||
|
salutationId: number;
|
||||||
|
firstname: string;
|
||||||
|
lastname: string;
|
||||||
|
nameaffix: string;
|
||||||
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
|
}
|
||||||
70
src/views/admin/unit/equipment/Equipment.vue
Normal file
70
src/views/admin/unit/equipment/Equipment.vue
Normal 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ätschaften</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #diffMain>
|
||||||
|
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
|
||||||
|
<Pagination
|
||||||
|
:items="[]"
|
||||||
|
:totalCount="totalCount"
|
||||||
|
:indicateLoading="loading == 'loading'"
|
||||||
|
:useSearch="true"
|
||||||
|
@load-data="(offset, count, search) => fetchEquipments(offset, count, search)"
|
||||||
|
@search="(search) => fetchEquipments(0, maxEntriesPerPage, search, true)"
|
||||||
|
>
|
||||||
|
<template #pageRow="{ row }: { row: EquipmentViewModel }">
|
||||||
|
<EquipmentListItem :equipment="row" />
|
||||||
|
</template>
|
||||||
|
</Pagination>
|
||||||
|
|
||||||
|
<div class="flex flex-row gap-4">
|
||||||
|
<button v-if="can('create', 'club', 'equipment')" primary class="!w-fit" @click="openCreateModal">
|
||||||
|
Gerätschaft 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 { 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 EquipmentListItem from "../../../../components/admin/unit/equipment/EquipmentListItem.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default defineComponent({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 0,
|
||||||
|
maxEntriesPerPage: 25,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(useEquipmentStore, ["equipments", "totalCount", "loading"]),
|
||||||
|
...mapState(useAbilityStore, ["can"]),
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.fetchEquipments(0, this.maxEntriesPerPage, "", true);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(useEquipmentStore, ["fetchEquipments"]),
|
||||||
|
...mapActions(useModalStore, ["openModal"]),
|
||||||
|
openCreateModal() {
|
||||||
|
this.openModal(
|
||||||
|
markRaw(defineAsyncComponent(() => import("@/components/admin/unit/equipment/CreateEquipmentModal.vue")))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
70
src/views/admin/unit/vehicle/Vehicle.vue
Normal file
70
src/views/admin/unit/vehicle/Vehicle.vue
Normal 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">Fahrzeuge</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #diffMain>
|
||||||
|
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
|
||||||
|
<Pagination
|
||||||
|
:items="[]"
|
||||||
|
:totalCount="totalCount"
|
||||||
|
:indicateLoading="loading == 'loading'"
|
||||||
|
:useSearch="true"
|
||||||
|
@load-data="(offset, count, search) => fetchVehicles(offset, count, search)"
|
||||||
|
@search="(search) => fetchVehicles(0, maxEntriesPerPage, search, true)"
|
||||||
|
>
|
||||||
|
<template #pageRow="{ row }: { row: VehicleViewModel }">
|
||||||
|
<VehicleListItem :vehicle="row" />
|
||||||
|
</template>
|
||||||
|
</Pagination>
|
||||||
|
|
||||||
|
<div class="flex flex-row gap-4">
|
||||||
|
<button v-if="can('create', 'unit', 'equipment')" primary class="!w-fit" @click="openCreateModal">
|
||||||
|
Fahrzeug 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 { useVehicleStore } from "@/stores/admin/unit/vehicle/vehicle";
|
||||||
|
import { useModalStore } from "@/stores/modal";
|
||||||
|
import Pagination from "@/components/Pagination.vue";
|
||||||
|
import { useAbilityStore } from "@/stores/ability";
|
||||||
|
import type { VehicleViewModel } from "../../../../viewmodels/admin/unit/vehicle/vehicle.models";
|
||||||
|
import VehicleListItem from "../../../../components/admin/unit/vehicle/VehicleListItem.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default defineComponent({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage: 0,
|
||||||
|
maxEntriesPerPage: 25,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(useVehicleStore, ["vehicles", "totalCount", "loading"]),
|
||||||
|
...mapState(useAbilityStore, ["can"]),
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.fetchVehicles(0, this.maxEntriesPerPage, "", true);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(useVehicleStore, ["fetchVehicles"]),
|
||||||
|
...mapActions(useModalStore, ["openModal"]),
|
||||||
|
openCreateModal() {
|
||||||
|
this.openModal(
|
||||||
|
markRaw(defineAsyncComponent(() => import("@/components/admin/unit/vehicle/CreateVehicleModal.vue")))
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Loading…
Add table
Reference in a new issue