@dcrackel/hematournamentui 1.0.707 → 1.0.709

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

@@ -0,0 +1,23 @@
+import MissingHemaRatingsId from './MissingHemaRatingsId.vue';
+
+export default {
+  title: 'Molecules/Indicators/MissingHemaRatingsId',
+  component: MissingHemaRatingsId,
+  tags: ['autodocs'],
+  args: { person: { HemaRatingsId: null } },
+  argTypes: {
+    person: { control: 'object' }
+  }
+};
+
+export const MissingId = {
+  args: { person: { HemaRatingsId: null } }
+};
+
+export const UnratedWithId = {
+  args: { person: { HemaRatingsId: 10255, HEMARatings: [] } }
+};
+
+export const IdFromRating = {
+  args: { person: { HEMARatings: [{ HemaRatingId: 10255, Rating: 1708.8 }] } }
+};

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

@@ -0,0 +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>

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

@@ -0,0 +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');
+  });
+});

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

@@ -9,10 +9,11 @@
   >
     <div
       v-if="show"
-      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      data-testid="director-modal-backdrop"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-secondary/85"
       @click="close"
     >
-      <div class="w-full md:w-1/3 md:min-w-[30rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
+      <div class="w-full md:w-1/3 md:min-w-120 bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
           <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
         </div>

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

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

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

@@ -0,0 +1,33 @@
+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'
+  }
+};

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

@@ -0,0 +1,45 @@
+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');
+  });
+});

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

@@ -0,0 +1,103 @@
+<template>
+  <button
+    v-if="isAddCard"
+    type="button"
+    data-testid="add-bracket-director"
+    class="flex min-h-20 w-full items-center justify-center gap-3 rounded-lg border-2 border-dashed border-dropdownSelect bg-white px-4 py-3 text-left transition hover:border-bright hover:shadow-md focus-visible:border-bright focus-visible:outline-none"
+    @click="$emit('action:add')"
+  >
+    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-bannerBackground" aria-hidden="true">
+      <BaseIcon iconName="fa-plus" color="primaryHighlight" size="sm" />
+    </span>
+    <BaseText :text="addLabel" color="primaryHighlight" size="sm" weight="bold" />
+  </button>
+
+  <article
+    v-else-if="station"
+    data-testid="bracket-director-assignment"
+    class="flex min-h-16 w-full items-center gap-3 overflow-hidden rounded-md border border-poolSetup bg-white px-3 py-2 shadow-sm hover:border-bright"
+    :aria-label="assignmentLabel"
+  >
+    <div class="relative h-12 w-12 flex-none">
+      <img
+        v-if="portraitUrl"
+        :src="portraitUrl"
+        :alt="`${directorName} portrait`"
+        class="h-12 w-12 rounded-xl object-cover"
+      />
+      <div
+        v-else
+        data-testid="director-initials"
+        class="flex h-12 w-12 items-center justify-center rounded-xl bg-dropdownSelect"
+        aria-hidden="true"
+      >
+        <BaseText :text="directorInitials" color="primaryHighlight" size="sm" weight="bold" />
+      </div>
+      <span
+        data-testid="director-color-dot"
+        class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full ring-2 ring-white"
+        :style="{ backgroundColor: station.Color }"
+        aria-hidden="true"
+      ></span>
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <BaseText :text="ringLabel" color="quaternary" size="xs" />
+      <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
+    </div>
+  </article>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const getInitials = displayName =>
+  String(displayName || '')
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(name => name[0].toUpperCase())
+    .join('');
+
+export default {
+  name: 'BracketDirectorAssignmentCard',
+  components: { BaseIcon, BaseText },
+  emits: ['action:add'],
+  props: {
+    station: {
+      type: Object,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: 'assigned',
+      validator: value => ['assigned', 'add'].includes(value)
+    },
+    addLabel: {
+      type: String,
+      default: 'Click here to add director'
+    }
+  },
+  computed: {
+    assignmentLabel() {
+      return `${this.ringLabel}, Director ${this.directorName}`;
+    },
+    directorInitials() {
+      return getInitials(this.directorName) || '?';
+    },
+    directorName() {
+      return this.station?.Director?.DisplayName || 'Director TBD';
+    },
+    isAddCard() {
+      return this.variant === 'add';
+    },
+    portraitUrl() {
+      return this.station?.Director?.PortraitUrl || '';
+    },
+    ringLabel() {
+      return this.station?.RingName || `Ring ${this.station?.RingId ?? ''}`.trim();
+    }
+  }
+};
+</script>