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"),
|
||||
meta: { type: "read", section: "unit" },
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
{
|
||||
key: "unit",
|
||||
title: "Wehr",
|
||||
levelDefault: "",
|
||||
levelDefault: "equipment",
|
||||
} as topLevelNavigationModel,
|
||||
]
|
||||
: []),
|
||||
|
|
@ -104,6 +104,13 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
...(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: {
|
||||
mainTitle: "Einstellungen",
|
||||
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 PermissionModule =
|
||||
// club
|
||||
| "member"
|
||||
| "calendar"
|
||||
| "newsletter"
|
||||
| "newsletter_config"
|
||||
| "protocol"
|
||||
| "query"
|
||||
| "listprint"
|
||||
// unit
|
||||
| "equipment"
|
||||
| "vehicle"
|
||||
// configuration
|
||||
| "qualification"
|
||||
| "award"
|
||||
| "executive_position"
|
||||
| "communication_type"
|
||||
| "membership_status"
|
||||
| "newsletter_config"
|
||||
| "salutation"
|
||||
| "calendar_type"
|
||||
| "user"
|
||||
| "role"
|
||||
| "webapi"
|
||||
| "query"
|
||||
| "query_store"
|
||||
| "template"
|
||||
| "template_usage"
|
||||
| "backup";
|
||||
| "backup"
|
||||
// management
|
||||
| "user"
|
||||
| "role"
|
||||
| "webapi";
|
||||
|
||||
export type PermissionType = "read" | "create" | "update" | "delete";
|
||||
|
||||
|
|
@ -52,6 +58,8 @@ export const permissionModules: Array<PermissionModule> = [
|
|||
"newsletter_config",
|
||||
"protocol",
|
||||
"listprint",
|
||||
"equipment",
|
||||
"vehicle",
|
||||
"qualification",
|
||||
"award",
|
||||
"executive_position",
|
||||
|
|
@ -71,7 +79,7 @@ export const permissionModules: Array<PermissionModule> = [
|
|||
export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
|
||||
export const sectionsAndModules: SectionsAndModulesObject = {
|
||||
club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
|
||||
unit: [],
|
||||
unit: ["equipment", "vehicle"],
|
||||
configuration: [
|
||||
"qualification",
|
||||
"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