@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -2,83 +2,110 @@
   <section class="mt-2 min-h-80">
     <div>
       <div class="flex flex-col mb-4">
-        <TitledInput :inputValue="person.DisplayName || ''"
-                     placeholder="Enter Display Name"
-                     :invalid="validation.DisplayName.invalid"
-                     :title="validation.DisplayName.invalid ? `DisplayName Name - ${validation.DisplayName.message}` : 'Display Name'"
-                     @update:value="emitUpdate('DisplayName', $event)"/>
+        <TitledInput
+          :inputValue="person.DisplayName || ''"
+          placeholder="Enter Display Name"
+          :invalid="validation.DisplayName.invalid"
+          :title="
+            validation.DisplayName.invalid ? `DisplayName Name - ${validation.DisplayName.message}` : 'Display Name'
+          "
+          @update:value="emitUpdate('DisplayName', $event)"
+        />
       </div>
 
       <div class="flex flex-col mb-4">
-        <TitledInput :inputValue="getLegalName"
-                     placeholder="Enter Your Legal Name"
-                     :invalid="validation.LegalName.invalid"
-                     :title="validation.LegalName.invalid ? `Legal Name - ${validation.LegalName.message}` : 'Legal Name (not shown on site)'"
-                     @update:value="emitUpdate('LegalName', $event)"/>
+        <TitledInput
+          :inputValue="getLegalName"
+          placeholder="Enter Your Legal Name"
+          :invalid="validation.LegalName.invalid"
+          :title="
+            validation.LegalName.invalid
+              ? `Legal Name - ${validation.LegalName.message}`
+              : 'Legal Name (not shown on site)'
+          "
+          @update:value="emitUpdate('LegalName', $event)"
+        />
       </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="emitUpdate('Club', { Name: $event.text, ClubId: $event.link })"
-                      width="w-full"
-                      dropDownWidth="w-full"/>
+        <BaseText text="Club Name" size="sm" color="quaternary" />
+        <DropDownMenu
+          :label="formattedClubs.length < 2 ? 'Select Club' : ''"
+          :items="formattedClubs"
+          :selectedItem="getClubName"
+          class="pb-2"
+          @update:selectedItem="emitUpdate('Club', { Name: $event.text, ClubId: $event.link })"
+          width="w-full"
+          dropDownWidth="w-full"
+        />
       </div>
 
       <div class="flex flex-col mb-4">
-        <BaseText text="Preferred Pronouns" size="sm" color="quaternary"/>
-        <DropDownMenu :label="getPronounLabel"
-                      :items="pronouns" class="pb-2"
-                      :selectedItem="getSelectedPronouns"
-                      @update:selectedItem="emitUpdate('Pronouns', $event.text)"
-                      width="w-full"
-                      dropDownWidth="w-full"/>
+        <BaseText text="Preferred Pronouns" size="sm" color="quaternary" />
+        <DropDownMenu
+          :label="getPronounLabel"
+          :items="pronouns"
+          class="pb-2"
+          :selectedItem="getSelectedPronouns"
+          @update:selectedItem="emitUpdate('Pronouns', $event.text)"
+          width="w-full"
+          dropDownWidth="w-full"
+        />
       </div>
 
       <div class="flex flex-col mb-4">
-        <TitledInput :inputValue="getEmail || ''"
-                     placeholder="Enter Your Email"
-                     :invalid="validation.EmailAddress.invalid"
-                     :title="validation.EmailAddress.invalid ? `Email Address - ${validation.EmailAddress.message}` : 'Email Address'"
-                     @update:value="emitUpdate('EmailAddress', $event)"/>
+        <TitledInput
+          :inputValue="getEmail || ''"
+          placeholder="Enter Your Email"
+          :invalid="validation.EmailAddress.invalid"
+          :title="
+            validation.EmailAddress.invalid ? `Email Address - ${validation.EmailAddress.message}` : 'Email Address'
+          "
+          @update:value="emitUpdate('EmailAddress', $event)"
+        />
       </div>
 
       <div class="border-b border-dropdownSelect mt-6">
-        <BaseText color="quinary" size="sm" text="PROFILE USE"
-                  weight="normal" data-testid="text-registration"/>
+        <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..."
-                  weight="normal" data-testid="text-registration" class="mb-4"/>
+        <BaseText
+          color="quinary"
+          size="sm"
+          text="Your information belongs to you..."
+          weight="normal"
+          data-testid="text-registration"
+          class="mb-4"
+        />
 
-        <Toggle :checked="person.ShowData"
-                label="Allow your name and profile image to be displayed on M² Website?"
-                :labelLeft="false"
-                @update:checked="emitUpdate('ShowData', $event)"/>
+        <Toggle
+          :checked="person.ShowData"
+          label="Allow your name and profile image to be displayed on M² Website?"
+          :labelLeft="false"
+          @update:checked="emitUpdate('ShowData', $event)"
+        />
 
-        <Toggle :checked="person.ShareData"
-                label="Share information with 3rd Parties? (like: Hema Ratings)"
-                :labelLeft="false"
-                @update:checked="emitUpdate('ShareData', $event)"/>
+        <Toggle
+          :checked="person.ShareData"
+          label="Share information with 3rd Parties? (like: Hema Ratings)"
+          :labelLeft="false"
+          @update:checked="emitUpdate('ShareData', $event)"
+        />
       </div>
     </div>
   </section>
 </template>
 
 <script>
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-import Toggle from "../../../Molecules/Inputs/Toggle/Toggle.vue";
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import DropDownMenu from '../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
+import Toggle from '../../../Molecules/Inputs/Toggle/Toggle.vue';
 
 export default {
   name: 'BasicEdit',
-  emits: ['update:person'],  // Generic emit event
+  emits: ['update:person'], // Generic emit event
   components: { Toggle, DropDownMenu, BaseText, TitledInput },
   props: {
     person: {
@@ -119,8 +146,8 @@ export default {
     },
     getClubName() {
       return this.person?.Club
-          ? { text: this.person.Club.Name, link: this.person.Club.ClubId }
-          : { text: 'No Club', link: null };
+        ? { text: this.person.Club.Name, link: this.person.Club.ClubId }
+        : { text: 'No Club', link: null };
     },
     getSelectedPronouns() {
       if (!this.person.Pronouns) {
@@ -134,12 +161,12 @@ export default {
     },
     getPronounLabel() {
       return this.person.Pronouns ? '' : 'Please select your preferred pronouns';
-    },
+    }
   },
   methods: {
     emitUpdate(field, value) {
       this.$emit('update:person', { field, value });
-    },
+    }
   }
-}
+};
 </script>

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

@@ -1,105 +1,103 @@
 import PersonManagement from './PersonManagement.vue';
-import clubGetAllMock from "../../../mocks/clubGetAllMock.js";
-import personsMock from "../../../mocks/personsMock.js";
-import attendance from "../../../mocks/getAttendance.js";
-import allPersonsMock from "../../../mocks/personGetAllMock.js"
+import clubGetAllMock from '../../../mocks/clubGetAllMock.js';
+import personsMock from '../../../mocks/personsMock.js';
+import attendance from '../../../mocks/getAttendance.js';
+import allPersonsMock from '../../../mocks/personGetAllMock.js';
 
 export default {
-    title: 'Templates/PersonManagement/PersonManagement',
-    component: PersonManagement,
-    tags: ['autodocs'],
-    args: {
-        personProfile: personsMock,
-        fencingClubs: clubGetAllMock,
-        attendance: attendance,
-        uploadImageName: 'profile-test.png',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'https://meyersquaredimages.com/uploads/',
-        userLevel: 'user'
-    },
-    argTypes: {
-        personProfile: { control: { type: 'object' } },
-        fencingClubs: { control: { type: 'object' } },
-        attendance: { control: { type: 'object' } },
-        uploadImageName: { control: { type: 'text' } },
-        uploadServer: { control: { type: 'text' } },
-        imageServer: { control: { type: 'text' } },
-        userLevel: { control: { type: 'string'} }
-    }
+  title: 'Templates/PersonManagement/PersonManagement',
+  component: PersonManagement,
+  tags: ['autodocs'],
+  args: {
+    personProfile: personsMock,
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test.png',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'https://meyersquaredimages.com/uploads/',
+    userLevel: 'user'
+  },
+  argTypes: {
+    personProfile: { control: { type: 'object' } },
+    fencingClubs: { control: { type: 'object' } },
+    attendance: { control: { type: 'object' } },
+    uploadImageName: { control: { type: 'text' } },
+    uploadServer: { control: { type: 'text' } },
+    imageServer: { control: { type: 'text' } },
+    userLevel: { control: { type: 'string' } }
+  }
 };
 
 export const Default = {
-    args: {
-        personProfile: personsMock[1],
-        fencingClubs: clubGetAllMock,
-        attendance: attendance,
-        uploadImageName: 'profile-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        userLevel: 'User'
-    }
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'User'
+  }
 };
 
 export const admin = {
-    args: {
-        personProfile: personsMock[1],
-        fencingClubs: clubGetAllMock,
-        attendance: attendance,
-        people: allPersonsMock,
-        uploadImageName: 'profile-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        userLevel: 'Admin'
-    }
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin'
+  }
 };
 
 export const clubAdmin = {
-    args: {
-        personProfile: personsMock[1],
-        fencingClubs: clubGetAllMock,
-        people: allPersonsMock,
-        attendance: attendance,
-        uploadImageName: 'profile-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        userLevel: 'Club'
-    }
+  args: {
+    personProfile: personsMock[1],
+    fencingClubs: clubGetAllMock,
+    people: allPersonsMock,
+    attendance: attendance,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Club'
+  }
 };
 
-
 export const adminWithLoading = {
-    args: {
-        personProfile: personsMock,
-        fencingClubs: clubGetAllMock,
-        attendance: attendance,
-        people: allPersonsMock,
-        uploadImageName: 'profile-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        userLevel: 'Admin',
-        loading: true
-    }
+  args: {
+    personProfile: personsMock,
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin',
+    loading: true
+  }
 };
 
-
 export const emptyProfile = {
-    args: {
-        personProfile: {
-            DisplayName: '',
-            LegalName: '',
-            EmailAddress: '',
-            Club: {Name: 'No Club Affiliation ', ClubId: '17'},
-            AccessLevel: 'User',
-            ShareData: true,
-            ShowData: true
-        },
-        fencingClubs: clubGetAllMock,
-        attendance: attendance,
-        people: allPersonsMock,
-        uploadImageName: 'profile-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        userLevel: 'Admin',
-        loading: false
-    }
+  args: {
+    personProfile: {
+      DisplayName: '',
+      LegalName: '',
+      EmailAddress: '',
+      Club: { Name: 'No Club Affiliation ', ClubId: '17' },
+      AccessLevel: 'User',
+      ShareData: true,
+      ShowData: true
+    },
+    fencingClubs: clubGetAllMock,
+    attendance: attendance,
+    people: allPersonsMock,
+    uploadImageName: 'profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    userLevel: 'Admin',
+    loading: false
+  }
 };