@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,57 +1,58 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Pool Results'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <PoolResultsHeader :eventName="eventName"
-                       :ruleSummary="ruleSummary"
-                       :status="eventStatus"
-                       :numPromoted="localPromoted"
-                       :promotedBy="getPromotedByRule()"
-                       @update:handleChange="handleChange"
-                       @update:handleIncreaseCount="handleIncreaseCount"
-                       @update:handleDecreaseCount="handleDecreaseCount"
-                       class="hidden md:flex"
+    <EditEventsTopMenu :currentTab="'Pool Results'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <PoolResultsHeader
+      :eventName="eventName"
+      :ruleSummary="ruleSummary"
+      :status="eventStatus"
+      :numPromoted="localPromoted"
+      :promotedBy="getPromotedByRule()"
+      @update:handleChange="handleChange"
+      @update:handleIncreaseCount="handleIncreaseCount"
+      @update:handleDecreaseCount="handleDecreaseCount"
+      class="hidden md:flex"
     />
-    <PoolResultsTable :poolResults="localPoolResults"
-                      :initialCutoffIndex="initialCutoffIndex"
-                      :numPromoted="localPromoted"
-                      :event="event"
-                      :promotedBy="getPromotedByRule()"
-                      :role="role"
-                      @update:withdraw="handleWithdraw"
-                      @update:handleIncreaseCount="handleIncreaseCount"
-                      @update:handleDecreaseCount="handleDecreaseCount"
-                      @update:moveFencerDESeedUp="moveFencerDESeedUp"
-                      @update:moveFencerDESeedDown="moveFencerDESeedDown"
+    <PoolResultsTable
+      :poolResults="localPoolResults"
+      :initialCutoffIndex="initialCutoffIndex"
+      :numPromoted="localPromoted"
+      :event="event"
+      :promotedBy="getPromotedByRule()"
+      :role="role"
+      @update:withdraw="handleWithdraw"
+      @update:handleIncreaseCount="handleIncreaseCount"
+      @update:handleDecreaseCount="handleDecreaseCount"
+      @update:moveFencerDESeedUp="moveFencerDESeedUp"
+      @update:moveFencerDESeedDown="moveFencerDESeedDown"
     />
 
     <BaseModal
-        :show="showRemoveModal"
-        icon-name="fa-user-slash"
-        icon-color="alarm"
-        icon-background-color="alarmHighlight"
-        icon-border-color="red"
-        :header-text="`Withdraw ${withdrawPerson.DisplayName}`"
-        :body-text="`Confirm that you wish to withdraw ${withdrawPerson.DisplayName} from the event. This action cannot be undone.`"
-        button-text="Withdraw Fencer"
-        @update:show="closeModal"
-        @submit-modal="submitWithDraw"
-        class="bg-alarmHighlight"
+      :show="showRemoveModal"
+      icon-name="fa-user-slash"
+      icon-color="alarm"
+      icon-background-color="alarmHighlight"
+      icon-border-color="red"
+      :header-text="`Withdraw ${withdrawPerson.DisplayName}`"
+      :body-text="`Confirm that you wish to withdraw ${withdrawPerson.DisplayName} from the event. This action cannot be undone.`"
+      button-text="Withdraw Fencer"
+      @update:show="closeModal"
+      @submit-modal="submitWithDraw"
+      class="bg-alarmHighlight"
     />
-
   </section>
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import PoolResultsHeader from "../../../Organisms/Headers/PoolResultsHeader/PoolResultsHeader.vue";
-import PoolResultsTable from "../../../Organisms/Containers/PoolResults/PoolResultsTable.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
-import { tabs } from '../../../Util/tabs.js';
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import PoolResultsHeader from '../../../Organisms/Headers/PoolResultsHeader/PoolResultsHeader.vue';
+import PoolResultsTable from '../../../Organisms/Containers/PoolResults/PoolResultsTable.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
+import { tabs } from '../../../Util/tabs.js';
 
 export default {
-  name: 'PoolResults',
-  emits: ['tab:menu-click', 'update:moveFencerDESeedDown', 'update:moveFencerDESeedUp', 'update:withdraw'],
-  components: {BaseModal, PoolResultsTable, PoolResultsHeader, EditEventsTopMenu},
+  name: 'PoolResults',
+  emits: ['tab:menu-click', 'update:moveFencerDESeedDown', 'update:moveFencerDESeedUp', 'update:withdraw'],
+  components: { BaseModal, PoolResultsTable, PoolResultsHeader, EditEventsTopMenu },
   props: {
     event: {
       type: Object,
@@ -70,13 +71,13 @@ export default {
     return {
       tabs,
       windowWidth: window.innerWidth,
-      initialCutoffIndex: 0,
-      showRemoveModal: false,
-      withdrawPerson: {},
-      localPoolResults: this.clonePoolResults(this.poolResults),
-      localPromoted: 100,
-      isPromotedSet: false
-    }
+      initialCutoffIndex: 0,
+      showRemoveModal: false,
+      withdrawPerson: {},
+      localPoolResults: this.clonePoolResults(this.poolResults),
+      localPromoted: 100,
+      isPromotedSet: false
+    };
   },
   mounted() {
     this.localPromoted = this.getInitialPromoted();
@@ -87,13 +88,13 @@ export default {
     window.removeEventListener('resize', this.handleResize);
   },
   watch: {
-    poolResults: {
-      deep: true,
-      immediate: true,
-      handler(newVal) {
-        this.localPoolResults = this.clonePoolResults(newVal);
-      }
-    },
+    poolResults: {
+      deep: true,
+      immediate: true,
+      handler(newVal) {
+        this.localPoolResults = this.clonePoolResults(newVal);
+      }
+    }
   },
   computed: {
     isMobile() {
@@ -108,22 +109,22 @@ export default {
     eventStatus() {
       return this.event?.Status || this.event?.status || '';
     },
-    rules() {
-      return this.event.EventRules || this.event.eventRules || [];
-    },
-    promotedByRule() {
-      const rule = this.rules.find((rule) => rule.Rules.RuleName === "DEPromoteBy");
-      return rule ? rule.RuleValue : "Percent";
-    },
-  },
-  methods: {
-    getPromotedByRule() {
-      return this.promotedByRule;
-    },
+    rules() {
+      return this.event.EventRules || this.event.eventRules || [];
+    },
+    promotedByRule() {
+      const rule = this.rules.find(rule => rule.Rules.RuleName === 'DEPromoteBy');
+      return rule ? rule.RuleValue : 'Percent';
+    }
+  },
+  methods: {
+    getPromotedByRule() {
+      return this.promotedByRule;
+    },
     getInitialPromoted() {
       if (!this.isPromotedSet) {
         this.isPromotedSet = true;
-        const rule = this.rules?.find((rule) => rule.Rules.RuleName === "DENumOfPromotion");
+        const rule = this.rules?.find(rule => rule.Rules.RuleName === 'DENumOfPromotion');
         return rule ? rule.RuleValue : 100;
       }
       return this.localPromoted;
@@ -131,13 +132,13 @@ export default {
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
     },
-    handleIncreaseCount(value) {
-      let numPercent = this.getNumericValue(value);
-      if (this.getPromotedByRule() === 'Top') {
-        this.localPromoted = Number(this.localPromoted || 0) + 1;
-        this.updatePromotions(this.localPromoted);
-        return;
-      }
+    handleIncreaseCount(value) {
+      let numPercent = this.getNumericValue(value);
+      if (this.getPromotedByRule() === 'Top') {
+        this.localPromoted = Number(this.localPromoted || 0) + 1;
+        this.updatePromotions(this.localPromoted);
+        return;
+      }
 
       if (numPercent === 100) {
         this.initialCutoffIndex = 500;
@@ -150,12 +151,12 @@ export default {
         this.calculateInitialCutoffIndex(100);
       }
     },
-    handleDecreaseCount(value) {
-      if (this.getPromotedByRule() === 'Top') {
-        this.localPromoted = Math.max(1, Number(this.localPromoted || 1) - 1);
-        this.updatePromotions(this.localPromoted);
-        return;
-      }
+    handleDecreaseCount(value) {
+      if (this.getPromotedByRule() === 'Top') {
+        this.localPromoted = Math.max(1, Number(this.localPromoted || 1) - 1);
+        this.updatePromotions(this.localPromoted);
+        return;
+      }
 
       let numPercent = this.getNumericValue(value);
       if (numPercent - 10 >= 10) {
@@ -182,37 +183,47 @@ export default {
         numPercent = percent;
       }
 
-      return numPercent
+      return numPercent;
     },
     calculateInitialCutoffIndex(numPercent) {
-      if (this.getPromotedByRule() === 'Top') {
-        const numPromoted = parseInt(this.localPromoted, 10) || 2;
-        this.updatePromotions(numPromoted);
-        return;
-      }
-
-      const totalFencers = this.localPoolResults.length;
+      if (this.getPromotedByRule() === 'Top') {
+        const numPromoted = parseInt(this.localPromoted, 10) || 2;
+        this.updatePromotions(numPromoted);
+        return;
+      }
+
+      const totalFencers = this.localPoolResults.length;
       const promotionRate = numPercent / 100;
 
       this.localPromoted = `${numPercent}%`;
       this.initialCutoffIndex = Math.ceil(totalFencers * promotionRate);
 
-      this.updatePromotions(this.initialCutoffIndex);
-    },
-    updatePromotions(numPromoted = parseInt(this.localPromoted, 10) || 2) {
-      const pools = this.groupFencersByPool(this.localPoolResults);
-
-      Object.values(pools).forEach((poolFencers) => {
-        const sortedFencers = this.sortFencersByCriteria(poolFencers);
-        this.markTopFencers(sortedFencers, numPromoted);
-      });
+      this.updatePromotions(this.initialCutoffIndex);
+    },
+    updatePromotions(numPromoted = parseInt(this.localPromoted, 10) || 2) {
+      const pools = this.groupFencersByPool(this.localPoolResults);
+      const promotionByPerson = new Map();
+
+      Object.values(pools).forEach(poolFencers => {
+        const sortedFencers = this.sortFencersByCriteria(poolFencers);
+        this.markTopFencers(sortedFencers, numPromoted).forEach((promoted, person) => {
+          promotionByPerson.set(person, promoted);
+        });
+      });
+
+      this.localPoolResults = this.localPoolResults.map(person => ({
+        ...person,
+        Promoted: promotionByPerson.get(person) || false
+      }));
     },
     groupFencersByPool(poolResults) {
-      return poolResults.reduce((acc, person) => {
+      return poolResults.reduce((groupedFencers, person) => {
         const poolKey = person.PoolId || person.PoolName;
-        if (!acc[poolKey]) acc[poolKey] = [];
-        acc[poolKey].push(person);
-        return acc;
+        const poolFencers = groupedFencers[poolKey] || [];
+        return {
+          ...groupedFencers,
+          [poolKey]: [...poolFencers, person]
+        };
       }, {});
     },
     sortFencersByCriteria(poolFencers) {
@@ -242,23 +253,21 @@ export default {
     markTopFencers(poolFencers, numPromoted) {
       if (!Array.isArray(poolFencers)) {
         console.error('Invalid input to markTopFencers:', poolFencers);
-        return;
+        return new Map();
       }
 
-      poolFencers.forEach((person, index) => {
-        person.Promoted = index < numPromoted;
-      });
+      return new Map(poolFencers.map((person, index) => [person, index < numPromoted]));
     },
-    closeModal(){
-      this.showRemoveModal = false
-      this.withdrawPerson = {}
+    closeModal() {
+      this.showRemoveModal = false;
+      this.withdrawPerson = {};
     },
-    handleWithdraw(person){
-      this.showRemoveModal = true
-      this.withdrawPerson = person
+    handleWithdraw(person) {
+      this.showRemoveModal = true;
+      this.withdrawPerson = person;
     },
-    submitWithDraw(){
-      this.showRemoveModal = false
+    submitWithDraw() {
+      this.showRemoveModal = false;
       this.$emit('update:withdraw', this.withdrawPerson);
     },
     moveFencerDESeedUp(person) {
@@ -267,12 +276,12 @@ export default {
     moveFencerDESeedDown(person) {
       this.$emit('update:moveFencerDESeedDown', person);
     },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    },
-    clonePoolResults(poolResults) {
-      return Array.isArray(poolResults) ? poolResults.map(person => ({ ...person })) : [];
-    }
-  }
-};
-</script>
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    },
+    clonePoolResults(poolResults) {
+      return Array.isArray(poolResults) ? poolResults.map(person => ({ ...person })) : [];
+    }
+  }
+};
+</script>

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

@@ -2,64 +2,63 @@ import StaffList from './StaffList.vue';
 import getAllStaffByTournamentId from '../../../../mocks/getAllStaffByTournamentId.js';
 
 export default {
-    title: 'Templates/EventManagement/StaffList',
-    component: StaffList,
-    tags: ['autodocs'],
-    args: {
-        personsAll: [
-            { id: 1, firstName: 'John', lastName: 'Doe' },
-            { id: 2, firstName: 'Jane', lastName: 'Smith' },
-        ],
-        event: {
-            EventId: 1,
-            EventName: 'Sample Event'
-        },
-        fencingClubs: [
-            { ClubId: 1, Name: 'Acme Fencing Club' },
-            { ClubId: 2, Name: 'Global Fencing Academy' }
-        ],
-        staffMembers: getAllStaffByTournamentId,
-        role: 'admin'
+  title: 'Templates/EventManagement/StaffList',
+  component: StaffList,
+  tags: ['autodocs'],
+  args: {
+    personsAll: [
+      { id: 1, firstName: 'John', lastName: 'Doe' },
+      { id: 2, firstName: 'Jane', lastName: 'Smith' }
+    ],
+    event: {
+      EventId: 1,
+      EventName: 'Sample Event'
     },
-    argTypes: {
-        personsAll: {
-            control: 'object',
-        },
-        event: {
-            control: 'object',
-        },
-        fencingClubs: {
-            control: 'object',
-        },
-        staffMembers: {
-            control: 'object',
-        },
-        role: {
-            control: 'text',
-        },
-        'tab:menu-click': { action: 'tab:menu-click' },
-        'update:assignment': { action: 'update:assignment' },
-        'add:person': { action: 'add:person' },
-        'add:existing-person': { action: 'add:existing-person' },
+    fencingClubs: [
+      { ClubId: 1, Name: 'Acme Fencing Club' },
+      { ClubId: 2, Name: 'Global Fencing Academy' }
+    ],
+    staffMembers: getAllStaffByTournamentId,
+    role: 'admin'
+  },
+  argTypes: {
+    personsAll: {
+      control: 'object'
     },
+    event: {
+      control: 'object'
+    },
+    fencingClubs: {
+      control: 'object'
+    },
+    staffMembers: {
+      control: 'object'
+    },
+    role: {
+      control: 'text'
+    },
+    'tab:menu-click': { action: 'tab:menu-click' },
+    'update:assignment': { action: 'update:assignment' },
+    'add:person': { action: 'add:person' },
+    'add:existing-person': { action: 'add:existing-person' }
+  }
 };
 
-
-export const Default = {
-    args: {
-        personsAll: [
-            { id: 1, firstName: 'John', lastName: 'Doe' },
-            { id: 2, firstName: 'Jane', lastName: 'Smith' },
-        ],
-        event: {
-            EventId: 1,
-            EventName: 'Sample Event'
-        },
-        fencingClubs: [
-            { ClubId: 1, Name: 'Acme Fencing Club' },
-            { ClubId: 2, Name: 'Global Fencing Academy' }
-        ],
-        staffMembers: getAllStaffByTournamentId,
-        role: 'admin'
-    }
-};
+export const Default = {
+  args: {
+    personsAll: [
+      { id: 1, firstName: 'John', lastName: 'Doe' },
+      { id: 2, firstName: 'Jane', lastName: 'Smith' }
+    ],
+    event: {
+      EventId: 1,
+      EventName: 'Sample Event'
+    },
+    fencingClubs: [
+      { ClubId: 1, Name: 'Acme Fencing Club' },
+      { ClubId: 2, Name: 'Global Fencing Academy' }
+    ],
+    staffMembers: getAllStaffByTournamentId,
+    role: 'admin'
+  }
+};

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

@@ -1,7 +1,14 @@
 <template>
   <section>
-    <EditEventsTopMenu :currentTab="'Staff'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick"/>
-    <ToggleHeader :currentSelection="viewName" @update:selection="handleStaffView" firstButtonLabel="Staff List" secondButtonLabel="Staff Assignments"  :connectedToServer="false" :showConnected="false"/>
+    <EditEventsTopMenu :currentTab="'Staff'" :tabs="tabs(role, isMobile)" @tabMenuClick="handleTabMenuClick" />
+    <ToggleHeader
+      :currentSelection="viewName"
+      @update:selection="handleStaffView"
+      firstButtonLabel="Staff List"
+      secondButtonLabel="Staff Assignments"
+      :connectedToServer="false"
+      :showConnected="false"
+    />
 
     <div class="w-full flex flex-row justify-center mt-3">
       <section class="w-full">
@@ -9,41 +16,67 @@
           <section class="grid grid-cols-2 w-full py-2">
             <div class="col-start-1 col-end-2 flex justify-start">
               <FindOrAddPerson
-                  :persons="personsAll"
-                  :fencingClubs="fencingClubs"
-                  :addBorder="false"
-                  :addNewText="'Add Staff'"
-                  @new-person-submitted="handleNewPerson"
-                  @person-selected="handleAddExistingPerson" />
+                :persons="personsAll"
+                :fencingClubs="fencingClubs"
+                :addBorder="false"
+                :addNewText="'Add Staff'"
+                @new-person-submitted="handleNewPerson"
+                @person-selected="handleAddExistingPerson"
+              />
             </div>
             <div class="col-start-2 col-end-3 flex justify-end mt-4 mr-2">
-              <BaseText :text="staffCountText" size="sm" color="quaternary" weight="normal"/>
+              <BaseText :text="staffCountText" size="sm" color="quaternary" weight="normal" />
             </div>
           </section>
 
           <div v-if="staffMembers.length === 0" class="mb-10">
-            <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon"/>
-            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'0 staff members added yet.'"
-                      :weight="'normal'" data-testid="text-num-staff"/>
-            <BaseText :color="'primaryHighlight'" :size="'lg'" :text="'Click below to add the first staff member'"
-                      :weight="'normal'" data-testid="text-num-staff"/>
+            <img alt="Small desert scene with wind blowing." class="w-96" :src="emptyDesertIcon" />
+            <BaseText
+              :color="'primaryHighlight'"
+              :size="'lg'"
+              :text="'0 staff members added yet.'"
+              :weight="'normal'"
+              data-testid="text-num-staff"
+            />
+            <BaseText
+              :color="'primaryHighlight'"
+              :size="'lg'"
+              :text="'Click below to add the first staff member'"
+              :weight="'normal'"
+              data-testid="text-num-staff"
+            />
           </div>
 
           <div v-if="viewName === 'Staff List'" class="mt-4 w-full">
             <div v-for="staff in staffMembers" :key="staff.Id">
-              <StaffCard :staff="staff" class="mb-4" @update:assignment="handleAssignment" @remove:staff="handleRemoveStaff" />
+              <StaffCard
+                :staff="staff"
+                class="mb-4"
+                @update:assignment="handleAssignment"
+                @remove:staff="handleRemoveStaff"
+              />
             </div>
           </div>
 
           <div v-if="viewName === 'Staff Assignments'" class="mt-4 w-full">
             <div v-for="(pool, poolId) in groupedStaffByPool" :key="poolId">
-              <BaseText :text="`${pool.poolName} - ${pool.ringName}`" size="lg" color="quaternary" weight="bold" class="py-2 " />
-              <div v-for="staff in pool.staff" :key="staff.Id">
-                <StaffCard :staff="staff" class="mb-4" @update:assignment="handleAssignment" @remove:staff="handleRemoveStaff" />
-              </div>
-            </div>
+              <BaseText
+                :text="`${pool.poolName} - ${pool.ringName}`"
+                size="lg"
+                color="quaternary"
+                weight="bold"
+                class="py-2"
+              />
+              <div v-for="staff in pool.staff" :key="staff.Id">
+                <StaffCard
+                  :staff="staff"
+                  class="mb-4"
+                  @update:assignment="handleAssignment"
+                  @remove:staff="handleRemoveStaff"
+                />
+              </div>
+            </div>
           </div>
-
         </div>
       </section>
     </div>
@@ -51,14 +84,29 @@
 </template>
 
 <script>
-import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import EditEventsTopMenu from '../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
-import FindOrAddPerson from "../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue";
-import StaffCard from "../../../Organisms/Cards/StaffCard/StaffCard.vue";
-import ToggleHeader from "../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue";
+import FindOrAddPerson from '../../../Organisms/ComplexInputs/FindOrAddPerson/FindOrAddPerson.vue';
+import StaffCard from '../../../Organisms/Cards/StaffCard/StaffCard.vue';
+import ToggleHeader from '../../../Organisms/Headers/ToggleHeader/ToggleHeader.vue';
 import { tabs } from '../../../Util/tabs.js';
 
+const getStaffPoolDetails = item => ({
+  poolId: item.Pool ? item.Pool.PoolId : 'Unassigned',
+  poolName: item.Pool ? item.Pool.Name : 'Unassigned',
+  ringName: item.Pool ? item.Pool.RingName : ''
+});
+
+const addStaffToPool = (groupedStaff, item) => {
+  const { poolId, poolName, ringName } = getStaffPoolDetails(item);
+  const group = groupedStaff[poolId] || { poolName, ringName, staff: [] };
+  return {
+    ...groupedStaff,
+    [poolId]: { ...group, staff: [...group.staff, item] }
+  };
+};
+
 export default {
   emits: ['add:existing-person', 'add:person', 'remove:staff', 'tab:menu-click', 'update:assignment'],
   components: {
@@ -66,13 +114,13 @@ export default {
     FindOrAddPerson,
     EditEventsTopMenu,
     StaffCard,
-    BaseText,
+    BaseText
   },
   props: {
-    personsAll: {
-      type: Array,
-      default: () => []
-    },
+    personsAll: {
+      type: Array,
+      default: () => []
+    },
     event: Object,
     fencingClubs: {
       type: Array,
@@ -92,7 +140,7 @@ export default {
       emptyDesertIcon,
       tabs,
       windowWidth: window.innerWidth,
-      viewName: "Staff List"
+      viewName: 'Staff List'
     };
   },
   mounted() {
@@ -114,18 +162,7 @@ export default {
   },
   methods: {
     groupStaffByPool(staff) {
-      return staff.reduce((acc, item) => {
-        const poolId = item.Pool ? item.Pool.PoolId : 'Unassigned';
-        if (!acc[poolId]) {
-          acc[poolId] = {
-            poolName: item.Pool ? item.Pool.Name : 'Unassigned',
-            ringName: item.Pool ? item.Pool.RingName : '',
-            staff: []
-          };
-        }
-        acc[poolId].staff.push(item);
-        return acc;
-      }, {})
+      return staff.reduce(addStaffToPool, {});
     },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
@@ -139,15 +176,15 @@ export default {
     handleAddExistingPerson(value) {
       this.$emit('add:existing-person', value);
     },
-    handleStaffView(value){
+    handleStaffView(value) {
       this.viewName = value;
     },
-    handleRemoveStaff(value){
+    handleRemoveStaff(value) {
       this.$emit('remove:staff', value);
     },
     handleResize() {
       this.windowWidth = window.innerWidth;
     }
   }
-}
+};
 </script>