@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,122 +1,122 @@
 import GridContainer from './GridContainer.vue';
 import MockTournaments from '../../../mocks/tournamentMock.js';
 import MockAllPeople from '../../../mocks/personGetAllMock.js';
-import getAllClubs from '../../../mocks/getAllClubs.js'
+import getAllClubs from '../../../mocks/getAllClubs.js';
 
 export default {
-    title: 'Organisms/Grids/GridContainer',
-    component: GridContainer,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {
-        items: {
-            control: {
-                type: 'object'
-            }
-        },
-        component: {
-            control: {
-                type: 'text'
-            }
-        },
-        label: {
-            control: {
-                type: 'text'
-            }
-        },
-        dropdownItems: {
-            control: {
-                type: 'object'
-            }
-        },
-        selectedItem: {
-            control: {
-                type: 'object'
-            }
-        }
+  title: 'Organisms/Grids/GridContainer',
+  component: GridContainer,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    items: {
+      control: {
+        type: 'object'
+      }
+    },
+    component: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    },
+    dropdownItems: {
+      control: {
+        type: 'object'
+      }
+    },
+    selectedItem: {
+      control: {
+        type: 'object'
+      }
     }
+  }
 };
 export const Default = {
-    args: {
-        items: MockTournaments,
-        component: 'TournamentAdminCard',
-        label: 'Sort by',
-        dropdownItems: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Date', link: '/sort/name'}
-    }
+  args: {
+    items: MockTournaments,
+    component: 'TournamentAdminCard',
+    label: 'Sort by',
+    dropdownItems: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Date', link: '/sort/name' }
+  }
 };
 export const EmptyBoard = {
-    args: {
-        tournaments: [],
-        component: 'TournamentAdminCard',
-        label: 'Sort by',
-        dropdownItems: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Name', link: '/sort/name'}
-    }
+  args: {
+    tournaments: [],
+    component: 'TournamentAdminCard',
+    label: 'Sort by',
+    dropdownItems: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Name', link: '/sort/name' }
+  }
 };
 export const WithTournaments = {
-    args: {
-        items: MockTournaments,
-        component: 'TournamentAdminCard',
-        label: 'Sort by',
-        dropdownItems: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Name', link: '/sort/name'}
-    }
+  args: {
+    items: MockTournaments,
+    component: 'TournamentAdminCard',
+    label: 'Sort by',
+    dropdownItems: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Name', link: '/sort/name' }
+  }
 };
 
 export const whileLoading = {
-    args: {
-        items: MockTournaments,
-        component: 'TournamentAdminCard',
-        label: 'Sort by',
-        dropdownItems: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Name', link: '/sort/name'},
-        loading: true
-    }
+  args: {
+    items: MockTournaments,
+    component: 'TournamentAdminCard',
+    label: 'Sort by',
+    dropdownItems: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Name', link: '/sort/name' },
+    loading: true
+  }
 };
 
 export const FencerFinalResultCard = {
-    args: {
-        items: MockAllPeople,
-        component: 'FencerFinalResultCard',
-        label: 'Sort by',
-        dropdownItems: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Name', link: '/sort/name'},
-        loading: false
-    }
+  args: {
+    items: MockAllPeople,
+    component: 'FencerFinalResultCard',
+    label: 'Sort by',
+    dropdownItems: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Name', link: '/sort/name' },
+    loading: false
+  }
 };
 
 export const ClubCards = {
-    args: {
-        items: getAllClubs,
-        component: 'ClubCard',
-        label: 'Sort by',
-        dropdownItems: [
-            {text: 'Name', link: '/sort/name'},
-            {text: 'Location', link: '/sort/location'},
-            {text: 'Date', link: '/sort/date'}
-        ],
-        selectedItem: {text: 'Name', link: '/sort/name'},
-        loading: false
-    }
-};
+  args: {
+    items: getAllClubs,
+    component: 'ClubCard',
+    label: 'Sort by',
+    dropdownItems: [
+      { text: 'Name', link: '/sort/name' },
+      { text: 'Location', link: '/sort/location' },
+      { text: 'Date', link: '/sort/date' }
+    ],
+    selectedItem: { text: 'Name', link: '/sort/name' },
+    loading: false
+  }
+};

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

@@ -1,17 +1,41 @@
 <template>
   <div class="md:border border-dropdownSelect rounded-lg md:p-9 md:bg-neutral min-h-screen">
     <div class="my-4">
-      <FilterUpcomingPast :title="getTitle" :selected="selectedTimeFrame" :showButtons="showButtons" @timeFrame="handleTimeFrameChange" @addNew="handleAddNew"/>
+      <FilterUpcomingPast
+        :title="getTitle"
+        :selected="selectedTimeFrame"
+        :showButtons="showButtons"
+        @timeFrame="handleTimeFrameChange"
+        @addNew="handleAddNew"
+      />
     </div>
     <div class="my-4">
-      <FilterAndSortBar :items="sortOptions" :label="label" :placeholder="placeholder" :selectedItem="defaultSelectedItem" @filterbar="handleFilter" @sort="handleSort"/>
+      <FilterAndSortBar
+        :items="sortOptions"
+        :label="label"
+        :placeholder="placeholder"
+        :selectedItem="defaultSelectedItem"
+        @filterbar="handleFilter"
+        @sort="handleSort"
+      />
     </div>
     <div :class="getGridClass">
       <div v-if="loading" v-for="index in 5" :key="index" class="w-full">
-          <TournamentCardSkeleton />
+        <TournamentCardSkeleton />
       </div>
-      <div v-if="!loading" v-for="item in filteredItems" :key="item.TournamentId || item.PersonId || item.ClubId" class="w-full">
-        <component :is="component" :detail="item" @edit="handleClick(item)" @listEvents="handleListEvents(item)" @delete="handleDelete(item)" />
+      <div
+        v-if="!loading"
+        v-for="item in filteredItems"
+        :key="item.TournamentId || item.PersonId || item.ClubId"
+        class="w-full"
+      >
+        <component
+          :is="component"
+          :detail="item"
+          @edit="handleClick(item)"
+          @listEvents="handleListEvents(item)"
+          @delete="handleDelete(item)"
+        />
       </div>
       <section v-if="!loading && filteredItems.length === 0">
         <img alt="Small desert scene with wind blowing." class="md:w-96 mx-auto" :src="emptyDesertIcon" />
@@ -27,68 +51,68 @@
 </template>
 
 <script>
-import BaseText from "../../Atoms/Text/BaseText.vue";
-import TournamentAdminCard from "../../Organisms/Cards/TournamentAdminCard/TournamentAdminCard.vue";
-import FencerFinalResultCard from "../../Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.vue";
-import ClubCard from "../../Organisms/Cards/ClubCard/ClubCard.vue";
-import FilterAndSortBar from "../../Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue";
-import FilterUpcomingPast from "../../Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue";
-import emptyDesertIcon from '../../../assets/empty_desert_icon.png';
-import TournamentCardSkeleton from "../Skeletons/TournamentCard/TournamentCardSkeleton.vue";
-
-const componentConfig = {
-  TournamentAdminCard: {
-    defaultSelectedItem: { text: 'Date', link: 'date' },
-    title: 'Tournaments',
-    gridClass: 'grid-cols-1',
-    noResultsMessage: 'No tournaments found.',
-    detailMessage: 'Click the add tournament button and let\'s get started!',
-    getSearchText: item => item.Name?.toLowerCase() ?? ''
-  },
-  FencerFinalResultCard: {
-    defaultSelectedItem: { text: 'Name', link: 'name' },
-    title: 'Fencers',
-    gridClass: 'grid-cols-1',
-    noResultsMessage: 'No fencers found.',
-    detailMessage: 'Click the add fencer button and let\'s get started!',
-    getSearchText: item => item.DisplayName?.toLowerCase() ?? ''
-  },
-  ClubCard: {
-    defaultSelectedItem: { text: 'Club', link: 'club' },
-    title: 'Clubs',
-    noResultsMessage: 'No clubs found.',
-    detailMessage: 'Click the add club button and let\'s get started!',
-    getSearchText: item => item.Name?.toLowerCase() ?? ''
-  }
-};
-
-const defaultComponentConfig = {
-  defaultSelectedItem: {},
-  title: 'Unknown',
-  noResultsMessage: 'No results found.',
-  detailMessage: 'Click the add button and let\'s get started!',
-  getSearchText: () => ''
-};
-
-const sortOptionsByComponent = {
-  FencerFinalResultCard: [
-    { text: 'Name', link: '/sort/name' },
-    { text: 'Club', link: '/sort/club' },
-    { text: 'HR Rating', link: '/sort/hr' }
-  ],
-  ClubCard: [
-    { text: 'Name', link: '/sort/name' },
-    { text: 'Location', link: '/sort/club' }
-  ]
-};
-
-const defaultSortOptions = [
-  { text: 'Date', link: '/sort/date' },
-  { text: 'Name', link: '/sort/name' },
-  { text: 'Location', link: '/sort/location' }
-];
-
-export default {
+import BaseText from '../../Atoms/Text/BaseText.vue';
+import TournamentAdminCard from '../../Organisms/Cards/TournamentAdminCard/TournamentAdminCard.vue';
+import FencerFinalResultCard from '../../Organisms/Cards/FencerFinalResultCard/FencerFinalResultCard.vue';
+import ClubCard from '../../Organisms/Cards/ClubCard/ClubCard.vue';
+import FilterAndSortBar from '../../Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue';
+import FilterUpcomingPast from '../../Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue';
+import emptyDesertIcon from '../../../assets/empty_desert_icon.png';
+import TournamentCardSkeleton from '../Skeletons/TournamentCard/TournamentCardSkeleton.vue';
+
+const componentConfig = {
+  TournamentAdminCard: {
+    defaultSelectedItem: { text: 'Date', link: 'date' },
+    title: 'Tournaments',
+    gridClass: 'grid-cols-1',
+    noResultsMessage: 'No tournaments found.',
+    detailMessage: "Click the add tournament button and let's get started!",
+    getSearchText: item => item.Name?.toLowerCase() ?? ''
+  },
+  FencerFinalResultCard: {
+    defaultSelectedItem: { text: 'Name', link: 'name' },
+    title: 'Fencers',
+    gridClass: 'grid-cols-1',
+    noResultsMessage: 'No fencers found.',
+    detailMessage: "Click the add fencer button and let's get started!",
+    getSearchText: item => item.DisplayName?.toLowerCase() ?? ''
+  },
+  ClubCard: {
+    defaultSelectedItem: { text: 'Club', link: 'club' },
+    title: 'Clubs',
+    noResultsMessage: 'No clubs found.',
+    detailMessage: "Click the add club button and let's get started!",
+    getSearchText: item => item.Name?.toLowerCase() ?? ''
+  }
+};
+
+const defaultComponentConfig = {
+  defaultSelectedItem: {},
+  title: 'Unknown',
+  noResultsMessage: 'No results found.',
+  detailMessage: "Click the add button and let's get started!",
+  getSearchText: () => ''
+};
+
+const sortOptionsByComponent = {
+  FencerFinalResultCard: [
+    { text: 'Name', link: '/sort/name' },
+    { text: 'Club', link: '/sort/club' },
+    { text: 'HR Rating', link: '/sort/hr' }
+  ],
+  ClubCard: [
+    { text: 'Name', link: '/sort/name' },
+    { text: 'Location', link: '/sort/club' }
+  ]
+};
+
+const defaultSortOptions = [
+  { text: 'Date', link: '/sort/date' },
+  { text: 'Name', link: '/sort/name' },
+  { text: 'Location', link: '/sort/location' }
+];
+
+export default {
   name: 'GridContainer',
   components: {
     TournamentCardSkeleton,
@@ -110,7 +134,7 @@ export default {
       required: true
     },
     label: {
-      type: String,
+      type: String
     },
     dropdownItems: {
       type: Array,
@@ -143,35 +167,35 @@ export default {
   mounted() {
     this.applyFilters();
   },
-  computed: {
-    componentSettings() {
-      return componentConfig[this.component] || defaultComponentConfig;
-    },
-    defaultSelectedItem() {
-      return this.componentSettings.defaultSelectedItem;
-    },
-    getTitle() {
-      return this.componentSettings.title;
-    },
-    placeholder() {
-      return 'Filter by Name';
+  computed: {
+    componentSettings() {
+      return componentConfig[this.component] || defaultComponentConfig;
+    },
+    defaultSelectedItem() {
+      return this.componentSettings.defaultSelectedItem;
+    },
+    getTitle() {
+      return this.componentSettings.title;
+    },
+    placeholder() {
+      return 'Filter by Name';
     },
     showButtons() {
       return this.component === 'TournamentAdminCard';
-    },
-    getGridClass() {
-      return this.componentSettings.gridClass;
-    },
-    getNoResultsMessage() {
-      return this.componentSettings.noResultsMessage;
-    },
-    getDetailMessage(){
-      return this.componentSettings.detailMessage;
-    },
-    sortOptions() {
-      return sortOptionsByComponent[this.component] || defaultSortOptions;
-    }
-  },
+    },
+    getGridClass() {
+      return this.componentSettings.gridClass;
+    },
+    getNoResultsMessage() {
+      return this.componentSettings.noResultsMessage;
+    },
+    getDetailMessage() {
+      return this.componentSettings.detailMessage;
+    },
+    sortOptions() {
+      return sortOptionsByComponent[this.component] || defaultSortOptions;
+    }
+  },
   methods: {
     applyFilters() {
       let result = [...this.items];
@@ -184,12 +208,12 @@ export default {
     },
     applySearchFilter(items) {
       if (!this.filterOn.trim()) return items;
-      const searchText = this.filterOn.toLowerCase();
-      return items.filter(item => {
-        const nameToCheck = this.componentSettings.getSearchText(item);
-
-        if (!nameToCheck) return false;
-        return nameToCheck.includes(searchText);
+      const searchText = this.filterOn.toLowerCase();
+      return items.filter(item => {
+        const nameToCheck = this.componentSettings.getSearchText(item);
+
+        if (!nameToCheck) return false;
+        return nameToCheck.includes(searchText);
       });
     },
     filterByTimeFrame(items) {
@@ -202,36 +226,36 @@ export default {
       const futureLimit = new Date(currentDate);
       futureLimit.setDate(futureLimit.getDate() + 90);
 
-      const timeFrameFilters = {
-        Upcoming: () => items.filter(item => new Date(item.EndDate) >= currentDate),
-        Past: () => items.filter(item => new Date(item.EndDate) < currentDate),
-        Default: () => {
-          const filtered = items.filter(item => {
-            const endDate = new Date(item.EndDate);
-            return endDate >= pastLimit && endDate <= futureLimit;
-          });
-
-          return filtered.slice(0, 20);
-        }
-      };
-
-      return (timeFrameFilters[this.selectedTimeFrame] || timeFrameFilters.Default)();
+      const timeFrameFilters = {
+        Upcoming: () => items.filter(item => new Date(item.EndDate) >= currentDate),
+        Past: () => items.filter(item => new Date(item.EndDate) < currentDate),
+        Default: () => {
+          const filtered = items.filter(item => {
+            const endDate = new Date(item.EndDate);
+            return endDate >= pastLimit && endDate <= futureLimit;
+          });
+
+          return filtered.slice(0, 20);
+        }
+      };
+
+      return (timeFrameFilters[this.selectedTimeFrame] || timeFrameFilters.Default)();
     },
     sortTournament(items) {
       if (this.selectedTimeFrame === 'Default') return items;
 
       const sortFn = {
-        'Date': (a, b) => new Date(a.StartDate) - new Date(b.StartDate),
-        'Name': (a, b) => a.Name.localeCompare(b.Name),
-        'Location': (a, b) => a.Address[0]?.Name?.localeCompare(b.Address[0]?.Name) || 0
+        Date: (a, b) => new Date(a.StartDate) - new Date(b.StartDate),
+        Name: (a, b) => a.Name.localeCompare(b.Name),
+        Location: (a, b) => a.Address[0]?.Name?.localeCompare(b.Address[0]?.Name) || 0
       }[this.sortCriteria];
 
       return sortFn ? [...items].sort(sortFn) : items;
     },
     sortFencers(items) {
       const sortFn = {
-        'Name': (a, b) => a.DisplayName.localeCompare(b.DisplayName),
-        'Club': (a, b) => a.Club.Name.localeCompare(b.Club.Name),
+        Name: (a, b) => a.DisplayName.localeCompare(b.DisplayName),
+        Club: (a, b) => a.Club.Name.localeCompare(b.Club.Name),
         'HR Rating': (a, b) => (b.HEMARatings?.[0]?.Rating ?? 0) - (a.HEMARatings?.[0]?.Rating ?? 0)
       }[this.sortCriteria];
 
@@ -239,22 +263,22 @@ export default {
     },
     sortClubs(items) {
       const sortFn = {
-        'Name': (a, b) => a.Name.localeCompare(b.Name),
-        'Location': (a, b) => a.Address?.Name?.localeCompare(b.Address?.Name) || 0
+        Name: (a, b) => a.Name.localeCompare(b.Name),
+        Location: (a, b) => a.Address?.Name?.localeCompare(b.Address?.Name) || 0
       }[this.sortCriteria];
 
       return sortFn ? [...items].sort(sortFn) : items;
-    },
-    applySorting(items) {
-      const sortByComponent = {
-        TournamentAdminCard: this.sortTournament,
-        FencerFinalResultCard: this.sortFencers,
-        ClubCard: this.sortClubs
-      };
-      const sortItems = sortByComponent[this.component];
-
-      return sortItems ? sortItems(items) : items;
-    },
+    },
+    applySorting(items) {
+      const sortByComponent = {
+        TournamentAdminCard: this.sortTournament,
+        FencerFinalResultCard: this.sortFencers,
+        ClubCard: this.sortClubs
+      };
+      const sortItems = sortByComponent[this.component];
+
+      return sortItems ? sortItems(items) : items;
+    },
     handleFilter(filterText) {
       this.filterOn = filterText;
       this.applyFilters();
@@ -267,7 +291,7 @@ export default {
       this.selectedTimeFrame = timeFrame;
       this.applyFilters();
     },
-    handleClick(item){
+    handleClick(item) {
       if (this.component === 'TournamentAdminCard') {
         this.$emit('update:edit', item.TournamentId);
       }
@@ -280,13 +304,13 @@ export default {
         this.$emit('update:edit', item.ClubId);
       }
     },
-    handleListEvents(item){
+    handleListEvents(item) {
       this.$emit('select:listEvents', item.TournamentId);
     },
-    handleDelete(item){
+    handleDelete(item) {
       this.$emit('delete', item.TournamentId);
     },
-    handleAddNew(){
+    handleAddNew() {
       this.$emit('addNew');
     }
   }