@dcrackel/hematournamentui 1.0.699 → 1.0.701

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

@@ -42,18 +42,16 @@
 </template>
 
 <script>
-import PoolSummary from "../../../Organisms/Headers/PoolSummary/PoolSummary.vue";
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import PoolResultsHeader from "../../../Organisms/Headers/PoolResultsHeader/PoolResultsHeader.vue";
-import PoolGrid from "../../../Organisms/Containers/PoolGrid/PoolGrid.vue";
-import PoolResultsTable from "../../../Organisms/Containers/PoolResults/PoolResultsTable.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
-import { tabs } from '../../../Util/tabs.js';
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import PoolResultsHeader from "../../../Organisms/Headers/PoolResultsHeader/PoolResultsHeader.vue";
+import PoolResultsTable from "../../../Organisms/Containers/PoolResults/PoolResultsTable.vue";
+import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
+import { tabs } from '../../../Util/tabs.js';
 
 export default {
-  name: 'PoolResults',
-  emits: ['tab:menu-click', 'update:moveFencerDESeedDown', 'update:moveFencerDESeedUp', 'update:withdraw'],
-  components: {BaseModal, PoolResultsTable, PoolGrid, PoolResultsHeader, EditEventsTopMenu, PoolSummary},
+  name: 'PoolResults',
+  emits: ['tab:menu-click', 'update:moveFencerDESeedDown', 'update:moveFencerDESeedUp', 'update:withdraw'],
+  components: {BaseModal, PoolResultsTable, PoolResultsHeader, EditEventsTopMenu},
   props: {
     event: {
       type: Object,
@@ -72,12 +70,12 @@ export default {
     return {
       tabs,
       windowWidth: window.innerWidth,
-      initialCutoffIndex: 0,
-      showRemoveModal: false,
-      withdrawPerson: Object,
-      localPoolResults: this.poolResults,
-      localPromoted: 100,
-      isPromotedSet: false
+      initialCutoffIndex: 0,
+      showRemoveModal: false,
+      withdrawPerson: {},
+      localPoolResults: this.clonePoolResults(this.poolResults),
+      localPromoted: 100,
+      isPromotedSet: false
     }
   },
   mounted() {
@@ -89,12 +87,13 @@ export default {
     window.removeEventListener('resize', this.handleResize);
   },
   watch: {
-    poolResults: {
-      deep: true,
-      handler(newVal) {
-        this.localPoolResults = newVal;
-      }
-    },
+    poolResults: {
+      deep: true,
+      immediate: true,
+      handler(newVal) {
+        this.localPoolResults = this.clonePoolResults(newVal);
+      }
+    },
   },
   computed: {
     isMobile() {
@@ -109,16 +108,18 @@ export default {
     eventStatus() {
       return this.event?.Status || this.event?.status || '';
     },
-    rules() {
-      return this.event.EventRules || this.event.eventRules || [];
-    },
-  },
-  methods: {
-    getPromotedByRule() {
-      const rules = this.event.EventRules;
-      const rule = rules.find((rule) => rule.Rules.RuleName === "DEPromoteBy");
-      return rule ? rule.RuleValue : "Percent";
-    },
+    rules() {
+      return this.event.EventRules || this.event.eventRules || [];
+    },
+    promotedByRule() {
+      const rule = this.rules.find((rule) => rule.Rules.RuleName === "DEPromoteBy");
+      return rule ? rule.RuleValue : "Percent";
+    },
+  },
+  methods: {
+    getPromotedByRule() {
+      return this.promotedByRule;
+    },
     getInitialPromoted() {
       if (!this.isPromotedSet) {
         this.isPromotedSet = true;
@@ -130,16 +131,13 @@ export default {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
-    handleIncreaseCount(value) {
-      let numPercent = this.getNumericValue(value);
-      if (this.getPromotedByRule() === 'Top') {
-        const rule = this.rules.find(rule => rule.Rules.RuleName === "DENumOfPromotion");
-        if (rule) {
-          rule.RuleValue++;
-          this.updatePromotions();
-        }
-        return;
-      }
+    handleIncreaseCount(value) {
+      let numPercent = this.getNumericValue(value);
+      if (this.getPromotedByRule() === 'Top') {
+        this.localPromoted = Number(this.localPromoted || 0) + 1;
+        this.updatePromotions(this.localPromoted);
+        return;
+      }
 
       if (numPercent === 100) {
         this.initialCutoffIndex = 500;
@@ -152,15 +150,12 @@ export default {
         this.calculateInitialCutoffIndex(100);
       }
     },
-    handleDecreaseCount(value) {
-      if (this.getPromotedByRule() === 'Top') {
-        const rule = this.rules.find(rule => rule.Rules.RuleName === "DENumOfPromotion");
-        if (rule) {
-          rule.RuleValue--;
-          this.updatePromotions();
-        }
-        return;
-      }
+    handleDecreaseCount(value) {
+      if (this.getPromotedByRule() === 'Top') {
+        this.localPromoted = Math.max(1, Number(this.localPromoted || 1) - 1);
+        this.updatePromotions(this.localPromoted);
+        return;
+      }
 
       let numPercent = this.getNumericValue(value);
       if (numPercent - 10 >= 10) {
@@ -190,27 +185,27 @@ export default {
       return numPercent
     },
     calculateInitialCutoffIndex(numPercent) {
-      if (this.getPromotedByRule() === 'Top') {
-        const numPromoted = parseInt(this.promoted, 10) || 2;
-        this.updatePromotions(numPromoted); // Centralized logic
-        return;
-      }
-
-      const totalFencers = this.poolResults.length;
+      if (this.getPromotedByRule() === 'Top') {
+        const numPromoted = parseInt(this.localPromoted, 10) || 2;
+        this.updatePromotions(numPromoted);
+        return;
+      }
+
+      const totalFencers = this.localPoolResults.length;
       const promotionRate = numPercent / 100;
 
       this.localPromoted = `${numPercent}%`;
       this.initialCutoffIndex = Math.ceil(totalFencers * promotionRate);
 
-      this.updatePromotions(this.initialCutoffIndex); // Centralized logic
-    },
-    updatePromotions(numPromoted = parseInt(this.promoted, 10) || 2) {
-      const pools = this.groupFencersByPool(this.poolResults);
-
-      Object.entries(pools).forEach(([poolId, poolFencers]) => {
-        this.sortFencersByCriteria(poolFencers);
-        this.markTopFencers(poolFencers, numPromoted);
-      });
+      this.updatePromotions(this.initialCutoffIndex);
+    },
+    updatePromotions(numPromoted = parseInt(this.localPromoted, 10) || 2) {
+      const pools = this.groupFencersByPool(this.localPoolResults);
+
+      Object.values(pools).forEach((poolFencers) => {
+        const sortedFencers = this.sortFencersByCriteria(poolFencers);
+        this.markTopFencers(sortedFencers, numPromoted);
+      });
     },
     groupFencersByPool(poolResults) {
       return poolResults.reduce((acc, person) => {
@@ -272,9 +267,12 @@ export default {
     moveFencerDESeedDown(person) {
       this.$emit('update:moveFencerDESeedDown', person);
     },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    }
-  }
-};
-</script>
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    },
+    clonePoolResults(poolResults) {
+      return Array.isArray(poolResults) ? poolResults.map(person => ({ ...person })) : [];
+    }
+  }
+};
+</script>

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

@@ -45,19 +45,21 @@ export default {
 };
 
 
-export const Default = {
-    personsAll: [
-        { id: 1, firstName: 'John', lastName: 'Doe' },
-        { id: 2, firstName: 'Jane', lastName: 'Smith' },
-    ],
-    event: {
-        EventId: 1,
-        EventName: 'Sample Event'
-    },
-    fencingClubs: [
-        { ClubId: 1, Name: 'Acme Fencing Club' },
-        { ClubId: 2, Name: 'Global Fencing Academy' }
-    ],
-    staffMembers: getAllStaffByTournamentId,
-    role: 'admin'
-};
+export const Default = {
+    args: {
+        personsAll: [
+            { id: 1, firstName: 'John', lastName: 'Doe' },
+            { id: 2, firstName: 'Jane', lastName: 'Smith' },
+        ],
+        event: {
+            EventId: 1,
+            EventName: 'Sample Event'
+        },
+        fencingClubs: [
+            { ClubId: 1, Name: 'Acme Fencing Club' },
+            { ClubId: 2, Name: 'Global Fencing Academy' }
+        ],
+        staffMembers: getAllStaffByTournamentId,
+        role: 'admin'
+    }
+};

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

@@ -37,11 +37,11 @@
 
           <div v-if="viewName === 'Staff Assignments'" class="mt-4 w-full">
             <div v-for="(pool, poolId) in groupedStaffByPool" :key="poolId">
-              <BaseText :text="`${pool.poolName} - ${pool.ringName}`" size="lg" color="quaternary" weight="bold" class="py-2 " />
-              <div v-for="staff in pool.staff" :key="staff.Id">
-                <StaffCard :staff="staff"  class="mb-4" />
-              </div>
-            </div>
+              <BaseText :text="`${pool.poolName} - ${pool.ringName}`" size="lg" color="quaternary" weight="bold" class="py-2 " />
+              <div v-for="staff in pool.staff" :key="staff.Id">
+                <StaffCard :staff="staff" class="mb-4" @update:assignment="handleAssignment" @remove:staff="handleRemoveStaff" />
+              </div>
+            </div>
           </div>
 
         </div>
@@ -69,7 +69,10 @@ export default {
     BaseText,
   },
   props: {
-    personsAll: Array,
+    personsAll: {
+      type: Array,
+      default: () => []
+    },
     event: Object,
     fencingClubs: {
       type: Array,

package/src/stories/Templates/Menus/Admin/AdminLeftMenu.stories.js

@@ -1,24 +1,27 @@
 import AdminLeftMenu from './AdminLeftMenu.vue';
 
-export default {
-    title: 'Templates/Menus/Admin/AdminLeftMenu',
-    component: AdminLeftMenu,
-    tags: ['autodocs']
-};
-const Template = args => ({
-    components: {AdminLeftMenu},
-    setup() {
-        return {args};
-    },
-    methods: {
-        onMenuClick(index) {
-            alert(`Button ${index + 1} clicked!`);
-        }
-    }
-});
-
-export const Default = {
-    args: {
+export default {
+    title: 'Templates/Menus/Admin/AdminLeftMenu',
+    component: AdminLeftMenu,
+    tags: ['autodocs'],
+    args: {
+        buttons: [
+            { label: 'Assignments', iconName: 'fa-clipboard-list' },
+            { label: 'Tournaments', iconName: 'fa-trophy' },
+            { label: 'Clubs', iconName: 'fa-users' },
+            { label: 'People', iconName: 'fa-user-group' }
+        ]
+    },
+    argTypes: {
+        buttons: { control: { type: 'array' } },
+        'button:Account': { action: 'button:Account' },
+        'button:Click': { action: 'button:Click' },
+        'button:Logout': { action: 'button:Logout' },
+    }
+};
+
+export const Default = {
+    args: {
         buttons: [
             { label: 'Assignments', iconName: 'fa-clipboard-list'  },
             { label: 'Tournaments', iconName: 'fa-trophy' },

package/src/stories/Templates/Menus/Admin/AdminLeftMenu.vue

@@ -10,11 +10,12 @@
     </section>
 
      <section class="flex flex-col p-2 h-full w-full px-4">
-      <BaseButton
-          v-for="button in buttons"
-          :label="button.label"
-          :iconName="button.iconName"
-          type="adminSecondary"
+      <BaseButton
+          v-for="button in buttons"
+          :key="button.label"
+          :label="button.label"
+          :iconName="button.iconName"
+          type="adminSecondary"
           size="sm"
           @buttonClick="handleButtonClick(button)"
       />
@@ -40,17 +41,17 @@
     </section>
   </div>
 
-  <!-- Mobile Menu -->
-
-  <section class="flex md:hidden bg-secondary w-full h-10 items-center justify-between px-4">
-    <img alt="Logo" class="w-8" :src="logoImage" @click="handleButtonClick('/')"  />
+  <!-- Mobile Menu -->
+
+  <section class="flex md:hidden bg-secondary w-full h-10 items-center justify-between px-4">
+    <img alt="Logo" class="w-8 cursor-pointer" :src="logoImage" @click="handleButtonClick(homeButton)"  />
     <div>
       <BaseIcon icon-name="fa-bars" size="md" color="neutral" @click="openDropDownMenu($event)" />
     </div>
   </section>
   <div v-if="dropdownOpen" id="mobiledropdown" class="fixed right-2 mt-10 bg-secondary border rounded border-lineGrey shadow-xl z-50 p-1" @click.stop>
     <ul>
-      <li v-for="item in dropdownItems" :key="item.label" @click="handleButtonClick(item)" class="px-2 py-2 cursor-pointer justify-end flex">
+      <li v-for="item in dropdownItems" :key="item.label" @click="handleButtonClick(item)" class="px-2 py-2 cursor-pointer justify-end flex">
         <BaseText :text="item.label" color="neutral" size="xs" tag="p" weight="normal" class="mt-0.5" />
         <BaseIcon :icon-name="item.iconName" size="sm" color="neutral" class="ml-2" />
       </li>
@@ -73,25 +74,32 @@ export default {
       default: () => []
     }
   },
-  data() {
-    return {
-      logoImage,
-      dropdownOpen: false,
-      dropdownItems: [
-        ...this.buttons.map(button => ({ label: button.label, iconName: button.iconName })),
-        { label: "Account", iconName: "fa-user" },
-        { label: "Log Out", iconName: "fa-right-to-bracket" }
-      ]
-    };
-  },
-  emits: ['button:Account', 'button:Logout', 'button:Click'],
-  mounted() {
-    document.addEventListener('click', this.handleClickOutside);
-  },
-  beforeDestroy() {
-    document.removeEventListener('click', this.handleClickOutside);
-  },
-  methods: {
+  data() {
+    return {
+      logoImage,
+      dropdownOpen: false,
+    };
+  },
+  emits: ['button:Account', 'button:Logout', 'button:Click'],
+  computed: {
+    homeButton() {
+      return { label: 'Home', iconName: 'fa-house', route: '/' };
+    },
+    dropdownItems() {
+      return [
+        ...this.buttons,
+        { label: "Account", iconName: "fa-user" },
+        { label: "Log Out", iconName: "fa-right-to-bracket" }
+      ];
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+  methods: {
     handleButtonClick(button) {
       this.dropdownOpen = false;
 
@@ -110,13 +118,13 @@ export default {
     handleAccount() {
       this.$emit('button:Account');
     },
-    handleLogOut() {
-      this.$emit('button:Logout');s
-    },
-    openDropDownMenu() {
-      this.dropdownOpen = !this.dropdownOpen;
-      event.stopPropagation();
-    },
+    handleLogOut() {
+      this.$emit('button:Logout');
+    },
+    openDropDownMenu(event) {
+      this.dropdownOpen = !this.dropdownOpen;
+      event?.stopPropagation();
+    },
     closeDropDownMenu() {
       this.dropdownOpen = false;
     },

package/src/stories/Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.stories.js

@@ -1,13 +1,20 @@
-import EditTournamentMenu from "./EditEventsTopMenu.vue";
-import { tabs } from '../../../Util/tabs.js';
-
-export default {
-    title: 'Templates/Menus/Events/EditEventsTopMenu',
-    component: EditTournamentMenu,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
-};
+import EditTournamentMenu from "./EditEventsTopMenu.vue";
+import { personProfileTabs, tabs } from '../../../Util/tabs.js';
+
+export default {
+    title: 'Templates/Menus/Events/EditEventsTopMenu',
+    component: EditTournamentMenu,
+    tags: ['autodocs'],
+    args: {
+        currentTab: 'Checkin',
+        tabs: tabs('admin')
+    },
+    argTypes: {
+        currentTab: { control: { type: 'text' } },
+        tabs: { control: { type: 'array' } },
+        tabMenuClick: { action: 'tabMenuClick' },
+    }
+};
 
 export const Default = {
     args: {
@@ -24,16 +31,16 @@ export const DirectorMenu = {
 
 }
 
-export const personProfileMenu = {
-    args: {
-        currentTab: 'Basic',
-        tabs: personProfiletabs('user')
-    }
-}
-
-export const personProfileAdmin = {
-    args: {
-        currentTab: 'Basic',
-        tabs: personProfiletabs('admin')
-    }
-}
+export const PersonProfileMenu = {
+    args: {
+        currentTab: 'Basic',
+        tabs: personProfileTabs('user')
+    }
+}
+
+export const PersonProfileAdmin = {
+    args: {
+        currentTab: 'Basic',
+        tabs: personProfileTabs('admin')
+    }
+}

package/src/stories/Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue

@@ -20,11 +20,11 @@
         </div>
       </TabBar>
     </section>
-    <section v-if="activeDropdown" class="bg-eventBoxBlue rounded w-full -mt-4 grid grid-cols-4 gap-4 pt-3 pb-1">
-      <div v-for="item in selectedDropdownItem" class="flex flex-col items-center justify-center mb-2 mr-2">
-        <BaseIcon size="md" :iconName="item.icon" :color="item.color" class="w-6 mb-1 text-center"/>
-        <BaseText size="xs" :color="item.color" :text="item.label" @click="handleButtonClick(item.id)" class="text-center"/>
-      </div>
+    <section v-if="activeDropdown" class="bg-eventBoxBlue rounded w-full -mt-4 grid grid-cols-4 gap-4 pt-3 pb-1">
+      <div v-for="item in selectedDropdownItems" :key="item.id" class="flex flex-col items-center justify-center mb-2 mr-2">
+        <BaseIcon size="md" :iconName="item.icon" :color="item.color" class="w-6 mb-1 text-center"/>
+        <BaseText size="xs" :color="item.color" :text="item.label" @click="handleButtonClick(item.id)" class="text-center"/>
+      </div>
     </section>
   </div>
 </template>
@@ -32,71 +32,68 @@
 
 <script>
 import TabBar from "../../../Molecules/Menus/TabBar/TabBar.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-
-export default {
-  components: {
-    DropDownMenu,
-    BaseIcon,
-    BaseText,
-    TabBar,
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+
+export default {
+  components: {
+    BaseIcon,
+    BaseText,
+    TabBar,
     BaseButton
   },
   emits: ['tabMenuClick'],
   props: {
-    currentTab: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    tabs: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      windowWidth: window.innerWidth,
-      activeDropdown: null,
-      selectedDropdownItem: []
-    };
-  },
-  computed: {
-    isMobile() {
-      return this.windowWidth <= 748;
-    },
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize);
-  },
+    currentTab: {
+      type: String,
+      default: ''
+    },
+    tabs: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      windowWidth: 1024,
+      activeDropdown: null,
+    };
+  },
+  computed: {
+    isMobile() {
+      return this.windowWidth <= 748;
+    },
+    selectedDropdownItems() {
+      return this.tabs.find((tab) => tab.id === this.activeDropdown)?.children || [];
+    },
+  },
+  mounted() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize);
   },
   methods: {
     handleButtonClick(buttonId) {
       const selectedTab = this.tabs.find((tab) => tab.id === buttonId);
-      if (selectedTab && selectedTab.children && this.isMobile) {
-        this.activeDropdown = this.activeDropdown === buttonId ? null : buttonId;
-        this.selectedDropdownItem = this.activeDropdown ? selectedTab.children : [];
-        return
-      }
-
-      this.activeDropdown = null;
-      this.selectedDropdownItem = [];
-
-      this.$emit('tabMenuClick', buttonId);
+      if (selectedTab && selectedTab.children && this.isMobile) {
+        this.activeDropdown = this.activeDropdown === buttonId ? null : buttonId;
+        return
+      }
+
+      this.activeDropdown = null;
+
+      this.$emit('tabMenuClick', buttonId);
     },
     getIconName(tab) {
       if (this.isMobile) return tab.icon;
       return '';
-    },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    }
-  }
-}
+    },
+    handleResize() {
+      this.windowWidth = window?.innerWidth || 1024;
+    }
+  }
+}
 </script>