<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="fetchProtocolVoting" class="cursor-pointer"> ↺ laden fehlgeschlagen </p> <div class="flex flex-col gap-2 h-full overflow-y-auto"> <details v-for="item in voting" class="flex flex-col gap-2 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 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="Einscheidung" autocomplete="off" v-model="item.topic" @keyup.prevent :disabled="!can('create', 'club', 'protocol')" /> </summary> <QuillEditor id="top" theme="snow" placeholder="Entscheidung Inhalt..." style="height: 100px; max-height: 100px; min-height: 100px" 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)' : ''" /> <div class="px-2 pb-2"> <p>Ergebnis:</p> <div class="flex flex-row gap-2"> <div class="w-full"> <p>dafür</p> <input type="number" v-model="item.favour" /> </div> <div class="w-full"> <p>dagegen</p> <input type="number" v-model="item.against" /> </div> <div class="w-full"> <p>enthalten</p> <input type="number" v-model="item.abstain" /> </div> </div> </div> </details> </div> <button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolVoting"> Abstimmung hinzufügen </button> </div> </template> <script setup lang="ts"> import { defineComponent } from "vue"; import { mapActions, mapState } from "pinia"; import Spinner from "@/components/Spinner.vue"; import { useProtocolStore } from "@/stores/admin/protocol"; import { QuillEditor } from "@vueup/vue-quill"; import "@vueup/vue-quill/dist/vue-quill.snow.css"; import { toolbarOptions } from "@/helpers/quillConfig"; import { useProtocolVotingStore } from "@/stores/admin/protocolVoting"; import { useAbilityStore } from "@/stores/ability"; </script> <script lang="ts"> export default defineComponent({ props: { protocolId: String, }, computed: { ...mapState(useProtocolVotingStore, ["voting", "loading"]), ...mapState(useAbilityStore, ["can"]), }, mounted() { this.fetchProtocolVoting(); }, methods: { ...mapActions(useProtocolVotingStore, ["fetchProtocolVoting", "createProtocolVoting"]), }, }); </script>