@dcrackel/hematournamentui 1.0.124 → 1.0.126

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

@@ -0,0 +1,95 @@
+<!-- TableauFencerCard.vue -->
+<template>
+<section class="bg-poolSetup flex shadow-lg rounded-md border" @mouseover="handleHighLight(true)" @mouseout="handleHighLight(false)" :class="[width, highLighted]">
+    <!-- Left position -->
+    <div class="text-center px-1 w-5 flex items-center justify-center rounded-l-md z-50" :class="`bg-${color}`">
+      <BaseText :text="position" size="xs" color="neutral"/>
+    </div>
+
+  <div class="flex w-full items-center">
+    <!-- Portrait and Name/Club -->
+    <div class="flex w-full">
+      <div v-if="large" class="">
+        <div v-if="!portraitURL" class="w-9 h-9 rounded-r-md bg-dropdownSelect flex items-center justify-center">
+          <BaseText text="" size="sm" color="neutral" weight="bold"/>
+        </div>
+        <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-r-md">
+      </div>
+      <div class="flex flex-col justify-center ml-2">
+        <BaseText :text="name" :size="large ? 'sm' : 'xs'" :weight="large ? 'bold' : 'normal'"/>
+        <BaseText v-if="club.length > 1 && large" :text="club" size="xs"/>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right position (Score) -->
+  <div class="text-center px-1 w-5 flex items-center justify-center rounded-r-md" :class="scoreColor">
+    <BaseText :text="score" size="xs" color="neutral"/>
+  </div>
+</section>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'TableauFencerCard',
+  components: { BaseText },
+  props: {
+    fencer: {
+      type: Object,
+      required: true
+    },
+    score: {
+      type: String,
+      required: true
+    },
+    position: {
+      type: [String, Number],
+      required: true
+    },
+    color: {
+      type: String,
+      required: true
+    },
+    scoreColor: {
+      type: String,
+      required: true
+    },
+    large: {
+      type: Boolean,
+      default: true
+    },
+    highLight: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    portraitURL() {
+      const images = this.fencer.Images || [];
+      const portrait = images.find(image => image.URL);
+      return portrait ? portrait.URL : '';
+    },
+    name() {
+      //if (this.fencer.DisplayName === "BYE") return "";
+      return this.fencer.DisplayName;
+    },
+    club() {
+      if (this.fencer.DisplayName === "BYE" || this.fencer.DisplayName === "") return "";
+      return this.fencer.Club.Name;
+    },
+    width() {
+      return this.large ? ' w-72' : ' w-40';
+    },
+    highLighted() {
+      return this.highLight ? 'border-bright' : 'border-poolSetup';
+    }
+  },
+  methods: {
+    handleHighLight(value) {
+      this.$emit('action:highLight', value)
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/PoolResults/PoolResultsTable.stories.js

@@ -49,6 +49,16 @@ export const PromoteHalf = {
     }
 }
 
+modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "de"}
+export const NotResultsStatus = {
+    args: {
+        poolResults: getPoolResults.report,
+        initialCutoffIndex: 0,
+        numPromoted: "100%",
+        event: modifiedEvent
+    }
+}
+
 modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "preparation"}
 export const EventIsInPreparationMode = {
     args: {

package/src/stories/Organisms/Containers/PoolResults/PoolResultsTable.vue

@@ -13,7 +13,7 @@
 
       <div v-if="shouldShowResults" v-for="(person, index) in results" :key="person.personId" class="flex flex-col py-1">
         <!-- Person Card -->
-        <FencerPoolResultsCard :person="person" @remove:person="handleWithdraw" />
+        <FencerPoolResultsCard :person="person" @remove:person="handleWithdraw" :status="event.Status"/>
 
         <!-- Draggable Line -->
         <div v-if="shouldShowBar(index)" class="relative flex justify-center p-0.5 mt-4 mb-2 border border-dropdownSelect rounded-lg">
@@ -75,7 +75,7 @@ export default {
   },
   computed: {
     shouldShowResults() {
-      return ['results', 'de', 'completed'].includes(this.event.Status.toLowerCase());
+      return this.event.Status && ["results", "de", "completed"].includes(this.event.Status.toLowerCase());
     }
   },
   methods: {
@@ -102,7 +102,7 @@ export default {
       this.$emit('update:withdraw', person);
     },
     shouldShowBar(index) {
-      return index === this.cutoffIndex && this.cutoffIndex > 0 && this.cutoffIndex < this.results.length - 1;
+      return index === this.cutoffIndex && this.cutoffIndex > 0 && this.cutoffIndex < this.results.length - 1 && this.event.Status === 'results';
     }
   }
 }

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

@@ -0,0 +1,34 @@
+import Tableau from './Tableau.vue';
+import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
+
+export default {
+    title: 'Organisms/Containers/Tableau',
+    component: Tableau,
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts,
+        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+        hostingClubColors: getDEWithBouts.hostingClubColors
+    },
+    argTypes: {
+        bouts: {
+            control: 'array',
+            description: 'Array of bracket objects to display',
+        },
+        bracketSize: {
+            control: 'string',
+            description: 'sets spacing for bracket connector lines',
+        },
+        hostingClubColors: {
+            control: 'object'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts,
+        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+    }
+};
+

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

@@ -0,0 +1,68 @@
+<template>
+  <section class="w-full overflow-x-auto mt-4">
+    <div class="min-w-full flex justify-center">
+    <div v-for="(bouts, roundName) in groupedBouts" :key="roundName">
+      <TableauColumn :bouts="bouts"
+                     :hostingClubColors="hostingClubColors"
+                     :roundName="roundName"
+                     :bracketSize="bracketSize"
+                     :largeCards="largeCards"
+                     @action:editBout="handleEditBout"
+                     @action:directingBout="handleDirectorBout"
+      />
+    </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import TableauColumn from "../TableauColumn/TableauColumn.vue";
+import TableauBoutCard from "../../Cards/TableauBoutCard/TableauBoutCard.vue";
+
+export default {
+  name: 'Tableau',
+  components: {TableauBoutCard, TableauColumn },
+  props: {
+    bouts: {
+      type: Array,
+      required: true
+    },
+    bracketSize: {
+      type: String,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    largeCards: {
+      type: Boolean,
+      required: true
+    }
+  },
+  computed: {
+    groupedBouts() {
+      return this.groupBoutsByRound(this.bouts);
+    },
+  },
+  methods: {
+    handleEditBout(bout) {
+      console.log('Tableau:handleEditBout', bout)
+      this.$emit('action:directingBout', bout)
+    },
+    handleDirectorBout(bout) {
+      console.log('Tableau:handleDirectorBout', bout)
+      this.$emit('action:editBout', bout)
+    },
+    groupBoutsByRound(bouts) {
+      return bouts.reduce((acc, bout) => {
+        if (!acc[bout.RoundLabel]) {
+          acc[bout.RoundLabel] = [];
+        }
+        acc[bout.RoundLabel].push(bout);
+        return acc;
+      }, {});
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/TableauColumn/TabeauColumn.stories.js

@@ -0,0 +1,37 @@
+import TableauColumn from './TableauColumn.vue';
+import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
+
+export default {
+    title: 'Organisms/Containers/TableauColumn',
+    component: TableauColumn,
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts.filter(bout => bout.RoundLabel === 'Table of 8'),
+        roundName: 'Table of 8',
+        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+        hostingClubColors: getDEWithBouts.hostingClubColors
+    },
+    argTypes: {
+        bouts: {
+            control: 'array',
+            description: 'Array of bracket objects to display',
+            bracketSize: 'Table of 8',
+        },
+        bracketSize: {
+            control: 'text',
+            description: 'Sets spacing for connector lines',
+        },
+        hostingClubColors: {
+            control: 'object'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts.filter(bout => bout.RoundLabel === 'Table of 8'),
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+        roundName: 'Table of 8'
+    }
+};
+

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

@@ -0,0 +1,68 @@
+<template>
+  <section>
+    <div v-if="roundName !== 'Third Place' && roundName !== 'Final'" class="flex justify-center mb-4 border-b" :class="largeCards ? 'w-72' : 'w-40' ">
+      <BaseText :text="roundName" size="sm" color="quaternary" />
+    </div>
+    <div v-for="(bout, index) in bouts" :key="index" class="flex">
+      <TableauBoutCard :bout="bout"
+                       :hostingClubColors="hostingClubColors"
+                       :roundName="roundName"
+                       :large="largeCards"
+                       :bracketSize="bracketSize"
+                       @action:editBout="handleEditBout"
+                       @action:directingBout="handleDirectorBout"
+                      />
+      <TableauLines :roundName="roundName" :large="largeCards"  :bracketSize="bracketSize"/>
+    </div>
+  </section>
+</template>
+
+<script>
+import TableauBoutCard from "../../Cards/TableauBoutCard/TableauBoutCard.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import TableauLines from "../TableauLines/TableauLines.vue";
+
+export default {
+  name: 'TableauColumn',
+  components: { TableauLines, BaseText, TableauBoutCard },
+  props: {
+    bouts: {
+      type: Array,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    roundName: {
+      type: String,
+      required: true
+    },
+    bracketSize: {
+      type: String,
+      required: true
+    },
+    largeCards: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      finalLineShown: true
+    };
+  },
+  computed: {
+  },
+  methods: {
+    handleEditBout(bout) {
+      console.log('TableauColumn:handleEditBout', bout)
+      this.$emit('action:directingBout', bout)
+    },
+    handleDirectorBout(bout) {
+      console.log('TableauColumn:handleDirectorBout', bout)
+      this.$emit('action:editBout', bout)
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/TableauLines/SpacingConfig.js

@@ -0,0 +1,29 @@
+// spacingConfig.js
+export const spacingConfig = {
+    'Table of 8': {
+        'large': {
+            'Table of 8': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+            Quarterfinal: { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[6.5rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+            Semifinal: { getTopSpace: 'mt-[5.5rem]', getConnectorHeight: 'h-[14.5rem]', getTopSpaceForLine: '' },
+            Final: { getTopSpace: 'h-[6rem] mt-[22rem] -ml-[309px]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
+            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
+        },
+        'small': {
+            'Table of 8': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
+            Quarterfinal: { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
+            Semifinal: { getTopSpace: 'mt-[2.8rem]', getConnectorHeight: 'h-[7.2rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
+            Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
+            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
+        }
+    },
+
+    TableOf16: {
+        large: {
+            // Define your spacing values here
+        },
+        small: {
+            // Define your spacing values here
+        }
+    },
+    // Add up to Table of 256 as needed
+};

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

@@ -0,0 +1,23 @@
+import TableauLines from './TableauLines.vue';
+
+export default {
+    title: 'Organisms/Containers/TableauLines',
+    component: TableauLines,
+    args: {
+        roundName: 'Table of 8',
+    },
+    argTypes: {
+        roundName: {
+            control: 'string',
+            description: 'Name of the round to display'
+
+        }
+    }
+};
+
+export const Default = {
+    args: {
+       roundName: 'Table of 8',
+    }
+};
+

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

@@ -0,0 +1,80 @@
+<template>
+  <section v-if="roundName !== 'Semifinal' && roundName !== 'Final'" class="flex" :class="getTopSpace">
+    <div class="mt-[1.1rem]">
+      <div class="border-t border-b border-r w-5 rounded-md -ml-[0.3rem] z-0" :class="getConnectorHeight"></div>
+    </div>
+    <div :class="getTopSpaceForLine">
+      <div class="border-b w-5 h-5"></div>
+    </div>
+  </section>
+
+  <section v-if="roundName === 'Semifinal'" class="flex mr-5"  >
+    <div class="flex flex-col -ml-1" :class="getTopSpace">
+      <div class="border-t border-b border-r w-5 rounded-md z-0" :class="getConnectorHeight"></div>
+    </div>
+  </section>
+
+  <section v-if="roundName === 'Final'" class="flex flex-col mr-5"  >
+      <div class="border-b border-l w-6 rounded-bl-md z-0 h-[6rem]" :class="getTopSpace" ></div>
+      <div class="border-t border-l w-6 rounded-tl-md z-0 h-[6rem]" :class="getBottomLine" ></div>
+  </section>
+
+</template>
+
+<script>
+import { spacingConfig } from './SpacingConfig';
+
+export default {
+  name: 'TableauLines',
+  props: {
+    roundName: {
+      type: String,
+      required: true
+    },
+    bracketSize: {
+      type: String,
+      required: true
+    },
+    large: {
+      type: Boolean,
+      default: true
+    },
+  },
+  watch: {
+    large(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.updateConfig();
+      }
+    }
+  },
+  data() {
+    return {
+      currentConfig: {}
+    };
+  },
+  mounted() {
+    this.updateConfig();
+  },
+  computed: {
+    getTopSpace() {
+      return this.currentConfig?.getTopSpace || '';
+    },
+    getTopSpaceForLine() {
+      return this.currentConfig?.getTopSpaceForLine || '';
+    },
+    getConnectorHeight() {
+      return this.currentConfig?.getConnectorHeight || '';
+    },
+    getBottomLine() {
+      return this.currentConfig?.getBottomLine || '';
+    }
+  },
+  methods: {
+    updateConfig() {
+      console.log('updateConfig', this.large, this.roundName, this.bracketSize);
+      const size = this.large ? 'large' : 'small';
+      this.currentConfig = spacingConfig[this.bracketSize]?.[size]?.[this.roundName] || {};
+    }
+  },
+};
+</script>

package/src/stories/Organisms/Headers/PoolResultsHeader/PoolResultsHeader.stories.js

@@ -16,23 +16,18 @@ export default {
     }
 };
 
+let modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "results"}
 export const Default = {
     args: {
-        event:eventPersonGetPoolAssignmentEvent,
+        event:modifiedEvent,
         numPromoted: getPoolResults.numPromoted
     }
 }
 
-export const preparingMode = {
+modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "de"}
+export const notInResultsMode = {
     args: {
-        event:eventPersonGetPoolAssignmentEvent,
-        numPromoted: getPoolResults.numPromoted
+        event:modifiedEvent,
+        numPromoted: getPoolResults.numPromoted,
     }
 }
-
-export const liveMode = {
-    args: {
-        event:eventPersonGetPoolAssignmentEvent,
-        numPromoted: getPoolResults.numPromoted
-    }
-}

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

@@ -38,7 +38,7 @@
     </section>
 
     <section class="flex flex-row w-1/3 justify-end">
-      <CounterBox :recommended="101" :count="promoted" label="Promoted" :textColor="'quaternary'" :centerInput="true" :directInput="true"
+      <CounterBox :recommended="101" :count="promoted" label="Promoted" :textColor="'quaternary'" :centerInput="true" :directInput="true" :disable="mode !== 'results'"
                   @update:increaseCount="handleIncreaseCount"
                   @update:decreaseCount="handleDecreaseCount"
       />
@@ -77,10 +77,14 @@ export default {
   },
   methods: {
     handleIncreaseCount(numPromoted) {
-      this.$emit('update:handleIncreaseCount', numPromoted);
+      if (this.event.Status === 'results') {
+        this.$emit('update:handleIncreaseCount', numPromoted);
+      }
     },
     handleDecreaseCount(numPromoted) {
-      this.$emit('update:handleDecreaseCount', numPromoted);
+      if (this.event.Status === 'results') {
+        this.$emit('update:handleDecreaseCount', numPromoted);
+      }
     }
   },
 };

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

@@ -1,4 +1,5 @@
 <template>
+  <section class="flex flex-col">
   <div class="bg-bannerBackground px-4 py-4 rounded-xl flex justify-center border border-dropdownSelect">
     <section class="flex flex-row w-3/4 justify-center bg-poolBox rounded-lg p-0.5 border border-dropdownSelect">
       <BaseButton
@@ -19,14 +20,21 @@
       />
     </section>
   </div>
+  <div class="flex w-full justify-between">
+    <ServerConnected :connectedToServer="connectedToServer" />
+    <Toggle v-if="showToggle" :checked="largeCards" label="Bracket Size" @update:checked="handleCardSizeToggle" />
+  </div>
+  </section>
 </template>
 
 <script>
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
+import Toggle from "../../../Molecules/Inputs/Toggle/Toggle.vue";
 
 export default {
   name: 'ToggleHeader',
-  components: { BaseButton },
+  components: {Toggle, ServerConnected, BaseButton },
   props: {
     firstButtonLabel: {
       type: String,
@@ -39,14 +47,25 @@ export default {
     currentSelection: {
       type: String,
       required: true,
-      // validator(value) {
-      //   return [this.firstButtonLabel, this.secondButtonLabel].includes(value);
-      // }
+    },
+    connectedToServer: {
+      type: Boolean,
+      required: true
+    },
+    showToggle: {
+      type: Boolean,
+      default: false
+    },
+    showLargeCards: {
+      type: Boolean,
+      default: true
     }
+
   },
   data() {
     return {
-      view: this.currentSelection
+      view: this.currentSelection,
+      largeCards: this.showLargeCards
     };
   },
   watch: {
@@ -58,6 +77,10 @@ export default {
     handleSelection(selection) {
       this.view = selection;
       this.$emit('update:selection', selection);
+    },
+    handleCardSizeToggle(value) {
+      this.largeCards = !this.largeCards;
+      this.$emit('update:cardSize', value)
     }
   }
 };

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

@@ -0,0 +1,39 @@
+import Bracket from './Bracket.vue';
+import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
+
+export default {
+    title: 'Templates/EventManagement/Bracket',
+    component: Bracket,
+    tags: ['Bracket'],
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts,
+        eventRules: getDEWithBouts.eventRules,
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        connectedToServer: true
+    },
+    argTypes: {
+        bouts: {
+            control: Object
+        },
+        eventRules: {
+            control: Object
+        },
+        hostingClubColors: {
+            control: Object
+        },
+        connectedToServer: {
+            control: Boolean
+        }
+    },
+};
+
+
+export const Default = {
+    args: {
+        bouts: getDEWithBouts.pools[0].Bouts,
+        eventRules: getDEWithBouts.eventRules,
+        hostingClubColors: getDEWithBouts.hostingClubColors,
+        connectedToServer: true
+    }
+};
+