pkp/pkp-lib#10630 add param to get invitations endpoint

src/managers/UserInvitationManager/UserInvitationManager.stories.js

@@ -19,7 +19,7 @@ export const Init = {
 		msw: {
 			handlers: [
 				http.get(
-					'https://mock/index.php/publicknowledge/api/v1/invitations',
+					'https://mock/index.php/publicknowledge/api/v1/invitations/userRoleAssignment',
 					async ({request}) => {
 						const url = new URL(request.url);
 						const offset = parseInt(url.searchParams.get('offset') || 0);

src/managers/UserInvitationManager/UserInvitationManager.vue

@@ -59,7 +59,7 @@
 							:key="i"
 						>
 							<div class="flex flex-col">
-								{{ localize(userGroups.userGroupName) }}
+								{{ userGroups.userGroupName }}
 							</div>
 						</template>
 					</span>

src/managers/UserInvitationManager/mocks/invitationMock.js

@@ -21,10 +21,7 @@ export default {
 			userGroupsToAdd: [
 				{
 					userGroupId: 2,
-					userGroupName: {
-						en: 'Journal manager',
-						fr_CA: 'Directeur-trice de la revue',
-					},
+					userGroupName: 'Journal manager',
 					masthead: true,
 					dateStart: '2024-09-10',
 					dateEnd: null,
@@ -64,10 +61,7 @@ export default {
 			userGroupsToAdd: [
 				{
 					userGroupId: 16,
-					userGroupName: {
-						en: 'Reviewer',
-						fr_CA: '\u00c9valuateur-trice',
-					},
+					userGroupName: 'Reviewer',
 					masthead: true,
 					dateStart: '2024-09-10',
 					dateEnd: null,
@@ -76,10 +70,7 @@ export default {
 			userGroupsToRemove: [
 				{
 					userGroupId: 9,
-					userGroupName: {
-						en: 'Funding coordinator',
-						fr_CA: 'Coordonnateur-trice du financement',
-					},
+					userGroupName: 'Funding coordinator',
 					masthead: null,
 					dateStart: null,
 					dateEnd: null,

src/pages/acceptInvitation/AcceptInvitationUserRoles.vue

@@ -12,10 +12,12 @@
 		<TableBody>
 			<TableRow v-for="(row, index) in userGroupsToAdd" :key="index">
 				<TableCell :is-row-header="true">
-					{{ localize(row.userGroupName) }}
+					{{ row.userGroupName }}
+				</TableCell>
+				<TableCell>{{ formatShortDate(row.dateStart) }}</TableCell>
+				<TableCell>
+					{{ row.dateEnd ? formatShortDate(row.dateEnd) : '---' }}
 				</TableCell>
-				<TableCell>{{ row.dateStart }}</TableCell>
-				<TableCell>{{ row.dateEnd ? row.dateEnd : '---' }}</TableCell>
 				<TableCell>
 					{{
 						row.masthead
@@ -38,9 +40,11 @@ import TableColumn from '@/components/Table/TableColumn.vue';
 import TableBody from '@/components/Table/TableBody.vue';
 import TableRow from '@/components/Table/TableRow.vue';
 import {defineProps} from 'vue';
+import {useDate} from '@/composables/useDate';
 
 defineProps({
 	userGroupsToAdd: {type: Array, required: true},
 });
 const {t} = useLocalize();
+const {formatShortDate} = useDate();
 </script>

src/pages/userInvitation/UserInvitationEmailComposerStep.vue

@@ -79,13 +79,16 @@ const recipients = computed(() => {
 });
 
 const recipientOptions = computed(() => {
-	return [
-		{
-			value: store.invitationPayload.inviteeEmail,
-			label: {
-				[store.primaryLocale]: store.invitationPayload.inviteeEmail,
-			},
-		},
-	];
+	let userEmails = {
+		value: store.invitationPayload.inviteeEmail,
+		label: {},
+	};
+	props.email.locales.forEach((element) => {
+		userEmails.label = {
+			...userEmails.label,
+			[element.locale]: store.invitationPayload.inviteeEmail,
+		};
+	});
+	return [userEmails];
 });
 </script>

src/pages/userInvitation/UserInvitationPageStore.js

@@ -9,7 +9,10 @@ export const useUserInvitationPageStore = defineComponentStore(
 	(pageInitConfig) => {
 		const {openDialog} = useModal();
 		const {t} = useLocalize();
-
+		/**
+		 * email templates api url for search emails
+		 */
+		const emailTemplatesApiUrl = ref(pageInitConfig.emailTemplatesApiUrl);
 		/**
 		 * Invitation payload, initial value
 		 */
@@ -378,6 +381,7 @@ export const useUserInvitationPageStore = defineComponentStore(
 			invitationPayload,
 			updatePayload,
 			registerActionForStepId,
+			emailTemplatesApiUrl,
 
 			currentStep,
 			currentStepIndex,

src/pages/userInvitation/UserInvitationUserGroupsTable.vue

@@ -16,16 +16,28 @@
 				:key="index"
 			>
 				<TableCell>
-					{{ localize(currentUserGroup.name) }}
+					{{ currentUserGroup.name }}
 				</TableCell>
 				<TableCell>
-					{{ currentUserGroup.dateStart ? currentUserGroup.dateStart : '---' }}
+					{{
+						currentUserGroup.dateStart
+							? formatShortDate(currentUserGroup.dateStart)
+							: '---'
+					}}
 				</TableCell>
 				<TableCell>
-					{{ currentUserGroup.dateEnd ? currentUserGroup.dateEnd : '---' }}
+					{{
+						currentUserGroup.dateEnd
+							? formatShortDate(currentUserGroup.dateEnd)
+							: '---'
+					}}
 				</TableCell>
 				<TableCell>
-					{{ currentUserGroup.masthead ? currentUserGroup.masthead : '---' }}
+					{{
+						currentUserGroup.masthead
+							? t('invitation.masthead.show')
+							: t('invitation.masthead.hidden')
+					}}
 				</TableCell>
 				<TableCell v-if="!currentUserGroup.dateEnd">
 					<PkpButton