@dcrackel/hematournamentui 1.0.183 → 1.0.185

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.183",
+  "version": "1.0.185",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

package/src/mocks/getClubDisplayByClubId.js

@@ -0,0 +1,107 @@
+const getCLubDisplayByClubId =
+    [
+        {
+            "DisplayId": 1,
+            "DisplayName": "Ring 1",
+            "Type": "ScoreBoard",
+            "AssignedToType": "Person",
+            "AssignedToId": 1,
+            "ClubId": 1,
+            "Person": {
+                "PersonId": 1,
+                "DisplayName": "Dwain Crackel",
+                "Pronouns": "He/Him",
+                "FirstName": "Dave",
+                "LastName": "Smith",
+                "Birthday": "1980-07-16",
+                "ClubId": 4,
+                "ShowData": true,
+                "AccessLevel": "User"
+            },
+            "Event": null
+        },
+        {
+            "DisplayId": 2,
+            "DisplayName": "Ring 2",
+            "Type": "ScoreBoard",
+            "AssignedToType": "Person",
+            "AssignedToId": 2,
+            "ClubId": 1,
+            "Person": {
+                "PersonId": 2,
+                "DisplayName": "Kyle Edwards",
+                "Pronouns": "They/Them",
+                "FirstName": "Kyle",
+                "LastName": "Edwards",
+                "Birthday": null,
+                "ClubId": 6,
+                "ShowData": true,
+                "AccessLevel": "User"
+            },
+            "Event": null
+        },
+        {
+            "DisplayId": 3,
+            "DisplayName": "Ring 3",
+            "Type": "ScoreBoard",
+            "AssignedToType": "Person",
+            "AssignedToId": 3,
+            "ClubId": 1,
+            "Person": {
+                "PersonId": 3,
+                "DisplayName": "Dave Larabee",
+                "Pronouns": null,
+                "FirstName": "Dave",
+                "LastName": "Larabee",
+                "Birthday": null,
+                "ClubId": 3,
+                "ShowData": true,
+                "AccessLevel": "User"
+            },
+            "Event": null
+        },
+        {
+            "DisplayId": 4,
+            "DisplayName": "Ring 4",
+            "Type": "ScoreBoard",
+            "AssignedToType": "Person",
+            "AssignedToId": 4,
+            "ClubId": 1,
+            "Person": {
+                "PersonId": 4,
+                "DisplayName": "Kim Bullock",
+                "Pronouns": "He/Him",
+                "FirstName": "Kim",
+                "LastName": "Bullock",
+                "Birthday": "1963-07-09",
+                "ClubId": 1,
+                "ShowData": true,
+                "AccessLevel": "User"
+            },
+            "Event": null
+        },
+        {
+            "DisplayId": 5,
+            "DisplayName": "FlightBoard 1",
+            "Type": "FlightBoard",
+            "AssignedToType": "Event",
+            "AssignedToId": 6,
+            "ClubId": 1,
+            "Person": null,
+            "Event": {
+                "EventId": 6,
+                "TournamentId": 4,
+                "EventName": "Saber Cat Saber",
+                "Date": "2024-06-16",
+                "StartTime": "23:03:24",
+                "NumberOfRings": 2,
+                "NumberOfPools": 3,
+                "PoolSize": 7,
+                "Flights": 1,
+                "WeaponId": 2,
+                "Status": "live"
+            }
+        }
+    ]
+
+export default getCLubDisplayByClubId;

package/src/mocks/getEventByTournamentId.js

@@ -0,0 +1,50 @@
+const getEventByTournamentId =
+[
+    {
+        "EventId": 5,
+        "TournamentId": 4,
+        "EventName": "Feline Longsword",
+        "Date": "2024-05-22",
+        "StartTime": "17:25:31",
+        "NumberOfRings": 2,
+        "NumberOfPools": 3,
+        "PoolSize": 7,
+        "Flights": 1,
+        "WeaponId": 1,
+        "Status": "completed",
+        "Present": 10,
+        "Absent": 0
+    },
+    {
+        "EventId": 6,
+        "TournamentId": 4,
+        "EventName": "Saber Cat Saber",
+        "Date": "2024-06-16",
+        "StartTime": "23:03:24",
+        "NumberOfRings": 2,
+        "NumberOfPools": 3,
+        "PoolSize": 7,
+        "Flights": 1,
+        "WeaponId": 2,
+        "Status": "live",
+        "Present": 6,
+        "Absent": 0
+    },
+    {
+        "EventId": 7,
+        "TournamentId": 4,
+        "EventName": "Paws and Effect",
+        "Date": "2024-07-17",
+        "StartTime": "11:00:00",
+        "NumberOfRings": 3,
+        "NumberOfPools": 3,
+        "PoolSize": 7,
+        "Flights": 1,
+        "WeaponId": 3,
+        "Status": "planning",
+        "Present": 0,
+        "Absent": 0
+    }
+];
+
+export default getEventByTournamentId;

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -63,7 +63,7 @@ export default {
       }[props.size];
 
       const typeClass = {
-        primary: `mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ${props.selected ? 'bg-dropdownSelect' : 'bg-neutral'}`,
+        primary: `mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ${props.selected ? 'bg-dropdownSelect shadow-md' : 'bg-neutral'}`,
         secondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center hover:bg-primaryHighlight ${props.selected ? 'bg-secondary' : 'bg-primary'}`,
         tertiary: `px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center border border-dropdownSelect hover:bg-dropdownSelect ${props.selected ? 'bg-primary' : 'bg-tertiary'}`,
         bright: `px-3 py-1 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ${props.selected ? 'bg-primary' : 'bg-bright'}`,
@@ -86,7 +86,7 @@ export default {
     return {
       textColor: computed(() => {
         const colorMap = {
-          primary: 'primary',
+          primary: 'quinary',
           secondary: 'neutral',
           tertiary: 'quinary',
           bright: 'neutral',

package/src/stories/Molecules/Modals/AddDisplayModal/AddDisplay.stories.js

@@ -0,0 +1,47 @@
+import AddDisplayModal from './AddDisplayModal.vue';
+import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
+import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js";
+
+export default {
+    title: 'Molecules/Modals/AddDisplayModal',
+    component: AddDisplayModal,
+    tags: ['autodocs'],
+    args: {
+        displayType: "ScoreBoard",
+        displayName: "Ring 1",
+        assignedTo: { text: "Dave Smith", link: "1" },
+        assignedToEvent: { text: "Cats and things", link: "1" },
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+    argTypes: {
+        displayType: { control: { type: 'text' } },
+        displayName: { control: { type: 'text' } },
+        assignedTo: { control: { type: 'object' } },
+        assignedToEvent: { control: { type: 'object' } },
+        staffDropDown: { control: { type: 'array' } },
+        eventDropDown: { control: { type: 'array' } },
+    },
+};
+
+export const Default = {
+    args: {
+        displayType: "ScoreBoard",
+        displayName: "Ring 1",
+        assignedTo: { text: "Dave Smith", link: "1" },
+        assignedToEvent: { text: "Cats and things", link: "1" },
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+};
+
+export const WithInitialCount = {
+    args: {
+        displayType: "FlightBoard",
+        displayName: "FlightBoard 1",
+        assignedTo: { text: "Jenny Jones", link: "2" },
+        assignedToEvent: { text: "Cats and things", link: "1" },
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+};

package/src/stories/Molecules/Modals/AddDisplayModal/AddDisplayModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <transition
+      enter-active-class="transition-opacity duration-500"
+      enter-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-500"
+      leave-class="opacity-100"
+      leave-to-class="opacity-0"
+  >
+    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50" @click="handleClose">
+      <div class="w-1/3 min-w-[30rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
+        <div class="flex w-full justify-end mt-1">
+          <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="handleClose"/>
+        </div>
+        <AddDisplay :isAdmin="isAdmin" :clubs="clubs" :userClub="userClub" @update:cancel="handleClose" @update:submit="handleSubmit"   />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import DirectorCard from "../../../Organisms/Cards/Director/DirectorCard.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import AddDisplay from "../../../Organisms/Form/AddDisplay/AddDisplay.vue";
+
+export default {
+  name: "AddDisplayModal",
+  components: {AddDisplay, BaseIcon, DirectorCard},
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    clubs: {
+      type: Array,
+      required: true
+    },
+    userClub: {
+      type: Object,
+      required: true
+    },
+    isAdmin: {
+      type: Boolean,
+      required: true
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close:closeModal');
+    },
+    handleSubmit(display) {
+      this.$emit('submit:display', display);
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.vue

@@ -7,8 +7,7 @@
       leave-class="opacity-100"
       leave-to-class="opacity-0"
   >
-    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
-         @click="close">
+    <div v-if="show" class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50" @click="close">
       <div class="w-1/3 min-w-[30rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
           <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close"/>

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

@@ -0,0 +1,47 @@
+import DisplayCard from './DisplayCard.vue';
+import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
+import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js";
+
+export default {
+    title: 'Organisms/Cards/DisplayCard',
+    component: DisplayCard,
+    tags: ['autodocs'],
+    args: {
+        displayType: "ScoreBoard",
+        displayName: "Ring 1",
+        assignedTo: { text: "Dave Smith", link: "1" },
+        assignedToEvent: { text: "Cats and things", link: "1" },
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+    argTypes: {
+        displayType: { control: { type: 'text' } },
+        displayName: { control: { type: 'text' } },
+        assignedTo: { control: { type: 'object' } },
+        assignedToEvent: { control: { type: 'object' } },
+        staffDropDown: { control: { type: 'array' } },
+        eventDropDown: { control: { type: 'array' } },
+    },
+};
+
+export const Default = {
+    args: {
+        displayType: "ScoreBoard",
+        displayName: "Ring 1",
+        assignedTo: { text: "Dave Smith", link: "1" },
+        assignedToEvent: { text: "Cats and things", link: "1" },
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+};
+
+export const WithInitialCount = {
+    args: {
+        displayType: "FlightBoard",
+        displayName: "FlightBoard 1",
+        assignedTo: { text: "Jenny Jones", link: "2" },
+        assignedToEvent: { text: "Cats and things", link: "1" },
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+};

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-md bg-poolBox hover:border-bright">
+    <div class="mr-4 pl-4 h-14 pt-3">
+      <base-icon v-if="displayType === 'ScoreBoard'" icon-name="fa-screencast" size="2xl" color="quaternary" />
+      <base-icon v-if="displayType === 'FlightBoard'" icon-name="fa-screen-users" size="2xl" color="quaternary" />
+    </div>
+    <div class="flex flex-col w-full justify-start">
+      <div class="w-full flex justify-start">
+        <BaseText :text="displayName" size="lg" color="quaternary" class="w-40 mt-1"/>
+        <div class="flex justify-start w-full">
+          <DropDownMenu v-if="displayType === 'ScoreBoard'"  :label="'Assigned: '" :items="formattedStaff" :selectedItem="localSelectedStaff" :alignEnd="false" width="w-52" @update:selectedItem="handleAssignmentStaff" />
+          <DropDownMenu v-if="displayType === 'FlightBoard'" :label="'Event: '" :items="formattedEvents" :selectedItem="localSelectedEvent" :alignEnd="false" width="w-52" @update:selectedItem="handleAssignmentEvent" />
+        </div>
+      </div>
+    </div>
+
+    <div class="border-l h-14 border-dropdownSelect items-center text-center hover:bg-eventBoxRed rounded-tr-lg rounded-br-lg px-2">
+      <BaseIcon iconName="fa-circle-xmark" size="2xl" color="quinary" class="pt-3" hover="alarm" @click="handlePopModal"/>
+    </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";
+
+export default {
+  name: 'DisplayCard',
+  components: { DropDownMenu, BaseText, BaseIcon },
+  props: {
+    displayType: {
+      type: String,
+      required: true
+    },
+    displayName: {
+      type: String,
+      required: false
+    },
+    assignedTo: {
+      type: Object,
+      required: false,
+      default: () => ({ text: '', link: '' })
+    },
+    assignedToEvent: {
+      type: Object,
+      required: false,
+      default: () => ({ text: '', link: '' })
+    },
+    staffDropDown: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    eventDropDown: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      localSelectedStaff: this.assignedTo,
+      localSelectedEvent: this.assignedToEvent
+    };
+  },
+  computed: {
+    formattedStaff() {
+      return this.staffDropDown.map(staff => ({
+        text: staff.Person.DisplayName,
+        link: staff.PersonId.toString()
+      }));
+    },
+    formattedEvents() {
+      return this.eventDropDown.map(event => ({
+        text: event.EventName,
+        link: event.EventId.toString()
+      }));
+    },
+  },
+  methods: {
+    handlePopModal() {
+      this.$emit('pop:modal');
+    },
+    handleAssignmentStaff(item) {
+      this.localSelectedStaff = item;
+      this.$emit('update:selectedStaff', item);
+    },
+    handleAssignmentEvent(item) {
+      this.localSelectedEvent = item;
+      this.$emit('update:selectedEvent', item);
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row w-full relative" :class="[alignEnd ? 'justify-end' : '']">
-    <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect" :class="width" @click="handleDropDown()">
+    <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect bg-white" :class="width" @click="handleDropDown()">
       <BaseText v-if="label.length > 1" :text="label" color="quinary" size="sm" weight="normal" />
       <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
       <i class="fa-solid fa-chevron-down text-xs text-quinary" />

package/src/stories/Organisms/Containers/ClubDisplayContainer/ClubDisplayContainer.stories.js

@@ -0,0 +1,30 @@
+import ClubDisplayContainer from './ClubDisplayContainer.vue'
+import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js";
+import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
+import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+
+export default {
+    title: 'Organisms/Containers/ClubDisplayContainer',
+    component: ClubDisplayContainer,
+    tags: ['autodocs'],
+    args: {
+        displays: getCLubDisplayByClubId,
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    },
+    argTypes: {
+        displays: { control: 'object' },
+        staffDropDown: { control: 'object' },
+        eventDropDown: { control: 'object' },
+    },
+}
+
+//let modifiedEvent = {...generateFinalResults, Status: "results"}
+export const Default = {
+    args: {
+        displays: getCLubDisplayByClubId,
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId
+    }
+}
+

package/src/stories/Organisms/Containers/ClubDisplayContainer/ClubDisplayContainer.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="mt-3">
+    <div class="flex flex-col w-full relative">
+      <section v-if="!displays">
+        <img alt="Small desert scene with wind blowing." class="w-96 mx-auto" :src="emptyDesertIcon"/>
+        <div class="w-full flex justify-center">
+          <div class="w-96">
+            <BaseText text="No Results Yet!" size="lg" color="quinary" weight="bold" class="text-center"/>
+            <BaseText
+                text="Pool results will be displayed here once all bouts have completed and the 'Generate Pool Results' button has been clicked on the Pools Tab."
+                size="sm" color="quinary" class="text-center"/>
+          </div>
+        </div>
+      </section>
+
+      <section v-if="scoreboards.length > 0" class="flex flex-col">
+        <div>
+          <BaseText text="Scoreboards" size="lg" color="primaryHighlight" weight="bold" class="w-full text-left"/>
+          <div class="border-b border-dropdownSelect  mb-4" />
+          <div v-for="scoreboard in scoreboards" :key="scoreboard.DisplayId" class="flex flex-col py-1">
+            <DisplayCard :assignedTo="transformAssignedTo(scoreboard)"
+                         :displayName="scoreboard.DisplayName"
+                         :displayType="scoreboard.Type"
+                         :eventDropDown="eventDropDown"
+                         :staffDropDown="staffDropDown"
+            />
+          </div>
+        </div>
+
+        <div v-if="flightBoards.length > 0" class="mt-10">
+          <BaseText text="Flight Boards" size="lg" color="primaryHighlight" weight="bold" class="w-full text-left"/>
+          <div class="border-b border-dropdownSelect  mb-4" />
+          <div v-for="flightBoard in flightBoards" :key="flightBoard.DisplayId" class="flex flex-col py-1">
+            <DisplayCard :assignedToEvent="transformAssignedTo(flightBoard)"
+                         :displayName="flightBoard.DisplayName"
+                         :displayType="flightBoard.Type"
+                         :eventDropDown="eventDropDown"
+                         :staffDropDown="staffDropDown"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import DisplayCard from "../../Cards/DisplayCard/DisplayCard.vue";
+
+
+export default {
+  components: {
+    DisplayCard,
+    BaseText,
+    emptyDesertIcon
+  },
+  props: {
+    displays: {
+      type: Array,
+      required: true
+    },
+    eventDropDown: {
+      type: Array,
+      required: true
+    },
+    staffDropDown: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      emptyDesertIcon
+    }
+  },
+  computed: {
+    scoreboards() {
+      return this.displays.filter(display => display.Type === 'ScoreBoard');
+    },
+    flightBoards() {
+      return this.displays.filter(display => display.Type === 'FlightBoard');
+    }
+  },
+  methods: {
+    transformAssignedTo(scoreboard) {
+      if (scoreboard.Person) {
+        return { text: scoreboard.Person.DisplayName, link: scoreboard.Person.DisplayName };
+      }
+
+      if (scoreboard.Event) {
+        console.log("EVENT")
+        console.log(scoreboard.Event.EventName)
+        return { text: scoreboard.Event.EventName, link: scoreboard.Event.EventName };
+      }
+
+      return { text: '', link: '' }
+    }
+  }
+}
+</script>
+
+
+
+

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

@@ -0,0 +1,36 @@
+import AddDisplay from './AddDisplay.vue';
+import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+
+export default {
+    title: 'Organisms/Forms/AddDisplay',
+    component: AddDisplay,
+    args: {
+        clubs: getEventByTournamentId,
+        userClub: { text: 'Club A', link: '1' },
+        isAdmin: true
+    },
+    argTypes: {
+        clubs: { control: 'object' },
+        userClub: { control: 'object' },
+        isAdmin: { control: 'boolean' }
+    },
+};
+
+export const Default = {
+    args: {
+        clubs: [
+            { text: 'Club A', link: '1' },
+            { text: 'Club B', link: '2' }
+        ],
+        userClub: { text: 'Club A', link: '1' },
+        isAdmin: true
+    }
+};
+
+export const ClubLevelUser = {
+    args: {
+        clubs: getEventByTournamentId,
+        userClub: { text: 'Club A', link: '1' },
+        isAdmin: false
+    }
+};