@dcrackel/hematournamentui 1.0.713 → 1.0.715

package/dist/hematournamentui-tailwind.css

@@ -21,6 +21,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --container-xl: 36rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -242,6 +243,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .-top-4 {
     top: calc(var(--spacing) * -4);
   }
@@ -290,6 +294,9 @@
   .left-1 {
     left: calc(var(--spacing) * 1);
   }
+  .left-1\/2 {
+    left: calc(1 / 2 * 100%);
+  }
   .left-11 {
     left: calc(var(--spacing) * 11);
   }
@@ -311,6 +318,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .order-first {
     order: -9999;
   }
@@ -359,14 +369,17 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-auto {
+    margin: auto;
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
-  .mx-2\.5 {
-    margin-inline: calc(var(--spacing) * 2.5);
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
   }
   .mx-4 {
     margin-inline: calc(var(--spacing) * 4);
@@ -656,6 +669,9 @@
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
+  .max-h-\[calc\(100dvh-2rem\)\] {
+    max-height: calc(100dvh - 2rem);
+  }
   .max-h-screen {
     max-height: 100vh;
   }
@@ -665,6 +681,12 @@
   .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);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -680,6 +702,9 @@
   .min-h-\[320px\] {
     min-height: 320px;
   }
+  .min-h-full {
+    min-height: 100%;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -821,6 +846,9 @@
   .w-\[900px\] {
     width: 900px;
   }
+  .w-\[calc\(100\%-2rem\)\] {
+    width: calc(100% - 2rem);
+  }
   .w-full {
     width: 100%;
   }
@@ -839,12 +867,18 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
+  .min-w-36 {
+    min-width: calc(var(--spacing) * 36);
+  }
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -866,6 +900,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-auto {
+    flex: auto;
+  }
   .flex-none {
     flex: none;
   }
@@ -886,6 +923,10 @@
     --tw-border-spacing-y: calc(var(--spacing) * 1);
     border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-full {
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1594,6 +1635,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[9px\] {
+    font-size: 9px;
+  }
   .text-\[12rem\] {
     font-size: 12rem;
   }
@@ -1635,6 +1679,12 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1737,6 +1787,9 @@
   .text-toggleBackground {
     color: #A9C4D6;
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1746,6 +1799,9 @@
   .underline {
     text-decoration-line: underline;
   }
+  .accent-bright {
+    accent-color: #6190f2;
+  }
   .accent-primary {
     accent-color: #141B33;
   }
@@ -1873,6 +1929,19 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .backdrop\:bg-black\/20 {
+    &::backdrop {
+      background-color: color-mix(in srgb, #000 20%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+      }
+    }
+  }
+  .backdrop\:bg-secondary\/60 {
+    &::backdrop {
+      background-color: color-mix(in oklab, #2B324B 60%, transparent);
+    }
+  }
   .last\:border-b-0 {
     &:last-child {
       border-bottom-style: var(--tw-border-style);
@@ -2115,6 +2184,11 @@
       border-color: #6190f2;
     }
   }
+  .focus-visible\:bg-dropdownSelect {
+    &:focus-visible {
+      background-color: #D5E4EE;
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2152,6 +2226,11 @@
       opacity: 40%;
     }
   }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
   .md\:m-9 {
     @media (width >= 48rem) {
       margin: calc(var(--spacing) * 9);
@@ -2272,6 +2351,11 @@
       display: none;
     }
   }
+  .md\:inline-block {
+    @media (width >= 48rem) {
+      display: inline-block;
+    }
+  }
   .md\:h-7 {
     @media (width >= 48rem) {
       height: calc(var(--spacing) * 7);
@@ -2397,9 +2481,9 @@
       flex-direction: row;
     }
   }
-  .md\:flex-nowrap {
+  .md\:flex-wrap {
     @media (width >= 48rem) {
-      flex-wrap: nowrap;
+      flex-wrap: wrap;
     }
   }
   .md\:items-stretch {
@@ -2407,11 +2491,6 @@
       align-items: stretch;
     }
   }
-  .md\:justify-start {
-    @media (width >= 48rem) {
-      justify-content: flex-start;
-    }
-  }
   .md\:rounded-lg {
     @media (width >= 48rem) {
       border-radius: var(--radius-lg);
@@ -2571,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 {
@@ -2596,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.713",
+  "version": "1.0.715",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

package/src/index.js

@@ -1,42 +1,43 @@
-export { default as BaseIcon } from './stories/Atoms/Icon/BaseIcon.vue';
-export { default as BaseInput } from './stories/Atoms/Input/BaseInput.vue';
-export { default as BaseRadioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
-export { default as BaseTag } from './stories/Atoms/Tag/BaseTag.vue';
-export { default as BaseText } from './stories/Atoms/Text/BaseText.vue';
-
-export { default as Breadcrumb } from './stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue';
-export { default as BaseButton } from './stories/Molecules/Buttons/BaseButton/BaseButton.vue';
-export { default as FilterAndSortBar } from './stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue';
-export { default as FilterUpcomingPast } from './stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue';
-export { default as BaseModal } from './stories/Molecules/Modals/BaseModal/BaseModal.vue';
-export { default as LoadingModal } from './stories/Molecules/Modals/LoadingModal/LoadingModal.vue';
-export { default as EventWizardModal } from './stories/Molecules/Modals/EventWizardModal/EventWizardModal.vue';
-
-export { default as AddressAutocomplete } from './stories/Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue';
-export { default as DatePicker } from './stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue';
-export { default as DropDownMenu } from './stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
-export { default as GridContainer } from './stories/Organisms/Grids/GridContainer.vue';
-export { default as PoolGrid } from './stories/Organisms/Containers/PoolGrid/PoolGrid.vue';
-export { default as BracketDirectorAssignmentCard } from './stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
-export { default as BracketDirectorAssignmentPanel } from './stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
-export { default as ImageCropper } from './stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
-export { default as TextBoxEditor } from './stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
-export { default as EditEventWizard } from './stories/Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
-
-export { default as TournamentManagement } from './stories/Templates/TournamentManagement/TournamentManagement.vue';
-export { default as ListEvents } from './stories/Templates/TournamentManagement/ListEvents/ListEvents.vue';
-
-export { default as AdminLeftMenu } from './stories/Templates/Menus/Admin/AdminLeftMenu.vue';
-export { default as EventAttendance } from './stories/Templates/EventManagement/EventAttendance/EventAttendance.vue';
-export { default as PoolManagement } from './stories/Templates/EventManagement/PoolManagement/PoolManagement.vue';
-export { default as StaffList } from './stories/Templates/EventManagement/StaffList/StaffList.vue';
-export { default as PoolLive } from './stories/Templates/EventManagement/PoolLive/PoolLive.vue';
-export { default as PoolResults } from './stories/Templates/EventManagement/PoolResults/PoolResults.vue';
-export { default as Bracket } from './stories/Templates/EventManagement/Bracket/Bracket.vue';
-export { default as EditEventInfo } from './stories/Templates/EventManagement/EditEventInfo/EditEventInfo.vue';
-export { default as EventFinalResults } from './stories/Templates/EventManagement/EventFinalResults/EventFinalResults.vue';
-export { default as KioskDisplay } from './stories/Templates/EventManagement/KioskDisplay/KioskDisplay.vue';
-export { default as PersonManagement } from './stories/Templates/PersonManagement/PersonManagement.vue';
-export { default as ClubManagement } from './stories/Templates/ClubManagement/ClubManagement.vue';
-export { default as Assignment } from './stories/Templates/Assignment/Assignment.vue';
-export { default as PenaltyReport } from './stories/Templates/EventManagement/Penalties/PenaltyReport.vue';
+export { default as BaseIcon } from './stories/Atoms/Icon/BaseIcon.vue';
+export { default as BaseInput } from './stories/Atoms/Input/BaseInput.vue';
+export { default as BaseRadioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
+export { default as BaseTag } from './stories/Atoms/Tag/BaseTag.vue';
+export { default as BaseText } from './stories/Atoms/Text/BaseText.vue';
+
+export { default as Breadcrumb } from './stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue';
+export { default as BaseButton } from './stories/Molecules/Buttons/BaseButton/BaseButton.vue';
+export { default as FilterAndSortBar } from './stories/Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue';
+export { default as FilterUpcomingPast } from './stories/Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue';
+export { default as BaseModal } from './stories/Molecules/Modals/BaseModal/BaseModal.vue';
+export { default as BracketDirectorsModal } from './stories/Molecules/Modals/BracketDirectorsModal/BracketDirectorsModal.vue';
+export { default as LoadingModal } from './stories/Molecules/Modals/LoadingModal/LoadingModal.vue';
+export { default as EventWizardModal } from './stories/Molecules/Modals/EventWizardModal/EventWizardModal.vue';
+
+export { default as AddressAutocomplete } from './stories/Organisms/ComplexInputs/AddressAutocomplete/AddressAutocomplete.vue';
+export { default as DatePicker } from './stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue';
+export { default as DropDownMenu } from './stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
+export { default as GridContainer } from './stories/Organisms/Grids/GridContainer.vue';
+export { default as PoolGrid } from './stories/Organisms/Containers/PoolGrid/PoolGrid.vue';
+export { default as BracketDirectorAssignmentCard } from './stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+export { default as BracketDirectorAssignmentPanel } from './stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
+export { default as ImageCropper } from './stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
+export { default as TextBoxEditor } from './stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
+export { default as EditEventWizard } from './stories/Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
+
+export { default as TournamentManagement } from './stories/Templates/TournamentManagement/TournamentManagement.vue';
+export { default as ListEvents } from './stories/Templates/TournamentManagement/ListEvents/ListEvents.vue';
+
+export { default as AdminLeftMenu } from './stories/Templates/Menus/Admin/AdminLeftMenu.vue';
+export { default as EventAttendance } from './stories/Templates/EventManagement/EventAttendance/EventAttendance.vue';
+export { default as PoolManagement } from './stories/Templates/EventManagement/PoolManagement/PoolManagement.vue';
+export { default as StaffList } from './stories/Templates/EventManagement/StaffList/StaffList.vue';
+export { default as PoolLive } from './stories/Templates/EventManagement/PoolLive/PoolLive.vue';
+export { default as PoolResults } from './stories/Templates/EventManagement/PoolResults/PoolResults.vue';
+export { default as Bracket } from './stories/Templates/EventManagement/Bracket/Bracket.vue';
+export { default as EditEventInfo } from './stories/Templates/EventManagement/EditEventInfo/EditEventInfo.vue';
+export { default as EventFinalResults } from './stories/Templates/EventManagement/EventFinalResults/EventFinalResults.vue';
+export { default as KioskDisplay } from './stories/Templates/EventManagement/KioskDisplay/KioskDisplay.vue';
+export { default as PersonManagement } from './stories/Templates/PersonManagement/PersonManagement.vue';
+export { default as ClubManagement } from './stories/Templates/ClubManagement/ClubManagement.vue';
+export { default as Assignment } from './stories/Templates/Assignment/Assignment.vue';
+export { default as PenaltyReport } from './stories/Templates/EventManagement/Penalties/PenaltyReport.vue';

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.');
+  });
+});