@dcrackel/hematournamentui 1.0.712 → 1.0.713

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

@@ -1,256 +1,289 @@
-<template>
-  <section v-if="showBout" class="relative w-40">
-    <div
-      v-if="showRingLabel"
-      data-testid="active-ring"
-      class="pointer-events-none absolute -top-4 left-0 z-20 flex h-4 w-40 items-center rounded-t bg-primary px-2"
-    >
-      <BaseText :text="ringName" size="xs" color="neutral" weight="bold" class="truncate uppercase" />
-    </div>
-
-    <div class="relative w-40 text-left" :class="{ 'opacity-70': !isSelectable }">
-      <TableauFencerCard
-        :fencer="person1Display"
-        :score="score1"
-        :position="dePosition1"
-        :color="hostingClubColors.Color1"
-        :scoreColor="getScoreColor('person1')"
-        :showScore="showScore1"
-        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-        corners="top"
-      />
-
-      <div class="relative h-px bg-dropdownSelect">
-        <span
-          :ref="element => registerAnchor('input', element)"
-          class="pointer-events-none absolute left-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0"
-        ></span>
-        <span
-          :ref="element => registerAnchor('output', element)"
-          class="pointer-events-none absolute right-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0"
-        ></span>
-      </div>
-
-      <TableauFencerCard
-        :fencer="person2Display"
-        :score="score2"
-        :position="dePosition2"
-        :color="hostingClubColors.Color2"
-        :scoreColor="getScoreColor('person2')"
-        :showScore="showScore2"
-        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-        corners="bottom"
-      />
-      <button
-        type="button"
-        data-testid="tableau-bout"
-        class="absolute inset-0 z-10 w-40 rounded text-left shadow-md outline-none ring-1 ring-transparent transition hover:shadow-lg hover:ring-2 hover:ring-bright focus-visible:ring-2 focus-visible:ring-bright disabled:cursor-default"
-        :disabled="!isSelectable"
-        :aria-label="boutLabel"
-        @click="handleBoutClick"
-      ></button>
-    </div>
-
-    <div
-      v-if="showActiveChrome"
-      data-testid="active-time"
-      class="pointer-events-none absolute left-full top-1/2 z-20 flex h-[57px] w-10 -translate-y-1/2 items-center justify-center rounded-r-md bg-primary px-1"
-    >
-      <BaseText :text="displayTime" size="xs" color="neutral" weight="bold" class="font-sourceCodePro" />
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
-
-const EMPTY_FENCER = { DisplayName: '', Club: { Name: '' }, EventPersons: [] };
-
-const getFencerName = fencer => String(fencer?.DisplayName || '');
-const isByeName = fencer => getFencerName(fencer).toUpperCase() === 'BYE';
-const isMissingFencer = fencer => !fencer?.PersonId || Number(fencer.PersonId) === 0;
-const isUnavailableFencer = fencer => isMissingFencer(fencer) || isByeName(fencer);
-const isCompletedBout = bout => String(bout?.Status || '').toLowerCase() === 'completed';
-const getNumericScore = score => Number(score ?? 0);
-const normalizeSeconds = value => Math.max(0, Number(value) || 0);
-const formatSeconds = value => {
-  const seconds = normalizeSeconds(value);
-  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
-};
-const isRunningActiveBout = bout =>
-  String(bout?.Status || '').toLowerCase() === 'active' && String(bout?.TimerStatus || '').toLowerCase() === 'running';
-
-const scoreColorRules = {
-  person1: [
-    { matches: bout => !isByeName(bout.Person1) && isByeName(bout.Person2), color: 'bg-winGreen' },
-    { matches: bout => getNumericScore(bout.Score1) > getNumericScore(bout.Score2), color: 'bg-winGreen' },
-    {
-      matches: bout =>
-        getNumericScore(bout.Score1) < getNumericScore(bout.Score2) && String(bout.Status).toLowerCase() === 'active',
-      color: 'bg-lossRed'
-    }
-  ],
-  person2: [
-    { matches: bout => !isByeName(bout.Person2) && isByeName(bout.Person1), color: 'bg-winGreen' },
-    { matches: bout => getNumericScore(bout.Score2) > getNumericScore(bout.Score1), color: 'bg-winGreen' },
-    {
-      matches: bout =>
-        getNumericScore(bout.Score2) < getNumericScore(bout.Score1) && String(bout.Status).toLowerCase() === 'active',
-      color: 'bg-lossRed'
-    }
-  ]
-};
-
-const getMatchingScoreColor = (bout, fencerKey) =>
-  scoreColorRules[fencerKey].find(rule => rule.matches(bout))?.color || 'bg-dropdownSelect';
-
-const getDisplayFencer = (bout, fencer) => {
-  if (!fencer) return EMPTY_FENCER;
-  if (String(bout.Status).toLowerCase() !== 'scheduled' || !isByeName(fencer)) return fencer;
-  return { ...fencer, DisplayName: '', Club: { Name: '' } };
-};
-
-export default {
-  name: 'TableauBoutCard',
-  components: { BaseText, TableauFencerCard },
-  emits: ['action:directingBout', 'action:editBout', 'register-node-anchor'],
-  props: {
-    bout: {
-      type: Object,
-      required: true
-    },
-    hostingClubColors: {
-      type: Object,
-      required: true
-    },
-    roundName: {
-      type: String,
-      required: true
-    },
-    bracketSize: {
-      type: String,
-      required: true
-    },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      remainingTime: normalizeSeconds(this.bout.TimeLeft),
-      timerInterval: null
-    };
-  },
-  computed: {
-    boutNodeId() {
-      return this.bout.DEBoutId ?? this.bout.BoutId;
-    },
-    boutLabel() {
-      return `${this.person1Display.DisplayName || 'Unassigned'} versus ${
-        this.person2Display.DisplayName || 'Unassigned'
-      }`;
-    },
-    dePosition1() {
-      return this.bout.Person1?.EventPersons?.[0]?.DEPosition ?? '';
-    },
-    dePosition2() {
-      return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? '';
-    },
-    displayTime() {
-      return formatSeconds(this.remainingTime);
-    },
-    isActiveBout() {
-      return String(this.bout.Status || '').toLowerCase() === 'active';
-    },
-    isDirectable() {
-      return !isUnavailableFencer(this.bout.Person1) && !isUnavailableFencer(this.bout.Person2);
-    },
-    isSelectable() {
-      return isCompletedBout(this.bout) || this.isDirectable;
-    },
-    person1Display() {
-      return getDisplayFencer(this.bout, this.bout.Person1);
-    },
-    person2Display() {
-      return getDisplayFencer(this.bout, this.bout.Person2);
-    },
-    ringName() {
-      return String(this.bout.RingName || '');
-    },
-    score1() {
-      return String(this.bout.Score1 ?? 0);
-    },
-    score2() {
-      return String(this.bout.Score2 ?? 0);
-    },
-    showBout() {
-      if (this.roundName !== 'Grand Final') return true;
-      return !isUnavailableFencer(this.bout.Person1) && !isUnavailableFencer(this.bout.Person2);
-    },
-    showActiveChrome() {
-      return this.isActiveBout && (this.ringName.length > 0 || this.remainingTime > 0 || this.shouldTickTimer);
-    },
-    showScore1() {
-      return !isUnavailableFencer(this.bout.Person1);
-    },
-    showScore2() {
-      return !isUnavailableFencer(this.bout.Person2);
-    },
-    showRingLabel() {
-      return this.isActiveBout && this.ringName.length > 0;
-    },
-    shouldTickTimer() {
-      return isRunningActiveBout(this.bout) && this.remainingTime > 0;
-    }
-  },
-  watch: {
-    'bout.TimeLeft'(value) {
-      this.remainingTime = normalizeSeconds(value);
-      this.restartTimer();
-    },
-    'bout.TimerStatus'() {
-      this.restartTimer();
-    },
-    'bout.Status'() {
-      this.restartTimer();
-    }
-  },
-  mounted() {
-    this.restartTimer();
-  },
-  beforeUnmount() {
-    this.stopTimer();
-  },
-  methods: {
-    getScoreColor(fencerKey) {
-      return getMatchingScoreColor(this.bout, fencerKey);
-    },
-    handleBoutClick() {
-      if (isCompletedBout(this.bout)) {
-        this.$emit('action:editBout', this.bout);
-        return;
-      }
-      if (this.isDirectable) this.$emit('action:directingBout', this.bout);
-    },
-    restartTimer() {
-      this.stopTimer();
-      if (!this.shouldTickTimer) return;
-      this.timerInterval = setInterval(this.tickTimer, 1000);
-    },
-    registerAnchor(kind, element) {
-      if (this.boutNodeId === null || this.boutNodeId === undefined) return;
-      this.$emit('register-node-anchor', { id: this.boutNodeId, kind, el: element });
-    },
-    stopTimer() {
-      if (this.timerInterval) clearInterval(this.timerInterval);
-      this.timerInterval = null;
-    },
-    tickTimer() {
-      this.remainingTime = Math.max(0, this.remainingTime - 1);
-      if (this.remainingTime === 0) this.stopTimer();
-    }
-  }
-};
-</script>
+<template>
+  <HoverActions
+    v-if="showBout"
+    v-slot="{ isOpen }"
+    class="relative w-40"
+    :actions="boutActions"
+    :focusable="!isSelectable"
+    @action="handleBoutAction"
+  >
+    <div
+      v-if="showRingLabel"
+      data-testid="active-ring"
+      class="pointer-events-none absolute -top-4 left-0 z-20 flex h-4 w-40 items-center rounded-t bg-primary px-2"
+    >
+      <BaseText :text="ringName" size="xs" color="neutral" weight="bold" class="truncate uppercase" />
+    </div>
+
+    <div class="relative w-40 text-left" :class="{ 'opacity-70': !isSelectable }">
+      <TableauFencerCard
+        :fencer="person1Display"
+        :score="score1"
+        :position="dePosition1"
+        :color="hostingClubColors.Color1"
+        :scoreColor="getScoreColor('person1')"
+        :showScore="showScore1"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        corners="top"
+      />
+
+      <div class="relative h-px bg-dropdownSelect">
+        <span
+          :ref="element => registerAnchor('input', element)"
+          class="pointer-events-none absolute left-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0"
+        ></span>
+        <span
+          :ref="element => registerAnchor('output', element)"
+          class="pointer-events-none absolute right-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0"
+        ></span>
+      </div>
+
+      <TableauFencerCard
+        :fencer="person2Display"
+        :score="score2"
+        :position="dePosition2"
+        :color="hostingClubColors.Color2"
+        :scoreColor="getScoreColor('person2')"
+        :showScore="showScore2"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        corners="bottom"
+      />
+      <button
+        type="button"
+        data-testid="tableau-bout"
+        class="absolute inset-0 z-10 w-40 rounded text-left shadow-md outline-none ring-1 ring-transparent transition hover:shadow-lg hover:ring-2 hover:ring-bright focus-visible:ring-2 focus-visible:ring-bright disabled:cursor-default"
+        :disabled="!isSelectable"
+        :aria-label="boutLabel"
+        :aria-haspopup="boutActions.length ? 'menu' : undefined"
+        :aria-expanded="boutActions.length ? isOpen : undefined"
+        @click="handleBoutClick"
+      ></button>
+    </div>
+
+    <div
+      v-if="showActiveChrome"
+      data-testid="active-time"
+      class="pointer-events-none absolute left-full top-1/2 z-20 flex h-[57px] w-10 -translate-y-1/2 items-center justify-center rounded-r-md bg-primary px-1"
+    >
+      <BaseText :text="displayTime" size="xs" color="neutral" weight="bold" class="font-sourceCodePro" />
+    </div>
+  </HoverActions>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import HoverActions from '../../../Molecules/Menus/HoverActions/HoverActions.vue';
+import { canAssignBoutDirector, createBoutActions } from '../../../Util/boutDirectorAssignment.js';
+import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
+
+const EMPTY_FENCER = { DisplayName: '', Club: { Name: '' }, EventPersons: [] };
+
+const getFencerName = fencer => String(fencer?.DisplayName || '');
+const isByeName = fencer => getFencerName(fencer).toUpperCase() === 'BYE';
+const isMissingFencer = fencer => !fencer?.PersonId || Number(fencer.PersonId) === 0;
+const isUnavailableFencer = fencer => isMissingFencer(fencer) || isByeName(fencer);
+const isCompletedBout = bout => String(bout?.Status || '').toLowerCase() === 'completed';
+const getNumericScore = score => Number(score ?? 0);
+const normalizeSeconds = value => Math.max(0, Number(value) || 0);
+const formatSeconds = value => {
+  const seconds = normalizeSeconds(value);
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+};
+const isRunningActiveBout = bout =>
+  String(bout?.Status || '').toLowerCase() === 'active' && String(bout?.TimerStatus || '').toLowerCase() === 'running';
+
+const scoreColorRules = {
+  person1: [
+    { matches: bout => !isByeName(bout.Person1) && isByeName(bout.Person2), color: 'bg-winGreen' },
+    { matches: bout => getNumericScore(bout.Score1) > getNumericScore(bout.Score2), color: 'bg-winGreen' },
+    {
+      matches: bout =>
+        getNumericScore(bout.Score1) < getNumericScore(bout.Score2) && String(bout.Status).toLowerCase() === 'active',
+      color: 'bg-lossRed'
+    }
+  ],
+  person2: [
+    { matches: bout => !isByeName(bout.Person2) && isByeName(bout.Person1), color: 'bg-winGreen' },
+    { matches: bout => getNumericScore(bout.Score2) > getNumericScore(bout.Score1), color: 'bg-winGreen' },
+    {
+      matches: bout =>
+        getNumericScore(bout.Score2) < getNumericScore(bout.Score1) && String(bout.Status).toLowerCase() === 'active',
+      color: 'bg-lossRed'
+    }
+  ]
+};
+
+const getMatchingScoreColor = (bout, fencerKey) =>
+  scoreColorRules[fencerKey].find(rule => rule.matches(bout))?.color || 'bg-dropdownSelect';
+
+const getDisplayFencer = (bout, fencer) => {
+  if (!fencer) return EMPTY_FENCER;
+  if (String(bout.Status).toLowerCase() !== 'scheduled' || !isByeName(fencer)) return fencer;
+  return { ...fencer, DisplayName: '', Club: { Name: '' } };
+};
+
+export default {
+  name: 'TableauBoutCard',
+  components: { BaseText, TableauFencerCard, HoverActions },
+  emits: ['action:directingBout', 'action:editBout', 'register-node-anchor', 'request:bout-director'],
+  props: {
+    showBoutDirectorAssignment: { type: Boolean, default: true },
+    plannedDirectorName: { type: String, default: '' },
+    plannedDirectorColor: { type: String, default: '' },
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    roundName: {
+      type: String,
+      required: true
+    },
+    bracketSize: {
+      type: String,
+      required: true
+    },
+    isCountingBackwardsMaxScore: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      remainingTime: normalizeSeconds(this.bout.TimeLeft),
+      timerInterval: null
+    };
+  },
+  computed: {
+    boutForActions() {
+      return { ...this.bout, RoundLabel: this.bout.RoundLabel || this.roundName };
+    },
+    boutActions() {
+      return createBoutActions(
+        this.boutForActions,
+        this.showBoutDirectorAssignment,
+        this.plannedDirectorName,
+        this.plannedDirectorColor
+      );
+    },
+    boutNodeId() {
+      return this.bout.DEBoutId ?? this.bout.BoutId;
+    },
+    boutLabel() {
+      return `${this.person1Display.DisplayName || 'Unassigned'} versus ${
+        this.person2Display.DisplayName || 'Unassigned'
+      }`;
+    },
+    dePosition1() {
+      return this.bout.Person1?.EventPersons?.[0]?.DEPosition ?? '';
+    },
+    dePosition2() {
+      return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? '';
+    },
+    displayTime() {
+      return formatSeconds(this.remainingTime);
+    },
+    isActiveBout() {
+      return String(this.bout.Status || '').toLowerCase() === 'active';
+    },
+    isDirectable() {
+      return !isUnavailableFencer(this.bout.Person1) && !isUnavailableFencer(this.bout.Person2);
+    },
+    isSelectable() {
+      return isCompletedBout(this.bout) || this.isDirectable;
+    },
+    person1Display() {
+      return getDisplayFencer(this.bout, this.bout.Person1);
+    },
+    person2Display() {
+      return getDisplayFencer(this.bout, this.bout.Person2);
+    },
+    ringName() {
+      return String(this.bout.RingName || '');
+    },
+    score1() {
+      return String(this.bout.Score1 ?? 0);
+    },
+    score2() {
+      return String(this.bout.Score2 ?? 0);
+    },
+    showBout() {
+      if (this.roundName !== 'Grand Final') return true;
+      return !isUnavailableFencer(this.bout.Person1) && !isUnavailableFencer(this.bout.Person2);
+    },
+    showActiveChrome() {
+      return this.isActiveBout && (this.ringName.length > 0 || this.remainingTime > 0 || this.shouldTickTimer);
+    },
+    showScore1() {
+      return !isUnavailableFencer(this.bout.Person1);
+    },
+    showScore2() {
+      return !isUnavailableFencer(this.bout.Person2);
+    },
+    showRingLabel() {
+      return this.isActiveBout && this.ringName.length > 0;
+    },
+    shouldTickTimer() {
+      return isRunningActiveBout(this.bout) && this.remainingTime > 0;
+    }
+  },
+  watch: {
+    'bout.TimeLeft'(value) {
+      this.remainingTime = normalizeSeconds(value);
+      this.restartTimer();
+    },
+    'bout.TimerStatus'() {
+      this.restartTimer();
+    },
+    'bout.Status'() {
+      this.restartTimer();
+    }
+  },
+  mounted() {
+    this.restartTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
+  },
+  methods: {
+    handleBoutAction(actionId) {
+      const handlers = { open: this.handleBoutClick, 'assign-director': this.requestDirectorAssignment };
+      handlers[actionId]?.();
+    },
+    requestDirectorAssignment() {
+      if (!this.showBoutDirectorAssignment || !canAssignBoutDirector(this.boutForActions)) return;
+      this.$emit('request:bout-director', JSON.parse(JSON.stringify(this.bout)));
+    },
+    getScoreColor(fencerKey) {
+      return getMatchingScoreColor(this.bout, fencerKey);
+    },
+    handleBoutClick() {
+      if (isCompletedBout(this.bout)) {
+        this.$emit('action:editBout', this.bout);
+        return;
+      }
+      if (this.isDirectable) this.$emit('action:directingBout', this.bout);
+    },
+    restartTimer() {
+      this.stopTimer();
+      if (!this.shouldTickTimer) return;
+      this.timerInterval = setInterval(this.tickTimer, 1000);
+    },
+    registerAnchor(kind, element) {
+      if (this.boutNodeId === null || this.boutNodeId === undefined) return;
+      this.$emit('register-node-anchor', { id: this.boutNodeId, kind, el: element });
+    },
+    stopTimer() {
+      if (this.timerInterval) clearInterval(this.timerInterval);
+      this.timerInterval = null;
+    },
+    tickTimer() {
+      this.remainingTime = Math.max(0, this.remainingTime - 1);
+      if (this.remainingTime === 0) this.stopTimer();
+    }
+  }
+};
+</script>