@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,57 +1,17 @@
 <template>
   <section v-if="listView" class="flex flex-col items-center">
-
-    <!-- Assigned Bouts -->
-    <div v-if="hasAssignedBouts" class="w-full flex-col md:w-3/4 my-4">
-      <div class="flex flex-row justify-between">
-        <BaseText class="my-5" color="primaryHighlight" size="sm" text="Assigned Bouts" weight="bold"/>
-        <div class="flex mr-1">
-          <BaseText class="my-5 ml-5" color="primaryHighlight" size="sm" text="Assigned:"/>
-          <BaseText
-              :text="assignedBoutsToMe.length"
-              class="my-5 ml-2"
-              color="primaryHighlight"
-              size="sm"
-              weight="bold"
-          />
-        </div>
-      </div>
-      <div class="border-b border-dropdownSelect mb-5"></div>
-
-      <div v-for="bout in assignedBoutsToMe" :key="bout.BoutId" class="mb-4">
-        <BoutCard
-            :bout="bout"
-            :hostingClubColors="hostingClubColors"
-            :editMode="true"
-            :reorderMode="false"
-            :isAdmin="isAdmin"
-            @action:startBout="handleDirectingFromIds"
-            @action:resumeBout="handleDirectingFromIds"
-            @action:editBout="handleEditFromIds"
-            @action:assignBout="handleAssignBout"
-        />
-      </div>
-    </div>
-
-    <!-- Existing rounds -->
-    <div
-        v-for="(bouts, roundName) in filteredBouts"
-        :key="bouts[0].BoutId"
-        class="w-full flex-col md:w-3/4 my-4"
-    >
-      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="roundName" weight="bold"/>
+    <div v-for="(bouts, roundName) in filteredBouts" :key="bouts[0].BoutId" class="w-full flex-col md:w-3/4 my-4">
+      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="roundName" weight="bold" />
 
       <div v-for="bout in bouts" :key="bout.BoutId" class="mb-4">
-        <BoutCard
-            :bout="bout"
-            :hostingClubColors="hostingClubColors"
-            :editMode="true"
-            :reorderMode="false"
-            :isAdmin="isAdmin"
-            @action:startBout="handleDirectingFromIds"
-            @action:resumeBout="handleDirectingFromIds"
-            @action:editBout="handleEditFromIds"
-            @action:assignBout="handleAssignBout"
+        <BoutCard
+          :bout="bout"
+          :hostingClubColors="hostingClubColors"
+          :editMode="true"
+          :reorderMode="false"
+          @action:startBout="handleDirectingFromIds"
+          @action:resumeBout="handleDirectingFromIds"
+          @action:editBout="handleEditFromIds"
         />
       </div>
     </div>
@@ -61,14 +21,14 @@
     <div class="min-w-full flex">
       <div v-for="(bouts, roundName) in groupedBouts.winnerBouts" :key="roundName">
         <TableauColumn
-            :bouts="bouts"
-            :hostingClubColors="hostingClubColors"
-            :roundName="roundName"
-            :bracketSize="bracketSize"
-            :largeCards="largeCards"
-            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-            @action:editBout="handleEditBout"
-            @action:directingBout="handleDirectorBout"
+          :bouts="bouts"
+          :hostingClubColors="hostingClubColors"
+          :roundName="roundName"
+          :bracketSize="bracketSize"
+          :largeCards="largeCards"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @action:editBout="handleEditBout"
+          @action:directingBout="handleDirectorBout"
         />
       </div>
     </div>
@@ -77,14 +37,14 @@
     <div class="min-w-full flex">
       <div v-for="(bouts, roundName) in groupedBouts.loserBouts" :key="roundName">
         <TableauColumn
-            :bouts="bouts"
-            :hostingClubColors="hostingClubColors"
-            :roundName="roundName"
-            :bracketSize="bracketSize"
-            :largeCards="largeCards"
-            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-            @action:editBout="handleEditBout"
-            @action:directingBout="handleDirectorBout"
+          :bouts="bouts"
+          :hostingClubColors="hostingClubColors"
+          :roundName="roundName"
+          :bracketSize="bracketSize"
+          :largeCards="largeCards"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @action:editBout="handleEditBout"
+          @action:directingBout="handleDirectorBout"
         />
       </div>
     </div>
@@ -92,65 +52,68 @@
 </template>
 
 <script>
-import TableauColumn from "../TableauColumn/TableauColumn.vue";
-import TableauBoutCard from "../../Cards/TableauBoutCard/TableauBoutCard.vue";
-import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import TableauColumn from '../TableauColumn/TableauColumn.vue';
+import TableauBoutCard from '../../Cards/TableauBoutCard/TableauBoutCard.vue';
+import BoutCard from '../../../Organisms/Cards/BoutCard/BoutCard.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const isConsolationRound = ([roundName]) => roundName.includes('Consolation');
+const isMainRound = roundEntry => !isConsolationRound(roundEntry);
+
+const roundPriority = {
+  Final: 1,
+  'Third Place Match': 2,
+  Semifinal: 3
+};
+
+const getRoundNumber = roundName => parseInt(roundName.match(/\d+/)?.[0] || 0, 10);
+
+const sortRoundNames = (roundNameA, roundNameB) => {
+  const priorityA = roundPriority[roundNameA] || 0;
+  const priorityB = roundPriority[roundNameB] || 0;
+
+  if (priorityA || priorityB) return priorityA - priorityB;
+  return getRoundNumber(roundNameB) - getRoundNumber(roundNameA);
+};
+
+const isVisibleBout = bout =>
+  bout.Person1?.DisplayName !== 'BYE' && bout.Person2?.DisplayName !== 'BYE' && bout.Status !== 'Completed';
+
+const createVisibleRoundEntry = ([roundName, bouts]) => {
+  const visibleBouts = bouts.filter(isVisibleBout).sort((boutA, boutB) => boutA.DEBoutId - boutB.DEBoutId);
+  return [roundName, visibleBouts];
+};
+
+const hasVisibleBouts = ([, bouts]) => bouts.length > 0;
+
+const addBoutToRound = (groupedBouts, bout) => {
+  const roundName = bout.RoundLabel || 'Unknown Round';
+  const roundBouts = groupedBouts[roundName] || [];
+
+  return {
+    ...groupedBouts,
+    [roundName]: [...roundBouts, bout]
+  };
+};
 
 export default {
-  name: "Tableau",
+  name: 'Tableau',
   components: { BaseText, BoutCard, TableauBoutCard, TableauColumn },
-  emits: ["action:editBout", "action:directingBout", "action:assignBout"],
+  emits: ['action:editBout', 'action:directingBout'],
   props: {
     bouts: { type: Array, required: true },
     bracketSize: { type: String, required: true },
     hostingClubColors: { type: Object, required: true },
     largeCards: { type: Boolean, required: true },
     listView: { type: Boolean, required: false },
-    isCountingBackwardsMaxScore: { type: Number, default: 0 },
-
-    // use role (already present upstream) instead of passing isAdmin
-    role: { type: String, default: "Admin" },
-
-    // needed for "Assigned Bouts" section
-    currentUserId: { type: [Number, String], default: null },
+    isCountingBackwardsMaxScore: { type: Number, default: 0 }
   },
   computed: {
-    isAdmin() {
-      return String(this.role || "").toLowerCase() === "admin";
-    },
-
-    assignedBoutsToMe() {
-      const me = Number(this.currentUserId);
-      if (!me) return [];
-      return (this.bouts || [])
-          .filter(
-              (b) =>
-                  Number(b.RefereeId) === me &&
-                  String(b.Status || "").toLowerCase() !== "completed"
-          )
-          .slice()
-          .sort((a, b) => Number(a.DEBoutId ?? 0) - Number(b.DEBoutId ?? 0));
-    },
-
-    hasAssignedBouts() {
-      return this.assignedBoutsToMe.length > 0;
-    },
-
     groupedBouts() {
       const grouped = this.groupBoutsByRound(this.bouts);
-
-      const { winnerBouts, loserBouts } = Object.entries(grouped).reduce(
-          (acc, [roundName, bouts]) => {
-            if (roundName.includes("Consolation")) {
-              acc.loserBouts[roundName] = bouts;
-            } else {
-              acc.winnerBouts[roundName] = bouts;
-            }
-            return acc;
-          },
-          { winnerBouts: {}, loserBouts: {} }
-      );
+      const roundEntries = Object.entries(grouped);
+      const winnerBouts = Object.fromEntries(roundEntries.filter(isMainRound));
+      const loserBouts = Object.fromEntries(roundEntries.filter(isConsolationRound));
 
       return { winnerBouts, loserBouts };
     },
@@ -158,102 +121,62 @@ export default {
     combinedBouts() {
       const combined = {
         ...this.groupedBouts.winnerBouts,
-        ...this.groupedBouts.loserBouts,
+        ...this.groupedBouts.loserBouts
       };
-      return Object.keys(combined)
+      return Object.fromEntries(
+        Object.keys(combined)
           .sort()
-          .reduce((acc, roundName) => {
-            acc[roundName] = combined[roundName];
-            return acc;
-          }, {});
+          .map(roundName => [roundName, combined[roundName]])
+      );
     },
 
     filteredBouts() {
-      return Object.keys(this.combinedBouts)
-          .sort((a, b) => {
-            const priority = {
-              Final: 1,
-              "Third Place Match": 2,
-              Semifinal: 3,
-            };
-
-            const priorityA = priority[a] || 0;
-            const priorityB = priority[b] || 0;
-
-            if (priorityA || priorityB) return priorityA - priorityB;
-
-            const numA = parseInt(a.match(/\d+/)?.[0] || 0, 10);
-            const numB = parseInt(b.match(/\d+/)?.[0] || 0, 10);
-
-            return numB - numA;
-          })
-          .reduce((acc, roundName) => {
-            const filtered = this.combinedBouts[roundName]
-                .filter(
-                    (bout) =>
-                        bout.Person1?.DisplayName !== "BYE" &&
-                        bout.Person2?.DisplayName !== "BYE" &&
-                        bout.Status !== "Completed"
-                )
-                .sort((a, b) => a.DEBoutId - b.DEBoutId);
-
-            if (filtered.length) acc[roundName] = filtered;
-            return acc;
-          }, {});
-    },
+      return Object.fromEntries(
+        Object.entries(this.combinedBouts)
+          .sort(([roundNameA], [roundNameB]) => sortRoundNames(roundNameA, roundNameB))
+          .map(createVisibleRoundEntry)
+          .filter(hasVisibleBouts)
+      );
+    }
   },
 
   methods: {
     // --- helpers ---
     _findBoutByIds(idsOrBout) {
-      // BoutCard emits ids for start/resume/edit; assign emits ids too.
-      // normalize to actual bout object
+      // BoutCard emits ids for start/resume/edit; normalize to an actual bout object.
       if (!idsOrBout) return null;
       if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout; // already a bout-ish object
 
       const boutId = idsOrBout?.BoutId ?? idsOrBout?.boutId;
       if (!boutId) return null;
-      return (this.bouts || []).find((b) => String(b.BoutId) === String(boutId)) || null;
-    },
-
-    // Assign button from BoutCard (inactive scheduled variant)
-    handleAssignBout(ids) {
-      const bout = this._findBoutByIds(ids);
-      if (!bout) return;
-      this.$emit("action:assignBout", bout);
+      return (this.bouts || []).find(b => String(b.BoutId) === String(boutId)) || null;
     },
 
     // Start/Resume from BoutCard
     handleDirectingFromIds(ids) {
       const bout = this._findBoutByIds(ids);
       if (!bout) return;
-      this.$emit("action:directingBout", bout);
+      this.$emit('action:directingBout', bout);
     },
 
     // Edit from BoutCard
     handleEditFromIds(ids) {
       const bout = this._findBoutByIds(ids);
       if (!bout) return;
-      this.$emit("action:editBout", bout);
+      this.$emit('action:editBout', bout);
     },
 
     // TableauColumn / non-list view already emits bout objects
     handleEditBout(bout) {
-      this.$emit("action:editBout", bout);
+      this.$emit('action:editBout', bout);
     },
     handleDirectorBout(bout) {
-      this.$emit("action:directingBout", bout);
+      this.$emit('action:directingBout', bout);
     },
 
     groupBoutsByRound(bouts) {
-      return (bouts || []).reduce((acc, bout) => {
-        const key = bout.RoundLabel || "Unknown Round";
-        if (!acc[key]) acc[key] = [];
-        acc[key].push(bout);
-        return acc;
-      }, {});
-    },
-  },
+      return (bouts || []).reduce(addBoutToRound, {});
+    }
+  }
 };
 </script>
-

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

@@ -2,36 +2,35 @@ 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
+  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'
     },
-    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'
-        }
+    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'
-    }
+  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

@@ -1,28 +1,32 @@
 <template>
   <section>
-    <div v-if="roundName !== 'Third Place' && roundName !== 'Final' && roundName !== 'Grand Final'" class="flex justify-center mb-4 border-b" :class="largeCards ? 'w-72' : 'w-40' ">
+    <div
+      v-if="roundName !== 'Third Place' && roundName !== 'Final' && roundName !== 'Grand 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"
-                       :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                       @action:editBout="handleEditBout"
-                       @action:directingBout="handleDirectorBout"
-                      />
-      <TableauLines :roundName="roundName" :large="largeCards"  :bracketSize="bracketSize"/>
-
+      <TableauBoutCard
+        :bout="bout"
+        :hostingClubColors="hostingClubColors"
+        :roundName="roundName"
+        :large="largeCards"
+        :bracketSize="bracketSize"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        @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";
+import TableauBoutCard from '../../Cards/TableauBoutCard/TableauBoutCard.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import TableauLines from '../TableauLines/TableauLines.vue';
 
 export default {
   name: 'TableauColumn',
@@ -59,8 +63,7 @@ export default {
       finalLineShown: true
     };
   },
-  computed: {
-  },
+  computed: {},
   methods: {
     handleEditBout(bout) {
       this.$emit('action:editBout', bout);