@dcrackel/hematournamentui 1.0.712 → 1.0.713

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

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

@@ -1,101 +1,101 @@
-<template>
-  <section class="mt-2">
-    <div class="flex flex-col mb-4">
-      <TitledInput
-        :inputValue="personId"
-        :inputType="'number'"
-        placeholder="Meyer Squared ID"
-        title="Meyer Squared ID"
-        :disabled="true"
-        aria-disabled="true"
-      />
-    </div>
-
-    <div class="flex flex-col mb-4">
-      <TitledInput
-        :inputValue="hemaRatingId"
-        inputType="text"
-        placeholder="HEMA Rating ID"
-        :invalid="hemaRatingValidation.invalid"
-        :title="hemaRatingLabel"
-        @update:value="emitUpdate('HemaRatingsId', $event)"
-      />
-    </div>
-
-    <div class="flex flex-col mb-4">
-      <BaseText text="Access Level" size="sm" color="quaternary" />
-      <DropDownMenu
-        :key="accessLevelDropdownKey"
-        :label="accessLevelLabel"
-        :items="accessLevels"
-        class="pb-2"
-        :selectedItem="selectedAccessLevel"
-        @update:selectedItem="emitUpdate('AccessLevel', $event.text)"
-        width="w-full"
-        dropDownWidth="w-full"
-      />
-    </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 { getDraftHemaRatingsId } from '../../PersonManagementDraft.js';
-import { validateField } from '../../../../Util/Validations/PersonManagementValidations.js';
-
-const STANDARD_ACCESS_LEVELS = [
-  { text: 'User', link: 'User' },
-  { text: 'Director', link: 'Director' },
-  { text: 'Club', link: 'Club' }
-];
-
-const ADMIN_ACCESS_LEVELS = [...STANDARD_ACCESS_LEVELS, { text: 'Admin', link: 'Admin' }];
-
-export default {
-  name: 'Administration',
-  emits: ['update:person'],
-  components: { TitledInput, BaseText, DropDownMenu },
-  props: {
-    person: { type: Object, required: true },
-    userLevel: { type: String, required: true }
-  },
-  computed: {
-    personId() {
-      return this.person?.PersonId ?? '';
-    },
-    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') {
-        return ADMIN_ACCESS_LEVELS;
-      }
-
-      return STANDARD_ACCESS_LEVELS;
-    },
-    selectedAccessLevel() {
-      return { text: this.person.AccessLevel, link: this.person.AccessLevel };
-    },
-    accessLevelLabel() {
-      return this.person.AccessLevel ? '' : 'Select Access Level';
-    },
-    accessLevelDropdownKey() {
-      return `${this.userLevel}-${this.person.AccessLevel || 'none'}`;
-    }
-  },
-  methods: {
-    emitUpdate(field, value) {
-      this.$emit('update:person', { field, value });
-    }
-  }
-};
-</script>
+<template>
+  <section class="mt-2">
+    <div class="flex flex-col mb-4">
+      <TitledInput
+        :inputValue="personId"
+        :inputType="'number'"
+        placeholder="Meyer Squared ID"
+        title="Meyer Squared ID"
+        :disabled="true"
+        aria-disabled="true"
+      />
+    </div>
+
+    <div class="flex flex-col mb-4">
+      <TitledInput
+        :inputValue="hemaRatingId"
+        inputType="text"
+        placeholder="HEMA Rating ID"
+        :invalid="hemaRatingValidation.invalid"
+        :title="hemaRatingLabel"
+        @update:value="emitUpdate('HemaRatingsId', $event)"
+      />
+    </div>
+
+    <div class="flex flex-col mb-4">
+      <BaseText text="Access Level" size="sm" color="quaternary" />
+      <DropDownMenu
+        :key="accessLevelDropdownKey"
+        :label="accessLevelLabel"
+        :items="accessLevels"
+        class="pb-2"
+        :selectedItem="selectedAccessLevel"
+        @update:selectedItem="emitUpdate('AccessLevel', $event.text)"
+        width="w-full"
+        dropDownWidth="w-full"
+      />
+    </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 { getDraftHemaRatingsId } from '../../PersonManagementDraft.js';
+import { validateField } from '../../../../Util/Validations/PersonManagementValidations.js';
+
+const STANDARD_ACCESS_LEVELS = [
+  { text: 'User', link: 'User' },
+  { text: 'Director', link: 'Director' },
+  { text: 'Club', link: 'Club' }
+];
+
+const ADMIN_ACCESS_LEVELS = [...STANDARD_ACCESS_LEVELS, { text: 'Admin', link: 'Admin' }];
+
+export default {
+  name: 'Administration',
+  emits: ['update:person'],
+  components: { TitledInput, BaseText, DropDownMenu },
+  props: {
+    person: { type: Object, required: true },
+    userLevel: { type: String, required: true }
+  },
+  computed: {
+    personId() {
+      return this.person?.PersonId ?? '';
+    },
+    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') {
+        return ADMIN_ACCESS_LEVELS;
+      }
+
+      return STANDARD_ACCESS_LEVELS;
+    },
+    selectedAccessLevel() {
+      return { text: this.person.AccessLevel, link: this.person.AccessLevel };
+    },
+    accessLevelLabel() {
+      return this.person.AccessLevel ? '' : 'Select Access Level';
+    },
+    accessLevelDropdownKey() {
+      return `${this.userLevel}-${this.person.AccessLevel || 'none'}`;
+    }
+  },
+  methods: {
+    emitUpdate(field, value) {
+      this.$emit('update:person', { field, value });
+    }
+  }
+};
+</script>

package/src/stories/Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.stories.js

@@ -1,71 +1,71 @@
-import FencerAdmin from './FencerAdmin.vue';
-import personsMock from '../../../../../mocks/personsMock.js';
-import peopleMock from '../../../../../mocks/personGetAllMock.js';
-
-export default {
-  title: 'Templates/PersonManagement/Admin/FencerAdmin',
-  component: FencerAdmin,
-  tags: ['autodocs'],
-  args: {
-    person: personsMock[1],
-    people: peopleMock,
-    userLevel: 'Club',
-    canMergeAccounts: null
-  },
-  argTypes: {
-    person: { control: { type: 'object' } },
-    people: { control: { type: 'object' } },
-    userLevel: {
-      control: { type: 'select' },
-      options: ['User', 'Director', 'Club', 'Admin']
-    },
-    canMergeAccounts: { control: { type: 'boolean' } },
-    'update:person': { action: 'update:person' },
-    'merge:merge': { action: 'merge:merge' }
-  }
-};
-
-export const ClubUser = {
-  args: {
-    person: {
-      ...personsMock[1],
-      AccessLevel: 'Club'
-    },
-    people: peopleMock,
-    userLevel: 'Club'
-  }
-};
-
-export const AdminViewingUser = {
-  args: {
-    person: {
-      ...personsMock[1],
-      AccessLevel: 'User'
-    },
-    people: peopleMock,
-    userLevel: 'Admin'
-  }
-};
-
-export const AdminViewingAdmin = {
-  args: {
-    person: {
-      ...personsMock[1],
-      AccessLevel: 'Admin'
-    },
-    people: peopleMock,
-    userLevel: 'Admin'
-  }
-};
-
-export const MergeDisabledByParent = {
-  args: {
-    person: {
-      ...personsMock[1],
-      AccessLevel: 'User'
-    },
-    people: peopleMock,
-    userLevel: 'Admin',
-    canMergeAccounts: false
-  }
-};
+import FencerAdmin from './FencerAdmin.vue';
+import personsMock from '../../../../../mocks/personsMock.js';
+import peopleMock from '../../../../../mocks/personGetAllMock.js';
+
+export default {
+  title: 'Templates/PersonManagement/Admin/FencerAdmin',
+  component: FencerAdmin,
+  tags: ['autodocs'],
+  args: {
+    person: personsMock[1],
+    people: peopleMock,
+    userLevel: 'Club',
+    canMergeAccounts: null
+  },
+  argTypes: {
+    person: { control: { type: 'object' } },
+    people: { control: { type: 'object' } },
+    userLevel: {
+      control: { type: 'select' },
+      options: ['User', 'Director', 'Club', 'Admin']
+    },
+    canMergeAccounts: { control: { type: 'boolean' } },
+    'update:person': { action: 'update:person' },
+    'merge:merge': { action: 'merge:merge' }
+  }
+};
+
+export const ClubUser = {
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: 'Club'
+    },
+    people: peopleMock,
+    userLevel: 'Club'
+  }
+};
+
+export const AdminViewingUser = {
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: 'User'
+    },
+    people: peopleMock,
+    userLevel: 'Admin'
+  }
+};
+
+export const AdminViewingAdmin = {
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: 'Admin'
+    },
+    people: peopleMock,
+    userLevel: 'Admin'
+  }
+};
+
+export const MergeDisabledByParent = {
+  args: {
+    person: {
+      ...personsMock[1],
+      AccessLevel: 'User'
+    },
+    people: peopleMock,
+    userLevel: 'Admin',
+    canMergeAccounts: false
+  }
+};

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

@@ -1,86 +1,86 @@
-<template>
-  <section class="mt-2 min-h-80">
-    <div class="pb-6">
-      <BaseText text="Administration" size="lg" color="primary" />
-      <div class="mt-3">
-        <Administration :person="person" :userLevel="userLevel" @update:person="$emit('update:person', $event)" />
-      </div>
-    </div>
-
-    <div v-if="showMergeAccounts" class="pt-6 border-t border-dropdownSelect">
-      <button
-        :id="mergeAccountsToggleId"
-        type="button"
-        class="w-full flex items-center justify-between text-left"
-        :aria-expanded="mergeOpen"
-        :aria-controls="mergeAccountsPanelId"
-        @click="toggleMergeOpen"
-      >
-        <div>
-          <BaseText text="Merge Accounts" size="lg" color="primary" />
-          <BaseText
-            class="mt-1"
-            text="Merge other fencer accounts into this one. This will move all references and delete the duplicate accounts."
-            size="sm"
-            color="quaternary"
-          />
-        </div>
-
-        <span
-          class="fa-solid fa-chevron-down ml-4 text-quaternary transition-transform duration-200"
-          :class="mergeOpen ? 'rotate-180' : 'rotate-0'"
-          aria-hidden="true"
-        />
-      </button>
-
-      <div v-if="mergeOpen" :id="mergeAccountsPanelId" class="mt-4">
-        <MergeAccounts :person="person" :people="people" @merge:merge="emitMergeAccounts" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from '../../../../Atoms/Text/BaseText.vue';
-import Administration from '../Administration/Administration.vue';
-import MergeAccounts from '../MergeAccounts/MergeAccounts.vue';
-
-export default {
-  name: 'FencerAdmin',
-  emits: ['update:person', 'merge:merge'],
-  components: { BaseText, Administration, MergeAccounts },
-  props: {
-    person: { type: Object, required: true },
-    people: { type: Array, required: true },
-    userLevel: { type: String, required: true },
-    canMergeAccounts: { type: Boolean, default: null }
-  },
-  data() {
-    return {
-      mergeOpen: false
-    };
-  },
-  computed: {
-    showMergeAccounts() {
-      return this.canMergeAccounts ?? this.userLevel === 'Admin';
-    },
-    personIdForDom() {
-      return this.person?.PersonId ?? 'unknown';
-    },
-    mergeAccountsToggleId() {
-      return `merge-accounts-toggle-${this.personIdForDom}`;
-    },
-    mergeAccountsPanelId() {
-      return `merge-accounts-panel-${this.personIdForDom}`;
-    }
-  },
-  methods: {
-    toggleMergeOpen() {
-      this.mergeOpen = !this.mergeOpen;
-    },
-    emitMergeAccounts(data) {
-      this.$emit('merge:merge', data);
-    }
-  }
-};
-</script>
+<template>
+  <section class="mt-2 min-h-80">
+    <div class="pb-6">
+      <BaseText text="Administration" size="lg" color="primary" />
+      <div class="mt-3">
+        <Administration :person="person" :userLevel="userLevel" @update:person="$emit('update:person', $event)" />
+      </div>
+    </div>
+
+    <div v-if="showMergeAccounts" class="pt-6 border-t border-dropdownSelect">
+      <button
+        :id="mergeAccountsToggleId"
+        type="button"
+        class="w-full flex items-center justify-between text-left"
+        :aria-expanded="mergeOpen"
+        :aria-controls="mergeAccountsPanelId"
+        @click="toggleMergeOpen"
+      >
+        <div>
+          <BaseText text="Merge Accounts" size="lg" color="primary" />
+          <BaseText
+            class="mt-1"
+            text="Merge other fencer accounts into this one. This will move all references and delete the duplicate accounts."
+            size="sm"
+            color="quaternary"
+          />
+        </div>
+
+        <span
+          class="fa-solid fa-chevron-down ml-4 text-quaternary transition-transform duration-200"
+          :class="mergeOpen ? 'rotate-180' : 'rotate-0'"
+          aria-hidden="true"
+        />
+      </button>
+
+      <div v-if="mergeOpen" :id="mergeAccountsPanelId" class="mt-4">
+        <MergeAccounts :person="person" :people="people" @merge:merge="emitMergeAccounts" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import Administration from '../Administration/Administration.vue';
+import MergeAccounts from '../MergeAccounts/MergeAccounts.vue';
+
+export default {
+  name: 'FencerAdmin',
+  emits: ['update:person', 'merge:merge'],
+  components: { BaseText, Administration, MergeAccounts },
+  props: {
+    person: { type: Object, required: true },
+    people: { type: Array, required: true },
+    userLevel: { type: String, required: true },
+    canMergeAccounts: { type: Boolean, default: null }
+  },
+  data() {
+    return {
+      mergeOpen: false
+    };
+  },
+  computed: {
+    showMergeAccounts() {
+      return this.canMergeAccounts ?? this.userLevel === 'Admin';
+    },
+    personIdForDom() {
+      return this.person?.PersonId ?? 'unknown';
+    },
+    mergeAccountsToggleId() {
+      return `merge-accounts-toggle-${this.personIdForDom}`;
+    },
+    mergeAccountsPanelId() {
+      return `merge-accounts-panel-${this.personIdForDom}`;
+    }
+  },
+  methods: {
+    toggleMergeOpen() {
+      this.mergeOpen = !this.mergeOpen;
+    },
+    emitMergeAccounts(data) {
+      this.$emit('merge:merge', data);
+    }
+  }
+};
+</script>