mission detail form
This commit is contained in:
parent
e57738649a
commit
49121fba9b
5 changed files with 258 additions and 7 deletions
135
src/components/admin/ForceSelect.vue
Normal file
135
src/components/admin/ForceSelect.vue
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div class="w-full">
|
||||
<Combobox v-model="selected" by="id">
|
||||
<ComboboxLabel>{{ title }}</ComboboxLabel>
|
||||
<div class="relative mt-1">
|
||||
<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="
|
||||
(force) =>
|
||||
((force as ForceViewModel)?.firstname ?? '') + ' ' + ((force as ForceViewModel)?.lastname ?? '')
|
||||
"
|
||||
@input="query = $event.target.value"
|
||||
/>
|
||||
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</ComboboxButton>
|
||||
</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 bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
|
||||
>
|
||||
<div
|
||||
v-if="availableForces.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"
|
||||
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.firstname }} {{ person.lastname }}
|
||||
</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 { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: String,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
availableForces: {
|
||||
type: Array as PropType<Array<ForceViewModel>>,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: "" as string,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selected: {
|
||||
get() {
|
||||
return this.modelValue;
|
||||
},
|
||||
set(val: Array<string>) {
|
||||
this.$emit("update:model-value", val);
|
||||
},
|
||||
},
|
||||
filtered() {
|
||||
return this.query == ""
|
||||
? this.availableForces
|
||||
: this.availableForces.filter((f) => {
|
||||
return this.query
|
||||
.toLocaleLowerCase()
|
||||
.split(" ")
|
||||
.some((q) => f.firstname.toLocaleLowerCase().includes(q) || f.lastname.toLocaleLowerCase().includes(q));
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -81,7 +81,7 @@ a[button].disabled {
|
|||
input:not([type="checkbox"]),
|
||||
textarea,
|
||||
select {
|
||||
@apply 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;
|
||||
@apply 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 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none;
|
||||
}
|
||||
|
||||
input[readonly],
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export const useForceStore = defineStore("force", {
|
|||
state: () => {
|
||||
return {
|
||||
forces: [] as Array<ForceViewModel & { tab_pos: number }>,
|
||||
availableForces: [] as Array<ForceViewModel>,
|
||||
totalCount: 0 as number,
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
};
|
||||
|
|
@ -40,6 +41,15 @@ export const useForceStore = defineStore("force", {
|
|||
this.loading = "failed";
|
||||
});
|
||||
},
|
||||
getAvailableForces() {
|
||||
this.availableForces = [];
|
||||
http
|
||||
.get(`/admin/force?available=true`)
|
||||
.then((res) => {
|
||||
this.availableForces = res.data.forces;
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
async getAllForces(): Promise<AxiosResponse<any, any>> {
|
||||
return await http.get(`/admin/force?noLimit=true`).then((res) => {
|
||||
return { ...res, data: res.data.forces };
|
||||
|
|
|
|||
102
src/views/admin/operation/mission/MissionDetail.vue
Normal file
102
src/views/admin/operation/mission/MissionDetail.vue
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div>
|
||||
<label for="title">Einsatztitel</label>
|
||||
<input type="text" id="title" />
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<ForceSelect title="Einsatzleiter" :available-forces="availableForces" />
|
||||
<ForceSelect title="Bericht Ersteller" :available-forces="availableForces" />
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<div class="grow">
|
||||
<label for="title">Einsatzbeginn</label>
|
||||
<input type="datetime-local" id="title" />
|
||||
</div>
|
||||
<div class="grow">
|
||||
<label for="title">Einsatzende</label>
|
||||
<input type="datetime-local" id="title" />
|
||||
</div>
|
||||
<div class="w-full sm:w-fit min-w-fit">
|
||||
<p>Dauer</p>
|
||||
<p
|
||||
class="rounded-md shadow-sm relative block w-full sm:w-fit px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
|
||||
>
|
||||
00h 00m
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="title">Stichwort</label>
|
||||
<input type="text" id="title" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="title">Einsatzort</label>
|
||||
<input type="text" id="title" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="title">Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)</label>
|
||||
<input type="text" id="title" />
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<div class="w-full">
|
||||
<label for="title">Anzahl getretteter Personen</label>
|
||||
<input type="number" id="title" value="0" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="title">Anzahl geborgener Personen</label>
|
||||
<input type="number" id="title" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label for="summary">Einsatzbeschreibung</label>
|
||||
<QuillEditor
|
||||
id="summary"
|
||||
theme="snow"
|
||||
style="height: 250px; max-height: 250px; min-height: 250px"
|
||||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
:enable="can('create', 'operation', 'mission')"
|
||||
:style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
<!--v-model:content=""-->
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p>Eingesetzte Fahrzeuge</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p>Eingesetztes Material</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<p>Kontaktdaten</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit">Knopf</button>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { QuillEditor } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { toolbarOptions } from "@/helpers/quillConfig";
|
||||
import ForceSelect from "@/components/admin/ForceSelect.vue";
|
||||
import { useForceStore } from "@/stores/admin/configuration/force";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
...mapState(useForceStore, ["availableForces"]),
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -4,15 +4,15 @@
|
|||
<RouterLink :to="{ name: 'admin-operation-mission-default' }" class="text-primary">zurück zur Liste</RouterLink>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
|
||||
<div class="flex flex-col gap-2 grow px-2 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">
|
||||
<div class="w-full flex flex-row justify-center">
|
||||
<RouterLink
|
||||
v-for="tab in tabs"
|
||||
:key="tab.hash"
|
||||
:to="{ hash: tab.hash }"
|
||||
replace
|
||||
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
|
||||
class="w-full p-0.5 first:pl-0 last:pr-0"
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</p>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div v-if="routeHash == '#edit'">hi</div>
|
||||
<MissionDetail v-if="routeHash == '#edit'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -37,8 +37,10 @@
|
|||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useConnectionStore } from "@/stores/admin/operation/connection";
|
||||
import MissionDetail from "./MissionDetail.vue";
|
||||
import { useForceStore } from "@/stores/admin/configuration/force";
|
||||
import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -50,6 +52,7 @@ export default defineComponent({
|
|||
{ hash: "#presence", title: "Anwesenheit" },
|
||||
{ hash: "#protocol", title: "Protokoll" },
|
||||
],
|
||||
forces: [] as Array<ForceViewModel>,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -58,7 +61,6 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
routeHash() {
|
||||
return this.$route.hash;
|
||||
},
|
||||
|
|
@ -66,9 +68,11 @@ export default defineComponent({
|
|||
mounted() {
|
||||
this.manageHash();
|
||||
this.connectClient();
|
||||
this.getAvailableForces();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useConnectionStore, ["connectClient"]),
|
||||
...mapActions(useForceStore, ["getAvailableForces"]),
|
||||
manageHash() {
|
||||
if (!this.$route.hash || !this.tabs.map((t) => t.hash).includes(this.$route.hash)) {
|
||||
this.$router.replace({ hash: this.tabs[0].hash });
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue