@dcrackel/hematournamentui 1.0.71 → 1.0.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.71",
+  "version": "1.0.73",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",

package/src/stories/Atoms/Text/BaseText.vue

@@ -10,7 +10,7 @@ export default {
 
   props: {
     text: {
-      type: String,
+      type: [String, Number],
       required: true,
       default: ''
     },

package/src/stories/Molecules/Boxes/EventStatusBox/EventStatusBox.vue

@@ -19,7 +19,7 @@ export default {
   components: {BaseText},
   props: {
     statusCount: {
-      type: Number,
+      type: [Number, String],
       required: true,
     },
     statusLabel: {

package/src/stories/Organisms/Cards/FencerCard/FencerCard.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="mr-4">
       <div v-if="!portraitURL" class="w-14 h-14 rounded-xl bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="white" weight="bold"/>
+        <BaseText text="" size="sm" color="neutral" weight="bold"/>
       </div>
       <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl">
     </div>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -27,12 +27,9 @@ export default {
     },
     items: {
       type: Array,
-      validator: (itemsArray) => itemsArray.every(item => typeof item.text === 'string')
     },
     selectedItem: {
-      type: Object,
-      default: () => ({ text: '' }),
-      validator: (obj) => typeof obj.text === 'string'
+      type: [Object, String],
     },
     width: {
       type: String,

package/src/stories/Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue

@@ -47,13 +47,13 @@ import DropDownMenu from "../DropDown/DropDownMenu.vue";
 
 export default {
   name: 'FindOrAddPerson',
-  components: {DropDownMenu, BaseModal, BaseText, BaseButton, BaseInput },
+  components: { DropDownMenu, BaseModal, BaseText, BaseButton, BaseInput },
   props: {
     persons: {
       type: Array,
       required: true
     },
-    clubs: {
+    fencingClubs: {
       type: Array,
       required: true
     },
@@ -82,18 +82,17 @@ export default {
       modalButtonText: 'Find Person',
       selectedPronouns: '',
       pronouns: [
-        {text: 'He/Him', link: 'he-him'},
-        {text: 'She/Her', link: 'she-her'},
-        {text: 'They/Them', link: 'they-them'},
-        {text: 'Ze/Hir', link: 'ze-hir'},
-        {text: 'Xe/Xem', link: 'xe-xem'}
+        { text: 'He/Him', link: 'he-him' },
+        { text: 'She/Her', link: 'she-her' },
+        { text: 'They/Them', link: 'they-them' },
+        { text: 'Ze/Hir', link: 'ze-hir' },
+        { text: 'Xe/Xem', link: 'xe-xem' }
       ],
       selectedClub: '',
       formattedClubs: []
     };
   },
-  created() {
-    this.formattedClubs = this.mapClubData(this.clubs);
+  computed: {
   },
   watch: {
     inputValue(newValue) {
@@ -107,12 +106,25 @@ export default {
       }
     }
   },
+  created() {
+    this.formatClubs();
+  },
   methods: {
+    formatClubs() {
+      if (!this.fencingClubs[0].Name) return
+      console.log('----------------------- Mapping clubs:', this.fencingClubs); // Debug log
+      this.formattedClubs = this.fencingClubs.map(club => ({
+        text: club.Name,
+        link: club.ClubId.toString()
+      }));
+      console.log('----------------------- Mapping clubs:', this.formattedClubs); // Debug log
+    },
     updateInput(event) {
       this.inputValue = event.target.value;
     },
     selectPerson(person) {
-      console.log(person)
+      console.log(`------- FindOrAddPerson: selectPerson -------`);
+      console.log(person);
       this.showDropdown = false;
       this.inputValue = '';
       this.$emit('person-selected', person);
@@ -153,22 +165,15 @@ export default {
         clubId: this.selectedClub.link
       };
       this.$emit('new-person-submitted', newPerson);
-      console.log(newPerson)
+      console.log(newPerson);
       this.showModal = false;
     },
-    mapClubData(clubs) {
-      return clubs.map(club => ({
-        text: club.Name,
-        link: club.ClubId.toString()
-      }));
-    },
-    handleSelectedClub(value){
+    handleSelectedClub(value) {
       this.selectedClub = value;
     },
     handleSelectedPronouns(value) {
       this.selectedPronouns = value;
     }
-
   }
 };
 </script>

package/src/stories/Organisms/Containers/PoolSummary/PoolSummary.vue

@@ -6,18 +6,18 @@
       <span class="h-8"></span>
     </section>
     <section class="flex space-x-4">
-      <CounterBox :recommended="7" :count="event.PoolSize" label="Pool Size" />
-      <CounterBox :recommended="event.NumberOfPools" :count="event.NumberOfPools" label="Num Pools" />
-      <CounterBox :recommended="0" :count="event.numberOfFlights" label="Flights" />
+      <CounterBox :recommended="7" :count="poolSize" label="Pool Size" />
+      <CounterBox :recommended="2" :count="numberOfPools" label="Num Pools" />
+      <CounterBox :recommended="0" :count="numberOfFlights" label="Flights" />
     </section>
     <section class="flex flex-col">
       <div class="flex justify-center items-center">
-        <BaseText text="Fencer Counts" size="sm" color="quinary" weight="" />
+        <BaseText text="Fencer Counts" size="sm" color="quinary"  />
       </div>
       <div class="flex">
-        <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
-        <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
-        <EventStatusBox :status-count="event.Removed" status-label="REMOVED" box-color="bg-eventBoxRed" />
+        <EventStatusBox :status-count="absent" status-label="ABSENT" box-color="bg-eventBoxBlue" />
+        <EventStatusBox :status-count="present" status-label="PRESENT" box-color="bg-eventBoxGreen" />
+        <EventStatusBox :status-count="removed" status-label="REMOVED" box-color="bg-eventBoxRed" />
       </div>
     </section>
 
@@ -40,16 +40,39 @@ export default {
         const requiredFields = [
           'EventName',
           'RuleSummary',
-          'PoolSize',
-          'NumberOfPools',
-          'NumberOfFlights',
           'Absent',
           'Present',
           'Removed',
         ];
-        return requiredFields.every(field => field in event);
+
+        const missingFields = requiredFields.filter(field => !(field in event));
+        if (missingFields.length) {
+          console.warn(`Invalid event object: Missing fields: ${missingFields.join(', ')}`);
+          return false;
+        }
+        return true;
       },
     },
   },
+  computed: {
+    poolSize() {
+      return this.event.PoolSize || 0;
+    },
+    numberOfPools() {
+      return this.event.NumberOfPools || 0;
+    },
+    numberOfFlights() {
+      return this.event.NumberOfFlights || 0;
+    },
+    absent() {
+      return this.event.Absent || "0";
+    },
+    present() {
+      return this.event.Present || "0";
+    },
+    removed() {
+      return this.event.Removed || "0";
+    },
+  },
 };
 </script>

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.stories.js

@@ -2,6 +2,7 @@ import EditEvents from './EventAttendance.vue';
 import personsMock from '../../../../mocks/personsMock.js';
 import personsAllMock from '../../../../mocks/personGetAllMock.js';
 import eventMock from '../../../../mocks/eventMock.js';
+import clubsMock from '../../../../mocks/clubGetAllMock.js';
 
 export default {
     title: 'Templates/EventManagement/EditTournament/EventAttendance',
@@ -10,24 +11,59 @@ export default {
     args: {
         personsInTournament: personsMock,
         personsAll: personsAllMock,
+        fencingClubs: clubsMock,
         event: eventMock[0]
     },
-    argTypes: {}
-};
+    argTypes: {
+        personsInTournament: {
+            control: {type: 'array'},
+            description: 'List of persons in the tournament',
+            table: {
+                type: {summary: 'Array'},
+                defaultValue: {summary: '[]'}
+            }
+        },
+        personsAll: {
+            control: {type: 'array'},
+            description: 'List of all persons',
+            table: {
+                type: {summary: 'Array'},
+                defaultValue: {summary: '[]'}
+            }
+        },
+        fencingClubs: {
+            control: {type: 'array'},
+            description: 'List of clubs',
+            table: {
+                type: {summary: 'Array'},
+                defaultValue: {summary: '[]'}
+            }
+        },
+        event: {
+            control: {type: 'object'},
+            description: 'Event details',
+            table: {
+                type: {summary: 'Object'},
+                defaultValue: {summary: '{}'}
+            }
+        }
+    }
+}
 
 export const Default = {
     args: {
         personsInTournament: personsMock,
         personsAll: personsAllMock,
+        fencingClubs: clubsMock,
         event: eventMock[0]
     }
 };
 
-
 export const NoPeople = {
     args: {
         personsInTournament: [],
         personsAll: personsAllMock,
+        fencingClubs: clubsMock,
         event: eventMock[0]
     }
 };

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.vue

@@ -1,6 +1,5 @@
 <template>
   <section>
-
     <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs"/>
     <PoolSummary :event="event"/>
 
@@ -9,19 +8,28 @@
         <div class="w-full flex flex-col justify-center items-center" style="text-align: center">
           <section class="grid grid-cols-2 w-full mb-3">
             <div class="col-start-1 col-end-2 flex justify-start">
-              <FindOrAddPerson :clubs="clubs" :persons="personsAll" @new-person-submitted="handleNewPerson" @person-selected="handleAddExistingPerson" />
+              <FindOrAddPerson
+                  :persons="personsAll"
+                  :fencingClubs="fencingClubs"
+                  :addBorder="false"
+                  :addNewText="'Add New'"
+                  @new-person-submitted="handleNewPerson"
+                  @person-selected="handleAddExistingPerson" />
             </div>
             <div class="col-start-2 col-end-3 flex justify-end">
-              <DropDownMenu :label="label" :items="items" :selectedItem="localSelectedItem"
-                          @update:selectedItem="handleSelectedItem"/>
+              <DropDownMenu
+                  :label="label"
+                  :items="items"
+                  :selectedItem="localSelectedItem"
+                  @update:selectedItem="handleSelectedItem"/>
             </div>
           </section>
 
           <div v-if="personsInTournament.length === 0" class="mb-10">
             <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon"/>
-            <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'0 events added yet.'"
+            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'0 events added yet.'"
                       :weight="'normal'" data-testid="text-num-events"/>
-            <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'Click below to add first event.'"
+            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'Click below to add first event.'"
                       :weight="'normal'" data-testid="text-num-events"/>
           </div>
 
@@ -29,7 +37,6 @@
             <FencerCard :person="person" class="mb-4" @update:status="handleStatus"/>
           </section>
         </div>
-
       </section>
     </div>
   </section>
@@ -62,7 +69,7 @@ export default {
   props: {
     personsAll: Array,
     event: Object,
-    clubs: {
+    fencingClubs: {
       type: Array,
       default: () => []
     },
@@ -120,23 +127,22 @@ export default {
   },
   methods: {
     handleSelectedItem(selectedItem) {
-      console.log(`selectedItem: ${selectedItem}`)
+      console.log(`----- selectedItem: ${selectedItem}`);
       this.localSelectedItem = selectedItem;
     },
     handleStatus(person) {
-      console.log(`handleStatus: ${person}`)
+      console.log(`----- handleStatus: ${person}`);
       person.Status = person.Status === 'Absent' ? 'Present' : 'Absent';
       this.$emit('update:person', person);
     },
-    handleNewPerson(value)
-    {
-      console.log(`handleNewPerson: ${value}`)
+    handleNewPerson(value) {
+      console.log(`----- handleNewPerson: ${value}`);
       this.$emit('add:person', value);
     },
-    handleAddExistingPerson(value){
-      console.log(`handleAddExistingPerson: ${value}`)
+    handleAddExistingPerson(value) {
+      console.log(`----- handleAddExistingPerson: ${value}`);
       this.$emit('add:existing-person', value);
     }
   }
 }
-</script>
+</script>