@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,65 +1,89 @@
 <template>
   <section v-if="loading">
-    <PersonManagementSkeleton/>
+    <PersonManagementSkeleton />
   </section>
   <section v-if="!loading" class="flex px-3 bg-neutral" id="person-management">
     <div class="rounded-lg md:p-9 w-full">
       <div class="w-full flex flex-row justify-center mb-4">
-        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="getHeaderText" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="getHeaderText" :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"
-                      :customClass="getClass"
-                      :isProfile="true"
-                      customSkeletonClass="w-32 h-32 border-2 border-dashed rounded-full animate-pulse bg-quaternaryHighlight"
-                      :cropperOptions="{
-                        aspectRatio: 4 / 4,
-                        autoCropArea: 1,
-                        viewMode: 1,
-                        movable: true,
-                        zoomable: true
-                      }"
-                      @update:url="handleProfilePicUpdate"/>
+        <ImageCropper
+          :urlToImage="getImageURL"
+          :uploadImageName="uploadImageName"
+          :uploadServer="uploadServer"
+          :imageServer="imageServer"
+          :customClass="getClass"
+          :isProfile="true"
+          customSkeletonClass="w-32 h-32 border-2 border-dashed rounded-full animate-pulse bg-quaternaryHighlight"
+          :cropperOptions="{
+            aspectRatio: 4 / 4,
+            autoCropArea: 1,
+            viewMode: 1,
+            movable: true,
+            zoomable: true
+          }"
+          @update:url="handleProfilePicUpdate"
+        />
       </div>
 
-    <EditEventsTopMenu :tabs="personProfileTabs(userLevel)" :currentTab="currentTab" @tabMenuClick="handleTab" />
-    <BasicEdit v-if="currentTab === 'Basic'" :person="person" :fencingClubs="fencingClubs" :validation="validation" @update:person="updatePerson" />
-    <FencerAdmin v-if="currentTab === 'Admin'"
-                 :person="person"
-                 :people="people"
-                 :userLevel="userLevel"
-                 @update:person="updatePerson"
-                 @merge:merge="doMerge"
-    />
-    <Attendance v-if="currentTab === 'Stats'" :attendance="attendance" />
-    <Attendance v-if="currentTab === 'Attendance'" :attendance="attendance" />
+      <EditEventsTopMenu :tabs="personProfileTabs(userLevel)" :currentTab="currentTab" @tabMenuClick="handleTab" />
+      <BasicEdit
+        v-if="currentTab === 'Basic'"
+        :person="person"
+        :fencingClubs="fencingClubs"
+        :validation="validation"
+        @update:person="updatePerson"
+      />
+      <FencerAdmin
+        v-if="currentTab === 'Admin'"
+        :person="person"
+        :people="people"
+        :userLevel="userLevel"
+        @update:person="updatePerson"
+        @merge:merge="doMerge"
+      />
+      <Attendance v-if="currentTab === 'Stats'" :attendance="attendance" />
+      <Attendance v-if="currentTab === 'Attendance'" :attendance="attendance" />
 
-    <div v-if="showButtons" class="flex flex-row justify-end mt-8">
-      <BaseButton v-if="userLevel === 'Admin'" class="mr-8 " color="warn" label="Delete" size="sm" type="secondary" @buttonClick="handleDelete"/>
-      <BaseButton class="w-full" color="neutral" :label="saveButtonLabel" size="sm" type="secondary" @buttonClick="handleSubmit"/>
+      <div v-if="showButtons" class="flex flex-row justify-end mt-8">
+        <BaseButton
+          v-if="userLevel === 'Admin'"
+          class="mr-8"
+          color="warn"
+          label="Delete"
+          size="sm"
+          type="secondary"
+          @buttonClick="handleDelete"
+        />
+        <BaseButton
+          class="w-full"
+          color="neutral"
+          :label="saveButtonLabel"
+          size="sm"
+          type="secondary"
+          @buttonClick="handleSubmit"
+        />
+      </div>
     </div>
-  </div>
   </section>
 </template>
 
 <script>
-import ImageCropper from "../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
-import EditEventsTopMenu from "../../Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import { personProfileTabs } from "../../Util/tabs.js";
-import PersonManagementSkeleton from "../../Organisms/Skeletons/PersonManagement/PersonManagementSkeleton.vue";
-import BaseText from "../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BasicEdit from "./Basic/BasicEdit.vue";
-import Attendance from "../../Templates/PersonManagement/Attendance/Attendance.vue";
-import FencerAdmin from "../../Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.vue";
-import { validateField } from "../../Util/Validations/PersonManagementValidations.js";
+import ImageCropper from '../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
+import EditEventsTopMenu from '../../Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import { personProfileTabs } from '../../Util/tabs.js';
+import PersonManagementSkeleton from '../../Organisms/Skeletons/PersonManagement/PersonManagementSkeleton.vue';
+import BaseText from '../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BasicEdit from './Basic/BasicEdit.vue';
+import Attendance from '../../Templates/PersonManagement/Attendance/Attendance.vue';
+import FencerAdmin from '../../Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.vue';
+import { validateField } from '../../Util/Validations/PersonManagementValidations.js';
 
 export default {
-  name: "PersonManagement",
-  emits: ["submit:person","delete:person","update:image","merge:merge"],
+  name: 'PersonManagement',
+  emits: ['submit:person', 'delete:person', 'update:image', 'merge:merge'],
   components: {
     FencerAdmin,
     Attendance,
@@ -68,84 +92,85 @@ export default {
     BaseText,
     PersonManagementSkeleton,
     EditEventsTopMenu,
-    ImageCropper,
+    ImageCropper
   },
   props: {
     personProfile: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     fencingClubs: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     people: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     attendance: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     uploadImageName: {
       type: String,
-      default: "profile-pic",
+      default: 'profile-pic'
     },
     uploadServer: {
-      type: String,
+      type: String
     },
     imageServer: {
-      type: String,
+      type: String
     },
     userLevel: {
       type: String,
-      default: "user",
+      default: 'user'
     },
     loading: {
       type: Boolean,
-      default: false,
+      default: false
     },
     saveButtonLabel: {
       type: String,
-      default: "Save",
-    },
+      default: 'Save'
+    }
   },
   data() {
-    const firstName = this.personProfile.FirstName || "";
-    const lastName = this.personProfile.LastName || "";
+    const firstName = this.personProfile.FirstName || '';
+    const lastName = this.personProfile.LastName || '';
     return {
-      person: { ...this.personProfile, LegalName: this.personProfile.LegalName || `${firstName} ${lastName}`.trim()  },
-      currentTab: "Basic",
+      person: { ...this.personProfile, LegalName: this.personProfile.LegalName || `${firstName} ${lastName}`.trim() },
+      currentTab: 'Basic',
       validation: {
-        DisplayName: { invalid: false, message: "" },
-        LegalName: { invalid: false, message: "" },
-        EmailAddress: { invalid: false, message: "" },
-        Club: { invalid: false, message: "" },
-      },
+        DisplayName: { invalid: false, message: '' },
+        LegalName: { invalid: false, message: '' },
+        EmailAddress: { invalid: false, message: '' },
+        Club: { invalid: false, message: '' }
+      }
     };
   },
   computed: {
     getHeaderText() {
-      return this.person.DisplayName ? this.person.DisplayName : "Fencer Profile";
+      return this.person.DisplayName ? this.person.DisplayName : 'Fencer Profile';
     },
     getImageURL() {
-      return this.person.Images ? this.person.Images[0].URL : "";
+      return this.person.Images ? this.person.Images[0].URL : '';
     },
     getClass() {
-      return "border-2 border-dashed rounded-full w-32 h-32";
+      return 'border-2 border-dashed rounded-full w-32 h-32';
     },
     showButtons() {
       return (
-          ((this.userLevel === "Admin" || this.userLevel === "Club") && (this.currentTab === "Basic" || this.currentTab === "Admin")) ||
-          (this.userLevel === "User" && this.currentTab === "Basic")
+        ((this.userLevel === 'Admin' || this.userLevel === 'Club') &&
+          (this.currentTab === 'Basic' || this.currentTab === 'Admin')) ||
+        (this.userLevel === 'User' && this.currentTab === 'Basic')
       );
-    },
+    }
   },
   methods: {
     personProfileTabs,
     handleProfilePicUpdate(url) {
       this.person.ProfileImage = url;
-      this.$emit("update:image", url);
+      this.$emit('update:image', url);
     },
     setClub() {
       this.person.ClubId = this.person.Club?.ClubId ?? 17;
@@ -153,14 +178,14 @@ export default {
     handleSubmit() {
       this.setClub();
       if (this.validateAllFields()) {
-        const nameParts = this.person.LegalName.trim().split(" ");
-        this.person.FirstName = nameParts[0] || "";
-        this.person.LastName = nameParts.slice(1).join(" ") || "";
-        this.$emit("submit:person", this.person);
+        const nameParts = this.person.LegalName.trim().split(' ');
+        this.person.FirstName = nameParts[0] || '';
+        this.person.LastName = nameParts.slice(1).join(' ') || '';
+        this.$emit('submit:person', this.person);
       }
     },
     handleDelete() {
-      this.$emit("delete:person", this.person);
+      this.$emit('delete:person', this.person);
     },
     updatePerson({ field, value }) {
       this.person = { ...this.person, [field]: value };
@@ -170,19 +195,19 @@ export default {
       }
     },
     validateAllFields() {
-      const fieldsToValidate = ["DisplayName", "LegalName", "EmailAddress"];
-      fieldsToValidate.forEach((field) => {
+      const fieldsToValidate = ['DisplayName', 'LegalName', 'EmailAddress'];
+      fieldsToValidate.forEach(field => {
         this.validation[field] = validateField(field, this.person[field]);
       });
 
-      return !Object.values(this.validation).some((field) => field.invalid);
+      return !Object.values(this.validation).some(field => field.invalid);
     },
     handleTab(tabId) {
       this.currentTab = tabId;
     },
     doMerge(data) {
-      this.$emit("merge:merge", data);
+      this.$emit('merge:merge', data);
     }
-  },
+  }
 };
 </script>

package/src/stories/Templates/TournamentManagement/ListEvents/ListEvents.stories.js

@@ -2,44 +2,44 @@ import ListEvents from './ListEvents.vue';
 import eventMockData from '../../../../mocks/eventMock.js';
 
 export default {
-    title: 'Templates/TournamentManagement/ListEvents',
-    component: ListEvents,
-    tags: ['autodocs'],
-    args: {
-        tournamentId: 8,
-        events: eventMockData,
-    },
-    argTypes: {
-        tournamentId: { control: { type: 'number' } },
-        events: { control: { type: 'object' } },
-        'tab:menu-click': { action: 'tab:menu-click' },
-        manageEvent: { action: 'manageEvent' },
-        editEvent: { action: 'editEvent' },
-        addEvent: { action: 'addEvent' },
-        'delete:Event': { action: 'delete:Event' }
-    }
+  title: 'Templates/TournamentManagement/ListEvents',
+  component: ListEvents,
+  tags: ['autodocs'],
+  args: {
+    tournamentId: 8,
+    events: eventMockData
+  },
+  argTypes: {
+    tournamentId: { control: { type: 'number' } },
+    events: { control: { type: 'object' } },
+    'tab:menu-click': { action: 'tab:menu-click' },
+    manageEvent: { action: 'manageEvent' },
+    editEvent: { action: 'editEvent' },
+    addEvent: { action: 'addEvent' },
+    'delete:Event': { action: 'delete:Event' }
+  }
 };
 
 export const Default = {
-    args: {
-        tournamentId: 8,
-        events: eventMockData
-    }
+  args: {
+    tournamentId: 8,
+    events: eventMockData
+  }
 };
 
 export const NoEvents = {
-    args: {
-        tournamentId: 8,
-        events: []
-    }
+  args: {
+    tournamentId: 8,
+    events: []
+  }
 };
 
 export const CompletedEvents = {
-    args: {
-        tournamentId: 8,
-        events: eventMockData.map((event) => ({
-            ...event,
-            Status: 'completed'
-        }))
-    }
+  args: {
+    tournamentId: 8,
+    events: eventMockData.map(event => ({
+      ...event,
+      Status: 'completed'
+    }))
+  }
 };

package/src/stories/Templates/TournamentManagement/ListEvents/ListEvents.vue

@@ -1,72 +1,91 @@
 <template>
   <section class="mx-2 md:mx-4">
-    <EditEventsTopMenu :currentTab="'Events'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
-  <div class="w-full flex flex-row justify-center">
-    <section class="w-full">
-      <div class="w-full flex flex-col justify-center items-center mb-6 text-center">
-        <div v-if="events.length === 0">
-          <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon" />
-          <BaseText :color="'primaryHighlight'" size=" " :text="'0 events added yet.'"
-                    :weight="'normal'" data-testid="text-num-events" class="text-sm md:text-lg"/>
-          <BaseText :color="'primaryHighlight'" size=" " :text="'Click below to add first event.'"
-                    :weight="'normal'" data-testid="text-num-events" class="text-sm md:text-md" />
-        </div>
+    <EditEventsTopMenu :currentTab="'Events'" :tabs="tabs" @tabMenuClick="handleTabMenuClick" />
+    <div class="w-full flex flex-row justify-center">
+      <section class="w-full">
+        <div class="w-full flex flex-col justify-center items-center mb-6 text-center">
+          <div v-if="events.length === 0">
+            <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon" />
+            <BaseText
+              :color="'primaryHighlight'"
+              size=" "
+              :text="'0 events added yet.'"
+              :weight="'normal'"
+              data-testid="text-num-events"
+              class="text-sm md:text-lg"
+            />
+            <BaseText
+              :color="'primaryHighlight'"
+              size=" "
+              :text="'Click below to add first event.'"
+              :weight="'normal'"
+              data-testid="text-num-events"
+              class="text-sm md:text-md"
+            />
+          </div>
 
-        <section v-for="event in events" :key="event.EventId" class="w-full">
-          <EventCard :event="event"
-                     @edit="handleEdit(event.EventId)"
-                     @manage="handleManageEvent(event.EventId)"
-                     @delete="handleDeleteEvent"
-          />
-        </section>
-      </div>
-      <div class="flex justify-center w-full">
-        <div class="w-1/2">
-          <BaseButton color="neutral" label="Add Event" size="sm" type="secondary" @buttonClick="handleAddEvent()" class="w-1/2"/>
+          <section v-for="event in events" :key="event.EventId" class="w-full">
+            <EventCard
+              :event="event"
+              @edit="handleEdit(event.EventId)"
+              @manage="handleManageEvent(event.EventId)"
+              @delete="handleDeleteEvent"
+            />
+          </section>
         </div>
-      </div>
-    </section>
-
-  </div>
+        <div class="flex justify-center w-full">
+          <div class="w-1/2">
+            <BaseButton
+              color="neutral"
+              label="Add Event"
+              size="sm"
+              type="secondary"
+              @buttonClick="handleAddEvent()"
+              class="w-1/2"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import EventCard from "../../../Organisms/Cards/EventCard/EventCard.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import EventCard from '../../../Organisms/Cards/EventCard/EventCard.vue';
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import {tournamentTabs} from "../../../Util/tabs.js";
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import { tournamentTabs } from '../../../Util/tabs.js';
 
-export default {
-  name: 'ListEvents',
-  components: {
+export default {
+  name: 'ListEvents',
+  components: {
     EditEventsTopMenu,
     EventCard,
     BaseText,
     BaseButton
-  },
-  props: {
-    tournamentId: {
-      type: Number,
-      required: true
-    },
-    events: {
-      type: Array,
-      default: () => []
-    },
-  },
+  },
+  props: {
+    tournamentId: {
+      type: Number,
+      required: true
+    },
+    events: {
+      type: Array,
+      default: () => []
+    }
+  },
   emits: ['tab:menu-click', 'manageEvent', 'editEvent', 'addEvent', 'delete:Event'],
   data() {
     return {
-      emptyDesertIcon,
-      tabs: tournamentTabs()
-    };
+      emptyDesertIcon,
+      tabs: tournamentTabs()
+    };
   },
   methods: {
     handleAddEvent() {
-     this.$emit('addEvent', this.tournamentId);
+      this.$emit('addEvent', this.tournamentId);
     },
     handleEdit(eventId) {
       this.$emit('editEvent', eventId);
@@ -81,5 +100,5 @@ export default {
       this.$emit('delete:Event', event);
     }
   }
-}
-</script>
+};
+</script>