@dcrackel/hematournamentui 1.0.698 → 1.0.701

package/src/stories/Templates/ClubManagement/ClubManagement.vue

@@ -36,35 +36,28 @@
 </template>
 
 <script>
-import BaseText from "../../../stories/Atoms/Text/BaseText.vue";
-import ImageCropper from "../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
-import TitledInput from "../../../stories/Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import DropDownMenu from "../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-import BaseButton from "../../../stories/Molecules/Buttons/BaseButton/BaseButton.vue";
-import FindLocation from "../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
-import TextBoxEditor from "../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue";
-import ClubManagementSkeleton from "../../Organisms/Skeletons/ClubManagement/ClubMangementSkeleton.vue";
-import ClubBasic from "../../Templates/ClubManagement/ClubBasic/ClubBasic.vue";
-import { validateField } from "../../Util/Validations/ClubManagementValidations.js";
+import BaseText from "../../../stories/Atoms/Text/BaseText.vue";
+import ImageCropper from "../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
+import BaseButton from "../../../stories/Molecules/Buttons/BaseButton/BaseButton.vue";
+import ClubManagementSkeleton from "../../Organisms/Skeletons/ClubManagement/ClubMangementSkeleton.vue";
+import ClubBasic from "../../Templates/ClubManagement/ClubBasic/ClubBasic.vue";
+import { validateField } from "../../Util/Validations/ClubManagementValidations.js";
 
-export default {
-  name: 'ClubManagement',
-  emits: ['submit:club', 'add:newAddress', 'delete:club', 'update:selectedClub'],
-  components: {
-    ClubBasic,
-    ClubManagementSkeleton,
-    BaseText,
-    ImageCropper,
-    TitledInput,
-    DropDownMenu,
-    BaseButton,
-    FindLocation,
-    TextBoxEditor
-  },
-  props: {
-    clubProfile: {
-      type: Object
-    },
+export default {
+  name: 'ClubManagement',
+  emits: ['submit:club', 'add:newAddress', 'delete:club', 'update:image'],
+  components: {
+    ClubBasic,
+    ClubManagementSkeleton,
+    BaseText,
+    ImageCropper,
+    BaseButton
+  },
+  props: {
+    clubProfile: {
+      type: Object,
+      default: () => ({})
+    },
     locations: {
       type: Array,
       default: () => []
@@ -94,9 +87,9 @@ export default {
       default: 'Save'
     }
   },
-  data() {
-    return {
-      club: {...this.clubProfile},
+  data() {
+    return {
+      club: this.cloneClub(this.clubProfile),
       validation: {
         Name: { invalid: false, message: "" },
         ShortName: { invalid: false, message: "" },
@@ -106,67 +99,82 @@ export default {
     };
   },
   watch: {
-    clubProfile: {
-      immediate: true,
-      handler(newProfile) {
-        this.club = {...newProfile};
-      },
-    },
+    clubProfile: {
+      immediate: true,
+      handler(newProfile) {
+        this.club = this.cloneClub(newProfile);
+      },
+    },
   },
   computed: {
-    getHeaderText() {
-      return this.club.Name ? this.club.Name : 'Club Profile';
-    },
-    getImageURL() {
-      return Array.isArray(this.club.Images) && this.club.Images.length > 0
+    getHeaderText() {
+      return this.club?.Name ? this.club.Name : 'Club Profile';
+    },
+    getImageURL() {
+      return Array.isArray(this.club.Images) && this.club.Images.length > 0
           ? this.club.Images[0].URL
           : "";
     },
     getClass() {
       return 'border-2 border-dashed rounded-full w-32 h-32';
     }
-  },
-  methods: {
-    handleProfilePicUpdate(url) {
-      if (this.club.Images[0]) {
-        this.club.Images[0].URL = url;
-      }
-
-      if (!this.club.Images[0]) {
-        const image = {
-          "URL": url,
-          "AltText": "ClubImage",
+  },
+  methods: {
+    cloneClub(club) {
+      return {
+        ...(club || {}),
+        Address: club?.Address ? { ...club.Address } : undefined,
+        Images: Array.isArray(club?.Images) ? club.Images.map((image) => ({ ...image })) : []
+      };
+    },
+    handleProfilePicUpdate(url) {
+      const images = Array.isArray(this.club.Images)
+          ? this.club.Images.map((image) => ({ ...image }))
+          : [];
+
+      if (images[0]) {
+        images[0].URL = url;
+      }
+
+      if (!images[0]) {
+        const image = {
+          "URL": url,
+          "AltText": "ClubImage",
           "Type": "Club",
-          "EntityId": this.club.ClubId,
-          "EntityType": "Club"
-        }
-        this.club.Images.push(image)
-      }
-
-      this.$emit('update:image', url);
-    },
+          "EntityId": this.club.ClubId,
+          "EntityType": "Club"
+        }
+        images.push(image)
+      }
+
+      this.club = {
+        ...this.club,
+        Images: images
+      };
+      this.$emit('update:image', url);
+    },
     handleAddNewAddress(value) {
       this.$emit('add:newAddress', value);
     },
-    handleSubmit() {
-      this.pushedSave = true;
-      if (this.validateAllFields()) {
-        this.$emit('submit:club', this.club);
-      }
-    },
-    handleDelete() {
-      this.$emit('delete:club', this.club);
-    },
-    updateClub({ field, value }) {
-      this.club = { ...this.club, [field]: value };
-
-        if (field === 'Color1') {
-          this.club.Color1 = value.value;
-        }
-
-        if (field === 'Color2') {
-          this.club.Color2 = value.value;
-        }
+    handleSubmit() {
+      this.pushedSave = true;
+      if (this.validateAllFields()) {
+        this.$emit('submit:club', this.cloneClub(this.club));
+      }
+    },
+    handleDelete() {
+      this.$emit('delete:club', this.cloneClub(this.club));
+    },
+    updateClub({ field, value }) {
+      this.club = { ...this.club, [field]: value };
+
+        if (field === 'Color1') {
+          this.club.Color1 = value;
+        }
+
+        if (field === 'Color2') {
+          this.club.Color2 = value;
+        }
 
         if (field === 'add:newAddress' && value) {
           this.club = {
@@ -180,18 +188,22 @@ export default {
           };
         }
 
-      if (field === 'Location' && value) {
-        this.club = {
-          ...this.club,
-          AddressId: value?.AddressId || 0,
-          Address: { ...value }
-        };
-      }
-
-      if (this.validation[field] && this.pushedSave) {
-        this.validation[field] = validateField(field, value);
-      }
-    },
+      if (field === 'Location' && value) {
+        this.club = {
+          ...this.club,
+          AddressId: value?.AddressId || 0,
+          Address: { ...value }
+        };
+      }
+
+      if (this.validation[field] && this.pushedSave) {
+        this.validation[field] = validateField(field, value);
+      }
+
+      if (field === 'Location' && this.pushedSave) {
+        this.validation.Address = validateField('Address', this.club.Address);
+      }
+    },
     validateAllFields() {
       const fieldsToValidate = ["Name", "ShortName", "Address"];
 

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

@@ -40,8 +40,8 @@
                    :hostingClubColors="hostingClubColors"
                    :show="showDirectorModal"
                    ringName="RingName"
-                   @penalty:add="handleUpdatePenalty"
-                   @penalty:update="handleAddPenalty"
+                   @penalty:add="handleAddPenalty"
+                   @penalty:update="handleUpdatePenalty"
                    @penalty:remove="handleRemovePenalty"
                    @update:closeModal="handleCloseModal"
                    @update:bout="handleUpdateBout"
@@ -70,27 +70,21 @@
 import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
 import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
 import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BoutCard from "../../../Organisms/Cards/BoutCard/BoutCard.vue";
-import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
-import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
-import Tableau from "../../../Organisms/Containers/Tableau/Tableau.vue";
-import TableauColumn from "../../../Organisms/Containers/TableauColumn/TableauColumn.vue";
-import ServerConnected from "../../../Molecules/Indicators/ServerConnected/ServerConnected.vue";
-import emptyDesertIcon from "../../../../assets/empty_desert_icon.png";
+import DirectorModal from "../../../Molecules/Modals/DirectorModal/DirectorModal.vue";
+import EditBoutModal from "../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue";
+import Tableau from "../../../Organisms/Containers/Tableau/Tableau.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 {
   emits: ['penalty:add', 'penalty:remove', 'penalty:update', 'submit:bout', 'tab:menu-click', 'update:bout', 'update:directing-bout'],
-  components: {
-    AssignDirectorModal,
-    ServerConnected,
-    TableauColumn,
-    Tableau,
-    EditBoutModal,
-    DirectorModal,
-    BoutCard,
-    BaseText,
+  components: {
+    AssignDirectorModal,
+    Tableau,
+    EditBoutModal,
+    DirectorModal,
+    BaseText,
     ToggleHeader,
     EditEventsTopMenu
   },
@@ -98,10 +92,10 @@ export default {
     bouts: {
       type: Array,
       required: true
-    },
-    eventRules: {
-      type: Object,
-      required: true
+    },
+    eventRules: {
+      type: Array,
+      required: true
     },
     hostingClubColors: {
       type: Object,
@@ -138,7 +132,7 @@ export default {
       tabs,
       viewName: "Tableau",
       largeCards: true,
-      boutsData: [...this.bouts],
+      boutsData: this.cloneBouts(this.bouts),
       isListView: false,
       showAssignDirectorModal: false,
       assigningBout: null,
@@ -167,11 +161,11 @@ export default {
     bracketSize() {
       return this.boutsData && this.boutsData.length > 0 && this.boutsData[0].RoundLabel ? this.boutsData[0].RoundLabel : "";
     },
-    activeBouts() {
-      return this.boutsData.filter(bout => bout.Status === 'Active');
-    },
-    sortedBouts() {
-      return this.boutsData.sort((a, b) => {
+    activeBouts() {
+      return this.boutsData.filter(bout => String(bout.Status || '').toLowerCase() === 'active');
+    },
+    sortedBouts() {
+      return this.boutsData.slice().sort((a, b) => {
         if (a.DEBoutId < b.DEBoutId) {
           return -1;
         }
@@ -183,10 +177,10 @@ export default {
     }
   },
   watch: {
-    bouts: {
-      handler(newBouts) {
-        this.boutsData = [...newBouts];
-      },
+    bouts: {
+      handler(newBouts) {
+        this.boutsData = this.cloneBouts(newBouts);
+      },
       deep: true,
       immediate: true
     }
@@ -226,19 +220,20 @@ export default {
       this.showAssignDirectorModal = false;
       this.assigningBout = null;
     },
-    handleCloseModal(bout) {
-      this.showDirectorModal = false;
-      this.showEditBoutModal = false;
-
-      if (bout.Status !== 'Completed') {
-        const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
-        if (updatedBout) {
-          updatedBout.Status = 'Scheduled';
-          updatedBout.Score1 = 0;
-          updatedBout.Score2 = 0;
-        }
-        this.$emit('update:bout', updatedBout);
-      }
+    handleCloseModal(bout) {
+      this.showDirectorModal = false;
+      this.showEditBoutModal = false;
+
+      if (!bout?.BoutId) return;
+      if (bout.Status !== 'Completed') {
+        const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+        if (!updatedBout) return;
+
+        updatedBout.Status = 'Scheduled';
+        updatedBout.Score1 = 0;
+        updatedBout.Score2 = 0;
+        this.$emit('update:bout', updatedBout);
+      }
     },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
@@ -251,56 +246,47 @@ export default {
         return
       }
       this.isListView = false;
-    },
-    handleUpdateBout(bout) {
-      if (!this.activeBouts || this.activeBouts.length === 0) {
-        return;
-      }
-
-      let updatedBout = this.activeBouts.find(b => b.BoutId === bout.BoutId);
-
-      if (!updatedBout) {
-        updatedBout = {}
-      }
-
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Active';
-      this.$emit('update:bout', updatedBout);
-    },
-    handleSubmitBout(bout) {
-      this.showEditBoutModal = false;
-      this.showDirectorModal = false;
-
-      // Find the bout in activeBouts, or create a default copy if not found
-      let updatedBout = this.activeBouts.find(b => b.BoutId === bout.BoutId) || { ...bout, score1: bout.score1 ?? 0, score2: bout.score2 ?? 0 };
-
-      // Ensure values for score1 and score2 if they are missing
-      updatedBout.score1 = bout.score1 ?? updatedBout.score1;
-      updatedBout.score2 = bout.score2 ?? updatedBout.score2;
-
-      // Merge the new data and update status
-      Object.assign(updatedBout, bout);
-      updatedBout.Status = 'Completed';
-      updatedBout.Ended = new Date().toISOString();
+    },
+    handleUpdateBout(bout) {
+      if (!bout?.BoutId) return;
+
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
+      Object.assign(updatedBout, bout);
+      updatedBout.Status = 'Active';
+      this.$emit('update:bout', updatedBout);
+    },
+    handleSubmitBout(bout) {
+      this.showEditBoutModal = false;
+      this.showDirectorModal = false;
+      if (!bout?.BoutId) return;
+
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
+
+      Object.assign(updatedBout, bout);
+      updatedBout.Status = 'Completed';
+      updatedBout.Ended = new Date().toISOString();
 
       this.$emit('submit:bout', updatedBout);
-    },
-    directBout(bout) {
-      if (bout.Person1.PersonId === 0 || bout.Person2.PersonId === 0) {
-        return;
-      }
-
-      bout.Status = 'Active';
-      this.showDirectorModal = true;
-      this.selectedBout = bout;
-      this.$emit('update:directing-bout', bout)
-    },
-    editBout(bout) {
-      const updatedBout = this.bouts.find(b => b.BoutId === bout.BoutId);
-      if (updatedBout) {
-        this.showEditBoutModal = true;
-        this.selectedBout = bout;
-      }
+    },
+    directBout(bout) {
+      if (!this.canDirectBout(bout)) return;
+
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
+
+      updatedBout.Status = 'Active';
+      this.showDirectorModal = true;
+      this.selectedBout = updatedBout;
+      this.$emit('update:directing-bout', updatedBout)
+    },
+    editBout(bout) {
+      const updatedBout = this.boutsData.find(b => b.BoutId === bout.BoutId);
+      if (!updatedBout) return;
+
+      this.showEditBoutModal = true;
+      this.selectedBout = updatedBout;
     },
     handleCardSizeToggle(value){
       this.largeCards = value
@@ -315,9 +301,18 @@ export default {
 
       this.$emit('penalty:add', penalty);
     },
-    handleRemovePenalty(penalty) {
-      this.$emit('penalty:remove', penalty);
-    }
+    handleRemovePenalty(penalty) {
+      this.$emit('penalty:remove', penalty);
+    },
+    canDirectBout(bout) {
+      if (!bout?.BoutId) return false;
+      if (bout.Person1?.PersonId === 0) return false;
+      if (bout.Person2?.PersonId === 0) return false;
+      return true;
+    },
+    cloneBouts(bouts) {
+      return Array.isArray(bouts) ? bouts.map(bout => ({ ...bout })) : [];
+    }
   }
 }
-</script>
+</script>

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

@@ -8,42 +8,46 @@ export default {
     component: editConfig,
     tags: ['autodocs'],
     args: {
-        event: singleEventMock,
-        weapons: getAllWeapons,
-        rules: eventRules,
-        role: 'admin'
-    },
-    argTypes: {
-        event: { control: 'object' },
-        weapons: { control: 'object' },
-        rules: { control: 'object' },
-        role: { control: 'text' }
-    },
-
-};
-
-export const Default = {
-    event: singleEventMock,
-    weapons: getAllWeapons,
-    rules: eventRules,
-    role: 'admin'
-};
-
-export const NewEvent = {
-    event: {
-            Absent: 0,
-            Date: new Date().toISOString().split('T')[0],
-            EventName: '',
+        event: singleEventMock,
+        weapons: getAllWeapons,
+        rules: eventRules,
+        userLevel: 'admin'
+    },
+    argTypes: {
+        event: { control: 'object' },
+        weapons: { control: 'object' },
+        rules: { control: 'object' },
+        userLevel: { control: 'text' }
+    },
+
+};
+
+export const Default = {
+    args: {
+        event: singleEventMock,
+        weapons: getAllWeapons,
+        rules: eventRules,
+        userLevel: 'admin'
+    }
+};
+
+export const NewEvent = {
+    args: {
+        event: {
+            Absent: 0,
+            Date: new Date().toISOString().split('T')[0],
+            EventName: '',
             Flights: 1,
             NumberOfPools: 2,
             NumberOfRings: 2,
             PoolSize: 0,
             Present: 0,
             StartTime: '12:00:00',
-            Status: 'planning',
-            TournamentId: 10,
-    },
-    weapons: getAllWeapons,
-    rules: [],
-    role: 'admin'
-}
+            Status: 'planning',
+            TournamentId: 10,
+        },
+        weapons: getAllWeapons,
+        rules: [],
+        userLevel: 'admin'
+    }
+}

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

@@ -15,17 +15,15 @@
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
-import EditEventWizard from "../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue";
-import { tabs } from '../../../Util/tabs.js';
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import EditEventWizard from "../../../Organisms/Wizards/EditEventWizard/EditEventWizard.vue";
+import { tabs } from '../../../Util/tabs.js';
 
 export default {
   emits: ['tab:menu-click', 'update:submit'],
-  components: {
-    EditEventWizard,
-    ToggleHeader,
-    EditEventsTopMenu
+  components: {
+    EditEventWizard,
+    EditEventsTopMenu
   },
   props: {
     event: {
@@ -46,12 +44,11 @@ export default {
     }
   },
   data() {
-    return {
-      tabs,
-      windowWidth: window.innerWidth,
-      viewName: "Edit"
-    };
-  },
+    return {
+      tabs,
+      windowWidth: window.innerWidth
+    };
+  },
   mounted() {
     window.addEventListener('resize', this.handleResize);
   },