pkp/pkp-lib#10760 Refine GalleyManager (#478)

* pkp/pkp-lib#10760 Refine GalleyManager

* pkp/pkp-lib#10760 Consider publication status for galley manager actions

src/composables/useCurrentUser.js

@@ -31,11 +31,6 @@ export function useCurrentUser() {
 			}
 		});
 
-		console.log('hasCurrentUserAtLeastOneAssignedRoleInStage');
-		console.log(
-			assignedRoleIds,
-			roles.some((role) => assignedRoleIds.includes(role)),
-		);
 		return roles.some((role) => assignedRoleIds.includes(role));
 	}
 

src/managers/FileManager/useFileManagerConfig.js

@@ -11,7 +11,7 @@ export const FileManagerConfigurations = {
 			{
 				roles: [pkp.const.ROLE_ID_AUTHOR],
 				actions: [
-					Actions.FILE_FILE_LIST,
+					Actions.FILE_LIST,
 					Actions.FILE_EDIT,
 					Actions.FILE_DOWNLOAD_ALL,
 				],

src/managers/GalleyManager/GalleyManagerCellActions.vue

@@ -1,12 +1,15 @@
 <template>
 	<TableCell class="w-28">
-		<TableRowRortControls
+		<TableRowSortControls
 			v-if="galleyManagerStore.sortingEnabled"
 			@up="galleyManagerStore.sortMoveUp(galley.id)"
 			@down="galleyManagerStore.sortMoveDown(galley.id)"
 		/>
 		<DropdownActions
-			v-else
+			v-if="
+				!galleyManagerStore.sortingEnabled &&
+				galleyManagerStore.itemActions.length
+			"
 			:label="t('common.moreActions')"
 			:display-as-ellipsis="true"
 			:actions="galleyManagerStore.itemActions"
@@ -16,7 +19,7 @@
 </template>
 <script setup>
 import {useGalleyManagerStore} from './galleyManagerStore';
-import TableRowRortControls from './TableRowSortControls.vue';
+import TableRowSortControls from './TableRowSortControls.vue';
 
 defineProps({
 	galley: {type: Object, required: true},

src/managers/GalleyManager/TableRowSortControls.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="flex items-center justify-center">
 		<button
-			class="inline-flex items-center justify-center rounded p-1.5 text-primary hover:bg-primary hover:text-on-dark"
+			class="inline-flex items-center justify-center rounded text-primary hover:bg-primary hover:text-on-dark"
 			@click="emit('up')"
 		>
 			<Icon class="h-6 w-6" icon="ChevronUp"></Icon>
 		</button>
 		<button
-			class="inline-flex items-center justify-center rounded p-1.5 text-primary hover:bg-primary hover:text-on-dark"
+			class="inline-flex items-center justify-center rounded text-primary hover:bg-primary hover:text-on-dark"
 			@click="emit('down')"
 		>
 			<Icon class="h-6 w-6" icon="ChevronDown"></Icon>

src/managers/GalleyManager/galleyManagerStore.js

@@ -1,5 +1,5 @@
 import {defineComponentStore} from '@/utils/defineComponentStore';
-import {ref, computed} from 'vue';
+import {ref, computed, toRefs} from 'vue';
 import {useFetch, getCSRFToken} from '@/composables/useFetch';
 import {useModal} from '@/composables/useModal';
 import {useGalleyManagerActions} from './useGalleyManagerActions';
@@ -9,6 +9,8 @@ import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
 export const useGalleyManagerStore = defineComponentStore(
 	'galleyManager',
 	(props) => {
+		const {submission, publication} = toRefs(props);
+
 		const galleys = computed(() => {
 			return sortingEnabled.value
 				? galleysOrdered.value
@@ -18,7 +20,10 @@ export const useGalleyManagerStore = defineComponentStore(
 		/** Reload files when data on screen changes */
 
 		/** Columns */
-		const _galleyConfigurationFns = useGalleyManagerConfiguration();
+		const _galleyConfigurationFns = useGalleyManagerConfiguration({
+			submission,
+			publication,
+		});
 		const columns = computed(() => _galleyConfigurationFns.getColumns());
 
 		/**
@@ -108,7 +113,9 @@ export const useGalleyManagerStore = defineComponentStore(
 		});
 		function getActionArgs() {
 			return {
-				canEdit: props.canEdit,
+				config: _galleyConfigurationFns.config.value,
+				galleys: galleys,
+				publication: publication.value,
 			};
 		}
 

src/managers/GalleyManager/useGalleyManagerActions.js

@@ -3,73 +3,78 @@ import {useLegacyGridUrl} from '@/composables/useLegacyGridUrl';
 import {useModal} from '@/composables/useModal';
 import {useFetch, getCSRFToken} from '@/composables/useFetch';
 export const Actions = {
+	GALLEY_LIST: 'galleyList',
 	GALLEY_ADD: 'galleyAdd',
 	GALLEY_EDIT: 'galleyEdit',
 	GALLEY_CHANGE_FILE: 'galleyChangeFile',
 	GALLEY_DELETE: 'galleyDelete',
+	GALLEY_SORT: 'galleySort',
 };
 
 export function useGalleyManagerActions({galleyGridComponent}) {
 	const {t} = useLocalize();
 
-	function getBottomActions({canEdit}) {
+	function getBottomActions({config}) {
 		const actions = [];
 
-		if (!canEdit) {
-			return [];
+		if (config.permittedActions.includes(Actions.GALLEY_ADD)) {
+			actions.push({
+				component: 'GalleyManagerActionButton',
+				props: {label: t('grid.action.addGalley'), action: Actions.GALLEY_ADD},
+				isLink: true,
+			});
 		}
 
-		actions.push({
-			component: 'GalleyManagerActionButton',
-			props: {label: t('grid.action.addGalley'), action: Actions.GALLEY_ADD},
-			isLink: true,
-		});
-
 		return actions;
 	}
 
-	function getTopItems({canEdit}) {
+	function getTopItems({config, galleys}) {
 		const actions = [];
-		if (!canEdit) {
-			return [];
-		}
-
-		actions.push({component: 'GalleyManagerSortButton'});
 
+		if (
+			config.permittedActions.includes(Actions.GALLEY_SORT) &&
+			galleys.value.length
+		) {
+			actions.push({component: 'GalleyManagerSortButton'});
+		}
 		return actions;
 	}
 
-	function getItemActions({canEdit}) {
+	function getItemActions({config, publication}) {
 		const actions = [];
 
-		if (!canEdit) {
-			return [
-				{
-					label: t('common.view'),
-					name: Actions.GALLEY_EDIT,
-					icon: 'View',
-				},
-			];
-		}
+		if (config.permittedActions.includes(Actions.GALLEY_EDIT)) {
+			const label =
+				publication.status === pkp.const.STATUS_PUBLISHED
+					? t('common.view')
+					: t('common.edit');
 
-		actions.push({
-			label: t('common.edit'),
-			name: Actions.GALLEY_EDIT,
-			icon: 'Edit',
-		});
+			const icon =
+				publication.status === pkp.const.STATUS_PUBLISHED ? 'View' : 'Edit';
 
-		actions.push({
-			label: t('submission.changeFile'),
-			name: Actions.GALLEY_CHANGE_FILE,
-			icon: 'New',
-		});
+			actions.push({
+				label,
+				name: Actions.GALLEY_EDIT,
+				icon,
+			});
+		}
 
-		actions.push({
-			label: t('common.delete'),
-			name: Actions.GALLEY_DELETE,
-			icon: 'Cancel',
-			isWarnable: true,
-		});
+		if (config.permittedActions.includes(Actions.GALLEY_CHANGE_FILE)) {
+			actions.push({
+				label: t('submission.changeFile'),
+				name: Actions.GALLEY_CHANGE_FILE,
+				icon: 'New',
+			});
+		}
+
+		if (config.permittedActions.includes(Actions.GALLEY_DELETE)) {
+			actions.push({
+				label: t('common.delete'),
+				name: Actions.GALLEY_DELETE,
+				icon: 'Cancel',
+				isWarnable: true,
+			});
+		}
 
 		return actions;
 	}

src/managers/GalleyManager/useGalleyManagerConfiguration.js

@@ -1,8 +1,52 @@
 import {useLocalize} from '@/composables/useLocalize';
 import {useApp} from '@/composables/useApp';
+import {Actions} from './useGalleyManagerActions';
+import {useCurrentUser} from '@/composables/useCurrentUser';
+import {computed} from 'vue';
 
-export function useGalleyManagerConfiguration() {
+export const GalleyManagerConfiguration = {
+	permissions: [
+		{
+			roles: [pkp.const.ROLE_ID_AUTHOR],
+			actions: [Actions.GALLEY_LIST],
+		},
+		{
+			roles: [
+				pkp.const.ROLE_ID_SUB_EDITOR,
+				pkp.const.ROLE_ID_MANAGER,
+				pkp.const.ROLE_ID_SITE_ADMIN,
+				pkp.const.ROLE_ID_ASSISTANT,
+			],
+			actions: [
+				Actions.GALLEY_LIST,
+				Actions.GALLEY_ADD,
+				Actions.GALLEY_CHANGE_FILE,
+				Actions.GALLEY_DELETE,
+				Actions.GALLEY_EDIT,
+				Actions.GALLEY_SORT,
+			],
+		},
+	],
+	actions: [
+		Actions.GALLEY_LIST,
+		Actions.GALLEY_ADD,
+		Actions.GALLEY_CHANGE_FILE,
+		Actions.GALLEY_DELETE,
+		Actions.GALLEY_EDIT,
+		Actions.GALLEY_SORT,
+	],
+	actionsRequiresUnpublishedState: [
+		Actions.GALLEY_ADD,
+		Actions.GALLEY_CHANGE_FILE,
+		Actions.GALLEY_DELETE,
+		Actions.GALLEY_SORT,
+	],
+};
+
+export function useGalleyManagerConfiguration({submission, publication}) {
 	const {t} = useLocalize();
+	const {hasCurrentUserAtLeastOneAssignedRoleInStage} = useCurrentUser();
+
 	const {isOPS} = useApp();
 	function getGalleyGridComponent() {
 		if (isOPS()) {
@@ -38,5 +82,34 @@ export function useGalleyManagerConfiguration() {
 		return columns;
 	}
 
-	return {getColumns, getGalleyGridComponent};
+	const config = computed(() => {
+		const permittedActions = GalleyManagerConfiguration.actions
+			.filter((action) => {
+				if (
+					publication.value.status === pkp.const.STATUS_PUBLISHED &&
+					GalleyManagerConfiguration.actionsRequiresUnpublishedState.includes(
+						action,
+					)
+				) {
+					return false;
+				}
+
+				return true;
+			})
+			.filter((action) => {
+				return GalleyManagerConfiguration.permissions.some((perm) => {
+					return (
+						perm.actions.includes(action) &&
+						hasCurrentUserAtLeastOneAssignedRoleInStage(
+							submission.value,
+							pkp.const.WORKFLOW_STAGE_ID_PRODUCTION,
+							perm.roles,
+						)
+					);
+				});
+			});
+		return {permittedActions};
+	});
+
+	return {getColumns, getGalleyGridComponent, config};
 }

src/pages/workflow/composables/useWorkflowConfig/workflowConfigAuthorOJS.js

@@ -322,7 +322,6 @@ export const PublicationConfig = {
 					props: {
 						submission,
 						publication: selectedPublication,
-						canEditPublication: permissions.canEditPublication,
 					},
 				},
 			];

src/pages/workflow/composables/useWorkflowConfig/workflowConfigEditorialOJS.js

@@ -888,7 +888,6 @@ export const PublicationConfig = {
 					props: {
 						submission,
 						publication: selectedPublication,
-						canEdit: permissions.canEditPublication,
 					},
 				},
 			];