@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,93 +1,69 @@
-import TableauFencerCard from './TableauFencerCard.vue';
-
-
-export default {
-    title: 'Organisms/Cards/TableauFencerCard',
-    component: TableauFencerCard,
-    args: {
-        fencer: {
-            DisplayName: 'John Doe',
-            Club: {
-                Name: 'Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://randomuser.me/api/portraits/men/91.jpg'
-                }
-            ]
-        },
-        score: '15',
-        position: '1',
-        color: 'blue',
-        scoreColor: 'bg-winGreen',
-        large: true
-    },
-    argTypes: {
-        fencer: {
-            control: 'object',
-            description: 'Object containing fencer details including name, club, and images'
-        },
-        score: {
-            control: 'text',
-            description: 'Score of the fencer'
-        },
-        position: {
-            control: 'text',
-            description: 'Position of the fencer in the bracket'
-        },
-        color: {
-            control: 'color',
-            description: 'Color for the position background'
-        },
-        scoreColor: {
-            control: 'color',
-            description: 'Color for the score background'
-        },
-        large: {
-            control: 'boolean',
-            description: 'Boolean to determine the size of the card'
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        fencer: {
-            DisplayName: 'John Doe',
-            Club: {
-                Name: 'Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://randomuser.me/api/portraits/men/50.jpg'
-                }
-            ]
-        },
-        score: '15',
-        position: '1',
-        color: 'blue',
-        scoreColor: 'bg-winGreen',
-        large: true
-    }
-};
-
-export const Small = {
-    args: {
-        fencer: {
-            DisplayName: 'Jane Doe',
-            Club: {
-                Name: 'Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://via.placeholder.com/40'
-                }
-            ]
-        },
-        score: '12',
-        position: '2',
-        color: 'red',
-        scoreColor: 'bg-lossRed',
-        large: false
-    }
-};
+import TableauFencerCard from './TableauFencerCard.vue';
+
+export default {
+  title: 'Organisms/Cards/TableauFencerCard',
+  component: TableauFencerCard,
+  tags: ['autodocs'],
+  args: {
+    fencer: { DisplayName: 'John Doe' },
+    score: '15',
+    position: '1',
+    color: 'blue',
+    scoreColor: 'bg-winGreen',
+    showScore: true,
+    corners: 'top'
+  },
+  argTypes: {
+    fencer: {
+      control: 'object',
+      description: 'Fencer displayed in the bracket row'
+    },
+    score: {
+      control: 'text',
+      description: 'Displayed bout score'
+    },
+    position: {
+      control: 'text',
+      description: 'Seed or direct-elimination position'
+    },
+    color: {
+      control: 'text',
+      description: 'Tailwind theme color used for the seed strip'
+    },
+    scoreColor: {
+      control: 'text',
+      description: 'Tailwind background class used for the score cell'
+    },
+    showScore: {
+      control: 'boolean',
+      description: 'Whether the score cell displays a value'
+    },
+    corners: {
+      control: 'select',
+      options: ['none', 'top', 'bottom'],
+      description: 'Rounds the outside corners when used as the top or bottom bout row'
+    }
+  }
+};
+
+export const Default = {};
+
+export const LosingScore = {
+  args: {
+    fencer: { DisplayName: 'Jane Doe' },
+    score: '12',
+    position: '2',
+    color: 'red',
+    scoreColor: 'bg-lossRed',
+    corners: 'bottom'
+  }
+};
+
+export const PendingFencer = {
+  args: {
+    fencer: { DisplayName: '' },
+    score: '0',
+    position: '',
+    showScore: false
+  }
+};

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

@@ -1,111 +1,80 @@
-<!-- TableauFencerCard.vue -->
-<template>
-<section class="bg-poolSetup flex rounded-md border" @mouseover="handleHighLight(true)" @mouseout="handleHighLight(false)" :class="[width, highLighted, opacity]">
-    <!-- Left position -->
-    <div class="text-center px-1 w-5 flex items-center justify-center rounded-l-md z-50" :class="[`bg-${color}`]">
-      <BaseText :text="position" size="xs" color="neutral"/>
-    </div>
-
-  <div class="flex w-full items-center">
-    <!-- Portrait and Name/Club -->
-    <div class="flex w-full">
-      <div v-if="large" class="">
-        <div v-if="!portraitURL" class="w-9 h-9 rounded-r-md 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-9 h-9 rounded-r-md">
-      </div>
-      <div class="flex flex-col justify-center ml-2">
-        <BaseText :text="name" :size="large ? 'sm' : 'xs'" :weight="large ? 'bold' : 'normal'" color="quaternary" class="truncate  text-nowrap overflow-hidden"/>
-        <BaseText v-if="club.length > 1 && large" color="quinary" :text="club.substring(0,28)" size="xs" class="truncate text-nowrap overflow-hidden"/>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right position (Score) -->
-  <div class="text-center px-1 w-5 flex items-center justify-center rounded-r-md" :class="scoreColor">
-    <BaseText :text="fencerScore" size="xs" color="neutral"/>
-  </div>
-</section>
-</template>
-
-<script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-
-export default {
-  name: 'TableauFencerCard',
-  emits: ['action:highLight'],
-  components: { BaseText },
-  props: {
-    fencer: {
-      type: Object,
-      required: true
-    },
-    score: {
-      type: String,
-      required: true
-    },
-    position: {
-      type: [String, Number],
-      required: true
-    },
-    color: {
-      type: String,
-      required: true
-    },
-    scoreColor: {
-      type: String,
-      required: true
-    },
-    large: {
-      type: Boolean,
-      default: true
-    },
-    highLight: {
-      type: Boolean,
-      default: false
-    },
-    faded: {
-      type: Boolean,
-      default: false
-    },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    portraitURL() {
-      const images = this.fencer.Images || [];
-      const portrait = images.find(image => image.URL);
-      return portrait ? portrait.URL : '';
-    },
-    fencerScore() {
-      const rawScore = this.score;
-      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - rawScore : rawScore;
-    },
-    name() {
-      //if (this.fencer.DisplayName === "BYE") return "";
-      return this.fencer.DisplayName;
-    },
-    club() {
-      if (this.fencer.DisplayName === "BYE" || this.fencer.DisplayName === "") return "";
-      return this.fencer.Club.Name;
-    },
-    width() {
-      return this.large ? ' w-72' : ' w-40';
-    },
-    highLighted() {
-      return this.highLight ? 'border-bright' : 'border-poolSetup';
-    },
-    opacity() {
-      return this.faded ? 'opacity-60 shadow-md' : 'shadow-xl';
-    }
-  },
-  methods: {
-    handleHighLight(value) {
-      this.$emit('action:highLight', value)
-    }
-  }
-};
-</script>
+<template>
+  <section class="flex h-7 w-40 overflow-hidden border border-poolSetup bg-poolSetup" :class="cornerClass">
+    <div class="flex w-5 shrink-0 items-center justify-center px-1" :class="positionColorClass">
+      <BaseText :text="position" size="xs" color="neutral" />
+    </div>
+
+    <div class="flex min-w-0 flex-1 items-center px-2">
+      <BaseText :text="name" size="xs" color="quaternary" class="truncate whitespace-nowrap" />
+    </div>
+
+    <div class="flex w-7 shrink-0 items-center justify-center border-l border-poolSetup" :class="scoreColor">
+      <BaseText v-if="showScore" :text="displayedScore" size="xs" color="neutral" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const cornerClasses = {
+  none: '',
+  top: 'rounded-t',
+  bottom: 'rounded-b'
+};
+
+export default {
+  name: 'TableauFencerCard',
+  components: { BaseText },
+  props: {
+    fencer: {
+      type: Object,
+      required: true
+    },
+    score: {
+      type: String,
+      required: true
+    },
+    position: {
+      type: [String, Number],
+      required: true
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    scoreColor: {
+      type: String,
+      required: true
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    isCountingBackwardsMaxScore: {
+      type: Number,
+      default: 0
+    },
+    corners: {
+      type: String,
+      default: 'none',
+      validator: value => Object.hasOwn(cornerClasses, value)
+    }
+  },
+  computed: {
+    cornerClass() {
+      return cornerClasses[this.corners];
+    },
+    displayedScore() {
+      const score = Number(this.score || 0);
+      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
+    },
+    name() {
+      return String(this.fencer?.DisplayName || '');
+    },
+    positionColorClass() {
+      return this.color ? `bg-${this.color}` : 'bg-dropdownSelect';
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/TournamentAdminCard/TournamentAdmin.stories.js

@@ -2,32 +2,32 @@ import TournamentAdminCard from './TournamentAdminCard.vue';
 import mockTournaments from '../../../../mocks/tournamentMock.js';
 
 export default {
-    title: 'Organisms/Cards/TournamentAdminCard',
-    component: TournamentAdminCard,
-    tags: ['autodocs'],
-    args: {
-        detail: mockTournaments[0],
-    },
-    argTypes: {
-        detail: { control: 'object' },
-    },
+  title: 'Organisms/Cards/TournamentAdminCard',
+  component: TournamentAdminCard,
+  tags: ['autodocs'],
+  args: {
+    detail: mockTournaments[0]
+  },
+  argTypes: {
+    detail: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        detail: mockTournaments[0],
-    }
+  args: {
+    detail: mockTournaments[0]
+  }
 };
 
 export const WithoutImage = {
-    args: {
-        detail: mockTournaments[2],
-    }
+  args: {
+    detail: mockTournaments[2]
+  }
 };
 
 export const canRemove = {
-    args: {
-        detail: mockTournaments[4],
-        canRemove: 'Admin'
-    }
-};
+  args: {
+    detail: mockTournaments[4],
+    canRemove: 'Admin'
+  }
+};

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

@@ -1,46 +1,75 @@
 <template>
-  <div class="flex items-center justify-between border bg-neutral border-dropdownSelect rounded-lg shadow hover:border-bright mt-4"
-       @click="listEvents">
+  <div
+    class="flex items-center justify-between border bg-neutral border-dropdownSelect rounded-lg shadow hover:border-bright mt-4"
+    @click="listEvents"
+  >
     <div class="w-10 md:w-28 flex flex-row">
-      <img v-if="image" :src="image" alt="Tournament Image" class="h-8 md:h-12 m-2 shadow-lg rounded-md md:rounded-lg object-cover"/>
+      <img
+        v-if="image"
+        :src="image"
+        alt="Tournament Image"
+        class="h-8 md:h-12 m-2 shadow-lg rounded-md md:rounded-lg object-cover"
+      />
     </div>
     <div class="flex-grow ml-2 md:-mt-1 md:-ml-4">
-      <BaseText :text="detail.Name" size="" weight="bold" color="quaternary" class="pl-2 md:pl-0 text-sm md:text-xl"/>
-      <BaseText :text="formattedDateRange" size="" weight="normal" color="quaternary" class="pl-2 md:pl-0 text-xs md:text-sm"/>
+      <BaseText :text="detail.Name" size="" weight="bold" color="quaternary" class="pl-2 md:pl-0 text-sm md:text-xl" />
+      <BaseText
+        :text="formattedDateRange"
+        size=""
+        weight="normal"
+        color="quaternary"
+        class="pl-2 md:pl-0 text-xs md:text-sm"
+      />
     </div>
     <div class="flex flex-row justify-end align-top h-8 md:w-20 mr-4">
-      <base-icon v-if="detail.HostedOnM2" iconName="fa-m2logo" iconStyle="fa-kit" size="" color="quaternary" class="text-xs md:text-xl block mr-4 -mt-1"/>
-      <base-icon :iconName="getIconName" size="" color="quaternary" class="text-xs md:text-sm block"/>
+      <base-icon
+        v-if="detail.HostedOnM2"
+        iconName="fa-m2logo"
+        iconStyle="fa-kit"
+        size=""
+        color="quaternary"
+        class="text-xs md:text-xl block mr-4 -mt-1"
+      />
+      <base-icon :iconName="getIconName" size="" color="quaternary" class="text-xs md:text-sm block" />
     </div>
     <div class="flex flex-row justify-end space-x-4">
       <div class="md:mt-1" :class="detail.CanRemove ? '' : 'mr-2'">
-        <BaseButton label="Edit" size="sm" type="primary" @buttonClick.stop="handleEditClick" class="hidden md:block"/>
-        <BaseButton label="Edit" size="xs" type="primary" @buttonClick.stop="handleEditClick" class="block md:hidden"/>
+        <BaseButton label="Edit" size="sm" type="primary" @buttonClick.stop="handleEditClick" class="hidden md:block" />
+        <BaseButton label="Edit" size="xs" type="primary" @buttonClick.stop="handleEditClick" class="block md:hidden" />
       </div>
-      <div v-if="detail.CanRemove"
-           class="border-l border-dropdownSelect h-12 w-12 items-center text-center rounded-tr-lg rounded-br-lg">
-        <BaseIcon icon-name="fa-circle-xmark" size="2xl" color="quinary" class="md:p-2" hover="alarm" @buttonClick.stop="deleteTournament"/>
+      <div
+        v-if="detail.CanRemove"
+        class="border-l border-dropdownSelect h-12 w-12 items-center text-center rounded-tr-lg rounded-br-lg"
+      >
+        <BaseIcon
+          icon-name="fa-circle-xmark"
+          size="2xl"
+          color="quinary"
+          class="md:p-2"
+          hover="alarm"
+          @buttonClick.stop="deleteTournament"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import defaultTournamentImage from "../../../../assets/default-tournament.png";
-
-const visibilityIcons = {
-  Open: 'fa-globe',
-  Private: 'fa-lock',
-  Club: 'fa-house'
-};
-
-export default {
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import defaultTournamentImage from '../../../../assets/default-tournament.png';
+
+const visibilityIcons = {
+  Open: 'fa-globe',
+  Private: 'fa-lock',
+  Club: 'fa-house'
+};
+
+export default {
   name: 'TournamentAdminCard',
   emits: ['delete', 'edit', 'listEvents'],
-  components: {BaseText, BaseButton, BaseIcon},
+  components: { BaseText, BaseButton, BaseIcon },
   props: {
     detail: {
       type: Object,
@@ -50,7 +79,7 @@ export default {
   data() {
     return {
       defaultImage: defaultTournamentImage
-    }
+    };
   },
   computed: {
     image() {
@@ -61,20 +90,20 @@ export default {
       return this.defaultImage;
     },
     formattedDateRange() {
-      const formatDate = (dateStr) => {
+      const formatDate = dateStr => {
         const date = new Date(`${dateStr}T00:00:00Z`);
         return date.toISOString().split('T')[0];
       };
 
       return `${formatDate(this.detail.StartDate)} - ${formatDate(this.detail.EndDate)}`;
     },
-    getM2Icon(){
+    getM2Icon() {
       !!this.detail.HostedOnM2;
-    },
-    getIconName() {
-      return visibilityIcons[this.detail.Visibility] || 'fa-question-circle';
-    }
-  },
+    },
+    getIconName() {
+      return visibilityIcons[this.detail.Visibility] || 'fa-question-circle';
+    }
+  },
   methods: {
     deleteTournament() {
       this.$emit('delete', this.detail.TournamentId);