ff-admin/src/views/admin/club/newsletter/NewsletterRecipients.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="fetchNewsletterRecipients" class="cursor-pointer">
      &#8634; laden fehlgeschlagen
    </p>

    <select v-model="recipientsByQueryId">
      <option value="def">Optional</option>
      <option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option>
    </select>
    <p>Empfänger durch gespeicherte Abfrage</p>
    <div class="flex flex-col gap-2 grow overflow-y-auto">
      <div
        v-for="member in queried"
        :key="member.id"
        class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
      >
        <div>
          <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
        </div>
      </div>
    </div>

    <div class="w-full">
      <Combobox v-model="recipients" :disabled="!can('create', 'club', 'newsletter')" multiple>
        <ComboboxLabel>weitere Empfänger suchen</ComboboxLabel>
        <div class="relative mt-1">
          <ComboboxInput
            class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
            @input="query = $event.target.value"
          />
          <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
            <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
          </ComboboxButton>
          <TransitionRoot
            leave="transition ease-in duration-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
            @after-leave="query = ''"
          >
            <ComboboxOptions
              class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
            >
              <ComboboxOption v-if="filtered.length === 0" as="template" disabled>
                <li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
                  <span class="font-normal block truncate"> Keine Auswahl</span>
                </li>
              </ComboboxOption>

              <ComboboxOption
                v-for="member in filtered"
                as="template"
                :key="member.id"
                :value="member.id"
                v-slot="{ selected, active }"
              >
                <li
                  class="relative cursor-default select-none py-2 pl-10 pr-4"
                  :class="{
                    'bg-primary text-white': active,
                    'text-gray-900': !active,
                  }"
                >
                  <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
                    {{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
                  </span>
                  <span
                    v-if="selected"
                    class="absolute inset-y-0 left-0 flex items-center pl-3"
                    :class="{ 'text-white': active, 'text-primary': !active }"
                  >
                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
                  </span>
                </li>
              </ComboboxOption>
            </ComboboxOptions>
          </TransitionRoot>
        </div>
      </Combobox>
    </div>
    <p>Ausgewählte Empfänger</p>
    <div class="flex flex-col gap-2 grow overflow-y-auto">
      <div
        v-for="member in selected"
        :key="member.id"
        class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
      >
        <div>
          <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
        </div>

        <TrashIcon
          v-if="can('create', 'club', 'newsletter')"
          class="w-5 h-5 p-1 box-content cursor-pointer"
          @click="removeSelected(member.id)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import {
  Combobox,
  ComboboxLabel,
  ComboboxInput,
  ComboboxButton,
  ComboboxOptions,
  ComboboxOption,
  TransitionRoot,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { TrashIcon } from "@heroicons/vue/24/outline";
import { useMemberStore } from "@/stores/admin/club/member/member";
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
import { useNewsletterRecipientsStore } from "@/stores/admin/club/newsletter/newsletterRecipients";
import { useAbilityStore } from "@/stores/ability";
import { useQueryStoreStore } from "@/stores/admin/settings/queryStore";
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
import cloneDeep from "lodash.clonedeep";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    newsletterId: String,
  },
  watch: {
    recipientsByQuery() {
      this.loadQuery();
    },
  },
  data() {
    return {
      query: "" as String,
    };
  },
  computed: {
    ...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
    ...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
    ...mapState(useMemberStore, ["members"]),
    ...mapState(useQueryStoreStore, ["queries"]),
    ...mapState(useQueryBuilderStore, ["data"]),
    ...mapState(useAbilityStore, ["can"]),
    filtered(): Array<MemberViewModel> {
      return this.query === ""
        ? this.members
        : this.members.filter((member) =>
            (member.firstname + " " + member.lastname)
              .toLowerCase()
              .replace(/\s+/g, "")
              .includes(this.query.toLowerCase().replace(/\s+/g, ""))
          );
    },
    sorted(): Array<MemberViewModel> {
      return this.selected.sort((a, b) => {
        if (a.lastname < b.lastname) return -1;
        if (a.lastname > b.lastname) return 1;
        if (a.firstname < b.firstname) return -1;
        if (a.firstname > b.firstname) return 1;
        return 0;
      });
    },
    selected(): Array<MemberViewModel> {
      return this.members.filter((m) => this.recipients.includes(m.id));
    },
    queried(): Array<MemberViewModel> {
      if (this.recipientsByQueryId == "def") return [];
      let keys = Object.keys(this.data?.[0] ?? {});
      let memberKey = keys.find((k) => k.includes("member_id"));
      return this.members.filter((m) =>
        this.data
          .map((t) => ({
            id: t.id,
            ...(memberKey ? { memberId: t[memberKey] } : {}),
          }))
          .some((d) => (d.memberId ?? d.id) == m.id)
      );
    },
    recipientsByQueryId: {
      get() {
        return this.activeNewsletterObj?.recipientsByQueryId ?? "def";
      },
      set(val: string) {
        if (this.activeNewsletterObj == undefined) return;
        if (val == "def") {
          this.activeNewsletterObj.recipientsByQueryId = null;
          this.activeNewsletterObj.recipientsByQuery = null;
        } else if (this.queries.find((q) => q.id == parseInt(val))) {
          this.activeNewsletterObj.recipientsByQueryId = parseInt(val);
          this.activeNewsletterObj.recipientsByQuery = cloneDeep(this.queries.find((q) => q.id == parseInt(val)));
          this.sendQuery(0, 1000, this.recipientsByQuery?.query);
        }
      },
    },
    recipientsByQuery() {
      return this.activeNewsletterObj?.recipientsByQuery;
    },
  },
  mounted() {
    this.fetchMembers(0, 1000, "", true);
    // this.fetchNewsletterRecipients();
    this.fetchQueries();
    this.loadQuery();
  },
  methods: {
    ...mapActions(useMemberStore, ["fetchMembers"]),
    ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
    ...mapActions(useQueryStoreStore, ["fetchQueries"]),
    ...mapActions(useQueryBuilderStore, ["sendQuery"]),
    removeSelected(id: number) {
      let index = this.recipients.findIndex((s) => s == id);
      if (index != -1) {
        this.recipients.splice(index, 1);
      }
    },
    loadQuery() {
      if (this.recipientsByQuery) {
        this.sendQuery(0, 1000, this.recipientsByQuery.query);
      }
    },
  },
});
</script>