@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,90 +1,127 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isListView)" @tabMenuClick="handleTabMenuClick"/>
-    <ToggleHeader :currentSelection="viewName"
-                  :key="viewName"
-                  firstButtonLabel="List View"
-                  secondButtonLabel="Tableau"
-                  :showConnected="true"
-                  :showToggle="true"
-                  :largeCards="largeCards"
-                  :connectedToServer="connectedToServer"
-                  @update:selection="handleViewChange"
-                  @update:cardSize="handleCardSizeToggle"/>
-
-    <Tableau
-        :bouts="sortedBouts"
-        :hostingClubColors="hostingClubColors"
-        :bracketSize="bracketSize"
-        :largeCards="largeCards"
-        :listView="isListView"
-        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-        :role="role"
-        :currentUserId="currentUserId"
-        @action:editBout="editBout"
-        @action:directingBout="directBout"
-        @action:assignBout="openAssignDirector"
+    <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isListView)" @tabMenuClick="handleTabMenuClick" />
+    <ToggleHeader
+      :currentSelection="viewName"
+      :key="viewName"
+      firstButtonLabel="List View"
+      secondButtonLabel="Tableau"
+      :showConnected="true"
+      :connectedToServer="connectedToServer"
+      @update:selection="handleViewChange"
     />
 
+    <div class="flex flex-col gap-4 xl:flex-row">
+      <div class="min-w-0 flex-1">
+        <Tableau
+          :bouts="sortedBouts"
+          :hostingClubColors="hostingClubColors"
+          :bracketSize="bracketSize"
+          :listView="isListView"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          :plannedDirectingStations="plannedDirectingStations"
+          :plannedBoutAssignments="plannedBoutAssignments"
+          :viewerPersonId="viewerPersonId"
+          @action:editBout="editBout"
+          @action:directingBout="directBout"
+        />
+      </div>
+
+      <BracketDirectorAssignmentPanel
+        v-if="showPlannedAssignmentPanel"
+        class="order-first flex-none xl:order-last"
+        :stations="plannedDirectingStations"
+        :showAddCard="showAddPlannedDirectorCard"
+        @request:add-planned-director="$emit('request:add-planned-director')"
+      />
+    </div>
+
     <div v-if="bouts.length < 1" class="w-full flex justify-center items-center">
       <div class="text-center mb-10">
         <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon" />
         <BaseText text="Nothing to Show Yet!" size="lg" color="quinary" weight="bold" class="text-center" />
-        <BaseText text="Check Back when this event has progress to Direct Elimination" size="sm" color="quinary" weight="normal" />
-        <BaseText text="The Generate bracket button will appear on the bottom of the pools screen" size="sm" color="quinary" weight="normal" />
+        <BaseText
+          text="Check Back when this event has progress to Direct Elimination"
+          size="sm"
+          color="quinary"
+          weight="normal"
+        />
+        <BaseText
+          text="The Generate bracket button will appear on the bottom of the pools screen"
+          size="sm"
+          color="quinary"
+          weight="normal"
+        />
       </div>
     </div>
 
-    <DirectorModal :bout="selectedBout"
-                   :eventRules="eventRules"
-                   :hostingClubColors="hostingClubColors"
-                   :show="showDirectorModal"
-                   ringName="RingName"
-                   @penalty:add="handleAddPenalty"
-                   @penalty:update="handleUpdatePenalty"
-                   @penalty:remove="handleRemovePenalty"
-                   @update:closeModal="handleCloseModal"
-                   @update:bout="handleUpdateBout"
-                   @submit:bout="handleSubmitBout"/>
-
-    <EditBoutModal :bout="selectedBout"
-                   :eventRules="eventRules"
-                   :hostingClubColors="hostingClubColors"
-                   :show="showEditBoutModal"
-                   :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                   @update:closeModal="handleCloseModal"
-                   @submit:bout="handleSubmitBout"/>
-
-    <AssignDirectorModal
-        :show="showAssignDirectorModal"
-        :bout="assigningBout || {}"
-        :directors="directors"
-        @update:closeModal="closeAssignDirectorModal"
-        @assign="handleAssignDirector"
+    <DirectorModal
+      :bout="selectedBout"
+      :eventRules="eventRules"
+      :hostingClubColors="hostingClubColors"
+      :show="showDirectorModal"
+      @penalty:add="handleAddPenalty"
+      @penalty:update="handleUpdatePenalty"
+      @penalty:remove="handleRemovePenalty"
+      @update:closeModal="handleCloseModal"
+      @update:bout="handleUpdateBout"
+      @submit:bout="handleSubmitBout"
     />
 
+    <EditBoutModal
+      :bout="selectedBout"
+      :eventRules="eventRules"
+      :hostingClubColors="hostingClubColors"
+      :show="showEditBoutModal"
+      :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+      @update:closeModal="handleCloseModal"
+      @request:bout-active="handleBoutActiveRequest"
+      @submit:bout="handleSubmitBout"
+    />
   </section>
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
-import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
-import Tableau from "../../../Organisms/Containers/Tableau/Tableau.vue";
-import emptyDesertIcon from "../../../../assets/empty_desert_icon.png";
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
+import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
+import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
+import BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import { tabs } from '../../../Util/tabs.js';
-import AssignDirectorModal from "../../../Molecules/Modals/AssignDirectorModal/AssignDirectorModal.vue";
 
-export default {
-  emits: ['assign:director', 'penalty:add', 'penalty:remove', 'penalty:update', 'submit:bout', 'tab:menu-click', 'update:bout', 'update:directing-bout'],
-  components: {
-    AssignDirectorModal,
-    Tableau,
-    EditBoutModal,
-    DirectorModal,
-    BaseText,
+const isByeFencer = person => {
+  if (!person?.PersonId || Number(person.PersonId) === 0) return true;
+  return String(person.DisplayName || '').toUpperCase() === 'BYE';
+};
+
+const invalidDirectingBoutPredicates = [
+  bout => !bout?.BoutId,
+  bout => isByeFencer(bout?.Person1),
+  bout => isByeFencer(bout?.Person2)
+];
+
+export default {
+  emits: [
+    'close:directing-bout',
+    'penalty:add',
+    'penalty:remove',
+    'penalty:update',
+    'request:add-planned-director',
+    'request:bout-active',
+    'submit:bout',
+    'tab:menu-click',
+    'update:bout',
+    'update:directing-bout'
+  ],
+  components: {
+    Tableau,
+    EditBoutModal,
+    DirectorModal,
+    BracketDirectorAssignmentPanel,
+    BaseText,
     ToggleHeader,
     EditEventsTopMenu
   },
@@ -92,10 +129,10 @@ export default {
     bouts: {
       type: Array,
       required: true
-    },
-    eventRules: {
-      type: Array,
-      required: true
+    },
+    eventRules: {
+      type: Array,
+      required: true
     },
     hostingClubColors: {
       type: Object,
@@ -113,15 +150,26 @@ export default {
       type: String,
       default: 'Admin'
     },
-    directors: {
+    plannedDirectingStations: {
       type: Array,
       default: () => []
     },
-    currentUserId: {
+    plannedBoutAssignments: {
+      type: Array,
+      default: () => []
+    },
+    viewerPersonId: {
       type: [Number, String],
       default: null
     },
-
+    showPlannedDirectorAssignments: {
+      type: Boolean,
+      default: false
+    },
+    showAddPlannedDirectorCard: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -130,17 +178,14 @@ export default {
       showEditBoutModal: false,
       selectedBout: {},
       tabs,
-      viewName: "Tableau",
-      largeCards: true,
-      boutsData: this.cloneBouts(this.bouts),
-      isListView: false,
-      showAssignDirectorModal: false,
-      assigningBout: null,
+      viewName: 'Tableau',
+      boutsData: this.cloneBouts(this.bouts),
+      isListView: false
     };
   },
   computed: {
-    isAdmin() {
-      return String(this.role || '').toLowerCase() === 'admin';
+    showPlannedAssignmentPanel() {
+      return this.showPlannedDirectorAssignments || this.plannedDirectingStations.length > 0;
     },
     isCountingBackwardsMaxScore() {
       // 1) see if PoolScoreDirection exists and is explicitly "false"
@@ -159,28 +204,20 @@ export default {
       return Number.isFinite(n) && n > 0 ? n : null;
     },
     bracketSize() {
-      return this.boutsData && this.boutsData.length > 0 && this.boutsData[0].RoundLabel ? this.boutsData[0].RoundLabel : "";
+      return this.boutsData && this.boutsData.length > 0 && this.boutsData[0].RoundLabel
+        ? this.boutsData[0].RoundLabel
+        : '';
     },
-    activeBouts() {
-      return this.boutsData.filter(bout => String(bout.Status || '').toLowerCase() === 'active');
-    },
-    sortedBouts() {
-      return this.boutsData.slice().sort((a, b) => {
-        if (a.DEBoutId < b.DEBoutId) {
-          return -1;
-        }
-        if (a.DEBoutId > b.DEBoutId) {
-          return 1;
-        }
-        return 0;
-      });
+    sortedBouts() {
+      return this.boutsData.slice().sort((a, b) => Number(a.DEBoutId ?? 0) - Number(b.DEBoutId ?? 0));
     }
   },
   watch: {
-    bouts: {
-      handler(newBouts) {
-        this.boutsData = this.cloneBouts(newBouts);
-      },
+    bouts: {
+      handler(newBouts) {
+        this.boutsData = this.cloneBouts(newBouts);
+        this.reconcileSelectedBout();
+      },
       deep: true,
       immediate: true
     }
@@ -193,94 +230,53 @@ export default {
     window.removeEventListener('resize', this.updateViewBasedOnScreenSize);
   },
   methods: {
-    handleAssignDirector({ bout, director }) {
-      if (!bout?.BoutId || !director?.PersonId) return;
-
-      this.$emit('assign:director', {
-        bout: { ...bout },
-        director: { ...director }
-      });
-
-      this.closeAssignDirectorModal();
-    },
-    openAssignDirector(bout) {
-      this.assigningBout = bout;
-      this.showAssignDirectorModal = true;
-    },
-    closeAssignDirectorModal() {
-      this.showAssignDirectorModal = false;
-      this.assigningBout = null;
-    },
-    handleCloseModal(bout) {
-      this.showDirectorModal = false;
-      this.showEditBoutModal = false;
-
-      if (!bout?.BoutId) return;
-      if (bout.Status !== 'Completed') {
-        const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-        if (!updatedBout) return;
-
-        updatedBout.Status = 'Scheduled';
-        updatedBout.Score1 = 0;
-        updatedBout.Score2 = 0;
-        this.$emit('update:bout', updatedBout);
-      }
+    handleCloseModal() {
+      const closedDirectingBout = this.showDirectorModal && this.selectedBout?.BoutId ? { ...this.selectedBout } : null;
+      this.showDirectorModal = false;
+      this.showEditBoutModal = false;
+      this.selectedBout = {};
+      if (closedDirectingBout) this.$emit('close:directing-bout', closedDirectingBout);
     },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
     handleViewChange(value) {
       this.viewName = value;
+      this.isListView = value === 'List View';
+    },
+    handleUpdateBout(bout) {
+      if (!bout?.BoutId) return;
+      this.$emit('update:bout', { ...bout });
+    },
+    handleSubmitBout(bout) {
+      this.showEditBoutModal = false;
+      this.showDirectorModal = false;
+      if (!bout?.BoutId) return;
+      this.$emit('submit:bout', { ...bout });
+      this.selectedBout = {};
+    },
+    handleBoutActiveRequest(bout) {
+      this.showEditBoutModal = false;
+      if (!bout?.BoutId) return;
+      this.$emit('request:bout-active', { ...bout });
+      this.selectedBout = {};
+    },
+    directBout(bout) {
+      if (!this.canDirectBout(bout)) return;
 
-      if (value === 'List View') {
-        this.isListView = true;
-        return
-      }
-      this.isListView = false;
-    },
-    handleUpdateBout(bout) {
-      if (!bout?.BoutId) return;
-
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Active';
-      this.$emit('update:bout', updatedBout);
-    },
-    handleSubmitBout(bout) {
-      this.showEditBoutModal = false;
-      this.showDirectorModal = false;
-      if (!bout?.BoutId) return;
-
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Completed';
-      updatedBout.Ended = new Date().toISOString();
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
 
-      this.$emit('submit:bout', updatedBout);
-    },
-    directBout(bout) {
-      if (!this.canDirectBout(bout)) return;
-
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      updatedBout.Status = 'Active';
-      this.showDirectorModal = true;
-      this.selectedBout = updatedBout;
-      this.$emit('update:directing-bout', updatedBout)
-    },
-    editBout(bout) {
-      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-      if (!updatedBout) return;
-
-      this.showEditBoutModal = true;
-      this.selectedBout = updatedBout;
+      this.selectedBout = { ...updatedBout };
+      this.showDirectorModal = String(updatedBout.Status || '').toLowerCase() === 'active';
+      this.$emit('update:directing-bout', { ...updatedBout });
     },
-    handleCardSizeToggle(value){
-      this.largeCards = value
+    editBout(bout) {
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
+
+      this.showEditBoutModal = true;
+      this.selectedBout = updatedBout;
     },
     updateViewBasedOnScreenSize() {
       this.isListView = window.innerWidth <= 768;
@@ -289,21 +285,28 @@ export default {
       this.$emit('penalty:update', penalty);
     },
     handleAddPenalty(penalty) {
-
       this.$emit('penalty:add', penalty);
     },
-    handleRemovePenalty(penalty) {
-      this.$emit('penalty:remove', penalty);
-    },
-    canDirectBout(bout) {
-      if (!bout?.BoutId) return false;
-      if (bout.Person1?.PersonId === 0) return false;
-      if (bout.Person2?.PersonId === 0) return false;
-      return true;
-    },
-    cloneBouts(bouts) {
-      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
-    }
+    handleRemovePenalty(penalty) {
+      this.$emit('penalty:remove', penalty);
+    },
+    canDirectBout(bout) {
+      return !invalidDirectingBoutPredicates.some(predicate => predicate(bout));
+    },
+    reconcileSelectedBout() {
+      const selectedBoutId = this.selectedBout?.BoutId;
+      if (!selectedBoutId) return;
+
+      const updatedBout = this.boutsData.find(bout => bout.BoutId === selectedBoutId);
+      if (!updatedBout) return;
+
+      this.selectedBout = { ...updatedBout };
+      if (String(updatedBout.Status || '').toLowerCase() !== 'active') return;
+      this.showDirectorModal = true;
+    },
+    cloneBouts(bouts) {
+      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
+    }
   }
-}
-</script>
+};
+</script>

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

@@ -0,0 +1,39 @@
+import portraitUrl from '../../../../assets/portrait1.png';
+
+const createBoutAssignments = (ringId, boutIds) => boutIds.map(DEBoutId => ({ DEBoutId, RingId: ringId }));
+
+export const plannedDirectingStations = [
+  {
+    RingId: 1,
+    RingName: 'Ring 1',
+    Color: '#2563eb',
+    Director: { PersonId: 1001, DisplayName: 'Alex Morgan', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 2,
+    RingName: 'Ring 2',
+    Color: '#dc2626',
+    Director: { PersonId: 1002, DisplayName: 'Jordan Lee', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 3,
+    RingName: 'Ring 3',
+    Color: '#059669',
+    Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 4,
+    RingName: 'Ring 4',
+    Color: '#d97706',
+    Director: { PersonId: 1004, DisplayName: 'Taylor Quinn', PortraitUrl: portraitUrl }
+  }
+];
+
+export const plannedBoutAssignments = [
+  ...createBoutAssignments(1, [65, 66, 67, 68, 69, 70, 71, 72, 97, 98, 99, 100, 113, 114, 121, 125]),
+  ...createBoutAssignments(2, [73, 74, 75, 76, 77, 78, 79, 80, 101, 102, 103, 104, 115, 116, 122]),
+  ...createBoutAssignments(3, [81, 82, 83, 84, 85, 86, 87, 88, 105, 106, 107, 108, 117, 118, 123, 126]),
+  ...createBoutAssignments(4, [89, 90, 91, 92, 93, 94, 95, 96, 109, 110, 111, 112, 119, 120, 124, 127])
+];
+
+export const plannedSuggestionViewerId = plannedDirectingStations[0].Director.PersonId;

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

@@ -0,0 +1,39 @@
+const STORY_DIRECTOR = {
+  PersonId: -1,
+  DisplayName: 'Story Director'
+};
+
+const isSameBout = (bout, selectedBout) => String(bout.BoutId) === String(selectedBout.BoutId);
+const isActiveBout = bout => String(bout?.Status || '').toLowerCase() === 'active';
+const hasSameIdentity = (firstId, secondId) => String(firstId ?? '') === String(secondId ?? '');
+
+export const cloneStoryBouts = bouts => (bouts || []).map(bout => ({ ...bout }));
+
+export const canStoryDirectorDirectBout = (bout, directorId) =>
+  !isActiveBout(bout) || hasSameIdentity(bout.RefereeId, directorId);
+
+export const getStoryDirectorId = station => station?.Director?.PersonId ?? STORY_DIRECTOR.PersonId;
+
+export const activateStoryBout = (bout, station = null) => {
+  const director = station?.Director || STORY_DIRECTOR;
+
+  return {
+    ...bout,
+    Status: 'Active',
+    RefereeId: director.PersonId,
+    RefName: director.DisplayName,
+    RingName: station?.RingName || bout.RingName || 'DE Bracket',
+    TimerStatus: bout.TimerStatus || 'stopped',
+    TimeLeft: Number(bout.TimeLeft) > 0 ? Number(bout.TimeLeft) : 180
+  };
+};
+
+export const clearStoryBoutChrome = bout => ({
+  ...bout,
+  RingName: '',
+  TimerStatus: 'stopped',
+  TimeLeft: 0
+});
+
+export const replaceStoryBout = (bouts, selectedBout) =>
+  bouts.map(bout => (isSameBout(bout, selectedBout) ? { ...selectedBout } : bout));

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

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import {
+  activateStoryBout,
+  canStoryDirectorDirectBout,
+  clearStoryBoutChrome,
+  replaceStoryBout
+} from './BracketStoryHarness';
+
+describe('Bracket story parent simulation', () => {
+  it('returns an Active parent-owned bout without mutating the selected bout', () => {
+    const scheduledBout = { BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 };
+
+    const activeBout = activateStoryBout(scheduledBout);
+
+    expect(activeBout).toMatchObject({
+      Status: 'Active',
+      RefereeId: -1,
+      RefName: 'Story Director',
+      RingName: 'DE Bracket',
+      TimerStatus: 'stopped',
+      TimeLeft: 180,
+      Score1: 2,
+      Score2: 1
+    });
+    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 });
+  });
+
+  it('replaces only the selected bout in the story-owned collection', () => {
+    const bouts = [
+      { BoutId: 41, Status: 'Scheduled' },
+      { BoutId: 42, Status: 'Scheduled' }
+    ];
+    const activeBout = { BoutId: 42, Status: 'Active' };
+
+    expect(replaceStoryBout(bouts, activeBout)).toEqual([bouts[0], activeBout]);
+  });
+
+  it('uses the viewer station when the story simulates pulling a scheduled bout', () => {
+    const scheduledBout = { BoutId: 42, Status: 'Scheduled' };
+    const station = {
+      RingName: 'Ring 1',
+      Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
+    };
+
+    expect(activateStoryBout(scheduledBout, station)).toMatchObject({
+      Status: 'Active',
+      RefereeId: 1001,
+      RefName: 'Alex Morgan',
+      RingName: 'Ring 1'
+    });
+    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled' });
+  });
+
+  it('allows scheduled bouts to move but protects an Active bout owned by another director', () => {
+    expect(canStoryDirectorDirectBout({ Status: 'Scheduled', RefereeId: 2002 }, 1001)).toBe(true);
+    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 2002 }, 1001)).toBe(false);
+    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 1001 }, '1001')).toBe(true);
+  });
+
+  it('clears story-only ring and timer fields without resetting status or scores', () => {
+    const activeBout = {
+      BoutId: 42,
+      Status: 'Active',
+      Score1: 5,
+      Score2: 4,
+      RingName: 'Ring 3',
+      TimerStatus: 'running',
+      TimeLeft: 72
+    };
+
+    expect(clearStoryBoutChrome(activeBout)).toEqual({
+      ...activeBout,
+      RingName: '',
+      TimerStatus: 'stopped',
+      TimeLeft: 0
+    });
+    expect(activeBout).toMatchObject({ Status: 'Active', Score1: 5, Score2: 4 });
+  });
+});