pkp/pkp-lib#10651 main use user's custom initials when available

src/components/InitialsAvatar/InitialsAvatar.stories.js

@@ -15,34 +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},
+	args: {initials: 'PH', shrink: true},
 };

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,10 +34,11 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
-});
-
-const initials = computed(() => {
-	return `${props.givenName?.charAt(0) || ''}${props.familyName?.charAt(0) || ''}`.toUpperCase();
+	/** Initials to display */
+	initials: {
+		type: String,
+		required: true,
+	},
 });
 
 const classes = computed(() => ({

src/components/UserAvatar/UserAvatar.stories.js

@@ -14,14 +14,7 @@ export default {
 
 export const Default = {
 	args: {
-		userFullName: 'Nama Sampan-Nirmal Lengkap',
-		userId: 136,
-	},
-};
-
-export const Arabic = {
-	args: {
-		userFullName: 'خالد محمود الفارسي',
+		initials: 'NL',
 		userId: 136,
 	},
 };

src/components/UserAvatar/UserAvatar.vue

@@ -11,17 +11,16 @@
 
 <script setup>
 import {computed} from 'vue';
-import {useParticipant} from '@/composables/useParticipant';
 
-const {getUserAvatarInitialsFromName} = useParticipant();
 const props = defineProps({
 	sizeVariant: {
 		required: false,
 		type: String,
 		default: () => 'large',
 		validator: (prop) => ['large', 'small'].includes(prop),
 	},
-	userFullName: {type: String, required: true},
+	/** Initials to display */
+	initials: {type: String, required: true},
 	userId: {type: Number, required: true},
 });
 
@@ -48,8 +47,4 @@ const initialsClasses = computed(() => {
 		props.sizeVariant === 'large' ? 'text-2xl-bold' : 'text-lg-bold';
 	return [textSizeClass];
 });
-
-const initials = computed(() => {
-	return getUserAvatarInitialsFromName(props.userFullName);
-});
 </script>

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,
 	};
 }

src/managers/ParticipantManager/ParticipantManager.vue

@@ -23,7 +23,7 @@
 						<div>
 							<UserAvatar
 								:user-id="participant.id"
-								:user-full-name="participant.fullName"
+								:initials="participant.displayInitials"
 							></UserAvatar>
 						</div>
 						<div class="ms-2 flex flex-col justify-center">

src/managers/ParticipantManager/participantManagerStore.js

@@ -50,6 +50,7 @@ export const useParticipantManagerStore = defineComponentStore(
 						roleId: stageAssignment.stageAssignmentUserGroup.roleId,
 						userGroupId: stageAssignment.stageAssignmentUserGroup.id,
 						recommendOnly: stageAssignment.recommendOnly,
+						displayInitials: participant.displayInitials,
 					});
 				});
 			});

src/pages/dashboard/components/DashboardTable/CellSubmissionActivity/CellSubmissionActivityReviewsOpen.vue

@@ -11,7 +11,7 @@
 						<UserAvatar
 							size-variant="small"
 							:user-id="reviewAssignment.id"
-							:user-full-name="String(reviewAssignment.reviewerFullName)"
+							:initials="String(reviewAssignment.reviewerDisplayInitials)"
 						/>
 					</template>
 					<ReviewActivityIndicatorPopover