@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,32 +1,32 @@
 import AdminLeftMenu from './AdminLeftMenu.vue';
 
-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' },
-            { label: 'Clubs', iconName: 'fa-users'  },
-            { label: 'People', iconName: 'fa-user-group'  }
-        ]
-    }
+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' },
+      { label: 'Clubs', iconName: 'fa-users' },
+      { label: 'People', iconName: 'fa-user-group' }
+    ]
+  }
 };

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

@@ -9,49 +9,53 @@
       </div>
     </section>
 
-     <section class="flex flex-col p-2 h-full w-full px-4">
-      <BaseButton
-          v-for="button in buttons"
-          :key="button.label"
-          :label="button.label"
-          :iconName="button.iconName"
-          type="adminSecondary"
-          size="sm"
-          @buttonClick="handleButtonClick(button)"
+    <section class="flex flex-col p-2 h-full w-full px-4">
+      <BaseButton
+        v-for="button in buttons"
+        :key="button.label"
+        :label="button.label"
+        :iconName="button.iconName"
+        type="adminSecondary"
+        size="sm"
+        @buttonClick="handleButtonClick(button)"
       />
     </section>
 
     <section class="flex flex-col justify-end flex-grow">
-      <div class="border-t border-neutral p-4 ">
-        <BaseButton
-            iconName="fa-user"
-            label="Account"
-            type="adminSecondary"
-            size="sm"
-            @buttonClick="handleAccount()"
-        />
+      <div class="border-t border-neutral p-4">
+        <BaseButton iconName="fa-user" label="Account" type="adminSecondary" size="sm" @buttonClick="handleAccount()" />
         <BaseButton
-            iconName="fa-right-to-bracket"
-            label="Log Out"
-            type="adminSecondary"
-            size="sm"
-            @buttonClick="handleLogOut()"
+          iconName="fa-right-to-bracket"
+          label="Log Out"
+          type="adminSecondary"
+          size="sm"
+          @buttonClick="handleLogOut()"
         />
       </div>
     </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 cursor-pointer" :src="logoImage" @click="handleButtonClick(homeButton)"  />
+  <!-- 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>
+  <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>
@@ -60,55 +64,55 @@
 </template>
 
 <script>
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 import logoImage from '../../../../assets/m2-whitelogo.png';
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'AdminLeftMenu',
-  components: {BaseText, BaseIcon, BaseButton },
+  components: { BaseText, BaseIcon, BaseButton },
   props: {
     buttons: {
       type: Array,
       default: () => []
     }
   },
-  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: {
+  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;
 
-      if(button.label === 'Log Out') {
+      if (button.label === 'Log Out') {
         this.handleLogOut();
         return;
       }
 
-      if(button.label === 'Account') {
+      if (button.label === 'Account') {
         this.handleAccount();
         return;
       }
@@ -118,13 +122,13 @@ export default {
     handleAccount() {
       this.$emit('button:Account');
     },
-    handleLogOut() {
-      this.$emit('button:Logout');
-    },
-    openDropDownMenu(event) {
-      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,46 +1,45 @@
-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' },
-    }
-};
+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: {
-        currentTab: 'Checkin',
-        tabs: tabs('admin')
-    }
-}
+  args: {
+    currentTab: 'Checkin',
+    tabs: tabs('admin')
+  }
+};
 
 export const DirectorMenu = {
-    args: {
-        currentTab: 'Checkin',
-        tabs: tabs('Director')
-    }
+  args: {
+    currentTab: 'Checkin',
+    tabs: tabs('Director')
+  }
+};
 
-}
+export const PersonProfileMenu = {
+  args: {
+    currentTab: 'Basic',
+    tabs: personProfileTabs('user')
+  }
+};
 
-export const PersonProfileMenu = {
-    args: {
-        currentTab: 'Basic',
-        tabs: personProfileTabs('user')
-    }
-}
-
-export const PersonProfileAdmin = {
-    args: {
-        currentTab: 'Basic',
-        tabs: personProfileTabs('admin')
-    }
-}
+export const PersonProfileAdmin = {
+  args: {
+    currentTab: 'Basic',
+    tabs: personProfileTabs('admin')
+  }
+};

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

@@ -2,98 +2,106 @@
   <div>
     <section class="flex">
       <TabBar class="border-b border-dropdownSelect mb-5 overflow-auto w-full flex flex-wrap">
-        <div
-            class="w-full flex md:flex-nowrap flex-wrap justify-between md:justify-start">
+        <div class="w-full flex md:flex-nowrap flex-wrap justify-between md:justify-start">
           <BaseButton
-              v-for="tab in tabs"
-              :key="tab.id"
-              :selected="currentTab === tab.id"
-              class="mx-2.5 md:mx-3 text-xs md:text-sm"
-              size="sm"
-              :dropDown="!!tab.children"
-              :iconName="getIconName(tab)"
-              :color="tab.color"
-              :label="tab.label"
-              type="tabBar"
-              @buttonClick="handleButtonClick(tab.id)"
+            v-for="tab in tabs"
+            :key="tab.id"
+            :selected="currentTab === tab.id"
+            class="mx-2.5 md:mx-3 text-xs md:text-sm"
+            size="sm"
+            :dropDown="!!tab.children"
+            :iconName="getIconName(tab)"
+            :color="tab.color"
+            :label="tab.label"
+            type="tabBar"
+            @buttonClick="handleButtonClick(tab.id)"
           />
         </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 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 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>
 
-
 <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";
-
-export default {
-  components: {
-    BaseIcon,
-    BaseText,
-    TabBar,
+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';
+
+export default {
+  components: {
+    BaseIcon,
+    BaseText,
+    TabBar,
     BaseButton
   },
   emits: ['tabMenuClick'],
   props: {
-    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);
-  },
+    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;
-        return
-      }
-
-      this.activeDropdown = null;
-
-      this.$emit('tabMenuClick', buttonId);
+      const selectedTab = this.tabs.find(tab => tab.id === 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 || 1024;
-    }
-  }
-}
+    },
+    handleResize() {
+      this.windowWidth = window?.innerWidth || 1024;
+    }
+  }
+};
 </script>

package/src/stories/Templates/PersonManagement/Admin/Administration/Administration.stories.js

@@ -1,67 +1,67 @@
 import Administration from './Administration.vue';
-import personsMock from "../../../../../mocks/personsMock.js";
+import personsMock from '../../../../../mocks/personsMock.js';
 
 export default {
-    title: 'Templates/PersonManagement/Admin/Administration',
-    component: Administration,
-    tags: ['autodocs'],
-    args: {
-        person: personsMock[1],
-        userLevel: 'Club'
+  title: 'Templates/PersonManagement/Admin/Administration',
+  component: Administration,
+  tags: ['autodocs'],
+  args: {
+    person: personsMock[1],
+    userLevel: 'Club'
+  },
+  argTypes: {
+    person: { control: { type: 'object' } },
+    userLevel: {
+      control: { type: 'select' },
+      options: ['User', 'Director', 'Club', 'Admin']
     },
-    argTypes: {
-        person: { control: { type: 'object' } },
-        userLevel: {
-            control: { type: 'select' },
-            options: ['User', 'Director', 'Club', 'Admin']
-        },
-        'update:person': { action: 'update:person' }
-    }
+    'update:person': { action: 'update:person' }
+  }
 };
 
 export const Default = {
-    args: {
-        person: personsMock[1],
-        userLevel: 'Club'
-    }
+  args: {
+    person: personsMock[1],
+    userLevel: 'Club'
+  }
 };
 
 export const AdminCanSelectAdminAccess = {
-    args: {
-        person: {
-            ...personsMock[1],
-            AccessLevel: 'Admin'
-        },
-        userLevel: 'Admin'
-    }
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: 'Admin'
+    },
+    userLevel: 'Admin'
+  }
 };
 
 export const AdminEditingUserAccess = {
-    args: {
-        person: {
-            ...personsMock[1],
-            AccessLevel: 'User'
-        },
-        userLevel: 'Admin'
-    }
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: 'User'
+    },
+    userLevel: 'Admin'
+  }
 };
 
 export const WithoutHemaRating = {
-    args: {
-        person: {
-            ...personsMock[1],
-            HemaRatingsId: ''
-        },
-        userLevel: 'Club'
-    }
+  args: {
+    person: {
+      ...personsMock[1],
+      HemaRatingsId: ''
+    },
+    userLevel: 'Club'
+  }
 };
 
 export const EmptyAccessLevel = {
-    args: {
-        person: {
-            ...personsMock[1],
-            AccessLevel: ''
-        },
-        userLevel: 'Club'
-    }
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: ''
+    },
+    userLevel: 'Club'
+  }
 };