@dcrackel/hematournamentui 1.0.699 → 1.0.702

package/src/stories/Templates/Menus/EditEventsTopMenu/EditEventsTopMenu.vue

@@ -20,11 +20,11 @@
         </div>
       </TabBar>
     </section>
-    <section v-if="activeDropdown" class="bg-eventBoxBlue rounded w-full -mt-4 grid grid-cols-4 gap-4 pt-3 pb-1">
-      <div v-for="item in selectedDropdownItem" class="flex flex-col items-center justify-center mb-2 mr-2">
-        <BaseIcon size="md" :iconName="item.icon" :color="item.color" class="w-6 mb-1 text-center"/>
-        <BaseText size="xs" :color="item.color" :text="item.label" @click="handleButtonClick(item.id)" class="text-center"/>
-      </div>
+    <section v-if="activeDropdown" class="bg-eventBoxBlue rounded w-full -mt-4 grid grid-cols-4 gap-4 pt-3 pb-1">
+      <div v-for="item in selectedDropdownItems" :key="item.id" class="flex flex-col items-center justify-center mb-2 mr-2">
+        <BaseIcon size="md" :iconName="item.icon" :color="item.color" class="w-6 mb-1 text-center"/>
+        <BaseText size="xs" :color="item.color" :text="item.label" @click="handleButtonClick(item.id)" class="text-center"/>
+      </div>
     </section>
   </div>
 </template>
@@ -32,71 +32,68 @@
 
 <script>
 import TabBar from "../../../Molecules/Menus/TabBar/TabBar.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-
-export default {
-  components: {
-    DropDownMenu,
-    BaseIcon,
-    BaseText,
-    TabBar,
+import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+
+export default {
+  components: {
+    BaseIcon,
+    BaseText,
+    TabBar,
     BaseButton
   },
   emits: ['tabMenuClick'],
   props: {
-    currentTab: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    tabs: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      windowWidth: window.innerWidth,
-      activeDropdown: null,
-      selectedDropdownItem: []
-    };
-  },
-  computed: {
-    isMobile() {
-      return this.windowWidth <= 748;
-    },
-  },
-  mounted() {
-    window.addEventListener('resize', this.handleResize);
-  },
+    currentTab: {
+      type: String,
+      default: ''
+    },
+    tabs: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      windowWidth: 1024,
+      activeDropdown: null,
+    };
+  },
+  computed: {
+    isMobile() {
+      return this.windowWidth <= 748;
+    },
+    selectedDropdownItems() {
+      return this.tabs.find((tab) => tab.id === this.activeDropdown)?.children || [];
+    },
+  },
+  mounted() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  },
   beforeUnmount() {
     window.removeEventListener('resize', this.handleResize);
   },
   methods: {
     handleButtonClick(buttonId) {
       const selectedTab = this.tabs.find((tab) => tab.id === buttonId);
-      if (selectedTab && selectedTab.children && this.isMobile) {
-        this.activeDropdown = this.activeDropdown === buttonId ? null : buttonId;
-        this.selectedDropdownItem = this.activeDropdown ? selectedTab.children : [];
-        return
-      }
-
-      this.activeDropdown = null;
-      this.selectedDropdownItem = [];
-
-      this.$emit('tabMenuClick', buttonId);
+      if (selectedTab && selectedTab.children && this.isMobile) {
+        this.activeDropdown = this.activeDropdown === buttonId ? null : buttonId;
+        return
+      }
+
+      this.activeDropdown = null;
+
+      this.$emit('tabMenuClick', buttonId);
     },
     getIconName(tab) {
       if (this.isMobile) return tab.icon;
       return '';
-    },
-    handleResize() {
-      this.windowWidth = window.innerWidth;
-    }
-  }
-}
+    },
+    handleResize() {
+      this.windowWidth = window?.innerWidth || 1024;
+    }
+  }
+}
 </script>

package/src/stories/Templates/PersonManagement/Admin/Administration/Administration.stories.js

@@ -0,0 +1,67 @@
+import Administration from './Administration.vue';
+import personsMock from "../../../../../mocks/personsMock.js";
+
+export default {
+    title: 'Templates/PersonManagement/Admin/Administration',
+    component: Administration,
+    tags: ['autodocs'],
+    args: {
+        person: personsMock[1],
+        userLevel: 'Club'
+    },
+    argTypes: {
+        person: { control: { type: 'object' } },
+        userLevel: {
+            control: { type: 'select' },
+            options: ['User', 'Director', 'Club', 'Admin']
+        },
+        'update:person': { action: 'update:person' }
+    }
+};
+
+export const Default = {
+    args: {
+        person: personsMock[1],
+        userLevel: 'Club'
+    }
+};
+
+export const AdminCanSelectAdminAccess = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: 'Admin'
+        },
+        userLevel: 'Admin'
+    }
+};
+
+export const AdminEditingUserAccess = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: 'User'
+        },
+        userLevel: 'Admin'
+    }
+};
+
+export const WithoutHemaRating = {
+    args: {
+        person: {
+            ...personsMock[1],
+            HemaRatingsId: ''
+        },
+        userLevel: 'Club'
+    }
+};
+
+export const EmptyAccessLevel = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: ''
+        },
+        userLevel: 'Club'
+    }
+};

package/src/stories/Templates/PersonManagement/Admin/{Administration.vue → Administration/Administration.vue}

@@ -1,87 +1,94 @@
-<template>
-  <section class="mt-2">
-    <div class="flex flex-col mb-4">
-      <TitledInput
-          :inputValue="personId"
-          :inputType="'number'"
-          placeholder="Meyer Squared ID"
-          title="Meyer Squared ID"
-          :disabled="true"
-          aria-disabled="true"
-      />
-    </div>
-
-    <div class="flex flex-col mb-4">
-      <TitledInput
-          :inputValue="hemaRatingId"
-          :inputType="'number'"
-          placeholder="HEMA Rating ID"
-          title="HEMA Rating ID"
-          @update:value="emitUpdate('HemaRatingsId', $event)"
-      />
-    </div>
-
-    <div class="flex flex-col mb-4">
-      <BaseText text="Access Level" size="sm" color="quaternary"/>
-      <DropDownMenu
-          :label="getAccessLevelLabel"
-          :items="accessLevels"
-          class="pb-2"
-          :selectedItem="getSelectedAccessLevel"
-          @update:selectedItem="emitUpdate('AccessLevel', $event.text)"
-          width="w-full"
-          dropDownWidth="w-full"
-      />
-    </div>
-  </section>
-</template>
-
-<script>
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import DropDownMenu from "../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
-
-export default {
-  name: "Administration",
-  emits: ["update:person"],
-  components: { TitledInput, BaseText, DropDownMenu },
-  props: {
-    person: { type: Object, required: true },
-    userLevel: { type: String, required: true },
-  },
-  computed: {
-    personId() {
-      return this.person?.PersonId ?? "";
-    },
-    hemaRatingId() {
-      return this.person?.HEMARatings?.[0]?.HemaRatingId ?? "";
-    },
-    accessLevels() {
-      if (this.userLevel === "Admin") {
-        return [
-          { text: "User", link: "User" },
-          { text: "Director", link: "Director" },
-          { text: "Club", link: "Club" },
-          { text: "Admin", link: "Admin" },
-        ];
-      }
-      return [
-        { text: "User", link: "User" },
-        { text: "Director", link: "Director" },
-        { text: "Club", link: "Club" },
-      ];
-    },
-    getSelectedAccessLevel() {
-      return { text: this.person.AccessLevel, link: this.person.AccessLevel };
-    },
-    getAccessLevelLabel() {
-      return this.person.AccessLevel ? "" : "Select Access Level";
-    },
-  },
-  methods: {
-    emitUpdate(field, value) {
-      this.$emit("update:person", { field, value });
-    },
-  },
-};
-</script>
+<template>
+  <section class="mt-2">
+    <div class="flex flex-col mb-4">
+      <TitledInput
+          :inputValue="personId"
+          :inputType="'number'"
+          placeholder="Meyer Squared ID"
+          title="Meyer Squared ID"
+          :disabled="true"
+          aria-disabled="true"
+      />
+    </div>
+
+    <div class="flex flex-col mb-4">
+      <TitledInput
+          :inputValue="hemaRatingId"
+          :inputType="'number'"
+          placeholder="HEMA Rating ID"
+          title="HEMA Rating ID"
+          @update:value="emitUpdate('HemaRatingsId', $event)"
+      />
+    </div>
+
+    <div class="flex flex-col mb-4">
+      <BaseText text="Access Level" size="sm" color="quaternary"/>
+      <DropDownMenu
+          :key="accessLevelDropdownKey"
+          :label="accessLevelLabel"
+          :items="accessLevels"
+          class="pb-2"
+          :selectedItem="selectedAccessLevel"
+          @update:selectedItem="emitUpdate('AccessLevel', $event.text)"
+          width="w-full"
+          dropDownWidth="w-full"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import TitledInput from "../../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import DropDownMenu from "../../../../Organisms/ComplexInputs/DropDown/DropDownMenu.vue";
+
+const STANDARD_ACCESS_LEVELS = [
+  { text: "User", link: "User" },
+  { text: "Director", link: "Director" },
+  { text: "Club", link: "Club" },
+];
+
+const ADMIN_ACCESS_LEVELS = [
+  ...STANDARD_ACCESS_LEVELS,
+  { text: "Admin", link: "Admin" },
+];
+
+export default {
+  name: "Administration",
+  emits: ["update:person"],
+  components: { TitledInput, BaseText, DropDownMenu },
+  props: {
+    person: { type: Object, required: true },
+    userLevel: { type: String, required: true },
+  },
+  computed: {
+    personId() {
+      return this.person?.PersonId ?? "";
+    },
+    hemaRatingId() {
+      return this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId ?? "";
+    },
+    accessLevels() {
+      if (this.userLevel === "Admin") {
+        return ADMIN_ACCESS_LEVELS;
+      }
+
+      return STANDARD_ACCESS_LEVELS;
+    },
+    selectedAccessLevel() {
+      return { text: this.person.AccessLevel, link: this.person.AccessLevel };
+    },
+    accessLevelLabel() {
+      return this.person.AccessLevel ? "" : "Select Access Level";
+    },
+    accessLevelDropdownKey() {
+      return `${this.userLevel}-${this.person.AccessLevel || "none"}`;
+    },
+  },
+  methods: {
+    emitUpdate(field, value) {
+      this.$emit("update:person", { field, value });
+    },
+  },
+};
+</script>

package/src/stories/Templates/PersonManagement/Admin/FencerAdmin/FencerAdmin.stories.js

@@ -0,0 +1,71 @@
+import FencerAdmin from './FencerAdmin.vue';
+import personsMock from "../../../../../mocks/personsMock.js";
+import peopleMock from "../../../../../mocks/personGetAllMock.js";
+
+export default {
+    title: 'Templates/PersonManagement/Admin/FencerAdmin',
+    component: FencerAdmin,
+    tags: ['autodocs'],
+    args: {
+        person: personsMock[1],
+        people: peopleMock,
+        userLevel: 'Club',
+        canMergeAccounts: null
+    },
+    argTypes: {
+        person: { control: { type: 'object' } },
+        people: { control: { type: 'object' } },
+        userLevel: {
+            control: { type: 'select' },
+            options: ['User', 'Director', 'Club', 'Admin']
+        },
+        canMergeAccounts: { control: { type: 'boolean' } },
+        'update:person': { action: 'update:person' },
+        'merge:merge': { action: 'merge:merge' }
+    }
+};
+
+export const ClubUser = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: 'Club'
+        },
+        people: peopleMock,
+        userLevel: 'Club'
+    }
+};
+
+export const AdminViewingUser = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: 'User'
+        },
+        people: peopleMock,
+        userLevel: 'Admin'
+    }
+};
+
+export const AdminViewingAdmin = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: 'Admin'
+        },
+        people: peopleMock,
+        userLevel: 'Admin'
+    }
+};
+
+export const MergeDisabledByParent = {
+    args: {
+        person: {
+            ...personsMock[1],
+            AccessLevel: 'User'
+        },
+        people: peopleMock,
+        userLevel: 'Admin',
+        canMergeAccounts: false
+    }
+};

package/src/stories/Templates/PersonManagement/Admin/{FencerAdmin.vue → FencerAdmin/FencerAdmin.vue}

@@ -1,77 +1,90 @@
-<template>
-  <section class="mt-2 min-h-80">
-    <!-- Administration section -->
-    <div class="pb-6">
-      <BaseText text="Administration" size="lg" color="primary" />
-      <div class="mt-3">
-        <Administration
-            :person="person"
-            :userLevel="userLevel"
-            @update:person="$emit('update:person', $event)"
-        />
-      </div>
-    </div>
-
-    <!-- Merge Accounts section (collapsible) -->
-    <div v-if="userLevel === 'Admin'" class="pt-6 border-t border-dropdownSelect">
-      <button
-          type="button"
-          class="w-full flex items-center justify-between text-left"
-          @click="toggleMergeOpen"
-      >
-        <div>
-          <BaseText text="Merge Accounts" size="lg" color="primary" />
-          <BaseText
-              class="mt-1"
-              text="Merge other fencer accounts into this one. This will move all references and delete the duplicate accounts."
-              size="sm"
-              color="quaternary"
-          />
-        </div>
-
-        <!-- Optional caret (swap for your icon system if preferred) -->
-        <span
-            class="ml-4 text-quaternary transition-transform duration-200"
-            :class="mergeOpen ? 'rotate-180' : 'rotate-0'"
-            aria-hidden="true"
-        >
-          ▼
-        </span>
-      </button>
-
-      <div v-if="mergeOpen" class="mt-4">
-        <MergeAccounts :person="person" :people="people" @merge:merge="doMerge" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import Administration from "./Administration.vue";
-import MergeAccounts from "./MergeAccounts.vue";
-
-export default {
-  name: "FencerAdmin",
-  emits: ["update:person", "merge:merge"],
-  components: { BaseText, Administration, MergeAccounts },
-  props: {
-    person: { type: Object, required: true },
-    people: { type: Array, required: true },
-    userLevel: { type: String, required: true },
-  },
-  data() {
-    return {
-      mergeOpen: false, // collapsed by default
-    };
-  },
-  methods: {
-    toggleMergeOpen() {
-      this.mergeOpen = !this.mergeOpen;
-    },
-    doMerge(data) {
-      this.$emit("merge:merge", data);
-    }
-  },
-};
-</script>
+<template>
+  <section class="mt-2 min-h-80">
+    <div class="pb-6">
+      <BaseText text="Administration" size="lg" color="primary" />
+      <div class="mt-3">
+        <Administration
+            :person="person"
+            :userLevel="userLevel"
+            @update:person="$emit('update:person', $event)"
+        />
+      </div>
+    </div>
+
+    <div v-if="showMergeAccounts" class="pt-6 border-t border-dropdownSelect">
+      <button
+          :id="mergeAccountsToggleId"
+          type="button"
+          class="w-full flex items-center justify-between text-left"
+          :aria-expanded="mergeOpen"
+          :aria-controls="mergeAccountsPanelId"
+          @click="toggleMergeOpen"
+      >
+        <div>
+          <BaseText text="Merge Accounts" size="lg" color="primary" />
+          <BaseText
+              class="mt-1"
+              text="Merge other fencer accounts into this one. This will move all references and delete the duplicate accounts."
+              size="sm"
+              color="quaternary"
+          />
+        </div>
+
+        <span
+            class="fa-solid fa-chevron-down ml-4 text-quaternary transition-transform duration-200"
+            :class="mergeOpen ? 'rotate-180' : 'rotate-0'"
+            aria-hidden="true"
+        />
+      </button>
+
+      <div v-if="mergeOpen" :id="mergeAccountsPanelId" class="mt-4">
+        <MergeAccounts :person="person" :people="people" @merge:merge="emitMergeAccounts" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import Administration from "../Administration/Administration.vue";
+import MergeAccounts from "../MergeAccounts/MergeAccounts.vue";
+
+export default {
+  name: "FencerAdmin",
+  emits: ["update:person", "merge:merge"],
+  components: { BaseText, Administration, MergeAccounts },
+  props: {
+    person: { type: Object, required: true },
+    people: { type: Array, required: true },
+    userLevel: { type: String, required: true },
+    canMergeAccounts: { type: Boolean, default: null },
+  },
+  data() {
+    return {
+      mergeOpen: false,
+    };
+  },
+  computed: {
+    showMergeAccounts() {
+      return this.canMergeAccounts ?? this.userLevel === "Admin";
+    },
+    personIdForDom() {
+      return this.person?.PersonId ?? "unknown";
+    },
+    mergeAccountsToggleId() {
+      return `merge-accounts-toggle-${this.personIdForDom}`;
+    },
+    mergeAccountsPanelId() {
+      return `merge-accounts-panel-${this.personIdForDom}`;
+    },
+  },
+  methods: {
+    toggleMergeOpen() {
+      this.mergeOpen = !this.mergeOpen;
+    },
+    emitMergeAccounts(data) {
+      this.$emit("merge:merge", data);
+    },
+  },
+};
+</script>