@dcrackel/hematournamentui 1.0.255 → 1.0.256

package/package.json

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

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

@@ -13,8 +13,8 @@
       </section>
       <div class="flex flex-col pl-4">
         <div class="flex flex-row pb-2">
-          <BaseButton label="Edit" size="sm" type="primary" @click="onEdit" class="w-1/2" />
-          <BaseButton label="Manage" size="sm" type="primary" @click="onManage" class="w-1/2" />
+          <BaseButton label="Manage" size="sm" type="primary" @click="onManage" :class="event.Status !== 'completed' ? 'w-1/2' : 'w-full'" />
+          <BaseButton v-if="event.Status !== 'completed'"  label="Delete" size="sm" type="primary" @click="onDelete" class="w-1/2" />
         </div>
         <div class="flex flex-row">
           <EventStatusBox :status-count="event.Present" status-label="PRESENT" box-color="bg-eventBoxBlue" />
@@ -23,31 +23,60 @@
       </div>
     </div>
   </div>
+  <section>
+    <BaseModal
+        headerText="Remove This Event?"
+        bodyText="Pressing Delete will permanently remove this event. This action cannot be undone."
+        buttonText="Delete This Event"
+        iconColor="alarm"
+        iconBackgroundColor="alarmHighlight"
+        iconName="fa-circle-xmark"
+        :show="showModal"
+        @update:show="close"
+        @submitModal="handleSubmit"
+    />
+   </section>
 </template>
 
 <script>
 import BaseText from "../../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import EventStatusBox from "../../../Molecules/Boxes/EventStatusBox/EventStatusBox.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
 
 export default {
   name: 'EventCard',
-  components: { EventStatusBox, BaseButton, BaseText },
+  components: {BaseModal, BaseIcon, EventStatusBox, BaseButton, BaseText },
+  emits: ['manage', 'edit', 'delete'],
   props: {
     event: {
       type: Object,
       required: true
     }
   },
+  data() {
+    return {
+      showModal: false
+    }
+  },
   methods: {
-    onEdit(event) {
+    onDelete(event) {
       event.stopPropagation();
-      this.$emit('edit', this.event);
+      this.showModal= true
+      //this.$emit('delete', this.event);
     },
     onManage(event) {
       event.stopPropagation();
       this.$emit('manage', this.event);
+    },
+    close(){
+      this.showModal = false
+    },
+    handleSubmit(){
+      this.$emit('delete', this.event);
     }
+
   }
 }
 </script>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -6,7 +6,7 @@
       <i class="fa-solid fa-chevron-down text-xs text-quinary" />
     </div>
     <transition name="fade-in-down">
-      <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-9 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect" :class="dropDownWidth">
+      <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-9 z-20 rounded-b-xl absolute bg-neutral border border-dropdownSelect overflow-y-auto max-h-44" :class="dropDownWidth">
         <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
           <BaseText :text="item.text" color="quinary" size="sm" weight="normal" class="py-0.5" />
         </a>

package/src/stories/Organisms/Wizards/EditEventWizard/BasicEventInfo/BasicEventInfo.vue

@@ -28,15 +28,15 @@
                 :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
       <DatePicker :invalid="validation.StartTime" :setDate="localEvent.StartTime" pickerMode="time" @update:selectedDate="handleTimeUpdate"/>
     </div>
-    <div class="mb-4 grow">
-      <TitledInput :inputValue="localEvent.NumberOfRings" :invalid="validation.NumberOfRings" placeholder="Enter Number of Rings"
-                   title="Number of Rings" @update:value="handleNumberOfRingsChange" />
-    </div>
     <div class="mb-4 grow">
       <BaseText :color="'quinary'" :invalid="validation.WeaponId" :size="'sm'" :text="'Weapon Form'"
                 :weight="'normal'" class="mb-1" data-testid="text-start-date"/>
       <DropDownMenu :label="selectedWeapon" :items="getWeapons" :selected-item="selectedWeapon" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleWeaponChange" />
     </div>
+    <div class="mb-4 grow">
+      <TitledInput :inputValue="localEvent.NumberOfRings" :invalid="validation.NumberOfRings" placeholder="Enter Number of Rings"
+                   title="Number of Rings" @update:value="handleNumberOfRingsChange" />
+    </div>
 
     <div class="flex flex-row justify-center h-12">
       <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleBack" />

package/src/stories/Templates/TournamentManagement/ListEvents/ListEvents.vue

@@ -13,7 +13,11 @@
         </div>
 
         <section v-for="event in events" class="w-full">
-          <EventCard :event="event" @edit="handleEdit(event.EventId)" @manage="handleManageEvent(event.EventId)" />
+          <EventCard :event="event"
+                     @edit="handleEdit(event.EventId)"
+                     @manage="handleManageEvent(event.EventId)"
+                     @delete="handleDeleteEvent"
+          />
         </section>
       </div>
       <div class="flex justify-center w-full">
@@ -23,6 +27,7 @@
         </div>
       </div>
     </section>
+
   </div>
   </section>
 </template>
@@ -45,7 +50,7 @@ export default {
     tournamentId: Number,
     events: Array,
   },
-  emits: ['tab:menu-click', 'manageEvent', 'editEvent', 'addEvent'],
+  emits: ['tab:menu-click', 'manageEvent', 'editEvent', 'addEvent', 'delete:Event'],
   data() {
     return {
       emptyDesertIcon,
@@ -69,6 +74,9 @@ export default {
     },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
+    },
+    handleDeleteEvent(event) {
+      this.$emit('delete:Event', event);
     }
   }
 }