@dcrackel/hematournamentui 1.0.708 → 1.0.710

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

@@ -1,75 +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"
-        @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'],
-  components: {
-    EditEventWizard,
-    EditEventsTopMenu
-  },
-  props: {
-    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) {
-      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/PersonManagement/Admin/Administration/Administration.stories.js

@@ -65,3 +65,17 @@ export const EmptyAccessLevel = {
     userLevel: 'Club'
   }
 };
+
+export const ClearedHemaRatingId = {
+  args: {
+    person: { ...personsMock[1], HemaRatingsId: null, HEMARatings: [{ HemaRatingId: 123 }] },
+    userLevel: 'Admin'
+  }
+};
+
+export const InvalidHemaRatingId = {
+  args: {
+    person: { ...personsMock[1], HemaRatingsId: '1.5' },
+    userLevel: 'Admin'
+  }
+};

package/src/stories/Templates/PersonManagement/Admin/Administration/Administration.test.js

@@ -0,0 +1,39 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { enableAutoUnmount, mount } from '@vue/test-utils';
+import Administration from './Administration.vue';
+import TitledInput from '../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+
+enableAutoUnmount(afterEach);
+
+function mountAdministration(id) {
+  return mount(Administration, {
+    props: {
+      person: { PersonId: 1, HemaRatingsId: id, HEMARatings: [{ HemaRatingId: 123 }], AccessLevel: 'User' },
+      userLevel: 'Admin'
+    },
+    global: { stubs: { DropDownMenu: true } }
+  });
+}
+
+const findHemaInput = wrapper => wrapper.findAllComponents(TitledInput)[1].find('input');
+
+describe('Administration HR ID draft', () => {
+  it.each([null, ''])('keeps the explicitly cleared ID %j blank', id => {
+    const wrapper = mountAdministration(id);
+    expect(findHemaInput(wrapper).element.value).toBe('');
+    expect(findHemaInput(wrapper).attributes('aria-invalid')).toBe('false');
+  });
+
+  it('falls back to legacy ratings only when the canonical ID is undefined', () => {
+    const wrapper = mountAdministration(undefined);
+    expect(findHemaInput(wrapper).element.value).toBe('123');
+  });
+
+  it('shows invalid-ID feedback and preserves invalid input for correction', async () => {
+    const wrapper = mountAdministration(0);
+    expect(wrapper.text()).toContain('positive whole-number ID');
+    expect(findHemaInput(wrapper).attributes('aria-invalid')).toBe('true');
+    await findHemaInput(wrapper).setValue('-5');
+    expect(wrapper.emitted('update:person')).toEqual([[{ field: 'HemaRatingsId', value: '-5' }]]);
+  });
+});

package/src/stories/Templates/PersonManagement/Admin/Administration/Administration.vue

@@ -14,9 +14,10 @@
     <div class="flex flex-col mb-4">
       <TitledInput
         :inputValue="hemaRatingId"
-        :inputType="'number'"
+        inputType="text"
         placeholder="HEMA Rating ID"
-        title="HEMA Rating ID"
+        :invalid="hemaRatingValidation.invalid"
+        :title="hemaRatingLabel"
         @update:value="emitUpdate('HemaRatingsId', $event)"
       />
     </div>
@@ -41,6 +42,8 @@
 import TitledInput from '../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
 import BaseText from '../../../../Atoms/Text/BaseText.vue';
 import DropDownMenu from '../../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
+import { getDraftHemaRatingsId } from '../../PersonManagementDraft.js';
+import { validateField } from '../../../../Util/Validations/PersonManagementValidations.js';
 
 const STANDARD_ACCESS_LEVELS = [
   { text: 'User', link: 'User' },
@@ -63,7 +66,14 @@ export default {
       return this.person?.PersonId ?? '';
     },
     hemaRatingId() {
-      return this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId ?? '';
+      return getDraftHemaRatingsId(this.person);
+    },
+    hemaRatingValidation() {
+      return validateField('HemaRatingsId', this.hemaRatingId);
+    },
+    hemaRatingLabel() {
+      if (this.hemaRatingValidation.invalid) return `HEMA Rating ID - ${this.hemaRatingValidation.message}`;
+      return 'HEMA Rating ID';
     },
     accessLevels() {
       if (this.userLevel === 'Admin') {

package/src/stories/Templates/PersonManagement/Basic/BasicEdit.vue

@@ -1,172 +1,170 @@
-<template>
-  <section class="mt-2 min-h-80">
-    <div>
-      <div class="flex flex-col mb-4">
-        <TitledInput
-          :inputValue="person.DisplayName || ''"
-          placeholder="Enter Display Name"
-          :invalid="validation.DisplayName.invalid"
-          :title="
-            validation.DisplayName.invalid ? `DisplayName Name - ${validation.DisplayName.message}` : 'Display Name'
-          "
-          @update:value="emitUpdate('DisplayName', $event)"
-        />
-      </div>
-
-      <div class="flex flex-col mb-4">
-        <TitledInput
-          :inputValue="getLegalName"
-          placeholder="Enter Your Legal Name"
-          :invalid="validation.LegalName.invalid"
-          :title="
-            validation.LegalName.invalid
-              ? `Legal Name - ${validation.LegalName.message}`
-              : 'Legal Name (not shown on site)'
-          "
-          @update:value="emitUpdate('LegalName', $event)"
-        />
-      </div>
-
-      <div class="flex flex-col mb-4">
-        <BaseText text="Club Name" size="sm" color="quaternary" />
-        <DropDownMenu
-          :label="formattedClubs.length < 2 ? 'Select Club' : ''"
-          :items="formattedClubs"
-          :selectedItem="getClubName"
-          class="pb-2"
-          @update:selectedItem="emitUpdate('Club', { Name: $event.text, ClubId: $event.link })"
-          width="w-full"
-          dropDownWidth="w-full"
-        />
-      </div>
-
-      <div class="flex flex-col mb-4">
-        <BaseText text="Preferred Pronouns" size="sm" color="quaternary" />
-        <DropDownMenu
-          :label="getPronounLabel"
-          :items="pronouns"
-          class="pb-2"
-          :selectedItem="getSelectedPronouns"
-          @update:selectedItem="emitUpdate('Pronouns', $event.text)"
-          width="w-full"
-          dropDownWidth="w-full"
-        />
-      </div>
-
-      <div class="flex flex-col mb-4">
-        <TitledInput
-          :inputValue="getEmail || ''"
-          placeholder="Enter Your Email"
-          :invalid="validation.EmailAddress.invalid"
-          :title="
-            validation.EmailAddress.invalid ? `Email Address - ${validation.EmailAddress.message}` : 'Email Address'
-          "
-          @update:value="emitUpdate('EmailAddress', $event)"
-        />
-      </div>
-
-      <div class="border-b border-dropdownSelect mt-6">
-        <BaseText color="quinary" size="sm" text="PROFILE USE" weight="normal" data-testid="text-registration" />
-      </div>
-
-      <div class="my-4 w-full">
-        <BaseText
-          color="quinary"
-          size="sm"
-          text="Your information belongs to you..."
-          weight="normal"
-          data-testid="text-registration"
-          class="mb-4"
-        />
-
-        <Toggle
-          :checked="person.ShowData"
-          label="Allow your name and profile image to be displayed on M² Website?"
-          :labelLeft="false"
-          @update:checked="emitUpdate('ShowData', $event)"
-        />
-
-        <Toggle
-          :checked="person.ShareData"
-          label="Share information with 3rd Parties? (like: Hema Ratings)"
-          :labelLeft="false"
-          @update:checked="emitUpdate('ShareData', $event)"
-        />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
-import Toggle from '../../../Molecules/Inputs/Toggle/Toggle.vue';
-
-export default {
-  name: 'BasicEdit',
-  emits: ['update:person'], // Generic emit event
-  components: { Toggle, DropDownMenu, BaseText, TitledInput },
-  props: {
-    person: {
-      type: Object,
-      required: true
-    },
-    fencingClubs: {
-      type: Array,
-      default: () => []
-    },
-    validation: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      pronouns: [
-        { text: 'He/Him', link: 'He/Him' },
-        { text: 'She/Her', link: 'She/Her' },
-        { text: 'They/Them', link: 'They/Them' },
-        { text: 'Other', link: 'Other' }
-      ]
-    };
-  },
-  computed: {
-    formattedClubs() {
-      return this.fencingClubs.map(club => ({
-        text: club.Name,
-        link: club.ClubId.toString()
-      }));
-    },
-    getLegalName() {
-      if (!this.person.FirstName && !this.person.LastName) {
-        return ``;
-      }
-      return `${this.person.FirstName} ${this.person.LastName}`;
-    },
-    getClubName() {
-      return this.person?.Club
-        ? { text: this.person.Club.Name, link: this.person.Club.ClubId }
-        : { text: 'No Club', link: null };
-    },
-    getSelectedPronouns() {
-      if (!this.person.Pronouns) {
-        return { text: 'He/Him', link: 'He/Him' };
-      }
-      return { text: this.person.Pronouns, link: this.person.Pronouns };
-    },
-    getEmail() {
-      const primaryEmail = this.person.PersonEmails?.find(e => e.IsPrimary === true);
-      return primaryEmail ? primaryEmail.EmailAddress : '';
-    },
-    getPronounLabel() {
-      return this.person.Pronouns ? '' : 'Please select your preferred pronouns';
-    }
-  },
-  methods: {
-    emitUpdate(field, value) {
-      this.$emit('update:person', { field, value });
-    }
-  }
-};
-</script>
+<template>
+  <section class="mt-2 min-h-80">
+    <div>
+      <div class="flex flex-col mb-4">
+        <TitledInput
+          :inputValue="person.DisplayName || ''"
+          placeholder="Enter Display Name"
+          :invalid="validation.DisplayName.invalid"
+          :title="
+            validation.DisplayName.invalid ? `DisplayName Name - ${validation.DisplayName.message}` : 'Display Name'
+          "
+          @update:value="emitUpdate('DisplayName', $event)"
+        />
+      </div>
+
+      <div class="flex flex-col mb-4">
+        <TitledInput
+          :inputValue="getLegalName"
+          placeholder="Enter Your Legal Name"
+          :invalid="validation.LegalName.invalid"
+          :title="
+            validation.LegalName.invalid
+              ? `Legal Name - ${validation.LegalName.message}`
+              : 'Legal Name (not shown on site)'
+          "
+          @update:value="emitUpdate('LegalName', $event)"
+        />
+      </div>
+
+      <div class="flex flex-col mb-4">
+        <BaseText text="Club Name" size="sm" color="quaternary" />
+        <DropDownMenu
+          :label="formattedClubs.length < 2 ? 'Select Club' : ''"
+          :items="formattedClubs"
+          :selectedItem="getClubName"
+          class="pb-2"
+          @update:selectedItem="emitUpdate('Club', { Name: $event.text, ClubId: $event.link })"
+          width="w-full"
+          dropDownWidth="w-full"
+        />
+      </div>
+
+      <div class="flex flex-col mb-4">
+        <BaseText text="Preferred Pronouns" size="sm" color="quaternary" />
+        <DropDownMenu
+          :label="getPronounLabel"
+          :items="pronouns"
+          class="pb-2"
+          :selectedItem="getSelectedPronouns"
+          @update:selectedItem="emitUpdate('Pronouns', $event.text)"
+          width="w-full"
+          dropDownWidth="w-full"
+        />
+      </div>
+
+      <div class="flex flex-col mb-4">
+        <TitledInput
+          :inputValue="getEmail || ''"
+          inputType="email"
+          placeholder="Enter Your Email"
+          :invalid="validation.EmailAddress.invalid"
+          :title="
+            validation.EmailAddress.invalid ? `Email Address - ${validation.EmailAddress.message}` : 'Email Address'
+          "
+          @update:value="emitUpdate('EmailAddress', $event)"
+        />
+      </div>
+
+      <div class="border-b border-dropdownSelect mt-6">
+        <BaseText color="quinary" size="sm" text="PROFILE USE" weight="normal" data-testid="text-registration" />
+      </div>
+
+      <div class="my-4 w-full">
+        <BaseText
+          color="quinary"
+          size="sm"
+          text="Your information belongs to you..."
+          weight="normal"
+          data-testid="text-registration"
+          class="mb-4"
+        />
+
+        <Toggle
+          :checked="person.ShowData"
+          label="Allow your name and profile image to be displayed on M² Website?"
+          :labelLeft="false"
+          @update:checked="emitUpdate('ShowData', $event)"
+        />
+
+        <Toggle
+          :checked="person.ShareData"
+          label="Share information with 3rd Parties? (like: Hema Ratings)"
+          :labelLeft="false"
+          @update:checked="emitUpdate('ShareData', $event)"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
+import Toggle from '../../../Molecules/Inputs/Toggle/Toggle.vue';
+import { getDraftEmailAddress, getDraftLegalName } from '../PersonManagementDraft.js';
+
+export default {
+  name: 'BasicEdit',
+  emits: ['update:person'], // Generic emit event
+  components: { Toggle, DropDownMenu, BaseText, TitledInput },
+  props: {
+    person: {
+      type: Object,
+      required: true
+    },
+    fencingClubs: {
+      type: Array,
+      default: () => []
+    },
+    validation: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      pronouns: [
+        { text: 'He/Him', link: 'He/Him' },
+        { text: 'She/Her', link: 'She/Her' },
+        { text: 'They/Them', link: 'They/Them' },
+        { text: 'Other', link: 'Other' }
+      ]
+    };
+  },
+  computed: {
+    formattedClubs() {
+      return this.fencingClubs.map(club => ({
+        text: club.Name,
+        link: club.ClubId.toString()
+      }));
+    },
+    getLegalName() {
+      return getDraftLegalName(this.person);
+    },
+    getClubName() {
+      return this.person?.Club
+        ? { text: this.person.Club.Name, link: this.person.Club.ClubId }
+        : { text: 'No Club', link: null };
+    },
+    getSelectedPronouns() {
+      if (!this.person.Pronouns) {
+        return { text: 'He/Him', link: 'He/Him' };
+      }
+      return { text: this.person.Pronouns, link: this.person.Pronouns };
+    },
+    getEmail() {
+      return getDraftEmailAddress(this.person);
+    },
+    getPronounLabel() {
+      return this.person.Pronouns ? '' : 'Please select your preferred pronouns';
+    }
+  },
+  methods: {
+    emitUpdate(field, value) {
+      this.$emit('update:person', { field, value });
+    }
+  }
+};
+</script>