114 lines
4 KiB
Vue
114 lines
4 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
|
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
|
<p v-else-if="loading == 'failed'" @click="fetchProtocolDecision" class="cursor-pointer">
|
|
↺ laden fehlgeschlagen
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-2 h-full overflow-y-scroll">
|
|
<details
|
|
v-for="(item, index) in sortedDecision"
|
|
class="flex flex-col rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
|
|
>
|
|
<summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
|
|
<svg
|
|
indicator
|
|
class="fill-white stroke-white opacity-75 w-4 h-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
|
|
</svg>
|
|
|
|
<input
|
|
type="text"
|
|
name="title"
|
|
id="title"
|
|
placeholder="Entscheidung"
|
|
autocomplete="off"
|
|
v-model="item.topic"
|
|
@keyup.prevent
|
|
:disabled="!can('create', 'club', 'protocol')"
|
|
/>
|
|
|
|
<div class="flex flex-col">
|
|
<ChevronUpIcon
|
|
v-if="index != 0"
|
|
class="text-white w-4 h-4 stroke-2"
|
|
@click.prevent="changeSort('up', item.id, index)"
|
|
/>
|
|
<ChevronDownIcon
|
|
v-if="index != decision.length - 1"
|
|
class="text-white w-4 h-4 stroke-2"
|
|
@click.prevent="changeSort('down', item.id, index)"
|
|
/>
|
|
</div>
|
|
</summary>
|
|
<QuillEditor
|
|
id="top"
|
|
theme="snow"
|
|
placeholder="Entscheidung Inhalt..."
|
|
style="height: 250px; max-height: 250px; min-height: 250px"
|
|
contentType="html"
|
|
:toolbar="toolbarOptions"
|
|
v-model:content="item.context"
|
|
:enable="can('create', 'club', 'protocol')"
|
|
:style="!can('create', 'club', 'protocol') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
|
/>
|
|
</details>
|
|
</div>
|
|
|
|
<button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolDecision">
|
|
Eintrag hinzufügen
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { mapActions, mapState, mapWritableState } from "pinia";
|
|
import Spinner from "@/components/Spinner.vue";
|
|
import { QuillEditor } from "@vueup/vue-quill";
|
|
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|
import { toolbarOptions } from "@/helpers/quillConfig";
|
|
import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
|
|
import { useAbilityStore } from "@/stores/ability";
|
|
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
props: {
|
|
protocolId: String,
|
|
},
|
|
computed: {
|
|
...mapWritableState(useProtocolDecisionStore, ["decision", "loading"]),
|
|
...mapState(useAbilityStore, ["can"]),
|
|
sortedDecision() {
|
|
return this.decision.slice().sort((a, b) => a.sort - b.sort);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.normalizeSort();
|
|
},
|
|
methods: {
|
|
...mapActions(useProtocolDecisionStore, ["fetchProtocolDecision", "createProtocolDecision"]),
|
|
changeSort(dir: "up" | "down", thisId: number, index: number) {
|
|
let affected = this.sortedDecision[dir == "up" ? index - 1 : index + 1]?.id;
|
|
if (affected) {
|
|
this.decision.find((a) => a.id == thisId)!.sort = dir == "up" ? index - 1 : index + 1;
|
|
this.decision.find((a) => a.id == affected)!.sort = dir == "up" ? index + 1 : index - 1;
|
|
}
|
|
this.normalizeSort();
|
|
},
|
|
normalizeSort() {
|
|
let rightSort = this.decision.every((val, index) => val.sort == index);
|
|
if (!rightSort) {
|
|
this.sortedDecision.forEach((e, index) => {
|
|
e.sort = index;
|
|
});
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|