@dcrackel/hematournamentui 1.0.66 → 1.0.69

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white hover:border-bright">
-    <div class="mr-4 border-r h-20 w-8 items-center text-center">
+    <div class="mr-4 border-r border-dropdownSelect h-20 w-8 items-center text-center">
       <BaseText :text="person.Seed" size="lg" color="quaternary" weight="bold" class="pt-6" />
     </div>
     <div class="mr-4">

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

@@ -1,19 +1,17 @@
 <template>
-  <div class="flex flex-row">
-    <span>
-      <div class="z-10 rounded-lg shadow px-2 py-2 w-40 flex flex-row justify-between border border-dropdownSelect" @click="handleDropDown()">
-        <BaseText :text="label" color="quaternary" size="sm" weight="normal" />
-        <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
-        <i class="fa-solid fa-chevron-down text-xs" />
+  <div class="flex flex-row w-full justify-end relative">
+    <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect" :class="width" @click="handleDropDown()">
+      <BaseText v-if="label.length > 1" :text="label" color="quaternary" size="sm" weight="normal" />
+      <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
+      <i class="fa-solid fa-chevron-down text-xs" />
+    </div>
+    <transition name="fade-in-down">
+      <div v-if="isDropDownOpen" class="flex flex-col shadow-lg mt-9 z-10 rounded-b-xl absolute bg-neutral border border-dropdownSelect" :class="dropDownWidth">
+        <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
+          <BaseText :text="item.text" color="primary" size="sm" weight="normal" class="py-0.5" />
+        </a>
       </div>
-      <transition name="fade-in-down">
-        <div v-if="isDropDownOpen" class="flex flex-col w-40 shadow-lg -mt-1 z-10 rounded-b-xl absolute bg-neutral border border-dropdownSelect">
-          <a v-for="item in items" :key="item.id" @click="handleClick(item)" class="hover:bg-dropdownSelect py-1 px-2 border-b border-l border-r border-dropdownSelect">
-            <BaseText :text="item.text" color="primary" size="sm" weight="normal" class="py-0.5" />
-          </a>
-        </div>
-      </transition>
-    </span>
+    </transition>
   </div>
 </template>
 
@@ -35,6 +33,16 @@ export default {
       type: Object,
       default: () => ({ text: '' }),
       validator: (obj) => typeof obj.text === 'string'
+    },
+    width: {
+      type: String,
+      default: 'w-44',
+      required: false
+    },
+    dropDownWidth: {
+      type: String,
+      default: 'w-44',
+      required: false
     }
   },
   data: () => ({

package/src/stories/Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.stories.js

@@ -0,0 +1,27 @@
+import FindOrAddPerson from './FindOrAddPerson.vue';
+import mockPersons from '../../../../mocks/personGetAllMock.js';
+import clubGetAllMock  from "../../../../mocks/clubGetAllMock.js";
+
+export default {
+    title: 'Organisms/ComplexInputs/FindOrAddPerson',
+    component: FindOrAddPerson,
+    tags: ['autodocs'],
+    args: {
+        persons: mockPersons,
+        addBorder: true,
+    },
+    argTypes: {
+        persons: { control: 'array' },
+        addBorder: { control: 'boolean' },
+        clubs: { control: 'array'}
+    },
+};
+
+
+export const Default = {
+    args: {
+        addBorder:true,
+        persons: mockPersons,
+        clubs:  clubGetAllMock
+    }
+};

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

@@ -0,0 +1,174 @@
+<template>
+  <section>
+    <base-button type="primary" label="Add Fencer" size="sm" iconName="fa-user-plus" @click="openSearchModal" />
+
+    <BaseModal :show="showModal" :iconName="modalIcon" :buttonText="modalButtonText" @submit-modal="handleSubmit" @update:show="closeModal">
+      <template #modal-content>
+        <div v-if="isSearchMode">
+          <BaseInput
+              :addBorder="true"
+              :value="inputValue"
+              @input="updateInput"
+              placeholder="Type to search person..."
+          />
+          <div v-if="showDropdown" class="absolute z-10 w-11/12 bg-eventBoxBlue rounded-md" :class="[filteredPersons.length > 0 ? 'border border-dropdownSelect mt-2 p-2' : 'mt-4']">
+            <ul>
+              <li v-for="(person, index) in filteredPersons" :key="index" @click="selectPerson(person)" class="p-2 my-2 hover:bg-dropdownSelect rounded-lg cursor-pointer">
+                <p class="grid grid-cols-2 w-full">
+                  <BaseText :text="person.DisplayName" size="md" />
+                  <BaseText :text="person.Club.ShortName" size="md" class="ml-4" />
+                </p>
+              </li>
+            </ul>
+            <div @click="addNewPerson" class="hover:bg-gray-100 cursor-pointer">
+              <BaseButton type="secondary" label="Add New Person" iconName="fa-user-plus" />
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <BaseText class="pb-2" text="Enter Primary Contacts Information" />
+          <BaseInput :addBorder="true" :invalid="false" :value="personName" class="pb-2" placeholder="Display Name" type="formInput" @update:value="value => personName = value" />
+          <BaseInput :addBorder="true" :invalid="false" :value="personLegalName" class="pb-2" placeholder="Legal Name" type="formInput" @update:value="value => personLegalName = value" />
+          <DropDownMenu :label="selectedPronouns.length < 2 ? 'Preferred Pronouns' : ''" :items="pronouns"  class="pb-2" :selectedItem="selectedPronouns" @update:selectedItem="handleSelectedPronouns" width="w-full" dropDownWidth="w-[342px]"/>
+          <BaseInput :addBorder="true" :invalid="false" :value="personEmail" class="pb-2" placeholder="Email" type="formInput" @update:value="value => personEmail = value" />
+          <DropDownMenu :label="selectedClub.length < 2 ? 'Select Club' : ''" :items="formattedClubs" :selectedItem="selectedClub"  class="pb-2" @update:selectedItem="handleSelectedClub" width="w-full" dropDownWidth="w-[342px]"/>
+        </div>
+      </template>
+    </BaseModal>
+  </section>
+</template>
+
+<script>
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
+import DropDownMenu from "../DropDown/DropDownMenu.vue";
+
+export default {
+  name: 'FindOrAddPerson',
+  components: {DropDownMenu, BaseModal, BaseText, BaseButton, BaseInput },
+  props: {
+    persons: {
+      type: Array,
+      required: true
+    },
+    clubs: {
+      type: Array,
+      required: true
+    },
+    addBorder: {
+      type: Boolean,
+      default: false
+    },
+    addNewText: {
+      type: String,
+      default: 'Add New'
+    }
+  },
+  data() {
+    return {
+      personEmail: '',
+      personName: '',
+      personLegalName: '',
+      personPronouns: '',
+      showModal: false,
+      isSearchMode: true,
+      filteredPersons: [],
+      inputValue: '',
+      showDropdown: false,
+      debouncedTimeout: null,
+      modalIcon: 'fa-search',
+      modalButtonText: 'Find Person',
+      selectedPronouns: '',
+      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'}
+      ],
+      selectedClub: '',
+      formattedClubs: []
+    };
+  },
+  created() {
+    this.formattedClubs = this.mapClubData(this.clubs);
+  },
+  watch: {
+    inputValue(newValue) {
+      if (newValue.length < 2) {
+        this.showDropdown = false;
+        this.filteredPersons = [];
+      }
+
+      if (newValue.length >= 2) {
+        this.debounceSearch();
+      }
+    }
+  },
+  methods: {
+    updateInput(event) {
+      this.inputValue = event.target.value;
+    },
+    selectPerson(person) {
+      console.log(person)
+      this.showDropdown = false;
+      this.inputValue = '';
+      this.$emit('person-selected', person);
+      this.showModal = false;
+    },
+    addNewPerson() {
+      this.isSearchMode = false;
+      this.modalIcon = 'fa-user';
+      this.modalButtonText = 'Add Person';
+    },
+    openSearchModal() {
+      this.showModal = true;
+      this.isSearchMode = true;
+      this.modalIcon = 'fa-search';
+      this.modalButtonText = 'Find Person';
+    },
+    onInputChanged(value) {
+      if (!this.showDropdown) return;
+      this.filteredPersons = this.persons.filter(person => person.DisplayName.toLowerCase().includes(value.toLowerCase()));
+    },
+    debounceSearch() {
+      clearTimeout(this.debouncedTimeout);
+      this.debouncedTimeout = setTimeout(() => {
+        this.showDropdown = true;
+        this.onInputChanged(this.inputValue);
+      }, 300);
+    },
+    closeModal(value) {
+      this.showModal = value;
+      this.inputValue = "";
+    },
+    handleSubmit() {
+      const newPerson = {
+        personName: this.personName,
+        personLegalName: this.personLegalName,
+        personEmail: this.personEmail,
+        personPronouns: this.selectedPronouns.text,
+        clubId: this.selectedClub.link
+      };
+      this.$emit('new-person-submitted', newPerson);
+      console.log(newPerson)
+      this.showModal = false;
+    },
+    mapClubData(clubs) {
+      return clubs.map(club => ({
+        text: club.Name,
+        link: club.ClubId.toString()
+      }));
+    },
+    handleSelectedClub(value){
+      this.selectedClub = value;
+    },
+    handleSelectedPronouns(value) {
+      this.selectedPronouns = value;
+    }
+
+  }
+};
+</script>

package/src/stories/Organisms/ComplexInputs/FindPerson/FindPerson.stories.js

@@ -1,5 +1,6 @@
 import FindPerson from './FindPerson.vue';
-import mockPersons from '../../../../mocks/personsMock.js';
+import mockPersons from '../../../../mocks/personGetAllMock.js';
+
 export default {
     title: 'Organisms/ComplexInputs/FindPerson',
     component: FindPerson,
@@ -24,6 +25,7 @@ export default {
 
 export const Default = {
     args: {
+        addBorder:true,
         locations: mockPersons,
         addNewText: "Add New Location"
     }

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

@@ -10,7 +10,7 @@
       <div v-if="showDropdown" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1">
         <ul>
           <li v-for="(person, index) in filteredPersons" :key="index" @click="selectPerson(person)" class="p-2 hover:bg-gray-100 cursor-pointer">
-            {{ person.DisplayName }}
+            <p class="grid grid-cols-2 w-1/2 "><BaseText :text="person.DisplayName" size="md" /><BaseText :text="person.Club.Name" size="md" class="ml-4" /></p>
           </li>
         </ul>
         <div @click="addNewPerson" class="p-2 hover:bg-gray-100 cursor-pointer">

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.stories.js

@@ -1,5 +1,6 @@
 import EditEvents from './EventAttendance.vue';
 import personsMock from '../../../../mocks/personsMock.js';
+import personsAllMock from '../../../../mocks/personGetAllMock.js';
 import eventMock from '../../../../mocks/eventMock.js';
 
 export default {
@@ -7,14 +8,17 @@ export default {
     component: EditEvents,
     tags: ['autodocs'],
     args: {
-        persons: personsMock,
+        personsInTournament: personsMock,
+        personsAll: personsAllMock,
+        event: eventMock[0]
     },
     argTypes: {}
 };
 
 export const Default = {
     args: {
-        persons: personsMock,
+        personsInTournament: personsMock,
+        personsAll: personsAllMock,
         event: eventMock[0]
     }
 };
@@ -22,7 +26,8 @@ export const Default = {
 
 export const NoPeople = {
     args: {
-        persons: [],
+        personsInTournament: [],
+        personsAll: personsAllMock,
         event: eventMock[0]
     }
 };

package/src/stories/Templates/EventManagement/EventAttendance/EventAttendance.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="mx-4 p-4 border border-dropdownSelect rounded-2xl">
+  <section>
 
     <EditEventsTopMenu :currentTab="'Checkin'" :tabs="tabs"/>
     <PoolSummary :event="event"/>
@@ -7,13 +7,17 @@
     <div class="w-full flex flex-row justify-center mt-3">
       <section class="w-full">
         <div class="w-full flex flex-col justify-center items-center" style="text-align: center">
-          <section class="flex justify-between w-full mb-3">
-            <BaseButton label="Add Fencer" size="sm" icon-name="fa-plus" icon-style="fa-solid" type="primary"/>
-            <DropDownMenu :label="label" :items="items" :selectedItem="localSelectedItem"
+          <section class="grid grid-cols-2 w-full mb-3">
+            <div class="col-start-1 col-end-2 flex justify-start">
+              <FindOrAddPerson :clubs="clubs" :persons="personsAll" @new-person-submitted="handleNewPerson" />
+            </div>
+            <div class="col-start-2 col-end-3 flex justify-end">
+              <DropDownMenu :label="label" :items="items" :selectedItem="localSelectedItem"
                           @update:selectedItem="handleSelectedItem"/>
+            </div>
           </section>
 
-          <div v-if="persons.length === 0" class="mb-10">
+          <div v-if="personsInTournament.length === 0" class="mb-10">
             <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"/>
@@ -41,9 +45,11 @@ import FencerCard from "../../../Organisms/Cards/FencerCard/FencerCard.vue";
 import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
 import PoolSummary from "../../../Organisms/Containers/PoolSummary/PoolSummary.vue";
 import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+import FindOrAddPerson from "../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
 
 export default {
   components: {
+    FindOrAddPerson,
     DropDownMenu,
     PoolSummary,
     EditEventsTopMenu,
@@ -54,8 +60,16 @@ export default {
     BaseButton,
   },
   props: {
-    persons: Array,
-    event: Object
+    personsAll: Array,
+    event: Object,
+    clubs: {
+      type: Array,
+      default: () => []
+    },
+    personsInTournament: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
@@ -81,7 +95,7 @@ export default {
   computed: {
     sortedPersons() {
       const sortKey = this.localSelectedItem.link;
-      return this.persons.slice().sort((a, b) => {
+      return this.personsInTournament.slice().sort((a, b) => {
         switch (sortKey) {
           case 'FullName':
             const nameA = `${a.Person.FirstName} ${a.Person.LastName}`.toUpperCase();
@@ -109,7 +123,12 @@ export default {
       this.localSelectedItem = selectedItem;
     },
     handleStatus(person) {
+      person.Status = person.Status === 'Absent' ? 'Present' : 'Absent';
       this.$emit('update:person', person);
+    },
+    handleNewPerson(value)
+    {
+      this.$emit('add:person', value);
     }
   }
 }