@dcrackel/hematournamentui 1.0.91 → 1.0.93

package/package.json

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

package/src/mocks/personGetAllMock.js

@@ -2,10 +2,10 @@ const personGetAllMock =
     [
         {
             "PersonId": 1,
-            "DisplayName": "Dwain Crackel",
+            "DisplayName": "Bob Smith",
             "Pronouns": null,
-            "FirstName": "Dwain",
-            "LastName": "Crackel",
+            "FirstName": "Bob",
+            "LastName": "Smith",
             "Birthday": null,
             "ClubId": 1,
             "PersonEmails": [

package/src/mocks/personsMock.js

@@ -47,8 +47,8 @@ const personsMock = [
         "Status": "Absent",
         "Person": {
             "PersonId": 1,
-            "FirstName": "Dwain",
-            "LastName": "Crackel",
+            "FirstName": "Bob",
+            "LastName": "Smith",
             "Images": [
                 {
                     "ImageId": 7,
@@ -138,7 +138,16 @@ const personsMock = [
             "PersonId": 3,
             "FirstName": "Dave",
             "LastName": "Larabee",
-            "Images": [],
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/men/31.jpg",
+                    "AltText": null,
+                    "Type": "Portrait",
+                    "EntityId": 1,
+                    "EntityType": "Person"
+                }
+            ],
             "Club": {
                 "ClubId": 1,
                 "Name": "Test Club",
@@ -169,7 +178,16 @@ const personsMock = [
             "PersonId": 5,
             "FirstName": "Darlene",
             "LastName": "Acevedo",
-            "Images": [],
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/women/31.jpg",
+                    "AltText": null,
+                    "Type": "Portrait",
+                    "EntityId": 1,
+                    "EntityType": "Person"
+                }
+            ],
             "Club": {
                 "ClubId": 1,
                 "Name": "Test Club",
@@ -191,7 +209,16 @@ const personsMock = [
             "PersonId": 6,
             "FirstName": "Courtney",
             "LastName": "Medina",
-            "Images": [],
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/women/19.jpg",
+                    "AltText": null,
+                    "Type": "Portrait",
+                    "EntityId": 1,
+                    "EntityType": "Person"
+                }
+            ],
             "Club": {
                 "ClubId": 1,
                 "Name": "Test Club",
@@ -213,7 +240,16 @@ const personsMock = [
             "PersonId": 7,
             "FirstName": "Emily",
             "LastName": "Carlson",
-            "Images": [],
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/women/12.jpg",
+                    "AltText": null,
+                    "Type": "Portrait",
+                    "EntityId": 1,
+                    "EntityType": "Person"
+                }
+            ],
             "Club": {
                 "ClubId": 1,
                 "Name": "Test Club",
@@ -257,7 +293,16 @@ const personsMock = [
             "PersonId": 9,
             "FirstName": "Sean",
             "LastName": "McCoy",
-            "Images": [],
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/men/12.jpg",
+                    "AltText": null,
+                    "Type": "Portrait",
+                    "EntityId": 1,
+                    "EntityType": "Person"
+                }
+            ],
             "Club": {
                 "ClubId": 1,
                 "Name": "Test Club",
@@ -323,7 +368,16 @@ const personsMock = [
             "PersonId": 12,
             "FirstName": "Lindsey",
             "LastName": "Mitchell",
-            "Images": [],
+            "Images": [
+                {
+                    "ImageId": 7,
+                    "URL": "https://randomuser.me/api/portraits/women/33.jpg",
+                    "AltText": null,
+                    "Type": "Portrait",
+                    "EntityId": 1,
+                    "EntityType": "Person"
+                }
+            ],
             "Club": {
                 "ClubId": 1,
                 "Name": "Test Club",

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

@@ -13,13 +13,12 @@
       </section>
       <div class="flex flex-col pl-4">
         <div class="flex flex-row pb-2">
-          <BaseButton label="Edit" size="sm" type="primary" @click="onEdit" class="w-28" />
-          <BaseButton label="Manage" size="sm" type="primary" @click="onManage" class="w-2/3" />
+          <BaseButton label="Edit" size="sm" type="primary" @click="onEdit" class="w-1/2" />
+          <BaseButton label="Manage" size="sm" type="primary" @click="onManage" class="w-1/2" />
         </div>
         <div class="flex flex-row">
           <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue" />
           <EventStatusBox :status-count="event.Absent" status-label="ABSENT" box-color="bg-eventBoxGreen" />
-          <EventStatusBox :status-count="event.Removed" status-label="REMOVED" box-color="bg-eventBoxRed" />
         </div>
       </div>
     </div>

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

@@ -127,7 +127,6 @@ export const CheckedIn = {
                 PersonId: 2,
                 FirstName: 'Jane',
                 LastName: 'Smith',
-                ClubName: 'Fencing Club',
                 Images: [
                     {
                         ImageId: 2,
@@ -137,7 +136,14 @@ export const CheckedIn = {
                         EntityId: 2,
                         EntityType: 'Person'
                     }
-                ]
+                ],
+                "Club": {
+                    "ClubId": 1,
+                    "Name": "Test Club",
+                    "Description": "This is a test",
+                    "AddressId": 1,
+                    "SocialMediaId": null
+                },
             }
         }
     }
@@ -154,7 +160,6 @@ export const Absent = {
                 PersonId: 3,
                 FirstName: 'Alice',
                 LastName: 'Johnson',
-                ClubName: 'Martial Arts Club',
                 Images: [
                     {
                         ImageId: 3,
@@ -164,7 +169,14 @@ export const Absent = {
                         EntityId: 3,
                         EntityType: 'Person'
                     }
-                ]
+                ],
+                "Club": {
+                    "ClubId": 1,
+                    "Name": "Test Club",
+                    "Description": "This is a test",
+                    "AddressId": 1,
+                    "SocialMediaId": null
+                },
             }
         }
     }

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

@@ -30,63 +30,25 @@
           @update:selected="handleAttendance"
       />
     </div>
+    <div class="ml-4 border-l border-dropdownSelect h-20 w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg">
+      <BaseIcon icon-name="fa-circle-xmark" size="2xl" color="quinary" class="pt-6" hover="alarm" @click="handlerRemoveFencer" />
+    </div>
   </div>
 </template>
 
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
 
 export default {
   name: 'FencerCard',
-  components: { ButtonBar, BaseText },
+  components: {BaseIcon, ButtonBar, BaseText },
   props: {
     person: {
       type: Object,
-      required: true,
-      default: () => ({
-        "Id": 73,
-        "EventId": 1,
-        "PersonId": 1,
-        "Seed": 1,
-        "Status": "Absent",
-        "Person": {
-          "PersonId": 1,
-          "FirstName": "Dave",
-          "LastName": "Jones",
-          "Images": [
-            {
-              "ImageId": 7,
-              "URL": "https://randomuser.me/api/portraits/men/22.jpg",
-              "AltText": null,
-              "Type": "Portrait",
-              "EntityId": 1,
-              "EntityType": "Person"
-            }
-          ],
-          "HEMARatings": [
-            {
-              "Id": 1,
-              "PersonId": 1,
-              "Rank": 1700,
-              "Rating": 1200.2,
-              "WeaponId": 1,
-              "Updated": "2024-05-30T17:39:47.000Z"
-            }
-          ],
-          "M2Ratings": [
-            {
-              "id": 1,
-              "PersonId": 1,
-              "EventId": 1,
-              "WeaponId": 1,
-              "Rating": "E",
-              "DateEarned": "2024-05-30"
-            }
-          ]
-        }
-      })
-    },
+      required: true
+    }
   },
   computed: {
     fullName() {
@@ -123,6 +85,9 @@ export default {
     handleAttendance(selected) {
       const person = { ...this.person, Status: selected };
       this.$emit('update:status', person);
+    },
+    handlerRemoveFencer(){
+      this.$emit('remove:fencer', this.person);
     }
   }
 };

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

@@ -22,16 +22,21 @@
           @update:selected="handleAssignment"
       />
     </div>
+
+    <div class="ml-4 border-l border-dropdownSelect h-20 w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg">
+      <BaseIcon icon-name="fa-circle-xmark" size="2xl" color="quinary" class="pt-6" hover="alarm" @click="handlerRemoveFencer" />
+    </div>
   </div>
 </template>
 
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
 
 export default {
   name: 'StaffCard',
-  components: { ButtonBar, BaseText },
+  components: {BaseIcon, ButtonBar, BaseText },
   props: {
     staff: {
       type: Object,
@@ -67,6 +72,9 @@ export default {
     handleAssignment(selected) {
       const staff = { ...this.staff, Status: selected };
       this.$emit('update:assignment', staff);
+    },
+    handlerRemoveFencer() {
+      this.$emit('remove:staff', this.staff);
     }
   }
 };

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

@@ -23,6 +23,7 @@
                       :seed="person.Seed"
                       :portrait="clubLogoURL(person)"
                       @swap-fencers="handleSwap"
+                      @remove:fencer="handleRemoveFencer"
       />
     </div>
   </div>
@@ -43,6 +44,10 @@ export default {
     PoolFencerCard
   },
   props: {
+    poolId: {
+      type: [String, Number],
+      required: true
+    },
     poolName: {
       type: String,
       required: true
@@ -76,10 +81,9 @@ export default {
   computed: {
     directors() {
       return this.staff
-          //.filter(staffMember => staffMember.Role === 'Director')
           .map(staffMember => ({
             text: staffMember.Person.DisplayName,
-            link: staffMember.PersonId // Assuming PersonId is a suitable unique identifier
+            link: { personId: staffMember.PersonId, eventId: staffMember.EventId, poolId: this.poolId }
           }));
     }
   },
@@ -96,9 +100,11 @@ export default {
       return portrait ? portrait.Link : '';
     },
     handleSelectedItem(event){
-      console.log(event)
-      this.selectedDirector = { text: event.text, link: event.link }
-      this.$emit('update:setDirector', event.link)
+      this.selectedDirector = { text: event.text, link: { directorId: event.link, poolId: this.poolId } }
+      this.$emit('update:setDirector', event)
+    },
+    handleRemoveFencer(person) {
+      this.$emit('remove:fencer', person);
     }
   }
 };

package/src/stories/Organisms/Headers/AttendanceSummary/AttendanceSummary.vue

@@ -12,7 +12,6 @@
       <div class="flex">
         <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>
 

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

@@ -34,7 +34,7 @@
           </div>
 
           <section v-for="person in sortedPersons" class="w-full">
-            <FencerCard :person="person" class="mb-4" @update:status="handleStatus"/>
+            <FencerCard :person="person" class="mb-4" @update:status="handleStatus" @remove:fencer="handleRemoveFencer"/>
           </section>
         </div>
       </section>
@@ -146,6 +146,10 @@ export default {
     handleTabMenuClick(value) {
       console.log(`----- handleTabMenuClick: ${value}`);
       this.$emit('tab:menu-click', value);
+    },
+    handleRemoveFencer(value) {
+      console.log(`----- handleRemoveFencer: ${value}`);
+      this.$emit('remove:fencer', value);
     }
   }
 }

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

@@ -62,11 +62,37 @@ export const NoPoolsYet = {
     }
 };
 
+const staff = [{
+        Id: 2,
+        TournamentId: 4,
+        EventId: 5,
+        PoolId: 102,
+        PersonId: 23,
+        Role: 'Director',
+        Person: {
+            DisplayName: 'Lucas Garcia',
+            Club: {
+                ClubId: 1,
+                Name: 'Acme Fencing Club'
+            },
+            Images: [
+                {
+                    URL: 'https://randomuser.me/api/portraits/men/77.jpg'
+                }
+            ]
+        },
+        Pool: {
+            PoolId: 102,
+            Name: 'Pool 1',
+            RingName: 'Ring 1'
+        }
+    }];
+
 export const liveMode = {
     args: {
         event:eventPersonGetPoolAssignmentEvent,
         poolAssignments: eventPersonGetInitialPoolAssignments,
-        staff: eventPersonGetInitialStaff,
+        staff: staff,
         mode: 'Live'
     }
 };

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

@@ -8,6 +8,7 @@
     <div class="w-full flex flex-row flex-wrap justify-center" :class="this.event.Flights > 1 ? 'mt-0' : 'mt-4'">
       <div v-for="pool in filteredPools" :key="pool.Name">
         <Pool
+            :poolId="pool.PoolId"
             :poolName="pool.Name"
             :ringName="pool.RingName"
             :poolInd="pool.poolStrengthInd"
@@ -16,6 +17,7 @@
             :staff="staff"
             @swap-fencers="swapFencers"
             @update:setDirector="setDirector"
+            @remove:fencer="handleRemoveFencer"
         />
       </div>
       <div v-if="filteredPools.length < 1" class="w-full flex justify-center items-center">
@@ -135,6 +137,9 @@ export default {
     setDirector(personId) {
       this.$emit('update:director', personId );
     },
+    handleRemoveFencer(person){
+      this.$emit('remove:fencer', person);
+    }
   }
 }
 </script>

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

@@ -31,7 +31,7 @@
 
           <div v-if="viewName === 'Staff List'" class="mt-4 w-full">
             <div v-for="staff in staffMembers" :key="staff.Id">
-              <StaffCard :staff="staff" class="mb-4" @update:assignment="handleAssignment" />
+              <StaffCard :staff="staff" class="mb-4" @update:assignment="handleAssignment" @remove:staff="handleRemoveStaff" />
             </div>
           </div>
 
@@ -129,6 +129,9 @@ export default {
     },
     handleStaffView(value){
       this.viewName = value;
+    },
+    handleRemoveStaff(value){
+      this.$emit('remove:staff', value);
     }
   }
 }