@dcrackel/hematournamentui 1.0.282 → 1.0.285

package/src/stories/Organisms/Cards/PoolFencerCard/PoolFencerCard.stories.js

@@ -10,12 +10,14 @@ export default {
         portrait: 'https://randomuser.me/api/portraits/men/31.jpg',
         name: 'John Doe',
         club: 'Test Club',
+        background: 'bg-poolSetup'
     },
     argTypes: {
         position: { control: 'number' },
         portrait: { control: 'text' },
         name: { control: 'text' },
         club: { control: 'text' },
+        background: { control: 'text' },
     },
 };
 

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

@@ -1,17 +1,18 @@
 <template>
   <div
-      class="flex items-center p-2 bg-poolSetup shadow rounded-lg"
-      :class="mode === 'preparation' || mode === 'planning' ? 'hover:bg-dropdownSelect' : ''"
+      class="flex items-center p-2 shadow rounded-lg"
+      :class="mode === 'preparation' || mode === 'planning' ? `hover:bg-dropdownSelect ${background}` : `${background} `"
       :draggable="mode === 'preparation' || mode === 'planning'"
       @dragstart="onDragStart"
       @dragover.prevent
       @dragenter.prevent
       @drop="onDrop"
+      @click="handleClick"
   >
-    <div class="text-center mr-2">
-      <BaseText :text="poolPosition" size="md" />
+    <div v-if="mode !== 'person'" class="text-center mr-2 w-4">
+      <BaseText :text="poolPosition" size="md" color="quaternary"/>
     </div>
-    <div class="w-8 h-8 rounded-md overflow-hidden">
+    <div class="w-9 h-9 rounded-md overflow-hidden">
       <div v-if="!portrait" class="w-14 h-14 bg-dropdownSelect flex items-center justify-center">
         <BaseText text="" size="sm" color="neutral" weight="bold" />
       </div>
@@ -19,7 +20,7 @@
     </div>
     <div class="flex-1 ml-4">
       <p class="flex">
-        <BaseText :text="name" size="md" weight="bold" color="quaternary" />
+        <BaseText :text="name" size="sm" weight="bold" color="quaternary" />
         <BaseText v-if="seed !== poolPosition" :text="`${seed}`" size="xs" class="ml-1" color="bright" />
       </p>
       <BaseText :text="club" size="xs" color="quinary" />
@@ -43,15 +44,29 @@ export default {
       type: Number,
       required: true
     },
-    name: String,
-    club: String,
-    seed: Number,
-    portrait: String,
+    name: {
+      type: String,
+      required: true
+    },
+    club: {
+      type: String,
+    },
+    seed: {
+      type: Number,
+      required: true
+    },
+    portrait: {
+      type: String,
+    },
     mode: {
       type: String,
       required: true,
-      validator: value => ['planning','preparation','live','results','de','completed'].includes(value)
+      validator: value => ['planning','preparation','live','results','de','completed','person'].includes(value)
     },
+    background: {
+      type: String,
+      default: 'bg-poolSetup'
+    }
   },
   methods: {
     onDragStart(event) {
@@ -70,13 +85,11 @@ export default {
       if (this.mode === 'preparation' || this.mode === 'planning') {
         const droppedData = JSON.parse(event.dataTransfer.getData('text/plain'));
         droppedData.toPosition = this.poolPosition;
-
-        console.log(`------ onDrop:`);
-        console.log(droppedData)
-        console.log('======== TO POSITION')
-        console.log( this.poolPosition)
         this.$emit('swap-fencers', {droppedData});
       }
+    },
+    handleClick() {
+      this.$emit('update:click')
     }
   }
 }

package/src/stories/Organisms/ComplexInputs/DatePicker/DatePicker.vue

@@ -76,6 +76,24 @@ export default {
 </script>
 
 <style scoped>
+.dp__action_select:hover {
+  background: var(--dp-primary-color);
+  transition: var(--dp-action-row-transtion);
+}
+
+.dp__action_select {
+  background: var(--dp-primary-color);
+  color: var(--dp-primary-text-color);
+}
+
+.dp__action_button {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0);
+  margin-inline-start: 3px;
+  cursor: pointer;
+}
+
 :deep(.dp__pointer.dp__input_readonly.dp__input.dp__input_icon_pad.dp__input_reg) {
   color: rgb(178, 177, 183);
   font-size: 14px;

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

@@ -2,7 +2,7 @@
   <div class="flex flex-row w-full relative" :class="[alignEnd ? 'justify-end' : '']">
     <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect bg-white" :class="width" @click="handleDropDown()">
       <BaseText v-if="label.length > 1" :text="label" color="quinary" size="sm" weight="normal" />
-      <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
+      <BaseText :text="selectedItem.text" color="quaternary" size="sm" weight="normal" />
       <i class="fa-solid fa-chevron-down text-xs text-quinary" />
     </div>
     <transition name="fade-in-down">

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

@@ -50,6 +50,16 @@ export default {
     imageServer: {
       type: String,
       default: 'http://localhost:3000/uploads/'
+    },
+    cropperOptions: {
+      type: Object,
+      default: () => ({
+        aspectRatio: 8 / 4,
+        autoCropArea: 1,
+        viewMode: 1,
+        movable: true,
+        zoomable: true
+      })
     }
   },
   components: {
@@ -58,14 +68,7 @@ export default {
   data() {
     return {
       localUrl: this.urlToImage ? this.urlToImage : SelectAnImage,
-      showCropper: false,
-      cropperOptions: {
-        aspectRatio: 8 / 4,
-        autoCropArea: 1,
-        viewMode: 1,
-        movable: true,
-        zoomable: true
-      }
+      showCropper: false
     };
   },
   computed: {
@@ -83,6 +86,7 @@ export default {
     handleUploaded(response) {
       if (response.response.status === 200) {
         this.localUrl = `${this.imageServer}${this.uploadImageName}.png`;
+        console.log(this.localUrl);
         this.$emit('update:url', `${this.imageServer}${this.uploadImageName}.png`);
       }
     },

package/src/stories/Organisms/Containers/PeopleColumn/PeopleColumn.stories.js

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

package/src/stories/Organisms/Containers/PeopleColumn/PeopleColumn.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="w-96 p-4 overflow-y-auto ">
+    <div class="mb-4 px-4">
+      <TitledInput :inputValue="searchTerm"
+                   placeholder="Enter Display Name"
+                   title="Display Name"
+                   @update:value="updateDisplayName"/>
+    </div>
+    <div class="overflow-y-auto h-full">
+      <ul>
+        <li v-for="person in filteredPersons" :key="person.id" class="py-2 px-4 rounded-lg cursor-pointer">
+          <PoolFencerCard
+              :name="person.DisplayName"
+              :club="person.Club.Name"
+              mode="person"
+              :seed=0
+              :poolPosition=0
+              :position=0
+              class="border border-poolSetup hover:border-bright"
+              @update:click="handleFencerSelect(person)"
+          />
+        </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";
+
+export default {
+  name: 'PeopleColumn',
+  components: {
+    PoolFencerCard,
+    BaseText,
+    BaseInput,
+    TitledInput
+  },
+  props: {
+    persons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      searchTerm: ''
+    };
+  },
+  computed: {
+    filteredPersons() {
+      return this.persons
+          .filter(person => {
+            const displayName = person.displayName || ''; // Default to empty string if undefined
+            return displayName.toLowerCase().includes(this.searchTerm.toLowerCase());
+          })
+          .sort((a, b) => {
+            const nameA = (a.displayName || '').toLowerCase();
+            const nameB = (b.displayName || '').toLowerCase();
+            return nameA.localeCompare(nameB);
+          });
+    }
+  },
+  methods: {
+    updateDisplayName(value) {
+      this.searchTerm = value;
+    },
+    handleFencerSelect(value)
+    {
+      this.$emit('update:selectedFencer', value);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ScoreBoardParts/ScoreBar/ScoreBar.vue

@@ -6,7 +6,7 @@
     <ScoreBoardTimer v-if="!bout.MaxPasses"
         :initialTime="bout.TimeLeft"
         :timerStatus="bout.TimerStatus"
-        :ringName="bout.RingName"
+        :ringName="bout.Pool.RingName"
         :directorName="bout.RefName"
     />
     <ScoreBoardPasses v-if="bout.MaxPasses"

package/src/stories/Templates/PersonManagement/PersonManagement.stories.js

@@ -0,0 +1,48 @@
+import PersonManagement from './PersonManagement.vue';
+import clubGetAllMock from "../../../mocks/clubGetAllMock.js";
+import personsMock from "../../../mocks/personsMock.js";
+
+export default {
+    title: 'Templates/PersonManagement/PersonManagement',
+    component: PersonManagement,
+    tags: ['autodocs'],
+    args: {
+        profilePicUrl: null,
+        uploadImageName: 'storybook-profile-pic',
+        uploadServer: 'https://meyersquared.com/uploads/',
+        imageServer: 'https://meyersquared.com/uploads/',
+        fencingClubs: clubGetAllMock,
+        people: personsMock,
+        userLevel: 'user'
+    },
+    argTypes: {
+        uploadImageName: { control: { type: 'text' } },
+        uploadServer: { control: { type: 'text' } },
+        imageServer: { control: { type: 'text' } },
+        fencingClubs: { control: { type: 'object' } },
+        people: { control: { type: 'array'} },
+        userLevel: { control: { type: 'string'} }
+    }
+};
+
+export const Default = {
+    args: {
+        uploadServer: 'https://meyersquared.com/uploads/',
+        imageServer: 'https://meyersquared.com/uploads/',
+        personProfile: personsMock[0],
+        fencingClubs: clubGetAllMock,
+        people: personsMock,
+        userLevel: 'user'
+    }
+};
+
+export const admin = {
+    args: {
+        uploadServer: 'https://meyersquared.com/uploads/',
+        imageServer: 'https://meyersquared.com/uploads/',
+        personProfile: personsMock[0],
+        fencingClubs: clubGetAllMock,
+        people: personsMock,
+        userLevel: 'admin'
+    }
+};

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

@@ -0,0 +1,230 @@
+<template>
+  <section class="flex drop-shadow">
+  <div v-if="userLevel === 'admin'">
+    <PeopleColumn :persons="people" @update:selectedFencer="handlePersonClick"/>
+  </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="'Manage Your Profile'" :weight="'normal'"/>
+    </div>
+    <div class="w-full flex-row justify-center mb-4 flex drop-shadow">
+      <ImageCropper :urlToImage="getImageURL"
+                    :uploadImageName="uploadImageName"
+                    :uploadServer="uploadServer"
+                    :imageServer="imageServer"
+                    :cropperOptions="{
+                      aspectRatio: 4 / 4,
+                      autoCropArea: 1,
+                      viewMode: 1,
+                      movable: true,
+                      zoomable: true
+                    }"
+                    @update:url="handleProfilePicUpdate"/>
+    </div>
+    <div class="flex flex-col mb-4">
+      <TitledInput :inputValue="person.DisplayName"
+                   placeholder="Enter Display Name"
+                   title="Display Name"
+                   @update:value="updateDisplayName"/>
+    </div>
+    <div class="flex flex-col mb-4">
+      <TitledInput :inputValue="getLegalName"
+                   placeholder="Enter Your Legal Name"
+                   title="Legal Name (not shown on site)"
+                   @update:value="updateLegalName"/>
+    </div>
+    <div class="flex flex-col mb-4">
+      <BaseText text="Club Name" size="sm" color="quaternary"/>
+      <DropDownMenu :label="formattedClubs.length < 2 ? 'Select Club' : ''"
+                    :items="formattedClubs"
+                    :selectedItem="getClubName"
+                    class="pb-2"
+                    @update:selectedItem="handleSelectedClub"
+                    width="w-full"
+                    dropDownWidth="w-full"/>
+
+    </div>
+    <div class="flex flex-col mb-4">
+      <BaseText text="Preferred Pronouns" size="sm" color="quaternary"/>
+      <DropDownMenu :label="getSelectedPronouns.text.length < 2 ? 'Please select your preferred pronouns' : ''"
+                    :items="pronouns" class="pb-2"
+                    :selectedItem="getSelectedPronouns"
+                    @update:selectedItem="handleSelectedPronouns"
+                    width="w-full"
+                    dropDownWidth="w-full"
+      />
+
+    </div>
+    <div class="flex flex-col mb-4">
+      <TitledInput :inputValue="getEmail ? getEmail : ''"
+                   placeholder="Enter Your Email"
+                   title="Email"
+                   @update:value="handleEmailUpdate"/>
+    </div>
+
+    <div class="border-b border-dropdownSelect mt-6">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'PROFILE USE'"
+                :weight="'normal'" data-testid="text-registration"/>
+    </div>
+    <div class="my-4 w-full">
+      <BaseText :color="'quinary'" :size="'sm'"
+                :text="'Your Information belongs to you, it will only be shown or shared if you want it to. If you turn off Meyer Squarded you information will not be shown on the public facing web site but it still be shown locally during events.'"
+                :weight="'normal'" data-testid="text-registration" class="mb-4"/>
+      <Toggle :checked="person.ShowData" label="Allow your name and profile image to be displayed on Meyer Squared?"
+              :labelLeft="false" @update:checked="changeShowData"/>
+      <Toggle :checked="true" label="Share information with 3rd Parties? (like: Hema Ratings)" :labelLeft="false"
+              @update:checked="changeShareData"/>
+    </div>
+
+    <div v-if="person">
+
+    </div>
+
+    <div class="flex flex-row justify-end mt-8">
+      <BaseButton class="w-full" color="neutral" label="Save" size="sm" type="secondary" @click="handleSubmit"/>
+    </div>
+  </div>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../stories/Atoms/Text/BaseText.vue";
+import ImageCropper from "../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
+import TitledInput from "../../../stories/Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import DropDown from "../../../stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseRadioGroup from "../../../stories/Atoms/RadioGroup/BaseRadioGroup.vue";
+import BaseButton from "../../../stories/Molecules/Buttons/BaseButton/BaseButton.vue";
+import DropDownMenu from "../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseInput from "../../Atoms/Input/BaseInput.vue";
+import FindOrAddPerson from "../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
+import Toggle from "../../Molecules/Inputs/Toggle/Toggle.vue";
+import PeopleColumn from "../../Organisms/Containers/PeopleColumn/PeopleColumn.vue";
+
+export default {
+  name: 'PersonManagement',
+  components: {
+    PeopleColumn,
+    FindOrAddPerson,
+    BaseInput,
+    DropDownMenu,
+    BaseText,
+    ImageCropper,
+    TitledInput,
+    DropDown,
+    BaseRadioGroup,
+    BaseButton,
+    Toggle
+  },
+  props: {
+    personProfile: {
+      type: Object
+    },
+    uploadImageName: {
+      type: String,
+      default: 'profile-pic'
+    },
+    uploadServer: {
+      type: String,
+      default: 'http://localhost:3000/uploads/'
+    },
+    imageServer: {
+      type: String,
+      default: 'http://localhost:3000/uploads/'
+    },
+    fencingClubs: {
+      type: Array,
+      default: () => []
+    },
+    people: {
+      type: Array,
+      default: () => []
+    },
+    userLevel: {
+      type: String,
+      default: 'user'
+    }
+  },
+  data() {
+    return {
+      person: {...this.personProfile},
+      pronouns: [
+        {text: 'He/Him', link: 'he-him'},
+        {text: 'She/Her', link: 'she-her'},
+        {text: 'They/Them', link: 'they-them'},
+        {text: 'Ze/Hir', link: 'ze-hir'},
+        {text: 'Xe/Xem', link: 'xe-xem'}
+      ]
+    }
+  },
+  computed: {
+    formattedClubs() {
+      const mappedClubs = this.fencingClubs.map(club => ({
+        text: club.Name,
+        link: club.ClubId.toString()
+      }));
+      return mappedClubs;
+    },
+    getLegalName() {
+      return this.person.FirstName + ' ' + this.person.LastName;
+    },
+    getImageURL() {
+      return this.person.ProfileImage.URL;
+    },
+    getClubName() {
+      return {text: this.person.Club.Name, link: this.person.Club.ClubId};
+    },
+    getSelectedPronouns() {
+      return {text: this.person.Pronouns, link: this.person.Pronouns};
+    },
+    getEmail() {
+      return this.person.PersonEmails.find(e => e.IsPrimary === true).EmailAddress || '';
+    }
+  },
+  methods: {
+    handleProfilePicUpdate(url) {
+      this.person.ProfileImage.URL = url;
+    },
+    updateDisplayName(value) {
+      this.person.DisplayName = value;
+    },
+    updateLegalName(fullName) {
+      const nameParts = fullName.trim().split(" ");
+
+      if (nameParts.length > 1) {
+        this.person.FirstName = nameParts[0];
+        this.person.LastName = nameParts.slice(1).join(" ");
+      }
+
+      if (nameParts.length === 0) {
+        this.person.FirstName = nameParts[0];
+        this.person.LastName = '';
+      }
+    },
+    handleSubmit() {
+      this.$emit('submit:person', this.person);
+    },
+    handleSelectedClub(value) {
+      this.person.Club.Name = value.text;
+      this.person.Club.ClubId = value.link;
+    },
+    handleSelectedPronouns(value) {
+      this.person.Pronouns = value.text;
+    },
+    changeShowData() {
+      this.person.ShowData = !this.person.ShowData;
+    },
+    changeShareData() {
+      this.person.ShareData = !this.person.ShareData;
+    },
+    handleEmailUpdate(value) {
+      let email = this.person.PersonEmails.find(e => e.IsPrimary === true)
+      email.EmailAddress = value;
+    },
+    handlePersonClick(value){
+      console.log(value);
+      this.$emit('update:selectedFencer', value);
+    }
+
+  }
+}
+</script>

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

@@ -192,6 +192,7 @@ export default {
     },
     handleNewImageUrl(url) {
       this.tournament.imageLink = url;
+      console.log(this.tournament.imageLink)
       this.$emit('update:image', url);
     },
     handleNewPerson(person) {