@dcrackel/hematournamentui 1.0.711 → 1.0.713

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

@@ -1,247 +1,247 @@
-<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';
-
-const getPersonSearchValues = person => {
-  const searchablePerson = person || {};
-  const club = searchablePerson.Club || {};
-  return [
-    searchablePerson.DisplayName,
-    searchablePerson.FirstName,
-    searchablePerson.LastName,
-    club.Name,
-    club.ShortName
-  ];
-};
-
-const normalizeSearchValue = value => String(value || '').toLowerCase();
-
-const personMatchesQuery = (person, query) =>
-  getPersonSearchValues(person).some(value => normalizeSearchValue(value).includes(query));
-
-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) {
-      return personMatchesQuery(p, 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>
+<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';
+
+const getPersonSearchValues = person => {
+  const searchablePerson = person || {};
+  const club = searchablePerson.Club || {};
+  return [
+    searchablePerson.DisplayName,
+    searchablePerson.FirstName,
+    searchablePerson.LastName,
+    club.Name,
+    club.ShortName
+  ];
+};
+
+const normalizeSearchValue = value => String(value || '').toLowerCase();
+
+const personMatchesQuery = (person, query) =>
+  getPersonSearchValues(person).some(value => normalizeSearchValue(value).includes(query));
+
+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) {
+      return personMatchesQuery(p, 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>