@dcrackel/hematournamentui 1.0.686 → 1.0.688

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

@@ -0,0 +1,242 @@
+<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>

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

@@ -2,6 +2,7 @@ import PersonManagement from './PersonManagement.vue';
 import clubGetAllMock from "../../../mocks/clubGetAllMock.js";
 import personsMock from "../../../mocks/personsMock.js";
 import attendance from "../../../mocks/getAttendance.js";
+import allPersonsMock from "../../../mocks/personGetAllMock.js"
 
 export default {
     title: 'Templates/PersonManagement/PersonManagement',
@@ -44,6 +45,7 @@ export const admin = {
         personProfile: personsMock[1],
         fencingClubs: clubGetAllMock,
         attendance: attendance,
+        people: allPersonsMock,
         uploadImageName: 'profile-test',
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
@@ -55,6 +57,7 @@ export const clubAdmin = {
     args: {
         personProfile: personsMock[1],
         fencingClubs: clubGetAllMock,
+        people: allPersonsMock,
         attendance: attendance,
         uploadImageName: 'profile-test',
         uploadServer: 'http://localhost:3000/api/upload/',
@@ -69,6 +72,7 @@ export const adminWithLoading = {
         personProfile: personsMock,
         fencingClubs: clubGetAllMock,
         attendance: attendance,
+        people: allPersonsMock,
         uploadImageName: 'profile-test',
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
@@ -91,6 +95,7 @@ export const emptyProfile = {
         },
         fencingClubs: clubGetAllMock,
         attendance: attendance,
+        people: allPersonsMock,
         uploadImageName: 'profile-test',
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',

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

@@ -27,7 +27,13 @@
 
     <EditEventsTopMenu :tabs="personProfileTabs(userLevel)" :currentTab="currentTab" @tabMenuClick="handleTab" />
     <BasicEdit v-if="currentTab === 'Basic'" :person="person" :fencingClubs="fencingClubs" :validation="validation" @update:person="updatePerson" />
-    <FencerAdmin v-if="currentTab === 'Admin'" :person="person" :userLevel="userLevel" @update:person="updatePerson"/>
+    <FencerAdmin v-if="currentTab === 'Admin'"
+                 :person="person"
+                 :people="people"
+                 :userLevel="userLevel"
+                 @update:person="updatePerson"
+                 @merge:merge="doMerge"
+    />
     <Attendance v-if="currentTab === 'Stats'" :attendance="attendance" />
     <Attendance v-if="currentTab === 'Attendance'" :attendance="attendance" />
 
@@ -53,7 +59,7 @@ import { validateField } from "../../Util/Validations/PersonManagementValidation
 
 export default {
   name: "PersonManagement",
-  emits: ["submit:person","delete:person","update:image"],
+  emits: ["submit:person","delete:person","update:image","merge:merge"],
   components: {
     FencerAdmin,
     Attendance,
@@ -73,6 +79,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    people: {
+      type: Array,
+      default: () => [],
+    },
     attendance: {
       type: Array,
       default: () => [],
@@ -170,6 +180,9 @@ export default {
     handleTab(tabId) {
       this.currentTab = tabId;
     },
+    doMerge(data) {
+      this.$emit("merge:merge", data);
+    }
   },
 };
 </script>