Newsletter base views and Data display

src/views/admin/club/newsletter/NewsletterDates.vue

@@ -0,0 +1,84 @@
+<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="fetchNewsletterDates" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+
+    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+      <details
+        v-for="item in dates"
+        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>
+          <p>{{ item.calendar.title }} {{ item.calendar.starttime }}</p>
+        </summary>
+        <input
+          type="text"
+          name="title"
+          id="title"
+          placeholder="Einscheidung"
+          autocomplete="off"
+          v-model="item.diffTitle"
+          @keyup.prevent
+          :disabled="!can('create', 'club', 'newsletter')"
+        />
+        <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.diffDescription"
+          :enable="can('create', 'club', 'newsletter')"
+          :style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
+        />
+      </details>
+    </div>
+
+    <button v-if="can('create', 'club', 'newsletter')" primary class="!w-fit" @click="addEntry">
+      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 { useNewsletterStore } from "@/stores/admin/newsletter";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { toolbarOptions } from "@/helpers/quillConfig";
+import { useNewsletterDatesStore } from "@/stores/admin/newsletterDates";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    newsletterId: String,
+  },
+  computed: {
+    ...mapWritableState(useNewsletterDatesStore, ["dates", "loading"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchNewsletterDates();
+  },
+  methods: {
+    ...mapActions(useNewsletterDatesStore, ["fetchNewsletterDates"]),
+    addEntry(){
+      // modal to select date
+    }
+  },
+});
+</script>