@dcrackel/hematournamentui 1.0.698 → 1.0.701

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>

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

@@ -0,0 +1,86 @@
+import MergeAccounts from './MergeAccounts.vue';
+import personsMock from "../../../../../mocks/personsMock.js";
+import peopleMock from "../../../../../mocks/personGetAllMock.js";
+
+export default {
+    title: 'Templates/PersonManagement/Admin/MergeAccounts',
+    component: MergeAccounts,
+    tags: ['autodocs'],
+    args: {
+        person: personsMock[1],
+        people: peopleMock
+    },
+    argTypes: {
+        person: { control: { type: 'object' } },
+        people: { control: { type: 'object' } },
+        'merge:merge': { action: 'merge:merge' }
+    }
+};
+
+export const Default = {
+    args: {
+        person: personsMock[1],
+        people: peopleMock
+    }
+};
+
+export const EmptyResults = {
+    args: {
+        person: personsMock[1],
+        people: []
+    }
+};
+
+export const MissingRootDetails = {
+    args: {
+        person: {
+            PersonId: 2001,
+            DisplayName: '',
+            FirstName: '',
+            LastName: '',
+            Club: null,
+            PersonEmails: []
+        },
+        people: peopleMock
+    }
+};
+
+export const SparsePeopleData = {
+    args: {
+        person: personsMock[1],
+        people: [
+            {
+                PersonId: 2002,
+                DisplayName: 'Missing Email',
+                FirstName: 'Missing',
+                LastName: 'Email',
+                Club: {
+                    Name: 'Columbus United Fencing Club',
+                    ShortName: 'CUFC'
+                },
+                PersonEmails: []
+            },
+            {
+                PersonId: 2003,
+                DisplayName: 'Missing Club',
+                FirstName: 'Missing',
+                LastName: 'Club',
+                Club: null,
+                PersonEmails: [
+                    {
+                        EmailAddress: 'missing-club@example.com',
+                        IsPrimary: true
+                    }
+                ]
+            },
+            {
+                PersonId: 2004,
+                DisplayName: 'No Optional Details',
+                FirstName: '',
+                LastName: '',
+                Club: null,
+                PersonEmails: []
+            }
+        ]
+    }
+};