From 0d2198bc77e107a86208f89bce20bd8871662f50 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 10 Sep 2024 23:36:35 +0800
Subject: [PATCH] pkp/pkp-lib#9744 Migrate native tables that use class
 pkpTable to use the new table component

---
 .../contributors/ContributorsPreviewModal.vue |  58 ++++++----
 .../ListPanel/doi/DoiStatusInfoModal.vue      | 103 ++++++++++++------
 .../ContextDownloadReportModal.vue            |  17 ++-
 .../statsIssues/IssueDownloadReportModal.vue  |  27 +++--
 .../PublicationsDownloadReportModal.vue       |  41 ++++---
 5 files changed, 153 insertions(+), 93 deletions(-)

diff --git a/src/components/ListPanel/contributors/ContributorsPreviewModal.vue b/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
index 9496b7576..428eeb702 100644
--- a/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
+++ b/src/components/ListPanel/contributors/ContributorsPreviewModal.vue
@@ -7,35 +7,47 @@
 			<p>
 				{{ t('contributor.listPanel.preview.description') }}
 			</p>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('contributor.listPanel.preview.format') }}</th>
-						<th>{{ t('contributor.listPanel.preview.display') }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>{{ t('contributor.listPanel.preview.abbreviated') }}</td>
-						<td>{{ publication.authorsStringShort }}</td>
-					</tr>
-					<tr>
-						<td>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn>
+						{{ t('contributor.listPanel.preview.format') }}
+					</TableColumn>
+					<TableColumn>
+						{{ t('contributor.listPanel.preview.display') }}
+					</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow>
+						<TableCell>
+							{{ t('contributor.listPanel.preview.abbreviated') }}
+						</TableCell>
+						<TableCell>{{ publication.authorsStringShort }}</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>
 							{{ t('contributor.listPanel.preview.publicationLists') }}
-						</td>
-						<td>{{ publication.authorsStringIncludeInBrowse }}</td>
-					</tr>
-					<tr>
-						<td>{{ t('contributor.listPanel.preview.full') }}</td>
-						<td>{{ publication.authorsString }}</td>
-					</tr>
-				</tbody>
-			</table>
+						</TableCell>
+						<TableCell>
+							{{ publication.authorsStringIncludeInBrowse }}
+						</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>{{ t('contributor.listPanel.preview.full') }}</TableCell>
+						<TableCell>{{ publication.authorsString }}</TableCell>
+					</TableRow>
+				</TableBody>
+			</PkpTable>
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
 
 <script setup>
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
diff --git a/src/components/ListPanel/doi/DoiStatusInfoModal.vue b/src/components/ListPanel/doi/DoiStatusInfoModal.vue
index 92d915693..e3b19d88f 100644
--- a/src/components/ListPanel/doi/DoiStatusInfoModal.vue
+++ b/src/components/ListPanel/doi/DoiStatusInfoModal.vue
@@ -4,42 +4,68 @@
 			{{ t('manager.dois.help.statuses.title') }}
 		</template>
 		<SideModalLayoutBasic>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('common.status') }}</th>
-						<th>{{ t('common.description') }}</th>
-					</tr>
-				</thead>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.needsDoi') }}</th>
-					<td>{{ t('manager.dois.status.needsDoi.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.filters.doiAssigned') }}</th>
-					<td>{{ t('manager.dois.filters.doiAssigned.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.unregistered') }}</th>
-					<td>{{ t('manager.dois.status.unregistered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.submitted') }}</th>
-					<td>{{ t('manager.dois.status.submitted.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.registered') }}</th>
-					<td>{{ t('manager.dois.status.registered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.error.filterTitle') }}</th>
-					<td>{{ t('manager.dois.status.error.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.stale') }}</th>
-					<td>{{ t('manager.dois.status.stale.description') }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn>{{ t('common.status') }}</TableColumn>
+					<TableColumn>{{ t('common.description') }}</TableColumn>
+				</TableHeader>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.needsDoi') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.needsDoi.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.filters.doiAssigned') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.filters.doiAssigned.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.unregistered') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.unregistered.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.submitted') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.submitted.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.registered') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.registered.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.error.filterTitle') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.error.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.stale') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.stale.description') }}
+					</TableCell>
+				</TableRow>
+			</PkpTable>
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
@@ -48,6 +74,11 @@
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 </script>
diff --git a/src/pages/statsContext/ContextDownloadReportModal.vue b/src/pages/statsContext/ContextDownloadReportModal.vue
index 62e677a71..345b4bd5a 100644
--- a/src/pages/statsContext/ContextDownloadReportModal.vue
+++ b/src/pages/statsContext/ContextDownloadReportModal.vue
@@ -5,12 +5,14 @@
 		</template>
 		<SideModalLayoutBasic>
 			<p>{{ t('stats.context.downloadReport.description') }}</p>
-			<table class="pkpTable pkpStats__reportParams">
-				<tr class="pkpTable__row">
-					<th>{{ t('stats.dateRange') }}</th>
-					<td>{{ dateRangeDescription }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('stats.dateRange') }}
+					</TableCell>
+					<TableCell>{{ dateRangeDescription }}</TableCell>
+				</TableRow>
+			</PkpTable>
 			<ActionPanel class="pkpStats__reportAction">
 				<h2>{{ t('context.context') }}</h2>
 				<p>
@@ -43,6 +45,9 @@ import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
 import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
 import PkpButton from '@/components/Button/Button.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 defineProps({
diff --git a/src/pages/statsIssues/IssueDownloadReportModal.vue b/src/pages/statsIssues/IssueDownloadReportModal.vue
index dd7588197..7876d391c 100644
--- a/src/pages/statsIssues/IssueDownloadReportModal.vue
+++ b/src/pages/statsIssues/IssueDownloadReportModal.vue
@@ -5,16 +5,20 @@
 		</template>
 		<SideModalLayoutBasic>
 			<p>{{ t('stats.issues.downloadReport.description') }}</p>
-			<table class="pkpTable pkpStats__reportParams">
-				<tr class="pkpTable__row">
-					<th>{{ t('stats.dateRange') }}</th>
-					<td>{{ dateRangeDescription }}</td>
-				</tr>
-				<tr v-if="searchPhrase" class="pkpTable__row">
-					<th>{{ t('common.searchPhrase') }}</th>
-					<td>{{ searchPhrase }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('stats.dateRange') }}
+					</TableCell>
+					<TableCell>{{ dateRangeDescription }}</TableCell>
+				</TableRow>
+				<TableRow v-if="searchPhrase">
+					<TableCell :is-row-header="true">
+						{{ t('common.searchPhrase') }}
+					</TableCell>
+					<TableCell>{{ searchPhrase }}</TableCell>
+				</TableRow>
+			</PkpTable>
 			<ActionPanel class="pkpStats__reportAction">
 				<h2>{{ t('issue.issues') }}</h2>
 				<p>
@@ -47,6 +51,9 @@ import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
 import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
 import PkpButton from '@/components/Button/Button.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 defineProps({
diff --git a/src/pages/statsPublications/PublicationsDownloadReportModal.vue b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
index 4fee9165c..d21e19904 100644
--- a/src/pages/statsPublications/PublicationsDownloadReportModal.vue
+++ b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
@@ -5,24 +5,26 @@
 		</template>
 		<SideModalLayoutBasic>
 			<p>{{ t('stats.publications.downloadReport.description') }}</p>
-			<table class="pkpTable pkpStats__reportParams">
-				<tr class="pkpTable__row">
-					<th>{{ t('stats.dateRange') }}</th>
-					<td>{{ dateRangeDescription }}</td>
-				</tr>
-				<tr
-					v-for="(filterSet, index) in filters"
-					:key="index"
-					class="pkpTable__row"
-				>
-					<th>{{ filterSet.heading }}</th>
-					<td>{{ getFilterDescription(filterSet) }}</td>
-				</tr>
-				<tr v-if="searchPhrase" class="pkpTable__row">
-					<th>{{ t('common.searchPhrase') }}</th>
-					<td>{{ searchPhrase }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('stats.dateRange') }}
+					</TableCell>
+					<TableCell>{{ dateRangeDescription }}</TableCell>
+				</TableRow>
+				<TableRow v-for="(filterSet, index) in filters" :key="index">
+					<TableCell :is-row-header="true">
+						{{ filterSet.heading }}
+					</TableCell>
+					<TableCell>{{ getFilterDescription(filterSet) }}</TableCell>
+				</TableRow>
+				<TableRow v-if="searchPhrase">
+					<TableCell :is-row-header="true">
+						{{ t('common.searchPhrase') }}
+					</TableCell>
+					<TableCell>{{ searchPhrase }}</TableCell>
+				</TableRow>
+			</PkpTable>
 			<ActionPanel class="pkpStats__reportAction">
 				<h2>{{ t('common.publications') }}</h2>
 				<p>
@@ -92,6 +94,9 @@ import {useLocalize} from '@/composables/useLocalize';
 import ActionPanel from '@/components/ActionPanel/ActionPanel.vue';
 import PkpButton from '@/components/Button/Button.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 defineProps({