@dcrackel/hematournamentui 1.0.707 → 1.0.709

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue

@@ -1,133 +1,192 @@
-<template>
-  <section class="flex w-full justify-center">
-    <img
-      v-if="!uploading"
-      :src="displayedUrl"
-      :class="getClasses"
-      :style="customStyle"
-      :alt="displayedUrl"
-      @error="onImageError"
-      @click="setShowCropper()"
-    />
-    <div v-if="uploading" :class="getSkeletonClass" @error="onImageError" @click="setShowCropper()" />
-    <avatar-cropper
-      v-model="showCropper"
-      :upload-url="`${uploadServer}${uploadImageName}`"
-      :cropper-options="cropperOptions"
-      @uploading="handleUploading"
-      @uploaded="handleUploaded"
-      @completed="handleCompleted"
-      @error="handlerError"
-    />
-  </section>
-</template>
-
-<script>
-import AvatarCropper from 'vue-avatar-cropper';
-import SelectAnProfile from '../../../../assets/select-profile.png';
-import SelectAnImage from '../../../../assets/select-tournament.png';
-import loading from '../../../../assets/loading-spinner.gif';
-
-export default {
-  name: 'GenericImageCropper',
-  emits: ['update:url'],
-  props: {
-    urlToImage: {
-      type: String,
-      default: SelectAnImage
-    },
-    customClass: {
-      type: String,
-      default: ''
-    },
-    customSkeletonClass: {
-      type: String,
-      default: ''
-    },
-    customStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    uploadImageName: {
-      type: String,
-      default: 'default-image'
-    },
-    uploadServer: {
-      type: String,
-      default: ''
-    },
-    imageServer: {
-      type: String,
-      default: ''
-    },
-    isProfile: {
-      type: Boolean,
-      default: false
-    },
-    cropperOptions: {
-      type: Object,
-      default: () => ({
-        aspectRatio: 3 / 2,
-        autoCropArea: 1,
-        viewMode: 1,
-        movable: true,
-        zoomable: true
-      })
-    }
-  },
-  components: {
-    AvatarCropper
-  },
-  data() {
-    return {
-      loading,
-      showCropper: false,
-      uploading: false,
-      localImageUrl: this.urlToImage
-    };
-  },
-  computed: {
-    displayedUrl() {
-      return this.localImageUrl || (this.isProfile ? SelectAnProfile : SelectAnImage);
-    },
-    getClasses() {
-      return this.customClass
-        ? this.customClass
-        : 'h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat';
-    },
-    getSkeletonClass() {
-      return this.customSkeletonClass
-        ? this.customSkeletonClass
-        : 'border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse';
-    }
-  },
-  methods: {
-    setShowCropper() {
-      this.showCropper = true;
-    },
-    handleUploading() {
-      this.uploading = true;
-    },
-    handleUploaded(response) {
-      this.uploading = false;
-      if (response.response.status === 200) {
-        this.localImageUrl = `${this.imageServer}${this.uploadImageName}.png`;
-        this.$emit('update:url', `${this.imageServer}${this.uploadImageName}.png`);
-      }
-    },
-    handleCompleted() {
-      this.message = 'Upload completed.';
-    },
-    handlerError(message, type, xhr) {
-      console.error(message);
-      console.error(type);
-      console.error(xhr);
-      this.message = 'Oops! Something went wrong...';
-    },
-    onImageError() {
-      this.$emit('update:url', null);
-      this.showCropper = true;
-    }
-  }
-};
-</script>
+<template>
+  <section class="flex w-full justify-center" :aria-busy="uploading" :inert="disabled">
+    <button
+      v-if="!uploading"
+      type="button"
+      :disabled="disabled"
+      :aria-label="isProfile ? 'Change profile image' : 'Change image'"
+      class="flex items-center justify-center"
+      @click="setShowCropper"
+    >
+      <img
+        :src="displayedUrl"
+        :class="getClasses"
+        :style="customStyle"
+        :alt="isProfile ? 'Profile image' : 'Uploaded image'"
+        @error="onImageError"
+      />
+    </button>
+    <div v-if="uploading" :class="getSkeletonClass" role="status" aria-label="Uploading image" />
+    <avatar-cropper
+      v-model="showCropper"
+      :upload-url="`${uploadServer}${uploadImageName}`"
+      :cropper-options="cropperOptions"
+      @uploading="handleUploading"
+      @uploaded="handleUploaded"
+      @completed="handleCompleted"
+      @error="handlerError"
+    />
+  </section>
+</template>
+
+<script>
+import AvatarCropper from 'vue-avatar-cropper';
+import SelectAnProfile from '../../../../assets/select-profile.png';
+import SelectAnImage from '../../../../assets/select-tournament.png';
+import loading from '../../../../assets/loading-spinner.gif';
+
+function getImageErrorStatus(error, xhr) {
+  return error?.context?.response?.status ?? xhr?.status;
+}
+
+export default {
+  name: 'GenericImageCropper',
+  emits: ['update:url', 'update:uploading', 'error:load', 'error:upload'],
+  props: {
+    urlToImage: {
+      type: String,
+      default: SelectAnImage
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    customSkeletonClass: {
+      type: String,
+      default: ''
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    uploadImageName: {
+      type: String,
+      default: 'default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: ''
+    },
+    imageServer: {
+      type: String,
+      default: ''
+    },
+    isProfile: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    cropperOptions: {
+      type: Object,
+      default: () => ({
+        aspectRatio: 3 / 2,
+        autoCropArea: 1,
+        viewMode: 1,
+        movable: true,
+        zoomable: true
+      })
+    }
+  },
+  components: {
+    AvatarCropper
+  },
+  data() {
+    return {
+      loading,
+      showCropper: false,
+      uploading: false,
+      localImageUrl: this.urlToImage,
+      imageLoadFailed: false,
+      previewVersion: 0,
+      message: ''
+    };
+  },
+  computed: {
+    displayedUrl() {
+      const fallback = this.isProfile ? SelectAnProfile : SelectAnImage;
+      if (this.imageLoadFailed || !this.localImageUrl) return fallback;
+      if (!this.previewVersion) return this.localImageUrl;
+      const preview = new URL(this.localImageUrl, document.baseURI);
+      preview.searchParams.set('preview', this.previewVersion);
+      return preview.href;
+    },
+    getClasses() {
+      return this.customClass
+        ? this.customClass
+        : 'h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat';
+    },
+    getSkeletonClass() {
+      return this.customSkeletonClass
+        ? this.customSkeletonClass
+        : 'border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse';
+    }
+  },
+  watch: {
+    urlToImage(url) {
+      if (url === this.localImageUrl) return;
+      this.localImageUrl = url;
+      this.imageLoadFailed = false;
+      this.previewVersion = 0;
+    }
+  },
+  methods: {
+    setShowCropper() {
+      if (this.disabled || this.uploading) return;
+      this.showCropper = true;
+    },
+    setUploading(uploading) {
+      this.uploading = uploading;
+      this.$emit('update:uploading', uploading);
+    },
+    handleUploading(event) {
+      this.setUploading(true);
+      // The cropper exposes the request promise but does not emit rejected fetches.
+      event?.response?.catch?.(error => {
+        this.handlerError({ type: 'upload', message: error?.message || 'Image upload failed.' });
+      });
+    },
+    handleUploaded(response) {
+      const status = response?.response?.status;
+      if (!(status >= 200 && status < 300)) {
+        this.handlerError({ message: 'Image upload failed.', context: { response: response?.response } });
+        return;
+      }
+      const url = `${this.imageServer}${this.uploadImageName}.png`;
+      if (!this.isValidImageUrl(url)) {
+        this.handlerError({ message: 'The upload did not provide a valid image URL.' });
+        return;
+      }
+      this.localImageUrl = url;
+      this.imageLoadFailed = false;
+      this.previewVersion = Date.now();
+      this.$emit('update:url', url);
+      this.setUploading(false);
+    },
+    handleCompleted() {
+      this.message = 'Upload completed.';
+    },
+    handlerError(message, type, xhr) {
+      this.setUploading(false);
+      this.message = typeof message === 'string' ? message : message?.message || 'Image upload failed.';
+      const eventName = (message?.type ?? type) === 'load' ? 'error:load' : 'error:upload';
+      this.$emit(eventName, { message: this.message, status: getImageErrorStatus(message, xhr) });
+    },
+    isValidImageUrl(url) {
+      if (typeof url !== 'string' || !url.trim()) return false;
+      try {
+        return ['http:', 'https:'].includes(new URL(url, document.baseURI).protocol);
+      } catch {
+        return false;
+      }
+    },
+    onImageError() {
+      if (this.imageLoadFailed) return;
+      this.imageLoadFailed = true;
+      this.$emit('error:load', { message: 'Could not load the image.', url: this.localImageUrl });
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/Tableau/Tableau.stories.js

@@ -11,12 +11,12 @@ export default {
   },
   argTypes: {
     bouts: {
-      control: 'array',
+      control: 'object',
       description: 'Array of bracket objects to display'
     },
     bracketSize: {
       control: 'string',
-      description: 'sets spacing for bracket connector lines'
+      description: 'Name of the opening bracket round'
     },
     hostingClubColors: {
       control: 'object'

package/src/stories/Organisms/Containers/Tableau/Tableau.test.js

@@ -1,5 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
+import getDEWithBouts42Fencers from '../../../../mocks/getDEBouts-42Fencers.js';
+import getDEBoutsTableOf128 from '../../../../mocks/getDEBouts-TableOf128.js';
+import getDEBoutsTableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
 import BoutCard from '../../Cards/BoutCard/BoutCard.vue';
 import TableauColumn from '../TableauColumn/TableauColumn.vue';
 import Tableau from './Tableau.vue';
@@ -19,7 +22,6 @@ const mountListView = () =>
       bouts: [bout],
       bracketSize: 'Final',
       hostingClubColors: {},
-      largeCards: true,
       listView: true
     }
   });
@@ -44,7 +46,6 @@ describe('Tableau list view', () => {
         bouts: [activeBout],
         bracketSize: 'Final',
         hostingClubColors: {},
-        largeCards: true,
         listView: true
       }
     });
@@ -54,6 +55,35 @@ describe('Tableau list view', () => {
 
     expect(wrapper.emitted('action:directingBout')).toEqual([[activeBout]]);
   });
+
+  it('bubbles the viewer suggestions to the top without removing other scheduled bouts', () => {
+    const viewerBout = { ...bout, BoutId: 43, DEBoutId: 2 };
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: [bout, viewerBout],
+        bracketSize: 'Final',
+        hostingClubColors: {},
+        listView: true,
+        plannedDirectingStations: [
+          {
+            RingId: 7,
+            RingName: 'Ring 7',
+            Color: '#2563eb',
+            Director: { PersonId: 99, DisplayName: 'Viewer Director' }
+          }
+        ],
+        plannedBoutAssignments: [{ DEBoutId: viewerBout.DEBoutId, RingId: 7 }],
+        viewerPersonId: '99'
+      }
+    });
+
+    expect(wrapper.vm.listSections[0]).toMatchObject({
+      key: 'suggested-for-viewer',
+      label: 'Suggested for You',
+      bouts: [viewerBout]
+    });
+    expect(wrapper.vm.listSections.flatMap(section => section.bouts)).toEqual([viewerBout, bout]);
+  });
 });
 
 describe('Tableau bracket view', () => {
@@ -63,7 +93,6 @@ describe('Tableau bracket view', () => {
         bouts: [bout],
         bracketSize: 'Final',
         hostingClubColors: {},
-        largeCards: true,
         listView: false
       }
     });
@@ -73,4 +102,103 @@ describe('Tableau bracket view', () => {
 
     expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
   });
+
+  it('spaces each rendered round by its actual column depth', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: [bout],
+        bracketSize: 'Table of 8',
+        hostingClubColors: {},
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.getRoundLayout(0)).toEqual({ gapPx: 16, padTopPx: 0 });
+    expect(wrapper.vm.getRoundLayout(1)).toEqual({ gapPx: 89, padTopPx: 36.5 });
+    expect(wrapper.vm.getRoundLayout(2)).toEqual({ gapPx: 235, padTopPx: 109.5 });
+  });
+
+  it('orders the current 42-fencer fixture through Table of 8 without a legacy quarterfinal', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: getDEWithBouts42Fencers.pools[0].Bouts,
+        bracketSize: 'Table of 64',
+        hostingClubColors: getDEWithBouts42Fencers.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName]) => roundName)).toEqual([
+      'Table of 64',
+      'Table of 32',
+      'Table of 16',
+      'Table of 8',
+      'Semifinal',
+      'Final'
+    ]);
+  });
+
+  it('renders a current Table of 64 fixture with the expected bout count per round', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: getDEBoutsTableOf64.pools[0].Bouts,
+        bracketSize: 'Table of 64',
+        hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
+      ['Table of 64', 32],
+      ['Table of 32', 16],
+      ['Table of 16', 8],
+      ['Table of 8', 4],
+      ['Semifinal', 2],
+      ['Final', 1]
+    ]);
+
+    const openingRound = wrapper.vm.winnerRoundEntries[0][1];
+    const openingFencers = openingRound.flatMap(roundBout => [roundBout.Person1, roundBout.Person2]);
+    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
+
+    expect(assignedFencerIds.size).toBe(61);
+    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(3);
+  });
+
+  it('renders a complete Table of 128 fixture for large-bracket layout coverage', () => {
+    const wrapper = shallowMount(Tableau, {
+      props: {
+        bouts: getDEBoutsTableOf128.pools[0].Bouts,
+        bracketSize: 'Table of 128',
+        hostingClubColors: getDEBoutsTableOf128.hostingClubColors,
+        listView: false
+      }
+    });
+
+    expect(wrapper.vm.winnerRoundEntries.map(([roundName, roundBouts]) => [roundName, roundBouts.length])).toEqual([
+      ['Table of 128', 64],
+      ['Table of 64', 32],
+      ['Table of 32', 16],
+      ['Table of 16', 8],
+      ['Table of 8', 4],
+      ['Semifinal', 2],
+      ['Final', 1]
+    ]);
+
+    const allBouts = getDEBoutsTableOf128.pools[0].Bouts;
+    const openingFencers = wrapper.vm.winnerRoundEntries[0][1].flatMap(roundBout => [
+      roundBout.Person1,
+      roundBout.Person2
+    ]);
+    const assignedFencerIds = new Set(openingFencers.filter(fencer => fencer.PersonId).map(fencer => fencer.PersonId));
+    const boutIds = new Set(allBouts.map(roundBout => roundBout.DEBoutId));
+    const missingNextBouts = allBouts.filter(
+      roundBout => roundBout.DENextBoutId && !boutIds.has(roundBout.DENextBoutId)
+    );
+
+    expect(allBouts).toHaveLength(127);
+    expect(assignedFencerIds.size).toBe(67);
+    expect(openingFencers.filter(fencer => fencer.DisplayName === 'BYE')).toHaveLength(61);
+    expect(missingNextBouts).toEqual([]);
+  });
 });