From 464598cb6e44282e5f9ee24f4e11697ab00815a2 Mon Sep 17 00:00:00 2001 From: Taslan Graham Date: Tue, 3 Dec 2024 15:48:56 -0500 Subject: [PATCH 1/5] pkp/pkp-lib#10651 Update UI to use user's custom initials when available --- src/components/InitialsAvatar/InitialsAvatar.vue | 10 +++++++++- src/components/UserAvatar/UserAvatar.vue | 8 ++++++-- src/managers/ParticipantManager/ParticipantManager.vue | 1 + .../ParticipantManager/participantManagerStore.js | 1 + 4 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/components/InitialsAvatar/InitialsAvatar.vue b/src/components/InitialsAvatar/InitialsAvatar.vue index 39e501dfe..6dcdb3810 100644 --- a/src/components/InitialsAvatar/InitialsAvatar.vue +++ b/src/components/InitialsAvatar/InitialsAvatar.vue @@ -44,10 +44,18 @@ const props = defineProps({ type: Boolean, default: false, }, + /** The user's custom initials to be displayed instead of initials derived from the user's name */ + preferredInitials: { + type: String, + default: '', + }, }); const initials = computed(() => { - return `${props.givenName?.charAt(0) || ''}${props.familyName?.charAt(0) || ''}`.toUpperCase(); + return ( + props.preferredInitials || + `${props.givenName?.charAt(0) || ''}${props.familyName?.charAt(0) || ''}`.toUpperCase() + ); }); const classes = computed(() => ({ diff --git a/src/components/UserAvatar/UserAvatar.vue b/src/components/UserAvatar/UserAvatar.vue index a93509478..4a602ebb6 100644 --- a/src/components/UserAvatar/UserAvatar.vue +++ b/src/components/UserAvatar/UserAvatar.vue @@ -21,7 +21,9 @@ const props = defineProps({ default: () => 'large', validator: (prop) => ['large', 'small'].includes(prop), }, - userFullName: {type: String, required: true}, + userFullName: {type: String, default: () => ''}, + /** The user's custom initials to be displayed instead of initials derived from the user's name */ + preferredInitials: {type: String, default: () => ''}, userId: {type: Number, required: true}, }); @@ -50,6 +52,8 @@ const initialsClasses = computed(() => { }); const initials = computed(() => { - return getUserAvatarInitialsFromName(props.userFullName); + return ( + props.preferredInitials || getUserAvatarInitialsFromName(props.userFullName) + ); }); diff --git a/src/managers/ParticipantManager/ParticipantManager.vue b/src/managers/ParticipantManager/ParticipantManager.vue index a2d5c16f2..6c19cd0d0 100644 --- a/src/managers/ParticipantManager/ParticipantManager.vue +++ b/src/managers/ParticipantManager/ParticipantManager.vue @@ -24,6 +24,7 @@
diff --git a/src/managers/ParticipantManager/participantManagerStore.js b/src/managers/ParticipantManager/participantManagerStore.js index 84b2407d3..1c433b608 100644 --- a/src/managers/ParticipantManager/participantManagerStore.js +++ b/src/managers/ParticipantManager/participantManagerStore.js @@ -50,6 +50,7 @@ export const useParticipantManagerStore = defineComponentStore( roleId: stageAssignment.stageAssignmentUserGroup.roleId, userGroupId: stageAssignment.stageAssignmentUserGroup.id, recommendOnly: stageAssignment.recommendOnly, + preferredInitials: participant.preferredAvatarInitials, }); }); }); From 968241d85d11788484bfd6f08d21649ec0507edd Mon Sep 17 00:00:00 2001 From: Taslan Graham Date: Wed, 4 Dec 2024 11:18:45 -0500 Subject: [PATCH 2/5] pkp/pkp-lib#10651 Update component stories --- .../InitialsAvatar/InitialsAvatar.stories.js | 16 ++++++++++++++++ src/components/InitialsAvatar/InitialsAvatar.vue | 2 +- src/components/UserAvatar/UserAvatar.stories.js | 15 +++++++++++++++ src/components/UserAvatar/UserAvatar.vue | 2 +- 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/InitialsAvatar/InitialsAvatar.stories.js b/src/components/InitialsAvatar/InitialsAvatar.stories.js index a7b347a30..e5c7027bd 100644 --- a/src/components/InitialsAvatar/InitialsAvatar.stories.js +++ b/src/components/InitialsAvatar/InitialsAvatar.stories.js @@ -46,3 +46,19 @@ export const UndefinedName = { export const SmallIcon = { args: {givenName: 'Paul', familyName: 'Hudson', shrink: true}, }; + +export const PreferredInitialsOnly = { + args: { + preferredInitials: 'TG', + userId: 136, + }, +}; + +export const GivenNameWithFamilyNameAndPreferredInitials = { + args: { + preferredInitials: 'TG', + givenName: 'Adela', + familyName: 'Gallego', + userId: 136, + }, +}; diff --git a/src/components/InitialsAvatar/InitialsAvatar.vue b/src/components/InitialsAvatar/InitialsAvatar.vue index 6dcdb3810..ea50abe54 100644 --- a/src/components/InitialsAvatar/InitialsAvatar.vue +++ b/src/components/InitialsAvatar/InitialsAvatar.vue @@ -44,7 +44,7 @@ const props = defineProps({ type: Boolean, default: false, }, - /** The user's custom initials to be displayed instead of initials derived from the user's name */ + /** Initials to display instead of those derived from the `givenName` and `familyName` props. */ preferredInitials: { type: String, default: '', diff --git a/src/components/UserAvatar/UserAvatar.stories.js b/src/components/UserAvatar/UserAvatar.stories.js index 27052a967..ab6b39290 100644 --- a/src/components/UserAvatar/UserAvatar.stories.js +++ b/src/components/UserAvatar/UserAvatar.stories.js @@ -25,3 +25,18 @@ export const Arabic = { userId: 136, }, }; + +export const PreferredInitialsOnly = { + args: { + preferredInitials: 'TG', + userId: 136, + }, +}; + +export const UserFullNameAndPreferredInitials = { + args: { + preferredInitials: 'TG', + userFullName: 'Nama Sampan-Nirmal Lengkap', + userId: 136, + }, +}; diff --git a/src/components/UserAvatar/UserAvatar.vue b/src/components/UserAvatar/UserAvatar.vue index 4a602ebb6..db3bb398c 100644 --- a/src/components/UserAvatar/UserAvatar.vue +++ b/src/components/UserAvatar/UserAvatar.vue @@ -22,7 +22,7 @@ const props = defineProps({ validator: (prop) => ['large', 'small'].includes(prop), }, userFullName: {type: String, default: () => ''}, - /** The user's custom initials to be displayed instead of initials derived from the user's name */ + /** Initials to display instead of those derived from the `userFullName` prop. */ preferredInitials: {type: String, default: () => ''}, userId: {type: Number, required: true}, }); From 59ed2c7bd37805e82b3bc9a8ba026ddae71772bb Mon Sep 17 00:00:00 2001 From: Taslan Graham Date: Thu, 5 Dec 2024 17:38:55 -0500 Subject: [PATCH 3/5] Rely on backend for initials calculation --- .../InitialsAvatar/InitialsAvatar.vue | 23 +++---------------- src/components/UserAvatar/UserAvatar.vue | 13 ++--------- .../ParticipantManager/ParticipantManager.vue | 3 +-- .../participantManagerStore.js | 2 +- .../CellSubmissionActivityReviewsOpen.vue | 2 +- 5 files changed, 8 insertions(+), 35 deletions(-) diff --git a/src/components/InitialsAvatar/InitialsAvatar.vue b/src/components/InitialsAvatar/InitialsAvatar.vue index ea50abe54..3e64c5798 100644 --- a/src/components/InitialsAvatar/InitialsAvatar.vue +++ b/src/components/InitialsAvatar/InitialsAvatar.vue @@ -9,16 +9,6 @@ import {computed} from 'vue'; import Icon from '../Icon/Icon.vue'; const props = defineProps({ - /** User's given name */ - givenName: { - type: String, - required: true, - }, - /** User's family name */ - familyName: { - type: String, - default: '', - }, /** If the background should use primary color (blue) */ isPrimary: { type: Boolean, @@ -44,20 +34,13 @@ const props = defineProps({ type: Boolean, default: false, }, - /** Initials to display instead of those derived from the `givenName` and `familyName` props. */ - preferredInitials: { + /** Initials to display */ + initials: { type: String, - default: '', + required: true, }, }); -const initials = computed(() => { - return ( - props.preferredInitials || - `${props.givenName?.charAt(0) || ''}${props.familyName?.charAt(0) || ''}`.toUpperCase() - ); -}); - const classes = computed(() => ({ // Base 'inline-flex items-center justify-center align-middle rounded-full p-1 cursor-pointer': true, diff --git a/src/components/UserAvatar/UserAvatar.vue b/src/components/UserAvatar/UserAvatar.vue index db3bb398c..57b487603 100644 --- a/src/components/UserAvatar/UserAvatar.vue +++ b/src/components/UserAvatar/UserAvatar.vue @@ -11,9 +11,7 @@ diff --git a/src/managers/ParticipantManager/ParticipantManager.vue b/src/managers/ParticipantManager/ParticipantManager.vue index 6c19cd0d0..f02b6f1f7 100644 --- a/src/managers/ParticipantManager/ParticipantManager.vue +++ b/src/managers/ParticipantManager/ParticipantManager.vue @@ -23,8 +23,7 @@
diff --git a/src/managers/ParticipantManager/participantManagerStore.js b/src/managers/ParticipantManager/participantManagerStore.js index 1c433b608..0417212fe 100644 --- a/src/managers/ParticipantManager/participantManagerStore.js +++ b/src/managers/ParticipantManager/participantManagerStore.js @@ -50,7 +50,7 @@ export const useParticipantManagerStore = defineComponentStore( roleId: stageAssignment.stageAssignmentUserGroup.roleId, userGroupId: stageAssignment.stageAssignmentUserGroup.id, recommendOnly: stageAssignment.recommendOnly, - preferredInitials: participant.preferredAvatarInitials, + initials: participant.initials, }); }); }); diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue index 3d69b94ec..5f25afa23 100644 --- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue +++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue @@ -11,7 +11,7 @@ Date: Thu, 5 Dec 2024 18:23:05 -0500 Subject: [PATCH 4/5] pkp/pkp-lib#101651 Added story updates, and remove obsolete tests --- .../InitialsAvatar/InitialsAvatar.stories.js | 33 ++++--------------- .../UserAvatar/UserAvatar.stories.js | 24 +------------- src/composables/useParticipant.js | 15 --------- src/composables/useParticipant.test.js | 29 ---------------- .../CellSubmissionActivityReviewsOpen.vue | 2 +- 5 files changed, 8 insertions(+), 95 deletions(-) delete mode 100644 src/composables/useParticipant.test.js diff --git a/src/components/InitialsAvatar/InitialsAvatar.stories.js b/src/components/InitialsAvatar/InitialsAvatar.stories.js index e5c7027bd..22fedba25 100644 --- a/src/components/InitialsAvatar/InitialsAvatar.stories.js +++ b/src/components/InitialsAvatar/InitialsAvatar.stories.js @@ -15,50 +15,29 @@ export default { }; export const Default = { - args: {givenName: 'Ramiro', familyName: 'Vaca'}, -}; - -export const GivenNameOnly = { - args: {givenName: 'Daniel'}, + args: {initials: 'RV'}, }; export const IsSecondary = { - args: {givenName: 'David', familyName: 'Buskins', isSecondary: true}, + args: {initials: 'DB', isSecondary: true}, }; export const IsWarnable = { - args: {givenName: 'Aisla', familyName: 'McCrae', isWarnable: true}, + args: {initials: 'AG', isWarnable: true}, }; export const IsDisabled = { args: { - givenName: 'Adela', - familyName: 'Gallego', + initials: 'AG', isSecondary: true, isDisabled: true, }, }; -export const UndefinedName = { +export const UndefinedInitials = { args: {}, }; export const SmallIcon = { - args: {givenName: 'Paul', familyName: 'Hudson', shrink: true}, -}; - -export const PreferredInitialsOnly = { - args: { - preferredInitials: 'TG', - userId: 136, - }, -}; - -export const GivenNameWithFamilyNameAndPreferredInitials = { - args: { - preferredInitials: 'TG', - givenName: 'Adela', - familyName: 'Gallego', - userId: 136, - }, + args: {initials: 'PH', shrink: true}, }; diff --git a/src/components/UserAvatar/UserAvatar.stories.js b/src/components/UserAvatar/UserAvatar.stories.js index ab6b39290..444f903f3 100644 --- a/src/components/UserAvatar/UserAvatar.stories.js +++ b/src/components/UserAvatar/UserAvatar.stories.js @@ -14,29 +14,7 @@ export default { export const Default = { args: { - userFullName: 'Nama Sampan-Nirmal Lengkap', - userId: 136, - }, -}; - -export const Arabic = { - args: { - userFullName: 'خالد محمود الفارسي', - userId: 136, - }, -}; - -export const PreferredInitialsOnly = { - args: { - preferredInitials: 'TG', - userId: 136, - }, -}; - -export const UserFullNameAndPreferredInitials = { - args: { - preferredInitials: 'TG', - userFullName: 'Nama Sampan-Nirmal Lengkap', + initials: 'NL', userId: 136, }, }; diff --git a/src/composables/useParticipant.js b/src/composables/useParticipant.js index 49ad92b58..9a34187d6 100644 --- a/src/composables/useParticipant.js +++ b/src/composables/useParticipant.js @@ -7,22 +7,7 @@ export function useParticipant() { ]; } - function getUserAvatarInitialsFromName(fullName) { - const fullNameParts = fullName.split(' '); - - return fullNameParts - .map((part) => { - const partTrimmed = part.trim(); - if (partTrimmed.length) { - return partTrimmed[0].toUpperCase(); - } - return ''; - }) - .join('') - .substring(0, 3); - } return { - getUserAvatarInitialsFromName, getEditorRoleIds, }; } diff --git a/src/composables/useParticipant.test.js b/src/composables/useParticipant.test.js deleted file mode 100644 index 745547f6b..000000000 --- a/src/composables/useParticipant.test.js +++ /dev/null @@ -1,29 +0,0 @@ -import {expect, test, describe} from 'vitest'; -import {useParticipant} from './useParticipant'; - -describe('useParticipant', () => { - describe('getUserAvatarInitials', () => { - const {getUserAvatarInitialsFromName} = useParticipant(); - test('Two names', () => { - expect(getUserAvatarInitialsFromName('Charlotte Reynolds')).toBe('CR'); - }); - - test('Three names with dash', () => { - expect(getUserAvatarInitialsFromName('Nama Sampan-Nirmal Lengkap')).toBe( - 'NSL', - ); - }); - - test('Three names', () => { - expect(getUserAvatarInitialsFromName('Theresa Jessie Franklin')).toBe( - 'TJF', - ); - }); - - test('Four names (max 3 initials)', () => { - expect( - getUserAvatarInitialsFromName('Theresa Jessie Franklin Jasmin'), - ).toBe('TJF'); - }); - }); -}); diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue index 5f25afa23..2ca86d8ed 100644 --- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue +++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue @@ -11,7 +11,7 @@ Date: Wed, 11 Dec 2024 11:28:34 -0500 Subject: [PATCH 5/5] pkp/pkp-lib#10651 Rename initials property --- src/managers/ParticipantManager/ParticipantManager.vue | 2 +- src/managers/ParticipantManager/participantManagerStore.js | 2 +- .../CellSubmissionActivityReviewsOpen.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/managers/ParticipantManager/ParticipantManager.vue b/src/managers/ParticipantManager/ParticipantManager.vue index f02b6f1f7..00824191a 100644 --- a/src/managers/ParticipantManager/ParticipantManager.vue +++ b/src/managers/ParticipantManager/ParticipantManager.vue @@ -23,7 +23,7 @@
diff --git a/src/managers/ParticipantManager/participantManagerStore.js b/src/managers/ParticipantManager/participantManagerStore.js index 0417212fe..2b4e4c346 100644 --- a/src/managers/ParticipantManager/participantManagerStore.js +++ b/src/managers/ParticipantManager/participantManagerStore.js @@ -50,7 +50,7 @@ export const useParticipantManagerStore = defineComponentStore( roleId: stageAssignment.stageAssignmentUserGroup.roleId, userGroupId: stageAssignment.stageAssignmentUserGroup.id, recommendOnly: stageAssignment.recommendOnly, - initials: participant.initials, + displayInitials: participant.displayInitials, }); }); }); diff --git a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue index 2ca86d8ed..b950fca19 100644 --- a/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue +++ b/src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue @@ -11,7 +11,7 @@