@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -1,79 +1,85 @@
 <template>
-  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-poolBox hover:border-bright p-2 md:p-3">
-
+  <div
+    class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-poolBox hover:border-bright p-2 md:p-3"
+  >
     <div class="flex ml-2 md:mr-6">
-      <BaseIcon :icon-name="getIcon" size="" class="text-sm md:text-2xl" :color="getIconColorByConnected"/>
+      <BaseIcon :icon-name="getIcon" size="" class="text-sm md:text-2xl" :color="getIconColorByConnected" />
     </div>
 
     <div class="flex flex-col w-full justify-start">
       <div class="hidden md:flex w-full justify-between">
         <div class="flex w-11 md:w-16 rounded-lg justify-center mr-4 mt-1" :class="'bg-' + getIconColorByConnected">
-          <BaseText :text="editableKiosk.KioskId" size="" color="neutral" class="w-40 mt-1.5 text-center"/>
+          <BaseText :text="editableKiosk.KioskId" size="" color="neutral" class="w-40 mt-1.5 text-center" />
         </div>
         <div class="flex justify-start w-full mt-0.5">
-
-          <div v-if="userRole !== 'Director'" class="flex w-64" >
-            <BaseText :text="editableKiosk.Type === 'ScoreBoard' ? 'Ring' : 'Name' " size="md" color="quinary" class="mt-1.5 text-center px-4"/>
+          <div v-if="userRole !== 'Director'" class="flex w-64">
+            <BaseText
+              :text="editableKiosk.Type === 'ScoreBoard' ? 'Ring' : 'Name'"
+              size="md"
+              color="quinary"
+              class="mt-1.5 text-center px-4"
+            />
             <DropDownMenu
-                :label="editableKiosk.Type === 'ScoreBoard' ? 'Ring Name' : 'FlightBoard Name'"
-                :items="editableKiosk.Type === 'ScoreBoard' ? ringList :  flightBoardList"
-                :selectedItem="localSelectedRing"
-                :alignEnd="false"
-                width="w-40"
-                @update:selectedItem="handleRingChange"
+              :label="editableKiosk.Type === 'ScoreBoard' ? 'Ring Name' : 'FlightBoard Name'"
+              :items="editableKiosk.Type === 'ScoreBoard' ? ringList : flightBoardList"
+              :selectedItem="localSelectedRing"
+              :alignEnd="false"
+              width="w-40"
+              @update:selectedItem="handleRingChange"
             />
           </div>
           <div v-else class="w-64">
-            <BaseText :text="localSelectedRing.text" size="md" color="quinary" class="mt-1.5 text-center px-4"/>
+            <BaseText :text="localSelectedRing.text" size="md" color="quinary" class="mt-1.5 text-center px-4" />
           </div>
 
           <div v-if="editableKiosk.Type === 'ScoreBoard'" class="flex w-1/2 mx-4">
-            <DropDownMenu v-if="userRole !== 'Director'"
-                          label="Assigned To"
-                          :items="formattedStaff"
-                          :selectedItem="localSelectedStaff"
-                          :alignEnd="false"
-                          width="max-w-56"
-                          @update:selectedItem="handleStaffChange"
+            <DropDownMenu
+              v-if="userRole !== 'Director'"
+              label="Assigned To"
+              :items="formattedStaff"
+              :selectedItem="localSelectedStaff"
+              :alignEnd="false"
+              width="max-w-56"
+              @update:selectedItem="handleStaffChange"
             />
             <div v-else class="w-1/2">
-              <BaseText :text="localSelectedStaff.text" size="md" color="quinary" class="text-center px-4 mt-1.5"/>
+              <BaseText :text="localSelectedStaff.text" size="md" color="quinary" class="text-center px-4 mt-1.5" />
             </div>
           </div>
           <div v-if="editableKiosk.Type === 'FlightBoard'" class="flex w-1/2 mx-4">
             <DropDownMenu
-                label="Event"
-                :items="formattedEvents"
-                :selectedItem="localSelectedEvent"
-                :alignEnd="false"
-                width="max-w-56"
-                @update:selectedItem="handleEventChange"
+              label="Event"
+              :items="formattedEvents"
+              :selectedItem="localSelectedEvent"
+              :alignEnd="false"
+              width="max-w-56"
+              @update:selectedItem="handleEventChange"
             />
-          </div>
-          <div class="flex justify-end w-full pr-4">
-            <BaseButton
-                v-if="editableKiosk.Type === 'ScoreBoard'"
-                :label="isTestMode ? 'Testing' : 'Test'"
-                size="xs"
-                type="primary"
-                :selected="isTestMode"
-                class="mr-6 shrink-0"
-                @buttonClick="handleScoreboardTest"
-            />
-            <ButtonBar
-                v-if="userRole !== 'Director'"
-                :buttons="typeButtons"
-                :selected="editableKiosk.Type || 'Unassigned'"
-                :selectedTextColor="'neutral'"
-                @update:selected="handleTypeChange"
+          </div>
+          <div class="flex justify-end w-full pr-4">
+            <BaseButton
+              v-if="editableKiosk.Type === 'ScoreBoard'"
+              :label="isTestMode ? 'Testing' : 'Test'"
+              size="xs"
+              type="primary"
+              :selected="isTestMode"
+              class="mr-6 shrink-0"
+              @buttonClick="handleScoreboardTest"
+            />
+            <ButtonBar
+              v-if="userRole !== 'Director'"
+              :buttons="typeButtons"
+              :selected="editableKiosk.Type || 'Unassigned'"
+              :selectedTextColor="'neutral'"
+              @update:selected="handleTypeChange"
             />
             <BaseButton
-                v-else
-                iconName="fa-user-plus"
-                label="Assign To Me"
-                size="sm"
-                type="primary"
-                @click="handleAssignToMe"
+              v-else
+              iconName="fa-user-plus"
+              label="Assign To Me"
+              size="sm"
+              type="primary"
+              @click="handleAssignToMe"
             />
           </div>
         </div>
@@ -81,46 +87,46 @@
       <!-- Mobile view -->
       <div class="flex md:hidden justify-between">
         <div class="flex" v-if="editableKiosk.Type === 'ScoreBoard'">
-          <BaseText :text="localSelectedRing.text" size="xs" color="quinary" class="mt-2 px-4 w-24 overflow-hidden"/>
-          <BaseText :text="localSelectedStaff.text" size="xs" color="quinary" class="mt-2 overflow-hidden"/>
+          <BaseText :text="localSelectedRing.text" size="xs" color="quinary" class="mt-2 px-4 w-24 overflow-hidden" />
+          <BaseText :text="localSelectedStaff.text" size="xs" color="quinary" class="mt-2 overflow-hidden" />
         </div>
         <div class="flex" v-if="editableKiosk.Type === 'FlightBoard'">
-          <BaseText :text="localSelectedRing.text" size="xs" color="quinary" class="mt-2 px-4 w-24 overflow-hidden"/>
-          <BaseText :text="localSelectedEvent.text" size="xs" color="quinary" class="mt-2 overflow-hidden"/>
+          <BaseText :text="localSelectedRing.text" size="xs" color="quinary" class="mt-2 px-4 w-24 overflow-hidden" />
+          <BaseText :text="localSelectedEvent.text" size="xs" color="quinary" class="mt-2 overflow-hidden" />
         </div>
         <div class="flex" v-if="editableKiosk.Type === 'Unassigned'">
-          <BaseText :text="localSelectedRing.text" size="xs" color="quinary" class="mt-2 px-4 w-24 overflow-hidden"/>
-          <BaseText :text="localSelectedEvent.text" size="xs" color="quinary" class="mt-2 overflow-hidden"/>
+          <BaseText :text="localSelectedRing.text" size="xs" color="quinary" class="mt-2 px-4 w-24 overflow-hidden" />
+          <BaseText :text="localSelectedEvent.text" size="xs" color="quinary" class="mt-2 overflow-hidden" />
         </div>
         <BaseButton
-            v-if="userRole === 'Club' || userRole === 'Admin'"
-            label="Edit"
-            size="xs"
-            type="primary"
-            @buttonClick="handleEditKiosk"
+          v-if="userRole === 'Club' || userRole === 'Admin'"
+          label="Edit"
+          size="xs"
+          type="primary"
+          @buttonClick="handleEditKiosk"
         />
       </div>
     </div>
     <div class="hidden md:block items-center text-center rounded-tr-lg rounded-br-lg px-2">
       <BaseIcon
-          v-if="userRole !== 'Director'"
-          iconName="fa-circle-xmark"
-          size=""
-          color="quaternary"
-          class="text-lg md:text-2xl"
-          hover="alarm"
-          @click="handleRemove"
+        v-if="userRole !== 'Director'"
+        iconName="fa-circle-xmark"
+        size=""
+        color="quaternary"
+        class="text-lg md:text-2xl"
+        hover="alarm"
+        @click="handleRemove"
       />
     </div>
   </div>
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
-import ButtonBar from "../../../Molecules/Buttons/ButtonBar/ButtonBar.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 ButtonBar from '../../../Molecules/Buttons/ButtonBar/ButtonBar.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 const connectedIconByType = {
   ScoreBoard: 'fa-wifi',
@@ -137,10 +143,57 @@ const connectedColorByType = {
   FlightBoard: 'toggleBackground'
 };
 
+const personDefaults = { DisplayName: 'Select Person', PersonId: null };
+const eventDefaults = { EventName: 'Select Event', EventId: null };
+
+const valueOrDefault = (value, fallback) => value || fallback;
+
+const createEditableKiosk = displayObject => ({
+  KioskId: valueOrDefault(displayObject.KioskId, ''),
+  DisplayName: valueOrDefault(displayObject.DisplayName, 'Select Ring'),
+  Type: valueOrDefault(displayObject.Type, 'Unassigned'),
+  AssignedTo: valueOrDefault(displayObject.AssignedTo, ''),
+  Person: { ...personDefaults, ...(displayObject.Person || {}) },
+  Event: { ...eventDefaults, ...(displayObject.Event || {}) },
+  Connected: valueOrDefault(displayObject.Connected, false)
+});
+
+const createRingSelection = displayObject => ({
+  text: valueOrDefault(displayObject.DisplayName, 'Select Ring'),
+  link: valueOrDefault(displayObject.AssignedToId, '')
+});
+
+const createStaffSelection = displayObject => ({
+  text: valueOrDefault(displayObject.Person?.DisplayName, 'Select Person'),
+  link: valueOrDefault(displayObject.Person?.PersonId, '')
+});
+
+const createEventSelection = displayObject => ({
+  text: valueOrDefault(displayObject.Event?.EventName, 'Select Event'),
+  link: valueOrDefault(displayObject.Event?.EventId, '')
+});
+
+const createKioskState = displayObject => ({
+  editableKiosk: createEditableKiosk(displayObject),
+  localSelectedRing: createRingSelection(displayObject),
+  localSelectedStaff: createStaffSelection(displayObject),
+  localSelectedEvent: createEventSelection(displayObject)
+});
+
 export default {
   name: 'KioskCardPC',
   components: { BaseIcon, BaseText, DropDownMenu, ButtonBar, BaseButton },
-  emits: ['update:kiosk', 'update:ringChange', 'update:staffChange', 'update:eventChange', 'update:selectedType', 'update:assignToMe', 'update:editKiosk', 'test:scoreboard', 'remove:kiosk'],
+  emits: [
+    'update:kiosk',
+    'update:ringChange',
+    'update:staffChange',
+    'update:eventChange',
+    'update:selectedType',
+    'update:assignToMe',
+    'update:editKiosk',
+    'test:scoreboard',
+    'remove:kiosk'
+  ],
   props: {
     displayObject: {
       type: Object,
@@ -171,28 +224,17 @@ export default {
     }
   },
   data() {
-    return {
-      editableKiosk: {
-        KioskId: this.displayObject.KioskId || '',
-        DisplayName: this.displayObject.DisplayName || 'Select Ring',
-        Type: this.displayObject.Type || 'Unassigned',
-        AssignedTo: this.displayObject.AssignedTo || '',
-        Person: this.displayObject.Person || { DisplayName: 'Select Person', PersonId: null },
-        Event: this.displayObject.Event || { EventName: 'Select Event', EventId: null },
-        Connected: this.displayObject.Connected || false
-      },
-      localSelectedRing: { text: this.displayObject.DisplayName || 'Select Ring', link: this.displayObject.AssignedToId || '' },
-      localSelectedStaff: { text: this.displayObject.Person?.DisplayName || 'Select Person', link: this.displayObject.Person?.PersonId || '' },
-      localSelectedEvent: { text: this.displayObject.Event?.EventName || 'Select Event', link: this.displayObject.Event?.EventId || '' }
-    };
+    return createKioskState(this.displayObject);
   },
-  computed: {
-    isTestMode() {
-      return Boolean(this.displayObject.TestMode);
-    },
+  computed: {
+    isTestMode() {
+      return Boolean(this.displayObject.TestMode);
+    },
     getIcon() {
       const iconMap = this.editableKiosk.Connected ? connectedIconByType : disconnectedIconByType;
-      return iconMap[this.editableKiosk.Type] || (this.editableKiosk.Connected ? 'fa-wifi-exclamation' : 'fa-wifi-slash');
+      return (
+        iconMap[this.editableKiosk.Type] || (this.editableKiosk.Connected ? 'fa-wifi-exclamation' : 'fa-wifi-slash')
+      );
     },
     getIconColorByConnected() {
       if (!this.editableKiosk.Connected) return 'quaternary';
@@ -277,20 +319,23 @@ export default {
           Connected: newVal.Connected || false
         };
         this.localSelectedRing = { text: this.editableKiosk.DisplayName, link: newVal.AssignedToId || '' };
-        this.localSelectedStaff = { text: this.editableKiosk.Person.DisplayName, link: this.editableKiosk.Person.PersonId };
+        this.localSelectedStaff = {
+          text: this.editableKiosk.Person.DisplayName,
+          link: this.editableKiosk.Person.PersonId
+        };
         this.localSelectedEvent = { text: this.editableKiosk.Event.EventName, link: this.editableKiosk.Event.EventId };
       }
     }
   },
-  methods: {
-    handleScoreboardTest() {
-      this.$emit('test:scoreboard', {
-        ...this.displayObject,
-        ...this.editableKiosk,
-        TestMode: !this.isTestMode
-      });
-    },
-    handleRingChange(item) {
+  methods: {
+    handleScoreboardTest() {
+      this.$emit('test:scoreboard', {
+        ...this.displayObject,
+        ...this.editableKiosk,
+        TestMode: !this.isTestMode
+      });
+    },
+    handleRingChange(item) {
       this.localSelectedRing = item;
       this.editableKiosk.DisplayName = item.text;
       this.editableKiosk.AssignedTo = item.link;

package/src/stories/Organisms/Cards/PenaltyCard/PenaltyCard.stories.js

@@ -1,24 +1,23 @@
-import PenaltyCard from "./PenaltyCard.vue";
-import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+import PenaltyCard from './PenaltyCard.vue';
+import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPoolId.js';
 
 export default {
-    title: 'Organisms/Cards/PenaltyCard',
-    component: PenaltyCard,
-    tags: ['autodocs'],
-    args: {
-        fencer1: false,
-        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
-    },
-    argTypes: {
-        fencer1: { control: 'boolean' },
-        bout: { control: 'object' },
-    },
-};
-
+  title: 'Organisms/Cards/PenaltyCard',
+  component: PenaltyCard,
+  tags: ['autodocs'],
+  args: {
+    fencer1: false,
+    bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0]
+  },
+  argTypes: {
+    fencer1: { control: 'boolean' },
+    bout: { control: 'object' }
+  }
+};
 
 export const Default = {
-    args: {
-        fencer1: true,
-        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
-    }
-}
+  args: {
+    fencer1: true,
+    bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0]
+  }
+};