@dcrackel/hematournamentui 1.0.698 → 1.0.701

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>

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

@@ -9,7 +9,7 @@
       <div v-for="tournament in attendance" :key="tournament.TournamentId" class="mb-6">
         <div class="flex mr-4 md:mr-0">
           <div class="w-full flex flex-col justify-end md:ml-2">
-            <div class="w-full flex ml-2 justify-between border-b">
+            <div class="w-full flex ml-2 justify-between border-b border-dropdownSelect">
               <BaseText :text="tournament.Name" color="primary" size="" weight="text-sm md:text-md simi-bold"/>
               <BaseText :text="formatTournamentDates(tournament.StartDate, tournament.EndDate)" color="primary" size="" weight="normal" class="text-xs md:text-md pt-1.5" />
             </div>
@@ -34,26 +34,26 @@
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../..//Atoms/Icon/BaseIcon.vue";
-
-const weaponIcons = {
-  Longsword: 'fa-longsword',
-  'Military Saber': 'fa-saber',
-  'Rapier & Dagger': 'fa-rapier',
-  'Single Rapier': 'fa-rapier',
-  Messer: 'fa-messer',
-  'Sword & Buckler': 'fa-swordandbuckler',
-  Sidesword: 'fa-sidesword'
-};
-
-const daySuffixes = {
-  1: 'st',
-  2: 'nd',
-  3: 'rd'
-};
-
-export default {
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../..//Atoms/Icon/BaseIcon.vue";
+
+const weaponIcons = {
+  Longsword: 'fa-longsword',
+  'Military Saber': 'fa-saber',
+  'Rapier & Dagger': 'fa-rapier',
+  'Single Rapier': 'fa-rapier',
+  Messer: 'fa-messer',
+  'Sword & Buckler': 'fa-swordandbuckler',
+  Sidesword: 'fa-sidesword'
+};
+
+const daySuffixes = {
+  1: 'st',
+  2: 'nd',
+  3: 'rd'
+};
+
+export default {
   name: "Attendance",
   components: {BaseIcon, BaseText },
   props: {
@@ -69,9 +69,9 @@ export default {
   },
   computed: {
   },
-  methods: {
-    getWeaponIcon(weapon){
-      return weaponIcons[weapon] || 'fa-longsword';
+  methods: {
+    getWeaponIcon(weapon){
+      return weaponIcons[weapon] || 'fa-longsword';
     },
     formatEventDate(date, time) {
       const eventDate = new Date(`${date}T${time}`);
@@ -98,10 +98,10 @@ export default {
 
       return `${formatDate(startDate, includeYear)} to ${formatDate(endDate, includeYear)}`;
     },
-    getDaySuffix(day) {
-      if (day > 3 && day < 21) return 'th';
-      return daySuffixes[day % 10] || 'th';
-    },
+    getDaySuffix(day) {
+      if (day > 3 && day < 21) return 'th';
+      return daySuffixes[day % 10] || 'th';
+    },
   }
 };
 </script>

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

@@ -54,7 +54,7 @@ import BaseText from "../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import BasicEdit from "./Basic/BasicEdit.vue";
 import Attendance from "../../Templates/PersonManagement/Attendance/Attendance.vue";
-import FencerAdmin from "../../Templates/PersonManagement/Admin/FencerAdmin.vue";
+import FencerAdmin from "../../Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.vue";
 import { validateField } from "../../Util/Validations/PersonManagementValidations.js";
 
 export default {