pkp/pkp-lib#1660 simplify with useForm, add spinner

Author: jardakotesovec

src/components/Table/Table.vue

@@ -5,13 +5,17 @@
 			class="flex justify-between border-x border-t border-light bg-secondary p-4"
 		>
 			<div v-if="slots.label || slots.description">
-				<span
-					v-if="slots.label"
-					:id="labelId"
-					class="text-lg-bold text-heading"
-				>
-					<slot name="label" />
-				</span>
+				<div class="flex">
+					<span
+						v-if="slots.label"
+						:id="labelId"
+						class="text-lg-bold text-heading"
+					>
+						<slot name="label" />
+					</span>
+					<Spinner class="ms-2" :class="showSpinner ? '' : 'invisible'" />
+				</div>
+
 				<div
 					v-if="slots.description"
 					:id="descriptionId"
@@ -53,6 +57,7 @@ import {
 	computed,
 	useId,
 } from 'vue';
+import Spinner from '@/components/Spinner/Spinner.vue';
 
 const emit = defineEmits([
 	/**
@@ -76,6 +81,7 @@ const props = defineProps({
 	 * {column: String, direction: String}, use useSorting composable to control sortDescriptor
 	 */
 	sortDescriptor: {type: Object, default: null, required: false},
+	showSpinner: {type: Boolean, default: false},
 });
 
 const {sortDescriptor} = toRefs(props);

src/composables/useForm.js

@@ -286,6 +286,14 @@ export function useForm(_form, {customSubmit} = {}) {
 		form.value.action = _action;
 	}
 
+	/**
+	 * Set the form's action URL
+	 * @param {string} _action - The action URL
+	 */
+	function setMethod(_method) {
+		form.value.method = _method;
+	}
+
 	return {
 		set,
 		setValue,
@@ -299,6 +307,7 @@ export function useForm(_form, {customSubmit} = {}) {
 		connectWithErrors,
 		setLocalesForSubmission,
 		setAction,
+		setMethod,
 		structuredErrors,
 	};
 }

src/managers/ReviewerRecommendationManager/ReviewerRecommendationManager.vue

@@ -1,6 +1,6 @@
 <template>
 	<div data-cy="reviewer-recommendation-manager">
-		<PkpTable>
+		<PkpTable :show-spinner="store.isRecommendationsLoading">
 			<template #label>
 				<h3 class="text-3xl-bold">
 					{{ title }}

src/managers/ReviewerRecommendationManager/ReviewerRecommendationsEditModal.vue

@@ -3,27 +3,30 @@
 		<template #title>
 			{{ title }}
 		</template>
-		<SideModalLayoutBasic>
-			<PkpForm
-				ref="editRecommendation"
-				class="recommendations__recommendationForm"
-				v-bind="formProps"
-				@success="(...args) => $emit('recommendationSaved', ...args)"
-				@set="(...args) => $emit('updateForm', ...args)"
-			></PkpForm>
-		</SideModalLayoutBasic>
+		<template #default="{closeModal}">
+			<SideModalLayoutBasic>
+				<PkpForm
+					ref="editRecommendation"
+					class="recommendations__recommendationForm"
+					v-bind="formProps"
+					@success="closeModal()"
+					@set="set"
+				></PkpForm>
+			</SideModalLayoutBasic>
+		</template>
 	</SideModalBody>
 </template>
 
 <script setup>
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import PkpForm from '@/components/Form/Form.vue';
+import {useForm} from '@/composables/useForm';
 
-defineProps({
+const props = defineProps({
 	title: {type: String, required: true},
 	formProps: {type: Object, required: true},
 });
 
-defineEmits(['recommendationSaved', 'updateForm']);
+const {set} = useForm(props.formProps);
 </script>

src/managers/ReviewerRecommendationManager/reviewerRecommendationManagerStore.js

@@ -1,5 +1,5 @@
 import {defineComponentStore} from '@/utils/defineComponentStore';
-import {computed, ref} from 'vue';
+import {computed} from 'vue';
 import {useFetch} from '@/composables/useFetch';
 import {useModal} from '@/composables/useModal';
 import {useLocalize} from '@/composables/useLocalize';
@@ -14,11 +14,13 @@ export const useReviewerRecommendationManagerStore = defineComponentStore(
 	'reviewerRecommendationManager',
 	(props) => {
 		const {apiUrl} = useUrl('reviewers/recommendations');
-		const {data: recommendations, fetch: fetchRecommendations} =
-			useFetch(apiUrl);
-		const {openDialog, openSideModal, closeSideModal} = useModal();
+		const {
+			data: recommendations,
+			fetch: fetchRecommendations,
+			isLoading: isRecommendationsLoading,
+		} = useFetch(apiUrl);
+		const {openDialog, openSideModal} = useModal();
 		const {t, localize} = useLocalize();
-		const currentForm = ref({});
 
 		const items = computed({
 			get: () => recommendations.value?.items || [],
@@ -125,74 +127,50 @@ export const useReviewerRecommendationManagerStore = defineComponentStore(
 			});
 		}
 
-		async function setupRecommendationForm(item = null) {
-			let preparedForm = cloneDeep(props.form);
-
-			if (!item) {
-				// Adding new recommendation
-				preparedForm.action = apiUrl.value;
-				preparedForm.method = 'POST';
-			} else {
-				// Editing existing recommendation
-				preparedForm.action = `${apiUrl.value}/${item.id}`;
-				preparedForm.method = 'PUT';
-				preparedForm.fields = preparedForm.fields.map((field) => {
-					const baseField = {...field};
-
-					if (field.isMultilingual) {
-						baseField.value = {};
-						if (item[field.name]) {
-							Object.keys(item[field.name]).forEach((locale) => {
-								baseField.value[locale] = item[field.name][locale];
-							});
-						}
-					} else {
-						baseField.value =
-							item[field.name] !== undefined
-								? item[field.name]
-								: field.value || '';
-					}
-
-					return baseField;
-				});
-			}
-
-			currentForm.value = preparedForm;
-		}
-
-		function openRecommendationFormModal(title) {
-			const {form} = useForm(currentForm);
-			openSideModal(ReviewerRecommendationsEditModal, {
-				title,
-				formProps: form,
-				onRecommendationSaved: recommendationSaved,
-				onUpdateForm: (formId, data) => {
-					Object.keys(data).forEach((key) => {
-						form.value[key] = data[key];
-					});
+		function openRecommendationFormModal(title, form) {
+			openSideModal(
+				ReviewerRecommendationsEditModal,
+				{
+					title,
+					formProps: form,
 				},
-			});
-		}
-
-		async function recommendationSaved(recommendation) {
-			closeSideModal(ReviewerRecommendationsEditModal);
-			await fetchRecommendations();
+				{
+					onClose: async () => {
+						await fetchRecommendations();
+					},
+				},
+			);
 		}
 
 		function handleAdd() {
-			setupRecommendationForm();
-			openRecommendationFormModal(t('grid.action.addReviewerRecommendation'));
+			const newForm = cloneDeep(props.form);
+			const {setAction, setMethod} = useForm(newForm);
+			setAction(apiUrl.value);
+			setMethod('POST');
+
+			openRecommendationFormModal(
+				t('grid.action.addReviewerRecommendation'),
+				newForm,
+			);
 		}
 
 		function handleEdit(item) {
-			setupRecommendationForm(item);
-			openRecommendationFormModal(t('grid.action.editReviewerRecommendation'));
+			const editForm = cloneDeep(props.form);
+			const {setValues, setAction, setMethod} = useForm(editForm);
+			setAction(`${apiUrl.value}/${item.id}`);
+			setMethod('PUT');
+			setValues(item);
+			openRecommendationFormModal(
+				t('grid.action.editReviewerRecommendation'),
+				editForm,
+			);
 		}
 
 		// Initial data fetch
 		fetchRecommendations();
 
 		return {
+			isRecommendationsLoading,
 			items,
 			itemsMax,
 			handleStatusToggle,