@dcrackel/hematournamentui 1.0.185 → 1.0.187

package/package.json

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

package/src/index.js

@@ -39,4 +39,5 @@ export { default as PoolLive } from './stories/Templates/EventManagement/PoolLiv
 export { default as PoolResults } from './stories/Templates/EventManagement/PoolResults/PoolResults.vue';
 export { default as Bracket } from './stories/Templates/EventManagement/Bracket/Bracket.vue';
 export { default as EventFinalResults } from './stories/Templates/EventManagement/EventFinalResults/EventFinalResults.vue';
-export { default as ScoreBoard } from './stories/Templates/ScoreBoard/ScoreBoard.vue';
+export { default as ScoreBoard } from './stories/Templates/ScoreBoard/ScoreBoard.vue';
+export { default as ClubDisplay } from './stories/Templates/EventManagement/ClubDisplay/ClubDisplay.vue';

package/src/stories/Organisms/Cards/DisplayCard/DisplayCard.stories.js

@@ -1,22 +1,21 @@
 import DisplayCard from './DisplayCard.vue';
 import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
 import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js";
+import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js";
 
 export default {
     title: 'Organisms/Cards/DisplayCard',
     component: DisplayCard,
     tags: ['autodocs'],
     args: {
-        displayType: "ScoreBoard",
-        displayName: "Ring 1",
+        displayObject: getCLubDisplayByClubId[0],
         assignedTo: { text: "Dave Smith", link: "1" },
         assignedToEvent: { text: "Cats and things", link: "1" },
         staffDropDown: getAllStaffByTournamentId,
         eventDropDown: getEventByTournamentId
     },
     argTypes: {
-        displayType: { control: { type: 'text' } },
-        displayName: { control: { type: 'text' } },
+        displayObject:  { control: { type: 'object' } },
         assignedTo: { control: { type: 'object' } },
         assignedToEvent: { control: { type: 'object' } },
         staffDropDown: { control: { type: 'array' } },
@@ -26,8 +25,7 @@ export default {
 
 export const Default = {
     args: {
-        displayType: "ScoreBoard",
-        displayName: "Ring 1",
+        displayObject: getCLubDisplayByClubId[1],
         assignedTo: { text: "Dave Smith", link: "1" },
         assignedToEvent: { text: "Cats and things", link: "1" },
         staffDropDown: getAllStaffByTournamentId,
@@ -37,8 +35,7 @@ export const Default = {
 
 export const WithInitialCount = {
     args: {
-        displayType: "FlightBoard",
-        displayName: "FlightBoard 1",
+        displayObject: getCLubDisplayByClubId[4],
         assignedTo: { text: "Jenny Jones", link: "2" },
         assignedToEvent: { text: "Cats and things", link: "1" },
         staffDropDown: getAllStaffByTournamentId,

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

@@ -1,21 +1,21 @@
 <template>
   <div class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-poolBox hover:border-bright">
     <div class="mr-4 pl-4 h-14 pt-3">
-      <base-icon v-if="displayType === 'ScoreBoard'" icon-name="fa-screencast" size="2xl" color="quaternary" />
-      <base-icon v-if="displayType === 'FlightBoard'" icon-name="fa-screen-users" size="2xl" color="quaternary" />
+      <base-icon v-if="displayObject.Type === 'ScoreBoard'" icon-name="fa-screencast" size="2xl" color="quaternary" />
+      <base-icon v-if="displayObject.Type === 'FlightBoard'" icon-name="fa-screen-users" size="2xl" color="quaternary" />
     </div>
     <div class="flex flex-col w-full justify-start">
       <div class="w-full flex justify-start">
-        <BaseText :text="displayName" size="lg" color="quaternary" class="w-40 mt-1"/>
+        <BaseText :text="displayObject.DisplayName" size="lg" color="quaternary" class="w-40 mt-1"/>
         <div class="flex justify-start w-full">
-          <DropDownMenu v-if="displayType === 'ScoreBoard'"  :label="'Assigned: '" :items="formattedStaff" :selectedItem="localSelectedStaff" :alignEnd="false" width="w-52" @update:selectedItem="handleAssignmentStaff" />
-          <DropDownMenu v-if="displayType === 'FlightBoard'" :label="'Event: '" :items="formattedEvents" :selectedItem="localSelectedEvent" :alignEnd="false" width="w-52" @update:selectedItem="handleAssignmentEvent" />
+          <DropDownMenu v-if="displayObject.Type === 'ScoreBoard'"  :label="'Assigned: '" :items="formattedStaff" :selectedItem="localSelectedStaff" :alignEnd="false" width="w-52" @update:selectedItem="handleAssignmentStaff" />
+          <DropDownMenu v-if="displayObject.Type === 'FlightBoard'" :label="'Event: '" :items="formattedEvents" :selectedItem="localSelectedEvent" :alignEnd="false" width="w-52" @update:selectedItem="handleAssignmentEvent" />
         </div>
       </div>
     </div>
 
     <div class="border-l h-14 border-dropdownSelect items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg px-2">
-      <BaseIcon iconName="fa-circle-xmark" size="2xl" color="quinary" class="pt-3" hover="alarm" @click="handlePopModal"/>
+      <BaseIcon iconName="fa-circle-xmark" size="2xl" color="quinary" class="pt-3" hover="alarm" @click="handleRemove"/>
     </div>
   </div>
 
@@ -31,14 +31,10 @@ export default {
   name: 'DisplayCard',
   components: { DropDownMenu, BaseText, BaseIcon },
   props: {
-    displayType: {
-      type: String,
+    displayObject: {
+      type: Object,
       required: true
     },
-    displayName: {
-      type: String,
-      required: false
-    },
     assignedTo: {
       type: Object,
       required: false,
@@ -81,16 +77,23 @@ export default {
     },
   },
   methods: {
-    handlePopModal() {
-      this.$emit('pop:modal');
+    handleRemove() {
+      this.$emit('update:remove', this.displayObject);
     },
     handleAssignmentStaff(item) {
-      this.localSelectedStaff = item;
-      this.$emit('update:selectedStaff', item);
+      const retObject = {
+        DisplayId: this.displayObject.DisplayId,
+        AssignedToId: item.link,
+      }
+
+      this.$emit('update:selectedStaff', retObject);
     },
     handleAssignmentEvent(item) {
-      this.localSelectedEvent = item;
-      this.$emit('update:selectedEvent', item);
+      const retObject = {
+        DisplayId: this.displayObject.DisplayId,
+        AssignedToId: item.link,
+      }
+      this.$emit('update:selectedEvent', retObject);
     }
   }
 };

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

@@ -1,7 +1,7 @@
 <template>
   <div class="mt-3">
     <div class="flex flex-col w-full relative">
-      <section v-if="!displays">
+      <section v-if="!localDisplays.length">
         <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon"/>
         <div class="w-full flex justify-center">
           <div class="w-96">
@@ -16,26 +16,30 @@
       <section v-if="scoreboards.length > 0" class="flex flex-col">
         <div>
           <BaseText text="Scoreboards" size="lg" color="primaryHighlight" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect  mb-4" />
+          <div class="border-b border-dropdownSelect mb-4" />
           <div v-for="scoreboard in scoreboards" :key="scoreboard.DisplayId" class="flex flex-col py-1">
-            <DisplayCard :assignedTo="transformAssignedTo(scoreboard)"
-                         :displayName="scoreboard.DisplayName"
-                         :displayType="scoreboard.Type"
+            <DisplayCard :displayObject="scoreboard"
+                         :assignedTo="transformAssignedTo(scoreboard)"
                          :eventDropDown="eventDropDown"
                          :staffDropDown="staffDropDown"
+                         @update:selectedStaff="handleAssignmentStaff"
+                         @update:selectedEvent="handleAssignmentEvent"
+                         @update:remove="handleRemove"
             />
           </div>
         </div>
 
         <div v-if="flightBoards.length > 0" class="mt-10">
           <BaseText text="Flight Boards" size="lg" color="primaryHighlight" weight="bold" class="w-full text-left"/>
-          <div class="border-b border-dropdownSelect  mb-4" />
+          <div class="border-b border-dropdownSelect mb-4" />
           <div v-for="flightBoard in flightBoards" :key="flightBoard.DisplayId" class="flex flex-col py-1">
-            <DisplayCard :assignedToEvent="transformAssignedTo(flightBoard)"
-                         :displayName="flightBoard.DisplayName"
-                         :displayType="flightBoard.Type"
+            <DisplayCard :displayObject="flightBoard"
+                         :assignedToEvent="transformAssignedTo(flightBoard)"
                          :eventDropDown="eventDropDown"
                          :staffDropDown="staffDropDown"
+                         @update:selectedStaff="handleAssignmentStaff"
+                         @update:selectedEvent="handleAssignmentEvent"
+                         @update:remove="handleRemove"
             />
           </div>
         </div>
@@ -49,7 +53,6 @@ import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 import DisplayCard from "../../Cards/DisplayCard/DisplayCard.vue";
 
-
 export default {
   components: {
     DisplayCard,
@@ -72,35 +75,43 @@ export default {
   },
   data() {
     return {
+      localDisplays: [],
       emptyDesertIcon
     }
   },
+  created() {
+    this.localDisplays = [...this.displays];
+  },
   computed: {
     scoreboards() {
-      return this.displays.filter(display => display.Type === 'ScoreBoard');
+      return this.localDisplays.filter(display => display.Type === 'ScoreBoard');
     },
     flightBoards() {
-      return this.displays.filter(display => display.Type === 'FlightBoard');
+      return this.localDisplays.filter(display => display.Type === 'FlightBoard');
     }
   },
   methods: {
-    transformAssignedTo(scoreboard) {
-      if (scoreboard.Person) {
-        return { text: scoreboard.Person.DisplayName, link: scoreboard.Person.DisplayName };
+    transformAssignedTo(display) {
+      if (display.Person) {
+        return { text: display.Person.DisplayName, link: display.Person.DisplayName };
       }
 
-      if (scoreboard.Event) {
-        console.log("EVENT")
-        console.log(scoreboard.Event.EventName)
-        return { text: scoreboard.Event.EventName, link: scoreboard.Event.EventName };
+      if (display.Event) {
+        return { text: display.Event.EventName, link: display.Event.EventName };
       }
 
       return { text: '', link: '' }
+    },
+    handleRemove(item) {
+      this.localDisplays = this.localDisplays.filter(display => display.DisplayId !== item.DisplayId);
+      this.$emit('update:remove', item);
+    },
+    handleAssignmentStaff(item) {
+      this.$emit('update:selectedStaff', item);
+    },
+    handleAssignmentEvent(item) {
+      this.$emit('update:selectedEvent', item);
     }
   }
 }
 </script>
-
-
-
-

package/src/stories/Organisms/Form/AddDisplay/AddDisplay.vue

@@ -20,7 +20,7 @@
     <!-- Display Type Dropdown/Toggle -->
     <div class="mb-4">
       <BaseText :color="'quinary'" :size="'sm'" :text="'Display Type'" :weight="'normal'" class="mb-1"/>
-      <DropDownMenu :label="selectedDisplayType" :items="displayTypes" :selected-item="selectedDisplayType" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleDisplayTypeChange" />
+      <DropDownMenu label="" :items="displayTypes" :selected-item="selectedDisplayType" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleDisplayTypeChange" />
     </div>
 
     <!-- Club Dropdown -->
@@ -29,7 +29,7 @@
       <DropDownMenu :label="selectedClub" :items="clubs" :selected-item="selectedClub" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleClubChange" />
     </div>
     <div class="mb-4" v-else>
-      <TitledInput :inputValue="selectedClub.text" :disabled="true" title="Club" />
+      <TitledInput :inputValue="selectedClub.text" :disabled="isAdmin" title="Club" />
     </div>
 
     <!-- Submit and Cancel Buttons -->
@@ -66,7 +66,11 @@ export default {
     isAdmin: {
       type: Boolean,
       required: true
-    }
+    },
+    iconBorderColor: {
+      type: String,
+      default: 'acceptedBorder'
+    },
   },
   data() {
     return {
@@ -78,7 +82,7 @@ export default {
         displayType: '',
         clubId: ''
       },
-      selectedDisplayType: { text: 'ScoreBoard', link: 'ScoreBoard' },
+      selectedDisplayType: { text: 'Select Type', link: 'ScoreBoard' },
       selectedClub: this.userClub || (this.clubs.length === 1 ? this.clubs[0] : { text: '', link: '' }),
       validation: {
         displayName: false,

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

@@ -3,11 +3,6 @@ import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js"
 import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
 import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
 
-// isAdmin: {
-// userClub: {
-// clubs: {
-
-
 export default {
     title: 'Templates/EventManagement/ClubDisplay',
     component: ClubDisplay,
@@ -17,7 +12,7 @@ export default {
         staffDropDown: getAllStaffByTournamentId,
         eventDropDown: getEventByTournamentId,
         isAdmin: false,
-        userClub: {text: 'Cats Club', link: '1'},
+        userClub: {text: 'Cats Club', link: '2'},
         clubs: []
     },
     argTypes: {

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

@@ -3,10 +3,19 @@
     <EditEventsTopMenu :currentTab="'Displays'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
     <ClubDisplayContainer :displays="displays" :eventDropDown="eventDropDown" :staffDropDown="staffDropDown" />
     <div class="w-full flex justify-end mt-4">
-      <BaseButton iconName="fa-circle-plus" label="Add Display" icon-class="fa-regular" size="xs" type="primary" @click="openModal" />
+      <BaseButton iconName="fa-circle-plus" label="Add Display" icon-class="fa-regular" size="xs" type="primary" @click="openModal"/>
     </div>
 
-    <AddDisplayModal :show="showModal" :isAdmin="isAdmin" :userClub="userClub" :clubs="clubs" @close:closeModal="closeModal" @submit:display="handleAddDisplay" />
+    <AddDisplayModal :show="showModal"
+                     :isAdmin="isAdmin"
+                     :userClub="userClub"
+                     :clubs="clubs"
+                     @close:closeModal="closeModal"
+                     @submit:display="handleAddDisplay"
+                     @update:remove="handleRemove"
+                     @update:selectedStaff="handleAssignmentStaff"
+                     @update:selectedEvent="handleAssignmentEvent"
+    />
   </section>
 </template>
 
@@ -16,10 +25,12 @@ import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.v
 import ClubDisplayContainer from "../../../Organisms/Containers/ClubDisplayContainer/ClubDisplayContainer.vue";
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import AddDisplayModal from "../../../Molecules/Modals/AddDisplayModal/AddDisplayModal.vue";
+import DisplayCard from "../../../Organisms/Cards/DisplayCard/DisplayCard.vue";
 
 
 export default {
   components: {
+    DisplayCard,
     AddDisplayModal,
     BaseButton,
     ClubDisplayContainer,
@@ -83,6 +94,15 @@ export default {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
+    handleRemove(item) {
+      this.$emit('update:remove',item);
+    },
+    handleAssignmentStaff(item) {
+      this.$emit('update:selectedStaff', item);
+    },
+    handleAssignmentEvent(item) {
+      this.$emit('update:selectedEvent', item);
+    }
   }
 }
 </script>