@dcrackel/hematournamentui 1.0.688 → 1.0.690

package/dist/hematournamentui.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  *
  * Date: 2024-04-21T07:43:02.731Z
- */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:calc(100% / 3);left:0;top:calc(100% / 3);width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:calc(100% / 3);top:0;width:calc(100% / 3)}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:before,.cropper-center:after{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media(min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media(min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media(min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}[data-v-a1dce3ee] .ProseMirror>*+*{margin-top:.75em}[data-v-a1dce3ee] .ProseMirror ol{padding:0 1rem;list-style:decimal!important}[data-v-a1dce3ee] .ProseMirror ul{padding:0 1rem;list-style:disc!important}[data-v-c53fc36c]::-webkit-scrollbar{width:15px;height:15px}[data-v-c53fc36c]::-webkit-scrollbar-track{background:#f6fafd}[data-v-c53fc36c]::-webkit-scrollbar-thumb{background:#d5e4ee;border-radius:5px}[data-v-c53fc36c]::-webkit-scrollbar-thumb:hover{background:#c3cce0}.fade-in-down-enter-active[data-v-507c44cb]{animation:fadeInDown-507c44cb .3s ease-out}.fade-in-down-leave-active[data-v-507c44cb]{animation:fadeOutUp-507c44cb .3s ease-in;max-height:100px;overflow:hidden}.fade-in-down-leave-to[data-v-507c44cb]{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden}@keyframes fadeInDown-507c44cb{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutUp-507c44cb{0%{opacity:1;transform:translateY(0);max-height:100px}to{opacity:0;transform:translateY(-10px);max-height:0}}
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:calc(100% / 3);left:0;top:calc(100% / 3);width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:calc(100% / 3);top:0;width:calc(100% / 3)}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:before,.cropper-center:after{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media(min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media(min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media(min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}[data-v-a1dce3ee] .ProseMirror>*+*{margin-top:.75em}[data-v-a1dce3ee] .ProseMirror ol{padding:0 1rem;list-style:decimal!important}[data-v-a1dce3ee] .ProseMirror ul{padding:0 1rem;list-style:disc!important}.fade-in-down-enter-active[data-v-507c44cb]{animation:fadeInDown-507c44cb .3s ease-out}.fade-in-down-leave-active[data-v-507c44cb]{animation:fadeOutUp-507c44cb .3s ease-in;max-height:100px;overflow:hidden}.fade-in-down-leave-to[data-v-507c44cb]{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden}@keyframes fadeInDown-507c44cb{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutUp-507c44cb{0%{opacity:1;transform:translateY(0);max-height:100px}to{opacity:0;transform:translateY(-10px);max-height:0}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.688",
+  "version": "1.0.690",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

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

@@ -108,7 +108,7 @@ export default {
       if (!fromDragId || !toDragId || String(fromDragId) === String(toDragId)) return;
       this.$emit('reorder:swap', { fromBoutId: fromDragId, toBoutId: toDragId });
     },
-    onAssign(ids) { this.$emit('action:assignDirector', ids); },
+    onAssign(ids) { this.$emit('action:assignBout', ids); },
   },
 };
 </script>

package/src/stories/Organisms/Containers/Tableau/Tableau.vue

@@ -1,44 +1,90 @@
 <template>
   <section v-if="listView" class="flex flex-col items-center">
-    <div v-for="(bouts, roundName) in filteredBouts" :key="bouts[0].BoutId" class="w-full flex-col md:w-3/4 my-4">
-      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="roundName" weight="bold"/>
-      <div v-for="bout in bouts" :key="bout.BoutId" class="mb-4 ">
-        <section @click="handleBoutClick(bout)">
-          <BoutCard :bout="bout"
-                    :hostingClubColors="hostingClubColors"
-                    :editMode="false"
-                    :reorderMode="false"
+
+    <!-- Assigned Bouts -->
+    <div v-if="hasAssignedBouts" class="w-full flex-col md:w-3/4 my-4">
+      <div class="flex flex-row justify-between">
+        <BaseText class="my-5" color="primaryHighlight" size="sm" text="Assigned Bouts" weight="bold"/>
+        <div class="flex mr-1">
+          <BaseText class="my-5 ml-5" color="primaryHighlight" size="sm" text="Assigned:"/>
+          <BaseText
+              :text="assignedBoutsToMe.length"
+              class="my-5 ml-2"
+              color="primaryHighlight"
+              size="sm"
+              weight="bold"
           />
-        </section>
+        </div>
+      </div>
+      <div class="border-b border-dropdownSelect mb-5"></div>
+
+      <div v-for="bout in assignedBoutsToMe" :key="bout.BoutId" class="mb-4">
+        <BoutCard
+            :bout="bout"
+            :hostingClubColors="hostingClubColors"
+            :editMode="false"
+            :reorderMode="false"
+            :isAdmin="isAdmin"
+            @action:startBout="handleDirectingFromIds"
+            @action:resumeBout="handleDirectingFromIds"
+            @action:editBout="handleEditFromIds"
+            @action:assignBout="handleAssignBout"
+        />
+      </div>
+    </div>
+
+    <!-- Existing rounds -->
+    <div
+        v-for="(bouts, roundName) in filteredBouts"
+        :key="bouts[0].BoutId"
+        class="w-full flex-col md:w-3/4 my-4"
+    >
+      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="roundName" weight="bold"/>
+
+      <div v-for="bout in bouts" :key="bout.BoutId" class="mb-4">
+        <BoutCard
+            :bout="bout"
+            :hostingClubColors="hostingClubColors"
+            :editMode="false"
+            :reorderMode="false"
+            :isAdmin="isAdmin"
+            @action:startBout="handleDirectingFromIds"
+            @action:resumeBout="handleDirectingFromIds"
+            @action:editBout="handleEditFromIds"
+            @action:assignBout="handleAssignBout"
+        />
       </div>
     </div>
   </section>
 
-  <section v-if="!listView" class="flex w-full overflow-x-auto mt-4 scrollbar-thin">
+  <section v-else class="flex w-full overflow-x-auto mt-4 scrollbar-thin">
     <div class="min-w-full flex">
       <div v-for="(bouts, roundName) in groupedBouts.winnerBouts" :key="roundName">
-        <TableauColumn :bouts="bouts"
-                       :hostingClubColors="hostingClubColors"
-                       :roundName="roundName"
-                       :bracketSize="bracketSize"
-                       :largeCards="largeCards"
-                       :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                       @action:editBout="handleEditBout"
-                       @action:directingBout="handleDirectorBout"
+        <TableauColumn
+            :bouts="bouts"
+            :hostingClubColors="hostingClubColors"
+            :roundName="roundName"
+            :bracketSize="bracketSize"
+            :largeCards="largeCards"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            @action:editBout="handleEditBout"
+            @action:directingBout="handleDirectorBout"
         />
       </div>
     </div>
-    <!-- loser bracket-->
+
+    <!-- Loser bracket -->
     <div class="min-w-full flex">
       <div v-for="(bouts, roundName) in groupedBouts.loserBouts" :key="roundName">
-        <TableauColumn :bouts="bouts"
-                       :hostingClubColors="hostingClubColors"
-                       :roundName="roundName"
-                       :bracketSize="bracketSize"
-                       :largeCards="largeCards"
-                       :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                       @action:editBout="handleEditBout"
-                       @action:directingBout="handleDirectorBout"
+        <TableauColumn
+            :bouts="bouts"
+            :hostingClubColors="hostingClubColors"
+            :roundName="roundName"
+            :bracketSize="bracketSize"
+            :largeCards="largeCards"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            @action:editBout="handleEditBout"
+            @action:directingBout="handleDirectorBout"
         />
       </div>
     </div>
@@ -52,56 +98,68 @@ import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 
 export default {
-  name: 'Tableau',
-  components: {BaseText, BoutCard, TableauBoutCard, TableauColumn},
+  name: "Tableau",
+  components: { BaseText, BoutCard, TableauBoutCard, TableauColumn },
+  emits: ["action:editBout", "action:directingBout", "action:assignBout"],
   props: {
-    bouts: {
-      type: Array,
-      required: true
-    },
-    bracketSize: {
-      type: String,
-      required: true
-    },
-    hostingClubColors: {
-      type: Object,
-      required: true
+    bouts: { type: Array, required: true },
+    bracketSize: { type: String, required: true },
+    hostingClubColors: { type: Object, required: true },
+    largeCards: { type: Boolean, required: true },
+    listView: { type: Boolean, required: false },
+    isCountingBackwardsMaxScore: { type: Number, default: 0 },
+
+    // use role (already present upstream) instead of passing isAdmin
+    role: { type: String, default: "Admin" },
+
+    // needed for "Assigned Bouts" section
+    currentUserId: { type: [Number, String], default: null },
+  },
+  computed: {
+    isAdmin() {
+      return String(this.role || "").toLowerCase() === "admin";
     },
-    largeCards: {
-      type: Boolean,
-      required: true
+
+    assignedBoutsToMe() {
+      const me = Number(this.currentUserId);
+      if (!me) return [];
+      return (this.bouts || [])
+          .filter(
+              (b) =>
+                  Number(b.RefereeId) === me &&
+                  String(b.Status || "").toLowerCase() !== "completed"
+          )
+          .slice()
+          .sort((a, b) => Number(a.DEBoutId ?? 0) - Number(b.DEBoutId ?? 0));
     },
-    listView: {
-      type: Boolean,
-      required: false
+
+    hasAssignedBouts() {
+      return this.assignedBoutsToMe.length > 0;
     },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    }
-  },
-  emits: ['action:editBout', 'action:directingBout'],
-  computed: {
+
     groupedBouts() {
       const grouped = this.groupBoutsByRound(this.bouts);
 
-      // Separate bouts into winnerBouts and loserBouts based on RoundLabel
-      const {winnerBouts, loserBouts} = Object.entries(grouped).reduce(
+      const { winnerBouts, loserBouts } = Object.entries(grouped).reduce(
           (acc, [roundName, bouts]) => {
-            if (roundName.includes('Consolation')) {
+            if (roundName.includes("Consolation")) {
               acc.loserBouts[roundName] = bouts;
             } else {
               acc.winnerBouts[roundName] = bouts;
             }
             return acc;
           },
-          {winnerBouts: {}, loserBouts: {}}
+          { winnerBouts: {}, loserBouts: {} }
       );
 
-      return {winnerBouts, loserBouts};
+      return { winnerBouts, loserBouts };
     },
+
     combinedBouts() {
-      const combined = {...this.groupedBouts.winnerBouts, ...this.groupedBouts.loserBouts};
+      const combined = {
+        ...this.groupedBouts.winnerBouts,
+        ...this.groupedBouts.loserBouts,
+      };
       return Object.keys(combined)
           .sort()
           .reduce((acc, roundName) => {
@@ -109,21 +167,20 @@ export default {
             return acc;
           }, {});
     },
+
     filteredBouts() {
       return Object.keys(this.combinedBouts)
           .sort((a, b) => {
             const priority = {
               Final: 1,
               "Third Place Match": 2,
-              Semifinal: 3
+              Semifinal: 3,
             };
 
             const priorityA = priority[a] || 0;
             const priorityB = priority[b] || 0;
 
-            if (priorityA || priorityB) {
-              return priorityA - priorityB;
-            }
+            if (priorityA || priorityB) return priorityA - priorityB;
 
             const numA = parseInt(a.match(/\d+/)?.[0] || 0, 10);
             const numB = parseInt(b.match(/\d+/)?.[0] || 0, 10);
@@ -131,69 +188,72 @@ export default {
             return numB - numA;
           })
           .reduce((acc, roundName) => {
-            const filteredBouts = this.combinedBouts[roundName]
+            const filtered = this.combinedBouts[roundName]
                 .filter(
-                    bout =>
-                        bout.Person1?.DisplayName !== 'BYE' &&
-                        bout.Person2?.DisplayName !== 'BYE' &&
-                        bout.Status !== 'Completed'
+                    (bout) =>
+                        bout.Person1?.DisplayName !== "BYE" &&
+                        bout.Person2?.DisplayName !== "BYE" &&
+                        bout.Status !== "Completed"
                 )
                 .sort((a, b) => a.DEBoutId - b.DEBoutId);
 
-            if (filteredBouts.length) {
-              acc[roundName] = filteredBouts;
-            }
+            if (filtered.length) acc[roundName] = filtered;
             return acc;
           }, {});
     },
   },
+
   methods: {
-    handleBoutClick(bout) {
-      if (bout.Status === 'Completed') {
-        this.$emit('action:editBout', bout);
-      } else {
-        this.$emit('action:directingBout', bout);
-      }
+    // --- helpers ---
+    _findBoutByIds(idsOrBout) {
+      // BoutCard emits ids for start/resume/edit; assign emits ids too.
+      // normalize to actual bout object
+      if (!idsOrBout) return null;
+      if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout; // already a bout-ish object
+
+      const boutId = idsOrBout?.BoutId ?? idsOrBout?.boutId;
+      if (!boutId) return null;
+      return (this.bouts || []).find((b) => String(b.BoutId) === String(boutId)) || null;
     },
+
+    // Assign button from BoutCard (inactive scheduled variant)
+    handleAssignBout(ids) {
+      const bout = this._findBoutByIds(ids);
+      if (!bout) return;
+      this.$emit("action:assignBout", bout);
+    },
+
+    // Start/Resume from BoutCard
+    handleDirectingFromIds(ids) {
+      const bout = this._findBoutByIds(ids);
+      if (!bout) return;
+      this.$emit("action:directingBout", bout);
+    },
+
+    // Edit from BoutCard
+    handleEditFromIds(ids) {
+      const bout = this._findBoutByIds(ids);
+      if (!bout) return;
+      this.$emit("action:editBout", bout);
+    },
+
+    // TableauColumn / non-list view already emits bout objects
     handleEditBout(bout) {
-      this.$emit('action:editBout', bout)
+      this.$emit("action:editBout", bout);
     },
     handleDirectorBout(bout) {
-      this.$emit('action:directingBout', bout)
+      this.$emit("action:directingBout", bout);
     },
+
     groupBoutsByRound(bouts) {
-      return bouts.reduce((acc, bout) => {
-        if (!acc[bout.RoundLabel]) {
-          acc[bout.RoundLabel] = [];
-        }
-        acc[bout.RoundLabel].push(bout);
+      return (bouts || []).reduce((acc, bout) => {
+        const key = bout.RoundLabel || "Unknown Round";
+        if (!acc[key]) acc[key] = [];
+        acc[key].push(bout);
         return acc;
       }, {});
     },
-  }
+  },
 };
 </script>
 
-<style scoped>
-/* width */
-::-webkit-scrollbar {
-  width: 15px;
-  height: 15px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #f6fafd;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #d5e4ee;
-  border-radius: 5px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #c3cce0;
-}
-</style>

package/src/stories/Templates/EventManagement/Bracket/Bracket.stories.js

@@ -1,4 +1,5 @@
 import Bracket from './Bracket.vue';
+import getDirectors from '../../../../mocks/getDirectors.js';
 //import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 import getDEWithBouts6Fencers from '../../../../mocks/getDeBouts-6fencers.js';
 import getDEWithBouts12Fencers from '../../../../mocks/getDeBouts-12fencers.js';
@@ -17,7 +18,9 @@ export default {
         eventRules: getDEWithBouts.eventRules,
         hostingClubColors: getDEWithBouts.hostingClubColors,
         connectedToServer: true,
-        role: 'admin'
+        role: 'admin',
+        directors: getDirectors,
+        currentUserId: 79, // optional but useful if you're showing "Assigned Bouts"
     },
     argTypes: {
         bouts: {
@@ -34,7 +37,9 @@ export default {
         },
         role: {
             control: String
-        }
+        },
+        directors: { control: 'object' },
+        currentUserId: { control: 'number' },
     },
 };
 
@@ -45,7 +50,9 @@ export const Default = {
         hostingClubColors: getDEWithBouts12Fencers.hostingClubColors,
         connectedToServer: true,
         status: 'de',
-        role: 'Admin'
+        role: 'Admin',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -55,7 +62,9 @@ export const TableOfEight = {
         eventRules: getDEWithBouts6Fencers.eventRules,
         hostingClubColors: getDEWithBouts6Fencers.hostingClubColors,
         connectedToServer: true,
-        status: 'de'
+        status: 'de',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -65,7 +74,9 @@ export const TableWithTwentyTwo = {
         eventRules: getDEWithBouts22Fencers.eventRules,
         hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
         connectedToServer: true,
-        status: 'de'
+        status: 'de',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -75,7 +86,9 @@ export const tableOfThirtyTwo = {
         eventRules: getDEWithBouts.eventRules,
         hostingClubColors: getDEWithBouts.hostingClubColors,
         connectedToServer: true,
-        status: 'de'
+        status: 'de',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -85,7 +98,9 @@ export const tableOfFourtyTwo = {
         eventRules: getDEWithBout42Fencers.eventRules,
         hostingClubColors: getDEWithBout42Fencers.hostingClubColors,
         connectedToServer: true,
-        status: 'de'
+        status: 'de',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -95,7 +110,9 @@ export const tableOfSixtyFour = {
         eventRules: getDEWithBouts67Fencers.eventRules,
         hostingClubColors: getDEWithBouts67Fencers.hostingClubColors,
         connectedToServer: true,
-        status: 'de'
+        status: 'de',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -105,7 +122,9 @@ export const tableOfOneHundredTwentyEight = {
         eventRules: getDEWithBouts128Fencers.eventRules,
         hostingClubColors: getDEWithBouts128Fencers.hostingClubColors,
         connectedToServer: true,
-        status: 'de'
+        status: 'de',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };
 
@@ -115,6 +134,8 @@ export const noBoutsYet = {
         eventRules: getDEWithBouts22Fencers.eventRules,
         hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
         connectedToServer: true,
-        status: 'live'
+        status: 'live',
+        directors: getDirectors,
+        currentUserId: 79,
     }
 };

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

@@ -11,14 +11,20 @@
                   :connectedToServer="connectedToServer"
                   @update:selection="handleViewChange"
                   @update:cardSize="handleCardSizeToggle"/>
-    <Tableau :bouts="sortedBouts"
-             :hostingClubColors="hostingClubColors"
-             :bracketSize="bracketSize"
-             :largeCards="largeCards"
-             :listView="isListView"
-             :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-             @action:editBout="editBout"
-             @action:directingBout="directBout" />
+
+    <Tableau
+        :bouts="sortedBouts"
+        :hostingClubColors="hostingClubColors"
+        :bracketSize="bracketSize"
+        :largeCards="largeCards"
+        :listView="isListView"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        :role="role"
+        :currentUserId="currentUserId"
+        @action:editBout="editBout"
+        @action:directingBout="directBout"
+        @action:assignBout="openAssignDirector"
+    />
 
     <div v-if="bouts.length < 1" class="w-full flex justify-center items-center">
       <div class="text-center mb-10">
@@ -49,6 +55,14 @@
                    @update:closeModal="handleCloseModal"
                    @submit:bout="handleSubmitBout"/>
 
+    <AssignDirectorModal
+        :show="showAssignDirectorModal"
+        :bout="assigningBout || {}"
+        :directors="directors"
+        @update:closeModal="closeAssignDirectorModal"
+        @assign="handleAssignDirector"
+    />
+
   </section>
 </template>
 
@@ -64,9 +78,11 @@ import TableauColumn from "../../../Organisms/Containers/TableauColumn/TableauCo
 import ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
 import emptyDesertIcon from "../../../../assets/empty_desert_icon.png";
 import { tabs } from '../../../Util/tabs.js';
+import AssignDirectorModal from "../../../Molecules/Modals/AssignDirectorModal/AssignDirectorModal.vue";
 
 export default {
   components: {
+    AssignDirectorModal,
     ServerConnected,
     TableauColumn,
     Tableau,
@@ -101,9 +117,36 @@ export default {
     role: {
       type: String,
       default: 'Admin'
-    }
+    },
+    directors: {
+      type: Array,
+      default: () => []
+    },
+    currentUserId: {
+      type: [Number, String],
+      default: null
+    },
+
+  },
+  data() {
+    return {
+      emptyDesertIcon,
+      showDirectorModal: false,
+      showEditBoutModal: false,
+      selectedBout: {},
+      tabs,
+      viewName: "Tableau",
+      largeCards: true,
+      boutsData: [...this.bouts],
+      isListView: false,
+      showAssignDirectorModal: false,
+      assigningBout: null,
+    };
   },
   computed: {
+    isAdmin() {
+      return String(this.role || '').toLowerCase() === 'admin';
+    },
     isCountingBackwardsMaxScore() {
       // 1) see if PoolScoreDirection exists and is explicitly "false"
       const dirRule = this.eventRules.find(r => r.Rules?.RuleName === 'PoolScoreDirection');
@@ -138,19 +181,6 @@ export default {
       });
     }
   },
-  data() {
-    return {
-      emptyDesertIcon,
-      showDirectorModal: false,
-      showEditBoutModal: false,
-      selectedBout: {},
-      tabs,
-      viewName: "Tableau",
-      largeCards: true,
-      boutsData: [...this.bouts],
-      isListView: false
-    };
-  },
   watch: {
     bouts: {
       handler(newBouts) {
@@ -168,6 +198,33 @@ export default {
     window.removeEventListener('resize', this.updateViewBasedOnScreenSize);
   },
   methods: {
+    handleAssignDirector({ bout, director }) {
+      const boutId = bout?.BoutId;
+      if (!boutId) return;
+
+      const patched = {
+        ...bout,
+        RefereeId: director.PersonId,
+        RefName: director.DisplayName,
+      };
+
+      this.boutsData = this.boutsData.map(b =>
+          b.BoutId === boutId ? { ...b, ...patched } : b
+      );
+
+      // bubble up so the real app persists it
+      this.$emit('update:bout', patched);
+
+      this.closeAssignDirectorModal();
+    },
+    openAssignDirector(bout) {
+      this.assigningBout = bout;
+      this.showAssignDirectorModal = true;
+    },
+    closeAssignDirectorModal() {
+      this.showAssignDirectorModal = false;
+      this.assigningBout = null;
+    },
     handleCloseModal(bout) {
       this.showDirectorModal = false;
       this.showEditBoutModal = false;

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

@@ -34,8 +34,6 @@ export default {
         hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
         connectedToServer: true,
         editMode: true,
-
-        // IMPORTANT: these drive Admin + Assigned logic
         role: 'admin',
         currentUserId: 79,        // Tom Testerlou
         directors: getDirectors,