npm - @dcrackel/hematournamentui - Versions diffs - 1.0.299 → 1.0.301 - Mend

@dcrackel/hematournamentui 1.0.299 → 1.0.301

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/package.json CHANGED Viewed

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

package/src/assets/loading-spinner.gif ADDED Viewed

Binary file

package/src/mocks/clubGetAllMock.js CHANGED Viewed

@@ -2,27 +2,235 @@ const clubGetAllMock =
     [
         {
             "ClubId": 1,
-            "Name": "Test Club",
-            "ShortName": "TEST",
-            "Description": "This is a test",
+            "Name": "Acme Fencing Club",
+            "ShortName": "ACME",
+            "Description": "Acme Fencing Club",
             "AddressId": 1,
-            "SocialMediaId": null
+            "Color1": "rose",
+            "Color2": "navy",
+            "Images": [
+                {
+                    "ImageId": 13,
+                    "URL": "https://meyersquared.com/images/acme_club.png",
+                    "AltText": "Club lol",
+                    "Type": "Club",
+                    "EntityId": 1,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
+        },
+        {
+            "ClubId": 9,
+            "Name": "Cats Cutlass Club of Canton",
+            "ShortName": "CCCoC",
+            "Description": null,
+            "AddressId": 1,
+            "Color1": "red",
+            "Color2": "blue",
+            "Images": [
+                {
+                    "ImageId": 20,
+                    "URL": "https://meyersquared.com/images/Club12.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 9,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
+        },
+        {
+            "ClubId": 5,
+            "Name": "Fechtastic Fighters",
+            "ShortName": "FF",
+            "Description": "Fechtastic Fighters",
+            "AddressId": 1,
+            "Color1": "green",
+            "Color2": "silver",
+            "Images": [
+                {
+                    "ImageId": 17,
+                    "URL": "https://meyersquared.com/images/Club9.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 5,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
+        },
+        {
+            "ClubId": 4,
+            "Name": "Guardians of the Guard",
+            "ShortName": "GotG",
+            "Description": "Guardians of the Guard",
+            "AddressId": 1,
+            "Color1": "purple",
+            "Color2": "orange",
+            "Images": [
+                {
+                    "ImageId": 16,
+                    "URL": "https://meyersquared.com/images/Club8.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 4,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
+        },
+        {
+            "ClubId": 7,
+            "Name": "Hilt & Heart",
+            "ShortName": "H&H",
+            "Description": "Hilt & Heart",
+            "AddressId": 1,
+            "Color1": "red",
+            "Color2": "blue",
+            "Images": [
+                {
+                    "ImageId": 19,
+                    "URL": "https://meyersquared.com/images/Club11.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 7,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
         },
         {
             "ClubId": 2,
-            "Name": "This is a long HEMA club name",
-            "ShortName": "TLHC",
+            "Name": "Historical Fencing Of Anywhere",
+            "ShortName": "HFoA",
             "Description": "is",
             "AddressId": 1,
-            "SocialMediaId": null
+            "Color1": "red",
+            "Color2": "blue",
+            "Images": [
+                {
+                    "ImageId": 14,
+                    "URL": "https://meyersquared.com/images/Club6.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 2,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
         },
         {
             "ClubId": 3,
-            "Name": "Historical Fencing Club of Longnamed Place",
-            "ShortName": "HFoLP",
+            "Name": "Sword & Blade of Callie",
+            "ShortName": "SBoC",
             "Description": "adsasdf",
             "AddressId": 1,
-            "SocialMediaId": null
+            "Color1": "red",
+            "Color2": "gold",
+            "Images": [
+                {
+                    "ImageId": 15,
+                    "URL": "https://meyersquared.com/images/Club7.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 3,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
+        },
+        {
+            "ClubId": 6,
+            "Name": "SwordPlay Society",
+            "ShortName": "SS",
+            "Description": "SwordPlay Society",
+            "AddressId": 1,
+            "Color1": "red",
+            "Color2": "blue",
+            "Images": [
+                {
+                    "ImageId": 18,
+                    "URL": "https://meyersquared.com/images/Club10.png",
+                    "AltText": null,
+                    "Type": "Club",
+                    "EntityId": 6,
+                    "EntityType": "Club"
+                }
+            ],
+            "Address": {
+                "AddressId": 1,
+                "Name": "Test Location",
+                "Address1": "123 Anywhere",
+                "Address2": null,
+                "City": "Delaware",
+                "State": "OH",
+                "Zip": 43015,
+                "Coordinates": "40.2828592,-83.1118049"
+            }
         }
     ]

package/src/stories/Organisms/Cards/ClubCard/ClubCard.vue ADDED Viewed

@@ -0,0 +1,43 @@
+<template>
+    <section class="bg-poolSetup flex items-center p-2 shadow rounded-lg ">
+    <div class="w-9 h-9 rounded-md overflow-hidden">
+      <div v-if="!clubImage" class="w-14 h-14 bg-dropdownSelect flex items-center justify-center">
+        <BaseText text="" size="sm" color="neutral" weight="bold" />
+      </div>
+      <img :src="clubImage" alt="Fencer Portrait" class="w-full h-full object-cover" />
+    </div>
+    <div class="flex-1 ml-4">
+      <p class="flex">
+        <BaseText :text="clubName" size="sm" weight="bold" color="quaternary" />
+      </p>
+    </div>
+    </section>
+</template>
+<script>
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+export default {
+  name: 'ClubCard',
+  components: {BaseIcon, BaseText},
+  props: {
+    clubName: {
+      type: String,
+      required: true
+    },
+    clubImage: {
+      type: String,
+    },
+    background: {
+      type: String,
+      default: 'bg-poolSetup'
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('update:click')
+    }
+  }
+}
+</script>

package/src/stories/Organisms/Cards/ClubCard/ClubClub.stories.js ADDED Viewed

@@ -0,0 +1,25 @@
+import ClubCard from './ClubCard.vue';
+export default {
+    title: 'Organisms/Cards/ClubCard',
+    component: ClubCard,
+    tags: ['autodocs'],
+    args: {
+        clubImage: 'https://randomuser.me/api/portraits/men/31.jpg',
+        clubName: 'John Doe',
+    },
+    argTypes: {
+        clubImage: { control: 'text' },
+        clubName: { control: 'text' },
+    },
+};
+export const Default = {
+    args: {
+        clubImage: 'https://randomuser.me/api/portraits/men/24.jpg',
+        clubName: 'Test Club',
+    }
+}

package/src/stories/Organisms/ComplexInputs/FindLocation/FindLocation.vue CHANGED Viewed

@@ -98,7 +98,7 @@ export default {
     selectItem(item) {
       this.showDropdown = false;
       this.inputValue = item.Name;
-      this.$emit('update-location', item);
+      this.$emit('update:location', item);
       this.$nextTick(() => {
         this.showDropdown = false;
       });

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue CHANGED Viewed

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <img
+    <img v-if="!uploading"
         :src="localUrl"
         :class="getClasses"
         :style="customStyle"
@@ -8,6 +8,19 @@
         @error="onImageError"
         @click="setShowCropper()"
     />
+<!--    <img v-if="uploading"-->
+<!--         :src="loading"-->
+<!--         :class="getClasses"-->
+<!--         :style="customStyle"-->
+<!--         :alt="localUrl"-->
+<!--         @error="onImageError"-->
+<!--         @click="setShowCropper()"-->
+<!--    />-->
+    <div v-if="uploading"
+         class="w-32 h-32 border-2 border-dashed rounded-full bg-gray-300 animate-pulse"
+         @error="onImageError"
+         @click="setShowCropper()"
+    />
     <avatar-cropper
         v-model="showCropper"
         :upload-url="`${uploadServer}${uploadImageName}`"
@@ -23,6 +36,7 @@
 <script>
 import AvatarCropper from 'vue-avatar-cropper';
 import SelectAnImage from '../../../../assets/select-tournament.png';
+import loading from '../../../../assets/loading-spinner.gif'
 export default {
   name: 'GenericImageCropper',
@@ -67,8 +81,10 @@ export default {
   },
   data() {
     return {
+      loading,
       localUrl: this.urlToImage ? this.urlToImage : SelectAnImage,
-      showCropper: false
+      showCropper: false,
+      uploading: false
     };
   },
   computed: {
@@ -81,9 +97,11 @@ export default {
       this.showCropper = true;
     },
     handleUploading() {
-      this.message = 'Uploading...';
+      this.uploading = true
     },
     handleUploaded(response) {
+      this.uploading = false
+      console.log(`Uploaded: ${response}`);
       if (response.response.status === 200) {
         this.localUrl = `${this.imageServer}${this.uploadImageName}.png`;
         console.log(this.localUrl);

package/src/stories/Organisms/Containers/ClubColumn/ClubColumn.stories.js ADDED Viewed

@@ -0,0 +1,20 @@
+import clubColumn from './ClubColumn.vue';
+import clubMock from '../../../../mocks/clubGetAllMock.js';
+export default {
+    title: 'Organisms/Containers/ClubColumn',
+    component: clubColumn,
+    tags: ['autodocs'],
+    args: {
+        clubs: clubMock
+    },
+    argTypes: {
+        clubs: { control: { type: 'object' } }
+    }
+};
+export const Default = {
+    args: {
+        clubs: clubMock
+    }
+};

package/src/stories/Organisms/Containers/ClubColumn/ClubColumn.vue ADDED Viewed

@@ -0,0 +1,81 @@
+<template>
+  <div class="w-96 p-4">
+    <div class="mb-4 px-4">
+      <TitledInput :inputValue="searchTerm"
+                   placeholder="Enter Name to Search"
+                   title="Search"
+                   @update:value="updateDisplayName"/>
+    </div>
+    <div class="overflow-y-auto h-[800px]">
+      <ul>
+        <li v-for="club in filteredClubs" :key="club.ClubId" class="py-2 px-4 rounded-lg cursor-pointer">
+          <ClubCard
+              :clubName="club.Name"
+              :clubImage="club.Images[0] ? club.Images[0].URL : ''"
+              class="border border-poolSetup hover:border-bright"
+              @update:click="handleClubSelect(club)"
+           />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseInput from "../../../Atoms/Input/BaseInput.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import PoolFencerCard from "../../Cards/PoolFencerCard/PoolFencerCard.vue";
+import ClubCard from "../../Cards/ClubCard/ClubCard.vue";
+export default {
+  name: 'PeopleColumn',
+  components: {
+    ClubCard,
+    PoolFencerCard,
+    BaseText,
+    BaseInput,
+    TitledInput
+  },
+  props: {
+    clubs: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      searchTerm: ''
+    };
+  },
+  computed: {
+    filteredClubs() {
+      return this.clubs
+          .filter(club => {
+            const displayName = club.Name || '';
+            return displayName.toLowerCase().includes(this.searchTerm.toLowerCase());
+          })
+          .sort((a, b) => {
+            const nameA = (a.Name || '').toLowerCase();
+            const nameB = (b.Name || '').toLowerCase();
+            return nameA.localeCompare(nameB);
+          });
+    }
+  },
+  methods: {
+    updateDisplayName(value) {
+      this.searchTerm = value;
+    },
+    handleClubSelect(value)
+    {
+      console.log(`Selected fencer: ${value}`);
+      this.$emit('update:selectedClub', value);
+    },
+    handlePersonSubmit()
+    {
+      console.log(`Submitted person: ${value}`);
+      this.$emit('submit:club', value);
+    }
+  }
+};
+</script>

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

@@ -1,5 +1,8 @@
 <template>
   <section class="flex">
+    <div v-if="userLevel === 'Admin'">
+      <ClubColumn :clubs="clubs" @update:selectedClub="handleClubClick"/>
+    </div>
     <div class="rounded-lg p-9 bg-neutral w-full">
       <div class="w-full flex flex-row justify-center mb-4">
         <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Club Profile'" :weight="'normal'"/>
@@ -45,6 +48,7 @@
       </div>
       <div class="flex flex-row justify-end mt-8">
+        <BaseButton v-if="userLevel === 'Admin'" class="mr-8 " color="warn" label="Delete" size="sm" type="secondary" @click="handleDelete"/>
         <BaseButton class="w-full" color="neutral" label="Save" size="sm" type="secondary" @click="handleSubmit"/>
       </div>
     </div>
@@ -59,10 +63,12 @@ import DropDownMenu from "../../Organisms/ComplexInputs/DropDown/DropDownMenu.vu
 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 ClubColumn from "../../Organisms/Containers/ClubColumn/ClubColumn.vue";
 export default {
   name: 'ClubManagement',
   components: {
+    ClubColumn,
     BaseText,
     ImageCropper,
     TitledInput,
@@ -90,6 +96,14 @@ export default {
     locations: {
       type: Array,
       default: () => []
+    },
+    clubs: {
+      type: Array,
+      default: () => []
+    },
+    userLevel: {
+      type: String,
+      default: 'user'
     }
   },
   data() {
@@ -105,7 +119,8 @@ export default {
       }));
     },
     getImageURL() {
-      return this.club.ProfileImage ? this.club.ProfileImage.URL : '';
+      console.log(this.club.Images)
+      return this.club.Images[0] ? this.club.Images[0].URL : '';
     },
     getSelectedAddress() {
       return this.club.Address.Name
@@ -139,16 +154,10 @@ export default {
     updateShortName(value) {
       this.club.ShortName = value;
     },
-    updateDescription(value) {
-      this.club.Description = value;
-    },
     handleSubmit() {
       console.log(this.club)
       this.$emit('submit:club', this.club);
     },
-    handleSelectedAddress(value) {
-      this.club.Address.AddressId = value.link;
-    },
     handleEditorUpdate(value) {
       this.club.Description = value;
     },
@@ -157,6 +166,12 @@ export default {
     },
     handleAddressUpdate(value) {
       this.club.AddressId = value.AddressId;
+    },
+    handleClubClick(value) {
+      this.$emit('update:selectedClub', value);
+    },
+    handleDelete() {
+      this.$emit('delete:club', this.club);
     }
   }
 };

package/src/stories/Templates/ClubManagement/ClubMangement.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import ClubManagement from './ClubManagement.vue';
-import clubMock from "../../../mocks/clubGetAllMock.js"
+import clubMock from '../../../mocks/clubGetAllMock.js';
 import addressesMock from "../../../mocks/locationMock.js";
 export default {
@@ -11,13 +11,18 @@ export default {
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
         locations: addressesMock,
-        clubProfile: { "ClubId": 10, "Name": "Columbus United Fencing Club", "ShortName": "CUFC", "Description": null, "AddressId": 1, "Color1": "rose", "Color2": "navy", "Images": [], "Address": { "AddressId": 1, "Name": "Test Location", "Address1": "123 Anywhere", "Address2": null, "City": "Delaware", "State": "OH", "Zip": 43015, "Coordinates": "40.2828592,-83.1118049" }, "SocialMedia": [] }
+        clubProfile: clubMock[0],
+        clubs: clubMock,
+        userLevel: 'user'
     },
     argTypes: {
         uploadImageName: { control: { type: 'text' } },
         uploadServer: { control: { type: 'text' } },
         imageServer: { control: { type: 'text' } },
-        addresses: { control: { type: 'array'} }
+        locations:  { control: { type: 'array'} },
+        clubProfile: { control: { type: 'object' } },
+        clubs: { control: { type: 'object' } },
+        userLevel: { control: { type: 'text' } }
     }
 };
@@ -27,17 +32,20 @@ export const Default = {
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
         locations: addressesMock,
-        clubProfile: { "ClubId": 10, "Name": "Columbus United Fencing Club", "ShortName": "CUFC", "Description": null, "AddressId": 1, "Color1": "rose", "Color2": "navy", "Images": [], "Address": { "AddressId": 1, "Name": "Test Location", "Address1": "123 Anywhere", "Address2": null, "City": "Delaware", "State": "OH", "Zip": 43015, "Coordinates": "40.2828592,-83.1118049" }, "SocialMedia": [] }
+        clubProfile: clubMock[1],
+        clubs: clubMock,
+        userLevel: 'user'
     }
 };
-export const withDifferentClub = {
+export const asAdmin = {
     args: {
         uploadImageName: 'ctest2',
         uploadServer: 'http://localhost:3000/api/upload/',
         imageServer: 'http://localhost:3000/uploads/',
         locations: addressesMock,
-        clubProfile: { "ClubId": 10, "Name": "Columbus United Fencing Club", "ShortName": "CUFC", "Description": null, "AddressId": 1, "Color1": "rose", "Color2": "navy", "Images": [], "Address": { "AddressId": 1, "Name": "Test Location", "Address1": "123 Anywhere", "Address2": null, "City": "Delaware", "State": "OH", "Zip": 43015, "Coordinates": "40.2828592,-83.1118049" }, "SocialMedia": [] }
+        clubProfile: clubMock[2],
+        clubs: clubMock,
+        userLevel: 'Admin'
     }
 };

package/src/stories/Templates/PersonManagement/PersonManagement.vue CHANGED Viewed

@@ -94,6 +94,7 @@
     </div>
     <div class="flex flex-row justify-end mt-8">
+      <BaseButton v-if="userLevel === 'Admin'" class="mr-8 " color="warn" label="Delete" size="sm" type="secondary" @click="handleDelete"/>
       <BaseButton class="w-full" color="neutral" label="Save" size="sm" type="secondary" @click="handleSubmit"/>
     </div>
   </div>
@@ -266,8 +267,13 @@ export default {
     },
     handleSelectedAccessLevel(value) {
       this.person.AccessLevel = value.text;
+    },
+    handle(value){
+      this.$emit('update:selectedFencer', value);
+    },
+    handleDelete() {
+      this.$emit('delete:person', this.person);
     }
   }
 }
 </script>