From 3903d2e8f8af98b44ee254d628abeb4b36e4106f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Mon, 24 Feb 2025 12:07:52 +0100
Subject: [PATCH] pkp/pkp-lib#10067 Dashboard add extensibility for columns,
 left controls, right controls

---
 src/pages/dashboard/DashboardPage.vue         |  42 ++---
 .../components/DashboardActionButton.vue      |  28 ++++
 ...ns.vue => DashboardControlBulkActions.vue} |   0
 ...e => DashboardControlBulkDeleteButton.vue} |   0
 .../components/DashboardControlSearch.vue     |  16 ++
 .../DashboardTable/DashboardTable.vue         |   2 +-
 .../composables/useDashboardConfiguration.js  | 148 ++++++++++++++++++
 src/pages/dashboard/dashboardPageStore.js     |  24 ++-
 8 files changed, 240 insertions(+), 20 deletions(-)
 create mode 100644 src/pages/dashboard/components/DashboardActionButton.vue
 rename src/pages/dashboard/components/{DashboardBulkActions.vue => DashboardControlBulkActions.vue} (100%)
 rename src/pages/dashboard/components/{DashboardBulkDeleteButton.vue => DashboardControlBulkDeleteButton.vue} (100%)
 create mode 100644 src/pages/dashboard/components/DashboardControlSearch.vue
 create mode 100644 src/pages/dashboard/composables/useDashboardConfiguration.js

diff --git a/src/pages/dashboard/DashboardPage.vue b/src/pages/dashboard/DashboardPage.vue
index 0a0d25648..77600353c 100644
--- a/src/pages/dashboard/DashboardPage.vue
+++ b/src/pages/dashboard/DashboardPage.vue
@@ -18,20 +18,20 @@
 			<div class="mt-2">
 				<div class="flex justify-between">
 					<div class="flex flex-row items-center gap-x-3">
-						<PkpButton @click="store.openFiltersModal">
-							{{ t('common.filter') }}
-						</PkpButton>
-						<DashboardBulkActions />
-						<DashboardBulkDeleteButton />
+						<component
+							:is="Components[action.component] || action.component"
+							v-bind="action.props || {}"
+							v-for="(action, i) in store.leftControlItems"
+							:key="i"
+						></component>
 					</div>
-					<div>
-						<Search
-							:search-phrase="store.searchPhrase"
-							:search-label="t('editor.submission.search')"
-							@search-phrase-changed="
-								(...args) => store.setSearchPhrase(...args)
-							"
-						></Search>
+					<div class="flex flex-row items-center gap-x-3">
+						<component
+							:is="Components[action.component] || action.component"
+							v-bind="action.props || {}"
+							v-for="(action, i) in store.rightControlItems"
+							:key="i"
+						></component>
 					</div>
 				</div>
 			</div>
@@ -56,17 +56,23 @@
 	</div>
 </template>
 <script setup>
-import PkpButton from '@/components/Button/Button.vue';
 import DashboardActiveFilters from './components/DashboardActiveFilters.vue';
 import DashboardTable from './components/DashboardTable/DashboardTable.vue';
-import DashboardBulkActions from './components/DashboardBulkActions.vue';
-import DashboardBulkDeleteButton from './components/DashboardBulkDeleteButton.vue';
-
-import Search from '@/components/Search/Search.vue';
+import DashboardControlBulkActions from './components/DashboardControlBulkActions.vue';
+import DashboardControlBulkDeleteButton from './components/DashboardControlBulkDeleteButton.vue';
+import DashboardActionButton from './components/DashboardActionButton.vue';
+import DashboardControlSearch from './components/DashboardControlSearch.vue';
 
 import {useDashboardPageStore} from './dashboardPageStore';
 import Spinner from '@/components/Spinner/Spinner.vue';
 
+const Components = {
+	DashboardControlBulkActions,
+	DashboardControlBulkDeleteButton,
+	DashboardActionButton,
+	DashboardControlSearch,
+};
+
 const props = defineProps({
 	dashboardPage: {
 		required: true,
diff --git a/src/pages/dashboard/components/DashboardActionButton.vue b/src/pages/dashboard/components/DashboardActionButton.vue
new file mode 100644
index 000000000..a596c2ca7
--- /dev/null
+++ b/src/pages/dashboard/components/DashboardActionButton.vue
@@ -0,0 +1,28 @@
+<template>
+	<PkpButton
+		:is-primary="isPrimary"
+		:is-secondary="isSecondary"
+		:is-warnable="isWarnable"
+		:is-link="isLink"
+		@click="() => dashboardStore[action](actionArgs)"
+	>
+		{{ label }}
+	</PkpButton>
+</template>
+<script setup>
+import PkpButton from '@/components/Button/Button.vue';
+
+import {useDashboardPageStore} from '../dashboardPageStore';
+
+const dashboardStore = useDashboardPageStore();
+
+defineProps({
+	isPrimary: {type: Boolean, required: false, default: false},
+	isSecondary: {type: Boolean, required: false, default: false},
+	isWarnable: {type: Boolean, required: false, default: false},
+	action: {type: String, required: true},
+	actionArgs: {type: Object, required: false, default: () => {}},
+	isLink: {type: Boolean, default: false},
+	label: {type: String, required: true},
+});
+</script>
diff --git a/src/pages/dashboard/components/DashboardBulkActions.vue b/src/pages/dashboard/components/DashboardControlBulkActions.vue
similarity index 100%
rename from src/pages/dashboard/components/DashboardBulkActions.vue
rename to src/pages/dashboard/components/DashboardControlBulkActions.vue
diff --git a/src/pages/dashboard/components/DashboardBulkDeleteButton.vue b/src/pages/dashboard/components/DashboardControlBulkDeleteButton.vue
similarity index 100%
rename from src/pages/dashboard/components/DashboardBulkDeleteButton.vue
rename to src/pages/dashboard/components/DashboardControlBulkDeleteButton.vue
diff --git a/src/pages/dashboard/components/DashboardControlSearch.vue b/src/pages/dashboard/components/DashboardControlSearch.vue
new file mode 100644
index 000000000..05758ce91
--- /dev/null
+++ b/src/pages/dashboard/components/DashboardControlSearch.vue
@@ -0,0 +1,16 @@
+<template>
+	<Search
+		:search-phrase="store.searchPhrase"
+		:search-label="t('editor.submission.search')"
+		@search-phrase-changed="(...args) => store.setSearchPhrase(...args)"
+	></Search>
+</template>
+<script setup>
+import Search from '@/components/Search/Search.vue';
+import {useLocalize} from '@/composables/useLocalize';
+
+const {t} = useLocalize();
+import {useDashboardPageStore} from '../dashboardPageStore';
+
+const store = useDashboardPageStore();
+</script>
diff --git a/src/pages/dashboard/components/DashboardTable/DashboardTable.vue b/src/pages/dashboard/components/DashboardTable/DashboardTable.vue
index 59fc684cf..7bfb8214d 100644
--- a/src/pages/dashboard/components/DashboardTable/DashboardTable.vue
+++ b/src/pages/dashboard/components/DashboardTable/DashboardTable.vue
@@ -33,7 +33,7 @@
 					:item="item"
 				/>
 				<component
-					:is="cellComponents[column.componentName] || column.componentName"
+					:is="cellComponents[column.component] || column.component"
 					v-for="column in columns"
 					:key="column.id"
 					:item="item"
diff --git a/src/pages/dashboard/composables/useDashboardConfiguration.js b/src/pages/dashboard/composables/useDashboardConfiguration.js
new file mode 100644
index 000000000..a57d6c96e
--- /dev/null
+++ b/src/pages/dashboard/composables/useDashboardConfiguration.js
@@ -0,0 +1,148 @@
+import {useLocalize} from '@/composables/useLocalize';
+import {DashboardPageTypes} from '../dashboardPageStore';
+
+export function useDashboardConfiguration() {
+	const {t} = useLocalize();
+
+	function getLeftControls() {
+		const items = [];
+
+		items.push({
+			component: 'DashboardActionButton',
+			props: {label: t('common.filter'), action: 'openFiltersModal'},
+		});
+
+		items.push({
+			component: 'DashboardControlBulkActions',
+			props: {},
+		});
+
+		items.push({
+			component: 'DashboardControlBulkDeleteButton',
+			props: {},
+		});
+
+		return items;
+	}
+	function getRightControls() {
+		const items = [];
+
+		items.push({component: 'DashboardControlSearch', props: {}});
+
+		return items;
+	}
+
+	function getColumns({dashboardPage}) {
+		const columns = [];
+		if (dashboardPage === DashboardPageTypes.MY_REVIEW_ASSIGNMENTS) {
+			columns.push({
+				id: 'id',
+				header: t('common.id'),
+				component: 'CellReviewAssignmentId',
+				sortable: true,
+			});
+
+			columns.push({
+				id: 'title',
+				header: t('navigation.submissions'),
+				component: 'CellReviewAssignmentTitle',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'activity',
+				header: t('stats.editorialActivity'),
+				component: 'CellReviewAssignmentActivity',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'actions',
+				header: t('admin.jobs.list.actions'),
+				component: 'CellReviewAssignmentActions',
+				sortable: false,
+			});
+		} else if (dashboardPage === DashboardPageTypes.MY_SUBMISSIONS) {
+			columns.push({
+				id: 'id',
+				header: t('common.id'),
+				component: 'CellSubmissionId',
+				sortable: true,
+			});
+
+			columns.push({
+				id: 'title',
+				header: t('navigation.submissions'),
+				component: 'CellSubmissionTitle',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'stage',
+				header: t('workflow.stage'),
+				component: 'CellSubmissionStage',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'activity',
+				header: t('stats.editorialActivity'),
+				component: 'CellSubmissionActivity',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'actions',
+				header: t('admin.jobs.list.actions'),
+				component: 'CellSubmissionActions',
+				sortable: false,
+			});
+		} else {
+			columns.push({
+				id: 'id',
+				header: t('common.id'),
+				component: 'CellSubmissionId',
+				sortable: true,
+			});
+
+			columns.push({
+				id: 'title',
+				header: t('navigation.submissions'),
+				component: 'CellSubmissionTitle',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'stage',
+				header: t('workflow.stage'),
+				component: 'CellSubmissionStage',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'lastActivity',
+				header: t('editor.submission.days'),
+				component: 'CellSubmissionDays',
+				sortable: true,
+			});
+
+			columns.push({
+				id: 'activity',
+				header: t('stats.editorialActivity'),
+				component: 'CellSubmissionActivity',
+				sortable: false,
+			});
+
+			columns.push({
+				id: 'actions',
+				header: t('admin.jobs.list.actions'),
+				component: 'CellSubmissionActions',
+				sortable: false,
+			});
+		}
+
+		return columns;
+	}
+
+	return {getLeftControls, getRightControls, getColumns};
+}
diff --git a/src/pages/dashboard/dashboardPageStore.js b/src/pages/dashboard/dashboardPageStore.js
index e531dc11b..9df559648 100644
--- a/src/pages/dashboard/dashboardPageStore.js
+++ b/src/pages/dashboard/dashboardPageStore.js
@@ -9,6 +9,7 @@ import {useAnnouncer} from '@/composables/useAnnouncer';
 import {useUrl} from '@/composables/useUrl';
 import {useQueryParams} from '@/composables/useQueryParams';
 import {defineComponentStore} from '@/utils/defineComponentStore';
+import {useExtender} from '@/composables/useExtender';
 
 import {useWorkflowActions} from '../workflow/composables/useWorkflowActions';
 import {useReviewerManagerActions} from '@/managers/ReviewerManager/useReviewerManagerActions';
@@ -17,6 +18,7 @@ import {useParticipantManagerActions} from '@/managers/ParticipantManager/usePar
 import {useFileManagerActions} from '@/managers/FileManager/useFileManagerActions';
 
 import {useEditorialLogic} from './composables/useEditorialLogic';
+import {useDashboardConfiguration} from './composables/useDashboardConfiguration';
 import {useReviewActivityLogic} from './composables/useReviewActivityLogic';
 import {useSubmission} from '@/composables/useSubmission';
 
@@ -45,6 +47,8 @@ export const DashboardPageTypes = {
 export const useDashboardPageStore = defineComponentStore(
 	'dashboardPage',
 	(pageInitConfig) => {
+		const extender = useExtender();
+
 		/**
 		 * ModalStore
 		 */
@@ -69,6 +73,15 @@ export const useDashboardPageStore = defineComponentStore(
 		// Reactive query params parsed from the url
 		const queryParamsUrl = useQueryParams();
 
+		/**
+		 * Config
+		 */
+		const dashboardConfig = extender.addFns(useDashboardConfiguration());
+		const leftControlItems = computed(() => dashboardConfig.getLeftControls());
+		const rightControlItems = computed(() =>
+			dashboardConfig.getRightControls(),
+		);
+
 		/**
 		 * Views
 		 */
@@ -106,7 +119,11 @@ export const useDashboardPageStore = defineComponentStore(
 		/**
 		 * Columns
 		 */
-		const columns = ref(pageInitConfig.columns);
+		const columns = computed(() =>
+			dashboardConfig.getColumns({
+				dashboardPage: pageInitConfig.dashboardPage,
+			}),
+		);
 
 		/**
 		 * Search Phrase
@@ -414,6 +431,11 @@ export const useDashboardPageStore = defineComponentStore(
 			dashboardPage: pageInitConfig.dashboardPage,
 			dashboardPageTitle,
 			dashboardPageIcon,
+
+			// Config
+			leftControlItems,
+			rightControlItems,
+
 			// Views
 			views,
 			currentViewId,