pkp/pkp-lib#9744 [OJS] Migrate older Tables to newer Table API (#4378)

* pkp/pkp-lib#9744 Migrate stats issues table to use new table component * pkp/pkp-lib#9744 Inject new pages for jobs, failed jobs and failed job details pages * pkp/pkp-lib#9744 Update issues.tpl to add labelled-by and no-content slot for Table component * pkp/pkp-lib#9744 Submodule update ##blesildaramirez/i9744## * pkp/pkp-lib#9744 Remove registration of pages components as they are imported by parent component - Page.vue * pkp/pkp-lib#9744 Update table component names in issues template * pkp/pkp-lib#9744 Submodule update ##blesildaramirez/i9744## * pkp/pkp-lib#9744 Rename use of table components from stats issues template file * pkp/pkp-lib#9744 Remove table-row and table-cell when passing slot to TableBody component * pkp/pkp-lib#9744 Submodule update ##blesildaramirez/i9744##
pkp · Sep 5, 2024 · a47fddd · a47fddd
1 parent 11beda6
commit a47fddd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 41 deletions.
diff --git a/js/load.js b/js/load.js
@@ -34,9 +34,6 @@ import StatsIssuesPage from '@/components/Container/StatsIssuesPage.vue';
 import StatsUsersPage from '@/components/Container/StatsUsersPage.vue';
 import SubmissionWizardPage from '@/components/Container/SubmissionWizardPage.vue';
 import WorkflowPage from '@/components/Container/WorkflowPageOJS.vue';
-import JobsPage from '@/components/Container/JobsPage.vue';
-import FailedJobsPage from '@/components/Container/FailedJobsPage.vue';
-import FailedJobDetailsPage from '@/components/Container/FailedJobDetailsPage.vue';
 import DashboardPage from '@/pages/dashboard/DashboardPage.vue';
 
 // Expose Vue, the registry and controllers in a global var
@@ -51,9 +48,6 @@ window.pkp = Object.assign(PkpLoad, window.pkp || {}, {
 		DecisionPage,
 		ImportExportPage,
 		ManageEmailsPage,
-		JobsPage,
-		FailedJobsPage,
-		FailedJobDetailsPage,
 		Page,
 		PageOJS,
 		SettingsPage,

diff --git a/lib/pkp b/lib/pkp
diff --git a/lib/ui-library b/lib/ui-library
diff --git a/templates/stats/issues.tpl b/templates/stats/issues.tpl
@@ -111,7 +111,7 @@
 				</div>
 				<div class="pkpStats__panel" role="region" aria-live="polite">
 					<pkp-header>
-						<h2>
+						<h2 id="issueDetailTableLabel">
 							{translate key="stats.issues.details"}
 							<tooltip
 								tooltip="{translate key="stats.issues.tooltip.text"}"
@@ -144,50 +144,54 @@
 					</pkp-header>
 					<pkp-table
 						labelled-by="issueDetailTableLabel"
-						:class="tableClasses"
-						:columns="tableColumns"
-						:rows="items"
-						:order-by="orderBy"
-						:order-direction="orderDirection"
-						@order-by="setOrderBy"
+						@sort="setOrderBy"
 					>
-						<template #thead-title>
-							<search
-								class="pkpStats__titleSearch"
-								:search-phrase="searchPhrase"
-								search-label="{translate key="stats.issues.searchIssueDescription"}"
-								@search-phrase-changed="setSearchPhrase"
-							></search>
-						</template>
-						<template #default="{ row, rowIndex }">
-							<table-cell
-								v-for="(column, columnIndex) in tableColumns"
+						<table-header>
+							<table-column
+								v-for="column in tableColumns"
 								:key="column.name"
-								:column="column"
-								:row="row"
-								:tabindex="!rowIndex && !columnIndex ? 0 : -1"
+								:id="column.name"
+								:allows-sorting="column.name === 'total'"
 							>
-								<template #default v-if="column.name === 'title'">
+								<template v-if="column.name === 'title'">
+									{{ column.label }}
+									<search
+										class="pkpStats__titleSearch"
+										:search-phrase="searchPhrase"
+										search-label="{translate key="stats.issues.searchIssueDescription"}"
+										@search-phrase-changed="setSearchPhrase"
+									></search>
+								</template>
+								<template v-else>
+									{{ column.label }}
+								</template>
+							</table-column>
+						</table-header>
+						<table-body>
+							<table-row v-for="(row) in items" :key="row.key">
+								<table-cell>
 									<a
 										:href="row.issue.publishedUrl"
 										class="pkpStats__itemLink"
 										target="_blank"
 									>
 										<span class="pkpStats__itemTitle">{{ row.issue.identification }}</span>
 									</a>
+								</table-cell>
+								<table-cell>{{ row.tocViews }}</table-cell>
+								<table-cell>{{ row.issueGalleyViews }}</table-cell>
+								<table-cell>{{ row.totalViews }}</table-cell>
+							</table-row>
+							<template #no-content v-if="!items.length">
+								<template v-if="isLoadingItems">
+									{translate key="common.loading"}
 								</template>
-							</table-cell>
-						</template>
+								<template v-else>
+									{translate key="stats.issues.none"}
+								</template>
+							</template>
+						</table-body>
 					</pkp-table>
-					<div v-if="!items.length" class="pkpStats__noRecords">
-						<template v-if="isLoadingItems">
-							<spinner></spinner>
-							{translate key="common.loading"}
-						</template>
-						<template v-else>
-							{translate key="stats.issues.none"}
-						</template>
-					</div>
 					<pagination
 						v-if="lastPage > 1"
 						id="issueDetailTablePagination"