@dcrackel/hematournamentui 1.0.713 → 1.0.715

package/src/stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.vue

@@ -0,0 +1,165 @@
+<template>
+  <Teleport to="body">
+    <dialog
+      ref="dialog"
+      aria-label="DE directors"
+      data-testid="bracket-directors-modal"
+      class="fixed inset-0 m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-xl overflow-y-auto rounded-xl border border-dropdownSelect bg-neutral p-0 text-primaryHighlight shadow-xl backdrop:bg-secondary/60"
+      @cancel.prevent="close"
+      @click="close"
+    >
+      <form class="p-5" @submit.prevent="submit" @click.stop>
+        <div class="mb-4 flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-xl font-bold">Directors</h2>
+            <p class="mt-1 text-sm text-quaternary">Select DE directors and choose their rings.</p>
+          </div>
+          <button
+            type="button"
+            aria-label="Close director assignments"
+            class="flex h-8 w-8 flex-none items-center justify-center rounded text-xl text-quaternary hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+            @click="close"
+          >
+            &times;
+          </button>
+        </div>
+        <p v-if="!draft.length" class="rounded border border-dropdownSelect p-4 text-sm text-quaternary">
+          No directors available.
+        </p>
+        <div class="space-y-3">
+          <div
+            v-for="row in draft"
+            :key="row.Director.PersonId"
+            class="flex items-center gap-3 rounded-lg border border-dropdownSelect px-3 py-3"
+          >
+            <label class="flex min-w-0 flex-1 cursor-pointer items-center gap-3">
+              <input
+                v-model="row.Selected"
+                type="checkbox"
+                :data-director-id="row.Director.PersonId"
+                :aria-label="'Include ' + row.Director.DisplayName + ' in DE'"
+                class="h-5 w-5 flex-none accent-bright"
+              />
+              <span
+                v-if="row.Color"
+                class="h-2.5 w-2.5 flex-none rounded-full"
+                :style="{ backgroundColor: row.Color }"
+                aria-hidden="true"
+              ></span>
+              <span class="min-w-0 wrap-break-word text-sm font-semibold">{{ row.Director.DisplayName }}</span>
+            </label>
+            <select
+              v-model="row.RingId"
+              :disabled="!row.Selected"
+              :data-ring-director-id="row.Director.PersonId"
+              :aria-label="'Ring for ' + row.Director.DisplayName"
+              class="w-28 flex-none rounded border border-dropdownSelect bg-white px-2 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright disabled:opacity-50"
+            >
+              <option value="">Choose ring</option>
+              <option v-for="ring in ringOptions" :key="ring.RingId" :value="ring.RingId" :disabled="ring.Disabled">
+                {{ ring.RingName }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <p v-if="error" role="alert" class="mt-3 text-sm text-alarm">{{ error }}</p>
+        <div class="mt-5 flex justify-end gap-2">
+          <button
+            type="button"
+            class="rounded border border-dropdownSelect px-4 py-2 text-sm hover:bg-dropdownSelect focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+            @click="close"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            :disabled="Boolean(error)"
+            class="rounded bg-primary px-4 py-2 text-sm font-semibold text-neutral hover:bg-primaryHighlight focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Save assignments
+          </button>
+        </div>
+      </form>
+    </dialog>
+  </Teleport>
+</template>
+
+<script>
+import {
+  createDirectorDraft,
+  reconcileDirectorDraft,
+  createDirectorStations,
+  getDirectorDraftError,
+  getRingOptions
+} from '../../../Util/bracketDirectors.js';
+
+export default {
+  name: 'BracketDirectorsModal',
+  emits: ['update:show', 'submit:stations'],
+  props: {
+    show: { type: Boolean, default: false },
+    availableDirectors: { type: Array, default: () => [] },
+    rings: { type: Array, default: () => [] },
+    stations: { type: Array, default: () => [] }
+  },
+  data() {
+    return { draft: [] };
+  },
+  computed: {
+    ringOptions() {
+      return getRingOptions(this.rings);
+    },
+    error() {
+      return getDirectorDraftError(this.draft, this.rings);
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(value) {
+        if (value) this.resetDraft();
+        this.$nextTick(this.syncDialog);
+      }
+    },
+    stations: {
+      deep: true,
+      handler() {
+        if (this.show) this.resetDraft();
+      }
+    },
+    availableDirectors: {
+      deep: true,
+      handler() {
+        if (!this.show) return;
+        this.draft = reconcileDirectorDraft(this.availableDirectors, this.stations, this.draft);
+      }
+    }
+  },
+  mounted() {
+    this.syncDialog();
+  },
+  methods: {
+    resetDraft() {
+      this.draft = createDirectorDraft(this.availableDirectors, this.stations);
+    },
+    syncDialog() {
+      const dialog = this.$refs.dialog;
+      if (!dialog) return;
+      if (this.show && !dialog.open) {
+        dialog.showModal();
+        return;
+      }
+      if (!this.show && dialog.open) dialog.close();
+    },
+    close() {
+      this.$emit('update:show', false);
+    },
+    submit() {
+      const stations = createDirectorStations(this.draft, this.rings);
+      if (!stations) return;
+      this.$emit('submit:stations', stations);
+      this.close();
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.stories.js

@@ -23,7 +23,16 @@ export default {
   }
 };
 
-export const Assigned = {};
+export const Assigned = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The remove control emits action:remove with a detached station payload. The parent updates planned coverage.'
+      }
+    }
+  }
+};
 
 export const AddDirector = {
   args: {

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.test.js

@@ -42,4 +42,35 @@ describe('BracketDirectorAssignmentCard', () => {
     expect(wrapper.emitted('action:add')).toEqual([[]]);
     expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
   });
+
+  it('emits a detached station when removing a director and waits for updated props', async () => {
+    const selectedStation = structuredClone(station);
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station: selectedStation } });
+    const removeButton = wrapper.get('[data-testid="remove-bracket-director"]');
+    expect(removeButton.attributes('aria-label')).toBe('Remove Sam Rivera from Ring 3');
+    await removeButton.trigger('click');
+    const payload = wrapper.emitted('action:remove')[0][0];
+    expect(payload).toEqual(selectedStation);
+    expect(payload).not.toBe(selectedStation);
+    payload.Director.DisplayName = 'Changed';
+    expect(selectedStation.Director.DisplayName).toBe('Sam Rivera');
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').exists()).toBe(true);
+    await wrapper.setProps({ station: null });
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').exists()).toBe(false);
+  });
+
+  it('has no remove control on the add card or an empty card', () => {
+    const addCard = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
+    const emptyCard = shallowMount(BracketDirectorAssignmentCard);
+    expect(addCard.find('[data-testid="remove-bracket-director"]').exists()).toBe(false);
+    expect(emptyCard.find('[data-testid="remove-bracket-director"]').exists()).toBe(false);
+  });
+
+  it('displays the ring as text and reflects parent updates', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
+    expect(wrapper.find('select').exists()).toBe(false);
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
+    await wrapper.setProps({ station: { ...station, RingId: 1, RingName: 'Ring 1' } });
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 1');
+  });
 });

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

@@ -45,6 +45,16 @@
       <BaseText :text="ringLabel" color="quaternary" size="xs" />
       <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
     </div>
+    <button
+      type="button"
+      data-testid="remove-bracket-director"
+      :aria-label="removeLabel"
+      :title="removeLabel"
+      class="flex h-8 w-8 flex-none items-center justify-center rounded text-quaternary transition hover:bg-dropdownSelect hover:text-alarm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright"
+      @click.stop="removeDirector"
+    >
+      <BaseIcon iconName="fa-xmark" color="none" size="sm" />
+    </button>
   </article>
 </template>
 
@@ -63,7 +73,7 @@ const getInitials = displayName =>
 export default {
   name: 'BracketDirectorAssignmentCard',
   components: { BaseIcon, BaseText },
-  emits: ['action:add'],
+  emits: ['action:add', 'action:remove'],
   props: {
     station: {
       type: Object,
@@ -79,7 +89,16 @@ export default {
       default: 'Click here to add director'
     }
   },
+  methods: {
+    removeDirector() {
+      if (!this.station) return;
+      this.$emit('action:remove', JSON.parse(JSON.stringify(this.station)));
+    }
+  },
   computed: {
+    removeLabel() {
+      return 'Remove ' + this.directorName + ' from ' + this.ringLabel;
+    },
     assignmentLabel() {
       return `${this.ringLabel}, Director ${this.directorName}`;
     },

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

@@ -26,4 +26,42 @@ describe('BracketDirectorAssignmentPanel', () => {
 
     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.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 }
+    });
+    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,20 +1,40 @@
 <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">
-      <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
+    <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>
+
       <BaseText
-        class="mt-1"
         color="quaternary"
         size="xs"
         text="Plan ring coverage. Scheduled bouts may still be moved between rings."
       />
-    </div>
-
+    </header>
     <div class="space-y-3">
-      <BracketDirectorAssignmentCard v-for="station in stations" :key="station.RingId" :station="station" />
+      <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"
@@ -26,13 +46,47 @@
 
 <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'],
+  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: {
       type: Array,
       default: () => []

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

@@ -9,7 +9,12 @@ import {
   getStoryDirectorId,
   replaceStoryBout
 } from './BracketStoryHarness.js';
-import { plannedDirectingStations, plannedSuggestionViewerId } from './BracketPlannedSuggestions.js';
+import {
+  availableDirectors,
+  availableRings,
+  plannedDirectingStations,
+  plannedSuggestionViewerId
+} from './BracketPlannedSuggestions.js';
 //import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 import getDEWithBouts6Fencers from '../../../../mocks/getDeBouts-6fencers.js';
 import getDEWithBouts12Fencers from '../../../../mocks/getDeBouts-12fencers.js';
@@ -29,8 +34,9 @@ const renderInteractiveBracket = args => ({
     const storyStations = ref(cloneStations(args.plannedDirectingStations));
     const storyAssignments = ref([]);
     const canAddDirector = computed(() =>
-      plannedDirectingStations.some(
-        station => !storyStations.value.some(item => String(item.RingId) === String(station.RingId))
+      (args.availableDirectors || availableDirectors).some(
+        director =>
+          !storyStations.value.some(station => String(station.Director?.PersonId) === String(director.PersonId))
       )
     );
     const redistributeAssignments = () => {
@@ -93,7 +99,11 @@ const renderInteractiveBracket = args => ({
     };
 
     const getViewerStation = () =>
-      storyStations.value.find(station => String(station.Director?.PersonId) === String(args.viewerPersonId));
+      [
+        ...storyStations.value,
+        ...plannedDirectingStations,
+        ...(args.availableDirectors || []).map(Director => ({ Director }))
+      ].find(station => String(station.Director?.PersonId) === String(args.viewerPersonId));
 
     const handleAddPlannedDirector = () => {
       const assignedRingIds = new Set(storyStations.value.map(station => String(station.RingId)));
@@ -125,6 +135,21 @@ 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;
+        storyStations.value = remainingStations;
+        redistributeAssignments();
+      },
+      handlePlannedDirectorsUpdate(stations) {
+        storyStations.value = cloneStations(stations);
+        redistributeAssignments();
+      },
       handleCloseDirectingBout,
       handleDirectingBout,
       persistStoryBout
@@ -154,8 +179,12 @@ 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"
+      @update:planned-directing-stations="handlePlannedDirectorsUpdate"
       @update:directing-bout="handleDirectingBout"
       @request:bout-active="handleDirectingBout"
       @update:bout="persistStoryBout"
@@ -171,6 +200,8 @@ export default {
   tags: ['Bracket'],
   render: renderInteractiveBracket,
   args: {
+    availableDirectors,
+    rings: availableRings,
     bouts: getDEWithBouts.pools[0].Bouts,
     eventRules: getDEWithBouts.eventRules,
     hostingClubColors: getDEWithBouts.hostingClubColors,
@@ -184,6 +215,17 @@ 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.'
+    },
+    rings: { control: 'object', description: 'Available rings supplied by the parent.' },
     showBoutDirectorAssignment: {
       control: 'boolean',
       description: 'Include Assign director in the pairing hover menu. The parent supplies staff selection and saving.'