@dcrackel/hematournamentui 1.0.183 → 1.0.185

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="p-4 bg-neutral">
+
+    <div class="w-full flex flex-row justify-center mb-8">
+      <p :class="['bg-' + iconBackgroundColor, 'flex flex-row justify-center h-20 w-20 rounded-full', 'border border-' + iconBorderColor]">
+        <BaseIcon :icon-name="selectedDisplayType.text === 'ScoreBoard' ? 'fa-screencast' : 'fa-screen-users'" iconStyle="fa-solid" size="4xl" :color="iconColor" class="mb-3 mt-5" data-testid="base-icon" />
+      </p>
+    </div>
+
+    <div class="w-full flex flex-row justify-center my-4">
+      <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Add New Display'" :weight="'normal'" />
+    </div>
+
+    <!-- Display Name Input -->
+    <div class="mb-4">
+      <TitledInput :inputValue="localDisplay.displayName" :invalid="validation.displayName" placeholder="Enter Display Name"
+                   title="Display Name" @update:value="handleDisplayNameChange" />
+    </div>
+
+    <!-- Display Type Dropdown/Toggle -->
+    <div class="mb-4">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Display Type'" :weight="'normal'" class="mb-1"/>
+      <DropDownMenu :label="selectedDisplayType" :items="displayTypes" :selected-item="selectedDisplayType" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleDisplayTypeChange" />
+    </div>
+
+    <!-- Club Dropdown -->
+    <div class="mb-4" v-if="isAdmin">
+      <BaseText :color="'quinary'" :size="'sm'" :text="'Club'" :weight="'normal'" class="mb-1"/>
+      <DropDownMenu :label="selectedClub" :items="clubs" :selected-item="selectedClub" :alignEnd="false" :width="'w-full'" @update:selectedItem="handleClubChange" />
+    </div>
+    <div class="mb-4" v-else>
+      <TitledInput :inputValue="selectedClub.text" :disabled="true" title="Club" />
+    </div>
+
+    <!-- Submit and Cancel Buttons -->
+    <div class="flex flex-row justify-center mt-10">
+      <div class="w-1/2 ml-1">
+        <BaseButton class="w-full" color="neutral" label="Cancel" size="sm" type="primary" @click="handleCancel"/>
+      </div>
+      <div class="w-1/2 ml-1">
+        <BaseButton class="w-full transition-all duration-300 ease-in-out" color="neutral" label="Save" size="sm" type="primary" :selected="true" @click="handleSubmit"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+
+export default {
+  name: 'AddDisplay',
+  components: {BaseIcon, TitledInput, BaseText, DropDownMenu, BaseButton },
+  props: {
+    clubs: {
+      type: Array,
+      required: true
+    },
+    userClub: {
+      type: Object,
+      required: true
+    },
+    isAdmin: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      iconName: 'fa-check-circle',
+      iconColor: 'accepted',
+      iconBackgroundColor: 'acceptedHighlight',
+      localDisplay: {
+        displayName: '',
+        displayType: '',
+        clubId: ''
+      },
+      selectedDisplayType: { text: 'ScoreBoard', link: 'ScoreBoard' },
+      selectedClub: this.userClub || (this.clubs.length === 1 ? this.clubs[0] : { text: '', link: '' }),
+      validation: {
+        displayName: false,
+        displayType: false,
+        club: false
+      },
+      displayTypes: [
+        { text: 'ScoreBoard', link: 'ScoreBoard' },
+        { text: 'FlightBoard', link: 'FlightBoard' }
+      ]
+    };
+  },
+  methods: {
+    handleDisplayNameChange(value) {
+      this.localDisplay.displayName = value;
+    },
+    handleDisplayTypeChange(value) {
+      this.selectedDisplayType = value;
+      this.localDisplay.displayType = value.link;
+    },
+    handleClubChange(value) {
+      this.selectedClub = value;
+      this.localDisplay.clubId = value.link;
+    },
+    handleSubmit() {
+      this.validateForm();
+      if (!this.hasValidationErrors()) {
+        console.log(this.localDisplay);
+        this.$emit('update:submit', this.localDisplay);
+      }
+    },
+    handleCancel() {
+      this.$emit('update:cancel');
+    },
+    validateForm() {
+      this.validation.displayName = !this.localDisplay.displayName;
+      this.validation.displayType = !this.localDisplay.displayType;
+      this.validation.club = !this.localDisplay.clubId;
+    },
+    hasValidationErrors() {
+      return this.validation.displayName || this.validation.displayType || this.validation.club;
+    }
+  },
+  mounted() {
+    if (this.userClub || this.clubs.length === 1) {
+      this.localDisplay.clubId = this.selectedClub.link;
+    }
+  }
+};
+</script>
+

package/src/stories/Organisms/ScoreBoardParts/FencerNameBar/FencerNameBar.vue

@@ -8,7 +8,7 @@
     />
     <FencerName
         :fullName="bout.Person2.DisplayName"
-        :club="bout.Person1.Club.Name"
+        :club="bout.Person2.Club.Name"
         :assignedColor="hostingClubColors.Color2"
         :fencer1="false"
     />

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

@@ -111,6 +111,7 @@ export default {
       selectedBout: {},
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},

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

@@ -0,0 +1,44 @@
+import ClubDisplay from './ClubDisplay.vue';
+import getCLubDisplayByClubId from "../../../../mocks/getClubDisplayByClubId.js";
+import getAllStaffByTournamentId from "../../../../mocks/getAllStaffByTournamentId.js";
+import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+
+// isAdmin: {
+// userClub: {
+// clubs: {
+
+
+export default {
+    title: 'Templates/EventManagement/ClubDisplay',
+    component: ClubDisplay,
+    tags: ['autodocs'],
+    args: {
+        displays: getCLubDisplayByClubId,
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId,
+        isAdmin: false,
+        userClub: {text: 'Cats Club', link: '1'},
+        clubs: []
+    },
+    argTypes: {
+        displays: { control: 'object' },
+        staffDropDown: { control: 'object' },
+        eventDropDown: { control: 'object' },
+        isAdmin: { control: 'boolean' },
+        userClub: { control: 'object' },
+        clubs: { control: 'array '},
+    },
+};
+
+
+export const Default = {
+    args: {
+        displays: getCLubDisplayByClubId,
+        staffDropDown: getAllStaffByTournamentId,
+        eventDropDown: getEventByTournamentId,
+        isAdmin: false,
+        userClub: {text: 'Cats Club', link: '1'},
+        clubs: []
+    }
+};
+

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

@@ -0,0 +1,88 @@
+<template>
+  <section>
+    <EditEventsTopMenu :currentTab="'Displays'" :tabs="tabs" @tabMenuClick="handleTabMenuClick"/>
+    <ClubDisplayContainer :displays="displays" :eventDropDown="eventDropDown" :staffDropDown="staffDropDown" />
+    <div class="w-full flex justify-end mt-4">
+      <BaseButton iconName="fa-circle-plus" label="Add Display" icon-class="fa-regular" size="xs" type="primary" @click="openModal" />
+    </div>
+
+    <AddDisplayModal :show="showModal" :isAdmin="isAdmin" :userClub="userClub" :clubs="clubs" @close:closeModal="closeModal" @submit:display="handleAddDisplay" />
+  </section>
+</template>
+
+<script>
+import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
+import EditEventsTopMenu from "../../Menus/EditEventsTopMenu/EditEventsTopMenu.vue";
+import ClubDisplayContainer from "../../../Organisms/Containers/ClubDisplayContainer/ClubDisplayContainer.vue";
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import AddDisplayModal from "../../../Molecules/Modals/AddDisplayModal/AddDisplayModal.vue";
+
+
+export default {
+  components: {
+    AddDisplayModal,
+    BaseButton,
+    ClubDisplayContainer,
+    EditEventsTopMenu
+
+  },
+  props: {
+    displays: {
+      type: Array,
+      required: true
+    },
+    eventDropDown: {
+      type: Array,
+      required: true
+    },
+    staffDropDown: {
+      type: Array,
+      required: true
+    },
+    isAdmin: {
+      type: Boolean,
+      required: true
+    },
+    userClub: {
+      type: Object,
+      required: true
+    },
+    clubs: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      emptyDesertIcon,
+      showModal: false,
+      tabs: [
+        {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
+        {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
+        {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
+        {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},
+        {id: 'Bracket', label: 'Bracket', color: 'primaryHighlight'},
+        {id: 'Final', label: 'Final Results', color: 'primaryHighlight'}
+      ],
+    }
+  },
+  computed: {
+  },
+  methods: {
+    openModal() {
+      console.log("open modal")
+      this.showModal = true;
+    },
+    closeModal() {
+      this.showModal = false;
+    },
+    handleAddDisplay(display) {
+      this.$emit('add:display', display);
+    },
+    handleTabMenuClick(value) {
+      this.$emit('tab:menu-click', value);
+    },
+  }
+}
+</script>

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

@@ -81,6 +81,7 @@ export default {
       emptyDesertIcon,
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},

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

@@ -30,6 +30,7 @@ export default {
     return {
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},

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

@@ -139,6 +139,7 @@ export default {
       selectedBout: {},
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},

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

@@ -70,6 +70,7 @@ export default {
       emptyDesertIcon,
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},

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

@@ -62,6 +62,7 @@ export default {
     return {
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},

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

@@ -83,6 +83,7 @@ export default {
       emptyDesertIcon,
       tabs: [
         {id: 'Staff', label: 'Staff', color: 'primaryHighlight'},
+        {id: 'Displays', label: 'Displays', color: 'primaryHighlight'},
         {id: 'Checkin', label: 'Seeding & Checkin', color: 'primaryHighlight'},
         {id: 'Pools', label: 'Pools', color: 'primaryHighlight'},
         {id: 'Pool Results', label: 'Pool Results', color: 'primaryHighlight'},