add user extended meta data in edit user and edit invitation (#537)

* add user extended meta data in edit user and edit invitation * use show more component in user meta data show * add new prop for html tag in form item display * use updated form item display component for user meta data * add existing user homepage URL locale
pkp · Feb 27, 2025 · 736e252 · 736e252
1 parent 229b6c1
commit 736e252
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 10 deletions.
diff --git a/public/globals.js b/public/globals.js
@@ -894,6 +894,14 @@ window.pkp = {
 		'workflow.submissionNextReviewRoundInFutureStage':
 			'The submission advanced to the next review round, was accepted, and is currently in the {$stage} stage.',
 		'workflow.uploadRevisions': 'Upload revisions',
+		'grid.user.grid.user.enableReasonDescription':
+			"Once the user is enabled, they will regain access to OJS, and you'll be able to invite them to roles as needed.",
+		'grid.user.grid.user.disableReasonDescription':
+			"Please note that once a user is disabled, you won't be able to add them to any roles until they are enabled again.",
+		'user.url':'Homepage URL',
+		'user.workingLanguages':'Working Languages',
+		'user.bioStatement':'Bio Statement',
+		'common.viewMoreDetails':'View more details',
 	},
 	tinyMCE: {
 		skinUrl: '/styles/tinymce',

diff --git a/src/components/FormDisplay/FormDisplayItemBasic.vue b/src/components/FormDisplay/FormDisplayItemBasic.vue
@@ -2,13 +2,15 @@
 	<component :is="headingElement" class="text-base-normal text-secondary">
 		{{ heading }}
 	</component>
-	<p class="pt-1 text-lg-normal">{{ value }}</p>
+	<p v-if="!htmlValue" class="pt-1 text-lg-normal">{{ value }}</p>
+	<p v-else v-strip-unsafe-html="htmlValue" class="pt-1 text-lg-normal"></p>
 </template>
 
 <script setup>
 defineProps({
 	headingElement: {required: true, type: String},
 	heading: {type: String, required: true},
 	value: {type: String, required: false, default: '-'},
+	htmlValue: {type: String, required: false, default: null},
 });
 </script>
diff --git a/src/managers/UserAccessManager/UserAccessManager.vue b/src/managers/UserAccessManager/UserAccessManager.vue
@@ -46,7 +46,7 @@ import TableBody from '@/components/Table/TableBody.vue';
 import TableRow from '@/components/Table/TableRow.vue';
 import {useUserAccessManagerStore} from './UserAccessManagerStore.js';
 import TablePagination from '@/components/Table/TablePagination.vue';
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 import Search from '@/components/Search/Search.vue';
 import {ref} from 'vue';
 import UserAccessManagerCellStartDate from './UserAccessManagerCellStartDate.vue';
@@ -66,6 +66,6 @@ const Components = {
 };
 
 const store = useUserAccessManagerStore();
-const {t} = useTranslation();
+const {t} = useLocalize();
 const searchPhrase = ref('');
 </script>
diff --git a/src/managers/UserAccessManager/UserAccessManagerCellActions.vue b/src/managers/UserAccessManager/UserAccessManagerCellActions.vue
@@ -14,12 +14,12 @@
 import TableCell from '@/components/Table/TableCell.vue';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
 import {useUserAccessManagerStore} from './UserAccessManagerStore.js';
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 
 defineProps({
 	user: {type: Object, required: true},
 });
 
 const store = useUserAccessManagerStore();
-const {t} = useTranslation();
+const {t} = useLocalize();
 </script>
diff --git a/src/managers/UserAccessManager/UserAccessManagerStore.js b/src/managers/UserAccessManager/UserAccessManagerStore.js
@@ -2,15 +2,15 @@ import {defineComponentStore} from '@/utils/defineComponentStore';
 import {useApiUrl} from '@/composables/useApiUrl';
 import {useUrl} from '@/composables/useUrl';
 import {useAnnouncer} from '@/composables/useAnnouncer';
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 import {useFetchPaginated} from '@/composables/useFetchPaginated';
 import {ref, watch} from 'vue';
 import {useUserAccessManagerActions} from './useUserAccessManagerActions';
 
 export const useUserAccessManagerStore = defineComponentStore(
 	'userAccessManager',
 	() => {
-		const {t} = useTranslation();
+		const {t} = useLocalize();
 		/** Announcer */
 
 		const {announce} = useAnnouncer();

diff --git a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
@@ -22,7 +22,7 @@
 		></PkpForm>
 	</div>
 	<div v-if="store.invitationPayload.userId !== null" class="p-8">
-		<div class="flex flex-col gap-y-2">
+		<div class="mb-8 flex flex-col gap-y-2">
 			<FormDisplayItemBasic
 				heading-element="h4"
 				:heading="t('user.email')"
@@ -60,6 +60,11 @@
 				:value="localize(store.invitationPayload.affiliation)"
 			></FormDisplayItemBasic>
 		</div>
+		<div v-if="store.invitationMode != 'create'">
+			<ShowMore :label="t('common.viewMoreDetails')">
+				<UserInvitationExtendedMetaData></UserInvitationExtendedMetaData>
+			</ShowMore>
+		</div>
 	</div>
 	<div class="p-8">
 		<UserInvitationUserGroupsTable :user-groups="userGroups" />
@@ -71,11 +76,13 @@ import {defineProps, computed} from 'vue';
 import FormDisplayItemBasic from '@/components/FormDisplay/FormDisplayItemBasic.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import PkpForm from '@/components/Form/Form.vue';
-import {useTranslation} from '@/composables/useTranslation';
+import {useLocalize} from '@/composables/useLocalize';
 import UserInvitationUserGroupsTable from './UserInvitationUserGroupsTable.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 import {useForm} from '@/composables/useForm';
 import FormErrorSummary from '@/components/Form/FormErrorSummary.vue';
+import UserInvitationExtendedMetaData from './UserInvitationExtendedMetaData.vue';
+import ShowMore from '@/components/ShowMore/ShowMore.vue';
 
 /**
  * Update the payload by using form values on multilingual or not
@@ -102,7 +109,7 @@ function updateUserForm(id, form, c, d) {
 	}
 }
 
-const {t} = useTranslation();
+const {t} = useLocalize();
 const store = useUserInvitationPageStore();
 
 const props = defineProps({

diff --git a/src/pages/userInvitation/UserInvitationExtendedMetaData.vue b/src/pages/userInvitation/UserInvitationExtendedMetaData.vue
@@ -0,0 +1,84 @@
+<template>
+	<div class="mt-8 flex flex-col gap-y-2">
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.url')"
+			:value="
+				store.invitationPayload.homePageUrl
+					? store.invitationPayload.homePageUrl
+					: '--'
+			"
+		></FormDisplayItemBasic>
+
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.phone')"
+			:value="
+				store.invitationPayload.phone ? store.invitationPayload.phone : '--'
+			"
+		></FormDisplayItemBasic>
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.workingLanguages')"
+			:value="
+				store.invitationPayload.locales ? store.invitationPayload.locales : '--'
+			"
+		></FormDisplayItemBasic>
+
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.interests')"
+			:value="
+				localize(store.invitationPayload.reviewerInterests)
+					? localize(store.invitationPayload.reviewerInterests)
+					: '--'
+			"
+		></FormDisplayItemBasic>
+
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.affiliation')"
+			:value="
+				localize(store.invitationPayload.affiliation)
+					? localize(store.invitationPayload.affiliation)
+					: '--'
+			"
+		></FormDisplayItemBasic>
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.bioStatement')"
+			:html-value="
+				localize(store.invitationPayload.biography)
+					? localize(store.invitationPayload.biography)
+					: '--'
+			"
+		></FormDisplayItemBasic>
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.mailingAddress')"
+			:html-value="
+				store.invitationPayload.mailingAddress
+					? store.invitationPayload.mailingAddress
+					: '--'
+			"
+		></FormDisplayItemBasic>
+		<FormDisplayItemBasic
+			heading-element="h4"
+			:heading="t('user.signature')"
+			:html-value="
+				localize(store.invitationPayload.signature)
+					? localize(store.invitationPayload.signature)
+					: '--'
+			"
+		></FormDisplayItemBasic>
+	</div>
+</template>
+
+<script setup>
+import FormDisplayItemBasic from '@/components/FormDisplay/FormDisplayItemBasic.vue';
+import {useLocalize} from '@/composables/useLocalize';
+import {useUserInvitationPageStore} from './UserInvitationPageStore';
+
+const {t} = useLocalize();
+const store = useUserInvitationPageStore();
+</script>