@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -3,9 +3,9 @@
     <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"
+          :text="`Merge into this account: ${person?.DisplayName || 'Root Account'}`"
+          size="md"
+          color="primary"
         />
 
         <div class="mt-3 space-y-2">
@@ -27,14 +27,12 @@
           <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-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"
+                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">
@@ -48,11 +46,11 @@
                 </div>
 
                 <BaseButton
-                    color="warn"
-                    label="Remove"
-                    size="xs"
-                    type="primary"
-                    @buttonClick="removeSelected(p.PersonId)"
+                  color="warn"
+                  label="Remove"
+                  size="xs"
+                  type="primary"
+                  @buttonClick="removeSelected(p.PersonId)"
                 />
               </div>
             </div>
@@ -60,12 +58,12 @@
 
           <div class="flex justify-end">
             <BaseButton
-                color="warn"
-                label="Merge Accounts Together"
-                size="sm"
-                type="primary"
-                :disabled="!canMerge"
-                @buttonClick="emitMergeAccounts"
+              color="warn"
+              label="Merge Accounts Together"
+              size="sm"
+              type="primary"
+              :disabled="!canMerge"
+              @buttonClick="emitMergeAccounts"
             />
           </div>
         </div>
@@ -76,30 +74,24 @@
 
         <div class="mt-4">
           <TitledInput
-              title="Filter people"
-              placeholder="Type name or club..."
-              :inputValue="filterText"
-              @update:value="filterText = $event"
+            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 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>
+          <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"
+            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">
@@ -112,18 +104,10 @@
               </div>
             </div>
 
-            <BaseButton
-                color="neutral"
-                label="Add"
-                size="xs"
-                type="primary"
-                @buttonClick="addSelected(p)"
-            />
+            <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 v-if="filteredPeople.length === 0" class="px-3 py-3 text-sm text-quaternary">No matches.</div>
         </div>
       </section>
     </div>
@@ -131,54 +115,71 @@
 </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";
+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",
+  name: 'MergeAccounts',
   components: { BaseText, TitledInput, BaseButton },
-  emits: ["merge:merge"],
+  emits: ['merge:merge'],
   props: {
     person: { type: Object, required: true },
-    people: { type: Array, required: true },
+    people: { type: Array, required: true }
   },
   data() {
     return {
-      filterText: "",
+      filterText: '',
       selected: [],
-      resultLimit: 200,
+      resultLimit: 200
     };
   },
   computed: {
     rootPersonId() {
-      return this.person?.PersonId ?? "";
+      return this.person?.PersonId ?? '';
     },
     legalName() {
-      const first = this.person?.FirstName || "";
-      const last = this.person?.LastName || "";
-      return `${first} ${last}`.trim() || "-";
+      const first = this.person?.FirstName || '';
+      const last = this.person?.LastName || '';
+      return `${first} ${last}`.trim() || '-';
     },
     clubName() {
-      return this.person?.Club?.Name || "-";
+      return this.person?.Club?.Name || '-';
     },
     primaryEmail() {
       const emails = this.person?.PersonEmails || [];
-      const primary = emails.find((email) => email.IsPrimary);
-      return primary?.EmailAddress || "-";
+      const primary = emails.find(email => email.IsPrimary);
+      return primary?.EmailAddress || '-';
     },
     selectedIds() {
-      return new Set(this.selected.map((p) => p.PersonId));
+      return new Set(this.selected.map(p => p.PersonId));
     },
     canMerge() {
       return this.selected.length > 0;
     },
     normalizedFilterText() {
-      return (this.filterText || "").trim().toLowerCase();
+      return (this.filterText || '').trim().toLowerCase();
     },
     candidatePeople() {
       return (this.people || []).filter(
-          (p) => p && p.PersonId !== this.rootPersonId && !this.selectedIds.has(p.PersonId)
+        p => p && p.PersonId !== this.rootPersonId && !this.selectedIds.has(p.PersonId)
       );
     },
     matchingPeople() {
@@ -186,14 +187,14 @@ export default {
 
       if (!q) return this.candidatePeople;
 
-      return this.candidatePeople.filter((p) => this.matchesQuery(p, q));
+      return this.candidatePeople.filter(p => this.matchesQuery(p, q));
     },
     totalMatches() {
       return this.matchingPeople.length;
     },
     filteredPeople() {
       return this.matchingPeople.slice(0, this.resultLimit);
-    },
+    }
   },
   watch: {
     rootPersonId() {
@@ -201,7 +202,7 @@ export default {
     },
     people() {
       this.removeUnavailableSelectedPeople();
-    },
+    }
   },
   methods: {
     personClubSuffix(p) {
@@ -210,32 +211,20 @@ export default {
     resultTitle(p) {
       const email = this.getPrimaryEmail(p);
 
-      if (!email) return p.DisplayName || "";
+      if (!email) return p.DisplayName || '';
 
       return `${p.DisplayName} - ${email}`;
     },
     getPrimaryEmail(p) {
       const emails = p?.PersonEmails || [];
-      return emails.find((email) => email.IsPrimary)?.EmailAddress || "";
+      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)
-      );
+      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));
+      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;
@@ -243,16 +232,16 @@ export default {
       this.selected = [...this.selected, p];
     },
     removeSelected(personId) {
-      this.selected = this.selected.filter((p) => p.PersonId !== personId);
+      this.selected = this.selected.filter(p => p.PersonId !== personId);
     },
     emitMergeAccounts() {
       if (!this.canMerge) return;
 
-      this.$emit("merge:merge", {
+      this.$emit('merge:merge', {
         rootPersonId: this.rootPersonId,
-        mergePersonIds: this.selected.map((p) => p.PersonId),
+        mergePersonIds: this.selected.map(p => p.PersonId)
       });
-    },
-  },
+    }
+  }
 };
 </script>

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

@@ -1,38 +1,38 @@
 import UserAttendance from './Attendance.vue';
-import getAttendance from "../../../../mocks/getAttendance.js";
+import getAttendance from '../../../../mocks/getAttendance.js';
 
 export default {
-    title: 'Templates/PersonManagement/Attendance/UserAttendance',
-    component: UserAttendance,
-    tags: ['autodocs'],
-    args: {
-        attendance: getAttendance
-    },
-    argTypes: {
-        attendance: { control: { type: 'array' } }
-    }
+  title: 'Templates/PersonManagement/Attendance/UserAttendance',
+  component: UserAttendance,
+  tags: ['autodocs'],
+  args: {
+    attendance: getAttendance
+  },
+  argTypes: {
+    attendance: { control: { type: 'array' } }
+  }
 };
 
 export const Default = {
-    args: {
-        attendance: getAttendance
-    }
+  args: {
+    attendance: getAttendance
+  }
 };
 
 export const Empty = {
-    args: {
-        attendance: []
-    }
+  args: {
+    attendance: []
+  }
 };
 
 export const WithUpcomingOnly = {
-    args: {
-        attendance: getAttendance.filter(tournament => new Date(tournament.EndDate) >= new Date())
-    }
+  args: {
+    attendance: getAttendance.filter(tournament => new Date(tournament.EndDate) >= new Date())
+  }
 };
 
 export const WithPastOnly = {
-    args: {
-        attendance: getAttendance.filter(tournament => new Date(tournament.EndDate) < new Date())
-    }
+  args: {
+    attendance: getAttendance.filter(tournament => new Date(tournament.EndDate) < new Date())
+  }
 };

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

@@ -1,41 +1,70 @@
 <template>
   <section class="flex justify-center w-full pr-4">
-  <div class="w-full md:p-2 min-h-80">
-    <div v-if="attendance.length === 0" class="text-center mt-4">
-      <BaseText text="No Attendance Records" color="secondary" size="lg" weight="normal"/>
-    </div>
+    <div class="w-full md:p-2 min-h-80">
+      <div v-if="attendance.length === 0" class="text-center mt-4">
+        <BaseText text="No Attendance Records" color="secondary" size="lg" weight="normal" />
+      </div>
 
-    <section v-if="attendance.length > 0">
-      <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 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" />
+      <section v-if="attendance.length > 0">
+        <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 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>
             </div>
           </div>
-        </div>
-
-        <div class="md:ml-14 md:-mt-2 w-full mt-2">
-          <section v-for="event in tournament.Events" :key="event.EventId" class="mt-4 md:pl-4 mb-2 md:w-11/12">
-            <div class="grid grid-cols-12 items-center gap-4 px-4 py-2 rounded-lg bg-poolSetup">
-              <BaseIcon :icon-name="getWeaponIcon(event.Weapon)" iconStyle="fa-kit" size="md" color="quinary" class="col-span-1"/>
-              <BaseText :text="event.EventName" color="primary" size="" weight="normal" class="text-xs md:text-sm col-span-5"/>
-              <BaseText :text="formatEventDate(event.Date, event.StartTime)" color="primary" size="" weight="normal" class="text-xs md:text-md col-span-4"/>
-              <BaseText :text="event.Status" color="primary" size="sm" weight="normal" class="col-span-2 text-right"/>
-            </div>
-          </section>
 
+          <div class="md:ml-14 md:-mt-2 w-full mt-2">
+            <section v-for="event in tournament.Events" :key="event.EventId" class="mt-4 md:pl-4 mb-2 md:w-11/12">
+              <div class="grid grid-cols-12 items-center gap-4 px-4 py-2 rounded-lg bg-poolSetup">
+                <BaseIcon
+                  :icon-name="getWeaponIcon(event.Weapon)"
+                  iconStyle="fa-kit"
+                  size="md"
+                  color="quinary"
+                  class="col-span-1"
+                />
+                <BaseText
+                  :text="event.EventName"
+                  color="primary"
+                  size=""
+                  weight="normal"
+                  class="text-xs md:text-sm col-span-5"
+                />
+                <BaseText
+                  :text="formatEventDate(event.Date, event.StartTime)"
+                  color="primary"
+                  size=""
+                  weight="normal"
+                  class="text-xs md:text-md col-span-4"
+                />
+                <BaseText
+                  :text="event.Status"
+                  color="primary"
+                  size="sm"
+                  weight="normal"
+                  class="col-span-2 text-right"
+                />
+              </div>
+            </section>
+          </div>
         </div>
-      </div>
-    </section>
-  </div>
+      </section>
+    </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../..//Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../..//Atoms/Icon/BaseIcon.vue';
 
 const weaponIcons = {
   Longsword: 'fa-longsword',
@@ -54,8 +83,8 @@ const daySuffixes = {
 };
 
 export default {
-  name: "Attendance",
-  components: {BaseIcon, BaseText },
+  name: 'Attendance',
+  components: { BaseIcon, BaseText },
   props: {
     attendance: {
       type: Array,
@@ -67,10 +96,9 @@ export default {
       showUpcoming: true
     };
   },
-  computed: {
-  },
+  computed: {},
   methods: {
-    getWeaponIcon(weapon){
+    getWeaponIcon(weapon) {
       return weaponIcons[weapon] || 'fa-longsword';
     },
     formatEventDate(date, time) {
@@ -101,7 +129,7 @@ export default {
     getDaySuffix(day) {
       if (day > 3 && day < 21) return 'th';
       return daySuffixes[day % 10] || 'th';
-    },
+    }
   }
 };
 </script>

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

@@ -1,37 +1,37 @@
 import PersonManagement from './BasicEdit.vue';
-import personsMock from "../../../../mocks/personsMock.js";
-import clubGetAllMock from "../../../../mocks/clubGetAllMock.js";
+import personsMock from '../../../../mocks/personsMock.js';
+import clubGetAllMock from '../../../../mocks/clubGetAllMock.js';
 
 export default {
-    title: 'Templates/PersonManagement/Basic/Basic',
-    component: PersonManagement,
-    argTypes: {
-        person: {
-            control: 'object',
-            description: 'The person profile object being edited'
-        },
-        fencingClubs: {
-            control: 'array',
-            description: 'The list of fencing clubs'
-        },
-        validation: {
-            control: 'object',
-            description: 'validation'
-        },
-        handleSubmit: { action: 'submit:person' },
-        handleDelete: { action: 'delete:person' }
-    }
+  title: 'Templates/PersonManagement/Basic/Basic',
+  component: PersonManagement,
+  argTypes: {
+    person: {
+      control: 'object',
+      description: 'The person profile object being edited'
+    },
+    fencingClubs: {
+      control: 'array',
+      description: 'The list of fencing clubs'
+    },
+    validation: {
+      control: 'object',
+      description: 'validation'
+    },
+    handleSubmit: { action: 'submit:person' },
+    handleDelete: { action: 'delete:person' }
+  }
 };
 
 export const Default = {
-    args: {
-        person: personsMock[1],
-        fencingClubs: clubGetAllMock,
-        validation: {
-            DisplayName: { invalid: false, message: "" },
-            LegalName: { invalid: false, message: "" },
-            EmailAddress: { invalid: false, message: "" },
-            Club: { invalid: false, message: "" },
-        },
+  args: {
+    person: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    validation: {
+      DisplayName: { invalid: false, message: '' },
+      LegalName: { invalid: false, message: '' },
+      EmailAddress: { invalid: false, message: '' },
+      Club: { invalid: false, message: '' }
     }
+  }
 };