@dcrackel/hematournamentui 1.0.712 → 1.0.714

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

@@ -5,9 +5,9 @@
 
       <div v-for="bout in section.bouts" :key="bout.BoutId" class="mb-4">
         <div
-          v-if="getPlannedStation(bout)"
+          v-if="getPlannedStation(bout) && getBoutDirectorLabel(bout)"
           data-testid="planned-bout-label"
-          class="mb-1 flex items-center gap-2 rounded border-l-4 border-dropdownSelect bg-white px-2 py-1 shadow-sm"
+          class="mb-1 hidden md:flex items-center justify-center gap-2 rounded border-l-4 border-dropdownSelect bg-white px-2 py-1 shadow-sm"
           :style="{ borderLeftColor: getPlannedStation(bout).Color }"
         >
           <span
@@ -15,19 +15,51 @@
             :style="{ backgroundColor: getPlannedStation(bout).Color }"
             aria-hidden="true"
           ></span>
-          <BaseText :text="getPlannedStationLabel(bout)" color="quaternary" size="xs" />
+          <BaseText :text="getBoutDirectorLabel(bout)" color="quaternary" size="xs" />
         </div>
+        <HoverActions
+          :actions="getBoutActions(bout)"
+          :focusable="!canOpenBracketBout(bout)"
+          @action="handleListBoutAction(bout, $event)"
+        >
+          <BoutCard
+            :bout="bout"
+            :hostingClubColors="hostingClubColors"
+            :editMode="canOpenBracketBout(bout)"
+            :reorderMode="false"
+            :timerStatus="bout.TimerStatus || 'stopped'"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            @action:startBout="handleDirectingFromIds"
+            @action:resumeBout="handleDirectingFromIds"
+            @action:editBout="handleEditFromIds"
+          >
+            <template v-if="getBoutDirectorLabel(bout)" #mobile-details>
+              <BaseText
+                :text="getBoutDirectorLabel(bout)"
+                color="quaternary"
+                size="xs"
+                class="w-full min-w-0 break-words text-center"
+              />
+            </template>
+          </BoutCard>
+        </HoverActions>
+      </div>
+    </div>
+    <details v-if="completedListBouts.length" class="my-4 w-full md:w-3/4">
+      <summary class="cursor-pointer py-3 text-sm font-bold text-primaryHighlight">
+        Completed bouts ({{ completedListBouts.length }})
+      </summary>
+      <div v-for="bout in completedListBouts" :key="bout.BoutId" class="mb-4">
         <BoutCard
           :bout="bout"
           :hostingClubColors="hostingClubColors"
           :editMode="true"
           :reorderMode="false"
-          @action:startBout="handleDirectingFromIds"
-          @action:resumeBout="handleDirectingFromIds"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
           @action:editBout="handleEditFromIds"
         />
       </div>
-    </div>
+    </details>
   </section>
 
   <section
@@ -47,6 +79,9 @@
           :bracketSize="bracketSize"
           :layout="getRoundLayout(roundIndex)"
           :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          :showBoutDirectorAssignment="showBoutDirectorAssignment"
+          :plannedStationByBout="plannedStationByBout"
+          @request:bout-director="$emit('request:bout-director', $event)"
           @register-node-anchor="registerNodeAnchor"
           @action:editBout="handleEditBout"
           @action:directingBout="handleDirectorBout"
@@ -63,6 +98,9 @@
           :bracketSize="bracketSize"
           :layout="placementLayout"
           :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          :showBoutDirectorAssignment="showBoutDirectorAssignment"
+          :plannedStationByBout="plannedStationByBout"
+          @request:bout-director="$emit('request:bout-director', $event)"
           @register-node-anchor="registerNodeAnchor"
           @action:editBout="handleEditBout"
           @action:directingBout="handleDirectorBout"
@@ -81,6 +119,9 @@
             :bracketSize="bracketSize"
             :layout="getRoundLayout(roundIndex)"
             :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            :showBoutDirectorAssignment="showBoutDirectorAssignment"
+            :plannedStationByBout="plannedStationByBout"
+            @request:bout-director="$emit('request:bout-director', $event)"
             @register-node-anchor="registerNodeAnchor"
             @action:editBout="handleEditBout"
             @action:directingBout="handleDirectorBout"
@@ -95,6 +136,8 @@
 
 <script>
 import BaseText from '../../../Atoms/Text/BaseText.vue';
+import { canAssignBoutDirector, canOpenBracketBout, createBoutActions } from '../../../Util/boutDirectorAssignment.js';
+import HoverActions from '../../../Molecules/Menus/HoverActions/HoverActions.vue';
 import BoutCard from '../../../Organisms/Cards/BoutCard/BoutCard.vue';
 import TableauColumn from '../TableauColumn/TableauColumn.vue';
 import TableauSvgOverlay from './components/TableauSvgOverlay.vue';
@@ -149,12 +192,16 @@ const addBoutToRound = (rounds, bout) => {
 
 const groupBoutsByRound = bouts => (bouts || []).reduce(addBoutToRound, {});
 
-const isVisibleListBout = bout =>
-  bout.Person1?.DisplayName !== 'BYE' && bout.Person2?.DisplayName !== 'BYE' && bout.Status !== 'Completed';
+const isCompletedBout = bout => String(bout.Status || '').toLowerCase() === 'completed';
+
+const isVisibleListBout = (bout, showBoutDirectorAssignment) => {
+  if (showBoutDirectorAssignment && canAssignBoutDirector(bout)) return true;
+  return canOpenBracketBout(bout) && !isCompletedBout(bout);
+};
 
-const createVisibleRoundEntry = ([roundName, bouts]) => [
+const createVisibleRoundEntry = ([roundName, bouts], showBoutDirectorAssignment) => [
   roundName,
-  bouts.filter(isVisibleListBout).sort(sortBoutsByNodeId)
+  bouts.filter(bout => isVisibleListBout(bout, showBoutDirectorAssignment)).sort(sortBoutsByNodeId)
 ];
 
 const hasBouts = ([, bouts]) => bouts.length > 0;
@@ -176,9 +223,10 @@ const createRoundLayout = depth => {
 
 export default {
   name: 'Tableau',
-  components: { BaseText, BoutCard, TableauColumn, TableauSvgOverlay },
-  emits: ['action:editBout', 'action:directingBout'],
+  components: { BaseText, BoutCard, TableauColumn, TableauSvgOverlay, HoverActions },
+  emits: ['action:editBout', 'action:directingBout', 'request:bout-director'],
   props: {
+    showBoutDirectorAssignment: { type: Boolean, default: true },
     bouts: { type: Array, required: true },
     bracketSize: { type: String, required: true },
     hostingClubColors: { type: Object, required: true },
@@ -216,9 +264,15 @@ export default {
     loserRoundEntries() {
       return this.roundEntries.filter(([roundName]) => isConsolationRoundName(roundName)).sort(sortRoundEntries);
     },
+    completedListBouts() {
+      return this.bouts.filter(bout => isCompletedBout(bout) && canOpenBracketBout(bout)).sort(sortBoutsByNodeId);
+    },
     filteredBouts() {
       return Object.fromEntries(
-        [...this.roundEntries].sort(sortRoundEntries).map(createVisibleRoundEntry).filter(hasBouts)
+        [...this.roundEntries]
+          .sort(sortRoundEntries)
+          .map(entry => createVisibleRoundEntry(entry, this.showBoutDirectorAssignment))
+          .filter(hasBouts)
       );
     },
     listSections() {
@@ -290,6 +344,22 @@ export default {
     }
   },
   methods: {
+    canOpenBracketBout,
+    getBoutActions(bout) {
+      const station = this.getPlannedStation(bout);
+      return createBoutActions(bout, this.showBoutDirectorAssignment, station?.Director?.DisplayName, station?.Color);
+    },
+    handleListBoutAction(bout, actionId) {
+      if (actionId === 'assign-director') {
+        if (!this.showBoutDirectorAssignment || !canAssignBoutDirector(bout)) return;
+        this.$emit('request:bout-director', JSON.parse(JSON.stringify(bout)));
+        return;
+      }
+      if (actionId !== 'open' || !canOpenBracketBout(bout)) return;
+      const event =
+        String(bout.Status || '').toLowerCase() === 'completed' ? 'action:editBout' : 'action:directingBout';
+      this.$emit(event, bout);
+    },
     findBoutByIds(idsOrBout) {
       if (!idsOrBout) return null;
       if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout;
@@ -317,11 +387,15 @@ export default {
     getPlannedStation(bout) {
       return getPlannedStationForBout(this.plannedStationByBout, bout);
     },
-    getPlannedStationLabel(bout) {
+    isActiveListBout(bout) {
+      return String(bout.Status || '').toLowerCase() === 'active';
+    },
+    getBoutDirectorLabel(bout) {
+      if (this.isActiveListBout(bout)) return [bout.RefName, bout.RingName].filter(Boolean).join(' / ');
       const station = this.getPlannedStation(bout);
       if (!station) return '';
       const directorName = station.Director?.DisplayName || 'Director TBD';
-      return `Suggested: ${station.RingName} / ${directorName}`;
+      return [directorName, station.RingName].filter(Boolean).join(' / ');
     },
     registerNodeAnchor({ id, kind, el }) {
       const anchors = kind === 'input' ? this.inputAnchors : this.outputAnchors;

package/src/stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.test.js

@@ -1,29 +1,51 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
-import BracketDirectorAssignmentPanel from './BracketDirectorAssignmentPanel.vue';
-
-const stations = [
-  { RingId: 1, RingName: 'Ring 1', Director: { PersonId: 10, DisplayName: 'Director One' } },
-  { RingId: 2, RingName: 'Ring 2', Director: { PersonId: 20, DisplayName: 'Director Two' } }
-];
-
-describe('BracketDirectorAssignmentPanel', () => {
-  it('renders assigned directors followed by the add summary card', () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
-    const cards = wrapper.findAllComponents(BracketDirectorAssignmentCard);
-
-    expect(cards).toHaveLength(3);
-    expect(cards.slice(0, 2).map(card => card.props('station'))).toEqual(stations);
-    expect(cards[2].props('variant')).toBe('add');
-  });
-
-  it('forwards add intent to its parent', async () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations: [] } });
-
-    wrapper.findComponent(BracketDirectorAssignmentCard).vm.$emit('action:add');
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+import BracketDirectorAssignmentPanel from './BracketDirectorAssignmentPanel.vue';
+
+const stations = [
+  { RingId: 1, RingName: 'Ring 1', Director: { PersonId: 10, DisplayName: 'Director One' } },
+  { RingId: 2, RingName: 'Ring 2', Director: { PersonId: 20, DisplayName: 'Director Two' } }
+];
+
+describe('BracketDirectorAssignmentPanel', () => {
+  it('renders assigned directors followed by the add summary card', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
+    const cards = wrapper.findAllComponents(BracketDirectorAssignmentCard);
+
+    expect(cards).toHaveLength(3);
+    expect(cards.slice(0, 2).map(card => card.props('station'))).toEqual(stations);
+    expect(cards[2].props('variant')).toBe('add');
+  });
+
+  it('forwards add intent to its parent', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations: [] } });
+
+    wrapper.findComponent(BracketDirectorAssignmentCard).vm.$emit('action:add');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
+  });
+
+  it('forwards remove intent and reconciles the parent station list', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
+    wrapper.findComponent(BracketDirectorAssignmentCard).vm.$emit('action:remove', stations[0]);
+    expect(wrapper.emitted('request:remove-planned-director')).toEqual([[stations[0]]]);
+    expect(wrapper.props('stations')).toHaveLength(2);
+    await wrapper.setProps({ stations: stations.slice(1) });
+    expect(
+      wrapper
+        .findAllComponents(BracketDirectorAssignmentCard)
+        .filter(card => card.props('variant') !== 'add')
+        .map(card => card.props('station'))
+    ).toEqual([stations[1]]);
+  });
+
+  it('opens director management', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, {
+      props: { stations, canManageDirectors: true }
+    });
+    await wrapper.get('[data-testid="manage-bracket-directors"]').trigger('click');
+    expect(wrapper.emitted('request:manage-planned-directors')).toEqual([[]]);
+  });
+});

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

@@ -1,46 +1,63 @@
-<template>
-  <aside
-    data-testid="bracket-director-assignment-panel"
-    class="w-full rounded-xl border border-dropdownSelect bg-bannerBackground p-4 shadow-lg xl:sticky xl:top-4 xl:w-72"
-  >
-    <div class="mb-4">
-      <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
-      <BaseText
-        class="mt-1"
-        color="quaternary"
-        size="xs"
-        text="Plan ring coverage. Scheduled bouts may still be moved between rings."
-      />
-    </div>
-
-    <div class="space-y-3">
-      <BracketDirectorAssignmentCard v-for="station in stations" :key="station.RingId" :station="station" />
-      <BracketDirectorAssignmentCard
-        v-if="showAddCard"
-        variant="add"
-        @action:add="$emit('request:add-planned-director')"
-      />
-    </div>
-  </aside>
-</template>
-
-<script>
-import BaseText from '../../../../Atoms/Text/BaseText.vue';
-import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
-
-export default {
-  name: 'BracketDirectorAssignmentPanel',
-  components: { BaseText, BracketDirectorAssignmentCard },
-  emits: ['request:add-planned-director'],
-  props: {
-    stations: {
-      type: Array,
-      default: () => []
-    },
-    showAddCard: {
-      type: Boolean,
-      default: true
-    }
-  }
-};
-</script>
+<template>
+  <aside
+    data-testid="bracket-director-assignment-panel"
+    class="w-full rounded-xl border border-dropdownSelect bg-bannerBackground p-4 shadow-lg xl:sticky xl:top-4 xl:w-72"
+  >
+    <div class="mb-4 flex items-start justify-between gap-3">
+      <div>
+        <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
+        <BaseText
+          class="mt-1"
+          color="quaternary"
+          size="xs"
+          text="Plan ring coverage. Scheduled bouts may still be moved between rings."
+        />
+      </div>
+      <button
+        v-if="canManageDirectors"
+        type="button"
+        data-testid="manage-bracket-directors"
+        class="rounded border border-dropdownSelect bg-white px-2 py-1 text-xs text-primaryHighlight hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+        @click="$emit('request:manage-planned-directors')"
+      >
+        Manage
+      </button>
+    </div>
+
+    <div class="space-y-3">
+      <BracketDirectorAssignmentCard
+        v-for="station in stations"
+        :key="station.RingId"
+        :station="station"
+        @action:remove="$emit('request:remove-planned-director', $event)"
+      />
+      <BracketDirectorAssignmentCard
+        v-if="showAddCard"
+        variant="add"
+        @action:add="$emit('request:add-planned-director')"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+
+export default {
+  name: 'BracketDirectorAssignmentPanel',
+  components: { BaseText, BracketDirectorAssignmentCard },
+  emits: ['request:add-planned-director', 'request:remove-planned-director', 'request:manage-planned-directors'],
+  props: {
+    canManageDirectors: { type: Boolean, default: false },
+    stations: {
+      type: Array,
+      default: () => []
+    },
+    showAddCard: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/Tableau/components/TableauSvgOverlay.test.js

@@ -1,21 +1,21 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import TableauSvgOverlay from './TableauSvgOverlay.vue';
-
-describe('TableauSvgOverlay', () => {
-  it('uses the standard connector thickness for neutral and assigned paths', () => {
-    const wrapper = shallowMount(TableauSvgOverlay, {
-      props: {
-        size: { width: 200, height: 100 },
-        paths: [
-          { key: 'neutral', path: 'M 0 0 L 10 0', stroke: null },
-          { key: 'assigned', path: 'M 0 10 L 10 10', stroke: '#2563eb' }
-        ]
-      }
-    });
-    const paths = wrapper.findAll('path');
-
-    expect(paths.map(path => path.attributes('stroke-width'))).toEqual(['1.5', '1.5']);
-    expect(paths.map(path => path.attributes('stroke'))).toEqual(['currentColor', '#2563eb']);
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import TableauSvgOverlay from './TableauSvgOverlay.vue';
+
+describe('TableauSvgOverlay', () => {
+  it('uses the standard connector thickness for neutral and assigned paths', () => {
+    const wrapper = shallowMount(TableauSvgOverlay, {
+      props: {
+        size: { width: 200, height: 100 },
+        paths: [
+          { key: 'neutral', path: 'M 0 0 L 10 0', stroke: null },
+          { key: 'assigned', path: 'M 0 10 L 10 10', stroke: '#2563eb' }
+        ]
+      }
+    });
+    const paths = wrapper.findAll('path');
+
+    expect(paths.map(path => path.attributes('stroke-width'))).toEqual(['1.5', '1.5']);
+    expect(paths.map(path => path.attributes('stroke'))).toEqual(['currentColor', '#2563eb']);
+  });
+});

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

@@ -1,39 +1,39 @@
-<template>
-  <svg
-    class="pointer-events-none absolute inset-0 z-0 text-dropdownSelect"
-    :width="size.width"
-    :height="size.height"
-    :viewBox="`0 0 ${size.width} ${size.height}`"
-    shape-rendering="crispEdges"
-    overflow="visible"
-    aria-hidden="true"
-  >
-    <path
-      v-for="connector in paths"
-      :key="connector.key"
-      :d="connector.path"
-      :data-segment-role="connector.segmentRole"
-      fill="none"
-      :stroke="connector.stroke || 'currentColor'"
-      stroke-width="1.5"
-      stroke-linecap="square"
-      stroke-linejoin="miter"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'TableauSvgOverlay',
-  props: {
-    size: {
-      type: Object,
-      required: true
-    },
-    paths: {
-      type: Array,
-      required: true
-    }
-  }
-};
-</script>
+<template>
+  <svg
+    class="pointer-events-none absolute inset-0 z-0 text-dropdownSelect"
+    :width="size.width"
+    :height="size.height"
+    :viewBox="`0 0 ${size.width} ${size.height}`"
+    shape-rendering="crispEdges"
+    overflow="visible"
+    aria-hidden="true"
+  >
+    <path
+      v-for="connector in paths"
+      :key="connector.key"
+      :d="connector.path"
+      :data-segment-role="connector.segmentRole"
+      fill="none"
+      :stroke="connector.stroke || 'currentColor'"
+      stroke-width="1.5"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TableauSvgOverlay',
+  props: {
+    size: {
+      type: Object,
+      required: true
+    },
+    paths: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>