@dcrackel/hematournamentui 1.0.712 → 1.0.714

package/src/stories/Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue

@@ -1,35 +1,35 @@
-<template>
-  <span
-    v-if="!hasHemaRatingsId"
-    role="img"
-    aria-label="Missing HEMA Ratings ID"
-    title="Missing HEMA Ratings ID"
-    data-testid="missing-hema-ratings-id"
-    class="inline-flex shrink-0 items-center justify-center text-alarm"
-  >
-    <svg class="h-6 w-6 md:h-7 md:w-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
-      <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2" />
-      <text x="16" y="20" text-anchor="middle" fill="currentColor" class="font-bold" font-size="11">HR</text>
-      <path d="M7 25 25 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-    </svg>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'MissingHemaRatingsId',
-  props: {
-    person: {
-      type: Object,
-      default: null
-    }
-  },
-  computed: {
-    hasHemaRatingsId() {
-      const id = this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId;
-      const numericId = Number(id);
-      return Number.isInteger(numericId) && numericId > 0;
-    }
-  }
-};
-</script>
+<template>
+  <span
+    v-if="!hasHemaRatingsId"
+    role="img"
+    aria-label="Missing HEMA Ratings ID"
+    title="Missing HEMA Ratings ID"
+    data-testid="missing-hema-ratings-id"
+    class="inline-flex shrink-0 items-center justify-center text-alarm"
+  >
+    <svg class="h-6 w-6 md:h-7 md:w-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2" />
+      <text x="16" y="20" text-anchor="middle" fill="currentColor" class="font-bold" font-size="11">HR</text>
+      <path d="M7 25 25 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'MissingHemaRatingsId',
+  props: {
+    person: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    hasHemaRatingsId() {
+      const id = this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId;
+      const numericId = Number(id);
+      return Number.isInteger(numericId) && numericId > 0;
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Indicators/RegistrationStatus/RegistrationStatus.vue

@@ -1,30 +1,30 @@
-<template>
-  <div v-if="statusLabel" class="inline-flex items-center gap-2 whitespace-nowrap">
-    <span class="sr-only">Registration status:</span>
-    <BaseIcon icon-name="fa-info-circle" size="xs" color="quaternary" aria-hidden="true" />
-    <BaseText :text="statusLabel" size="xs" color="quaternary" />
-  </div>
-</template>
-
-<script>
-import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-
-import { getRegistrationStatusLabel } from '../../../Util/registrationStatus.js';
-
-export default {
-  name: 'RegistrationStatus',
-  components: { BaseIcon, BaseText },
-  props: {
-    status: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    statusLabel() {
-      return getRegistrationStatusLabel(this.status);
-    }
-  }
-};
-</script>
+<template>
+  <div v-if="statusLabel" class="inline-flex items-center gap-2 whitespace-nowrap">
+    <span class="sr-only">Registration status:</span>
+    <BaseIcon icon-name="fa-info-circle" size="xs" color="quaternary" aria-hidden="true" />
+    <BaseText :text="statusLabel" size="xs" color="quaternary" />
+  </div>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+import { getRegistrationStatusLabel } from '../../../Util/registrationStatus.js';
+
+export default {
+  name: 'RegistrationStatus',
+  components: { BaseIcon, BaseText },
+  props: {
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    statusLabel() {
+      return getRegistrationStatusLabel(this.status);
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Menus/HoverActions/HoverActions.test.js

@@ -0,0 +1,138 @@
+import { mount, DOMWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import HoverActions from './HoverActions.vue';
+
+const wrappers = [];
+const actions = [
+  { id: 'open', label: 'Open bout' },
+  { id: 'assign-director', label: 'Assign director...', description: 'Dave Smith' }
+];
+const mountMenu = (props = {}) => {
+  const wrapper = mount(HoverActions, {
+    attachTo: document.body,
+    props: { actions, ...props },
+    slots: { default: '<button type="button" data-testid="pairing">Pairing</button>' }
+  });
+  wrappers.push(wrapper);
+  return wrapper;
+};
+const getPanel = () => new DOMWrapper(document.querySelector('[data-testid="bout-actions-menu"]'));
+const hoverMenu = async wrapper => {
+  await wrapper.trigger('mouseenter');
+  vi.advanceTimersByTime(200);
+  await nextTick();
+  await nextTick();
+};
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => {
+  wrappers.splice(0).forEach(wrapper => wrapper.unmount());
+  vi.useRealTimers();
+});
+
+describe('HoverActions', () => {
+  it('waits briefly before opening and cancels a passing hover', async () => {
+    const wrapper = mountMenu();
+    await wrapper.trigger('mouseenter');
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    await wrapper.trigger('mouseleave');
+    vi.advanceTimersByTime(300);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    await hoverMenu(wrapper);
+    expect(getPanel().text()).toContain('Assign director...');
+  });
+
+  it('keeps the menu open while crossing from the pairing into it', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await wrapper.trigger('mouseleave');
+    vi.advanceTimersByTime(70);
+    await getPanel().trigger('mouseenter');
+    vi.advanceTimersByTime(250);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).not.toBeNull();
+    await getPanel().trigger('mouseleave');
+    vi.advanceTimersByTime(150);
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('supports focus, arrow navigation, and Escape without reopening', async () => {
+    const wrapper = mountMenu();
+    wrapper.get('[data-testid="pairing"]').element.focus();
+    await nextTick();
+    await wrapper.get('[data-testid="pairing"]').trigger('keydown', { key: 'ArrowDown' });
+    await nextTick();
+    expect(document.activeElement.dataset.action).toBe('open');
+    await getPanel().trigger('keydown', { key: 'ArrowDown' });
+    expect(document.activeElement.dataset.action).toBe('assign-director');
+    await getPanel().trigger('keydown', { key: 'Escape' });
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    expect(document.activeElement).toBe(wrapper.get('[data-testid="pairing"]').element);
+  });
+
+  it('emits only the chosen action and dismisses the menu', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await getPanel().get('[data-action="assign-director"]').trigger('click');
+    expect(wrapper.emitted('action')).toEqual([['assign-director']]);
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('closes on a direct pairing click, outside click, or viewport scroll', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await wrapper.get('[data-testid="pairing"]').trigger('click');
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    expect(wrapper.emitted('action')).toBeUndefined();
+    await hoverMenu(wrapper);
+    document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+    await hoverMenu(wrapper);
+    window.dispatchEvent(new Event('scroll'));
+    await nextTick();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('positions the panel inside the viewport and opens above a bottom pairing', async () => {
+    const wrapper = mountMenu();
+    wrapper.element.getBoundingClientRect = () => ({
+      left: window.innerWidth - 10,
+      top: window.innerHeight - 40,
+      bottom: window.innerHeight
+    });
+    await hoverMenu(wrapper);
+    getPanel().element.getBoundingClientRect = () => ({ width: 144, height: 80 });
+    wrapper.vm.positionPanel();
+    await nextTick();
+    expect(Number.parseFloat(getPanel().element.style.left)).toBe(window.innerWidth - 148);
+    expect(Number.parseFloat(getPanel().element.style.top)).toBe(window.innerHeight - 124);
+  });
+
+  it('allows only one open dropdown and cleans up on unmount', async () => {
+    const first = mountMenu();
+    const second = mountMenu();
+    await hoverMenu(first);
+    await hoverMenu(second);
+    expect(first.vm.isOpen).toBe(false);
+    expect(document.querySelectorAll('[data-testid="bout-actions-menu"]')).toHaveLength(1);
+    second.unmount();
+    wrappers.pop();
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+
+  it('removes unavailable actions as props change', async () => {
+    const wrapper = mountMenu();
+    await hoverMenu(wrapper);
+    await wrapper.setProps({ actions: [actions[0]] });
+    expect(getPanel().find('[data-action="assign-director"]').exists()).toBe(false);
+    await wrapper.setProps({ actions: [] });
+    expect(document.querySelector('[data-testid="bout-actions-menu"]')).toBeNull();
+  });
+});

package/src/stories/Molecules/Menus/HoverActions/HoverActions.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    ref="trigger"
+    data-testid="bout-actions-trigger"
+    :tabindex="focusable && actions.length ? 0 : undefined"
+    :role="focusable && actions.length ? 'button' : undefined"
+    :aria-label="focusable ? label : undefined"
+    :aria-haspopup="focusable && actions.length ? 'menu' : undefined"
+    :aria-expanded="focusable && actions.length ? isOpen : undefined"
+    @mouseenter="queueOpen"
+    @mouseleave="queueClose"
+    @focusin="handleTriggerFocus"
+    @focusout="handleFocusOut"
+    @keydown="handleTriggerKeydown"
+    @click="closeMenu()"
+  >
+    <slot :isOpen="isOpen" />
+    <Teleport to="body">
+      <div
+        v-if="isOpen && actions.length"
+        ref="panel"
+        role="menu"
+        :aria-label="label"
+        data-testid="bout-actions-menu"
+        class="fixed z-[100] min-w-36 rounded-md border border-dropdownSelect bg-white p-1 text-primaryHighlight shadow-lg"
+        :style="panelStyle"
+        @mouseenter="keepOpen"
+        @mouseleave="queueClose"
+        @focusout="handleFocusOut"
+        @keydown="handlePanelKeydown"
+        @click.stop
+      >
+        <template v-for="action in actions" :key="action.id">
+          <div
+            v-if="action.description"
+            role="presentation"
+            data-testid="action-description"
+            class="cursor-default px-3 pt-2 text-left text-xs font-semibold text-bright"
+            :style="{ color: action.descriptionColor || undefined }"
+          >
+            {{ action.description }}
+          </div>
+          <button
+            type="button"
+            role="menuitem"
+            :data-action="action.id"
+            class="block w-full rounded px-3 py-2 text-left text-xs hover:bg-dropdownSelect focus-visible:bg-dropdownSelect focus-visible:outline-none disabled:opacity-50"
+            :disabled="action.disabled"
+            @click.stop="selectAction(action.id)"
+          >
+            {{ action.label }}
+          </button>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+let activeMenu = null;
+
+export default {
+  name: 'HoverActions',
+  emits: ['action'],
+  props: {
+    actions: { type: Array, default: () => [] },
+    label: { type: String, default: 'Bout actions' },
+    focusable: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      isOpen: false,
+      isHovered: false,
+      openTimer: null,
+      closeTimer: null,
+      ignoreFocus: false,
+      triggerFocus: null,
+      panelStyle: { top: '0px', left: '0px' }
+    };
+  },
+  watch: {
+    actions: {
+      deep: true,
+      handler() {
+        if (!this.actions.length) this.closeMenu();
+        if (this.isOpen) this.$nextTick(this.positionPanel);
+      }
+    }
+  },
+  beforeUnmount() {
+    this.closeMenu();
+  },
+  methods: {
+    clearTimers() {
+      clearTimeout(this.openTimer);
+      clearTimeout(this.closeTimer);
+      this.openTimer = null;
+      this.closeTimer = null;
+    },
+    queueOpen() {
+      this.keepOpen();
+      if (this.isOpen || !this.actions.length) return;
+      this.openTimer = setTimeout(this.openMenu, 200);
+    },
+    keepOpen() {
+      this.isHovered = true;
+      this.clearTimers();
+    },
+    queueClose() {
+      this.isHovered = false;
+      this.clearTimers();
+      this.closeTimer = setTimeout(this.closeWhenOutside, 150);
+    },
+    containsElement(element) {
+      return Boolean(element && (this.$refs.trigger?.contains(element) || this.$refs.panel?.contains(element)));
+    },
+    closeWhenOutside() {
+      if (this.isHovered || this.containsElement(document.activeElement)) return;
+      this.closeMenu();
+    },
+    async openMenu() {
+      this.clearTimers();
+      if (this.isOpen || !this.actions.length) return;
+      activeMenu?.closeMenu();
+      activeMenu = this;
+      this.isOpen = true;
+      document.addEventListener('pointerdown', this.handleOutsidePointer);
+      window.addEventListener('scroll', this.handleViewportChange, true);
+      window.addEventListener('resize', this.handleViewportChange);
+      await this.$nextTick();
+      this.positionPanel();
+    },
+    positionPanel() {
+      const trigger = this.$refs.trigger?.getBoundingClientRect();
+      const panel = this.$refs.panel?.getBoundingClientRect();
+      if (!trigger || !panel) return;
+      const left = Math.max(4, Math.min(trigger.left, window.innerWidth - panel.width - 4));
+      const below = trigger.bottom + 4;
+      const top = below + panel.height <= window.innerHeight - 4 ? below : Math.max(4, trigger.top - panel.height - 4);
+      this.panelStyle = { top: top + 'px', left: left + 'px' };
+    },
+    closeMenu(restoreFocus = false) {
+      this.clearTimers();
+      this.isOpen = false;
+      if (activeMenu === this) activeMenu = null;
+      document.removeEventListener('pointerdown', this.handleOutsidePointer);
+      window.removeEventListener('scroll', this.handleViewportChange, true);
+      window.removeEventListener('resize', this.handleViewportChange);
+      if (!restoreFocus) return;
+      this.ignoreFocus = true;
+      const focusTarget =
+        this.triggerFocus || this.$refs.trigger?.querySelector('button:not(:disabled)') || this.$refs.trigger;
+      focusTarget?.focus();
+      this.ignoreFocus = false;
+    },
+    handleViewportChange(event) {
+      if (this.$refs.panel?.contains(event.target)) return;
+      this.closeMenu();
+    },
+    handleOutsidePointer(event) {
+      if (!this.containsElement(event.target)) this.closeMenu();
+    },
+    handleTriggerFocus(event) {
+      if (this.ignoreFocus) return;
+      this.triggerFocus = event.target;
+      this.openMenu();
+    },
+    handleFocusOut(event) {
+      if (!this.containsElement(event.relatedTarget)) this.queueClose();
+    },
+    async focusFirstAction() {
+      await this.openMenu();
+      this.$refs.panel?.querySelector('button:not(:disabled)')?.focus();
+    },
+    handleTriggerKeydown(event) {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeMenu(true);
+        return;
+      }
+      const isWrapperActivation = event.target === this.$refs.trigger && ['Enter', ' '].includes(event.key);
+      if (event.key !== 'ArrowDown' && !isWrapperActivation) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.focusFirstAction();
+    },
+    handlePanelKeydown(event) {
+      const handlers = {
+        Escape: () => this.closeMenu(true),
+        ArrowDown: () => this.moveActionFocus(1),
+        ArrowUp: () => this.moveActionFocus(-1)
+      };
+      const handler = handlers[event.key];
+      if (!handler) return;
+      event.preventDefault();
+      event.stopPropagation();
+      handler();
+    },
+    moveActionFocus(direction) {
+      const buttons = Array.from(this.$refs.panel.querySelectorAll('button:not(:disabled)'));
+      if (!buttons.length) return;
+      const currentIndex = buttons.indexOf(document.activeElement);
+      buttons[(currentIndex + direction + buttons.length) % buttons.length].focus();
+    },
+    selectAction(actionId) {
+      this.closeMenu(true);
+      this.$emit('action', actionId);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,49 @@
+import { ref, watch } from 'vue';
+import BracketDirectorsModal from './BracketDirectorsModal.vue';
+import {
+  availableDirectors,
+  availableRings,
+  plannedDirectingStations
+} from '../../../Templates/EventManagement/Bracket/BracketPlannedSuggestions.js';
+
+export default {
+  title: 'Molecules/Modals/BracketDirectorsModal',
+  component: BracketDirectorsModal,
+  args: { show: true, availableDirectors, rings: availableRings, stations: plannedDirectingStations.slice(0, 2) },
+  argTypes: {
+    show: { control: 'boolean' },
+    availableDirectors: { control: 'object' },
+    rings: { control: 'object' },
+    stations: { control: 'object' }
+  },
+  render: args => ({
+    components: { BracketDirectorsModal },
+    setup() {
+      const show = ref(args.show);
+      const stations = ref(args.stations);
+      watch(
+        () => args.show,
+        value => {
+          show.value = value;
+        }
+      );
+      watch(
+        () => args.stations,
+        value => {
+          stations.value = value;
+        },
+        { deep: true }
+      );
+      function saveStations(value) {
+        stations.value = value;
+      }
+      return { args, show, stations, saveStations };
+    },
+    template:
+      '<div><button type="button" class="rounded bg-primary px-4 py-2 text-white" @click="show = true">Manage directors</button><BracketDirectorsModal v-bind="args" v-model:show="show" :stations="stations" @submit:stations="saveStations" /></div>'
+  })
+};
+export const StaffAndPoolDefaults = {};
+export const NoSelectedDirectors = { args: { stations: [] } };
+export const NoAvailableStaff = { args: { stations: [], availableDirectors: [] } };
+export const NoRings = { args: { rings: [] } };

package/src/stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.test.js

@@ -0,0 +1,129 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { afterEach, describe, expect, it } from 'vitest';
+import BracketDirectorsModal from './BracketDirectorsModal.vue';
+
+const directors = [
+  { PersonId: 1, DisplayName: 'Dave Smith', Color: '#2563eb', DefaultRingId: 1 },
+  { PersonId: 2, DisplayName: 'Terry Jones', Color: '#dc2626' }
+];
+const rings = [
+  { RingId: 1, RingName: 'Ring 1' },
+  { RingId: 2, RingName: 'Ring 2' },
+  { RingId: 3, RingName: 'Ring 3' }
+];
+const station = {
+  RingId: 1,
+  RingName: 'Ring 1',
+  Color: '#2563eb',
+  Director: { PersonId: 1, DisplayName: 'Dave Smith' }
+};
+const wrappers = [];
+const mountModal = async (props = {}) => {
+  const wrapper = mount(BracketDirectorsModal, {
+    attachTo: document.body,
+    global: { stubs: { Teleport: true } },
+    props: {
+      show: true,
+      availableDirectors: structuredClone(directors),
+      rings: structuredClone(rings),
+      stations: [structuredClone(station)],
+      ...props
+    }
+  });
+  wrappers.push(wrapper);
+  await nextTick();
+  return wrapper;
+};
+const dialog = () => document.querySelector('[data-testid="bracket-directors-modal"]');
+const checkbox = (wrapper, id) => wrapper.get('[data-director-id="' + id + '"]');
+const ringSelect = (wrapper, id) => wrapper.get('[data-ring-director-id="' + id + '"]');
+afterEach(() => wrappers.splice(0).forEach(wrapper => wrapper.unmount()));
+
+describe('BracketDirectorsModal', () => {
+  it('starts from supplied DE assignments and adds a director who has no pool assignment', async () => {
+    const wrapper = await mountModal();
+    expect(dialog().open).toBe(true);
+    expect(checkbox(wrapper, 1).element.checked).toBe(true);
+    expect(checkbox(wrapper, 2).element.checked).toBe(false);
+    const before = JSON.parse(JSON.stringify(wrapper.props()));
+    await checkbox(wrapper, 2).setValue(true);
+    await ringSelect(wrapper, 2).setValue('2');
+    await wrapper.get('form').trigger('submit');
+    const payload = wrapper.emitted('submit:stations')[0][0];
+    expect(payload.map(item => [item.Director.PersonId, item.RingId, item.Color])).toEqual([
+      [1, 1, '#2563eb'],
+      [2, 2, '#dc2626']
+    ]);
+    expect(wrapper.props()).toEqual(before);
+    payload[0].Director.DisplayName = 'Changed';
+    expect(wrapper.props('stations')[0].Director.DisplayName).toBe('Dave Smith');
+    expect(wrapper.emitted('update:show')).toEqual([[false]]);
+  });
+
+  it('removes directors by unchecking them and can save an empty roster', async () => {
+    const wrapper = await mountModal();
+    await checkbox(wrapper, 1).setValue(false);
+    await wrapper.get('form').trigger('submit');
+    expect(wrapper.emitted('submit:stations')).toEqual([[[]]]);
+    expect(wrapper.props('stations')).toHaveLength(1);
+  });
+
+  it('allows a draft ring swap and requires unique rings before saving', async () => {
+    const second = {
+      RingId: 2,
+      RingName: 'Ring 2',
+      Color: '#dc2626',
+      Director: { PersonId: 2, DisplayName: 'Terry Jones' }
+    };
+    const wrapper = await mountModal({ stations: [station, second] });
+    await ringSelect(wrapper, 1).setValue('2');
+    expect(wrapper.get('[role="alert"]').text()).toContain('different ring');
+    expect(wrapper.get('button[type="submit"]').attributes('disabled')).toBeDefined();
+    await wrapper.get('form').trigger('submit');
+    expect(wrapper.emitted('submit:stations')).toBeUndefined();
+    await ringSelect(wrapper, 2).setValue('1');
+    await wrapper.get('form').trigger('submit');
+    expect(
+      wrapper.emitted('submit:stations')[0][0].map(item => [item.Director.PersonId, item.RingId, item.Color])
+    ).toEqual([
+      [1, 2, '#2563eb'],
+      [2, 1, '#dc2626']
+    ]);
+  });
+
+  it('cancels without emitting changes and discards the draft when reopened', async () => {
+    const wrapper = await mountModal();
+    await checkbox(wrapper, 1).setValue(false);
+    await wrapper.get('[aria-label="Close director assignments"]').trigger('click');
+    expect(wrapper.emitted('submit:stations')).toBeUndefined();
+    await wrapper.setProps({ show: false });
+    expect(dialog().open).toBe(false);
+    await wrapper.setProps({ show: true });
+    expect(checkbox(wrapper, 1).element.checked).toBe(true);
+    await wrapper.get('dialog').trigger('cancel');
+    expect(wrapper.emitted('update:show')).toEqual([[false], [false]]);
+  });
+
+  it('accepts staff added while open without losing input drafts and reconciles parent-owned station changes', async () => {
+    const wrapper = await mountModal();
+    await checkbox(wrapper, 2).setValue(true);
+    await ringSelect(wrapper, 2).setValue('2');
+    await wrapper.setProps({ availableDirectors: [...directors, { PersonId: 3, DisplayName: 'Michael Cord' }] });
+    expect(checkbox(wrapper, 2).element.checked).toBe(true);
+    expect(ringSelect(wrapper, 2).element.value).toBe('2');
+    expect(checkbox(wrapper, 3).element.checked).toBe(false);
+    await wrapper.setProps({ stations: [] });
+    expect(checkbox(wrapper, 1).element.checked).toBe(false);
+    expect(checkbox(wrapper, 2).element.checked).toBe(false);
+  });
+
+  it('degrades gracefully for missing staff or rings and includes previously selected directors', async () => {
+    const wrapper = await mountModal({ availableDirectors: [null, {}, { PersonId: 0 }], rings: [] });
+    expect(checkbox(wrapper, 1).element.checked).toBe(true);
+    expect(wrapper.get('[role="alert"]').text()).toContain('Choose a ring');
+    expect(wrapper.get('button[type="submit"]').attributes('disabled')).toBeDefined();
+    await wrapper.setProps({ stations: [] });
+    expect(wrapper.text()).toContain('No directors available.');
+  });
+});