Merge branch 'pkp:main' into ipula/9658-users-table

src/components/Container/Page.vue

@@ -45,51 +45,7 @@ export default {
 			unreadTasksCount: 0,
 		};
 	},
-	computed: {
-		/**
-		 * The menu item entry for a back-to-dashboard link
-		 *
-		 * @return {Object|null}
-		 */
-		backToDashboardLink() {
-			if (this.useBackToDashboard) {
-				return this.menu[Object.keys(this.menu)[0]];
-			}
-			return null;
-		},
-
-		/**
-		 * The new label for the back-to-dashboard link
-		 *
-		 * Converts "Submissions" to "Back to Submissions"
-		 *
-		 * @return {String}
-		 */
-		backToDashboardLabel() {
-			if (this.backToDashboardLink) {
-				return this.t('navigation.backTo', {
-					page: this.backToDashboardLink.name,
-				});
-			}
-			return null;
-		},
-
-		/**
-		 * Should a back-to-dashboard link be shown instead of a
-		 * full navigation menu?
-		 *
-		 * This is the case when the nav menu contains only one link.
-		 *
-		 * @return {Boolean}
-		 */
-		useBackToDashboard() {
-			return (
-				!!this.menu &&
-				Object.keys(this.menu).length === 1 &&
-				!this.menu[Object.keys(this.menu)[0]].isCurrent
-			);
-		},
-	},
+	computed: {},
 	mounted() {
 		/**
 		 * Fire a callback when the URL #hash is changed

src/components/Container/SubmissionWizardPage.vue

@@ -90,6 +90,10 @@ export default {
 			i18nUnsavedChanges: '',
 			/** **Required** A localized string for the message of the dialog that appears when unsaved changes are found in local storage. */
 			i18nUnsavedChangesMessage: '',
+			/** The URL to the REST API endpoint to cancel this submission. */
+			submissionCancelApiUrl: '',
+			/** The URL to the page to display after a submission is cancelled. */
+			submissionCancelledUrl: '',
 		};
 	},
 	computed: {
@@ -782,6 +786,52 @@ export default {
 				});
 			}, 500);
 		},
+
+		/**
+		 * Cancel a submission.
+		 */
+		cancelSubmission(){
+			this.openDialog({
+				name: 'SubmissionCancel',
+				title: this.t('submission.wizard.submissionCancel'),
+				message: this.t('submission.wizard.cancel.confirmation'),
+				actions: [
+					{
+						label: this.t('common.ok'),
+						isPrimary: true,
+						callback: (close) => {
+							$.ajax({
+								url: this.submissionCancelApiUrl,
+								context: this,
+								method: 'POST',
+								headers: {
+									'X-Csrf-Token': pkp.currentUser.csrfToken,
+									'X-Http-Method-Override': 'DELETE',
+								},
+								error(r) {
+									close();
+
+									if (!r.responseJSON) {
+										this.ajaxErrorCallback({});
+									} else {
+										this.errors = r.responseJSON;
+									}
+								},
+								success() {
+									window.location = this.submissionCancelledUrl;
+								},
+							});
+						},
+					},
+					{
+						label: this.t('common.cancel'),
+						isWarnable: true,
+						callback: (close) => close(),
+					},
+				],
+				modalStyle: 'negative',
+			});
+		}
 	},
 };
 </script>

src/components/DropdownActions/DropdownActions.vue

@@ -1,30 +1,22 @@
 <template>
-	<div class="relative inline-block items-start justify-between">
+	<div
+		class="relative inline-block items-start justify-between"
+		:class="{'leading-none': displayAsEllipsis}"
+	>
 		<Menu as="div">
-			<div>
-				<MenuButton
-					class="hover:bg-gray-50 inline-flex w-full justify-center gap-x-1.5 rounded"
-					:class="
-						displayAsEllipsis
-							? 'text-3xl-normal'
-							: 'border border-light bg-secondary px-3 py-2 text-lg-normal'
-					"
-					:aria-label="ariaLabel || null"
-				>
-					<span v-if="!displayAsEllipsis">{{ label }}</span>
-					<Icon
-						v-if="!displayAsEllipsis"
-						class="h-5 w-5 text-primary"
-						icon="Dropdown"
-						aria-hidden="true"
-					/>
-					<ButtonIcon
-						v-else
-						icon="MoreOptions"
-						:aria-label="label"
-					></ButtonIcon>
-				</MenuButton>
-			</div>
+			<MenuButton
+				:class="menuButtonStyle"
+				:aria-label="displayAsEllipsis ? label : ariaLabel"
+			>
+				<span v-if="!displayAsEllipsis">{{ label }}</span>
+				<Icon
+					v-if="!displayAsEllipsis"
+					class="h-5 w-5 text-primary"
+					icon="Dropdown"
+					aria-hidden="true"
+				/>
+				<Icon v-else class="h-6 w-6" icon="MoreOptions" aria-hidden="true" />
+			</MenuButton>
 
 			<transition
 				enter-active-class="transition ease-out duration-100"
@@ -80,10 +72,10 @@
 <script setup>
 import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
 import PkpButton from '@/components/Button/Button.vue';
-import ButtonIcon from '@/components/ButtonIcon/ButtonIcon.vue';
 import Icon from '@/components/Icon/Icon.vue';
+import {computed} from 'vue';
 
-defineProps({
+const props = defineProps({
 	/**
 	 * An array of action objects.
 	 * Each object should contain
@@ -140,6 +132,16 @@ const emitAction = (action) => {
 	}
 };
 
+const menuButtonStyle = computed(() => ({
+	// Base
+	'hover:bg-gray-50 w-full justify-center rounded': true,
+	// Default
+	'inline-flex border border-light bg-secondary px-3 py-2 text-lg-normal gap-x-1.5':
+		!props.displayAsEllipsis,
+	// Ellipsis Menu
+	'leading-none hover:text-on-dark hover:bg-hover': props.displayAsEllipsis,
+}));
+
 const isValidAction = (action) => {
 	return action?.label && (action?.url || action?.name);
 };

src/components/Form/fields/Autosuggest.vue

@@ -103,7 +103,7 @@
 	</Combobox>
 </template>
 <script setup>
-import {useSlots, ref, inject, computed} from 'vue';
+import {useSlots, ref, computed} from 'vue';
 import {
 	Combobox,
 	ComboboxInput,
@@ -157,6 +157,11 @@ const props = defineProps({
 		type: Boolean,
 		default: () => true,
 	},
+	/** If custom items can be selected */
+	allowCustom: {
+		type: Boolean,
+		default: () => false,
+	},
 	/** Field input id, usually used to connect with FormFieldLabel  */
 	inputId: {type: String, required: false, default: null},
 	/** aria-describedby ids */
@@ -189,7 +194,6 @@ const emit = defineEmits([
 	'deselect',
 ]);
 
-const allowCustom = inject('allowCustom', false);
 const localInputValue = ref('');
 const isFocused = ref(false);
 

src/components/Form/fields/FieldBaseAutosuggest.vue

@@ -189,6 +189,11 @@ export default {
 			type: Boolean,
 			default: () => true,
 		},
+		/** If custom items can be selected */
+		allowCustom: {
+			type: Boolean,
+			default: () => false,
+		},
 	},
 	data() {
 		return {
@@ -257,6 +262,7 @@ export default {
 				isDisabled: this.isDisabled,
 				inputId: this.controlId,
 				describedBy: this.describedByIds,
+				allowCustom: this.allowCustom,
 			};
 		},
 	},

src/components/Form/fields/FieldControlledVocab.vue

@@ -1,13 +1,16 @@
 <script>
-import {provide} from 'vue';
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
 import debounce from 'debounce';
 
 export default {
 	name: 'FieldControlledVocab',
 	extends: FieldBaseAutosuggest,
-	setup() {
-		provide('allowCustom', true);
+	props: {
+		/** An array of options to suggest. */
+		allowCustom: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

src/components/Form/fields/FieldRorAutosuggest.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import {ref, watch, computed, provide} from 'vue';
+import {ref, watch, computed} from 'vue';
 import Autosuggest from './Autosuggest.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import {useFetch} from '@/composables/useFetch';
@@ -70,8 +70,6 @@ const queryParams = computed(() => ({
 	query: inputValue.value,
 }));
 
-provide('allowCustom', true);
-
 const autosuggestContainerId = generateId();
 
 const {
@@ -87,6 +85,7 @@ const staticProps = {
 	selectedLabel: 'Selected',
 	isMultiple: false,
 	describedBy: autosuggestContainerId,
+	allowCustom: true,
 };
 
 const autoSuggestProps = computed(() => ({

src/components/Modal/Dialog.vue

@@ -66,7 +66,6 @@
 								class="flex items-center gap-x-4"
 								:class="icon ? 'p-10 ps-24' : 'p-12'"
 							>
-								<Spinner v-if="isLoading" />
 								<PkpButton
 									v-for="action in actions"
 									:key="action.label"
@@ -81,6 +80,7 @@
 								>
 									{{ action.label }}
 								</PkpButton>
+								<Spinner v-if="isLoading" />
 							</div>
 						</DialogPanel>
 					</TransitionChild>

src/composables/useFetch.js

@@ -18,6 +18,32 @@ export function getCSRFToken() {
 	return FALLBACK_TOKEN;
 }
 
+/**
+ * This workaround addresses the limitation where ofetch does not handle array query params in PHP friendly way.
+ * Once this issue is resolved in ofetch, this function can be removed.
+ * Fo reference see:
+ * - https://github.com/unjs/ufo/issues/185
+ * - https://github.com/unjs/ufo/issues/208
+ * - https://github.com/unjs/ofetch/pull/440
+ * 
+ */
+function _formatQueryParams(params) {
+	if (!params) {
+		return {}
+	}
+
+	const formatedParams = {};
+	Object.entries(params).forEach(([key, value]) => {
+		if (Array.isArray(value)) {
+			formatedParams[`${key}[]`] = value;
+		} else {
+			formatedParams[key] = value;
+		}
+	});
+
+	return formatedParams;
+}
+
 /**
  *
  * Composable for handling API requests
@@ -39,6 +65,10 @@ export function getCSRFToken() {
  * @returns {Ref<boolean>} return.isLoading - A ref object indicating whether the fetch operation is currently in progress.
  * @returns {Function} return.fetch - The function to call to initiate the fetch operation. This function is async and handles the actual fetching logic.
  *
+ *  * The `fetch` function accepts the following optional parameter:
+ * @param {Object} [fetchOptions={}] - Options to customize the fetch operation.
+ * @param {boolean} [fetchOptions.clearData=false] - If set to `true`, processes and cleans the fetched data before storing it in `data`. Defaults to `false`.
+ 
  */
 export function useFetch(url, options = {}) {
 	/**
@@ -72,7 +102,7 @@ export function useFetch(url, options = {}) {
 	const screenName = modalLevel?.value ? `modal_${modalLevel.value}` : 'base';
 	const progressStore = useProgressStore();
 
-	async function _fetch() {
+	async function _fetch({clearData} = {clearData: false}) {
 		if (lastRequestController) {
 			// abort in-flight request
 			lastRequestController.abort();
@@ -83,7 +113,7 @@ export function useFetch(url, options = {}) {
 
 		const opts = {
 			...ofetchOptions,
-			query: query.value,
+			query: _formatQueryParams(query.value),
 			body: body.value,
 			signal,
 		};
@@ -109,6 +139,9 @@ export function useFetch(url, options = {}) {
 		}
 
 		isSuccess.value = null;
+		if (clearData) {
+			data.value = null;
+		}
 		try {
 			const result = await ofetchInstance(unref(url), opts);
 			data.value = result;
@@ -144,7 +177,7 @@ export function useFetch(url, options = {}) {
 
 	let fetch = _fetch;
 	if (options.debouncedMs) {
-		fetch = useDebounceFn(_fetch);
+		fetch = useDebounceFn(_fetch, options.debouncedMs);
 	}
 	return {
 		data,

src/managers/FileManager/FileManager.vue

@@ -12,7 +12,7 @@
 				</p>
 			</template>
 			<template #top-controls>
-				<div class="flex space-x-2">
+				<div class="flex gap-x-2">
 					<PkpButton
 						v-for="action in fileManagerStore.topActions"
 						:key="action.name"