Skip to content

Commit

Permalink
pkp/pkp-lib#9744 Migrate native tables that use class pkpTable to use…
Browse files Browse the repository at this point in the history 
… the new table component
  • Loading branch information
@blesildaramirez
blesildaramirez committed Sep 10, 2024
1 parent 661a912 commit 0d2198b
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 93 deletions.
58 changes: 35 additions & 23 deletions src/components/ListPanel/contributors/ContributorsPreviewModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
103 changes: 67 additions & 36 deletions src/components/ListPanel/doi/DoiStatusInfoModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
17 changes: 11 additions & 6 deletions src/pages/statsContext/ContextDownloadReportModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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({
Expand Down
27 changes: 17 additions & 10 deletions src/pages/statsIssues/IssueDownloadReportModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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({
Expand Down
41 changes: 23 additions & 18 deletions src/pages/statsPublications/PublicationsDownloadReportModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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({
Expand Down

0 comments on commit 0d2198b

Please sign in to comment.