Skip to content

Commit

Permalink
pkp/pkp-lib#9744 Migrate older Tables to newer Table API (#389)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
blesildaramirez authored Sep 5, 2024
1 parent 6dedc2b commit b978d50
Show file tree
Hide file tree
Showing 17 changed files with 1,482 additions and 230 deletions.
38 changes: 0 additions & 38 deletions src/components/Container/FailedJobDetailsPage.vue

This file was deleted.

69 changes: 0 additions & 69 deletions src/components/Container/FailedJobsPage.vue

This file was deleted.

6 changes: 6 additions & 0 deletions src/components/Container/Page.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
73 changes: 43 additions & 30 deletions src/components/Container/StatsPage.stories.js
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
25 changes: 10 additions & 15 deletions src/components/Container/StatsPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -17,6 +21,10 @@ export default {
PkpHeader,
PkpTable,
TableCell,
TableColumn,
TableHeader,
TableBody,
TableRow,
},
extends: Page,
mixins: [ajaxError],
Expand Down Expand Up @@ -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) {
Expand Down
7 changes: 4 additions & 3 deletions src/components/Container/StatsPublicationsPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
/**
Expand Down
Loading

0 comments on commit b978d50

Please sign in to comment.