pkp/pkp-lib#10688 FileManager fixes and refinments

src/components/Button/Button.vue

@@ -69,11 +69,11 @@ function click(e) {
 
 const styles = computed(() => ({
 	// Base
-	'inline-flex relative items-center gap-x-1 text-lg-semibold': true,
+	'inline-flex relative items-center gap-x-1 ': true,
 	// Button
-	'': !props.isLink,
+	'text-lg-semibold': !props.isLink,
 	// Link (adding border to keep dimensions consistent with button)
-	'border-transparent hover:enabled:underline disabled:text-disabled':
+	'border-transparent hover:enabled:underline disabled:text-disabled text-lg-medium':
 		props.isLink,
 	// Primary colors
 	'bg-primary border-transparent text-on-dark hover:bg-hover hover:text-on-dark disabled:bg-disabled disabled:text-disabled':

src/components/Table/Table.vue

@@ -36,14 +36,15 @@
 		<div
 			v-if="slots['bottom-controls']"
 			class="flex justify-between border-x border-b border-light px-3 py-2"
+			:class="{'bg-tertiary': isFooterDarker}"
 		>
 			<slot name="bottom-controls" />
 		</div>
 	</div>
 </template>
 
 <script setup>
-import {provide, toRefs, defineEmits, ref, useSlots} from 'vue';
+import {provide, toRefs, defineEmits, ref, useSlots, computed} from 'vue';
 import {useId} from '@/composables/useId.js';
 
 const emit = defineEmits([
@@ -73,11 +74,27 @@ const props = defineProps({
 const {sortDescriptor} = toRefs(props);
 
 const columnsCount = ref(0);
+const rowCount = ref(0);
+
+const registerRow = () => {
+	rowCount.value++;
+};
+
+const unregisterRow = () => {
+	rowCount.value--;
+};
+
+const isFooterDarker = computed(() => {
+	return !!(rowCount.value % 2);
+});
 
 const tableContext = {
 	sortDescriptor,
 	onSort,
 	columnsCount,
+	rowCount,
+	registerRow,
+	unregisterRow,
 };
 
 const slots = useSlots();

src/components/Table/TableBody.vue

@@ -1,7 +1,7 @@
 <template>
 	<tbody class="">
 		<slot></slot>
-		<tr v-if="!rowCount">
+		<tr v-if="!tableContext.rowCount.value">
 			<td
 				:colspan="tableContext.columnsCount.value"
 				class="border-x border-b border-light p-5 text-base-normal"
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-import {useSlots, computed, inject, provide, ref} from 'vue';
+import {useSlots, computed, inject} from 'vue';
 import {useLocalize} from '@/composables/useLocalize';
 
 const props = defineProps({
@@ -25,18 +25,6 @@ const slots = useSlots();
 const {t} = useLocalize();
 
 const tableContext = inject('tableContext');
-const rowCount = ref(0);
-
-const registerRow = () => {
-	rowCount.value++;
-};
-
-const unregisterRow = () => {
-	rowCount.value--;
-};
-
-provide('registerRow', registerRow);
-provide('unregisterRow', unregisterRow);
 
 const emptyText = computed(() => {
 	return props.emptyText || t('grid.noItems');

src/components/Table/TableRow.vue

@@ -7,17 +7,15 @@
 <script setup>
 import {inject, onMounted, onUnmounted} from 'vue';
 
-// Inject the register and unregister functions from TableBody
-const registerRow = inject('registerRow', null);
-const unregisterRow = inject('unregisterRow', null);
+const tableContext = inject('tableContext', null);
 
 // Register the row when the component is mounted
 onMounted(() => {
-	if (registerRow) registerRow();
+	if (tableContext) tableContext.registerRow();
 });
 
 // Unregister the row when the component is unmounted
 onUnmounted(() => {
-	if (unregisterRow) unregisterRow();
+	if (tableContext) tableContext.unregisterRow();
 });
 </script>

src/composables/useCurrentUser.js

@@ -1,3 +1,5 @@
+import {useSubmission} from './useSubmission';
+
 export const EditorialRoles = [
 	pkp.const.ROLE_ID_SITE_ADMIN,
 	pkp.const.ROLE_ID_MANAGER,
@@ -14,6 +16,29 @@ export function useCurrentUser() {
 		return pkp.currentUser.id;
 	}
 
+	function hasCurrentUserAtLeastOneAssignedRoleInStage(
+		submission,
+		stageId,
+		roles = [],
+	) {
+		const {getStageById} = useSubmission();
+		const assignedRoleIds = [];
+
+		const stage = getStageById(submission, stageId);
+		stage.currentUserAssignedRoles.forEach((assignedRoleId) => {
+			if (!assignedRoleIds.includes(assignedRoleId)) {
+				assignedRoleIds.push(assignedRoleId);
+			}
+		});
+
+		console.log('hasCurrentUserAtLeastOneAssignedRoleInStage');
+		console.log(
+			assignedRoleIds,
+			roles.some((role) => assignedRoleIds.includes(role)),
+		);
+		return roles.some((role) => assignedRoleIds.includes(role));
+	}
+
 	function hasCurrentUserAtLeastOneAssignedRoleInAnyStage(
 		submission,
 		roles = [],
@@ -33,6 +58,7 @@ export function useCurrentUser() {
 	return {
 		hasCurrentUserAtLeastOneRole,
 		getCurrentUserId,
+		hasCurrentUserAtLeastOneAssignedRoleInStage,
 		hasCurrentUserAtLeastOneAssignedRoleInAnyStage,
 	};
 }

src/managers/FileManager/FileManager.vue

@@ -39,20 +39,17 @@
 					:file="file"
 				></FileManagerTableRow>
 			</TableBody>
+			<template v-if="fileManagerStore.bottomActions.length" #bottom-controls>
+				<PkpButton
+					v-for="action in fileManagerStore.bottomActions"
+					:key="action.name"
+					is-link
+					@click="fileManagerStore[action.name]"
+				>
+					{{ action.label }}
+				</PkpButton>
+			</template>
 		</PkpTable>
-		<div
-			v-if="fileManagerStore.bottomActions.length"
-			class="flex space-x-2 border-x border-b border-light p-2"
-		>
-			<PkpButton
-				v-for="action in fileManagerStore.bottomActions"
-				:key="action.name"
-				is-link
-				@click="fileManagerStore[action.name]"
-			>
-				{{ action.label }}
-			</PkpButton>
-		</div>
 	</div>
 </template>
 <script setup>

src/managers/FileManager/FileManagerTableRow.vue

@@ -7,7 +7,7 @@
 			</div>
 		</TableCell>
 		<TableCell :is-row-header="true" full-width-truncated>
-			<span class="ms-2 truncate text-base-normal text-default">
+			<span class="ms-2 truncate text-lg-normal text-default">
 				<a
 					v-if="file.url"
 					class="hover:underline"

src/managers/FileManager/fileManagerStore.js

@@ -1,6 +1,6 @@
 import {defineComponentStore} from '@/utils/defineComponentStore';
 
-import {ref, computed, watch, toRefs} from 'vue';
+import {computed, watch, toRefs} from 'vue';
 import {useFetch} from '@/composables/useFetch';
 import {useUrl} from '@/composables/useUrl';
 import {useFileManagerActions} from './useFileManagerActions';
@@ -9,21 +9,21 @@ import {useDataChanged} from '@/composables/useDataChanged';
 export const useFileManagerStore = defineComponentStore(
 	'fileManager',
 	(props) => {
-		const submissionId = ref(props.submission.id);
-		const {namespace, submissionStageId} = toRefs(props);
+		const {namespace, submissionStageId, submission} = toRefs(props);
 		/**
 		 * Manager configuration
 		 */
 		const {managerConfig} = useFileManagerConfig({
 			namespace: namespace,
 			submissionStageId: submissionStageId,
+			submission,
 		});
 
 		/**
 		 *  Files fetching
 		 */
 		const {apiUrl: filesApiUrl} = useUrl(
-			`submissions/${submissionId.value}/files`,
+			`submissions/${submission.value.id}/files`,
 		);
 
 		const queryParams = computed(() => ({
@@ -39,9 +39,14 @@ export const useFileManagerStore = defineComponentStore(
 
 		watch(
 			[filesApiUrl, queryParams],
-			() => {
-				files.value = null;
-				fetchFiles();
+			([newFilesApiUrl, newQueryParams], [oldFilesApiUrl, oldQueryParams]) => {
+				if (
+					newFilesApiUrl !== oldFilesApiUrl ||
+					JSON.stringify(newQueryParams) !== JSON.stringify(oldQueryParams)
+				) {
+					files.value = null;
+					fetchFiles();
+				}
 			},
 			{immediate: true},
 		);
@@ -87,6 +92,7 @@ export const useFileManagerStore = defineComponentStore(
 				wizardTitleKey: managerConfig.value.wizardTitleKey,
 				uploadSelectTitleKey: managerConfig.value.uploadSelectTitleKey,
 				gridComponent: managerConfig.value.gridComponent,
+				titleKey: managerConfig.value.titleKey,
 			};
 		}
 

src/managers/FileManager/useFileManagerActions.js

@@ -77,13 +77,17 @@ export function useFileManagerActions() {
 		);
 	}
 
-	function fileDownloadAll({fileStage, submission, submissionStageId}) {
+	function fileDownloadAll({
+		fileStage,
+		submission,
+		submissionStageId,
+		titleKey,
+	}) {
 		const {url} = useLegacyGridUrl({
 			component: 'api.file.FileApiHandler',
 			op: 'downloadAllFiles',
 			params: {
-				// TODO this needs to be different for different grids
-				nameLocaleKey: 'editor.submission.production.productionReadyFiles',
+				nameLocaleKey: titleKey,
 				fileStage,
 				submissionId: submission.id,
 				stageId: submissionStageId,
@@ -203,7 +207,7 @@ export function useFileManagerActions() {
 		if (enabledActions.includes(Actions.FILE_DOWNLOAD_ALL) && filesCount) {
 			actions.push({
 				label: t('submission.files.downloadAll'),
-				name: 'downloadAll',
+				name: Actions.FILE_DOWNLOAD_ALL,
 			});
 		}
 

src/managers/FileManager/useFileManagerConfig.js

@@ -76,7 +76,7 @@ export const FileManagerConfigurations = {
 				: pkp.const.SUBMISSION_FILE_REVIEW_FILE,
 		gridComponent: 'grid.files.review.EditorReviewFilesGridHandler',
 		titleKey: tk('fileManager.filesForReview'),
-		descriptionKey: tk('fileManager.submissionFilesDescription'),
+		descriptionKey: tk('fileManager.filesForReviewDescription'),
 		uploadSelectTitleKey: tk('editor.submission.review.currentFiles'),
 	}),
 	WORKFLOW_REVIEW_REVISIONS: ({stageId}) => ({
@@ -92,7 +92,6 @@ export const FileManagerConfigurations = {
 			},
 			{
 				roles: [
-					pkp.const.ROLE_ID_AUTHOR,
 					pkp.const.ROLE_ID_SUB_EDITOR,
 					pkp.const.ROLE_ID_MANAGER,
 					pkp.const.ROLE_ID_SITE_ADMIN,
@@ -117,21 +116,10 @@ export const FileManagerConfigurations = {
 			stageId === pkp.const.WORKFLOW_STAGE_ID_INTERNAL_REVIEW
 				? pkp.const.SUBMISSION_FILE_INTERNAL_REVIEW_REVISION
 				: pkp.const.SUBMISSION_FILE_REVIEW_REVISION,
-		titleKey: tk('submission.list.revisionsSubmitted'),
+		titleKey: tk('fileManager.revisionsUploaded'),
 		descriptionKey: tk('fileManager.revisionsUploadedDescription'),
 		wizardTitleKey: tk('editor.submissionReview.uploadFile'),
 	}),
-	// TODO after triage
-	REVIEW_ATTACHMENTS: () => ({
-		// visible only to authors and reviewers? Add permissions for reviewers once used
-		permissions: [],
-		actions: [],
-		fileStage: pkp.const.SUBMISSION_FILE_REVIEW_ATTACHMENT,
-		gridComponent: 'grid.files.attachment.authorReviewAttachmentsGridHandler',
-		titleKey: tk('fileManager.filesForReview'),
-		descriptionKey: tk('fileManager.deskReviewFilesDescription'),
-		uploadSelectTitleKey: tk('editor.submission.review.currentFiles'),
-	}),
 	COPYEDITED_FILES: ({stageId}) => ({
 		permissions: [
 			{
@@ -213,6 +201,7 @@ export const FileManagerConfigurations = {
 					Actions.FILE_EDIT,
 					Actions.FILE_DELETE,
 					Actions.FILE_SEE_NOTES,
+					Actions.FILE_DOWNLOAD_ALL,
 				],
 			},
 		],
@@ -222,6 +211,7 @@ export const FileManagerConfigurations = {
 			Actions.FILE_EDIT,
 			Actions.FILE_DELETE,
 			Actions.FILE_SEE_NOTES,
+			Actions.FILE_DOWNLOAD_ALL,
 		],
 		fileStage: pkp.const.SUBMISSION_FILE_PRODUCTION_READY,
 		titleKey: tk('editor.submission.production.productionReadyFiles'),
@@ -230,10 +220,14 @@ export const FileManagerConfigurations = {
 	}),
 };
 
-export function useFileManagerConfig({namespace, submissionStageId}) {
+export function useFileManagerConfig({
+	namespace,
+	submissionStageId,
+	submission,
+}) {
 	const {t} = useLocalize();
 
-	const {hasCurrentUserAtLeastOneRole} = useCurrentUser();
+	const {hasCurrentUserAtLeastOneAssignedRoleInStage} = useCurrentUser();
 
 	const managerConfig = computed(() => {
 		const config = FileManagerConfigurations[namespace.value]({
@@ -244,7 +238,11 @@ export function useFileManagerConfig({namespace, submissionStageId}) {
 			return config.permissions.some((perm) => {
 				return (
 					perm.actions.includes(action) &&
-					hasCurrentUserAtLeastOneRole(perm.roles)
+					hasCurrentUserAtLeastOneAssignedRoleInStage(
+						submission.value,
+						submissionStageId.value,
+						perm.roles,
+					)
 				);
 			});
 		});
@@ -253,6 +251,7 @@ export function useFileManagerConfig({namespace, submissionStageId}) {
 			fileStage: config.fileStage,
 			permittedActions,
 			title: t(config.titleKey),
+			titleKey: config.titleKey,
 			description: t(config.descriptionKey),
 			wizardTitleKey: config.wizardTitleKey,
 			uploadSelectTitleKey: config.uploadSelectTitleKey,

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

@@ -144,7 +144,7 @@ export const WorkflowConfig = {
 				props: {
 					namespace: 'WORKFLOW_REVIEW_REVISIONS',
 					submission: submission,
-					submissionStageId: submission.stageId,
+					submissionStageId: selectedStageId,
 					reviewRoundId: selectedReviewRound?.id,
 				},
 			});