Merge branch 'milestone/ff-admin-unit' into unit/#70-build-ui-demo

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ff-admin",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ff-admin",
-      "version": "1.3.2",
+      "version": "1.3.5",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fullcalendar/core": "^6.1.15",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ff-admin",
-  "version": "1.3.2",
+  "version": "1.3.5",
   "description": "Feuerwehr/Verein Mitgliederverwaltung UI",
   "type": "module",
   "scripts": {

src/components/admin/club/newsletter/NewsletterMailProgressModal.vue

@@ -19,7 +19,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal">abbrechen</button>
+        <button primary-outline @click="closeModal">schließen</button>
       </div>
     </div>
   </div>

src/components/admin/club/newsletter/NewsletterMailRecipientsModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Newsletter Mail Empfänger</p>
+    </div>
+    <br />
+
+    <p v-if="receivers.length == 0">keine Empfänger gefunden</p>
+    <p v-else>{{ receivers.length }} Empfänger gefunden</p>
+    <div class="flex flex-col gap-2 h-96 overflow-y-scroll">
+      <p
+        v-for="rec in receivers"
+        :key="rec.id"
+        class="bg-primary p-2 text-white flex flex-row justify-between items-center rounded-md"
+      >
+        {{ rec.lastname }}, {{ rec.firstname }}
+      </p>
+    </div>
+
+    <div class="flex flex-row gap-4 py-2 w-full">
+      <button primary @click="start">Versand starten</button>
+      <button primary-outline @click="closeModal">Versand abbrechen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      receivers: [] as Array<MemberViewModel>,
+      error: null as null | string,
+    };
+  },
+  mounted() {
+    this.fetchNewsletterMailReceivers()
+      .then((res) => {
+        this.receivers = res.data;
+      })
+      .catch((err) => {
+        this.error = "Fehler beim Laden der Empfänger";
+      });
+  },
+  methods: {
+    ...mapActions(useNewsletterPrintoutStore, ["fetchNewsletterMailReceivers", "createNewsletterSend"]),
+    ...mapActions(useModalStore, ["openModal", "closeModal"]),
+    start() {
+      this.createNewsletterSend();
+      this.openMailLogs();
+    },
+    openMailLogs() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterMailProgressModal.vue"))
+        )
+      );
+    },
+  },
+});
+</script>

src/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue

@@ -19,7 +19,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal">abbrechen</button>
+        <button primary-outline @click="closeModal">schließen</button>
       </div>
     </div>
   </div>

src/components/admin/club/newsletter/NewsletterPrintingRecipientsModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Newsletter Druck Empfänger</p>
+    </div>
+    <br />
+
+    <p v-if="receivers.length == 0">keine Empfänger gefunden</p>
+    <p v-else>{{ receivers.length }} Empfänger gefunden</p>
+    <div class="flex flex-col gap-2 h-96 overflow-y-scroll">
+      <p
+        v-for="rec in receivers"
+        :key="rec.id"
+        class="bg-primary p-2 text-white flex flex-row justify-between items-center rounded-md"
+      >
+        {{ rec.lastname }}, {{ rec.firstname }}
+      </p>
+    </div>
+
+    <div class="flex flex-row gap-4 py-2 w-full">
+      <button primary @click="start">Druck starten</button>
+      <button primary-outline @click="closeModal">Druck abbrechen</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      receivers: [] as Array<MemberViewModel>,
+      error: null as null | string,
+    };
+  },
+  mounted() {
+    this.fetchNewsletterPrintReceivers()
+      .then((res) => {
+        this.receivers = res.data;
+      })
+      .catch((err) => {
+        this.error = "Fehler beim Laden der Empfänger";
+      });
+  },
+  methods: {
+    ...mapActions(useNewsletterPrintoutStore, ["fetchNewsletterPrintReceivers", "createNewsletterPrintout"]),
+    ...mapActions(useModalStore, ["openModal", "closeModal"]),
+    start() {
+      this.createNewsletterPrintout();
+      this.openPdfLogs();
+    },
+    openPdfLogs() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue"))
+        )
+      );
+    },
+  },
+});
+</script>

src/components/queryBuilder/BuilderHost.vue

@@ -32,7 +32,7 @@
       >
         <select v-model="activeQueryId" class="max-h-[34px] !py-0">
           <option :value="undefined" disabled>gepeicherte Anfrage auswählen</option>
-          <option v-for="query in queries" :key="query.id" :value="query.id" @click="value = query.query">
+          <option v-for="query in queries" :key="query.id" :value="query.id">
             {{ query.title }}
           </option>
         </select>
@@ -54,7 +54,7 @@
           class="p-1"
           :class="typeof value == 'object' ? 'bg-gray-200' : ''"
           title="Visual Builder"
-          @click="queryMode = 'builder'"
+          @click="changeMode('builder')"
         >
           <RectangleGroupIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
@@ -62,7 +62,7 @@
           class="p-1"
           :class="typeof value == 'string' ? 'bg-gray-200' : ''"
           title="SQL Editor"
-          @click="queryMode = 'editor'"
+          @click="changeMode('editor')"
         >
           <CommandLineIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
         </div>
@@ -116,21 +116,9 @@ export default defineComponent({
   },
   emits: ["update:model-value", "query:run", "query:save", "results:export", "results:clear"],
   watch: {
-    queryMode() {
-      if (this.queryMode == "builder") {
-        this.value = {
-          select: "*",
-          table: "",
-          where: [],
-          join: [],
-          orderBy: [],
-        };
-      } else {
-        this.value = "";
-      }
-      this.activeQueryId = undefined;
-    },
     activeQueryId() {
+      if (this.activeQueryId == undefined) return;
+
       let query = this.queries.find((t) => t.id == this.activeQueryId)?.query;
       if (query != undefined) {
         if (typeof query == "string") {
@@ -188,6 +176,22 @@ export default defineComponent({
     showStructure() {
       this.openModal(markRaw(defineAsyncComponent(() => import("@/components/queryBuilder/StructureModal.vue"))));
     },
+    changeMode(mode: "editor" | "builder") {
+      this.queryMode = mode;
+
+      this.activeQueryId = undefined;
+      if (this.queryMode == "builder") {
+        this.value = {
+          select: "*",
+          table: "",
+          where: [],
+          join: [],
+          orderBy: [],
+        };
+      } else {
+        this.value = "";
+      }
+    },
   },
 });
 </script>

src/stores/admin/club/newsletter/newsletterPrintout.ts

@@ -45,6 +45,14 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
         responseType: "blob",
       });
     },
+    fetchNewsletterPrintReceivers(): Promise<AxiosResponse<any, any>> {
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      return http.get(`/admin/newsletter/${newsletterId}/printrecipients`);
+    },
+    fetchNewsletterMailReceivers(): Promise<AxiosResponse<any, any>> {
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      return http.get(`/admin/newsletter/${newsletterId}/mailrecipients`);
+    },
     createNewsletterMailPreview() {
       this.sendingPreview = "loading";
       const newsletterId = useNewsletterStore().activeNewsletter;
@@ -116,7 +124,7 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
         chunk.split("//").forEach((r) => {
           if (r.trim() != "") {
             let data = JSON.parse(r);
-            this.pdfSourceMessages.push(data);
+            this.pdfSourceMessages.unshift(data);
             let type: NotificationType = "info";
             let timeout = undefined;
             if (data.factor == "failed") {
@@ -138,7 +146,7 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
         chunk.split("//").forEach((r) => {
           if (r.trim() != "") {
             let data = JSON.parse(r);
-            this.mailSourceMessages.push(data);
+            this.mailSourceMessages.unshift(data);
             let type: NotificationType = "info";
             let timeout = undefined;
             if (data.factor == "failed") {

src/stores/admin/club/protocol/protocolAgenda.ts

@@ -21,7 +21,10 @@ export const useProtocolAgendaStore = defineStore("protocolAgenda", {
   },
   getters: {
     detectedChangeProtocolAgenda: (state) =>
-      !isEqual(state.origin, state.agenda) && state.syncingProtocolAgenda != "syncing",
+      !isEqual(
+        state.origin.sort((a, b) => a.id - b.id),
+        state.agenda.sort((a, b) => a.id - b.id)
+      ) && state.syncingProtocolAgenda != "syncing",
   },
   actions: {
     setProtocolAgendaSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {

src/stores/admin/club/protocol/protocolDecision.ts

@@ -22,7 +22,10 @@ export const useProtocolDecisionStore = defineStore("protocolDecision", {
   },
   getters: {
     detectedChangeProtocolDecision: (state) =>
-      !isEqual(state.origin, state.decision) && state.syncingProtocolDecision != "syncing",
+      !isEqual(
+        state.origin.sort((a, b) => a.id - b.id),
+        state.decision.sort((a, b) => a.id - b.id)
+      ) && state.syncingProtocolDecision != "syncing",
   },
   actions: {
     setProtocolDecisionSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {

src/stores/admin/club/protocol/protocolVoting.ts

@@ -22,7 +22,10 @@ export const useProtocolVotingStore = defineStore("protocolVoting", {
   },
   getters: {
     detectedChangeProtocolVoting: (state) =>
-      !isEqual(state.origin, state.voting) && state.syncingProtocolVoting != "syncing",
+      !isEqual(
+        state.origin.sort((a, b) => a.id - b.id),
+        state.voting.sort((a, b) => a.id - b.id)
+      ) && state.syncingProtocolVoting != "syncing",
   },
   actions: {
     setProtocolVotingSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {

src/stores/admin/club/queryBuilder.ts

@@ -13,8 +13,7 @@ export const useQueryBuilderStore = defineStore("queryBuilder", {
       loadingData: "fetched" as "loading" | "fetched" | "failed",
       queryError: "" as string | { sql: string; code: string; msg: string },
       query: undefined as undefined | DynamicQueryStructure | string,
-      activeQueryId: undefined as undefined | number,
+      activeQueryId: undefined as undefined | string,
-      isLoadedQuery: undefined as undefined | number,
     };
   },
   actions: {

src/stores/admin/configuration/queryStore.ts

@@ -31,7 +31,7 @@ export const useQueryStoreStore = defineStore("queryStore", {
           this.loading = "failed";
         });
     },
-    fetchQueryById(id: number): Promise<AxiosResponse<any, any>> {
+    fetchQueryById(id: string): Promise<AxiosResponse<any, any>> {
       return http.get(`/admin/querystore/${id}`);
     },
     triggerSave() {

src/viewmodels/admin/club/newsletter/newsletter.models.ts

@@ -8,7 +8,7 @@ export interface NewsletterViewModel {
   newsletterText: string;
   newsletterSignatur: string;
   isSent: boolean;
-  recipientsByQueryId?: number | null;
+  recipientsByQueryId?: string | null;
   recipientsByQuery?: QueryViewModel | null;
 }
 
@@ -23,7 +23,7 @@ export interface SyncNewsletterViewModel {
   newsletterTitle: string;
   newsletterText: string;
   newsletterSignatur: string;
-  recipientsByQueryId?: number;
+  recipientsByQueryId?: string;
 }
 
 export interface SendNewsletterViewModel {

src/viewmodels/admin/configuration/query.models.ts

@@ -7,7 +7,7 @@ export interface TableMeta {
 }
 
 export interface QueryViewModel {
-  id: number;
+  id: string;
   title: string;
   query: string | DynamicQueryStructure;
 }
@@ -18,6 +18,6 @@ export interface CreateQueryViewModel {
 }
 
 export interface UpdateQueryViewModel {
-  id: number;
+  id: string;
   query: string | DynamicQueryStructure;
 }

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

@@ -27,7 +27,7 @@
         primary
         class="!w-fit whitespace-nowrap flex flex-row gap-2"
         :disabled="printing != undefined"
-        @click="createNewsletterPrintout"
+        @click="openPdfCommit"
       >
         Newsletter drucken
         <Spinner v-if="printing == 'loading'" class="my-auto" />
@@ -39,7 +39,7 @@
         primary
         class="!w-fit whitespace-nowrap flex flex-row gap-2"
         :disabled="sending != undefined"
-        @click="createNewsletterSend"
+        @click="openMailCommit"
       >
         Mails versenden
         <Spinner v-if="sending == 'loading'" class="my-auto" />
@@ -108,10 +108,8 @@ export default defineComponent({
     ...mapActions(useModalStore, ["openModal"]),
     ...mapActions(useNewsletterPrintoutStore, [
       "fetchNewsletterPrintout",
-      "createNewsletterPrintout",
       "fetchNewsletterPrintoutById",
       "createNewsletterMailPreview",
-      "createNewsletterSend",
     ]),
     openPdfShow(filename?: string) {
       this.openModal(
@@ -132,6 +130,20 @@ export default defineComponent({
         })
         .catch(() => {});
     },
+    openPdfCommit() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPrintingRecipientsModal.vue"))
+        )
+      );
+    },
+    openMailCommit() {
+      this.openModal(
+        markRaw(
+          defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterMailRecipientsModal.vue"))
+        )
+      );
+    },
     openPdfLogs() {
       this.openModal(
         markRaw(

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

@@ -134,10 +134,10 @@ export default defineComponent({
         if (val == "def") {
           this.activeNewsletterObj.recipientsByQueryId = null;
           this.activeNewsletterObj.recipientsByQuery = null;
-        } else if (this.queries.find((q) => q.id == parseInt(val))) {
+        } else if (this.queries.find((q) => q.id == val)) {
-          this.activeNewsletterObj.recipientsByQueryId = parseInt(val);
+          this.activeNewsletterObj.recipientsByQueryId = val;
-          this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == parseInt(val)));
+          this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == val));
-          this.sendQuery(0, 1000, this.recipientsByQuery?.query);
+          this.sendQuery(0, 0, this.recipientsByQuery?.query, true);
         }
       },
     },
@@ -171,7 +171,7 @@ export default defineComponent({
     },
     loadQuery() {
       if (this.recipientsByQuery) {
-        this.sendQuery(0, 1000, this.recipientsByQuery.query);
+        this.sendQuery(0, 0, this.recipientsByQuery.query, true);
       }
     },
   },

vite.config.ts

@@ -58,6 +58,14 @@ export default defineConfig({
           },
         ],
       },
+      workbox: {
+        runtimeCaching: [
+          {
+            urlPattern: /^\/api\//,
+            handler: "NetworkFirst",
+          },
+        ],
+      },
     }),
   ],
   resolve: {