pkp/pkp-lib#9744 Migrate old tables to use new table api (TableNext)

blesildaramirez · Aug 29, 2024 · 76425d1 · 76425d1
1 parent c006bca
commit 76425d1
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 99 deletions.
diff --git a/src/components/Container/FailedJobDetailsPage.vue b/src/components/Container/FailedJobDetailsPage.vue
@@ -1,13 +1,21 @@
 <script>
 import Page from './Page.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';
 
 export default {
 	name: 'FailedJobDetailsPage',
 	components: {
 		PkpTable,
 		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
 	},
 	extends: Page,
 	data() {

diff --git a/src/components/Container/FailedJobsPage.vue b/src/components/Container/FailedJobsPage.vue
@@ -1,6 +1,7 @@
 <script>
 import JobsPage from './JobsPage.vue';
-import TableCell from '@/components/Table/TableCell.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
+
 import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 
 export default {

diff --git a/src/components/Container/JobsPage.vue b/src/components/Container/JobsPage.vue
@@ -1,13 +1,15 @@
 <script>
 import Page from './Page.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
-import PkpTable from '@/components/Table/Table.vue';
+import PkpTable from '@/components/TableNext/Table.vue';
+import TableCell from '@/components/TableNext/TableCell.vue';
 import ajaxError from '@/mixins/ajaxError';
 
 export default {
 	name: 'JobsPage',
 	components: {
 		PkpTable,
+		TableCell,
 		Pagination,
 	},
 	extends: Page,

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 {
@@ -115,28 +115,20 @@ const EditorialStatsPageWithDataAndTemplate = {
 				<div class="pkpStats__table" role="region" aria-live="polite">
 					<PkpTable
 						class="pkpTable--editorialStats"
-						labelled-by="editorialActivityTabelLabel"
-						:columns="tableColumns"
-						:rows="tableRows"
+						aria-label="Trends"
 					>
-						<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'">
-									{{ row.name }}
-									<Tooltip
-										v-if="row.description"
-										:label="'Description for ' + row.name"
-										:tooltip="row.description"
-									></Tooltip>
-								</template>
-							</TableCell>
-						</template>
+						<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 }}</TableCell>
+								<TableCell>{{ row.dateRange }}</TableCell>
+								<TableCell>{{ row.total }}</TableCell>
+							</TableRow>
+						</TableBody>
 					</PkpTable>
 				</div>
 			</div>
@@ -539,22 +531,37 @@ const PublicationStatsPageWithDataAndTemplate = {
 						</template>
 					</PkpHeader>
 					<PkpTable
-						labelled-by="articleDetailTableLabel"
+						aria-label="Article Details"
 						:class="tableClasses"
-						:columns="tableColumns"
-						:rows="items"
-						:order-by="orderBy"
-						:order-direction="orderDirection"
 						@order-by="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],

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;
 		},
 
 		/**

diff --git a/src/components/ListPanel/doi/DoiItemVersionModal.vue b/src/components/ListPanel/doi/DoiItemVersionModal.vue
@@ -16,36 +16,46 @@
 				>
 					{{ getVersionHeader(version) }}
 				</a>
-				<PkpTable
-					:columns="doiListColumns"
-					:rows="
-						item.doiObjects.filter(
-							(doiObject) => doiObject.versionNumber === version.versionNumber,
-						)
-					"
-				>
-					<template #default="{row}">
-						<TableCell :column="doiListColumns[0]" :row="row">
-							<label
-								:for="row.uid"
-								v-bind:class="{labelDisabled: row.disabled}"
-							>
-								{{ row.displayType }}
-							</label>
-						</TableCell>
-						<TableCell :column="doiListColumns[1]" :row="row">
-							<input
-								:id="row.uid"
-								v-model="
-									mutableDois.find((doi) => doi.uid === row.uid).identifier
-								"
-								class="pkpFormField__input pkpFormField--text__input"
-								type="text"
-								:readonly="!(isEditingDois && !isSaving)"
-								:disabled="isEditingDois && row.disabled"
-							/>
-						</TableCell>
-					</template>
+				<PkpTable :aria-label="getVersionHeader(version)">
+					<TableHeader>
+						<TableColumn
+							v-for="column in doiListColumns"
+							:key="column.name"
+							:id="column.name"
+						>
+							{{ column.label }}
+						</TableColumn>
+					</TableHeader>
+					<TableBody>
+						<TableRow
+							v-for="row in item.doiObjects.filter(
+								(doiObject) =>
+									doiObject.versionNumber === version.versionNumber,
+							)"
+							:key="row.column"
+						>
+							<TableCell>
+								<label
+									:for="row.uid"
+									v-bind:class="{labelDisabled: row.disabled}"
+								>
+									{{ row.displayType }}
+								</label>
+							</TableCell>
+							<TableCell>
+								<input
+									:id="row.uid"
+									v-model="
+										mutableDois.find((doi) => doi.uid === row.uid).identifier
+									"
+									class="pkpFormField__input pkpFormField--text__input"
+									type="text"
+									:readonly="!(isEditingDois && !isSaving)"
+									:disabled="isEditingDois && row.disabled"
+								/>
+							</TableCell>
+						</TableRow>
+					</TableBody>
 				</PkpTable>
 				<span v-if="item.hasDisabled">
 					{{ item.hasDisabledMsg }}
@@ -73,8 +83,12 @@
 <script setup>
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.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 Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 

diff --git a/src/components/ListPanel/doi/DoiListItem.vue b/src/components/ListPanel/doi/DoiListItem.vue
@@ -67,26 +67,37 @@
 			v-if="isExpanded"
 			class="listPanel__itemExpanded listPanel__itemExpanded--doi"
 		>
-			<PkpTable :columns="doiListColumns" :rows="currentVersionDoiObjects">
-				<template #default="{row}">
-					<TableCell :column="doiListColumns[0]" :row="row">
-						<label :for="row.uid" :class="{labelDisabled: row.disabled}">
-							{{ row.displayType }}
-						</label>
-					</TableCell>
-					<TableCell :column="doiListColumns[1]" :row="row">
-						<input
-							:id="row.uid"
-							v-model="
-								mutableDois.find((doi) => doi.uid === row.uid).identifier
-							"
-							class="pkpFormField__input pkpFormField--text__input"
-							type="text"
-							:readonly="!(isEditingDois && !isSaving)"
-							:disabled="isEditingDois && row.disabled"
-						/>
-					</TableCell>
-				</template>
+			<PkpTable :aria-label="'DOI for ' + item.title">
+				<TableHeader>
+					<TableColumn
+						v-for="column in doiListColumns"
+						:key="column.name"
+						:id="column.name"
+					>
+						{{ column.label }}
+					</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow v-for="row in currentVersionDoiObjects" :key="row.column">
+						<TableCell>
+							<label :for="row.uid" :class="{labelDisabled: row.disabled}">
+								{{ row.displayType }}
+							</label>
+						</TableCell>
+						<TableCell>
+							<input
+								:id="row.uid"
+								v-model="
+									mutableDois.find((doi) => doi.uid === row.uid).identifier
+								"
+								class="pkpFormField__input pkpFormField--text__input"
+								type="text"
+								:readonly="!(isEditingDois && !isSaving)"
+								:disabled="isEditingDois && row.disabled"
+							/>
+						</TableCell>
+					</TableRow>
+				</TableBody>
 			</PkpTable>
 			<span v-if="item.hasDisabled">
 				{{ item.hasDisabledMsg }}
@@ -186,8 +197,12 @@ import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 
 import Expander from '@/components/Expander/Expander.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 DoiItemViewErrorDialogBody from './DoiItemViewErrorDialogBody.vue';
 import DoiItemViewRegisteredMessageDialogBody from './DoiItemViewRegisteredMessageDialogBody.vue';
 import DoiItemVersionModal from './DoiItemVersionModal.vue';
@@ -202,6 +217,10 @@ export default {
 		Expander,
 		PkpTable,
 		TableCell,
+		TableColumn,
+		TableHeader,
+		TableBody,
+		TableRow,
 	},
 	props: {
 		apiUrl: {