@dcrackel/hematournamentui 1.0.320 → 1.0.322

package/package.json

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

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

@@ -6,7 +6,7 @@
       <i class="fa-solid fa-chevron-down text-xs text-quinary" />
     </div>
     <transition name="fade-in-down">
-      <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-9 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44" :class="dropDownWidth">
+      <div v-if="isDropDownOpen" class="w-full flex flex-col shadow-lg mt-9 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44" :class="dropDownWidth">
         <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
           <BaseText :text="item.text" color="quinary" size="sm" weight="normal" class="py-0.5" />
         </a>

package/src/stories/Organisms/Form/AddDisplay/AddDisplay.vue

@@ -26,7 +26,7 @@
     <!-- Club Dropdown -->
     <div class="mb-4" v-if="isAdmin">
       <BaseText :color="'quinary'" :size="'sm'" :text="'Club'" :weight="'normal'" class="mb-1"/>
-      <DropDownMenu :label="selectedClub" :items="clubs" :selected-item="selectedClub" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleClubChange" />
+      <DropDownMenu :label="selectedClub" :items="formattedClubs" :selected-item="selectedClub" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleClubChange" />
     </div>
     <div class="mb-4" v-else>
       <TitledInput :inputValue="selectedClub.text" :disabled="isAdmin" title="Club" />
@@ -95,6 +95,14 @@ export default {
       ]
     };
   },
+  computed: {
+    formattedClubs() {
+      return this.clubs.map(club => ({
+        text: club.Name,
+        link: club.ClubId.toString()
+      }));
+    },
+  },
   methods: {
     handleDisplayNameChange(value) {
       this.localDisplay.displayName = value;

package/src/stories/Organisms/Skeletons/FencerCard/FencerCardSkeleton.stories.js

@@ -0,0 +1,17 @@
+import FencerCardSkeleton from './FencerCardSkeleton.vue';
+
+
+export default {
+    title: 'Organisms/Skeletons/FencerCard',
+    component: FencerCardSkeleton,
+    tags: ['autodocs'],
+    args: {
+
+    },
+    argTypes: {
+    }
+};
+
+export const Default = {
+    components: { FencerCardSkeleton },
+};

package/src/stories/Organisms/Skeletons/FencerCard/FencerCardSkeleton.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white animate-pulse">
+    <div class="mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center">
+      <!-- Skeleton placeholder for the up/down icons and position number -->
+      <div class="flex flex-col items-center justify-center h-full">
+        <div class="h-6 w-6 bg-dropdownSelect rounded-full my-1"></div>
+      </div>
+    </div>
+    <div class="mr-4">
+      <!-- Skeleton placeholder for the portrait image -->
+      <div class="w-14 h-14 rounded-xl bg-dropdownSelect"></div>
+    </div>
+    <div class="flex flex-col w-4/12 justify-star">
+      <!-- Skeleton placeholders for the display name and club name -->
+      <div class="h-6 bg-dropdownSelect rounded w-3/4 mb-2"></div>
+      <div class="h-4 bg-dropdownSelect rounded w-1/2"></div>
+    </div>
+    <div class="grid grid-cols-2 gap-x-4 mr-10">
+      <!-- Skeleton placeholders for the ratings -->
+      <div class="h-4 bg-dropdownSelect rounded w-3/4 mb-2"></div>
+      <div class="h-4 bg-dropdownSelect rounded w-1/2"></div>
+      <div class="h-4 bg-dropdownSelect rounded w-3/4 mb-2"></div>
+      <div class="h-4 bg-dropdownSelect rounded w-1/2"></div>
+    </div>
+    <div>
+      <div class="h-4 bg-dropdownSelect rounded w-16"></div>
+      <div class="h-4 bg-dropdownSelect rounded w-20 mt-2"></div>
+    </div>
+    <div>
+      <div class="h-4 bg-dropdownSelect rounded w-6 ml-2"></div>
+      <div class="h-4 bg-dropdownSelect rounded w-6 ml-2 mt-2"></div>
+    </div>
+    <div class="mr-4 ml-auto">
+      <!-- Skeleton placeholder for the button bar -->
+      <div class="h-11 bg-dropdownSelect rounded w-36"></div>
+    </div>
+    <div class="ml-4 border-l border-dropdownSelect h-20 w-10 items-center text-center pt-6">
+      <!-- Skeleton placeholder for the delete icon/spinner -->
+      <div class="h-6 w-6 ml-2 mt-1 bg-dropdownSelect rounded-full"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FencerCardSkeleton'
+}
+</script>

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

@@ -2,6 +2,7 @@ import ClubDisplay from './ClubDisplay.vue';
 import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js";
 import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
 import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+import clubGetAllMock from "../../../../mocks/clubGetAllMock.js";
 
 export default {
     title: 'Templates/EventManagement/ClubDisplay',
@@ -33,7 +34,17 @@ export const Default = {
         eventDropDown: getEventByTournamentId,
         isAdmin: false,
         userClub: {text: 'Cats Club', link: '1'},
-        clubs: []
+        clubs: clubGetAllMock
     }
 };
 
+export const isAdmin = {
+    args: {
+        displays: getCLubDisplayByClubId,
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId,
+        isAdmin: true,
+        userClub: {text: 'Cats Club', link: '1'},
+        clubs: clubGetAllMock
+    }
+};

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

@@ -69,3 +69,13 @@ export const NoPeople = {
         event: eventMock[0]
     }
 };
+
+export const peopleAndLoading = {
+    args: {
+        personsInTournament: eventPersonGetEventById,
+        personsAll: personsAllMock,
+        fencingClubs: clubsMock,
+        event: eventMock[0],
+        loading: true
+    }
+};

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

@@ -25,18 +25,10 @@
             </div>
           </section>
 
-          <div v-if="personsInTournament.length === 0" class="mb-10">
-            <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox">
-              <BaseText text="Remember to assign staff to your event!" size="lg" color="quaternary" weight="bold" class="w-full text-center py-2"/>
-            </div>
-            <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon"/>
-            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'0 fencers have been added!'"
-                      :weight="'normal'" data-testid="text-num-events"/>
-            <BaseText :color="'primaryHighlight'" :size="'md'" :text="'Click Add New button to get started.'"
-                      :weight="'normal'" data-testid="text-num-events"/>
-          </div>
-
-          <section v-for="(person, index) in sortedPersons" class="w-full">
+          <section v-if="loading" v-for="index in 6" class="w-full">
+              <FencerCardSkeleton class="mb-4"/>
+          </section>
+          <section v-if="!loading" v-for="(person, index) in sortedPersons" class="w-full">
             <FencerCard :person="person" class="mb-4"
                         :isLast="index === sortedPersons.length - 1"
                         :isEdit="event.Status === 'planning' || event.Status === 'preparation'"
@@ -45,6 +37,16 @@
                         @update:moveUp="handleMoveUp"
                         @update:moveDown="handleMoveDown"/>
           </section>
+          <div v-if="!loading && personsInTournament.length === 0" class="mb-10">
+            <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-poolBox">
+              <BaseText text="Remember to assign staff to your event!" size="lg" color="quaternary" weight="bold" class="w-full text-center py-2 px-8"/>
+            </div>
+            <img alt="Small desert scene with wind blowing." class="w-60 mt-8 mx-auto" :src="emptyDesertIcon"/>
+            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'0 fencers have been added!'"
+                      :weight="'normal'" data-testid="text-num-events"/>
+            <BaseText :color="'primaryHighlight'" :size="'md'" :text="'Click Add New button to get started.'"
+                      :weight="'normal'" data-testid="text-num-events"/>
+          </div>
         </div>
       </section>
     </div>
@@ -61,9 +63,11 @@ import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.v
 import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
 import FindOrAddPerson from "../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
 import AttendanceSummary from "../../../Organisms/Headers/AttendanceSummary/AttendanceSummary.vue";
+import FencerCardSkeleton from "../../../Organisms/Skeletons/FencerCard/FencerCardSkeleton.vue";
 
 export default {
   components: {
+    FencerCardSkeleton,
     AttendanceSummary,
     FindOrAddPerson,
     DropDownMenu,
@@ -83,6 +87,10 @@ export default {
     personsInTournament: {
       type: Array,
       default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {