@dcrackel/hematournamentui 1.0.707 → 1.0.708

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

@@ -1,278 +1,298 @@
-<template>
-  <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"
-      />
-    </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"
-      />
-    </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" />
-      </div>
-      <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"
-        />
-      </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"
-        />
-      </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" />
-        </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" />
-        </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" />
-      </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" />
-      </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"
-        />
-
-        <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"
-      />
-    </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';
-
-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 },
-  props: {
-    person: {
-      type: Object,
-      required: true
-    },
-    isLast: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    isEdit: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    weaver() {
-      return this.person?.Person?.Weaver ?? { Required: false, Scope: 'none', Signed: true, SignedAt: null };
-    },
-    weaverRequired() {
-      return !!this.weaver.Required && (this.weaver.Scope ?? 'none') !== 'none';
-    },
-    weaverSigned() {
-      return this.weaverRequired ? this.localWeaverSigned : true;
-    },
-    portraitURL() {
-      const images = this.person.Person.Images || [];
-      const portrait = images.find(image => image.Type === 'Portrait');
-      return portrait ? portrait.URL : '';
-    },
-    buttons() {
-      return [
-        { 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;
-    },
-    M2Rating() {
-      if (!this.person.Person.M2Ratings || this.person.Person.M2Ratings.length === 0) {
-        return 'U';
-      }
-      return this.person.Person.M2Ratings[0].Rating;
-    },
-    computedSelected() {
-      return this.person.Status === 'Absent' ? 'Absent' : 'Present';
-    }
-  },
-  data() {
-    return {
-      showSpinner: false,
-      localWeaverSigned: false
-    };
-  },
-  watch: {
-    person: {
-      immediate: true,
-      deep: true,
-      handler(newVal) {
-        const signed = newVal?.Person?.Weaver?.Signed;
-        this.localWeaverSigned = Boolean(signed ?? false);
-      }
-    }
-  },
-  methods: {
-    requestWeaverSign() {
-      this.$emit('request:weaver-sign', this.person);
-    },
-    handleAttendance(selected) {
-      if (selected === 'Present' && this.weaverRequired && !this.weaverSigned) {
-        this.$emit('weaver:required', this.person);
-        return;
-      }
-
-      const person = { ...this.person, Status: selected };
-      this.$emit('update:status', person);
-    },
-    handlerRemoveFencer() {
-      this.showSpinner = true;
-      this.$emit('remove:fencer', this.person);
-    },
-    handelMoveUp() {
-      if (this.person.PoolPosition > 1) this.$emit('update:moveUp', this.person);
-    },
-    handelMoveDown() {
-      if (!this.isLast) this.$emit('update:moveDown', this.person);
-    },
-    handleForwardToProfile() {
-      this.$emit('forward:toProfile', this.person.PersonId);
-    }
-  }
-};
-</script>
+<template>
+  <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"
+      />
+    </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"
+      />
+    </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" />
+      </div>
+      <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"
+        />
+      </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"
+        />
+      </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" />
+        </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" />
+        </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" />
+      </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" />
+      </div>
+    </div>
+
+    <div class="mr-2 md:mr-4 md:ml-auto flex flex-row items-center">
+      <div class="mr-2 md:mr-6 w-6 md:w-7 shrink-0">
+        <span
+          v-if="hasMissingHemaRatingsId"
+          role="img"
+          aria-label="Missing HEMA Ratings ID"
+          title="Missing HEMA Ratings ID"
+          class="flex items-center justify-center text-darkgray"
+        >
+          <svg class="h-6 w-6 md:h-7 md:w-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+            <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2" />
+            <text x="16" y="20" text-anchor="middle" fill="currentColor" font-size="11" class="font-bold">HR</text>
+            <path d="M7 25 25 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          </svg>
+        </span>
+      </div>
+      <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"
+        />
+
+        <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"
+      />
+    </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';
+
+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 },
+  props: {
+    person: {
+      type: Object,
+      required: true
+    },
+    isLast: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    hasMissingHemaRatingsId() {
+      const person = this.person?.Person;
+      const id = Number(person?.HemaRatingsId ?? person?.HEMARatings?.[0]?.HemaRatingId);
+      return !Number.isInteger(id) || id <= 0;
+    },
+    weaver() {
+      return this.person?.Person?.Weaver ?? { Required: false, Scope: 'none', Signed: true, SignedAt: null };
+    },
+    weaverRequired() {
+      return !!this.weaver.Required && (this.weaver.Scope ?? 'none') !== 'none';
+    },
+    weaverSigned() {
+      return this.weaverRequired ? this.localWeaverSigned : true;
+    },
+    portraitURL() {
+      const images = this.person.Person.Images || [];
+      const portrait = images.find(image => image.Type === 'Portrait');
+      return portrait ? portrait.URL : '';
+    },
+    buttons() {
+      return [
+        { 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;
+    },
+    M2Rating() {
+      if (!this.person.Person.M2Ratings || this.person.Person.M2Ratings.length === 0) {
+        return 'U';
+      }
+      return this.person.Person.M2Ratings[0].Rating;
+    },
+    computedSelected() {
+      return this.person.Status === 'Absent' ? 'Absent' : 'Present';
+    }
+  },
+  data() {
+    return {
+      showSpinner: false,
+      localWeaverSigned: false
+    };
+  },
+  watch: {
+    person: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        const signed = newVal?.Person?.Weaver?.Signed;
+        this.localWeaverSigned = Boolean(signed ?? false);
+      }
+    }
+  },
+  methods: {
+    requestWeaverSign() {
+      this.$emit('request:weaver-sign', this.person);
+    },
+    handleAttendance(selected) {
+      if (selected === 'Present' && this.weaverRequired && !this.weaverSigned) {
+        this.$emit('weaver:required', this.person);
+        return;
+      }
+
+      const person = { ...this.person, Status: selected };
+      this.$emit('update:status', person);
+    },
+    handlerRemoveFencer() {
+      this.showSpinner = true;
+      this.$emit('remove:fencer', this.person);
+    },
+    handelMoveUp() {
+      if (this.person.PoolPosition > 1) this.$emit('update:moveUp', this.person);
+    },
+    handelMoveDown() {
+      if (!this.isLast) this.$emit('update:moveDown', this.person);
+    },
+    handleForwardToProfile() {
+      this.$emit('forward:toProfile', this.person.PersonId);
+    }
+  }
+};
+</script>