@dcrackel/hematournamentui 1.0.714 → 1.0.715

package/dist/hematournamentui-tailwind.css

@@ -681,6 +681,9 @@
   .min-h-5 {
     min-height: calc(var(--spacing) * 5);
   }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -699,6 +702,9 @@
   .min-h-\[320px\] {
     min-height: 320px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -894,6 +900,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-auto {
+    flex: auto;
+  }
   .flex-none {
     flex: none;
   }
@@ -2641,19 +2650,14 @@
       width: calc(var(--spacing) * 12);
     }
   }
-  .xl\:sticky {
-    @media (width >= 80rem) {
-      position: sticky;
-    }
-  }
-  .xl\:top-4 {
+  .xl\:order-last {
     @media (width >= 80rem) {
-      top: calc(var(--spacing) * 4);
+      order: 9999;
     }
   }
-  .xl\:order-last {
+  .xl\:min-h-\[calc\(100dvh-2rem\)\] {
     @media (width >= 80rem) {
-      order: 9999;
+      min-height: calc(100dvh - 2rem);
     }
   }
   .xl\:w-72 {
@@ -2666,6 +2670,23 @@
       flex-direction: row;
     }
   }
+  .xl\:border-b-0 {
+    @media (width >= 80rem) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
+  .xl\:border-l {
+    @media (width >= 80rem) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
+  .xl\:pl-4 {
+    @media (width >= 80rem) {
+      padding-left: calc(var(--spacing) * 4);
+    }
+  }
 }
 @font-face {
   font-family: 'Inter';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.714",
+  "version": "1.0.715",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

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

@@ -41,11 +41,27 @@ describe('BracketDirectorAssignmentPanel', () => {
     ).toEqual([stations[1]]);
   });
 
-  it('opens director management', async () => {
+  it.each([
+    ['Manage directors', 'request:manage-planned-directors'],
+    ['Redistribute scheduled bouts', 'request:redistribute-scheduled-bouts'],
+    ['Refresh assignments', 'request:refresh-assignments']
+  ])('emits %s intent without changing the station list', async (label, event) => {
     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([[]]);
+    const button = wrapper.get('button[aria-label="' + label + '"]');
+    expect(button.attributes('title')).toBe(label);
+    await button.trigger('click');
+
+    expect(wrapper.emitted(event)).toEqual([[]]);
+    expect(Object.keys(wrapper.emitted()).filter(name => name.startsWith('request:'))).toEqual([event]);
+    expect(wrapper.props('stations')).toEqual(stations);
+    wrapper.unmount();
+  });
+
+  it('hides the toolbar when management is unavailable', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
+    expect(wrapper.find('[role="group"]').exists()).toBe(false);
+    wrapper.unmount();
   });
 });

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

@@ -1,29 +1,33 @@
 <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"
+    aria-label="Director assignments"
+    class="w-full border-b border-dropdownSelect py-4 xl:w-72 xl:border-b-0 xl:border-l xl:pl-4"
   >
-    <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."
-        />
+    <header class="mb-4 space-y-3 border-b border-dropdownSelect pb-4">
+      <h2 class="text-md font-bold text-primaryHighlight">Director Assignments</h2>
+      <div v-if="canManageDirectors" class="flex flex-wrap gap-1" role="group" aria-label="Director assignment actions">
+        <button
+          v-for="action in directorActions"
+          :key="action.event"
+          type="button"
+          :data-testid="action.testId"
+          :aria-label="action.description"
+          :title="action.description"
+          class="flex min-h-9 flex-auto items-center justify-center gap-1 whitespace-nowrap rounded border border-dropdownSelect bg-white px-1 py-2 text-xs text-primaryHighlight transition hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+          @click="$emit(action.event)"
+        >
+          <BaseIcon :iconName="action.icon" iconStyle="fa" color="primaryHighlight" size="xs" aria-hidden="true" />
+          <span>{{ action.label }}</span>
+        </button>
       </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>
 
+      <BaseText
+        color="quaternary"
+        size="xs"
+        text="Plan ring coverage. Scheduled bouts may still be moved between rings."
+      />
+    </header>
     <div class="space-y-3">
       <BracketDirectorAssignmentCard
         v-for="station in stations"
@@ -42,12 +46,45 @@
 
 <script>
 import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../../Atoms/Icon/BaseIcon.vue';
 import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
 
+const directorActions = [
+  {
+    label: 'Manage',
+    description: 'Manage directors',
+    icon: 'fa-users',
+    event: 'request:manage-planned-directors',
+    testId: 'manage-bracket-directors'
+  },
+  {
+    label: 'Redistribute',
+    description: 'Redistribute scheduled bouts',
+    icon: 'fa-random',
+    event: 'request:redistribute-scheduled-bouts',
+    testId: 'redistribute-scheduled-bouts'
+  },
+  {
+    label: 'Refresh',
+    description: 'Refresh assignments',
+    icon: 'fa-refresh',
+    event: 'request:refresh-assignments',
+    testId: 'refresh-bracket-assignments'
+  }
+];
 export default {
   name: 'BracketDirectorAssignmentPanel',
-  components: { BaseText, BracketDirectorAssignmentCard },
-  emits: ['request:add-planned-director', 'request:remove-planned-director', 'request:manage-planned-directors'],
+  components: { BaseIcon, BaseText, BracketDirectorAssignmentCard },
+  emits: [
+    'request:add-planned-director',
+    'request:remove-planned-director',
+    'request:manage-planned-directors',
+    'request:redistribute-scheduled-bouts',
+    'request:refresh-assignments'
+  ],
+  data() {
+    return { directorActions };
+  },
   props: {
     canManageDirectors: { type: Boolean, default: false },
     stations: {

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

@@ -135,6 +135,11 @@ const renderInteractiveBracket = args => ({
       requestBoutDirector,
       assignPlannedDirector,
       handleAddPlannedDirector,
+      redistributeAssignments,
+      refreshAssignments() {
+        storyStations.value = cloneStations(args.plannedDirectingStations);
+        applyProvidedAssignments(args.plannedBoutAssignments);
+      },
       handleRemovePlannedDirector(station) {
         const remainingStations = storyStations.value.filter(item => String(item.RingId) !== String(station?.RingId));
         if (remainingStations.length === storyStations.value.length) return;
@@ -174,6 +179,8 @@ const renderInteractiveBracket = args => ({
       :plannedBoutAssignments="storyAssignments"
       :showAddPlannedDirectorCard="args.showAddPlannedDirectorCard && canAddDirector"
       @request:bout-director="requestBoutDirector"
+      @request:redistribute-scheduled-bouts="redistributeAssignments"
+      @request:refresh-assignments="refreshAssignments"
       @close:directing-bout="handleCloseDirectingBout"
       @request:add-planned-director="handleAddPlannedDirector"
       @request:remove-planned-director="handleRemovePlannedDirector"
@@ -208,6 +215,12 @@ export default {
     showBoutDirectorAssignment: true
   },
   argTypes: {
+    'request:redistribute-scheduled-bouts': {
+      description: 'Parent intent to redistribute scheduled coverage without changing active or completed bouts.'
+    },
+    'request:refresh-assignments': {
+      description: 'Parent intent to reload stations and assignments. This story reloads the supplied args fixtures.'
+    },
     availableDirectors: {
       control: 'object',
       description: 'Eligible staff, including DE-only directors, supplied by the parent.'

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

@@ -216,3 +216,29 @@ describe('Bracket assignment defaults', () => {
     wrapper.unmount();
   });
 });
+
+describe('Bracket assignment toolbar', () => {
+  it.each(['request:redistribute-scheduled-bouts', 'request:refresh-assignments'])(
+    'forwards %s without changing bouts or planned coverage',
+    async event => {
+      const bouts = [createBout(), createBout({ BoutId: 43, Status: 'Active', RefereeId: 99 })];
+      const stations = [{ RingId: 1, Director: { PersonId: 99, DisplayName: 'Dave Smith' } }];
+      const assignments = [{ DEBoutId: 1, RingId: 1 }];
+      const wrapper = mountBracket(bouts, {
+        availableDirectors: [stations[0].Director],
+        rings: [{ RingId: 1 }],
+        plannedDirectingStations: stations,
+        plannedBoutAssignments: assignments
+      });
+
+      wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit(event);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted()).toEqual({ [event]: [[]] });
+      expect(wrapper.vm.boutsData).toEqual(bouts);
+      expect(wrapper.props('plannedDirectingStations')).toEqual(stations);
+      expect(wrapper.props('plannedBoutAssignments')).toEqual(assignments);
+      wrapper.unmount();
+    }
+  );
+});

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

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="flex min-h-full flex-col xl:min-h-[calc(100dvh-2rem)]">
     <EditEventsTopMenu :currentTab="'Bracket'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
     <ToggleHeader
       :currentSelection="viewName"
@@ -17,7 +17,7 @@
       :statusText="connectedToServer ? 'Connected' : 'Disconnected'"
     />
 
-    <div class="flex flex-col gap-4 xl:flex-row">
+    <div class="flex flex-1 flex-col gap-4 xl:flex-row">
       <div class="min-w-0 flex-1">
         <Tableau
           :bouts="sortedBouts"
@@ -42,6 +42,8 @@
         :showAddCard="showAddPlannedDirectorCard"
         :canManageDirectors="canManagePlannedDirectors"
         @request:manage-planned-directors="handleManagePlannedDirectors"
+        @request:redistribute-scheduled-bouts="$emit('request:redistribute-scheduled-bouts')"
+        @request:refresh-assignments="$emit('request:refresh-assignments')"
         @request:add-planned-director="handleAddPlannedDirector"
         @request:remove-planned-director="$emit('request:remove-planned-director', $event)"
       />
@@ -136,6 +138,8 @@ export default {
     'penalty:update',
     'request:add-planned-director',
     'request:remove-planned-director',
+    'request:redistribute-scheduled-bouts',
+    'request:refresh-assignments',
     'update:planned-directing-stations',
     'request:bout-active',
     'request:bout-director',