pkp/pkp-lib#9744 Migrate older Tables to newer Table API (#389)

* pkp/pkp-lib#9744 Migrate old tables to use new table api (TableNext) * pkp/pkp-lib#9744 Copy table data mocks to TableNext component dir * pkp/pkp-lib#9744 Use correct event handler when sorting table for StatsPage stories file * pkp/pkp-lib#9744 Add missing classes for new table component * pkp/pkp-lib#9744 Re-add missing tooltip in StatsPage story * pkp/pkp-lib#9744 Add top-controls and bottom-controls to new table component * pkp/pkp-lib#9744 Add vue templates for Jobs, FailedJobs and FailedJobDetails pages * pkp/pkp-lib#9744 Add accessible attributes to DOI tables * pkp/pkp-lib#9744 Add class attr to Table component * pkp/pkp-lib#9744 Add slot for no-content for TableBody component * pkp/pkp-lib#9744 Remove added pkpTable classes for TableRow and TableCell components * pkp/pkp-lib#9744 Replace aria-label with labelled-by in StatsPage stories * pkp/pkp-lib#9744 Remove unused FailedJobDetailsPage container and component imports * pkp/pkp-lib#9744 Code cleanup on the table component and stats-page stories file * pkp/pkp-lib#9744 Remove setting tableClasses in Stats pages * pkp/pkp-lib#9744 Fix eslint problems * pkp/pkp-lib#9744 Rename JobsPage container to JobsPageBase * pkp/pkp-lib#9744 Move JobsPageBase to /pages/jobs dir * pkp/pkp-lib#9744 Update how no-content slot is rendered in TableBody component
pkp · Sep 5, 2024 · b978d50 · b978d50
1 parent 6dedc2b
commit b978d50
Show file tree

Hide file tree

Showing 17 changed files with 1,482 additions and 230 deletions.
diff --git a/src/components/Container/FailedJobDetailsPage.vue b/src/components/Container/FailedJobDetailsPage.vue
diff --git a/src/components/Container/FailedJobsPage.vue b/src/components/Container/FailedJobsPage.vue
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
@@ -4,13 +4,19 @@ import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
 import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissionPage.vue';
+import JobsPage from '@/pages/jobs/JobsPage.vue';
+import FailedJobsPage from '@/pages/jobs/FailedJobsPage.vue';
+import FailedJobDetailsPage from '@/pages/jobs/FailedJobDetailsPage.vue';
 
 export default {
 	name: 'Page',
 	components: {
 		PkpAnnouncer,
 		ModalManager,
 		ReviewerSubmissionPage,
+		JobsPage,
+		FailedJobsPage,
+		FailedJobDetailsPage,
 	},
 	extends: Container,
 	data() {

diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
@@ -1,8 +1,8 @@
 import StatsPage from './StatsPage.vue';
 import StatsEditorialPage from '@/components/Container/StatsEditorialPage.vue';
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
-import ArticleStatsMock from '@/components/Table/mocks/articleStats.js';
-import ArticleStatsColumnsMock from '@/components/Table/mocks/articleStatsColumns.js';
+import ArticleStatsMock from '@/components/TableNext/mocks/articleStats.js';
+import ArticleStatsColumnsMock from '@/components/TableNext/mocks/articleStatsColumns.js';
 import debounce from 'debounce';
 
 export default {
@@ -116,27 +116,26 @@ const EditorialStatsPageWithDataAndTemplate = {
 					<PkpTable
 						class="pkpTable--editorialStats"
 						labelled-by="editorialActivityTabelLabel"
-						:columns="tableColumns"
-						:rows="tableRows"
 					>
-						<template #default="{row, rowIndex}">
-							<TableCell
-								v-for="(column, columnIndex) in tableColumns"
-								:key="column.name"
-								:column="column"
-								:row="row"
-								:tabindex="!rowIndex && !columnIndex ? 0 : -1"
-							>
-								<template #default v-if="column.name === 'name'">
+						<TableHeader>
+							<TableColumn v-for="(column, columnIndex) in tableColumns" :key="column.name" :id="column.name">
+								{{column.label}}
+							</TableColumn>
+						</TableHeader>
+						<TableBody>
+							<TableRow v-for="(row, index) in tableRows" :key="index">
+								<TableCell>
 									{{ row.name }}
 									<Tooltip
 										v-if="row.description"
 										:label="'Description for ' + row.name"
 										:tooltip="row.description"
 									></Tooltip>
-								</template>
-							</TableCell>
-						</template>
+								</TableCell>
+								<TableCell>{{ row.dateRange }}</TableCell>
+								<TableCell>{{ row.total }}</TableCell>
+							</TableRow>
+						</TableBody>
 					</PkpTable>
 				</div>
 			</div>
@@ -540,21 +539,35 @@ const PublicationStatsPageWithDataAndTemplate = {
 					</PkpHeader>
 					<PkpTable
 						labelled-by="articleDetailTableLabel"
-						: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="Search by title, author and ID"
-								@search-phrase-changed="setSearchPhrase"
-							/>
-						</template>
+						<TableHeader>
+							<TableColumn v-for="column in tableColumns" :key="column.name" :id="column.name">
+								<template v-if="column.name === 'title'">
+									{{ column.label }}
+									<Search
+										class="pkpStats__titleSearch"
+										:search-phrase="searchPhrase"
+										search-label="Search by title, author and ID"
+										@search-phrase-changed="setSearchPhrase"
+									/>
+								</template>
+								<template v-else>
+									{{ column.label }}
+								</template>
+							</TableColumn>
+						</TableHeader>
+						<TableBody>
+							<TableRow v-for="(row) in items" :key="row.key">
+								<TableCell>{{ row.object.fullTitle.en }}</TableCell>
+								<TableCell>{{ row.abstractViews }}</TableCell>
+								<TableCell>{{ row.galleyViews }}</TableCell>
+								<TableCell>{{ row.pdfViews }}</TableCell>
+								<TableCell>{{ row.htmlViews }}</TableCell>
+								<TableCell>{{ row.otherViews }}</TableCell>
+								<TableCell>{{ row.total }}</TableCell>
+							</TableRow>
+						</TableBody>
 					</PkpTable>
 					<div v-if="!items.length" class="pkpStats__noRecords">
 						<template v-if="isLoadingItems">

diff --git a/src/components/Container/StatsPage.vue b/src/components/Container/StatsPage.vue
@@ -4,8 +4,12 @@ import DateRange from '@/components/DateRange/DateRange.vue';
 import PkpFilter from '@/components/Filter/Filter.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import PkpTable from '@/components/Table/Table.vue';
-import TableCell from '@/components/Table/TableCell.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+import TableColumn from '@/components/TableNext/TableColumn.vue';
+import TableHeader from '@/components/TableNext/TableHeader.vue';
+import TableBody from '@/components/TableNext/TableBody.vue';
+import TableRow from '@/components/TableNext/TableRow.vue';
 import ajaxError from '@/mixins/ajaxError';
 
 export default {
@@ -17,6 +21,10 @@ export default {
 		PkpHeader,
 		PkpTable,
 		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
 	},
 	extends: Page,
 	mixins: [ajaxError],
@@ -57,19 +65,6 @@ export default {
 			}
 			return classes;
 		},
-
-		/**
-		 * Add classes to the table when it is loading
-		 *
-		 * @return Array
-		 */
-		tableClasses() {
-			let classes = [];
-			if (this.isLoadingItems) {
-				classes.push('-isLoading');
-			}
-			return classes;
-		},
 	},
 	watch: {
 		activeFilters(newVal, oldVal) {

diff --git a/src/components/Container/StatsPublicationsPage.vue b/src/components/Container/StatsPublicationsPage.vue
@@ -488,11 +488,12 @@ export default {
 		 * Set the orderBy and orderDirection values
 		 *
 		 * @param string orderBy What param to order by
-		 * @param boolean orderDirection true = DESC, false = ASC
 		 */
-		setOrderBy(orderBy, orderDirection) {
+		setOrderBy(orderBy) {
 			this.orderBy = orderBy;
-			this.orderDirection = orderDirection;
+
+			// Toggle the boolean value of orderDirection
+			this.orderDirection = !this.orderDirection;
 		},
 
 		/**