@dcrackel/hematournamentui 1.0.60 → 1.0.62

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

@@ -0,0 +1,118 @@
+<template>
+  <section class="mx-4 p-4 border border-dropdownSelect rounded-2xl">
+
+    <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs"/>
+    <PoolSummary :event="event"/>
+
+    <div class="w-full flex flex-row justify-center mt-3">
+      <section class="w-full">
+        <div class="w-full flex flex-col justify-center items-center" style="text-align: center">
+          <div v-if="persons.length === 0">
+            <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon"/>
+            <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'0 events added yet.'"
+                      :weight="'normal'" data-testid="text-num-events"/>
+            <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'Click below to add first event.'"
+                      :weight="'normal'" data-testid="text-num-events"/>
+          </div>
+
+          <section class="flex justify-between w-full mb-3">
+            <BaseButton label="Add Fencer" size="sm" icon-name="fa-plus" icon-style="fa-solid" type="primary"/>
+            <DropDownMenu :label="label" :items="items" :selectedItem="localSelectedItem"
+                          @update:selectedItem="handleSelectedItem"/>
+          </section>
+
+
+          <section v-for="person in sortedPersons" class="w-full">
+            <FencerCard :person="person" class="mb-4" @update:status="handleStatus"/>
+          </section>
+        </div>
+
+      </section>
+    </div>
+  </section>
+</template>
+
+<script>
+import EditTournamentMenu from "../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import EventCard from "../../../Organisms/Cards/EventCard/EventCard.vue";
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import FencerCard from "../../../Organisms/Cards/FencerCard/FencerCard.vue";
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import PoolSummary from "../../../Organisms/Containers/PoolSummary/PoolSummary.vue";
+import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+
+export default {
+  components: {
+    DropDownMenu,
+    PoolSummary,
+    EditEventsTopMenu,
+    FencerCard,
+    EventCard,
+    EditTournamentMenu,
+    BaseText,
+    BaseButton,
+  },
+  props: {
+    eventId: Number,
+    persons: Array,
+    event: Object
+  },
+  data() {
+    return {
+      emptyDesertIcon,
+      tabs: [
+        {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
+        {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
+        {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},
+        {id: 'Bracket', label: 'Bracket', color: 'primaryHighlight'},
+        {id: 'Final', label: 'Final Results', color: 'primaryHighlight'}
+      ],
+      label: 'Sort by',
+      items: [
+        {text: 'Seed', link: 'Seed'},
+        {text: 'Name', link: 'FullName'},
+        {text: 'M2Rating', link: 'M2Rating'},
+        {text: 'HEMARating', link: 'HEMARating'}
+      ],
+      localSelectedItem: {text: 'Seed', link: 'Seed'}
+    };
+  },
+  computed: {
+    sortedPersons() {
+      const sortKey = this.localSelectedItem.link;
+      return this.persons.slice().sort((a, b) => {
+        switch (sortKey) {
+          case 'FullName':
+            const nameA = `${a.Person.FirstName} ${a.Person.LastName}`.toUpperCase();
+            const nameB = `${b.Person.FirstName} ${b.Person.LastName}`.toUpperCase();
+            return nameA.localeCompare(nameB);
+
+          case 'HEMARating':
+            const ratingA = a.Person.HEMARatings[0] ? a.Person.HEMARatings[0].Rating : 0;
+            const ratingB = b.Person.HEMARatings[0] ? b.Person.HEMARatings[0].Rating : 0;
+            return ratingB - ratingA; // Descending order
+
+          case 'M2Rating':
+            const m2RatingA = a.Person.M2Ratings[0] ? a.Person.M2Ratings[0].Rating : 'U00';
+            const m2RatingB = b.Person.M2Ratings[0] ? b.Person.M2Ratings[0].Rating : 'U00';
+            return m2RatingA.localeCompare(m2RatingB); // Descending order
+
+          default:
+            return (a[sortKey] || 0) - (b[sortKey] || 0);
+        }
+      });
+    }
+  },
+  methods: {
+    handleSelectedItem(selectedItem) {
+      this.localSelectedItem = selectedItem;
+    },
+    handleStatus(person) {
+      this.$emit('update:person', person);
+    }
+  }
+}
+</script>

package/src/stories/Templates/{TournamentManagement/EditTournament → EventManagement}/ListEvents/ListEvents.stories.js

@@ -1,8 +1,8 @@
 import EditEvents from './ListEvents.vue';
-import eventMockData from '../../../../../mocks/eventMock.js';
+import eventMockData from '../../../../mocks/eventMock.js';
 
 export default {
-    title: 'Templates/TournamentManagement/EditTournament/ListEvents',
+    title: 'Templates/EventManagement/EditTournament/ListEvents',
     component: EditEvents,
     tags: ['autodocs'],
     args: {

package/src/stories/Templates/{TournamentManagement/EditTournament → EventManagement}/ListEvents/ListEvents.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="mx-4">
-  <EditTournamentMenu currentTab="Events"></EditTournamentMenu>
+  <EditTournamentMenu currentTab="Events" :tabs="tabs" />
   <div class="w-full flex flex-row justify-center">
     <section class="w-full">
       <div class="w-full flex flex-col justify-center items-center mb-6" style="text-align: center">
@@ -28,11 +28,11 @@
 </template>
 
 <script>
-import EditTournamentMenu from "../../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import EventCard from "../../../../Organisms/Cards/EventCard/EventCard.vue";
-import emptyDesertIcon from '../../../../../assets/empty_desert_icon.png';
+import EditTournamentMenu from "../../Menus/EditTournamentMenu/EditTournamentMenu.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import EventCard from "../../../Organisms/Cards/EventCard/EventCard.vue";
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 
 export default {
   components: {
@@ -48,6 +48,14 @@ export default {
   data() {
     return {
       emptyDesertIcon,
+      currentTab: 'Events',
+      tabs: [
+        { id: 'Basic', label: 'Basic', color: 'primaryHighlight' },
+        { id: 'Details', label: 'Details', color: 'primaryHighlight' },
+        { id: 'Events', label: 'Events', color: 'primaryHighlight' },
+        { id: 'Payments', label: 'Payments', color: 'primaryHighlight' },
+        { id: 'Staff', label: 'Staff', color: 'primaryHighlight' }
+      ]
     };
   },
   methods: {

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

@@ -0,0 +1,20 @@
+import EditTournamentMenu from "./EditEventsTopMenu.vue";
+
+export default {
+    title: 'Templates/Menus/Events/EditEventsTopMenu',
+    component: EditTournamentMenu,
+    tags: ['autodocs'],
+    args: {},
+    argTypes: {}
+};
+
+export const Default = {
+    args: {
+        currentTab: 'Checkin',
+        tabs: [
+            { id: 'Staff', label: 'Staff', color: 'primaryHighlight' },
+            { id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight' }
+        ]
+    }
+
+}

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

@@ -0,0 +1,51 @@
+<template>
+  <section class="flex">
+<!--    <div class="mr-4">-->
+<!--      <BaseButton label="Return" size="xs" type="primary" @click="addTournament" />-->
+<!--      <BaseText text="Open Mixed Saber" size="lg" color="Primary" weight="bold" class="ml-4 pt-1" />-->
+<!--    </div>-->
+    <TabBar class="border-b border-dropdownSelect mb-5">
+      <BaseButton
+          v-for="tab in tabs"
+          :key="tab.id"
+          :selected="currentTab === tab.id"
+          class="flex flex-row mx-3"
+          :color="tab.color"
+          :label="tab.label"
+          type="tabBar"
+          @click="handleButtonClick(tab.id)"
+      ></BaseButton>
+    </TabBar>
+  </section>
+</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";
+
+export default {
+  components: {
+    BaseText,
+    TabBar,
+    BaseButton
+  },
+  props: {
+    currentTab: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    tabs: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  methods: {
+    handleButtonClick(buttonId) {
+      this.$emit('button-click', buttonId);
+    }
+  }
+}
+</script>

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

@@ -3,9 +3,21 @@ import EditTournamentMenu from "./EditTournamentMenu.vue";
 export default {
     title: 'Templates/Menus/EditTournamentMenu/EditTournamentMenu',
     component: EditTournamentMenu,
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    args: {},
+    argTypes: {}
 };
 
 export const Default = {
-    args: {}
+    args: {
+        currentTab: 'Events',
+        tabs: [
+            { id: 'Basic', label: 'Basic', color: 'primaryHighlight' },
+            { id: 'Details', label: 'Details', color: 'primaryHighlight' },
+            { id: 'Events', label: 'Events', color: 'primaryHighlight' },
+            { id: 'Payments', label: 'Payments', color: 'primaryHighlight' },
+            { id: 'Staff', label: 'Staff', color: 'primaryHighlight' }
+        ]
+    }
+
 }

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

@@ -1,44 +1,14 @@
 <template>
   <TabBar class="border-b border-dropdownSelect mb-5">
     <BaseButton
-        :selected="currentTab === 'Basic'"
+        v-for="tab in tabs"
+        :key="tab.id"
+        :selected="currentTab === tab.id"
         class="flex flex-row mx-3"
-        color="primaryHighlight"
-        label="Basic"
+        :color="tab.color"
+        :label="tab.label"
         type="tabBar"
-        @click="handleButtonClick('Basic')"
-    ></BaseButton>
-    <BaseButton
-        :selected="currentTab === 'Details'"
-        class="flex flex-row mx-3"
-        color="primaryHighlight"
-        label="Details"
-        type="tabBar"
-        @click="handleButtonClick('Details')"
-    ></BaseButton>
-    <BaseButton
-        :selected="currentTab === 'Events'"
-        class="flex flex-row mx-3"
-        color="primaryHighlight"
-        label="Events"
-        type="tabBar"
-        @click="handleButtonClick('Events')"
-    ></BaseButton>
-    <BaseButton
-        :selected="currentTab === 'Payments'"
-        class="flex flex-row mx-3"
-        color="primaryHighlight"
-        label="Payments"
-        type="tabBar"
-        @click="handleButtonClick('Payments')"
-    ></BaseButton>
-    <BaseButton
-        :selected="currentTab === 'Staff'"
-        class="flex flex-row mx-3"
-        color="primaryHighlight"
-        label="Staff"
-        type="tabBar"
-        @click="handleButtonClick('Staff')"
+        @click="handleButtonClick(tab.id)"
     ></BaseButton>
   </TabBar>
 </template>
@@ -57,12 +27,17 @@ export default {
       type: String,
       required: true,
       default: ''
+    },
+    tabs: {
+      type: Array,
+      required: true,
+      default: () => []
     }
   },
   methods: {
-    handleButtonClick(button) {
-      this.$emit('button-click', button);
+    handleButtonClick(buttonId) {
+      this.$emit('button-click', buttonId);
     }
   }
 }
-</script>
+</script>

package/src/stories/Templates/TournamentManagement/EditTournament/EditPageOne/EditTournamentPageOne.vue

@@ -1,5 +1,5 @@
 <template>
-  <EditTournamentMenu currentTab="Basic"></EditTournamentMenu>
+  <EditTournamentMenu currentTab="Basic" :tabs="tabs" />
   <div class="w-full flex flex-row justify-center">
     <section class="w-96">
       <BaseText :color="'quaternary'" :size="'xs'" :text="'GENERAL INFORMATION'" class="border-b mb-5"/>
@@ -87,7 +87,14 @@ export default {
         totalDays: false,
         description: false,
         visibility: false
-      }
+      },
+      tabs: [
+        { id: 'Basic', label: 'Basic', color: 'primaryHighlight' },
+        { id: 'Details', label: 'Details', color: 'primaryHighlight' },
+        { id: 'Events', label: 'Events', color: 'primaryHighlight' },
+        { id: 'Payments', label: 'Payments', color: 'primaryHighlight' },
+        { id: 'Staff', label: 'Staff', color: 'primaryHighlight' }
+      ]
     }
   },
   methods: {

package/src/stories/Templates/TournamentManagement/EditTournament/EditPageTwo/EditTournamentPageTwo.vue

@@ -1,5 +1,5 @@
 <template>
-  <EditTournamentMenu currentTab="Details"></EditTournamentMenu>
+  <EditTournamentMenu currentTab="Details" :tabs="tabs" />
   <div class="w-full flex flex-row justify-center">
     <section class="w-96">
       <BaseText :color="'quaternary'" :size="'xs'" :text="'DETAIL INFORMATION'" class="border-b mb-5"/>
@@ -97,6 +97,13 @@ export default {
         {label: 'Club', value: 'club', description: 'Viewable Only to Members of Your Club'},
         {label: 'Private', value: 'private', description: 'Only Viewable by you'},
       ],
+      tabs: [
+        { id: 'Basic', label: 'Basic', color: 'primaryHighlight' },
+        { id: 'Details', label: 'Details', color: 'primaryHighlight' },
+        { id: 'Events', label: 'Events', color: 'primaryHighlight' },
+        { id: 'Payments', label: 'Payments', color: 'primaryHighlight' },
+        { id: 'Staff', label: 'Staff', color: 'primaryHighlight' }
+      ]
     }
   },
   methods: {

package/tailwind.config.js

@@ -1,5 +1,5 @@
-/** @type {import('tailwindcss').Config} */
-export default {
+// tailwind.config.js
+module.exports = {
     content: [
         "./index.html",
         "./src/**/*.{vue,js,ts,jsx,tsx}",
@@ -36,8 +36,9 @@ export default {
                 secondary: '#2B324B',
                 tertiary: '#F6FAFD',
                 eventBoxBlue: '#eff4f7',
-                eventBoxGreen: '#f2f7ef',
+                eventBoxGreen: '#f3f7ef',
                 eventBoxRed: '#f7efef',
+                poolSetup: '#F6FAFD',
             },
             boxShadow: {
                 custom: 'var(--tw-shadow)',
@@ -45,11 +46,11 @@ export default {
         },
     },
     plugins: [
-        function ({addBase, theme}) {
+        function ({ addBase, theme }) {
             addBase({
                 h1: {
                     fontSize: theme('fontSize.3xl'),
-                    lineHeight: theme('lineHeight.leading-h1'),
+                    lineHeight: theme('lineHeight.h1'),
                 },
                 h2: {
                     fontSize: theme('fontSize.2xl'),
@@ -62,4 +63,4 @@ export default {
             });
         },
     ],
-}
+};

package/src/stories/Molecules/Cards/AdminFencerCard/AdminFencerCard.js

@@ -1,29 +0,0 @@
-import PlayerCard from './AdminFencerCard.vue';
-
-export default {
-    title: 'Molecules/Cards/PlayerCard',
-    component: PlayerCard,
-    argTypes: {
-        name: { control: 'text' },
-        points: { control: 'number' }
-    },
-};
-
-const Template = (args) => ({
-    components: { PlayerCard },
-    setup() {
-        return { args };
-    },
-    template: '<PlayerCard v-bind="args" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-        position: 1,
-        profileUrl: 'https://via.placeholder.com/150',
-        playerName: 'John Doe',
-        clubName:  'Super Duper Fencing club of really long name',
-        USAHemaRating: '1200',
-        HEMARating: 'A'
-};
-

package/src/stories/Molecules/Cards/AdminFencerCard/AdminFencerCard.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="w-full flex flex-row justify-between  border border-1 border-dropdownSelect h-20 rounded-xl">
-    <span class="w-3/4 flex flex-row">
-      <div class="flex flex-col justify-center px-2 mr-4 items-center border-r-2 border-dropdownSelect">
-        <BaseText :text="position" color="primary" size="md" weight="semi-bold" />
-      </div>
-      <div class="flex flex-col justify-center flex-shrink-0 mr-4">
-        <img :src="profileUrl" alt="player" class="w-14 h-14 rounded-xl" />
-      </div>
-      <div class="flex flex-col justify-center flex-shrink-0 mr-4 w-80">
-        <BaseText :text="playerName" color="dropdownSelect" size="md" weight="semi-bold" />
-        <BaseText :text="clubName" color="dropdownSelect" size="xs" weight="semi-bold" />
-      </div>
-      <div class="flex flex-col justify-center flex-shrink-0 mr-4">
-      <BaseText :text="'USA Hema: ' + USAHemaRating" color="primary" size="sm" weight="semi-bold" />
-      <BaseText :text="'HemaRating: ' + HEMARating" color="primary" size="sm" weight="semi-bold" />
-      </div>
-    </span>
-
-    <div class="flex flex-col justify-center mr-4" >
-      <ButtonBar
-          :buttons="{0:{id:'Absent',label:'Absent'},1:{id:'Present',label:'Present'}}"
-          v-on:selected="()=>({})"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import ButtonBar from "../../Buttons/ButtonBar/ButtonBar.vue";
-
-export default {
-  name: 'AdminFencerCard',
-  components: {
-    ButtonBar,
-    BaseText
-  },
-  props: {
-    position: {
-      type: Number,
-      required: true,
-    },
-    profileUrl: {
-      type: String,
-      required: true,
-    },
-    playerName: {
-      type: String,
-      required: true,
-    },
-    clubName: {
-      type: String,
-      required: true,
-    },
-    USAHemaRating: {
-      type: String,
-      required: true,
-    },
-    HEMARating: {
-      type: String,
-      required: true,
-    },
-  },
-}
-</script>

package/src/stories/Organisms/Containers/Container.stories.js

@@ -1,13 +0,0 @@
-import Container from "./Container.vue";
-
-export default {
-    title: 'Organisms/Containers/Container',
-    component: Container,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {}
-};
-
-export const Default = {
-    args: {}
-};

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

@@ -1,6 +0,0 @@
-<template>
-  <div class="flex flex-row justify-center">
-  </div>
-</template>
-
-<script></script>