@dcrackel/hematournamentui 1.0.708 → 1.0.709

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

@@ -1,213 +1,329 @@
-<template>
-  <section v-if="loading">
-    <PersonManagementSkeleton />
-  </section>
-  <section v-if="!loading" class="flex px-3 bg-neutral" id="person-management">
-    <div class="rounded-lg md:p-9 w-full">
-      <div class="w-full flex flex-row justify-center mb-4">
-        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="getHeaderText" :weight="'normal'" />
-      </div>
-      <div class="w-full flex-row justify-center mb-4 flex drop-shadow">
-        <ImageCropper
-          :urlToImage="getImageURL"
-          :uploadImageName="uploadImageName"
-          :uploadServer="uploadServer"
-          :imageServer="imageServer"
-          :customClass="getClass"
-          :isProfile="true"
-          customSkeletonClass="w-32 h-32 border-2 border-dashed rounded-full animate-pulse bg-quaternaryHighlight"
-          :cropperOptions="{
-            aspectRatio: 4 / 4,
-            autoCropArea: 1,
-            viewMode: 1,
-            movable: true,
-            zoomable: true
-          }"
-          @update:url="handleProfilePicUpdate"
-        />
-      </div>
-
-      <EditEventsTopMenu :tabs="personProfileTabs(userLevel)" :currentTab="currentTab" @tabMenuClick="handleTab" />
-      <BasicEdit
-        v-if="currentTab === 'Basic'"
-        :person="person"
-        :fencingClubs="fencingClubs"
-        :validation="validation"
-        @update:person="updatePerson"
-      />
-      <FencerAdmin
-        v-if="currentTab === 'Admin'"
-        :person="person"
-        :people="people"
-        :userLevel="userLevel"
-        @update:person="updatePerson"
-        @merge:merge="doMerge"
-      />
-      <Attendance v-if="currentTab === 'Stats'" :attendance="attendance" />
-      <Attendance v-if="currentTab === 'Attendance'" :attendance="attendance" />
-
-      <div v-if="showButtons" class="flex flex-row justify-end mt-8">
-        <BaseButton
-          v-if="userLevel === 'Admin'"
-          class="mr-8"
-          color="warn"
-          label="Delete"
-          size="sm"
-          type="secondary"
-          @buttonClick="handleDelete"
-        />
-        <BaseButton
-          class="w-full"
-          color="neutral"
-          :label="saveButtonLabel"
-          size="sm"
-          type="secondary"
-          @buttonClick="handleSubmit"
-        />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import ImageCropper from '../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
-import EditEventsTopMenu from '../../Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
-import { personProfileTabs } from '../../Util/tabs.js';
-import PersonManagementSkeleton from '../../Organisms/Skeletons/PersonManagement/PersonManagementSkeleton.vue';
-import BaseText from '../../Atoms/Text/BaseText.vue';
-import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import BasicEdit from './Basic/BasicEdit.vue';
-import Attendance from '../../Templates/PersonManagement/Attendance/Attendance.vue';
-import FencerAdmin from '../../Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.vue';
-import { validateField } from '../../Util/Validations/PersonManagementValidations.js';
-
-export default {
-  name: 'PersonManagement',
-  emits: ['submit:person', 'delete:person', 'update:image', 'merge:merge'],
-  components: {
-    FencerAdmin,
-    Attendance,
-    BasicEdit,
-    BaseButton,
-    BaseText,
-    PersonManagementSkeleton,
-    EditEventsTopMenu,
-    ImageCropper
-  },
-  props: {
-    personProfile: {
-      type: Object,
-      default: () => ({})
-    },
-    fencingClubs: {
-      type: Array,
-      default: () => []
-    },
-    people: {
-      type: Array,
-      default: () => []
-    },
-    attendance: {
-      type: Array,
-      default: () => []
-    },
-    uploadImageName: {
-      type: String,
-      default: 'profile-pic'
-    },
-    uploadServer: {
-      type: String
-    },
-    imageServer: {
-      type: String
-    },
-    userLevel: {
-      type: String,
-      default: 'user'
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    saveButtonLabel: {
-      type: String,
-      default: 'Save'
-    }
-  },
-  data() {
-    const firstName = this.personProfile.FirstName || '';
-    const lastName = this.personProfile.LastName || '';
-    return {
-      person: { ...this.personProfile, LegalName: this.personProfile.LegalName || `${firstName} ${lastName}`.trim() },
-      currentTab: 'Basic',
-      validation: {
-        DisplayName: { invalid: false, message: '' },
-        LegalName: { invalid: false, message: '' },
-        EmailAddress: { invalid: false, message: '' },
-        Club: { invalid: false, message: '' }
-      }
-    };
-  },
-  computed: {
-    getHeaderText() {
-      return this.person.DisplayName ? this.person.DisplayName : 'Fencer Profile';
-    },
-    getImageURL() {
-      return this.person.Images ? this.person.Images[0].URL : '';
-    },
-    getClass() {
-      return 'border-2 border-dashed rounded-full w-32 h-32';
-    },
-    showButtons() {
-      return (
-        ((this.userLevel === 'Admin' || this.userLevel === 'Club') &&
-          (this.currentTab === 'Basic' || this.currentTab === 'Admin')) ||
-        (this.userLevel === 'User' && this.currentTab === 'Basic')
-      );
-    }
-  },
-  methods: {
-    personProfileTabs,
-    handleProfilePicUpdate(url) {
-      this.person.ProfileImage = url;
-      this.$emit('update:image', url);
-    },
-    setClub() {
-      this.person.ClubId = this.person.Club?.ClubId ?? 17;
-    },
-    handleSubmit() {
-      this.setClub();
-      if (this.validateAllFields()) {
-        const nameParts = this.person.LegalName.trim().split(' ');
-        this.person.FirstName = nameParts[0] || '';
-        this.person.LastName = nameParts.slice(1).join(' ') || '';
-        this.$emit('submit:person', this.person);
-      }
-    },
-    handleDelete() {
-      this.$emit('delete:person', this.person);
-    },
-    updatePerson({ field, value }) {
-      this.person = { ...this.person, [field]: value };
-
-      if (this.validation[field]) {
-        this.validation[field] = validateField(field, value);
-      }
-    },
-    validateAllFields() {
-      const fieldsToValidate = ['DisplayName', 'LegalName', 'EmailAddress'];
-      fieldsToValidate.forEach(field => {
-        this.validation[field] = validateField(field, this.person[field]);
-      });
-
-      return !Object.values(this.validation).some(field => field.invalid);
-    },
-    handleTab(tabId) {
-      this.currentTab = tabId;
-    },
-    doMerge(data) {
-      this.$emit('merge:merge', data);
-    }
-  }
-};
-</script>
+<template>
+  <section v-if="loading">
+    <PersonManagementSkeleton />
+  </section>
+  <section
+    v-if="!loading"
+    class="flex flex-col px-3 bg-neutral"
+    id="person-management"
+    :aria-busy="saving || imageUploading"
+  >
+    <p v-if="saving" role="status" class="text-quinary text-sm">Saving profile…</p>
+    <fieldset
+      :key="draftVersion"
+      :disabled="isFormDisabled"
+      :inert="isFormDisabled"
+      class="min-w-0 rounded-lg md:p-9 w-full border-0 p-0"
+    >
+      <div class="w-full flex flex-row justify-center mb-4">
+        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="getHeaderText" :weight="'normal'" />
+      </div>
+      <div class="w-full flex-row justify-center mb-4 flex drop-shadow">
+        <ImageCropper
+          :urlToImage="getImageURL"
+          :uploadImageName="uploadImageName"
+          :uploadServer="uploadServer"
+          :imageServer="imageServer"
+          :customClass="getClass"
+          :isProfile="true"
+          :disabled="isFormDisabled"
+          customSkeletonClass="w-32 h-32 border-2 border-dashed rounded-full animate-pulse bg-quaternaryHighlight"
+          :cropperOptions="{
+            aspectRatio: 4 / 4,
+            autoCropArea: 1,
+            viewMode: 1,
+            movable: true,
+            zoomable: true
+          }"
+          @update:url="handleProfilePicUpdate"
+          @update:uploading="handleImageUploading"
+          @error:load="handleImageLoadError"
+          @error:upload="handleImageUploadError"
+        />
+      </div>
+
+      <p v-if="imageUploading" role="status" class="mb-4 text-sm text-quinary">Uploading profile image…</p>
+      <p v-if="imageErrorMessage" role="alert" class="mb-4 text-sm text-alarm">{{ imageErrorMessage }}</p>
+
+      <EditEventsTopMenu :tabs="personProfileTabs(userLevel)" :currentTab="currentTab" @tabMenuClick="handleTab" />
+      <div
+        v-if="showValidationSummary"
+        role="alert"
+        data-testid="profile-validation-summary"
+        class="my-4 rounded-lg border border-alarm p-3 text-sm text-alarm"
+      >
+        <p class="font-semibold">Please correct these fields before saving:</p>
+        <ul class="mt-2 list-disc pl-5">
+          <li v-for="error in validationErrors" :key="error.field">
+            <button
+              type="button"
+              class="text-left underline"
+              :disabled="!canOpenTab(error.tab)"
+              @click="handleTab(error.tab)"
+            >
+              {{ error.label }}: {{ error.message }} ({{ error.tab }} tab)
+            </button>
+          </li>
+        </ul>
+      </div>
+      <BasicEdit
+        v-if="currentTab === 'Basic'"
+        :person="person"
+        :fencingClubs="fencingClubs"
+        :validation="validation"
+        @update:person="updatePerson"
+      />
+      <FencerAdmin
+        v-if="currentTab === 'Admin'"
+        :person="person"
+        :people="people"
+        :userLevel="userLevel"
+        @update:person="updatePerson"
+        @merge:merge="doMerge"
+      />
+      <Attendance v-if="currentTab === 'Stats'" :attendance="attendance" />
+      <Attendance v-if="currentTab === 'Attendance'" :attendance="attendance" />
+
+      <div v-if="showButtons" class="flex flex-row justify-end mt-8">
+        <BaseButton
+          v-if="userLevel === 'Admin'"
+          class="mr-8"
+          color="warn"
+          label="Delete"
+          size="sm"
+          type="secondary"
+          :disabled="isFormDisabled"
+          @buttonClick="handleDelete"
+        />
+        <BaseButton
+          class="w-full"
+          color="neutral"
+          :label="saveButtonLabel"
+          size="sm"
+          type="secondary"
+          :disabled="isSaveDisabled"
+          @buttonClick="handleSubmit"
+        />
+      </div>
+    </fieldset>
+  </section>
+</template>
+
+<script>
+import ImageCropper from '../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
+import EditEventsTopMenu from '../../Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import { personProfileTabs } from '../../Util/tabs.js';
+import PersonManagementSkeleton from '../../Organisms/Skeletons/PersonManagement/PersonManagementSkeleton.vue';
+import BaseText from '../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BasicEdit from './Basic/BasicEdit.vue';
+import Attendance from '../../Templates/PersonManagement/Attendance/Attendance.vue';
+import FencerAdmin from '../../Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.vue';
+import { validateField } from '../../Util/Validations/PersonManagementValidations.js';
+import {
+  createPersonDraft,
+  createPersonValidation,
+  getDraftHemaRatingsId,
+  profileFields
+} from './PersonManagementDraft.js';
+
+export default {
+  name: 'PersonManagement',
+  emits: ['submit:person', 'delete:person', 'update:image', 'merge:merge', 'error:image'],
+  components: {
+    FencerAdmin,
+    Attendance,
+    BasicEdit,
+    BaseButton,
+    BaseText,
+    PersonManagementSkeleton,
+    EditEventsTopMenu,
+    ImageCropper
+  },
+  props: {
+    personProfile: {
+      type: Object,
+      default: () => ({})
+    },
+    fencingClubs: {
+      type: Array,
+      default: () => []
+    },
+    people: {
+      type: Array,
+      default: () => []
+    },
+    attendance: {
+      type: Array,
+      default: () => []
+    },
+    uploadImageName: {
+      type: String,
+      default: 'profile-pic'
+    },
+    uploadServer: {
+      type: String
+    },
+    imageServer: {
+      type: String
+    },
+    userLevel: {
+      type: String,
+      default: 'user'
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    saveButtonLabel: {
+      type: String,
+      default: 'Save'
+    },
+    saving: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    draftResetKey: {
+      type: [String, Number],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      person: createPersonDraft(this.personProfile),
+      currentTab: 'Basic',
+      validation: createPersonValidation(),
+      draftVersion: 0,
+      submitAttempted: false,
+      imageUploading: false,
+      imageErrorMessage: ''
+    };
+  },
+  computed: {
+    profileIdentity() {
+      const id = this.personProfile?.PersonId;
+      return id === undefined || id === null ? null : String(id);
+    },
+    isFormDisabled() {
+      return this.saving || this.disabled;
+    },
+    isSaveDisabled() {
+      return this.isFormDisabled || this.imageUploading;
+    },
+    validationErrors() {
+      return profileFields
+        .filter(({ field }) => this.validation[field]?.invalid)
+        .map(field => ({ ...field, message: this.validation[field.field].message }));
+    },
+    showValidationSummary() {
+      return this.submitAttempted && this.validationErrors.length > 0;
+    },
+    getHeaderText() {
+      return this.person.DisplayName ? this.person.DisplayName : 'Fencer Profile';
+    },
+    getImageURL() {
+      if (this.person.ProfileImage) return this.person.ProfileImage;
+      const images = Array.isArray(this.person.Images) ? this.person.Images : [];
+      const portrait = images.find(image => image?.Type === 'Portrait') ?? images[0];
+      return portrait?.URL ?? '';
+    },
+    getClass() {
+      return 'border-2 border-dashed rounded-full w-32 h-32';
+    },
+    showButtons() {
+      const role = this.userLevel.toLowerCase();
+      return (
+        ((role === 'admin' || role === 'club') && (this.currentTab === 'Basic' || this.currentTab === 'Admin')) ||
+        (role === 'user' && this.currentTab === 'Basic')
+      );
+    }
+  },
+  watch: {
+    profileIdentity() {
+      this.currentTab = 'Basic';
+      this.resetDraft();
+    },
+    draftResetKey() {
+      this.resetDraft();
+    }
+  },
+  methods: {
+    personProfileTabs,
+    resetDraft() {
+      this.person = createPersonDraft(this.personProfile);
+      this.validation = createPersonValidation();
+      this.submitAttempted = false;
+      this.imageUploading = false;
+      this.imageErrorMessage = '';
+      this.draftVersion += 1;
+    },
+    handleProfilePicUpdate(url) {
+      if (typeof url !== 'string' || !url.trim()) return;
+      this.person = { ...this.person, ProfileImage: url };
+      this.imageErrorMessage = '';
+      this.$emit('update:image', url);
+    },
+    handleImageUploading(uploading) {
+      this.imageUploading = uploading;
+      if (uploading) this.imageErrorMessage = '';
+    },
+    handleImageLoadError(error) {
+      this.reportImageError('load', error);
+    },
+    handleImageUploadError(error) {
+      this.imageUploading = false;
+      this.reportImageError('upload', error);
+    },
+    reportImageError(type, error) {
+      this.imageErrorMessage = error?.message || 'Could not update the profile image.';
+      this.$emit('error:image', { ...error, type, message: this.imageErrorMessage });
+    },
+    handleSubmit() {
+      if (this.isSaveDisabled) return;
+      this.submitAttempted = true;
+      if (!this.validateAllFields()) return;
+      const person = createPersonDraft(this.person);
+      const nameParts = person.LegalName.trim().split(/\s+/);
+      person.ClubId = person.Club?.ClubId ?? 17;
+      person.FirstName = nameParts[0] || '';
+      person.LastName = nameParts.slice(1).join(' ');
+      this.$emit('submit:person', person);
+    },
+    handleDelete() {
+      if (this.isFormDisabled) return;
+      this.$emit('delete:person', createPersonDraft(this.person));
+    },
+    updatePerson({ field, value }) {
+      if (this.isFormDisabled) return;
+      this.person = { ...this.person, [field]: value };
+
+      if (this.validation[field]) {
+        this.validation[field] = validateField(field, value);
+      }
+    },
+    validateAllFields() {
+      profileFields.forEach(({ field }) => {
+        const value = field === 'HemaRatingsId' ? getDraftHemaRatingsId(this.person) : this.person[field];
+        this.validation[field] = validateField(field, value);
+      });
+
+      return !Object.values(this.validation).some(field => field.invalid);
+    },
+    handleTab(tabId) {
+      if (this.isFormDisabled || !this.canOpenTab(tabId)) return;
+      this.currentTab = tabId;
+    },
+    canOpenTab(tabId) {
+      return personProfileTabs(this.userLevel).some(tab => tab.id === tabId);
+    },
+    doMerge(data) {
+      if (this.isFormDisabled) return;
+      this.$emit('merge:merge', data);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,42 @@
+export const profileFields = [
+  { field: 'DisplayName', label: 'Display name', tab: 'Basic' },
+  { field: 'LegalName', label: 'Legal name', tab: 'Basic' },
+  { field: 'EmailAddress', label: 'Email address', tab: 'Basic' },
+  { field: 'HemaRatingsId', label: 'HEMA Ratings ID', tab: 'Admin' }
+];
+
+export function getDraftLegalName(person) {
+  if (person?.LegalName !== undefined) return String(person.LegalName ?? '');
+  return [person?.FirstName, person?.LastName].filter(Boolean).join(' ');
+}
+
+function isPrimaryEmail(email) {
+  return email?.IsPrimary === true;
+}
+
+function getPrimaryEmailAddress(person) {
+  const emails = Array.isArray(person?.PersonEmails) ? person.PersonEmails : [];
+  return emails.find(isPrimaryEmail)?.EmailAddress ?? '';
+}
+
+export function getDraftEmailAddress(person) {
+  if (person?.EmailAddress !== undefined) return String(person.EmailAddress ?? '');
+  if (person?.Email !== undefined) return String(person.Email ?? '');
+  return getPrimaryEmailAddress(person);
+}
+
+export function getDraftHemaRatingsId(person) {
+  if (person?.HemaRatingsId !== undefined) return person.HemaRatingsId ?? '';
+  return person?.HEMARatings?.[0]?.HemaRatingId ?? '';
+}
+
+export function createPersonDraft(profile) {
+  const person = JSON.parse(JSON.stringify(profile ?? {}));
+  return { ...person, LegalName: getDraftLegalName(person), EmailAddress: getDraftEmailAddress(person) };
+}
+
+export function createPersonValidation() {
+  return Object.fromEntries(
+    [...profileFields.map(({ field }) => field), 'Club'].map(field => [field, { invalid: false, message: '' }])
+  );
+}