pkp/pkp-lib#6528 Bulk delete - Adjust permissions and the UI for impr…

…oved accessibility

src/components/Button/Button.stories.js

@@ -50,6 +50,14 @@ export const Warnable = {
 	},
 };
 
+export const WarnableDisabled = {
+	args: {
+		slot: 'Delete',
+		isWarnable: true,
+		isDisabled: true,
+	},
+};
+
 export const IsCompact = {
 	args: {
 		slot: 'Delete',

src/components/Button/Button.vue

@@ -82,7 +82,7 @@ const styles = computed(() => ({
 	'text-primary border-light  hover:text-hover disabled:text-disabled ':
 		isSecondary.value,
 	// Warnable
-	'text-negative border-light': props.isWarnable,
+	'text-negative border-light disabled:text-disabled': props.isWarnable,
 	// Warnable & Secondary have white background when its not link
 	'bg-secondary': (isSecondary.value || props.isWarnable) && !props.isLink,
 	// Active

src/pages/dashboard/DashboardPage.vue

@@ -8,12 +8,12 @@
 			</h2>
 			<div class="mt-2">
 				<div class="flex justify-between">
-					<div class="flex flex-row space-x-2">
+					<div class="flex flex-row items-center space-x-3">
 						<PkpButton @click="store.openFiltersModal">
 							{{ t('common.filter') }}
 						</PkpButton>
-						<!-- Temporarly hide it on main branch until permissions details are decided -->
-						<!--<DashboardBulkDeleteButton />-->
+						<DashboardBulkActions />
+						<DashboardBulkDeleteButton />
 					</div>
 					<div>
 						<Search
@@ -50,7 +50,9 @@
 import PkpButton from '@/components/Button/Button.vue';
 import DashboardActiveFilters from './components/DashboardActiveFilters.vue';
 import DashboardTable from './components/DashboardTable/DashboardTable.vue';
-//import DashboardBulkDeleteButton from './components/DashboardBulkDeleteButton.vue';
+import DashboardBulkActions from './components/DashboardBulkActions.vue';
+import DashboardBulkDeleteButton from './components/DashboardBulkDeleteButton.vue';
+
 import Search from '@/components/Search/Search.vue';
 
 import {useDashboardPageStore} from './dashboardPageStore';

src/pages/dashboard/components/DashboardBulkActions.vue

@@ -0,0 +1,40 @@
+<template>
+	<DropdownActions
+		v-if="actions.length"
+		:label="t('common.moreActions')"
+		:display-as-ellipsis="true"
+		:actions="actions"
+		direction="right"
+		@action="handleAction"
+	/>
+</template>
+<script setup>
+import {computed} from 'vue';
+import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
+
+const actions = computed(() => {
+	const _actions = [];
+
+	if (dashboardStore.bulkDeleteDisplayDeleteButton) {
+		_actions.push({
+			label: t('admin.submissions.incomplete.bulkDelete.button'),
+			name: 'bulkDeleteSelectionEnable',
+			isWarnable: true,
+			icon: 'Cancel',
+		});
+	}
+
+	return _actions;
+});
+
+import {useDashboardPageStore} from '../dashboardPageStore';
+
+const dashboardStore = useDashboardPageStore();
+
+function handleAction(actionName, actionArgs = {}) {
+	dashboardStore[actionName](actionArgs);
+}
+</script>

src/pages/dashboard/components/DashboardBulkDeleteButton.vue

@@ -1,17 +1,9 @@
 <template>
 	<PkpButton
-		v-if="store.bulkDeleteDisplayDeleteButton"
-		:is-disabled="store.bulkDeleteSubmissionIdsCanBeDeleted.length === 0"
-		:is-active="
-			store.bulkDeleteEnabled && store.bulkDeleteSelectedItems.length === 0
-		"
-		:is-warnable="!!store.bulkDeleteSelectedItems.length"
-		@click="
-			() =>
-				store.bulkDeleteSelectedItems.length
-					? store.bulkDeleteActionDelete()
-					: store.bulkDeleteToggleEnabled()
-		"
+		v-if="store.bulkDeleteSelectionEnabled"
+		:is-disabled="store.bulkDeleteSelectedItems.length === 0"
+		:is-warnable="true"
+		@click="() => store.bulkDeleteActionDelete()"
 	>
 		{{ t('admin.submissions.incomplete.bulkDelete.button') }}
 	</PkpButton>

src/pages/dashboard/components/DashboardTable/DashboardTable.vue

@@ -4,7 +4,7 @@
 		@sort="(columnId) => $emit('sortColumn', columnId)"
 	>
 		<TableHeader>
-			<TableColumn v-if="dashboardStore.bulkDeleteEnabled">
+			<TableColumn v-if="dashboardStore.bulkDeleteSelectionEnabled">
 				<span class="sr-only">
 					{{ t('admin.submissions.incomplete.bulkDelete.column.description') }}
 				</span>
@@ -20,7 +20,10 @@
 		</TableHeader>
 		<TableBody>
 			<TableRow v-for="item in items" :key="item.id">
-				<CellBulkDelete v-if="dashboardStore.bulkDeleteEnabled" :item="item" />
+				<CellBulkDelete
+					v-if="dashboardStore.bulkDeleteSelectionEnabled"
+					:item="item"
+				/>
 				<component
 					:is="cellComponents[column.componentName] || column.componentName"
 					v-for="column in columns"

src/pages/dashboard/composables/useDashboardBulkDelete.js

@@ -14,21 +14,21 @@ export function useDashboardBulkDelete({
 }) {
 	const {t} = useLocalize();
 
-	// Display only for admins on editorial dashboard and for author dashboard, where user can delete own submissions
-	const bulkDeleteDisplayDeleteButton = computed(() => {
-		if (
-			dashboardPage === DashboardPageTypes.EDITORIAL_DASHBOARD &&
-			hasCurrentUserAtLeastOneRole([pkp.const.ROLE_ID_SITE_ADMIN])
-		) {
-			return true;
-		} else if (dashboardPage === DashboardPageTypes.MY_SUBMISSIONS) {
-			return true;
-		}
+	/**
+	 * Enabling the checkboxes to select submissions to be deleted
+	 * */
+	const bulkDeleteSelectionEnabled = ref(false);
+	function bulkDeleteSelectionEnable() {
+		bulkDeleteSelectionEnabled.value = true;
+	}
 
-		return false;
-	});
+	function bulkDeleteSelectionDisable() {
+		bulkDeleteSelectionEnabled.value = false;
+	}
 
-	const bulkDeleteEnabled = ref(false);
+	/**
+	 * Managing the list of selected items
+	 * */
 	const bulkDeleteSelectedItems = ref([]);
 	function bulkDeleteSelectItem(submissionId) {
 		if (!bulkDeleteSelectedItems.value.includes(submissionId)) {
@@ -42,10 +42,9 @@ export function useDashboardBulkDelete({
 		);
 	}
 
-	function bulkDeleteToggleEnabled() {
-		bulkDeleteEnabled.value = !bulkDeleteEnabled.value;
-	}
-
+	/**
+	 * Permissions
+	 * */
 	const {
 		hasCurrentUserAtLeastOneAssignedRoleInAnyStage,
 		hasCurrentUserAtLeastOneRole,
@@ -66,6 +65,26 @@ 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;
+			}
+		}
+
+		return false;
+	});
+
 	const bulkDeleteSubmissionIdsCanBeDeleted = computed(() => {
 		const submissionIds = [];
 		if (submissions.value && submissions.value?.length) {
@@ -94,7 +113,7 @@ export function useDashboardBulkDelete({
 
 	function bulkDeleteResetSelection() {
 		bulkDeleteSelectedItems.value = [];
-		bulkDeleteEnabled.value = false;
+		bulkDeleteSelectionEnabled.value = false;
 	}
 
 	function bulkDeleteActionDelete() {
@@ -115,6 +134,7 @@ export function useDashboardBulkDelete({
 					label: t('common.cancel'),
 					isWarnable: true,
 					callback: (close) => {
+						bulkDeleteResetSelection();
 						close();
 					},
 				},
@@ -126,9 +146,9 @@ export function useDashboardBulkDelete({
 
 	return {
 		bulkDeleteDisplayDeleteButton,
-		bulkDeleteEnabled,
-		bulkDeleteToggleEnabled,
-
+		bulkDeleteSelectionEnabled,
+		bulkDeleteSelectionEnable,
+		bulkDeleteSelectionDisable,
 		bulkDeleteSelectedItems,
 		bulkDeleteSelectItem,
 		bulkDeleteDeselectItem,

src/pages/dashboard/dashboardPageStore.js

@@ -240,8 +240,9 @@ export const useDashboardPageStore = defineComponentStore(
 		const {
 			bulkDeleteDisplayDeleteButton,
 
-			bulkDeleteEnabled,
-			bulkDeleteToggleEnabled,
+			bulkDeleteSelectionEnabled,
+			bulkDeleteSelectionEnable,
+			bulkDeleteSelectionDisable,
 
 			bulkDeleteSelectedItems,
 			bulkDeleteSelectItem,
@@ -438,8 +439,9 @@ export const useDashboardPageStore = defineComponentStore(
 			// Bulk delete
 			bulkDeleteDisplayDeleteButton,
 
-			bulkDeleteEnabled,
-			bulkDeleteToggleEnabled,
+			bulkDeleteSelectionEnabled,
+			bulkDeleteSelectionEnable,
+			bulkDeleteSelectionDisable,
 
 			bulkDeleteSelectedItems,
 			bulkDeleteSelectItem,