@dcrackel/hematournamentui 1.0.712 → 1.0.714

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/Molecules/Modals/DirectorModal/DirectorModal.stories.js

@@ -47,3 +47,9 @@ export const WithDEBout = {
     }
   }
 };
+
+export const WithDirector = {
+  args: {
+    bout: { ...getPoolsWithBouts[0], RefName: 'Alex Morgan' }
+  }
+};

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

@@ -1,18 +1,18 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import DirectorModal from './DirectorModal.vue';
-
-describe('DirectorModal backdrop', () => {
-  it('keeps the directing screen visible through a 25 percent backdrop', () => {
-    const wrapper = shallowMount(DirectorModal, {
-      props: {
-        show: true,
-        bout: { BoutId: 42 },
-        eventRules: {},
-        hostingClubColors: {}
-      }
-    });
-
-    expect(wrapper.find('[data-testid="director-modal-backdrop"]').classes()).toContain('bg-secondary/25');
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import DirectorModal from './DirectorModal.vue';
+
+describe('DirectorModal backdrop', () => {
+  it('keeps the directing screen visible through a 25 percent backdrop', () => {
+    const wrapper = shallowMount(DirectorModal, {
+      props: {
+        show: true,
+        bout: { BoutId: 42 },
+        eventRules: {},
+        hostingClubColors: {}
+      }
+    });
+
+    expect(wrapper.find('[data-testid="director-modal-backdrop"]').classes()).toContain('bg-secondary/25');
+  });
+});

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

@@ -51,7 +51,7 @@ export default {
       required: true
     },
     eventRules: {
-      type: Object,
+      type: Array,
       required: true
     },
     hostingClubColors: {

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

@@ -10,7 +10,11 @@
     @start="onStart"
     @resume="onResume"
     @edit="onEdit"
-  />
+  >
+    <template v-if="$slots['mobile-details']" #mobile-details>
+      <slot name="mobile-details" />
+    </template>
+  </component>
 </template>
 
 <script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardActive/BoutCardActive.vue

@@ -51,16 +51,24 @@
 
     <!-- Mobile active -->
     <div
-      class="flex md:hidden justify-between items-center p-3 border border-alarm rounded-md bg-poolBox transition"
-      :class="mobileCardActionClass"
+      class="flex md:hidden justify-between items-center px-3 py-2 border-alarm rounded-md bg-poolBox transition"
+      :class="[mobileCardActionClass, mobileCardLayoutClass]"
       @click="onCardClick"
     >
-      <div class="relative flex flex-col items-center">
+      <div class="relative h-12 w-12 flex-none">
         <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
-        <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute top-0 left-0`"></div>
+        <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute bottom-0 -right-1`"></div>
+        <span
+          class="pointer-events-none absolute -top-1 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded bg-alarm px-1 py-0.5 text-[9px] font-bold leading-none text-white"
+        >
+          In progress
+        </span>
       </div>
 
-      <div class="text-center flex-1 mx-4">
+      <div class="text-center flex-1 min-w-0 mx-3">
+        <div v-if="$slots['mobile-details']" class="mb-1 min-w-0">
+          <slot name="mobile-details" />
+        </div>
         <BaseText :text="`${card.score1} - ${card.fencer1.name}`" size="sm" color="quinary" weight="bold" />
         <div>
           <BaseText :text="displayTime" size="xs" color="quaternary" weight="bold" class="-mt-0.5" />
@@ -68,8 +76,8 @@
         <BaseText :text="`${card.score2} - ${card.fencer2.name}`" size="sm" color="quinary" weight="bold" />
       </div>
 
-      <div class="relative flex flex-col items-center">
-        <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} absolute top-0 right-0`"></div>
+      <div class="relative h-12 w-12 flex-none">
+        <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} absolute bottom-0 -right-1`"></div>
         <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
       </div>
     </div>
@@ -101,6 +109,9 @@ export default {
     hasCard() {
       return !!this.card;
     },
+    mobileCardLayoutClass() {
+      return this.$slots['mobile-details'] ? 'border-2' : 'border';
+    },
     mobileCardActionClass() {
       if (this.editMode) return 'cursor-pointer';
       return 'cursor-default';
@@ -131,9 +142,7 @@ export default {
     'card.timeLeftSeconds': {
       immediate: true,
       handler(n) {
-        const next = Number(n ?? 0);
-        if (this.timerStatus !== 'running') this.remaining = next;
-        if (this.timerStatus === 'running' && this.remaining === 0) this.remaining = next;
+        this.remaining = Math.max(0, Math.floor(Number(n) || 0));
       }
     },
     timerStatus(n) {

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.vue

@@ -59,15 +59,16 @@
 
     <!-- Mobile -->
     <section
-      class="relative flex md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
+      class="relative flex flex-col md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
       :class="mobileCardActionClass"
+      @click="onCardClick"
     >
       <!-- main tappable area -->
-      <div class="flex flex-1 items-center p-4 min-w-0" @click="onCardClick">
+      <div class="flex w-full flex-1 items-center px-3 py-2 min-w-0">
         <!-- left portrait or index when reordering -->
-        <div v-if="!reorderMode" class="relative flex flex-col items-center flex-none">
+        <div v-if="!reorderMode" class="relative w-12 h-12 flex-none">
           <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
-          <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
+          <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute bottom-0 -right-1 z-10`"></div>
         </div>
 
         <div v-if="reorderMode" class="flex flex-col items-center -mt-3 select-none flex-none">
@@ -76,8 +77,11 @@
         </div>
 
         <!-- center -->
-        <div class="text-center flex-1 mx-4 min-w-0 flex flex-col items-center justify-center leading-none">
-          <div class="flex items-center justify-center">
+        <div class="text-center flex-1 mx-3 min-w-0 flex flex-col items-center justify-center leading-none">
+          <div v-if="$slots['mobile-details']" class="mb-1 w-full min-w-0">
+            <slot name="mobile-details" />
+          </div>
+          <div class="flex max-w-full items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer1.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
               :text="c.fencer1.name"
@@ -90,7 +94,7 @@
 
           <BaseText text="vs" size="xs" color="quaternary" />
 
-          <div class="flex items-center justify-center">
+          <div class="flex max-w-full items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer2.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
               :text="c.fencer2.name"

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

@@ -1,33 +1,42 @@
-import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
-
-export default {
-  title: 'Organisms/Cards/BracketDirectorAssignmentCard',
-  component: BracketDirectorAssignmentCard,
-  args: {
-    station: {
-      RingId: 1,
-      RingName: 'Ring 1',
-      Color: '#2563eb',
-      Director: {
-        PersonId: 1001,
-        DisplayName: 'Alex Morgan',
-        PortraitUrl: ''
-      }
-    },
-    variant: 'assigned'
-  },
-  argTypes: {
-    station: { control: 'object' },
-    variant: { control: 'select', options: ['assigned', 'add'] },
-    addLabel: { control: 'text' }
-  }
-};
-
-export const Assigned = {};
-
-export const AddDirector = {
-  args: {
-    station: null,
-    variant: 'add'
-  }
-};
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+export default {
+  title: 'Organisms/Cards/BracketDirectorAssignmentCard',
+  component: BracketDirectorAssignmentCard,
+  args: {
+    station: {
+      RingId: 1,
+      RingName: 'Ring 1',
+      Color: '#2563eb',
+      Director: {
+        PersonId: 1001,
+        DisplayName: 'Alex Morgan',
+        PortraitUrl: ''
+      }
+    },
+    variant: 'assigned'
+  },
+  argTypes: {
+    station: { control: 'object' },
+    variant: { control: 'select', options: ['assigned', 'add'] },
+    addLabel: { control: 'text' }
+  }
+};
+
+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: {
+    station: null,
+    variant: 'add'
+  }
+};

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

@@ -1,45 +1,76 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
-
-const station = {
-  RingId: 3,
-  RingName: 'Ring 3',
-  Color: '#059669',
-  Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: '/portrait.png' }
-};
-
-describe('BracketDirectorAssignmentCard', () => {
-  it('renders the ring, portrait, and director name', () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
-
-    expect(wrapper.find('img').attributes()).toMatchObject({
-      src: '/portrait.png',
-      alt: 'Sam Rivera portrait'
-    });
-    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Sam Rivera');
-    expect(wrapper.find('[data-testid="bracket-director-assignment"]').attributes('style')).toBeUndefined();
-    expect(wrapper.find('[data-testid="director-color-dot"]').attributes('style')).toContain('#059669');
-    expect(wrapper.find('[data-testid="ring-number-icon"]').exists()).toBe(false);
-    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
-  });
-
-  it('uses director initials when no portrait is supplied', () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentCard, {
-      props: { station: { ...station, Director: { ...station.Director, PortraitUrl: '' } } }
-    });
-
-    expect(wrapper.find('img').exists()).toBe(false);
-    expect(wrapper.find('[data-testid="director-initials"]').classes()).toContain('rounded-xl');
-    expect(wrapper.find('[data-testid="director-initials"] base-text-stub').attributes('text')).toBe('SR');
-  });
-
-  it('emits add intent from the summary card', async () => {
-    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
-
-    await wrapper.find('[data-testid="add-bracket-director"]').trigger('click');
-
-    expect(wrapper.emitted('action:add')).toEqual([[]]);
-    expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+const station = {
+  RingId: 3,
+  RingName: 'Ring 3',
+  Color: '#059669',
+  Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: '/portrait.png' }
+};
+
+describe('BracketDirectorAssignmentCard', () => {
+  it('renders the ring, portrait, and director name', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
+
+    expect(wrapper.find('img').attributes()).toMatchObject({
+      src: '/portrait.png',
+      alt: 'Sam Rivera portrait'
+    });
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Sam Rivera');
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').attributes('style')).toBeUndefined();
+    expect(wrapper.find('[data-testid="director-color-dot"]').attributes('style')).toContain('#059669');
+    expect(wrapper.find('[data-testid="ring-number-icon"]').exists()).toBe(false);
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
+  });
+
+  it('uses director initials when no portrait is supplied', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, {
+      props: { station: { ...station, Director: { ...station.Director, PortraitUrl: '' } } }
+    });
+
+    expect(wrapper.find('img').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="director-initials"]').classes()).toContain('rounded-xl');
+    expect(wrapper.find('[data-testid="director-initials"] base-text-stub').attributes('text')).toBe('SR');
+  });
+
+  it('emits add intent from the summary card', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
+
+    await wrapper.find('[data-testid="add-bracket-director"]').trigger('click');
+
+    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');
+  });
+});