improved creating invitation workflow structure

Author: jardakotesovec

src/composables/useForm.js

@@ -1,11 +1,17 @@
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 
 function getField(form, name) {
 	const fields = form.fields;
 
 	return fields.find((field) => field.name === name);
 }
 
+function doesFieldExist(form, name) {
+	const fields = form.fields;
+
+	return !!fields.find((field) => field.name === name);
+}
+
 function getClearValue(field, localeKey = null) {
 	if (localeKey) {
 		if (field.component === 'field-slider') {
@@ -27,6 +33,34 @@ function mapFromSelectedToValue(selected) {
 export function useForm(_form) {
 	const form = ref(_form);
 
+	function connectWithPayload(payload) {
+		watch(
+			payload,
+			(newPayload) => {
+				Object.keys(newPayload).forEach((key) => {
+					if (doesFieldExist(form.value, key)) {
+						if (getValue(key) !== newPayload[key]) {
+							setValue(key, newPayload[key]);
+						}
+					}
+				});
+			},
+			{immediate: true},
+		);
+	}
+
+	function set(key, data) {
+		Object.keys(data).forEach(function (dataKey) {
+			form.value[dataKey] = data[dataKey];
+		});
+	}
+
+	function getValue(name) {
+		const field = getField(form.value, name);
+
+		return field.value;
+	}
+
 	function setValue(name, inputValue) {
 		const field = getField(form.value, name);
 		if (!field) {
@@ -69,8 +103,11 @@ export function useForm(_form) {
 	}
 
 	return {
+		set,
 		setValue,
+		getValue,
 		clearForm,
 		form,
+		connectWithPayload,
 	};
 }

src/pages/userInvitation/UserInvitationDetailsFormStep.vue

@@ -1,11 +1,9 @@
 <template>
 	<div v-if="store.user === null">
 		<pkp-form
-			v-if="section.type === 'form'"
-			v-bind="section.form"
-			ref="autosaveForms"
+			v-bind="userForm"
 			class="userInvitation__stepForm"
-			@set="store.updateAutosaveForm"
+			@set="updateUserForm"
 		></pkp-form>
 	</div>
 	<div v-if="store.user !== null">
@@ -40,7 +38,7 @@
 		</div>
 	</div>
 	<br />
-	<UserInvitationUserGroupsTable />
+	<UserInvitationUserGroupsTable :section="section" />
 </template>
 
 <script setup>
@@ -49,12 +47,25 @@ import PkpForm from '@/components/Form/Form.vue';
 import {useTranslation} from '@/composables/useTranslation';
 import UserInvitationUserGroupsTable from './UserInvitationUserGroupsTable.vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
+import {useForm} from '@/composables/useForm';
+
+function updateUserForm(a, {fields}, c, d) {
+	fields.forEach((field) => {
+		if (store.invitationPayload[field.name] !== field.value) {
+			store.updatePayload(field.name, field.value);
+		}
+	});
+}
 
-defineProps({
-	section: {type: Object, required: true},
-});
 const {t} = useTranslation();
 const store = useUserInvitationPageStore();
+
+const props = defineProps({
+	section: {type: Object, required: true},
+});
+
+const {form: userForm, connectWithPayload} = useForm(props.section.form);
+connectWithPayload(store.invitationPayload);
 </script>
 <style lang="less">
 select {

src/pages/userInvitation/UserInvitationEmailComposerStep.vue

@@ -8,7 +8,6 @@
 		:attachments="section.email.attachments"
 		:bcc="section.email.bcc"
 		:bcc-label="t('email.bcc')"
-		:body="section.email.body"
 		:body-label="t('stageParticipants.notify.message')"
 		:can-change-recipients="section.email.canChangeRecipients"
 		:cc="section.email.cc"
@@ -34,24 +33,42 @@
 		:remove-item-label="t('common.removeItem')"
 		:searching-label="t('common.searching')"
 		:search-results-label="t('search.searchResults')"
-		:subject="section.email.subject"
 		:subject-label="t('email.subject')"
 		:switch-to-label="t('common.switchTo')"
 		:switch-to-named-language-label="t('common.switchToNamedItem')"
 		:variables="section.email.variables"
-		@set="store.updateStep"
+		v-bind="emailComposer"
+		@set="(componentName, update) => updateEmail(update)"
 	></composer>
 </template>
 
 <script setup>
+import {computed} from 'vue';
 import Composer from '@/components/Composer/Composer.vue';
 import {useTranslation} from '@/composables/useTranslation';
 import {defineProps} from 'vue';
 import {useUserInvitationPageStore} from './UserInvitationPageStore';
 
-defineProps({
+const props = defineProps({
 	section: {type: Object, required: true},
 });
 const {t} = useTranslation();
+
 const store = useUserInvitationPageStore();
+const emailComposer = computed(() => store.invitationPayload.emailComposer);
+
+function updateEmail(update) {
+	const emailComposerUpdate = {
+		...store.invitationPayload.emailComposer,
+		...update,
+	};
+	store.updatePayload('emailComposer', emailComposerUpdate);
+}
+
+if (!store.invitationPayload.body) {
+	updateEmail({
+		subject: props.section.email.subject,
+		body: props.section.email.body,
+	});
+}
 </script>

src/pages/userInvitation/UserInvitationPage.stories.js

@@ -27,7 +27,6 @@ export const Init = {
 						for (let param of params) {
 							allParams[param[0]] = param[1];
 						}
-						console.log(allParams);
 						if (
 							allParams.searchPhrase.replaceAll(/\s/g, '') ===
 							'[email protected]'
@@ -41,6 +40,24 @@ export const Init = {
 						}
 					},
 				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/invitations',
+					() => {
+						return HttpResponse.json({invitationId: 15});
+					},
+				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/invitations/15',
+					() => {
+						return HttpResponse.json({});
+					},
+				),
+				http.post(
+					'https://mock/index.php/publicknowledge/api/v1/invitations/15/submit',
+					() => {
+						return HttpResponse.json({});
+					},
+				),
 				http.post(
 					'https://mock/index.php/publicknowledge/api/v1/user/_invite',
 					() => {

src/pages/userInvitation/UserInvitationPage.vue

@@ -21,7 +21,10 @@
 				:key="step.id"
 				:label="step.name"
 			>
-				<panel class="decision__stepPanel">
+				<panel
+					v-if="store.currentStep.id === step.id"
+					class="decision__stepPanel"
+				>
 					<panel-section class="decision__stepHeader">
 						<h2>{{ store.stepTitle }}</h2>
 						<p class="error">{{ store.errors.error }}</p>
@@ -82,9 +85,7 @@
 			<pkp-button @click="store.cancel">Cancel</pkp-button>
 			<pkp-button @click="store.previousStep">Previous</pkp-button>
 			<pkp-button :is-primary="true" @click="store.nextStep">
-				<template v-if="store.isOnLastStep">Invite user to role</template>
-				<template v-else-if="store.isOnFirstStep">Search user</template>
-				<template v-else>Save and continue</template>
+				{{ store.currentStep.nextButtonLabel }}
 			</pkp-button>
 		</button-row>
 		<modal
@@ -171,8 +172,8 @@ const props = defineProps({
 			return null;
 		},
 	},
+	invitationPayload: {type: Object, required: true},
 });
-console.log(props);
 const {t} = useTranslation();
 const wrapper = ref(null);
 const store = useUserInvitationPageStore(props);