@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/Form/AddDisplay/AddDisplay.vue

@@ -2,14 +2,20 @@
   <div class="p-4 bg-neutral">
     <!-- Icon and Header -->
     <div class="w-full flex flex-row justify-center mb-8">
-      <p :class="['bg-' + iconBackgroundColor, 'flex flex-row justify-center h-20 w-20 rounded-full', 'border border-' + iconBorderColor]">
+      <p
+        :class="[
+          'bg-' + iconBackgroundColor,
+          'flex flex-row justify-center h-20 w-20 rounded-full',
+          'border border-' + iconBorderColor
+        ]"
+      >
         <BaseIcon
-            :icon-name="selectedDisplayType.text === 'ScoreBoard' ? 'fa-screencast' : 'fa-screen-users'"
-            iconStyle="fa-solid"
-            size="4xl"
-            :color="iconColor"
-            class="mb-3 mt-5"
-            data-testid="base-icon"
+          :icon-name="selectedDisplayType.text === 'ScoreBoard' ? 'fa-screencast' : 'fa-screen-users'"
+          iconStyle="fa-solid"
+          size="4xl"
+          :color="iconColor"
+          class="mb-3 mt-5"
+          data-testid="base-icon"
         />
       </p>
     </div>
@@ -22,61 +28,89 @@
     <div class="mb-4">
       <BaseText color="quinary" size="sm" text="Display Type" :invalid="validation.Type" weight="normal" class="mb-1" />
       <DropDownMenu
-          label=""
-          :items="displayTypes"
-          :selected-item="selectedDisplayType"
-          :alignEnd="false"
-          width="w-full"
-          @update:selectedItem="handleDisplayTypeChange"
+        label=""
+        :items="displayTypes"
+        :selected-item="selectedDisplayType"
+        :alignEnd="false"
+        width="w-full"
+        @update:selectedItem="handleDisplayTypeChange"
       />
     </div>
 
     <!-- Display Name / FlightBoard Name Input -->
     <div class="h-32">
       <div v-if="selectedDisplayType.text === 'ScoreBoard'" class="mb-4">
-        <BaseText color="quinary" size="sm" text="Ring Name" :invalid="validation.DisplayName" weight="normal" class="mb-1" />
+        <BaseText
+          color="quinary"
+          size="sm"
+          text="Ring Name"
+          :invalid="validation.DisplayName"
+          weight="normal"
+          class="mb-1"
+        />
         <DropDownMenu
-            label=""
-            :items="ringNames"
-            :selected-item="selectedDisplayName"
-            :alignEnd="false"
-            width="w-full"
-            @update:selectedItem="handleDisplayNameChange"
+          label=""
+          :items="ringNames"
+          :selected-item="selectedDisplayName"
+          :alignEnd="false"
+          width="w-full"
+          @update:selectedItem="handleDisplayNameChange"
         />
       </div>
       <div v-if="selectedDisplayType.text === 'FlightBoard'" class="mb-4">
-        <BaseText color="quinary" size="sm" text="Flightboard Name" :invalid="validation.DisplayName" weight="normal" class="mb-1" />
+        <BaseText
+          color="quinary"
+          size="sm"
+          text="Flightboard Name"
+          :invalid="validation.DisplayName"
+          weight="normal"
+          class="mb-1"
+        />
         <DropDownMenu
-            label=""
-            :items="flightBoardNames"
-            :selected-item="selectedFlightBoardName"
-            :alignEnd="false"
-            width="w-full"
-            @update:selectedItem="handleDisplayNameChange"
+          label=""
+          :items="flightBoardNames"
+          :selected-item="selectedFlightBoardName"
+          :alignEnd="false"
+          width="w-full"
+          @update:selectedItem="handleDisplayNameChange"
         />
       </div>
 
       <!-- Assignment -->
       <div v-if="selectedDisplayType.text === 'ScoreBoard'" class="mb-4">
-        <BaseText color="quinary" size="sm" text="Assigned To" :invalid="validation.AssignedTo" weight="normal" class="mb-1" />
+        <BaseText
+          color="quinary"
+          size="sm"
+          text="Assigned To"
+          :invalid="validation.AssignedTo"
+          weight="normal"
+          class="mb-1"
+        />
         <DropDownMenu
-            label=""
-            :items="staff"
-            :selected-item="selectedStaff"
-            :alignEnd="false"
-            width="w-full"
-            @update:selectedItem="handleStaffAssignment"
+          label=""
+          :items="staff"
+          :selected-item="selectedStaff"
+          :alignEnd="false"
+          width="w-full"
+          @update:selectedItem="handleStaffAssignment"
         />
       </div>
       <div v-else-if="selectedDisplayType.text === 'FlightBoard'" class="mb-4">
-        <BaseText color="quinary" size="sm" text="Event To Track" :invalid="validation.AssignedTo" weight="normal" class="mb-1" />
+        <BaseText
+          color="quinary"
+          size="sm"
+          text="Event To Track"
+          :invalid="validation.AssignedTo"
+          weight="normal"
+          class="mb-1"
+        />
         <DropDownMenu
-            label=""
-            :items="events"
-            :selected-item="selectedEvent"
-            :alignEnd="false"
-            width="w-full"
-            @update:selectedItem="handleEventAssignment"
+          label=""
+          :items="events"
+          :selected-item="selectedEvent"
+          :alignEnd="false"
+          width="w-full"
+          @update:selectedItem="handleEventAssignment"
         />
       </div>
     </div>
@@ -84,20 +118,66 @@
     <!-- Submit and Cancel Buttons -->
     <div class="flex flex-row justify-center mt-10">
       <div class="w-1/2 ml-1">
-        <BaseButton class="w-full" color="neutral" label="Cancel" size="sm" type="primary" @buttonClick="handleCancel" />
+        <BaseButton
+          class="w-full"
+          color="neutral"
+          label="Cancel"
+          size="sm"
+          type="primary"
+          @buttonClick="handleCancel"
+        />
       </div>
       <div class="w-1/2 ml-1">
-        <BaseButton class="w-full transition-all duration-300 ease-in-out" color="neutral" label="Save" size="sm" type="primary" :selected="true" @buttonClick="handleSubmit" />
+        <BaseButton
+          class="w-full transition-all duration-300 ease-in-out"
+          color="neutral"
+          label="Save"
+          size="sm"
+          type="primary"
+          :selected="true"
+          @buttonClick="handleSubmit"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DropDownMenu from '../../ComplexInputs/DropDown/DropDownMenu.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+
+const createOption = text => ({ text, link: text });
+const createNumberedOptions = (label, count) =>
+  Array.from({ length: count }, (_, index) => createOption(`${label} ${index + 1}`));
+
+const displayTypes = ['ScoreBoard', 'FlightBoard'].map(createOption);
+const ringNames = createNumberedOptions('Ring', 20);
+const flightBoardNames = createNumberedOptions('FlightBoard', 20);
+
+const cloneOptions = options => options.map(option => ({ ...option }));
+
+const createDisplayData = kiosk => {
+  const display = kiosk || {};
+  return {
+    iconName: 'fa-check-circle',
+    iconColor: 'accepted',
+    iconBackgroundColor: 'acceptedHighlight',
+    editableDisplay: {
+      DisplayName: display.DisplayName || '',
+      Type: display.Type || '',
+      AssignedTo: '',
+      AssignedToType: '',
+      Person: { DisplayName: '', PersonId: null }
+    },
+    selectedEvent: createOption('Select Event'),
+    validation: { DisplayName: false, Type: false, AssignedTo: false },
+    displayTypes: cloneOptions(displayTypes),
+    ringNames: cloneOptions(ringNames),
+    flightBoardNames: cloneOptions(flightBoardNames)
+  };
+};
 
 export default {
   name: 'AddDisplay',
@@ -121,76 +201,7 @@ export default {
     }
   },
   data() {
-    return {
-      iconName: 'fa-check-circle',
-      iconColor: 'accepted',
-      iconBackgroundColor: 'acceptedHighlight',
-      // Create an editable copy from kiosk for display properties.
-      editableDisplay: {
-        DisplayName: this.kiosk.DisplayName || '',
-        Type: this.kiosk.Type || '',
-        AssignedTo: '',       // Will store either a PersonId or an Event identifier.
-        AssignedToType: '',   // Either 'Person' or 'Event'
-        Person: {
-          DisplayName: '',
-          PersonId: null
-        }
-      },
-      selectedEvent: { text: 'Select Event', link: 'Select Event' },
-      validation: {
-        DisplayName: false,
-        Type: false,
-        AssignedTo: false
-      },
-      displayTypes: [
-        { text: 'ScoreBoard', link: 'ScoreBoard' },
-        { text: 'FlightBoard', link: 'FlightBoard' }
-      ],
-      ringNames: [
-        { text: 'Ring 1', link: 'Ring 1' },
-        { text: 'Ring 2', link: 'Ring 2' },
-        { text: 'Ring 3', link: 'Ring 3' },
-        { text: 'Ring 4', link: 'Ring 4' },
-        { text: 'Ring 5', link: 'Ring 5' },
-        { text: 'Ring 6', link: 'Ring 6' },
-        { text: 'Ring 7', link: 'Ring 7' },
-        { text: 'Ring 8', link: 'Ring 8' },
-        { text: 'Ring 9', link: 'Ring 9' },
-        { text: 'Ring 10', link: 'Ring 10' },
-        { text: 'Ring 11', link: 'Ring 11' },
-        { text: 'Ring 13', link: 'Ring 12' },
-        { text: 'Ring 14', link: 'Ring 13' },
-        { text: 'Ring 14', link: 'Ring 14' },
-        { text: 'Ring 15', link: 'Ring 15' },
-        { text: 'Ring 16', link: 'Ring 16' },
-        { text: 'Ring 17', link: 'Ring 17' },
-        { text: 'Ring 18', link: 'Ring 18' },
-        { text: 'Ring 19', link: 'Ring 19' },
-        { text: 'Ring 20', link: 'Ring 20' }
-      ],
-      flightBoardNames: [
-        { text: 'FlightBoard 1', link: 'FlightBoard 1' },
-        { text: 'FlightBoard 2', link: 'FlightBoard 2' },
-        { text: 'FlightBoard 3', link: 'FlightBoard 3' },
-        { text: 'FlightBoard 4', link: 'FlightBoard 4' },
-        { text: 'FlightBoard 5', link: 'FlightBoard 5' },
-        { text: 'FlightBoard 6', link: 'FlightBoard 6' },
-        { text: 'FlightBoard 7', link: 'FlightBoard 7' },
-        { text: 'FlightBoard 8', link: 'FlightBoard 8' },
-        { text: 'FlightBoard 9', link: 'FlightBoard 9' },
-        { text: 'FlightBoard 10', link: 'FlightBoard 10' },
-        { text: 'FlightBoard 11', link: 'FlightBoard 11' },
-        { text: 'FlightBoard 12', link: 'FlightBoard 12' },
-        { text: 'FlightBoard 13', link: 'FlightBoard 13' },
-        { text: 'FlightBoard 14', link: 'FlightBoard 14' },
-        { text: 'FlightBoard 15', link: 'FlightBoard 15' },
-        { text: 'FlightBoard 16', link: 'FlightBoard 16' },
-        { text: 'FlightBoard 17', link: 'FlightBoard 17' },
-        { text: 'FlightBoard 18', link: 'FlightBoard 18' },
-        { text: 'FlightBoard 19', link: 'FlightBoard 19' },
-        { text: 'FlightBoard 20', link: 'FlightBoard 20' },
-      ]
-    };
+    return createDisplayData(this.kiosk);
   },
   computed: {
     selectedDisplayType() {
@@ -247,7 +258,8 @@ export default {
       this.validation.AssignedTo = false;
     },
     validateForm() {
-      this.validation.DisplayName = !this.editableDisplay.DisplayName || this.editableDisplay.DisplayName === 'Unassigned';
+      this.validation.DisplayName =
+        !this.editableDisplay.DisplayName || this.editableDisplay.DisplayName === 'Unassigned';
       this.validation.Type = !this.editableDisplay.Type;
       this.validation.AssignedTo = !this.editableDisplay.AssignedTo;
     },

package/src/stories/Organisms/Form/AddNewPerson/AddNewPerson.stories.js

@@ -1,21 +1,20 @@
-import AddNewPerson from "./AddNewPerson.vue";
+import AddNewPerson from './AddNewPerson.vue';
 
 export default {
-    title: "Organisms/Forms/AddNewPerson",
-    component: AddNewPerson,
-    argTypes: {
-        fencingClubs: { control: "array" },
-        onNewPersonSubmitted: { action: "new-person-submitted" },
-    },
+  title: 'Organisms/Forms/AddNewPerson',
+  component: AddNewPerson,
+  argTypes: {
+    fencingClubs: { control: 'array' },
+    onNewPersonSubmitted: { action: 'new-person-submitted' }
+  }
 };
 
-
 export const Default = {
-    args: {
-        fencingClubs: [
-            {Name: "Iron Edge Academy", ClubId: 1},
-            {Name: "Silver Sword Guild", ClubId: 2},
-            {Name: "Steel Ring Dojo", ClubId: 3},
-        ],
-    }
+  args: {
+    fencingClubs: [
+      { Name: 'Iron Edge Academy', ClubId: 1 },
+      { Name: 'Silver Sword Guild', ClubId: 2 },
+      { Name: 'Steel Ring Dojo', ClubId: 3 }
+    ]
+  }
 };

package/src/stories/Organisms/Form/AddNewPerson/AddNewPerson.vue

@@ -1,94 +1,100 @@
 <template>
   <div class="text-start">
-    <BaseText class="mb-4 border-b border-dropdownSelect" size="md" color="primary" weight="simibold" text="Enter New Fencers Information" />
+    <BaseText
+      class="mb-4 border-b border-dropdownSelect"
+      size="md"
+      color="primary"
+      weight="simibold"
+      text="Enter New Fencers Information"
+    />
 
     <TitledInput
-        :inputValue="formData.personName"
-        :invalid="validation.personName.invalid"
-        :placeholder="'Display Name (required)'"
-        :title="validation.personName.invalid ? `Display Name - ${validation.personName.message}` : 'Display Name'"
-        class="mt-2 w-full"
-        @update:value="updateForm('personName', $event)"
+      :inputValue="formData.personName"
+      :invalid="validation.personName.invalid"
+      :placeholder="'Display Name (required)'"
+      :title="validation.personName.invalid ? `Display Name - ${validation.personName.message}` : 'Display Name'"
+      class="mt-2 w-full"
+      @update:value="updateForm('personName', $event)"
     />
 
     <TitledInput
-        :inputValue="formData.personLegalName"
-        :invalid="validation.personLegalName.invalid"
-        :placeholder="'Legal Name (required)'"
-        :title="validation.personLegalName.invalid ? `Legal Name - ${validation.personLegalName.message}` : 'Legal Name'"
-        class="mt-2"
-        @update:value="updateForm('personLegalName', $event)"
+      :inputValue="formData.personLegalName"
+      :invalid="validation.personLegalName.invalid"
+      :placeholder="'Legal Name (required)'"
+      :title="validation.personLegalName.invalid ? `Legal Name - ${validation.personLegalName.message}` : 'Legal Name'"
+      class="mt-2"
+      @update:value="updateForm('personLegalName', $event)"
     />
 
-    <div class=" flex-col">
+    <div class="flex-col">
       <BaseText
-          :color="'primaryHighlight'"
-          :invalid="validation.personPronouns.invalid"
-          :size="'sm'"
-          :text="validation.personPronouns.invalid ? `Pronouns - ${validation.personPronouns.message}` : 'Pronouns'"
-          :weight="'normal'"
-          class="mt-2"
-          data-testid="text-description"
+        :color="'primaryHighlight'"
+        :invalid="validation.personPronouns.invalid"
+        :size="'sm'"
+        :text="validation.personPronouns.invalid ? `Pronouns - ${validation.personPronouns.message}` : 'Pronouns'"
+        :weight="'normal'"
+        class="mt-2"
+        data-testid="text-description"
       />
       <DropDownMenu
-          :label="formData.personPronouns.text.length < 2 ? 'Preferred Pronouns' : ''"
-          :items="pronouns"
-          class="pb-2"
-          :selectedItem="formData.personPronouns"
-          @update:selectedItem="handleSelectedPronouns"
-          :alignEnd="false"
-          width="w-full"
-          dropDownWidth="w-[342px]"
+        :label="formData.personPronouns.text.length < 2 ? 'Preferred Pronouns' : ''"
+        :items="pronouns"
+        class="pb-2"
+        :selectedItem="formData.personPronouns"
+        @update:selectedItem="handleSelectedPronouns"
+        :alignEnd="false"
+        width="w-full"
+        dropDownWidth="w-[342px]"
       />
     </div>
 
     <TitledInput
-        :inputValue="formData.personEmail"
-        :invalid="validation.personEmail.invalid"
-        :placeholder="'Email (optional) but required for user to log-in later'"
-        :title="validation.personEmail.invalid ? `Email - ${validation.personEmail.message}` : 'Email'"
-        class="mt-2"
-        @update:value="updateForm('personEmail', $event)"
+      :inputValue="formData.personEmail"
+      :invalid="validation.personEmail.invalid"
+      :placeholder="'Email (optional) but required for user to log-in later'"
+      :title="validation.personEmail.invalid ? `Email - ${validation.personEmail.message}` : 'Email'"
+      class="mt-2"
+      @update:value="updateForm('personEmail', $event)"
     />
 
     <div class="mb-2">
       <BaseText
-          :color="'primaryHighlight'"
-          :invalid="validation.selectedClub.invalid"
-          :size="'sm'"
-          :text="validation.selectedClub.invalid ? `Club - ${validation.selectedClub.message}` : 'Club'"
-          :weight="'normal'"
-          class="mt-2"
-          data-testid="text-description"
+        :color="'primaryHighlight'"
+        :invalid="validation.selectedClub.invalid"
+        :size="'sm'"
+        :text="validation.selectedClub.invalid ? `Club - ${validation.selectedClub.message}` : 'Club'"
+        :weight="'normal'"
+        class="mt-2"
+        data-testid="text-description"
       />
       <DropDownMenu
-          :label="formData.selectedClub.text.length < 2 ? 'Select Club' : ''"
-          :items="formattedClubs"
-          :selectedItem="formData.selectedClub"
-          :invalid="validation.selectedClub.invalid"
-          @update:selectedItem="handleSelectedClub"
-          width="w-full"
-          :alignEnd="false"
-          dropDownWidth="w-[342px]"
+        :label="formData.selectedClub.text.length < 2 ? 'Select Club' : ''"
+        :items="formattedClubs"
+        :selectedItem="formData.selectedClub"
+        :invalid="validation.selectedClub.invalid"
+        @update:selectedItem="handleSelectedClub"
+        width="w-full"
+        :alignEnd="false"
+        dropDownWidth="w-[342px]"
       />
     </div>
 
-    <BaseButton type="secondary" label="Add Person" class="mt-4" @buttonClick="handleSubmit"/>
+    <BaseButton type="secondary" label="Add Person" class="mt-4" @buttonClick="handleSubmit" />
   </div>
 </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 DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
-import { validateField } from "../../../Util/Validations/AddNewPersonModalValidation.js";
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseInput from '../../../Atoms/Input/BaseInput.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DropDownMenu from '../../ComplexInputs/DropDown/DropDownMenu.vue';
+import { validateField } from '../../../Util/Validations/AddNewPersonModalValidation.js';
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
 
 export default {
-  name: "AddNewPerson",
+  name: 'AddNewPerson',
   emits: ['newPersonSubmitted'],
-  components: {TitledInput, DropDownMenu, BaseText, BaseButton, BaseInput },
+  components: { TitledInput, DropDownMenu, BaseText, BaseButton, BaseInput },
   props: {
     fencingClubs: {
       type: Array,
@@ -98,26 +104,26 @@ export default {
   data() {
     return {
       formData: {
-        personName: "",
-        personLegalName: "",
-        personEmail: "",
-        personPronouns: { text: "He/Him", link: "" },
-        selectedClub: { text: "", link: "" },
-        clubId: "",
+        personName: '',
+        personLegalName: '',
+        personEmail: '',
+        personPronouns: { text: 'He/Him', link: '' },
+        selectedClub: { text: '', link: '' },
+        clubId: ''
       },
       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" }
+        { 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' }
       ],
       validation: {
-        personName: { invalid: false, message: "" },
-        personLegalName: { invalid: false, message: "" },
-        personPronouns: { invalid: false, message: "" },
-        personEmail: { invalid: false, message: "" },
-        selectedClub: { invalid: false, message: "" }
+        personName: { invalid: false, message: '' },
+        personLegalName: { invalid: false, message: '' },
+        personPronouns: { invalid: false, message: '' },
+        personEmail: { invalid: false, message: '' },
+        selectedClub: { invalid: false, message: '' }
       },
       formSubmitted: false
     };
@@ -140,7 +146,7 @@ export default {
     },
     handleSelectedClub(value) {
       this.formData.selectedClub = value;
-      this.validateFieldState("selectedClub", value);
+      this.validateFieldState('selectedClub', value);
     },
     handleSelectedPronouns(value) {
       this.formData.selectedPronouns = value;
@@ -169,24 +175,24 @@ export default {
       };
 
       this.clearForm();
-      this.$emit("newPersonSubmitted", newPerson);
+      this.$emit('newPersonSubmitted', newPerson);
     },
 
     clearForm() {
       this.formData = {
-        personName: "",
-        personLegalName: "",
-        personEmail: "",
-        personPronouns: { text: "", link: "" },
-        selectedClub: { text: "", link: "" },
-        clubId: "",
+        personName: '',
+        personLegalName: '',
+        personEmail: '',
+        personPronouns: { text: '', link: '' },
+        selectedClub: { text: '', link: '' },
+        clubId: ''
       };
       this.validation = {
-        personName: { invalid: false, message: "" },
-        personLegalName: { invalid: false, message: "" },
-        personPronouns: { text: "He/Him", link: "" },
-        personEmail: { invalid: false, message: "" },
-        selectedClub: { invalid: false, message: "" }
+        personName: { invalid: false, message: '' },
+        personLegalName: { invalid: false, message: '' },
+        personPronouns: { text: 'He/Him', link: '' },
+        personEmail: { invalid: false, message: '' },
+        selectedClub: { invalid: false, message: '' }
       };
       this.formSubmitted = false;
     }