@dcrackel/hematournamentui 1.0.241 → 1.0.243

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.241",
+  "version": "1.0.243",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",
@@ -28,7 +28,7 @@
     "@fontsource/fira-code": "^5.0.18",
     "@fontsource/inter": "^5.0.19",
     "@fontsource/roboto-mono": "^5.0.18",
-    "@storybook/icons": "^1.2.9",
+    "@storybook/icons": "^1.2.10",
     "@tiptap/extension-bold": "^2.1.13",
     "@tiptap/extension-highlight": "^2.1.13",
     "@tiptap/extension-text-align": "^2.1.13",
@@ -52,17 +52,17 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
-    "@storybook/addon-actions": "^8.2.6",
-    "@storybook/addon-docs": "^8.2.6",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-mdx-gfm": "^8.2.6",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/test": "^8.2.6",
-    "@storybook/vue3": "^8.2.6",
-    "@storybook/vue3-vite": "^8.2.6",
+    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-docs": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-mdx-gfm": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/test": "^8.2.7",
+    "@storybook/vue3": "^8.2.7",
+    "@storybook/vue3-vite": "^8.2.7",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitest/coverage-v8": "^1.1.0",
     "@vue/cli-plugin-babel": "^5.0.8",
@@ -71,7 +71,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.20.1",
-    "storybook": "^8.2.6",
+    "storybook": "^8.2.7",
     "storybook-vue3-router": "^5.0.0",
     "tailwindcss": "^3.4.3",
     "vite": "^5.0.10",

package/src/mocks/tournamentMock.js

@@ -1,19 +1,19 @@
 const mockTournaments = [
   {
-    "TournamentId": 3,
-    "Name": "Fetchfecht",
-    "StartDate": "2024-05-05",
-    "EndDate": "2024-05-09",
-    "Description": "Cats and Swords, fence then play with adorable cats",
-    "ClubId": 1,
+    "TournamentId": 19,
+    "Name": "Sword Quench",
+    "StartDate": "2024-08-02",
+    "EndDate": "2024-08-02",
+    "Description": "<p>This is a test</p>",
+    "ClubId": 10,
     "AddressId": 1,
     "Visibility": "Open",
     "HostedOnM2": true,
-    "PrimaryContactId": null,
-    "CreatedByPersonId": null,
+    "PrimaryContactId": 75,
+    "CreatedByPersonId": 1,
     "Club": {
-      "ClubId": 1,
-      "Name": "Acme Fencing Club"
+      "ClubId": 10,
+      "Name": "Columbus United Fencing Club"
     },
     "Address": {
       "Name": "Test Location",
@@ -23,33 +23,39 @@ const mockTournaments = [
       "Zip": 43015,
       "Coordinates": "40.2828592,-83.1118049"
     },
-    "PrimaryContact": null,
-    "CreatedByPerson": null,
-    "SocialMedia": [
-      {
-        "Link": "http://second-link.com",
-        "Label": null
-      },
-      {
-        "Link": "https://thisisatest.com",
-        "Label": null
-      }
-    ],
+    "PrimaryContact": {
+      "PersonId": 75,
+      "DisplayName": "William Handford",
+      "Pronouns": "He/Him",
+      "FirstName": "William",
+      "LastName": "Handford",
+      "Birthday": null,
+      "ClubId": 10,
+      "HemaRatingsId": 8966,
+      "ShowData": true,
+      "AccessLevel": "User"
+    },
+    "CreatedByPerson": {
+      "PersonId": 1,
+      "DisplayName": "Dwain Crackel",
+      "Pronouns": "He/Him",
+      "FirstName": "Dwain",
+      "LastName": "Crackel",
+      "Birthday": "1980-07-16",
+      "ClubId": 10,
+      "HemaRatingsId": 8962,
+      "ShowData": true,
+      "AccessLevel": "User"
+    },
+    "SocialMedia": [],
     "Images": [
       {
-        "ImageId": 1,
-        "URL": "https://i.ytimg.com/vi/ieQglgIMfao/maxresdefault.jpg",
-        "AltText": "This is alt text"
+        "ImageId": 28,
+        "URL": "http://localhost/uploads/t-b3e00ebf.png",
+        "AltText": "Sword Quench image"
       }
     ],
-    "Tag": [
-      {
-        "TagName": "Saber"
-      },
-      {
-        "TagName": "Longsword"
-      }
-    ]
+    "Tag": []
   },
   {
     "TournamentId": 4,

package/src/stories/Molecules/Modals/AddDisplayModal/AddDisplay.stories.js

@@ -1,47 +1,37 @@
 import AddDisplayModal from './AddDisplayModal.vue';
-import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
-import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js";
 
 export default {
     title: 'Molecules/Modals/AddDisplayModal',
     component: AddDisplayModal,
     tags: ['autodocs'],
     args: {
-        displayType: "ScoreBoard",
-        displayName: "Ring 1",
-        assignedTo: { text: "Dave Smith", link: "1" },
-        assignedToEvent: { text: "Cats and things", link: "1" },
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId
+        show: true,
+        clubs: [{ id: 1, name: 'Club 1' }, { id: 2, name: 'Club 2' }],
+        userClub: { id: 1, name: 'Club 1' },
+        isAdmin: true
     },
     argTypes: {
-        displayType: { control: { type: 'text' } },
-        displayName: { control: { type: 'text' } },
-        assignedTo: { control: { type: 'object' } },
-        assignedToEvent: { control: { type: 'object' } },
-        staffDropDown: { control: { type: 'array' } },
-        eventDropDown: { control: { type: 'array' } },
+        show: { control: { type: 'boolean' } },
+        clubs: { control: { type: 'array' } },
+        userClub: { control: { type: 'object' } },
+        isAdmin: { control: { type: 'boolean' } }
     },
 };
 
 export const Default = {
     args: {
-        displayType: "ScoreBoard",
-        displayName: "Ring 1",
-        assignedTo: { text: "Dave Smith", link: "1" },
-        assignedToEvent: { text: "Cats and things", link: "1" },
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId
+        show: true,
+        clubs: [{ id: 1, name: 'Club 1' }, { id: 2, name: 'Club 2' }],
+        userClub: { id: 1, name: 'Club 1' },
+        isAdmin: true
     },
 };
 
 export const WithInitialCount = {
     args: {
-        displayType: "FlightBoard",
-        displayName: "FlightBoard 1",
-        assignedTo: { text: "Jenny Jones", link: "2" },
-        assignedToEvent: { text: "Cats and things", link: "1" },
-        staffDropDown: getAllStaffByTournamentId,
-        eventDropDown: getEventByTournamentId
+        show: true,
+        clubs: [{ id: 1, name: 'Club 1' }, { id: 2, name: 'Club 2' }],
+        userClub: { id: 2, name: 'Club 2' },
+        isAdmin: false
     },
 };

package/src/stories/Molecules/Modals/AddDisplayModal/AddDisplayModal.vue

@@ -33,15 +33,18 @@ export default {
     },
     clubs: {
       type: Array,
-      required: true
+      required: true,
+      default: () => []
     },
     userClub: {
       type: Object,
-      required: true
+      required: true,
+      default: () => ({})
     },
     isAdmin: {
       type: Boolean,
-      required: true
+      required: true,
+      default: false
     }
   },
   methods: {

package/src/stories/Molecules/Modals/LoadingModal/LoadingModal.stories.js

@@ -0,0 +1,28 @@
+import LoadingModal from './LoadingModal.vue';
+
+export default {
+    title: 'Molecules/Modals/LoadingModal',
+    component: LoadingModal,
+    tags: ['autodocs'],
+    args: {
+        show: true,
+        headerText: "Loading...",
+        animatedGif: "https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif", // Replace with the actual gif URL
+        loadingText: "Please wait while we load the data."
+    },
+    argTypes: {
+        show: { control: { type: 'boolean' } },
+        headerText: { control: { type: 'text' } },
+        animatedGif: { control: { type: 'text' } },
+        loadingText: { control: { type: 'text' } }
+    },
+};
+
+export const Default = {
+    args: {
+        show: true,
+        headerText: "Loading...",
+        animatedGif: "https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif", // Replace with the actual gif URL
+        loadingText: "Please wait while we load the data."
+    },
+};

package/src/stories/Molecules/Modals/LoadingModal/LoadingModal.vue

@@ -0,0 +1,45 @@
+<template>
+  <transition
+      enter-active-class="transition-opacity duration-500"
+      enter-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-500"
+      leave-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50">
+      <div class="w-1/3 min-w-[30rem] bg-loadingModalBG rounded-lg shadow-lg pb-6 px-2 text-center py-4">
+        <div class="text-lg font-semibold mt-2">{{ headerText }}</div>
+        <img :src="loadedImageGif" alt="Loading" class="my-4 mx-auto w-52" />
+        <div class="text-sm">{{ loadingText }}</div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import loadingImage from '../../../../assets/loading.gif';
+
+export default {
+  name: "LoadingModal",
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    headerText: {
+      type: String,
+      required: true
+    },
+    loadingText: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loadedImageGif: loadingImage
+    };
+  }
+};
+</script>

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.stories.js

@@ -1,6 +1,7 @@
 import AddTournamentPageOne from './AddTournamentPageOne.vue';
 import mockLocation from '../../../../../mocks/locationMock.js';
 import mockPersons from '../../../../../mocks/personsMock.js';
+import mockTournaments from '../../../../../mocks/tournamentMock.js';
 
 export default {
     title: 'Templates/TournamentManagement/AddTournament/PageOne',
@@ -46,3 +47,15 @@ export const Default = {
         imageServer: 'http://localhost/uploads/'
     }
 };
+
+export const ExistingTournament = {
+    args: {
+        existingTournament: mockTournaments[0],
+        locations: mockLocation,
+
+        addNewText: "Add New Location",
+        uploadImageName: 'Storybook-test',
+        uploadServer: 'http://localhost/uploads/',
+        imageServer: 'http://localhost/uploads/'
+    }
+};

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.vue

@@ -46,7 +46,10 @@
         <div class="flex flex-col pb-4">
           <BaseText :color="'primaryHighlight'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
                     :weight="'normal'" class="mb-1" data-testid="text-primary-contact"/>
-          <FindPerson :addBorder="true" :persons="persons" addNewText="Add New Person"/>
+          <FindPerson :addBorder="true"
+                      :persons="persons" addNewText="Add New Person"
+                      @new-person-submitted="handleNewPerson"
+                      @person-selected="handleAddExistingPerson"/>
         </div>
         <div class="flex flex-col pb-4">
           <BaseText :color="'primaryHighlight'" :invalid="validation.visibility" :size="'sm'"
@@ -74,10 +77,12 @@ import BaseButton from "../../../../Molecules/Buttons/BaseButton/BaseButton.vue"
 import FindLocation from "../../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
 import FindPerson from "../../../../Organisms/ComplexInputs/FindPerson/FindPerson.vue";
 import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import FindOrAddPerson from "../../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
 
 export default {
   name: 'AddTournamentPageOne',
   components: {
+    FindOrAddPerson,
     TitledInput,
     FindPerson,
     FindLocation,
@@ -91,6 +96,10 @@ export default {
     BaseButton
   },
   props: {
+    existingTournament: {
+      type: Object,
+      required: false
+    },
     locations: Array,
     persons: Array,
     urlToImage: {
@@ -116,11 +125,15 @@ export default {
         name: '',
         imageLink: '',
         addressId: 0,
+        primaryContactId: 0,
+        clubId: 0,
         startDate: '',
         totalDays: 1,
+        hostedOnM2: true,
         description: '',
         visibility: '',
-        externalLinks: Array
+        externalLinks: Array,
+        tags: Array
       },
       validation: {
         name: false,
@@ -172,7 +185,15 @@ export default {
     handleNewImageUrl(url) {
       this.tournament.imageLink = url;
       this.$emit('update:image', url);
-    }
+    },
+    handleNewPerson(person) {
+      this.tournament.primaryContactId = person.PersonId;
+      this.$emit('add:primaryContact', person);
+    },
+    handleAddExistingPerson(person) {
+      this.tournament.primaryContactId = person.PersonId;
+      this.$emit('add:existingPrimaryContact', person);
+    },
   },
   computed: {
     areAnyFieldsAreLeftInvalid() {

package/src/stories/Templates/TournamentManagement/EditTournament/EditBasic/EditTournamentBasicInfo.vue

@@ -8,7 +8,7 @@
                   :weight="'normal'" class="mb-1 ml-1" data-testid="text-cover-image"/>
         <div class="w-full flex justify-center">
           <div class="w-3/4">
-            <ImageCropper :url="tournamentImage" :imageName="`t-${localTournament.TournamentId}`"  @update:url="handleUpdateUrl"/>
+            <ImageCropper :urlToImage="tournamentImage" :imageName="`${localTournament.TournamentId}`"  @update:url="handleUpdateUrl"/>
           </div>
         </div>
       </div>
@@ -31,6 +31,8 @@
         <TextBoxEditor :initialContent="localTournament.Description" :invalid="validation.description"
                        @update:editorContent="handleEditorUpdate"/>
       </div>
+
+      <section class="flex flex-col">
       <div class="flex flex-row justify-center mb-3">
         <div class="flex flex-col w-1/2 mr-1">
           <BaseText :color="'quinary'" :invalid="validation.startDate" :size="'sm'" :text="'Start Date'"
@@ -43,6 +45,22 @@
           <BaseInput :addBorder="true" :placeholder="totalDays" @update:value="handleTotalDays"/>
         </div>
       </div>
+      <div class="flex flex-col pb-4">
+        <BaseText :color="'primaryHighlight'" :invalid="false" :size="'sm'" :text="'Primary Contact'"
+                  :weight="'normal'" class="mb-1" data-testid="text-primary-contact"/>
+        <FindPerson :addBorder="true"
+                    :persons="persons" addNewText="Add New Person"
+                    @new-person-submitted="handleNewPerson"
+                    @person-selected="handleAddExistingPerson"/>
+      </div>
+        <div class="flex flex-col pb-4">
+          <BaseText :color="'primaryHighlight'" :invalid="validation.visibility" :size="'sm'"
+                    :text="'Tournament Visibility'" :weight="'normal'" class="mb-2" data-testid="text-visibility"/>
+          <BaseRadioGroup :invalid="validation.visibility" :items="visibilityItems"
+                          @update:value="value => tournament.visibility = value"/>
+        </div>
+      </section>
+
       <div class="flex flex-row justify-center my-10">
         <BaseButton class="w-1/2 ml-1" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
         <BaseButton class="w-1/2 mr-1 transition-all duration-300 ease-in-out" color="neutral" :label="saveButtonLabel" selected=selected size="sm" type="primary"
@@ -63,9 +81,13 @@ import TextBoxEditor from "../../../../Organisms/ComplexInputs/TextBoxEditor/Tex
 import FindLocation from "../../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
 import DatePicker from "../../../../Organisms/ComplexInputs/DatePicker/DatePicker.vue";
 import EditEventsTopMenu from "../../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import FindPerson from "../../../../Organisms/ComplexInputs/FindPerson/FindPerson.vue";
+import BaseRadioGroup from "../../../../Atoms/RadioGroup/BaseRadioGroup.vue";
 
 export default {
   components: {
+    BaseRadioGroup,
+    FindPerson,
     EditEventsTopMenu,
     DatePicker,
     FindLocation,
@@ -89,6 +111,18 @@ export default {
     saveButtonLabel: {
       type: String,
       default: 'Save'
+    },
+    uploadImageName: {
+      type: String,
+      default: 'default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: 'http://localhost/uploads/'
+    },
+    imageServer: {
+      type: String,
+      default: 'http://localhost/uploads/'
     }
   },
   emits: ['tab:menu-click', 'manageEvent', 'editEvent', 'addEvent', 'image:upload'],
@@ -109,7 +143,12 @@ export default {
         {id: 'Basic', label: 'Basic', color: 'primaryHighlight'},
         {id: 'Details', label: 'Details', color: 'primaryHighlight'},
         {id: 'Events', label: 'Events', color: 'primaryHighlight'},
-      ]
+      ],
+      visibilityItems: [
+        {label: 'Open', value: 'open', description: 'Viewable To Everyone'},
+        {label: 'Club', value: 'club', description: 'Viewable Only to Members of Your Club'},
+        {label: 'Private', value: 'private', description: 'Only Viewable by you'},
+      ],
     }
   },
   computed: {

package/tailwind.config.js

@@ -83,6 +83,7 @@ module.exports = {
                 eventBoxRed: '#f7efef',
                 poolSetup: '#F6FAFD',
                 poolBox: '#f7f8fb',
+                loadingModalBG: '#fcfcfc',
                 pink: '#D88DB7',
                 red: '#C74444',
                 blue: '#375085',