Merge pull request 'sms alarming flag' (#17) from #16-mark-member-phone-as-sms-alarming into main

Reviewed-on: Ehrenamt/member-administration-ui#17

src/components/admin/club/member/MemberCommunicationCreateModal.vue

@@ -93,6 +93,10 @@
         <input type="checkbox" id="isNewsletterMain" />
         <label for="isNewsletterMain">Newsletter hier hin versenden?</label>
       </div>
+      <div v-if="selectedCommunicationType?.fields.includes('mobile')" class="flex flex-row items-center gap-2">
+        <input type="checkbox" id="isSMSAlarming" />
+        <label for="isSMSAlarming">SMS-Alarmierung hier hin versenden?</label>
+      </div>
 
       <div class="flex flex-row gap-2">
         <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
@@ -163,6 +167,7 @@ export default defineComponent({
         streetNumber: formData.streetNumber?.value,
         streetNumberAddition: formData.streetNumberAddition?.value,
         isNewsletterMain: formData.isNewsletterMain.checked,
+        isSMSAlarming: formData.isSMSAlarming?.checked,
         typeId: this.selectedCommunicationType.id,
       };
       this.createCommunication(createCommunication)

src/components/admin/club/member/MemberCommunicationEditModal.vue

@@ -6,7 +6,7 @@
     <br />
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
-    <form v-else-if="communication != null" class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+    <form v-else-if="communication != null" class="flex flex-col gap-4 py-2" @submit.prevent="triggerUpdate">
       <div>
         <p>Type: {{ communication.type.type }}</p>
       </div>
@@ -42,6 +42,10 @@
         <input type="checkbox" id="isNewsletterMain" v-model="communication.isNewsletterMain" />
         <label for="isNewsletterMain">Newsletter hier hin versenden?</label>
       </div>
+      <div v-if="communication.type.fields.includes('mobile')" class="flex flex-row items-center gap-2">
+        <input type="checkbox" id="isSMSAlarming" v-model="communication.isSMSAlarming" />
+        <label for="isSMSAlarming">SMS-Alarmierung hier hin versenden?</label>
+      </div>
 
       <div class="flex flex-row gap-2">
         <button primary-outline type="reset" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
@@ -120,7 +124,7 @@ export default defineComponent({
           this.loading = "failed";
         });
     },
-    triggerCreate(e: any) {
+    triggerUpdate(e: any) {
       if (this.communication == null) return;
       let formData = e.target.elements;
       let updateCommunication: UpdateCommunicationViewModel = {
@@ -133,6 +137,7 @@ export default defineComponent({
         streetNumber: formData.streetNumber?.value,
         streetNumberAddition: formData.streetNumberAddition?.value,
         isNewsletterMain: formData.isNewsletterMain.checked,
+        isSMSAlarming: formData.isSMSAlarming?.checked,
       };
       this.updateCommunication(updateCommunication)
         .then(() => {

src/components/admin/club/member/MemberCommunicationListItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row gap-2 justify-between items-center">
+      <FireIcon class="h-5 w-5 pr-1 box-content" v-if="communication.isSMSAlarming" />
       <EnvelopeIcon class="h-5 w-5 pr-1 box-content" v-if="communication.isNewsletterMain" />
       <p class="grow">{{ communication.type.type }} {{ communication.preferred ? "(bevorzugt)" : "" }}</p>
       <PencilIcon v-if="can('update', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openEditModal" />
@@ -16,7 +17,7 @@
 import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
 import type { CommunicationViewModel } from "@/viewmodels/admin/communication.models";
-import { EnvelopeIcon, PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { EnvelopeIcon, PencilIcon, TrashIcon, FireIcon } from "@heroicons/vue/24/outline";
 import { useModalStore } from "@/stores/modal";
 import { useAbilityStore } from "@/stores/ability";
 </script>

src/main.css

@@ -56,7 +56,8 @@ body {
   @apply w-full h-full overflow-hidden flex flex-col;
 }
 
-button:not([class*="ql"] *):not([class*="fc"]):not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"]),
+/*:not([headlessui]):not([id*="headlessui"]):not([class*="headlessui"])*/
+button:not([class*="ql"] *):not([class*="fc"]),
 a[button] {
   @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
 }

src/stores/admin/communication.ts

@@ -47,6 +47,7 @@ export const useCommunicationStore = defineStore("communication", {
         streetNumberAddition: communication.streetNumberAddition,
         typeId: communication.typeId,
         isNewsletterMain: communication.isNewsletterMain,
+        isSMSAlarming: communication.isSMSAlarming,
       });
       this.fetchCommunicationsForMember();
       return result;
@@ -62,6 +63,7 @@ export const useCommunicationStore = defineStore("communication", {
         streetNumber: communication.streetNumber,
         streetNumberAddition: communication.streetNumberAddition,
         isNewsletterMain: communication.isNewsletterMain,
+        isSMSAlarming: communication.isSMSAlarming,
       });
       this.fetchCommunicationsForMember();
       return result;

src/viewmodels/admin/communication.models.ts

@@ -11,6 +11,7 @@ export interface CommunicationViewModel {
   streetNumberAddition: string;
   type: CommunicationTypeViewModel;
   isNewsletterMain: boolean;
+  isSMSAlarming: boolean;
 }
 
 export interface CreateCommunicationViewModel {
@@ -23,6 +24,7 @@ export interface CreateCommunicationViewModel {
   streetNumberAddition: string;
   typeId: number;
   isNewsletterMain: boolean;
+  isSMSAlarming: boolean;
 }
 
 export interface UpdateCommunicationViewModel {
@@ -35,4 +37,5 @@ export interface UpdateCommunicationViewModel {
   streetNumber: number;
   streetNumberAddition: string;
   isNewsletterMain: boolean;
+  isSMSAlarming: boolean;
 }

src/viewmodels/admin/member.models.ts

@@ -12,6 +12,7 @@ export interface MemberViewModel {
   firstMembershipEntry?: MembershipViewModel;
   lastMembershipEntry?: MembershipViewModel;
   sendNewsletter?: CommunicationViewModel;
+  smsAlarming?: Array<CommunicationViewModel>;
   preferredCommunication?: Array<CommunicationViewModel>;
 }
 

src/views/admin/club/members/MemberOverview.vue

@@ -74,6 +74,24 @@
           </div>
         </div>
       </div>
+      <div v-if="activeMemberObj.smsAlarming?.length != 0">
+        <p>sende SMS-Alarmierung an:</p>
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="com in activeMemberObj.smsAlarming"
+            class="flex flex-col h-fit w-full border border-primary rounded-md"
+          >
+            <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+              <p>
+                {{ com.type.type }}
+              </p>
+            </div>
+            <div class="p-2">
+              <p v-for="field in com.type.fields" :key="field">{{ field }}: {{ com[field] || "--" }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
       <div v-if="activeMemberObj.sendNewsletter">
         <p>Newsletter Kommunikationswege</p>
         <div class="flex flex-col h-fit w-full border border-primary rounded-md">