@dcrackel/hematournamentui 1.0.686 → 1.0.688

package/src/stories/Templates/EventManagement/PoolLive/PoolLive.vue

@@ -60,6 +60,40 @@
       </div>
     </section>
 
+    <!-- Assigned Bouts -->
+    <section v-if="hasAssignedBout && !fencerList && !reorderMode">
+      <div class="flex flex-row justify-between">
+        <BaseText class="mt-5" color="primaryHighlight" size="md" text="Assigned Bouts" weight="bold"/>
+        <div class="flex mr-1">
+          <BaseText class="mt-5 ml-5" color="primaryHighlight" size="md" text="Assigned:"/>
+          <BaseText :text="assignedBoutsToMe.length" class="mt-5 ml-2" color="primaryHighlight" size="md" weight="bold"/>
+        </div>
+      </div>
+      <div class="border-b border-bright mb-5"></div>
+
+      <div class="w-full flex flex-col items-center">
+        <div
+            v-for="bout in assignedBoutsToMe"
+            :key="bout.BoutId"
+            class="w-full md:w-3/4 my-4 flex items-stretch"
+        >
+          <div class="flex-1">
+            <BoutCard
+                :bout="bout"
+                :hostingClubColors="hostingClubColors"
+                :editMode="editMode"
+                :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+                :reorderMode="false"
+                :isAdmin="isAdmin"
+                @action:startBout="directBout"
+                @action:resumeBout="directBout"
+                @action:assignDirector="handleAssignClick"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- Upcoming -->
     <section v-if="remainingBoutsCount > 0 && !fencerList && !reorderMode">
       <div class="flex flex-row justify-between">
@@ -71,14 +105,20 @@
       </div>
       <div class="border-b border-dropdownSelect mb-5"></div>
       <div class="w-full flex flex-col items-center">
-        <div v-for="bout in markedUpcomingBouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4">
-          <BoutCard :bout="bout"
-                    :hostingClubColors="hostingClubColors"
-                    :editMode="editMode"
-                    :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                    :reorderMode="false"
-                    @action:startBout="directBout"
-                    />
+        <div v-for="bout in markedUpcomingBouts" :key="bout.BoutId" class="w-full md:w-3/4 my-4 flex items-stretch">
+          <div class="flex-1">
+            <BoutCard
+                :bout="bout"
+                :hostingClubColors="hostingClubColors"
+                :editMode="editMode"
+                :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+                :reorderMode="false"
+                :isAdmin="isAdmin"
+                @action:startBout="directBout"
+                @action:assignDirector="handleAssignClick"
+            />
+          </div>
+
         </div>
       </div>
     </section>
@@ -127,9 +167,11 @@
             >
               <BaseText :text="`#${row.index+1}`" size="xs" color="quaternary" weight="" class="mr-4 w-4"/>
               <BaseText :text="`${row.pair[0]} vs ${row.pair[1]}`" size="xs" color="quaternary" class="w-9"/>
-              <BaseIcon v-if="row.bout && row.index === row.boutIndex" icon-name="fa-square-check" size="xs" color="green" hover="green" class="ml-2" />
-              <BaseIcon v-else-if="row.bout" icon-name="fa-square-xmark" size="xs" color="orange" hover="orange" class="ml-2" />
-              <BaseIcon v-else icon-name="fa-square-minus" size="xs" color="red" hover="red" class="ml-2" />
+              <BaseIcon v-if="row.bout && row.index === row.boutIndex" icon-name="fa-square-check" size="xs"
+                        color="green" hover="green" class="ml-2"/>
+              <BaseIcon v-else-if="row.bout" icon-name="fa-square-xmark" size="xs" color="orange" hover="orange"
+                        class="ml-2"/>
+              <BaseIcon v-else icon-name="fa-square-minus" size="xs" color="red" hover="red" class="ml-2"/>
             </li>
           </ol>
         </div>
@@ -191,6 +233,14 @@
                    @submit:bout="handleEditBout"
                    :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"/>
 
+    <AssignDirectorModal
+        :show="showAssignDirectorModal"
+        :bout="assigningBout || {}"
+        :directors="directors"
+        @update:closeModal="closeAssignDirectorModal"
+        @assign="handleAssignDirector"
+    />
+
   </section>
 </template>
 
@@ -210,10 +260,12 @@ import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import FencerFinalResultCard from "../../../Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.vue";
 import ReorderableShell from "../../../Molecules/Reorder/ReorderableShell.vue";
 import {getPoolOrder} from '../../../Util/seeding.js';
+import AssignDirectorModal from "../../../Molecules/Modals/AssignDirectorModal/AssignDirectorModal.vue";
 
 export default {
   name: "PoolLive",
   components: {
+    AssignDirectorModal,
     ReorderableShell,
     FencerFinalResultCard,
     BaseButton,
@@ -253,7 +305,16 @@ export default {
     role: {
       type: String,
       default: 'admin'
-    }
+    },
+    directors: {
+      type: Array,
+      required: true
+    },
+    currentUserId: {
+      type: [Number, String],
+      required: true
+    },
+
   },
   data() {
     return {
@@ -267,6 +328,8 @@ export default {
       tabs,
       windowWidth: window.innerWidth,
       selectedReorderId: null,
+      showAssignDirectorModal: false,
+      assigningBout: null
     };
   },
   watch: {
@@ -286,6 +349,19 @@ export default {
     window.removeEventListener('resize', this.handleResize);
   },
   computed: {
+    isAdmin() {
+      return String(this.role || '').toLowerCase() === 'admin';
+    },
+    assignedBoutsToMe() {
+      const me = Number(this.currentUserId);
+      return this.localBouts
+          .filter(b => Number(b.RefereeId) === me && (b.Status || '').toLowerCase() !== 'completed')
+          .slice()
+          .sort((a, b) => Number(a.OrderIndex ?? 0) - Number(b.OrderIndex ?? 0));
+    },
+    hasAssignedBout() {
+      return this.assignedBoutsToMe.length > 0;
+    },
     currentSelectedBout() {
       return this.localBouts.find(b => b.BoutId === this.selectedBout.BoutId) || this.selectedBout;
     },
@@ -293,7 +369,7 @@ export default {
       return this.windowWidth <= 748;
     },
     eventRules() {
-      return this.event?.EventRules || {};
+      return Array.isArray(this.event?.EventRules) ? this.event.EventRules : [];
     },
     upcomingBouts() {
       return this.localBouts
@@ -531,6 +607,31 @@ export default {
       });
       this.localBouts = [...this.localBouts];
     },
+    handleAssignClick(ids) {
+      const bout = this.localBouts.find(b => b.BoutId === ids.BoutId);
+      if (!bout) return;
+      this.openAssignDirector(bout);
+    },
+    openAssignDirector(bout) {
+      this.assigningBout = bout;
+      this.showAssignDirectorModal = true;
+    },
+    closeAssignDirectorModal() {
+      this.showAssignDirectorModal = false;
+      this.assigningBout = null;
+    },
+    handleAssignDirector({bout, director}) {
+      const updatedBout = this.localBouts.find(b => b.BoutId === bout.BoutId) || bout;
+
+      // only change these two fields
+      updatedBout.RefereeId = director.PersonId;
+      updatedBout.RefName = director.DisplayName;
+
+      // emit to parent, parent will call socket emit/save
+      this.$emit('update:bout', updatedBout);
+
+      this.closeAssignDirectorModal();
+    },
     // --- helpers ---
     _idOf(bout) {
       return bout?.BoutId ?? bout?.boutId;
@@ -546,7 +647,9 @@ export default {
           .filter(b => this._normalizeStatus(b.Status) === 'scheduled')
           .slice()
           .sort((a, b) => Number(a.OrderIndex ?? Infinity) - Number(b.OrderIndex ?? Infinity));
-      scheduled.forEach((b, i) => { b.OrderIndex = i; });
+      scheduled.forEach((b, i) => {
+        b.OrderIndex = i;
+      });
     },
     _swapOrderBetweenIds(idA, idB) {
       if (!idA || !idB || String(idA) === String(idB)) return;
@@ -568,7 +671,7 @@ export default {
     },
 
     // --- DnD drop from <ReorderableShell> ---
-    onReorderDrop({ fromDragId, toDragId }) {
+    onReorderDrop({fromDragId, toDragId}) {
       this._swapOrderBetweenIds(fromDragId, toDragId);
     },
 

package/src/stories/Templates/PersonManagement/Admin/Administration.vue

@@ -0,0 +1,87 @@
+<template>
+  <section class="mt-2">
+    <div class="flex flex-col mb-4">
+      <TitledInput
+          :inputValue="personId"
+          :inputType="'number'"
+          placeholder="Meyer Squared ID"
+          title="Meyer Squared ID"
+          :disabled="true"
+          aria-disabled="true"
+      />
+    </div>
+
+    <div class="flex flex-col mb-4">
+      <TitledInput
+          :inputValue="hemaRatingId"
+          :inputType="'number'"
+          placeholder="HEMA Rating ID"
+          title="HEMA Rating ID"
+          @update:value="emitUpdate('HemaRatingsId', $event)"
+      />
+    </div>
+
+    <div class="flex flex-col mb-4">
+      <BaseText text="Access Level" size="sm" color="quaternary"/>
+      <DropDownMenu
+          :label="getAccessLevelLabel"
+          :items="accessLevels"
+          class="pb-2"
+          :selectedItem="getSelectedAccessLevel"
+          @update:selectedItem="emitUpdate('AccessLevel', $event.text)"
+          width="w-full"
+          dropDownWidth="w-full"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+
+export default {
+  name: "Administration",
+  emits: ["update:person"],
+  components: { TitledInput, BaseText, DropDownMenu },
+  props: {
+    person: { type: Object, required: true },
+    userLevel: { type: String, required: true },
+  },
+  computed: {
+    personId() {
+      return this.person?.PersonId ?? "";
+    },
+    hemaRatingId() {
+      return this.person?.HEMARatings?.[0]?.HemaRatingId ?? "";
+    },
+    accessLevels() {
+      if (this.userLevel === "Admin") {
+        return [
+          { text: "User", link: "User" },
+          { text: "Director", link: "Director" },
+          { text: "Club", link: "Club" },
+          { text: "Admin", link: "Admin" },
+        ];
+      }
+      return [
+        { text: "User", link: "User" },
+        { text: "Director", link: "Director" },
+        { text: "Club", link: "Club" },
+      ];
+    },
+    getSelectedAccessLevel() {
+      return { text: this.person.AccessLevel, link: this.person.AccessLevel };
+    },
+    getAccessLevelLabel() {
+      return this.person.AccessLevel ? "" : "Select Access Level";
+    },
+  },
+  methods: {
+    emitUpdate(field, value) {
+      this.$emit("update:person", { field, value });
+    },
+  },
+};
+</script>

package/src/stories/Templates/PersonManagement/Admin/FencerAdmin.vue

@@ -1,94 +1,77 @@
-`<template>
+<template>
   <section class="mt-2 min-h-80">
-    <div>
-      <div class="flex flex-col mb-4">
-        <TitledInput
-            :inputValue="personId"
-            :inputType="'number'"
-            placeholder="Meyer Squared ID"
-            title="Meyer Squared ID"
-            :disabled="true"
-            aria-disabled="true"
+    <!-- Administration section -->
+    <div class="pb-6">
+      <BaseText text="Administration" size="lg" color="primary" />
+      <div class="mt-3">
+        <Administration
+            :person="person"
+            :userLevel="userLevel"
+            @update:person="$emit('update:person', $event)"
         />
       </div>
-      <div class="flex flex-col mb-4">
-        <TitledInput
-            :inputValue="hemaRatingId"
-            :inputType="'number'"
-            placeholder="HEMA Rating ID"
-            title="HEMA Rating ID"
-            @update:value="emitUpdate('HemaRatingsId', $event)"
-        />
-      </div>
-      <div class="flex flex-col mb-4">
-        <BaseText text="Access Level" size="sm" color="quaternary"/>
-        <DropDownMenu
-            :label="getAccessLevelLabel"
-            :items="accessLevels"
-            class="pb-2"
-            :selectedItem="getSelectedAccessLevel"
-            @update:selectedItem="emitUpdate('AccessLevel', $event.text)"
-            width="w-full"
-            dropDownWidth="w-full"
-        />
+    </div>
+
+    <!-- Merge Accounts section (collapsible) -->
+    <div v-if="userLevel === 'Admin'" class="pt-6 border-t border-dropdownSelect">
+      <button
+          type="button"
+          class="w-full flex items-center justify-between text-left"
+          @click="toggleMergeOpen"
+      >
+        <div>
+          <BaseText text="Merge Accounts" size="lg" color="primary" />
+          <BaseText
+              class="mt-1"
+              text="Merge other fencer accounts into this one. This will move all references and delete the duplicate accounts."
+              size="sm"
+              color="quaternary"
+          />
+        </div>
+
+        <!-- Optional caret (swap for your icon system if preferred) -->
+        <span
+            class="ml-4 text-quaternary transition-transform duration-200"
+            :class="mergeOpen ? 'rotate-180' : 'rotate-0'"
+            aria-hidden="true"
+        >
+          ▼
+        </span>
+      </button>
+
+      <div v-if="mergeOpen" class="mt-4">
+        <MergeAccounts :person="person" :people="people" @merge:merge="doMerge" />
       </div>
     </div>
   </section>
 </template>
 
 <script>
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import Administration from "./Administration.vue";
+import MergeAccounts from "./MergeAccounts.vue";
 
 export default {
-  name: 'FencerAdmin',
-  emits: ['update:person'],
-  components: { TitledInput, BaseText, DropDownMenu },
+  name: "FencerAdmin",
+  emits: ["update:person", "merge:merge"],
+  components: { BaseText, Administration, MergeAccounts },
   props: {
-    person: {
-      type: Object,
-      required: true
-    },
-    userLevel: {
-      type: String,
-      required: true
-    }
+    person: { type: Object, required: true },
+    people: { type: Array, required: true },
+    userLevel: { type: String, required: true },
   },
-  computed: {
-    personId() {
-      return this.person?.PersonId ?? '';
-    },
-    hemaRatingId() {
-      return this.person?.HEMARatings?.[0]?.HemaRatingId ?? '';
-    },
-    accessLevels() {
-      if (this.userLevel === 'Admin') {
-        return [
-          { text: 'User', link: 'User' },
-          { text: 'Director', link: 'Director' },
-          { text: 'Club', link: 'Club' },
-          { text: 'Admin', link: 'Admin' },
-        ];
-      }
-      return [
-        { text: 'User', link: 'User' },
-        { text: 'Director', link: 'Director' },
-        { text: 'Club', link: 'Club' }
-      ];
-    },
-    getSelectedAccessLevel() {
-      return { text: this.person.AccessLevel, link: this.person.AccessLevel };
-    },
-    getAccessLevelLabel() {
-      return this.person.AccessLevel ? '' : 'Select Access Level';
-    }
+  data() {
+    return {
+      mergeOpen: false, // collapsed by default
+    };
   },
   methods: {
-    emitUpdate(field, value) {
-      this.$emit('update:person', { field, value });
+    toggleMergeOpen() {
+      this.mergeOpen = !this.mergeOpen;
+    },
+    doMerge(data) {
+      this.$emit("merge:merge", data);
     }
-  }
+  },
 };
 </script>
-`