@dcrackel/hematournamentui 1.0.711 → 1.0.713

package/src/stories/Templates/EventManagement/EditEventInfo/EditEventInfo.vue

@@ -1,91 +1,91 @@
-<template>
-  <section>
-    <EditEventsTopMenu :currentTab="'Edit'" :tabs="tabs(userLevel, isMobile)" @tabMenuClick="handleTabMenuClick" />
-
-    <div class="w-full flex flex-row justify-center mt-3">
-      <EditEventWizard
-        :event="event"
-        :rules="rules"
-        :weapons="weapons"
-        :userLevel="userLevel"
-        :editMode="editMode"
-        :step="step"
-        :saving="saving"
-        :saveError="saveError"
-        :saveNotice="saveNotice"
-        @save:step="$emit('save:step', $event)"
-        @navigate:step="$emit('navigate:step', $event)"
-        @update:dirty="$emit('update:dirty', $event)"
-        @update:cancel="$emit('update:cancel')"
-        @update:submit="handleSubmit"
-      />
-    </div>
-  </section>
-</template>
-
-<script>
-import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
-import EditEventWizard from '../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
-import { tabs } from '../../../Util/tabs.js';
-
-export default {
-  emits: ['tab:menu-click', 'update:submit', 'save:step', 'navigate:step', 'update:dirty', 'update:cancel'],
-  components: {
-    EditEventWizard,
-    EditEventsTopMenu
-  },
-  props: {
-    editMode: { type: Boolean, default: false },
-    step: { type: Number, default: 1 },
-    saving: { type: Boolean, default: false },
-    saveError: { type: String, default: '' },
-    saveNotice: { type: String, default: '' },
-
-    event: {
-      type: Object,
-      required: true
-    },
-    weapons: {
-      type: Array,
-      required: true
-    },
-    rules: {
-      type: Array,
-      required: true
-    },
-    userLevel: {
-      type: String,
-      default: 'Club'
-    }
-  },
-  data() {
-    return {
-      tabs,
-      windowWidth: window.innerWidth
-    };
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize);
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-  computed: {
-    isMobile() {
-      return this.windowWidth <= 748;
-    }
-  },
-  methods: {
-    handleTabMenuClick(value) {
-      if (this.saving) return;
-      this.$emit('tab:menu-click', value);
-    },
-    handleSubmit(value) {
-      this.$emit('update:submit', value);
-    },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    }
-  }
-};
-</script>
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Edit'" :tabs="tabs(userLevel, isMobile)" @tabMenuClick="handleTabMenuClick" />
+
+    <div class="w-full flex flex-row justify-center mt-3">
+      <EditEventWizard
+        :event="event"
+        :rules="rules"
+        :weapons="weapons"
+        :userLevel="userLevel"
+        :editMode="editMode"
+        :step="step"
+        :saving="saving"
+        :saveError="saveError"
+        :saveNotice="saveNotice"
+        @save:step="$emit('save:step', $event)"
+        @navigate:step="$emit('navigate:step', $event)"
+        @update:dirty="$emit('update:dirty', $event)"
+        @update:cancel="$emit('update:cancel')"
+        @update:submit="handleSubmit"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import EditEventWizard from '../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue';
+import { tabs } from '../../../Util/tabs.js';
+
+export default {
+  emits: ['tab:menu-click', 'update:submit', 'save:step', 'navigate:step', 'update:dirty', 'update:cancel'],
+  components: {
+    EditEventWizard,
+    EditEventsTopMenu
+  },
+  props: {
+    editMode: { type: Boolean, default: false },
+    step: { type: Number, default: 1 },
+    saving: { type: Boolean, default: false },
+    saveError: { type: String, default: '' },
+    saveNotice: { type: String, default: '' },
+
+    event: {
+      type: Object,
+      required: true
+    },
+    weapons: {
+      type: Array,
+      required: true
+    },
+    rules: {
+      type: Array,
+      required: true
+    },
+    userLevel: {
+      type: String,
+      default: 'Club'
+    }
+  },
+  data() {
+    return {
+      tabs,
+      windowWidth: window.innerWidth
+    };
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  computed: {
+    isMobile() {
+      return this.windowWidth <= 748;
+    }
+  },
+  methods: {
+    handleTabMenuClick(value) {
+      if (this.saving) return;
+      this.$emit('tab:menu-click', value);
+    },
+    handleSubmit(value) {
+      this.$emit('update:submit', value);
+    },
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    }
+  }
+};
+</script>

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

@@ -110,6 +110,36 @@ export const WithWaitlist = {
     personsInTournament: [...activeRoster, ...waitlistedPersons],
     personsAll: personsAllMock,
     fencingClubs: clubsMock,
-    event: makeEventWithCapacity(eventPersonGetEventById.event, activeRoster.length)
+    event: {
+      ...makeEventWithCapacity(eventPersonGetEventById.event, activeRoster.length),
+      RegistrationStatus: 'waitlist'
+    }
+  }
+};
+
+export const RegistrationOpen = {
+  args: {
+    personsInTournament: eventPersonGetEventById.persons,
+    personsAll: personsAllMock,
+    fencingClubs: clubsMock,
+    event: { ...eventPersonGetEventById.event, RegistrationStatus: 'open' }
+  }
+};
+
+export const RegistrationFull = {
+  args: {
+    personsInTournament: eventPersonGetEventById.persons,
+    personsAll: personsAllMock,
+    fencingClubs: clubsMock,
+    event: { ...eventPersonGetEventById.event, RegistrationStatus: 'full' }
+  }
+};
+
+export const RegistrationClosed = {
+  args: {
+    personsInTournament: eventPersonGetEventById.persons,
+    personsAll: personsAllMock,
+    fencingClubs: clubsMock,
+    event: { ...eventPersonGetEventById.event, RegistrationStatus: 'closed' }
   }
 };

package/src/stories/Templates/EventManagement/PoolLive/PoolLive.test.js

@@ -1,121 +1,121 @@
-import { shallowMount } from '@vue/test-utils';
-import { describe, expect, it } from 'vitest';
-import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
-import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
-import PoolLive from './PoolLive.vue';
-
-const createBout = (overrides = {}) => ({
-  BoutId: 42,
-  DEBoutId: null,
-  EventId: 8,
-  PoolId: 3,
-  OrderIndex: 0,
-  Status: 'Scheduled',
-  Score1: 4,
-  Score2: 3,
-  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
-  Person2: { PersonId: 2, DisplayName: 'Fencer Two' },
-  ...overrides
-});
-
-const mountPoolLive = bouts =>
-  shallowMount(PoolLive, {
-    props: {
-      bouts,
-      event: { EventRules: [] },
-      hostingClubColors: {},
-      connectedToServer: true,
-      editMode: true
-    }
-  });
-
-describe('PoolLive bout ownership', () => {
-  it('emits directing intent and waits for authoritative Active props', async () => {
-    const bout = createBout();
-    const wrapper = mountPoolLive([bout]);
-
-    wrapper.vm.directBout(bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
-    expect(wrapper.vm.localBouts[0].Status).toBe('Scheduled');
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
-
-    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
-
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
-    expect(wrapper.findComponent(DirectorModal).props('bout').Status).toBe('Active');
-  });
-
-  it('resumes an active bout through directing intent', async () => {
-    const bout = createBout({ Status: 'Active' });
-    const wrapper = mountPoolLive([bout]);
-
-    wrapper.vm.directBout(bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
-  });
-
-  it('closes scoring without resetting status or scores', async () => {
-    const bout = createBout({ Status: 'Active', Score1: 6, Score2: 5 });
-    const wrapper = mountPoolLive([bout]);
-
-    wrapper.vm.directBout(bout);
-    await wrapper.vm.$nextTick();
-    wrapper.findComponent(DirectorModal).vm.$emit('update:closeModal', bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.localBouts[0]).toMatchObject({ Status: 'Active', Score1: 6, Score2: 5 });
-    expect(wrapper.emitted('update:bout')).toBeUndefined();
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
-  });
-
-  it('submits the draft without assigning Completed or Ended', async () => {
-    const bout = createBout({ Status: 'Active' });
-    const submittedBout = { ...bout, Score1: 7 };
-    const wrapper = mountPoolLive([bout]);
-
-    wrapper.findComponent(DirectorModal).vm.$emit('submit:bout', submittedBout);
-    await wrapper.vm.$nextTick();
-
-    const emittedBout = wrapper.emitted('submit:bout')[0][0];
-    expect(emittedBout).toEqual(submittedBout);
-    expect(emittedBout.Status).toBe('Active');
-    expect(emittedBout.Ended).toBeUndefined();
-  });
-
-  it('opens completed bouts for editing', async () => {
-    const bout = createBout({ Status: 'Completed' });
-    const wrapper = mountPoolLive([bout]);
-
-    wrapper.vm.editBout(bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.findComponent(EditBoutModal).props('show')).toBe(true);
-    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
-  });
-
-  it('forwards make-active intent without changing the draft status', async () => {
-    const bout = createBout({ Status: 'Completed' });
-    const wrapper = mountPoolLive([bout]);
-
-    wrapper.findComponent(EditBoutModal).vm.$emit('request:bout-active', bout);
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.emitted('request:bout-active')).toEqual([[bout]]);
-    expect(wrapper.vm.localBouts[0].Status).toBe('Completed');
-  });
-
-  it('swaps scheduled bout order without mutating incoming bouts', () => {
-    const firstBout = createBout({ BoutId: 1, OrderIndex: 0 });
-    const secondBout = createBout({ BoutId: 2, OrderIndex: 1 });
-    const wrapper = mountPoolLive([firstBout, secondBout]);
-
-    wrapper.vm._swapOrderBetweenIds(firstBout.BoutId, secondBout.BoutId);
-
-    expect(wrapper.vm.localBouts.map(bout => bout.OrderIndex)).toEqual([1, 0]);
-    expect([firstBout.OrderIndex, secondBout.OrderIndex]).toEqual([0, 1]);
-  });
-});
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
+import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
+import PoolLive from './PoolLive.vue';
+
+const createBout = (overrides = {}) => ({
+  BoutId: 42,
+  DEBoutId: null,
+  EventId: 8,
+  PoolId: 3,
+  OrderIndex: 0,
+  Status: 'Scheduled',
+  Score1: 4,
+  Score2: 3,
+  Person1: { PersonId: 1, DisplayName: 'Fencer One' },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two' },
+  ...overrides
+});
+
+const mountPoolLive = bouts =>
+  shallowMount(PoolLive, {
+    props: {
+      bouts,
+      event: { EventRules: [] },
+      hostingClubColors: {},
+      connectedToServer: true,
+      editMode: true
+    }
+  });
+
+describe('PoolLive bout ownership', () => {
+  it('emits directing intent and waits for authoritative Active props', async () => {
+    const bout = createBout();
+    const wrapper = mountPoolLive([bout]);
+
+    wrapper.vm.directBout(bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.vm.localBouts[0].Status).toBe('Scheduled');
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+
+    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Active' }] });
+
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+    expect(wrapper.findComponent(DirectorModal).props('bout').Status).toBe('Active');
+  });
+
+  it('resumes an active bout through directing intent', async () => {
+    const bout = createBout({ Status: 'Active' });
+    const wrapper = mountPoolLive([bout]);
+
+    wrapper.vm.directBout(bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(true);
+  });
+
+  it('closes scoring without resetting status or scores', async () => {
+    const bout = createBout({ Status: 'Active', Score1: 6, Score2: 5 });
+    const wrapper = mountPoolLive([bout]);
+
+    wrapper.vm.directBout(bout);
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent(DirectorModal).vm.$emit('update:closeModal', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.localBouts[0]).toMatchObject({ Status: 'Active', Score1: 6, Score2: 5 });
+    expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+  });
+
+  it('submits the draft without assigning Completed or Ended', async () => {
+    const bout = createBout({ Status: 'Active' });
+    const submittedBout = { ...bout, Score1: 7 };
+    const wrapper = mountPoolLive([bout]);
+
+    wrapper.findComponent(DirectorModal).vm.$emit('submit:bout', submittedBout);
+    await wrapper.vm.$nextTick();
+
+    const emittedBout = wrapper.emitted('submit:bout')[0][0];
+    expect(emittedBout).toEqual(submittedBout);
+    expect(emittedBout.Status).toBe('Active');
+    expect(emittedBout.Ended).toBeUndefined();
+  });
+
+  it('opens completed bouts for editing', async () => {
+    const bout = createBout({ Status: 'Completed' });
+    const wrapper = mountPoolLive([bout]);
+
+    wrapper.vm.editBout(bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent(EditBoutModal).props('show')).toBe(true);
+    expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
+  });
+
+  it('forwards make-active intent without changing the draft status', async () => {
+    const bout = createBout({ Status: 'Completed' });
+    const wrapper = mountPoolLive([bout]);
+
+    wrapper.findComponent(EditBoutModal).vm.$emit('request:bout-active', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('request:bout-active')).toEqual([[bout]]);
+    expect(wrapper.vm.localBouts[0].Status).toBe('Completed');
+  });
+
+  it('swaps scheduled bout order without mutating incoming bouts', () => {
+    const firstBout = createBout({ BoutId: 1, OrderIndex: 0 });
+    const secondBout = createBout({ BoutId: 2, OrderIndex: 1 });
+    const wrapper = mountPoolLive([firstBout, secondBout]);
+
+    wrapper.vm._swapOrderBetweenIds(firstBout.BoutId, secondBout.BoutId);
+
+    expect(wrapper.vm.localBouts.map(bout => bout.OrderIndex)).toEqual([1, 0]);
+    expect([firstBout.OrderIndex, secondBout.OrderIndex]).toEqual([0, 1]);
+  });
+});

package/src/stories/Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.stories.js

@@ -11,7 +11,7 @@ export default {
   },
   argTypes: {
     currentTab: { control: { type: 'text' } },
-    tabs: { control: { type: 'array' } },
+    tabs: { control: { type: 'object' } },
     tabMenuClick: { action: 'tabMenuClick' }
   }
 };
@@ -25,7 +25,7 @@ export const Default = {
 
 export const DirectorMenu = {
   args: {
-    currentTab: 'Checkin',
+    currentTab: 'Pools',
     tabs: tabs('Director')
   }
 };
@@ -43,3 +43,10 @@ export const PersonProfileAdmin = {
     tabs: personProfileTabs('admin')
   }
 };
+
+export const PhoneDirector = {
+  args: {
+    currentTab: 'Pools',
+    tabs: tabs('Admin', true)
+  }
+};

package/src/stories/Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
     <section class="flex">
-      <TabBar class="border-b border-dropdownSelect mb-5 overflow-auto w-full flex flex-wrap">
-        <div class="w-full flex md:flex-nowrap flex-wrap justify-between md:justify-start">
+      <TabBar class="border-b border-dropdownSelect mb-5 overflow-x-auto w-full flex">
+        <div class="w-full flex md:flex-wrap">
           <BaseButton
             v-for="tab in tabs"
             :key="tab.id"
             :selected="currentTab === tab.id"
-            class="mx-2.5 md:mx-3 text-xs md:text-sm"
+            class="mx-1 md:mx-3 min-h-11 shrink-0 text-xs md:text-sm"
+            :class="{ 'hidden md:inline-block': tab.mobileHidden }"
             size="sm"
             :dropDown="!!tab.children"
             :iconName="getIconName(tab)"
@@ -70,7 +71,7 @@ export default {
   },
   computed: {
     isMobile() {
-      return this.windowWidth <= 748;
+      return this.windowWidth < 768;
     },
     selectedDropdownItems() {
       return this.tabs.find(tab => tab.id === this.activeDropdown)?.children || [];