pkp/pkp-lib#6528 Disable the delete action instead of hiding it when …

…no incomplete submission is listed

src/components/DropdownActions/DropdownActions.vue

@@ -46,6 +46,7 @@
 						v-for="(action, i) in actions"
 						:key="i"
 						v-slot="{active, close}"
+						:disabled="action.disabled || false"
 					>
 						<div class="min-w-[96px]">
 							<PkpButton
@@ -57,6 +58,7 @@
 								:is-warnable="action.isWarnable"
 								:class="i !== actions.length - 1 ? 'border-b' : ''"
 								size-variant="fullWidth"
+								:is-disabled="action.disabled || false"
 								class="border-light"
 								@click="
 									() => {
@@ -82,7 +84,16 @@ import ButtonIcon from '@/components/ButtonIcon/ButtonIcon.vue';
 import Icon from '@/components/Icon/Icon.vue';
 
 defineProps({
-	/** An array of action objects. Each object should contain `label` (string), `url` (string) to navigate to if the action involves a link, or `name` (string) to perform the action when clicked, an optional `icon` (string) and `isWarnable` (boolean) if the button needs the "warning" button styling from `<Button>` component. */
+	/**
+	 * An array of action objects.
+	 * Each object should contain
+	 * 	`label` (string),
+	 * 	`url` (string) to navigate to if the action involves a link, or
+	 * 	`name` (string) to perform the action when clicked, an optional
+	 * 	`icon` (string) and
+	 * 	`isWarnable` (boolean) if the button needs the "warning" button styling from `<Button>` component.
+	 *  `disabled` (boolean) when the item is not available
+	 * */
 	actions: {
 		type: Array,
 		required: true,

src/pages/dashboard/components/DashboardBulkActions.vue

@@ -18,12 +18,13 @@ const {t} = useLocalize();
 const actions = computed(() => {
 	const _actions = [];
 
-	if (dashboardStore.bulkDeleteDisplayDeleteButton) {
+	if (dashboardStore.bulkDeleteIsAvailableForUser) {
 		_actions.push({
 			label: t('admin.submissions.incomplete.bulkDelete.button'),
 			name: 'bulkDeleteSelectionEnable',
 			isWarnable: true,
 			icon: 'Cancel',
+			disabled: dashboardStore.bulkDeleteSubmissionIdsCanBeDeleted.length === 0,
 		});
 	}
 

src/pages/dashboard/composables/useDashboardBulkDelete.js

@@ -54,7 +54,10 @@ export function useDashboardBulkDelete({
 		// incomplete submission can be deleted by author of the submission or admin
 		if (submission.submissionProgress)
 			if (
-				hasCurrentUserAtLeastOneRole([pkp.const.ROLE_ID_SITE_ADMIN]) ||
+				hasCurrentUserAtLeastOneRole([
+					pkp.const.ROLE_ID_SITE_ADMIN,
+					pkp.const.ROLE_ID_MANAGER,
+				]) ||
 				hasCurrentUserAtLeastOneAssignedRoleInAnyStage(submission, [
 					pkp.const.ROLE_ID_AUTHOR,
 				])
@@ -65,23 +68,18 @@ export function useDashboardBulkDelete({
 		return false;
 	}
 
-	// Display only for admins and journal managers on editorial dashboard and for author dashboard, where user can delete own submissions
-	// Display only if some incomplete submissions are in the listing
-	const bulkDeleteDisplayDeleteButton = computed(() => {
-		if (bulkDeleteSubmissionIdsCanBeDeleted.value.length > 0) {
-			if (
-				dashboardPage === DashboardPageTypes.EDITORIAL_DASHBOARD &&
-				hasCurrentUserAtLeastOneRole([
-					pkp.const.ROLE_ID_SITE_ADMIN,
-					pkp.const.ROLE_ID_MANAGER,
-				])
-			) {
-				return true;
-			} else if (dashboardPage === DashboardPageTypes.MY_SUBMISSIONS) {
-				return true;
-			}
+	const bulkDeleteIsAvailableForUser = computed(() => {
+		if (
+			dashboardPage === DashboardPageTypes.EDITORIAL_DASHBOARD &&
+			hasCurrentUserAtLeastOneRole([
+				pkp.const.ROLE_ID_SITE_ADMIN,
+				pkp.const.ROLE_ID_MANAGER,
+			])
+		) {
+			return true;
+		} else if (dashboardPage === DashboardPageTypes.MY_SUBMISSIONS) {
+			return true;
 		}
-
 		return false;
 	});
 
@@ -94,7 +92,6 @@ export function useDashboardBulkDelete({
 				}
 			});
 		}
-
 		return submissionIds;
 	});
 
@@ -145,7 +142,7 @@ export function useDashboardBulkDelete({
 	}
 
 	return {
-		bulkDeleteDisplayDeleteButton,
+		bulkDeleteIsAvailableForUser,
 		bulkDeleteSelectionEnabled,
 		bulkDeleteSelectionEnable,
 		bulkDeleteSelectionDisable,

src/pages/dashboard/dashboardPageStore.js

@@ -238,7 +238,7 @@ export const useDashboardPageStore = defineComponentStore(
 		 * Bulk delete
 		 */
 		const {
-			bulkDeleteDisplayDeleteButton,
+			bulkDeleteIsAvailableForUser,
 
 			bulkDeleteSelectionEnabled,
 			bulkDeleteSelectionEnable,
@@ -437,7 +437,7 @@ export const useDashboardPageStore = defineComponentStore(
 			setCurrentPage,
 
 			// Bulk delete
-			bulkDeleteDisplayDeleteButton,
+			bulkDeleteIsAvailableForUser,
 
 			bulkDeleteSelectionEnabled,
 			bulkDeleteSelectionEnable,