member search component

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

@@ -23,63 +23,14 @@
       </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>
+    <MemberSearchSelect
+      title="weitere Empfänger suchen"
+      v-model="recipients"
+      :disabled="!can('create', 'club', 'newsletter')"
+      @add:member="(s) => members.push(s)"
+      @add:member-by-array="(s) => members.push(...s)"
+    />
 
-              <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
@@ -125,6 +76,7 @@ import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/settings/queryStore";
 import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
 import cloneDeep from "lodash.clonedeep";
+import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
 </script>
 
 <script lang="ts">
@@ -140,36 +92,25 @@ export default defineComponent({
   data() {
     return {
       query: "" as String,
+      members: [] as Array<MemberViewModel>,
     };
   },
   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));
+      return this.members
+        .filter((m) => this.recipients.includes(m.id))
+        .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;
+        });
     },
     queried(): Array<MemberViewModel> {
       if (this.recipientsByQueryId == "def") return [];
@@ -205,7 +146,6 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.fetchMembers(0, 1000, "", true);
     // this.fetchNewsletterRecipients();
     this.fetchQueries();
     this.loadQuery();

src/views/admin/club/protocol/ProtocolPresence.vue

@@ -5,64 +5,19 @@
       ↺ laden fehlgeschlagen
     </p>
 
-    <div class="w-full">
-      <Combobox v-model="presence" :disabled="!can('create', 'club', 'protocol')" multiple by="memberId">
-        <ComboboxLabel>Anwesende 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>
+    <MemberSearchSelect
+      title="Anwesende suchen"
+      :model-value="presence.map((p) => p.memberId)"
+      :disabled="!can('create', 'club', 'protocol')"
+      @add:difference="
+        (id: number) =>
+          presence.push({ memberId: id, absent: false, excused: true, protocolId: parseInt(protocolId ?? '') })
+      "
+      @add:member="(s) => members.push(s)"
+      @add:member-by-array="(s) => members.push(...s)"
+      @remove:difference="removeSelected"
+    />
 
-              <ComboboxOption
-                v-for="member in filtered"
-                as="template"
-                :key="member.memberId"
-                :value="member"
-                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 }">
-                    {{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.lastname }}
-                    {{ getMember(member.memberId)?.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>
     <br />
     <p>Anwesenheit</p>
     <div class="flex flex-col gap-2 grow overflow-y-auto">
@@ -101,22 +56,11 @@
 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 { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
-import { useMemberStore } from "@/stores/admin/club/member/member";
-import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
 import { useAbilityStore } from "@/stores/ability";
+import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
+import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 </script>
 
 <script lang="ts">
@@ -127,36 +71,20 @@ export default defineComponent({
   data() {
     return {
       query: "" as String,
+      members: [] as Array<MemberViewModel>,
     };
   },
   computed: {
     ...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
-    ...mapState(useMemberStore, ["members"]),
     ...mapState(useAbilityStore, ["can"]),
-    filtered(): Array<{ memberId: number; absent: boolean; excused: boolean; protocolId: number }> {
-      return (
-        this.query === ""
-          ? this.members
-          : this.members.filter((member) =>
-              (member.firstname + " " + member.lastname)
-                .toLowerCase()
-                .replace(/\s+/g, "")
-                .includes(this.query.toLowerCase().replace(/\s+/g, ""))
-            )
-      ).map((m) => ({ memberId: m.id, absent: false, excused: true, protocolId: parseInt(this.protocolId ?? "") }));
-    },
     getMember() {
       return (memberId: number) => {
         return this.members.find((m) => memberId == m.id);
       };
     },
   },
-  mounted() {
-    this.fetchMembers(0, 1000, "", true);
-    // this.fetchProtocolPresence();
-  },
+  mounted() {},
   methods: {
-    ...mapActions(useMemberStore, ["fetchMembers"]),
     ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
     removeSelected(id: number) {
       let index = this.presence.findIndex((s) => s.memberId == id);