@dcrackel/hematournamentui 1.0.708 → 1.0.709

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>

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

@@ -1,103 +1,156 @@
-import PersonManagement from './PersonManagement.vue';
-import clubGetAllMock from '../../../mocks/clubGetAllMock.js';
-import personsMock from '../../../mocks/personsMock.js';
-import attendance from '../../../mocks/getAttendance.js';
-import allPersonsMock from '../../../mocks/personGetAllMock.js';
-
-export default {
-  title: 'Templates/PersonManagement/PersonManagement',
-  component: PersonManagement,
-  tags: ['autodocs'],
-  args: {
-    personProfile: personsMock,
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    uploadImageName: 'profile-test.png',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'https://meyersquaredimages.com/uploads/',
-    userLevel: 'user'
-  },
-  argTypes: {
-    personProfile: { control: { type: 'object' } },
-    fencingClubs: { control: { type: 'object' } },
-    attendance: { control: { type: 'object' } },
-    uploadImageName: { control: { type: 'text' } },
-    uploadServer: { control: { type: 'text' } },
-    imageServer: { control: { type: 'text' } },
-    userLevel: { control: { type: 'string' } }
-  }
-};
-
-export const Default = {
-  args: {
-    personProfile: personsMock[1],
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'User'
-  }
-};
-
-export const admin = {
-  args: {
-    personProfile: personsMock[1],
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    people: allPersonsMock,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Admin'
-  }
-};
-
-export const clubAdmin = {
-  args: {
-    personProfile: personsMock[1],
-    fencingClubs: clubGetAllMock,
-    people: allPersonsMock,
-    attendance: attendance,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Club'
-  }
-};
-
-export const adminWithLoading = {
-  args: {
-    personProfile: personsMock,
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    people: allPersonsMock,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Admin',
-    loading: true
-  }
-};
-
-export const emptyProfile = {
-  args: {
-    personProfile: {
-      DisplayName: '',
-      LegalName: '',
-      EmailAddress: '',
-      Club: { Name: 'No Club Affiliation ', ClubId: '17' },
-      AccessLevel: 'User',
-      ShareData: true,
-      ShowData: true
-    },
-    fencingClubs: clubGetAllMock,
-    attendance: attendance,
-    people: allPersonsMock,
-    uploadImageName: 'profile-test',
-    uploadServer: 'http://localhost:3000/api/upload/',
-    imageServer: 'http://localhost:3000/uploads/',
-    userLevel: 'Admin',
-    loading: false
-  }
-};
+import { ref } from 'vue';
+import PersonManagement from './PersonManagement.vue';
+import clubGetAllMock from '../../../mocks/clubGetAllMock.js';
+import personsMock from '../../../mocks/personsMock.js';
+import attendance from '../../../mocks/getAttendance.js';
+import allPersonsMock from '../../../mocks/personGetAllMock.js';
+
+export default {
+  title: 'Templates/PersonManagement/PersonManagement',
+  component: PersonManagement,
+  tags: ['autodocs'],
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'https://meyersquaredimages.com/uploads/',
+    userLevel: 'User',
+    saving: false,
+    disabled: false,
+    draftResetKey: 0
+  },
+  argTypes: {
+    personProfile: { control: { type: 'object' } },
+    fencingClubs: { control: { type: 'object' } },
+    attendance: { control: { type: 'object' } },
+    uploadImageName: { control: { type: 'text' } },
+    uploadServer: { control: { type: 'text' } },
+    imageServer: { control: { type: 'text' } },
+    userLevel: { control: { type: 'select' }, options: ['User', 'Club', 'Admin'] },
+    saving: { control: 'boolean', description: 'Disables editing and actions while the parent saves.' },
+    disabled: { control: 'boolean', description: 'Disables the entire profile form.' },
+    draftResetKey: { control: 'number', description: 'Change after a confirmed reload to replace the draft.' },
+    'submit:person': { action: 'submit:person' },
+    'update:image': { action: 'update:image' },
+    'error:image': { action: 'error:image' }
+  }
+};
+
+export const Default = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'User'
+  }
+};
+
+export const admin = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin'
+  }
+};
+
+export const clubAdmin = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    people: allPersonsMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Club'
+  }
+};
+
+export const adminWithLoading = {
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin',
+    loading: true
+  }
+};
+
+export const Saving = {
+  args: { ...admin.args, saving: true }
+};
+
+export const Disabled = {
+  args: { ...Default.args, disabled: true }
+};
+
+export const CurrentDraft = {
+  args: {
+    ...admin.args,
+    personProfile: {
+      ...personsMock[1],
+      LegalName: 'Updated Legal Name',
+      EmailAddress: 'draft@example.com',
+      HemaRatingsId: null,
+      Images: []
+    }
+  }
+};
+
+export const ResetDraft = {
+  args: { ...admin.args },
+  render: args => ({
+    components: { PersonManagement },
+    setup() {
+      const revision = ref(0);
+      const resetDraft = () => {
+        revision.value += 1;
+      };
+      return { args, revision, resetDraft };
+    },
+    template: `
+      <div>
+        <button type="button" class="mb-4 rounded border border-dropdownSelect p-2 text-quinary" @click="resetDraft">
+          Reset unsaved changes to supplied profile
+        </button>
+        <PersonManagement v-bind="args" :draftResetKey="revision" />
+      </div>
+    `
+  })
+};
+
+export const emptyProfile = {
+  args: {
+    personProfile: {
+      DisplayName: '',
+      LegalName: '',
+      EmailAddress: '',
+      Club: { Name: 'No Club Affiliation ', ClubId: '17' },
+      AccessLevel: 'User',
+      ShareData: true,
+      ShowData: true
+    },
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin',
+    loading: false
+  }
+};