@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/Cards/FencerCard/FencerCard.vue

@@ -1,99 +1,183 @@
 <template>
-  <div v-if="person"
-       class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white hover:border-bright">
+  <div
+    v-if="person"
+    class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white hover:border-bright"
+  >
     <div class="hidden md:block mr-4 border-r border-dropdownSelect h-20 w-10 items-center text-center">
-      <BaseIcon v-if="isEdit" icon-name="fa-caret-up" size="xl"
-                :color="person.PoolPosition === 1 ? 'neutral' : 'quinary'"
-                :hover="person.PoolPosition === 1 ? 'neutral' : 'bright'" class="m-0" @click="handelMoveUp"/>
-      <BaseText :text="person.PoolPosition" :size="isEdit ? 'lg' : '2xl'" color="quaternary" weight="bold"
-                :class="isEdit ? '-mt-0.5 -mb-0.5' : 'mt-5'"/>
-      <BaseIcon v-if="isEdit" icon-name="fa-caret-down" size="xl" :color="isLast ? 'neutral' : 'quinary'"
-                :hover="isLast ? 'neutral' : 'bright'" @click="handelMoveDown"/>
+      <BaseIcon
+        v-if="isEdit"
+        icon-name="fa-caret-up"
+        size="xl"
+        :color="person.PoolPosition === 1 ? 'neutral' : 'quinary'"
+        :hover="person.PoolPosition === 1 ? 'neutral' : 'bright'"
+        class="m-0"
+        @click="handelMoveUp"
+      />
+      <BaseText
+        :text="person.PoolPosition"
+        :size="isEdit ? 'lg' : '2xl'"
+        color="quaternary"
+        weight="bold"
+        :class="isEdit ? '-mt-0.5 -mb-0.5' : 'mt-5'"
+      />
+      <BaseIcon
+        v-if="isEdit"
+        icon-name="fa-caret-down"
+        size="xl"
+        :color="isLast ? 'neutral' : 'quinary'"
+        :hover="isLast ? 'neutral' : 'bright'"
+        @click="handelMoveDown"
+      />
     </div>
     <div class="bock md:hidden mr-4 border-r border-dropdownSelect h-16 w-5 items-center text-center">
-      <BaseIcon v-if="isEdit" icon-name="fa-caret-up" size="sm"
-                :color="person.PoolPosition === 1 ? 'neutral' : 'quinary'"
-                :hover="person.PoolPosition === 1 ? 'neutral' : 'bright'" class="m-0" @click="handelMoveUp"/>
-      <BaseText :text="person.PoolPosition" :size="isEdit ? 'sm' : 'md'" color="quaternary" weight="bold"
-                :class="isEdit ? '-mt-0.5 -mb-0.5' : 'mt-5'"/>
-      <BaseIcon v-if="isEdit" icon-name="fa-caret-down" size="sm" :color="isLast ? 'neutral' : 'quinary'"
-                :hover="isLast ? 'neutral' : 'bright'" @click="handelMoveDown"/>
+      <BaseIcon
+        v-if="isEdit"
+        icon-name="fa-caret-up"
+        size="sm"
+        :color="person.PoolPosition === 1 ? 'neutral' : 'quinary'"
+        :hover="person.PoolPosition === 1 ? 'neutral' : 'bright'"
+        class="m-0"
+        @click="handelMoveUp"
+      />
+      <BaseText
+        :text="person.PoolPosition"
+        :size="isEdit ? 'sm' : 'md'"
+        color="quaternary"
+        weight="bold"
+        :class="isEdit ? '-mt-0.5 -mb-0.5' : 'mt-5'"
+      />
+      <BaseIcon
+        v-if="isEdit"
+        icon-name="fa-caret-down"
+        size="sm"
+        :color="isLast ? 'neutral' : 'quinary'"
+        :hover="isLast ? 'neutral' : 'bright'"
+        @click="handelMoveDown"
+      />
     </div>
 
     <div class="hidden md:block mr-4">
       <div v-if="!portraitURL" class="w-14 h-14 r ounded-xl bg-dropdownSelect flex items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
       </div>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl">
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-14 h-14 rounded-xl" />
     </div>
 
     <div class="flex flex-col w-3/4 md:w-4/12 justify-start">
       <span class="flex justify-start overflow-hidden">
-        <BaseText :text="person.Person.DisplayName" size="md" color="quaternary" weight="bold"
-                  class="text-sm md:text-xl"/>
+        <BaseText
+          :text="person.Person.DisplayName"
+          size="md"
+          color="quaternary"
+          weight="bold"
+          class="text-sm md:text-xl"
+        />
       </span>
       <span class="w-full flex justify-start">
-        <BaseText :text="person.Person.Club.Name" size="md" color="quinary" weight="normal" class="hidden md:block"/>
-        <BaseText :text="person.Person.Club.ShortName" size="xs" color="quinary" weight="normal"
-                  class="block md:hidden"/>
+        <BaseText :text="person.Person.Club.Name" size="md" color="quinary" weight="normal" class="hidden md:block" />
+        <BaseText
+          :text="person.Person.Club.ShortName"
+          size="xs"
+          color="quinary"
+          weight="normal"
+          class="block md:hidden"
+        />
       </span>
 
       <div class="grid md:hidden grid-cols-2 gap-x-4 mr-10">
         <div class="flex">
-          <BaseText text="M²: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
-          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+          <BaseText text="M²: " size="xs" color="quaternary" weight="normal" class="mr-1" />
+          <BaseText :text="M2Rating" size="xs" color="quinary" weight="bold" class="ml-1" />
         </div>
         <div class="flex">
-          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1"/>
-          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1"/>
+          <BaseText text="HR: " size="xs" color="quaternary" weight="normal" class="mr-1" />
+          <BaseText :text="HEMARating" size="xs" color="quinary" weight="bold" class="ml-1" />
         </div>
       </div>
     </div>
 
     <div class="hidden md:grid grid-col ls-2 gap-x-4 mr-4 w-36">
       <div class="flex">
-        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
-        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5"/>
+        <BaseText text="M2Rating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
+        <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold" class="pt-0.5" />
       </div>
       <div class="flex">
-        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2"/>
-        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold"/>
+        <BaseText text="HemaRating:" size="sm" color="quaternary" weight="normal" class="mr-2" />
+        <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold" />
       </div>
     </div>
 
     <div class="mr-2 md:mr-4 md:ml-auto flex flex-row">
       <div class="flex justify-center w-20">
-      <BaseButton label="Edit" size="xs" color="quinary" class="hidden md:block mr-10 h-9 mt-1"
-                  @buttonClick="handleForwardToProfile"/>
-
-      </div><div class="w-44 flex justify-end">
-      <BaseButton v-if="isEdit && weaverRequired && !weaverSigned" label="Sign Waiver" size="xs" color="quinary"
-                  class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
-                  @buttonClick="requestWeaverSign"/>
+        <BaseButton
+          label="Edit"
+          size="xs"
+          color="quinary"
+          class="hidden md:block mr-10 h-9 mt-1"
+          @buttonClick="handleForwardToProfile"
+        />
+      </div>
+      <div class="w-44 flex justify-end">
+        <BaseButton
+          v-if="isEdit && weaverRequired && !weaverSigned"
+          label="Sign Waiver"
+          size="xs"
+          color="quinary"
+          class="border border-dropdownSelect shadow-md rounded-l-lg bg-natural w-40 m-0! p-0! h-10"
+          @buttonClick="requestWeaverSign"
+        />
 
-      <ButtonBar v-else :buttons="buttons" :selected="computedSelected" @update:selected="handleAttendance" class="mr-1 h-10"/>
+        <ButtonBar
+          v-else
+          :buttons="buttons"
+          :selected="computedSelected"
+          @update:selected="handleAttendance"
+          class="mr-1 h-10"
+        />
       </div>
     </div>
     <div
-        class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6">
-      <BaseIcon v-if="!showSpinner" icon-name="fa-circle-xmark" size="" color="quinary" hover="alarm"
-                @click="handlerRemoveFencer" class="text-md md:text-2xl"/>
-      <BaseIcon v-if="showSpinner" icon-name="fa-spinner-third" size="" color="alarm"
-                class="animate-spin text-md md:text-2xl" hover="alarm"/>
+      class="block md:ml-4 border-l border-dropdownSelect h-16 w-9 md:h-20 md:w-10 items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg pt-5 md:pt-6"
+    >
+      <BaseIcon
+        v-if="!showSpinner"
+        icon-name="fa-circle-xmark"
+        size=""
+        color="quinary"
+        hover="alarm"
+        @click="handlerRemoveFencer"
+        class="text-md md:text-2xl"
+      />
+      <BaseIcon
+        v-if="showSpinner"
+        icon-name="fa-spinner-third"
+        size=""
+        color="alarm"
+        class="animate-spin text-md md:text-2xl"
+        hover="alarm"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import ButtonBar from '../../../Molecules/Buttons/ButtonBar/ButtonBar.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   name: 'FencerCard',
-  emits: ['forward:toProfile', 'remove:fencer', 'request:weaver-sign', 'update:moveDown', 'update:moveUp', 'update:status', 'weaver:required'],
-  components: {BaseButton, BaseIcon, ButtonBar, BaseText},
+  emits: [
+    'forward:toProfile',
+    'remove:fencer',
+    'request:weaver-sign',
+    'update:moveDown',
+    'update:moveUp',
+    'update:status',
+    'weaver:required'
+  ],
+  components: { BaseButton, BaseIcon, ButtonBar, BaseText },
   props: {
     person: {
       type: Object,
@@ -112,7 +196,7 @@ export default {
   },
   computed: {
     weaver() {
-      return this.person?.Person?.Weaver ?? {Required: false, Scope: 'none', Signed: true, SignedAt: null};
+      return this.person?.Person?.Weaver ?? { Required: false, Scope: 'none', Signed: true, SignedAt: null };
     },
     weaverRequired() {
       return !!this.weaver.Required && (this.weaver.Scope ?? 'none') !== 'none';
@@ -127,21 +211,21 @@ export default {
     },
     buttons() {
       return [
-        {id: 'Absent', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlueTwo'},
-        {id: 'Present', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreenTwo'}
+        { id: 'Absent', label: 'Absent', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxBlueTwo' },
+        { id: 'Present', label: 'Present', defaultBgColor: 'bg-natural', selectedBgColor: 'bg-eventBoxGreenTwo' }
       ];
     },
     HEMARating() {
       if (!this.person.Person.HEMARatings || this.person.Person.HEMARatings.length === 0) {
         return 0;
       }
-      return this.person.Person.HEMARatings[0].Rating
+      return this.person.Person.HEMARatings[0].Rating;
     },
     M2Rating() {
       if (!this.person.Person.M2Ratings || this.person.Person.M2Ratings.length === 0) {
-        return "U"
+        return 'U';
       }
-      return this.person.Person.M2Ratings[0].Rating
+      return this.person.Person.M2Ratings[0].Rating;
     },
     computedSelected() {
       return this.person.Status === 'Absent' ? 'Absent' : 'Present';
@@ -151,7 +235,7 @@ export default {
     return {
       showSpinner: false,
       localWeaverSigned: false
-    }
+    };
   },
   watch: {
     person: {
@@ -165,7 +249,7 @@ export default {
   },
   methods: {
     requestWeaverSign() {
-         this.$emit('request:weaver-sign', this.person);
+      this.$emit('request:weaver-sign', this.person);
     },
     handleAttendance(selected) {
       if (selected === 'Present' && this.weaverRequired && !this.weaverSigned) {

package/src/stories/Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.stories.js

@@ -1,22 +1,22 @@
 import FencerFinalResultCard from './FencerFinalResultCard.vue';
-import getFinalEventResults from "../../../../mocks/getFinalEventResult.js";
+import getFinalEventResults from '../../../../mocks/getFinalEventResult.js';
 
 export default {
-    title: 'Organisms/Cards/FencerFinalResultCard',
-    component: FencerFinalResultCard,
-    tags: ['autodocs'],
-    args: {
-        result: getFinalEventResults.FinalResults[0]
-    },
-    argTypes: {
-        result: {
-            control: { type: 'object' },
-        }
+  title: 'Organisms/Cards/FencerFinalResultCard',
+  component: FencerFinalResultCard,
+  tags: ['autodocs'],
+  args: {
+    result: getFinalEventResults.FinalResults[0]
+  },
+  argTypes: {
+    result: {
+      control: { type: 'object' }
     }
+  }
 };
 
 export const Default = {
-    args: {
-        result: getFinalEventResults.FinalResults[0]
-    }
+  args: {
+    result: getFinalEventResults.FinalResults[0]
+  }
 };

package/src/stories/Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.vue

@@ -1,61 +1,70 @@
 <template>
-  <div class="flex items-center border py-1 border-dropdownSelect rounded-lg shadow-lg bg-white w-full hover:border-bright"
-       :class="detail ? 'my-1  ' : ''" @click="handleEditClick">
-    <div class="md:mr-4 md:border-r border-dropdownSelect h-12 md:h-16 md:w-10 items-center text-center pl-1 md:pl-1 pt-3 md:pt-4">
-      <BaseText :text="place" size="" color="quaternary" weight="bold" class="text-md md:text-xl"/>
+  <div
+    class="flex items-center border py-1 border-dropdownSelect rounded-lg shadow-lg bg-white w-full hover:border-bright"
+    :class="detail ? 'my-1  ' : ''"
+    @click="handleEditClick"
+  >
+    <div
+      class="md:mr-4 md:border-r border-dropdownSelect h-12 md:h-16 md:w-10 items-center text-center pl-1 md:pl-1 pt-3 md:pt-4"
+    >
+      <BaseText :text="place" size="" color="quaternary" weight="bold" class="text-md md:text-xl" />
     </div>
     <div class="hidden md:flex mr-4 w-16">
       <div v-if="!portraitURL" class="w-12 h-12 rounded-full bg-dropdownSelect items-center justify-center">
-        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
       </div>
-      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="h-12 rounded-full object-cover">
-      <img v-if="clubImageURL" :src="clubImageURL" alt="Club Logo"
-           class="absolute w-7 h-7 rounded-full mt-8 ml-10 border border-neutral z-10">
+      <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="h-12 rounded-full object-cover" />
+      <img
+        v-if="clubImageURL"
+        :src="clubImageURL"
+        alt="Club Logo"
+        class="absolute w-7 h-7 rounded-full mt-8 ml-10 border border-neutral z-10"
+      />
     </div>
 
     <div class="flex md:hidden flex-col justify-start ml-2">
-      <img :src="portraitURL || missingPortrait" alt="Portrait" class="w-16 h-10 rounded-full object-cover">
+      <img :src="portraitURL || missingPortrait" alt="Portrait" class="w-16 h-10 rounded-full object-cover" />
     </div>
 
     <div class="flex flex-col w-3/4 justify-start ml-4 md:ml-0">
       <span class="w-full flex justify-start">
-        <BaseText :text="fullName" size="" color="quaternary" weight="bold" class="text-sm md:text-lg"/>
+        <BaseText :text="fullName" size="" color="quaternary" weight="bold" class="text-sm md:text-lg" />
       </span>
       <span class="w-full flex flex-col justify-start">
-        <BaseText :text="clubName" size="" color="quinary" weight="normal" class="text-xs md:text-md text-nowrap"/>
+        <BaseText :text="clubName" size="" color="quinary" weight="normal" class="text-xs md:text-md text-nowrap" />
       </span>
     </div>
     <section class="flex items-center justify-end w-1/2 pr-4 space-x-4">
       <div v-if="parseInt(HandShotCount) > 0" class="flex flex-col items-center w-12 md:w-1/12">
-        <BaseIcon iconName="fa-hand" size="sm" color="quinary" class="opacity-50"/>
-        <BaseText :text="HandShotCount" size="" color="quaternary" weight="bold" class="text-xs md:text-sm"/>
+        <BaseIcon iconName="fa-hand" size="sm" color="quinary" class="opacity-50" />
+        <BaseText :text="HandShotCount" size="" color="quaternary" weight="bold" class="text-xs md:text-sm" />
       </div>
       <div v-if="HRrating" class="flex flex-col items-center w-12 md:w-1/12 pt-1 mr-2">
-        <BaseText :text="'HR'" size="xs" color="quinary" weight="normal"/>
-        <BaseText :text="HRrating" size="" color="quaternary" weight="bold" class="text-xs md:text-sm"/>
+        <BaseText :text="'HR'" size="xs" color="quinary" weight="normal" />
+        <BaseText :text="HRrating" size="" color="quaternary" weight="bold" class="text-xs md:text-sm" />
       </div>
       <div v-if="M2Rating" class="flex flex-col items-center w-12 md:w-1/12 pt-1">
-        <BaseText :text="'M²'" size="xs" color="quinary" weight="normal"/>
-        <BaseText :text="M2Rating" size="" color="quaternary" weight="bold" class="text-xs md:text-sm"/>
+        <BaseText :text="'M²'" size="xs" color="quinary" weight="normal" />
+        <BaseText :text="M2Rating" size="" color="quaternary" weight="bold" class="text-xs md:text-sm" />
       </div>
       <div v-if="Awarded" class="flex flex-col items-center w-12 md:w-1/12">
-        <BaseText :text="'Earned'" size="xs" color="quinary" weight="normal"/>
-        <BaseText :text="Awarded" size="sm" color="quaternary" weight="bold"/>
+        <BaseText :text="'Earned'" size="xs" color="quinary" weight="normal" />
+        <BaseText :text="Awarded" size="sm" color="quaternary" weight="bold" />
       </div>
     </section>
-
-
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
 import missingPortrait from '../../../../assets/portrait1.png';
 
+const getFirstImageUrl = record => record?.Images?.[0]?.URL;
+
 export default {
   name: 'FencerFinalResultCard',
-  components: {BaseIcon, BaseText},
+  components: { BaseIcon, BaseText },
   emits: ['edit'],
   props: {
     result: {
@@ -88,7 +97,9 @@ export default {
       return this.localData?.Images?.[0]?.URL ?? this.localData?.Person?.Images?.[0]?.URL ?? '';
     },
     clubImageURL() {
-      return this.localData?.Club?.Images?.[0]?.URL ?? this.localData?.Person?.Club?.Images?.[0]?.URL ?? null;
+      const resultClubImage = getFirstImageUrl(this.localData?.Club);
+      const personClubImage = getFirstImageUrl(this.localData?.Person?.Club);
+      return resultClubImage ?? personClubImage ?? null;
     },
     M2Rating() {
       return this.localData?.M2Rating ?? '';
@@ -128,7 +139,7 @@ export default {
       if (this.dataSource === 'search') {
         this.$emit('edit', this.localData.PersonId);
       }
-    },
+    }
   }
 };
 </script>

package/src/stories/Organisms/Cards/FencerPoolResultsCard/FencerPoolResults.stories.js

@@ -2,40 +2,40 @@ import FencerPoolResultsCard from './FencerPoolResultsCard.vue';
 import getPoolResults from '../../../../mocks/getPoolResults.js';
 
 export default {
-    title: 'Organisms/Cards/FencerPoolResultsCard',
-    component: FencerPoolResultsCard,
-    tags: ['autodocs'],
-    args: {
-        person: getPoolResults[0],
-        status: "results"
-    },
-    argTypes: {
-        person: {
-            control: { type: 'object' },
-            status: { control: 'text' }
-        }
+  title: 'Organisms/Cards/FencerPoolResultsCard',
+  component: FencerPoolResultsCard,
+  tags: ['autodocs'],
+  args: {
+    person: getPoolResults[0],
+    status: 'results'
+  },
+  argTypes: {
+    person: {
+      control: { type: 'object' },
+      status: { control: 'text' }
     }
+  }
 };
 
 export const Default = {
-    args: {
-        person: getPoolResults.report[0] ,
-        status: "results"
-    }
+  args: {
+    person: getPoolResults.report[0],
+    status: 'results'
+  }
 };
 
 let modifiedResults = { ...getPoolResults.report[7], Promoted: false };
 export const Alternative = {
-    args: {
-        person: modifiedResults,
-        status: "results"
-    }
+  args: {
+    person: modifiedResults,
+    status: 'results'
+  }
 };
 
 modifiedResults = { ...getPoolResults.report[9], Promoted: false };
 export const NotInResultsStatus = {
-    args: {
-        person: modifiedResults,
-        status: "de"
-    }
+  args: {
+    person: modifiedResults,
+    status: 'de'
+  }
 };