@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,27 +1,25 @@
 <template>
   <component
-      :is="variantComponent"
-      :card="card"
-      :mode="inactiveMode"
-      :editMode="editMode"
-      :reorderMode="reorderMode"
-      :timerStatus="timerStatus"
-      :selected="selected"
-      :isAdmin="isAdmin"
-      @start="onStart"
-      @resume="onResume"
-      @edit="onEdit"
-      @assign="onAssign"
+    :is="variantComponent"
+    :card="card"
+    :mode="inactiveMode"
+    :editMode="editMode"
+    :reorderMode="reorderMode"
+    :timerStatus="timerStatus"
+    :selected="selected"
+    @start="onStart"
+    @resume="onResume"
+    @edit="onEdit"
   />
 </template>
 
 <script>
-import BoutCardWaiting from "./Variants/BoutCardWaiting/BoutCardWaiting.vue";
-import BoutCardActive from "./Variants/BoutCardActive/BoutCardActive.vue";
-import BoutCardInactive from "./Variants/BoutCardInactive/BoutCardInactive.vue";
-import BoutCardReorder from "./Variants/BoutCardReorder/BoutCardReorder.vue";
-import ReorderableShell from "../../../Molecules/Reorder/ReorderableShell.vue";
-import missingPortrait from "../../../../assets/portrait1.png";
+import BoutCardWaiting from './Variants/BoutCardWaiting/BoutCardWaiting.vue';
+import BoutCardActive from './Variants/BoutCardActive/BoutCardActive.vue';
+import BoutCardInactive from './Variants/BoutCardInactive/BoutCardInactive.vue';
+import BoutCardReorder from './Variants/BoutCardReorder/BoutCardReorder.vue';
+import ReorderableShell from '../../../Molecules/Reorder/ReorderableShell.vue';
+import missingPortrait from '../../../../assets/portrait1.png';
 
 const VariantMap = {
   waiting: BoutCardWaiting,
@@ -30,9 +28,35 @@ const VariantMap = {
   reorder: BoutCardReorder
 };
 
+const createFencerCard = (fencer, clubColor, fallbackColor) => {
+  const person = fencer || {};
+  const club = person.Club || {};
+  const portrait = person.Images?.[0]?.URL || missingPortrait;
+
+  return {
+    portrait,
+    name: person.DisplayName || 'Unknown Name',
+    team: club.Name || 'Unknown Team',
+    colorDot: clubColor || fallbackColor
+  };
+};
+
+const getDisplayedScore = (score, countingBackwardsMaxScore) => {
+  const normalizedScore = score || 0;
+  if (countingBackwardsMaxScore <= 0) return normalizedScore;
+  return countingBackwardsMaxScore - normalizedScore;
+};
+
+const createBoutIds = bout => ({
+  BoutId: bout.BoutId,
+  orderIndex: bout.OrderIndex,
+  PoolId: bout.PoolId,
+  EventId: bout.EventId
+});
+
 export default {
-  name: "BoutCard",
-  emits: ['action:assignBout', 'action:editBout', 'action:resumeBout', 'action:startBout', 'reorder:swap'],
+  name: 'BoutCard',
+  emits: ['action:editBout', 'action:resumeBout', 'action:startBout', 'reorder:swap'],
   components: { ReorderableShell, BoutCardWaiting, BoutCardActive, BoutCardInactive },
   props: {
     bout: { type: Object, required: true },
@@ -42,53 +66,27 @@ export default {
     editMode: { type: Boolean, required: true },
     reorderMode: { type: Boolean, required: true },
     isCountingBackwardsMaxScore: { type: Number, default: 0 },
-    selected: { type: Boolean, default: false },
-    isAdmin: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false }
   },
   computed: {
     card() {
-      const b = this.bout || {};
-      const f1 = b.Person1 || {};
-      const f2 = b.Person2 || {};
-
-      const raw1 = b.Score1 || 0;
-      const raw2 = b.Score2 || 0;
-      const score1 = this.isCountingBackwardsMaxScore > 0 ? (this.isCountingBackwardsMaxScore - raw1) : raw1;
-      const score2 = this.isCountingBackwardsMaxScore > 0 ? (this.isCountingBackwardsMaxScore - raw2) : raw2;
-
-      const status = (b.Status || '').toLowerCase(); // 'scheduled' | 'active' | 'completed'
-      const timeLeftSeconds = Number(b.TimeLeft || 0);
+      const bout = this.bout || {};
 
       return {
-        status,
-        customStatus: b.customStatus || '',
-        timeLeftSeconds,
-        fencer1: {
-          portrait: f1?.Images?.[0]?.URL || missingPortrait,
-          name: f1?.DisplayName || 'Unknown Name',
-          team: f1?.Club?.Name || 'Unknown Team',
-          colorDot: this.hostingClubColors?.Color1 || 'red',
-        },
-        fencer2: {
-          portrait: f2?.Images?.[0]?.URL || missingPortrait,
-          name: f2?.DisplayName || 'Unknown Name',
-          team: f2?.Club?.Name || 'Unknown Team',
-          colorDot: this.hostingClubColors?.Color2 || 'blue',
-        },
-        score1,
-        score2,
-        pos1: b.Person1Pos,
-        pos2: b.Person2Pos,
-        ids: {
-          BoutId: b.BoutId,
-          orderIndex: b.OrderIndex,
-          PoolId: b.PoolId,
-          EventId: b.EventId,
-        },
+        status: (bout.Status || '').toLowerCase(),
+        customStatus: bout.customStatus || '',
+        timeLeftSeconds: Number(bout.TimeLeft || 0),
+        fencer1: createFencerCard(bout.Person1, this.hostingClubColors?.Color1, 'red'),
+        fencer2: createFencerCard(bout.Person2, this.hostingClubColors?.Color2, 'blue'),
+        score1: getDisplayedScore(bout.Score1, this.isCountingBackwardsMaxScore),
+        score2: getDisplayedScore(bout.Score2, this.isCountingBackwardsMaxScore),
+        pos1: bout.Person1Pos,
+        pos2: bout.Person2Pos,
+        ids: createBoutIds(bout)
       };
     },
     variant() {
-      if (this.reorderMode) return "reorder";
+      if (this.reorderMode) return 'reorder';
       if (this.isWaiting) return 'waiting';
       if (this.card.status === 'active') return 'active';
       return 'inactive';
@@ -99,17 +97,22 @@ export default {
     },
     variantComponent() {
       return VariantMap[this.variant];
-    },
+    }
   },
   methods: {
-    onStart(ids) { this.$emit('action:startBout', ids);},
-    onResume(ids) { this.$emit('action:resumeBout', ids); },
-    onEdit(ids) { this.$emit('action:editBout', ids); },
+    onStart(ids) {
+      this.$emit('action:startBout', ids);
+    },
+    onResume(ids) {
+      this.$emit('action:resumeBout', ids);
+    },
+    onEdit(ids) {
+      this.$emit('action:editBout', ids);
+    },
     onDrop({ fromDragId, toDragId }) {
       if (!fromDragId || !toDragId || String(fromDragId) === String(toDragId)) return;
       this.$emit('reorder:swap', { fromBoutId: fromDragId, toBoutId: toDragId });
-    },
-    onAssign(ids) { this.$emit('action:assignBout', ids); },
-  },
+    }
+  }
 };
 </script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardActive/BoutCardActive.stories.js

@@ -1,31 +1,33 @@
 import BoutCardActive from './BoutCardActive.vue';
 
 const makeCard = () => ({
-    status: 'active',
-    customStatus: 'test',
-    timeLeftSeconds: 85,
-    fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
-    fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
-    score1: 3, score2: 4,
-    pos1: '1', pos2: '1',
-    ids: { boutId: 1, orderIndex: 0, poolId: 10, eventId: 5 },
+  status: 'active',
+  customStatus: 'test',
+  timeLeftSeconds: 85,
+  fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
+  fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
+  score1: 3,
+  score2: 4,
+  pos1: '1',
+  pos2: '1',
+  ids: { boutId: 1, orderIndex: 0, poolId: 10, eventId: 5 }
 });
 
 export default {
-    title: 'Molecules/BoutCard/Variants/Active',
-    component: BoutCardActive,
-    args: {
-        card: makeCard(),
-        editMode: true,
-        reorderMode: false,
-        timerStatus: 'running',
-    },
-    argTypes: {
-        timerStatus: {
-            control: { type: 'radio' },
-            options: ['running', 'stopped']
-        },
-    },
+  title: 'Molecules/BoutCard/Variants/Active',
+  component: BoutCardActive,
+  args: {
+    card: makeCard(),
+    editMode: true,
+    reorderMode: false,
+    timerStatus: 'running'
+  },
+  argTypes: {
+    timerStatus: {
+      control: { type: 'radio' },
+      options: ['running', 'stopped']
+    }
+  }
 };
 
 export const Running = {};

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardActive/BoutCardActive.vue

@@ -7,7 +7,7 @@
     <!-- Desktop active -->
     <div class="hidden md:flex items-center justify-between rounded-lg">
       <!-- Fencer 1 -->
-      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex space-x-4 items-center">
           <div class="relative">
             <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full z-0 relative" />
@@ -27,7 +27,7 @@
       </div>
 
       <!-- Fencer 2 -->
-      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex space-x-4 justify-between w-full">
           <BaseText :text="String(card.score2)" size="3xl" weight="bold" class="align-middle pl-3 pt-0.5" />
           <div class="w-full">
@@ -50,11 +50,11 @@
     </div>
 
     <!-- Mobile active -->
-    <div
-        class="flex md:hidden justify-between items-center p-3 border border-alarm rounded-md bg-poolBox transition"
-        :class="mobileCardActionClass"
-        @click="onCardClick"
-    >
+    <div
+      class="flex md:hidden justify-between items-center p-3 border border-alarm rounded-md bg-poolBox transition"
+      :class="mobileCardActionClass"
+      @click="onCardClick"
+    >
       <div class="relative flex flex-col items-center">
         <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
         <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute top-0 left-0`"></div>
@@ -77,33 +77,35 @@
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import missingPortrait from "../../../../../../assets/portrait1.png";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import missingPortrait from '../../../../../../assets/portrait1.png';
 
 export default {
-  name: "BoutCardActive",
+  name: 'BoutCardActive',
   emits: ['resume'],
   components: { BaseButton, BaseText },
   props: {
-    card: { type: Object, required: true },
-    editMode: { type: Boolean, default: false },
-    timerStatus: { type: String, default: "stopped" },
-  },
+    card: { type: Object, required: true },
+    editMode: { type: Boolean, default: false },
+    timerStatus: { type: String, default: 'stopped' }
+  },
   data() {
     return {
       missingPortrait,
       remaining: 0,
-      interval: null,
+      interval: null
     };
   },
-  computed: {
-    hasCard() { return !!this.card; },
-    mobileCardActionClass() {
-      if (this.editMode) return "cursor-pointer";
-      return "cursor-default";
-    },
-    fencer1Portrait() {
+  computed: {
+    hasCard() {
+      return !!this.card;
+    },
+    mobileCardActionClass() {
+      if (this.editMode) return 'cursor-pointer';
+      return 'cursor-default';
+    },
+    fencer1Portrait() {
       const src = this.card?.fencer1?.portrait;
       return src && String(src).trim() ? src : this.missingPortrait;
     },
@@ -112,46 +114,56 @@ export default {
       return src && String(src).trim() ? src : this.missingPortrait;
     },
     displayTime() {
-      const m = Math.floor(this.remaining / 60).toString().padStart(2, "0");
-      const s = (this.remaining % 60).toString().padStart(2, "0");
+      const m = Math.floor(this.remaining / 60)
+        .toString()
+        .padStart(2, '0');
+      const s = (this.remaining % 60).toString().padStart(2, '0');
       return `${m}:${s}`;
-    },
+    }
   },
   mounted() {
-    if (this.timerStatus === "running") this.start();
+    if (this.timerStatus === 'running') this.start();
+  },
+  beforeUnmount() {
+    this.stop();
   },
-  beforeUnmount() { this.stop(); },
   watch: {
-    "card.timeLeftSeconds": {
+    'card.timeLeftSeconds': {
       immediate: true,
       handler(n) {
         const next = Number(n ?? 0);
-        if (this.timerStatus !== "running") this.remaining = next;
-        if (this.timerStatus === "running" && this.remaining === 0) this.remaining = next;
-      },
+        if (this.timerStatus !== 'running') this.remaining = next;
+        if (this.timerStatus === 'running' && this.remaining === 0) this.remaining = next;
+      }
     },
     timerStatus(n) {
-      if (n === "running") { this.start(); return; }
+      if (n === 'running') {
+        this.start();
+        return;
+      }
       this.stop();
-    },
+    }
   },
   methods: {
     start() {
       this.stop();
       if (!this.remaining) this.remaining = Number(this.card?.timeLeftSeconds ?? 0);
       this.interval = setInterval(() => {
-        if (this.remaining <= 0) { this.stop(); return; }
+        if (this.remaining <= 0) {
+          this.stop();
+          return;
+        }
         this.remaining--;
       }, 1000);
     },
     stop() {
       if (this.interval) clearInterval(this.interval);
       this.interval = null;
-    },
-    onCardClick() {
-      if (!this.editMode) return;
-      this.$emit("resume", this.card.ids);
-    },
-  },
+    },
+    onCardClick() {
+      if (!this.editMode) return;
+      this.$emit('resume', this.card.ids);
+    }
+  }
 };
 </script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.stories.js

@@ -1,49 +1,36 @@
 import BoutCardInactive from './BoutCardInactive.vue';
 
 const baseCard = {
-    status: 'scheduled',
-    customStatus: '',
-    fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
-    fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
-    score1: 0,
-    score2: 0,
-    pos1: '1',
-    pos2: '2',
-    ids: { BoutId: 2, orderIndex: 1, PoolId: 10, EventId: 5 },
+  status: 'scheduled',
+  customStatus: '',
+  fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
+  fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
+  score1: 0,
+  score2: 0,
+  pos1: '1',
+  pos2: '2',
+  ids: { BoutId: 2, orderIndex: 1, PoolId: 10, EventId: 5 }
 };
 
 export default {
-    title: 'Molecules/BoutCard/Variants/Inactive',
-    component: BoutCardInactive,
-    args: {
-        card: { ...baseCard },
-        editMode: true,
-        reorderMode: false,
-        mode: 'scheduled',
-
-        // NEW
-        isAdmin: false,
-    },
-    argTypes: {
-        mode: { control: { type: 'radio' }, options: ['scheduled', 'completed'] },
-        isAdmin: { control: 'boolean' },
-    },
+  title: 'Molecules/BoutCard/Variants/Inactive',
+  component: BoutCardInactive,
+  args: {
+    card: { ...baseCard },
+    editMode: true,
+    reorderMode: false,
+    mode: 'scheduled'
+  },
+  argTypes: {
+    mode: { control: { type: 'radio' }, options: ['scheduled', 'completed'] }
+  }
 };
 
 export const Scheduled = {};
 
-export const ScheduledAdminAssignVisible = {
-    args: {
-        mode: 'scheduled',
-        isAdmin: true,
-        card: { ...baseCard, status: 'scheduled' },
-    },
-};
-
 export const Completed = {
-    args: {
-        mode: 'completed',
-        isAdmin: true, // doesn't matter; button should be hidden when not scheduled
-        card: { ...baseCard, status: 'completed', score1: 5, score2: 2 },
-    },
+  args: {
+    mode: 'completed',
+    card: { ...baseCard, status: 'completed', score1: 5, score2: 2 }
+  }
 };