@dcrackel/hematournamentui 1.0.699 → 1.0.702

package/src/stories/Templates/PersonManagement/Admin/MergeAccounts/MergeAccounts.stories.js

@@ -0,0 +1,86 @@
+import MergeAccounts from './MergeAccounts.vue';
+import personsMock from "../../../../../mocks/personsMock.js";
+import peopleMock from "../../../../../mocks/personGetAllMock.js";
+
+export default {
+    title: 'Templates/PersonManagement/Admin/MergeAccounts',
+    component: MergeAccounts,
+    tags: ['autodocs'],
+    args: {
+        person: personsMock[1],
+        people: peopleMock
+    },
+    argTypes: {
+        person: { control: { type: 'object' } },
+        people: { control: { type: 'object' } },
+        'merge:merge': { action: 'merge:merge' }
+    }
+};
+
+export const Default = {
+    args: {
+        person: personsMock[1],
+        people: peopleMock
+    }
+};
+
+export const EmptyResults = {
+    args: {
+        person: personsMock[1],
+        people: []
+    }
+};
+
+export const MissingRootDetails = {
+    args: {
+        person: {
+            PersonId: 2001,
+            DisplayName: '',
+            FirstName: '',
+            LastName: '',
+            Club: null,
+            PersonEmails: []
+        },
+        people: peopleMock
+    }
+};
+
+export const SparsePeopleData = {
+    args: {
+        person: personsMock[1],
+        people: [
+            {
+                PersonId: 2002,
+                DisplayName: 'Missing Email',
+                FirstName: 'Missing',
+                LastName: 'Email',
+                Club: {
+                    Name: 'Columbus United Fencing Club',
+                    ShortName: 'CUFC'
+                },
+                PersonEmails: []
+            },
+            {
+                PersonId: 2003,
+                DisplayName: 'Missing Club',
+                FirstName: 'Missing',
+                LastName: 'Club',
+                Club: null,
+                PersonEmails: [
+                    {
+                        EmailAddress: 'missing-club@example.com',
+                        IsPrimary: true
+                    }
+                ]
+            },
+            {
+                PersonId: 2004,
+                DisplayName: 'No Optional Details',
+                FirstName: '',
+                LastName: '',
+                Club: null,
+                PersonEmails: []
+            }
+        ]
+    }
+};

package/src/stories/Templates/PersonManagement/Admin/{MergeAccounts.vue → MergeAccounts/MergeAccounts.vue}

@@ -1,242 +1,258 @@
-<template>
-  <section class="w-full">
-    <div class="flex w-full  ">
-      <!-- LEFT: Merge into this account -->
-      <section class="border border-dropdownSelect rounded-lg p-4 bg-white w-1/2 mr-10">
-        <BaseText
-            :text="`Merge into this account: ${person?.DisplayName || 'Root Account'}`"
-            size="md"
-            color="primary"
-        />
-
-        <div class="mt-3 space-y-2">
-          <div class="text-sm text-quaternary">
-            <span class="font-semibold text-primary">PersonId:</span> {{ rootPersonId }}
-          </div>
-          <div class="text-sm text-quaternary">
-            <span class="font-semibold text-primary">Legal Name:</span> {{ legalName }}
-          </div>
-          <div class="text-sm text-quaternary">
-            <span class="font-semibold text-primary">Club:</span> {{ clubName }}
-          </div>
-          <div class="text-sm text-quaternary">
-            <span class="font-semibold text-primary">Email:</span> {{ primaryEmail }}
-          </div>
-        </div>
-
-        <div class="mt-4 flex flex-col justify-between h-64">
-          <div>
-            <BaseText text="Accounts to merge in" size="sm" color="quaternary" weight="bold" />
-            <div class="border-b border-dropdownSelect h-2"></div>
-            <div v-if="selected.length === 0" class="mt-2 text-sm text-quaternary">
-             None selected yet.
-            </div>
-            <div v-else class="mt-2 border border-dropdownSelect rounded-lg">
-            <div
-                v-for="p in selected"
-                :key="p.PersonId"
-                class="flex items-center justify-between px-3 py-2 border-b border-dropdownSelect last:border-b-0"
-            >
-              <div class="min-w-0">
-                <div class="text-sm text-primary font-semibold truncate">
-                  {{ p.DisplayName }}
-                  <span class="text-xs text-quaternary font-normal">(#{{ p.PersonId }})</span>
-                </div>
-                <div class="text-xs text-quaternary truncate">
-                  {{ p.FirstName }} {{ p.LastName }}
-                  <span v-if="p?.Club?.Name"> • {{ p.Club.Name }}</span>
-                </div>
-              </div>
-
-              <BaseButton
-                  color="warn"
-                  label="Remove"
-                  size="xs"
-                  type="primary"
-                  @buttonClick="removeSelected(p.PersonId)"
-              />
-            </div>
-          </div>
-          </div>
-          <div>
-            <div class="flex justify-end">
-            <BaseButton
-                color="warn"
-                label="Merge Accounts Together"
-                size="sm"
-                type="primary"
-                :disabled="selected.length === 0"
-                @buttonClick="doMerge"
-            />
-          </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- RIGHT: Filter + Results -->
-      <section class="border border-dropdownSelect rounded-lg p-4 bg-white bg-white w-1/2">
-        <BaseText text="Results" size="md" color="primary" />
-
-        <div class="mt-4">
-          <TitledInput
-              title="Filter people"
-              placeholder="Type name or club..."
-              :inputValue="filterText"
-              @update:value="filterText = $event"
-          />
-          <div class="text-xs text-quaternary mt-1">
-            Filters Display Name, First/Last Name, or Club Name.
-          </div>
-        </div>
-
-        <div class="mt-4 flex items-center justify-between text-xs text-quaternary">
-          <span>
-            Showing {{ filteredPeople.length }}{{ totalMatches > resultLimit ? '+' : '' }} results
-          </span>
-          <span v-if="totalMatches > resultLimit">
-            (limited to first {{ resultLimit }})
-          </span>
-        </div>
-
-        <!-- Scrollable results list -->
-        <div class="mt-2 border border-dropdownSelect rounded-lg h-64 overflow-y-auto ">
-          <div
-              v-for="p in filteredPeople"
-              :key="p.PersonId"
-              class="flex items-center justify-between px-3 py-2 border-b border-dropdownSelect last:border-b-0"
-          >
-            <div class="min-w-0">
-              <div class="text-sm text-primary font-semibold truncate">
-                <span class="text-xs text-quaternary font-normal">(#{{ p.PersonId }})</span>
-                {{ p.DisplayName }} - {{ getPrimaryEmail(p) }}
-              </div>
-              <div class="text-xs text-quaternary truncate">
-                {{ p.FirstName }} {{ p.LastName }}
-                <span v-if="p?.Club?.Name"> • {{ p.Club.Name }}</span>
-              </div>
-            </div>
-
-            <BaseButton
-                color="neutral"
-                label="Add"
-                size="xs"
-                type="primary"
-                @buttonClick="addSelected(p)"
-            />
-          </div>
-
-          <div v-if="filteredPeople.length === 0" class="px-3 py-3 text-sm text-quaternary">
-            No matches.
-          </div>
-        </div>
-      </section>
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-
-export default {
-  name: "MergeAccounts",
-  components: { BaseText, TitledInput, BaseButton },
-  emits: ["merge:merge"],
-  props: {
-    person: { type: Object, required: true }, // root person
-    people: { type: Array, required: true },
-  },
-  data() {
-    return {
-      filterText: "",
-      selected: [],
-      resultLimit: 200, // "high limit" but still prevents crazy DOM
-    };
-  },
-  computed: {
-    getPrimaryEmail(p) {
-      const emails = p?.PersonEmails || [];
-      return emails.find(e => e.IsPrimary)?.EmailAddress || "";
-    },
-    rootPersonId() {
-      return this.person?.PersonId ?? "";
-    },
-    legalName() {
-      const first = this.person?.FirstName || "";
-      const last = this.person?.LastName || "";
-      return `${first} ${last}`.trim() || "-";
-    },
-    clubName() {
-      return this.person?.Club?.Name || "-";
-    },
-    primaryEmail() {
-      const emails = this.person?.PersonEmails || [];
-      const primary = emails.find((e) => e.IsPrimary);
-      return primary?.EmailAddress || "-";
-    },
-    selectedIds() {
-      return new Set(this.selected.map((p) => p.PersonId));
-    },
-    totalMatches() {
-      const q = (this.filterText || "").trim().toLowerCase();
-      const base = (this.people || []).filter(
-          (p) => p && p.PersonId !== this.rootPersonId && !this.selectedIds.has(p.PersonId)
-      );
-
-      if (!q) return base.length;
-
-      return base.reduce((acc, p) => (this.matchesQuery(p, q) ? acc + 1 : acc), 0);
-    },
-    filteredPeople() {
-      const q = (this.filterText || "").trim().toLowerCase();
-
-      const base = (this.people || []).filter(
-          (p) => p && p.PersonId !== this.rootPersonId && !this.selectedIds.has(p.PersonId)
-      );
-
-      if (!q) return base.slice(0, this.resultLimit);
-
-      const results = [];
-      for (const p of base) {
-        if (this.matchesQuery(p, q)) {
-          results.push(p);
-          if (results.length >= this.resultLimit) break;
-        }
-      }
-      return results;
-    },
-  },
-  methods: {
-    matchesQuery(p, q) {
-      const display = (p.DisplayName || "").toLowerCase();
-      const first = (p.FirstName || "").toLowerCase();
-      const last = (p.LastName || "").toLowerCase();
-      const club = (p?.Club?.Name || "").toLowerCase();
-      const clubShort = (p?.Club?.ShortName || "").toLowerCase();
-
-      return (
-          display.includes(q) ||
-          first.includes(q) ||
-          last.includes(q) ||
-          club.includes(q) ||
-          clubShort.includes(q)
-      );
-    },
-    addSelected(p) {
-      if (!p || p.PersonId === this.rootPersonId) return;
-      if (this.selectedIds.has(p.PersonId)) return;
-      this.selected = [...this.selected, p];
-    },
-    removeSelected(personId) {
-      this.selected = this.selected.filter((p) => p.PersonId !== personId);
-    },
-    doMerge() {
-      this.$emit("merge:merge", {
-        rootPersonId: this.rootPersonId,
-        mergePersonIds: this.selected.map((p) => p.PersonId),
-      });
-    },
-  },
-};
-</script>
+<template>
+  <section class="w-full">
+    <div class="flex w-full flex-col gap-6 md:flex-row">
+      <section class="border border-dropdownSelect rounded-lg p-4 bg-white md:w-1/2">
+        <BaseText
+            :text="`Merge into this account: ${person?.DisplayName || 'Root Account'}`"
+            size="md"
+            color="primary"
+        />
+
+        <div class="mt-3 space-y-2">
+          <div class="text-sm text-quaternary">
+            <span class="font-semibold text-primary">PersonId:</span> {{ rootPersonId }}
+          </div>
+          <div class="text-sm text-quaternary">
+            <span class="font-semibold text-primary">Legal Name:</span> {{ legalName }}
+          </div>
+          <div class="text-sm text-quaternary">
+            <span class="font-semibold text-primary">Club:</span> {{ clubName }}
+          </div>
+          <div class="text-sm text-quaternary">
+            <span class="font-semibold text-primary">Email:</span> {{ primaryEmail }}
+          </div>
+        </div>
+
+        <div class="mt-4 flex h-64 flex-col justify-between">
+          <div class="min-h-0">
+            <BaseText text="Accounts to merge in" size="sm" color="quaternary" weight="bold" />
+            <div class="border-b border-dropdownSelect h-2"></div>
+            <div v-if="selected.length === 0" class="mt-2 text-sm text-quaternary">
+              None selected yet.
+            </div>
+            <div v-else class="mt-2 max-h-44 overflow-y-auto border border-dropdownSelect rounded-lg">
+              <div
+                  v-for="p in selected"
+                  :key="p.PersonId"
+                  class="flex items-center justify-between px-3 py-2 border-b border-dropdownSelect last:border-b-0"
+              >
+                <div class="min-w-0">
+                  <div class="text-sm text-primary font-semibold truncate">
+                    {{ p.DisplayName }}
+                    <span class="text-xs text-quaternary font-normal">(#{{ p.PersonId }})</span>
+                  </div>
+                  <div class="text-xs text-quaternary truncate">
+                    {{ p.FirstName }} {{ p.LastName }}
+                    <span v-if="p?.Club?.Name">{{ personClubSuffix(p) }}</span>
+                  </div>
+                </div>
+
+                <BaseButton
+                    color="warn"
+                    label="Remove"
+                    size="xs"
+                    type="primary"
+                    @buttonClick="removeSelected(p.PersonId)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <BaseButton
+                color="warn"
+                label="Merge Accounts Together"
+                size="sm"
+                type="primary"
+                :disabled="!canMerge"
+                @buttonClick="emitMergeAccounts"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section class="border border-dropdownSelect rounded-lg p-4 bg-white md:w-1/2">
+        <BaseText text="Results" size="md" color="primary" />
+
+        <div class="mt-4">
+          <TitledInput
+              title="Filter people"
+              placeholder="Type name or club..."
+              :inputValue="filterText"
+              @update:value="filterText = $event"
+          />
+          <div class="text-xs text-quaternary mt-1">
+            Filters Display Name, First/Last Name, or Club Name.
+          </div>
+        </div>
+
+        <div class="mt-4 flex items-center justify-between text-xs text-quaternary">
+          <span>
+            Showing {{ filteredPeople.length }}{{ totalMatches > resultLimit ? '+' : '' }} results
+          </span>
+          <span v-if="totalMatches > resultLimit">
+            (limited to first {{ resultLimit }})
+          </span>
+        </div>
+
+        <div class="mt-2 border border-dropdownSelect rounded-lg h-64 overflow-y-auto">
+          <div
+              v-for="p in filteredPeople"
+              :key="p.PersonId"
+              class="flex items-center justify-between px-3 py-2 border-b border-dropdownSelect last:border-b-0"
+          >
+            <div class="min-w-0">
+              <div class="text-sm text-primary font-semibold truncate">
+                <span class="text-xs text-quaternary font-normal">(#{{ p.PersonId }})</span>
+                {{ resultTitle(p) }}
+              </div>
+              <div class="text-xs text-quaternary truncate">
+                {{ p.FirstName }} {{ p.LastName }}
+                <span v-if="p?.Club?.Name">{{ personClubSuffix(p) }}</span>
+              </div>
+            </div>
+
+            <BaseButton
+                color="neutral"
+                label="Add"
+                size="xs"
+                type="primary"
+                @buttonClick="addSelected(p)"
+            />
+          </div>
+
+          <div v-if="filteredPeople.length === 0" class="px-3 py-3 text-sm text-quaternary">
+            No matches.
+          </div>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+
+export default {
+  name: "MergeAccounts",
+  components: { BaseText, TitledInput, BaseButton },
+  emits: ["merge:merge"],
+  props: {
+    person: { type: Object, required: true },
+    people: { type: Array, required: true },
+  },
+  data() {
+    return {
+      filterText: "",
+      selected: [],
+      resultLimit: 200,
+    };
+  },
+  computed: {
+    rootPersonId() {
+      return this.person?.PersonId ?? "";
+    },
+    legalName() {
+      const first = this.person?.FirstName || "";
+      const last = this.person?.LastName || "";
+      return `${first} ${last}`.trim() || "-";
+    },
+    clubName() {
+      return this.person?.Club?.Name || "-";
+    },
+    primaryEmail() {
+      const emails = this.person?.PersonEmails || [];
+      const primary = emails.find((email) => email.IsPrimary);
+      return primary?.EmailAddress || "-";
+    },
+    selectedIds() {
+      return new Set(this.selected.map((p) => p.PersonId));
+    },
+    canMerge() {
+      return this.selected.length > 0;
+    },
+    normalizedFilterText() {
+      return (this.filterText || "").trim().toLowerCase();
+    },
+    candidatePeople() {
+      return (this.people || []).filter(
+          (p) => p && p.PersonId !== this.rootPersonId && !this.selectedIds.has(p.PersonId)
+      );
+    },
+    matchingPeople() {
+      const q = this.normalizedFilterText;
+
+      if (!q) return this.candidatePeople;
+
+      return this.candidatePeople.filter((p) => this.matchesQuery(p, q));
+    },
+    totalMatches() {
+      return this.matchingPeople.length;
+    },
+    filteredPeople() {
+      return this.matchingPeople.slice(0, this.resultLimit);
+    },
+  },
+  watch: {
+    rootPersonId() {
+      this.selected = [];
+    },
+    people() {
+      this.removeUnavailableSelectedPeople();
+    },
+  },
+  methods: {
+    personClubSuffix(p) {
+      return ` - ${p.Club.Name}`;
+    },
+    resultTitle(p) {
+      const email = this.getPrimaryEmail(p);
+
+      if (!email) return p.DisplayName || "";
+
+      return `${p.DisplayName} - ${email}`;
+    },
+    getPrimaryEmail(p) {
+      const emails = p?.PersonEmails || [];
+      return emails.find((email) => email.IsPrimary)?.EmailAddress || "";
+    },
+    matchesQuery(p, q) {
+      const display = (p.DisplayName || "").toLowerCase();
+      const first = (p.FirstName || "").toLowerCase();
+      const last = (p.LastName || "").toLowerCase();
+      const club = (p?.Club?.Name || "").toLowerCase();
+      const clubShort = (p?.Club?.ShortName || "").toLowerCase();
+
+      return (
+          display.includes(q) ||
+          first.includes(q) ||
+          last.includes(q) ||
+          club.includes(q) ||
+          clubShort.includes(q)
+      );
+    },
+    removeUnavailableSelectedPeople() {
+      const availableIds = new Set((this.people || []).map((p) => p?.PersonId));
+      this.selected = this.selected.filter((p) => availableIds.has(p.PersonId));
+    },
+    addSelected(p) {
+      if (!p || p.PersonId === this.rootPersonId) return;
+      if (this.selectedIds.has(p.PersonId)) return;
+      this.selected = [...this.selected, p];
+    },
+    removeSelected(personId) {
+      this.selected = this.selected.filter((p) => p.PersonId !== personId);
+    },
+    emitMergeAccounts() {
+      if (!this.canMerge) return;
+
+      this.$emit("merge:merge", {
+        rootPersonId: this.rootPersonId,
+        mergePersonIds: this.selected.map((p) => p.PersonId),
+      });
+    },
+  },
+};
+</script>