Ehrenamt/ff-operation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

detail form equipment data

Browse source
This commit is contained in:
Julian Krauser 2025-03-06 12:03:47 +01:00
parent e05687c929
commit c5b62d3221
10 changed files with 317 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
src/components/admin/EquipmentSelect.vue Normal file
View file

@ -0,0 +1,138 @@
<template>
<div class="w-full">
<Combobox v-model="selected" :disabled="!enabled">
<ComboboxLabel v-if="!usePlaceholder">{{ title }}</ComboboxLabel>
<div class="relative">
<div
class="rounded-md shadow-sm relative block w-full border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
>
<ComboboxInput
class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(equipment) => selectedEquipment?.name ?? ''"
@input="query = $event.target.value"
:placeholder="usePlaceholder ? title : ''"
/>
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
</div>
<TransitionRoot
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@after-leave="query = ''"
>
<ComboboxOptions
class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
>
<div
v-if="availableEquipment.length === 0"
class="relative cursor-default select-none px-4 py-2 text-gray-700"
>
Keine Auswahl verfügbar
</div>
<div
v-if="filtered.length === 0 && query !== ''"
class="relative cursor-default select-none px-4 py-2 text-gray-700"
>
Keine Treffer
</div>
<ComboboxOption
v-for="person in filtered"
as="template"
:key="person.id"
:value="person.id"
v-slot="{ selected, active }"
>
<li
class="relative cursor-default select-none py-2 pl-10 pr-4"
:class="{
'bg-primary text-white': active,
'text-gray-900': !active,
}"
>
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ person.name }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-primary': !active }"
>
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</TransitionRoot>
</div>
</Combobox>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import {
Combobox,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot,
ComboboxLabel,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import type { EquipmentViewModel } from "@/viewmodels/admin/configuration/equipment.models";
</script>
<script lang="ts">
export default defineComponent({
props: {
title: String,
usePlaceholder: {
type: Boolean,
default: false,
},
enabled: {
type: Boolean,
default: true,
},
modelValue: {
type: String,
default: "",
},
availableEquipment: {
type: Array as PropType<Array<EquipmentViewModel>>,
default: [],
},
},
data() {
return {
query: "" as string,
};
},
computed: {
selected: {
get() {
return this.modelValue;
},
set(val: Array<string>) {
this.$emit("update:model-value", val);
},
},
selectedEquipment() {
return this.availableEquipment.find((ae) => ae.id == this.selected);
},
filtered() {
return this.query == ""
? this.availableEquipment
: this.availableEquipment.filter((e) => {
const arr = this.query.toLocaleLowerCase().split(" ");
return arr.some((q) => e.name.toLocaleLowerCase().includes(q) || e.code?.toLocaleLowerCase().includes(q));
});
},
},
});
</script>

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

@ -1,7 +1,7 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Fahrzeug erstellen</p>
<p class="text-xl font-medium">Gerät erstellen</p>
</div>
<br />
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">

6
src/components/admin/configuration/equipment/DeleteEquipmentModal.vue
View file

@ -1,12 +1,10 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Fahrzeug löschen</p>
<p class="text-xl font-medium">Gerät löschen</p>
</div>
<br />
<p class="text-center">
Fahrzeug {{ equipment?.name }} {{ equipment?.code ? `(${equipment.code})` : "" }} löschen?
</p>
<p class="text-center">Gerät {{ equipment?.name }} {{ equipment?.code ? `(${equipment.code})` : "" }} löschen?</p>
<br />
<div class="flex flex-row gap-2">

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

@ -1,7 +1,7 @@
<template>
<div 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.name }} {{ equipment.type }} {{ equipment.code }}</p>
<p>{{ equipment.name }} {{ equipment.type ? `(${equipment.type})` : "" }} {{ equipment.code }}</p>
<div class="flex flex-row">
<div
v-if="can('update', 'configuration', 'equipment') && !equipment?.decommissioned"

2
src/components/admin/configuration/equipment/UpdateEquipmentModal.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Fahrzeug aktualisieren</p>
<p class="text-xl font-medium">Gerät aktualisieren</p>
</div>
<br />
<Spinner v-if="loading == 'loading' && equipment == null" class="mx-auto" />

82
src/components/admin/operation/mission/DetailFormEquipment.vue Normal file
View file

@ -0,0 +1,82 @@
<template>
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2 items-center">
<p>Eingesetztes Material</p>
<PlusCircleIcon v-if="enabled" class="w-5 h-5 cursor-pointer" @click="showAddForm = !showAddForm" />
</div>
<div v-if="showAddForm" class="flex flex-row gap-2 items-center">
<EquipmentSelect
title="Ausrüstung wählen"
usePlaceholder
:availableEquipment="filteredAvailableEquipments"
@update:model-value="(v) => addEquipment(v)"
/>
<XMarkIcon class="w-5 h-5 cursor-pointer" @click="showAddForm = false" />
</div>
<DetailFormEquipmentItem
v-for="[key, equipment] in equipments"
:key="key"
:equipmentId="key"
:equipment="equipment"
:awareness="awareness"
:enabled="enabled"
@remove="removeEquipment(key)"
/>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import * as Y from "yjs";
import { Awareness } from "@/helpers/awareness";
import DetailFormEquipmentItem from "./DetailFormEquipmentItem.vue";
import { PlusCircleIcon, XMarkIcon } from "@heroicons/vue/24/outline";
import { mapState } from "pinia";
import { useEquipmentStore } from "@/stores/admin/configuration/equipment";
import EquipmentSelect from "../../EquipmentSelect.vue";
</script>
<script lang="ts">
export default defineComponent({
props: {
map: {
type: Object as PropType<Y.Map<Y.Map<number | string>>>,
required: true,
},
awareness: {
type: Object as PropType<Awareness>,
required: true,
},
enabled: {
type: Boolean,
default: true,
},
},
data() {
return {
showAddForm: false as boolean,
};
},
computed: {
...mapState(useEquipmentStore, ["availableEquipments"]),
equipments() {
return Array.from(this.map.entries());
},
filteredAvailableEquipments() {
let added = Array.from(this.map.keys());
return this.availableEquipments.filter((av) => !added.includes(av.id));
},
},
methods: {
addEquipment(equipmentId: string) {
if (this.map.has(equipmentId)) return;
this.map.set(equipmentId, new Y.Map<string | number>());
this.showAddForm = false;
},
removeEquipment(equipmentId: string) {
this.map.delete(equipmentId);
},
},
});
</script>

73
src/components/admin/operation/mission/DetailFormEquipmentItem.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<div
class="flex flex-col md:flex-row gap-2 rounded-md shadow-sm relative w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
>
<div class="flex flex-row gap-2 items-center">
<TrashIcon class="w-5 h-5 min-w-5 min-h-5 cursor-pointer" @click="$emit('remove')" />
<p
class="flex w-full md:w-32 md:min-w-32 h-full justify-center items-center rounded-md shadow-sm relative px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
>
{{ selectedEquipment?.name }}
</p>
</div>
<DetailFormInput
:ident="equipmentId + 'note'"
title="Notiz"
v-model="note"
type="text"
:awareness="awareness"
:enabled="enabled"
/>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import * as Y from "yjs";
import { Awareness } from "@/helpers/awareness";
import { useEquipmentStore } from "@/stores/admin/configuration/equipment";
import { useForceStore } from "@/stores/admin/configuration/force";
import DetailFormInput from "./DetailFormInput.vue";
import { TrashIcon } from "@heroicons/vue/24/outline";
</script>
<script lang="ts">
export default defineComponent({
props: {
equipmentId: {
type: String,
required: true,
},
equipment: {
type: Object as PropType<Y.Map<string | number>>,
required: true,
},
awareness: {
type: Object as PropType<Awareness>,
required: true,
},
enabled: {
type: Boolean,
default: true,
},
},
emits: ["remove"],
computed: {
...mapState(useForceStore, ["availableForces"]),
...mapState(useEquipmentStore, ["availableEquipments"]),
selectedEquipment() {
return this.availableEquipments.find((av) => av.id == this.equipmentId);
},
note: {
get() {
return this.equipment.get("note") as string;
},
set(val: string) {
this.equipment.set("note", val);
},
},
},
});
</script>

10
src/components/admin/operation/mission/DetailFormVehicleItem.vue
View file

@ -60,7 +60,7 @@ import { TrashIcon } from "@heroicons/vue/24/outline";
export default defineComponent({
props: {
vehicleId: {
type: Object as PropType<string>,
type: String,
required: true,
},
vehicle: {
@ -103,16 +103,16 @@ export default defineComponent({
get() {
return this.vehicle.get("mileage_start") as string;
},
set(val: string) {
this.vehicle.set("mileage_start", val);
set(val: number) {
this.vehicle.set("mileage_start", val.toString());
},
},
mileage_end: {
get() {
return this.vehicle.get("mileage_end") as string;
},
set(val: string) {
this.vehicle.set("mileage_end", val);
set(val: number) {
this.vehicle.set("mileage_end", val.toString());
},
},
},

9
src/components/admin/operation/mission/MissionDetail.vue
View file

@ -65,9 +65,7 @@
</div>
<DetailFormEditor title="Einsatzbeschreibung" :text="editor" :awareness="awareness" :enabled="enabled" />
<DetailFormVehicle :map="vehicle" :awareness="awareness" :enabled="enabled" />
<div class="flex flex-col">
<p>Eingesetztes Material</p>
</div>
<DetailFormEquipment :map="equipment" :awareness="awareness" :enabled="enabled" />
<div class="flex flex-col">
<p>Kontaktdaten</p>
</div>
@ -84,6 +82,7 @@ import DetailFormInput from "./DetailFormInput.vue";
import DetailFormEditor from "./DetailFormEditor.vue";
import DetailFormVehicle from "./DetailFormVehicle.vue";
import ForceSelect from "@/components/admin/ForceSelect.vue";
import DetailFormEquipment from "./DetailFormEquipment.vue";
</script>
<script lang="ts">
@ -202,10 +201,10 @@ export default defineComponent({
return this.document.getMap<Y.Map<number | string>>("vehicle");
},
equipment() {
return this.document.getMap("equipment");
return this.document.getMap<Y.Map<number | string>>("equipment");
},
contact() {
return this.document.getMap("contact");
return this.document.getMap<Y.Map<number | string>>("contact");
},
},
});

10
src/stores/admin/configuration/equipment.ts
View file

@ -11,6 +11,7 @@ export const useEquipmentStore = defineStore("equipment", {
state: () => {
return {
equipments: [] as Array<EquipmentViewModel & { tab_pos: number }>,
availableEquipments: [] as Array<EquipmentViewModel>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
};
@ -40,6 +41,15 @@ export const useEquipmentStore = defineStore("equipment", {
this.loading = "failed";
});
},
getAvailableEquipments() {
this.availableEquipments = [];
http
.get(`/admin/equipment?available=true`)
.then((res) => {
this.availableEquipments = res.data.equipments;
})
.catch((err) => {});
},
async getAllEquipments(): Promise<AxiosResponse<any, any>> {
return await http.get(`/admin/equipment?noLimit=true`).then((res) => {
return { ...res, data: res.data.equipments };