@dcrackel/hematournamentui 1.0.51 → 1.0.53

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.51",
+  "version": "1.0.53",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",
@@ -12,7 +12,7 @@
     "preview": "vite preview",
     "build-storybook": "npm run build:tailwind && storybook build",
     "build:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./tailwind/output.css",
-    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
+    "storybook": "npm  \"npm run watch:tailwind\" \"npm run watch:storybook\"",
     "watch:storybook": "storybook dev -p 6006",
     "watch:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
     "test": "vitest",

package/src/mocks/tournamentMock.js

@@ -44,7 +44,7 @@ const mockTournaments = [
     "Name": "Test Tournament",
     "StartDate": "2023-12-30",
     "EndDate": "2023-12-31",
-    "Description": "<p>asdfasdfa</p>",
+    "Description": "<p>asdfasdfa ajhasd;likjfh;jkh asdlkjha;fdslkh ;asd;lkjfha;lksdhf ;alksh;lkjha;sdolfkjh;'asdklj f'as'lkj as'ldkj' asdkjlasd'fklja'dkljf sad'</p>",
     "ClubId": 1,
     "AddressId": 2,
     "Club.Name": "Test Club",

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -62,7 +62,7 @@ export default {
       admin: 'px-2.5 py-2 items-center rounded-md gap-2.5 text-center my-1 text-neutral hover:bg-primaryHighlight ' +
           (props.selected ? 'bg-primary' : 'bg-primary'),
 
-      adminSecondary: 'px-2.5 py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral ' +
+      adminSecondary: 'px-2.5 py-2 rounded-xl items-center gap-2.5 text-center my-1 pb-2 border-b border-secondary hover:bg-bright w-11/12 text-neutral ' +
           (props.selected ? 'bg-primary' : 'bg-primary'),
 
       iconOnly: 'px-0.5 items-center rounded-full text-center text-tertiary shadow border border-dropdownSelect justify-center bg-primaryHighlight',

package/src/stories/Molecules/Cards/Detail/TournamentCardDetail.vue

@@ -3,7 +3,12 @@
     <BaseText :text="detail.Name" color="primary" size="xl" weight="semi-bold" />
     <BaseText :text="detail.Address && detail.Address[0].Name" color="primary" size="sm" weight="normal" />
     <div class="mt-4 flex flex-col">
-      <div class="mt-4 flex flex-col" v-html="detail.Description"></div>
+      <div class="mt-4 flex flex-col min-h-20" >
+        <span v-html="formattedDescription"></span>
+        <span v-if="isTruncated" @click="toggleDescription" class="text-blue-500 cursor-pointer text-right mr-2">
+        {{ showMoreDescription ? ' << less ' : 'more >>' }}
+      </span>
+      </div>
     </div>
     <div class="mt-4 flex flex-col">
       <BaseText :text="`${detail.StartDate}`" color="primaryHighlight" size="sm" weight="light" />
@@ -49,9 +54,28 @@ export default {
       })
     }
   },
+  data() {
+    return {
+      showMoreDescription: false,
+    };
+  },
+  computed: {
+    formattedDescription() {
+      if (!this.showMoreDescription && this.detail.Description.length > 64) {
+        return this.detail.Description.substring(0, 64) + '...';
+      }
+      return this.detail.Description;
+    },
+    isTruncated() {
+      return this.detail.Description.length > 64;
+    }
+  },
   methods: {
     onClick() {
       this.$emit('edit', this.detail);
+    },
+    toggleDescription() {
+      this.showMoreDescription = !this.showMoreDescription;
     }
   }
 };

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="rounded-xl w-72 shadow">
+  <div class="rounded-xl w-72 shadow border border-dropdownSelect hover:border-bright" @click="listEvents">
     <TournamentHeader :artwork="detail.images && detail.images.length > 0 ? detail.images[0].URL : ''" :tags="detail.tags" />
-    <TournamentDetail :detail="detail" @click="onClick" />
+    <TournamentDetail :detail="detail" @click="onClick"/>
   </div>
 </template>
 
@@ -45,6 +45,9 @@ export default {
   methods: {
     onClick() {
       this.$emit('edit', this.detail.TournamentId);
+    },
+    listEvents() {
+      this.$emit('listEvents', this.detail.TournamentId);
     }
   }
 };

package/src/stories/Organisms/Grids/GridContainer.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full">
       <div v-for="item in filteredItems" :key="item.id" class="w-full">
-        <component :is="component" :detail="item" @click="onClick(item)" />
+        <component :is="component" :detail="item" @click="handleClick(item)" @listEvents="handleListEvents(item)" />
       </div>
     </div>
   </div>
@@ -103,8 +103,11 @@ export default {
     handleTimeFrameChange(timeFrame) {
       this.selectedTimeFrame = timeFrame;
     },
-    onClick(item){
+    handleClick(item){
       this.$emit('edit', item.TournamentId);
+    },
+    handleListEvents(item){
+      this.$emit('listEvents', item.TournamentId);
     }
   }
 };

package/src/stories/Templates/Menus/Admin/AdminLeftMenu.vue

@@ -2,8 +2,8 @@
   <div class="bg-secondary w-64 h-screen flex flex-col justify-between">
     <section class="h-28 border-b border-neutral">
       <div class="flex flex-col justify-center h-28">
-        <div class="ml-8">
-          <img class="w-32" src="https://ferrotas.com/assets/ferrotas-white-small-720502db.png"  alt="logo"/>
+        <div class="flex justify-center">
+          <img alt="Logo" class="w-24" :src="logoImage" />
         </div>
       </div>
     </section>
@@ -38,6 +38,7 @@
 
 <script>
 import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import logoImage from '../../../../assets/M2b.png';
 
 export default {
   name: 'AdminLeftMenu',
@@ -48,6 +49,11 @@ export default {
       default: () => []
     }
   },
+  data() {
+    return {
+      logoImage,
+    };
+  },
   methods: {
     handleButtonClick(button) {
       this.$emit('button-click', button);

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

@@ -4,7 +4,7 @@
     <section class="w-full">
       <div class="w-full flex flex-col justify-center items-center mb-6" style="text-align: center">
         <div v-if="events.length === 0">
-          <img alt="Small desert scene with wind blowing." class="w-96 " src="/src/assets/empty_desert_icon.png">
+          <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon" />
           <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'0 events added yet.'"
                     :weight="'normal'" data-testid="text-num-events"/>
           <BaseText :color="'primaryHighlight'" :size="'lf'" :text="'Click below to add first event.'"
@@ -30,6 +30,7 @@ import EditTournamentMenu from "../../../Menus/EditTournamentMenu/EditTournament
 import BaseText from "../../../../Atoms/Text/BaseText.vue";
 import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
 import EventCard from "../../../../Organisms/Cards/EventCard/EventCard.vue";
+import emptyDesertIcon from '../../../../../assets/empty_desert_icon.png';
 
 export default {
   components: {
@@ -42,6 +43,11 @@ export default {
     tournamentId: Number,
     events: Array,
   },
+  data() {
+    return {
+      emptyDesertIcon,
+    };
+  },
   methods: {
     handleAddEvent() {
      this.$emit('addEvent', this.tournamentId);

package/tailwind.config.js

@@ -38,8 +38,10 @@ export default {
         eventBoxBlue: '#eff4f7',
         eventBoxGreen: '#f2f7ef',
         eventBoxRed: '#f7efef',
-
-      }
+      },
+      boxShadow: {
+        custom: 'var(--tw-shadow)',
+      },
     },
   },
   plugins: [