Skip to content

Commit

Permalink
#9744 Migrate older Tables to newer Table API (#10255)
Browse files Browse the repository at this point in the history 
* #9744 Register components from new table api: TableNext

* #9744 Migrate old tables to use new table api (TableNext)

* #9744 Update cypress test when checking cell in failed jobs table

* #9744 Migrate jobs, failed jobs and failed-jobs-page from smarty to vue templates

* #9744 Add labelled-by attribute when using PkpTable for stats pages

* #9744 Use no-content slot when showing no items for Table component - stats pages

* #9744 Fix issue with Editorial stats table column width

* #9744 Update cypress test for checking the author cell on the publication stats table

* #9744 Code cleanup on stats/editorial template

* #9744 Remove tableClass -isLoading (setting opacity) when table is loading

* #9744 Add Pkp prefix when registering table components

* #9744 Rename table component used on stats template files

* #9744 Remove table-row and table-cell when passing slot to TableBody component

* #9744 Remove class added for stats editorial template
  • Loading branch information
@blesildaramirez
blesildaramirez authored Sep 5, 2024
1 parent 41b38eb commit 0d8b72e
Show file tree
Hide file tree
Showing 10 changed files with 125 additions and 193 deletions.
4 changes: 2 additions & 2 deletions cypress/support/commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,13 +647,13 @@ Cypress.Commands.add('checkTable', (articleDetails, articles, authors, submissio
cy.get('h2:contains("' + articleDetails + '")').scrollIntoView();
cy.get(`div:contains("${submissionCount} of ${submissionCount} ${articles}")`);
authors.forEach(author => {
cy.get('.pkpStats__panel .pkpTable__cell:contains("' + author + '")');
cy.get('.pkpStats__panel .pkpStats__itemAuthors:contains("' + author + '")');
});
cy.get('input.pkpSearch__input').type('shouldreturnzeromatches', {delay: 0});
cy.get('div:contains("No ' + articles + ' were found with usage statistics matching these parameters.")');
cy.get('div:contains("0 of 0 ' + articles + '")');
cy.get('input.pkpSearch__input').clear().type(authors[0], {delay: 0});
cy.get('.pkpStats__panel .pkpTable__cell:contains("' + authors[0] + '")');
cy.get('.pkpStats__panel .pkpStats__itemAuthors:contains("' + authors[0] + '")');
cy.get(`div:contains("${submissionCountFromAuthor} of ${submissionCountFromAuthor} ${articles}")`);
cy.get('input.pkpSearch__input').clear();
});
Expand Down
18 changes: 9 additions & 9 deletions cypress/tests/integration/Jobs.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('Jobs tests', function() {
cy.waitJQuery();

cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 2)
.should('be.visible');

Expand All @@ -34,7 +34,7 @@ describe('Jobs tests', function() {
cy.waitJQuery();

cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 0);

cy.logout();
Expand Down Expand Up @@ -62,7 +62,7 @@ describe('Jobs tests', function() {

// check for 4 failed job rows
cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 4)
.should('be.visible');

Expand All @@ -71,7 +71,7 @@ describe('Jobs tests', function() {

// check for 3 failed job rows
cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 3)
.should('be.visible');

Expand All @@ -80,7 +80,7 @@ describe('Jobs tests', function() {

// check for 2 failed job rows
cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 2);

// Back to Jobs page
Expand All @@ -90,7 +90,7 @@ describe('Jobs tests', function() {

// Check for one job in queue which just redispatch from failed job page
cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 1);

// Back to failed jobs page
Expand All @@ -114,7 +114,7 @@ describe('Jobs tests', function() {

// check for 0 failed job rows after requeue all action
cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 0);

// Confirm that 'Requeue All Failed Jobs' button has removed from view
Expand All @@ -127,7 +127,7 @@ describe('Jobs tests', function() {

// Check for 2 more jobs(in totla 3) in queue which just redispatch via requeue all action
cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 3);

// purge all existing jobs in the test queue
Expand All @@ -137,7 +137,7 @@ describe('Jobs tests', function() {
cy.waitJQuery();

cy.get('.pkpTable')
.find('span:contains("queuedTestJob")')
.find('td:contains("queuedTestJob")')
.should('have.length', 0);

cy.logout();
Expand Down
14 changes: 11 additions & 3 deletions js/load.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,12 @@ import Orderer from '@/components/Orderer/Orderer.vue';
import Pagination from '@/components/Pagination/Pagination.vue';
import ProgressBar from '@/components/ProgressBar/ProgressBar.vue';
import Search from '@/components/Search/Search.vue';
import Table from '@/components/Table/Table.vue';
import TableCell from '@/components/Table/TableCell.vue';
import Table 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 Tooltip from '@/components/Tooltip/Tooltip.vue';

// Form components from UI Library
Expand All @@ -80,7 +84,7 @@ import FieldControlledVocab from '@/components/Form/fields/FieldControlledVocab.
import FieldHtml from '@/components/Form/fields/FieldHtml.vue';
import FieldMetadataSetting from '@/components/Form/fields/FieldMetadataSetting.vue';
import FieldOptions from '@/components/Form/fields/FieldOptions.vue';
import FieldOrcid from "@/components/Form/fields/FieldOrcid.vue";
import FieldOrcid from '@/components/Form/fields/FieldOrcid.vue';
import FieldPreparedContent from '@/components/Form/fields/FieldPreparedContent.vue';
import FieldPubId from '@/components/Form/fields/FieldPubId.vue';
import FieldRadioInput from '@/components/Form/fields/FieldRadioInput.vue';
Expand Down Expand Up @@ -158,7 +162,11 @@ VueRegistry.registerComponent('PkpPagination', Pagination);
VueRegistry.registerComponent('PkpProgressBar', ProgressBar);
VueRegistry.registerComponent('PkpSearch', Search);
VueRegistry.registerComponent('PkpTable', Table);
VueRegistry.registerComponent('PkpTableBody', TableBody);
VueRegistry.registerComponent('PkpTableCell', TableCell);
VueRegistry.registerComponent('PkpTableColumn', TableColumn);
VueRegistry.registerComponent('PkpTableHeader', TableHeader);
VueRegistry.registerComponent('PkpTableRow', TableRow);
VueRegistry.registerComponent('PkpTooltip', Tooltip);

// Register Form components
Expand Down
46 changes: 25 additions & 21 deletions pages/admin/AdminHandler.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,10 +519,10 @@ public function jobs($args, $request)
'name' => __('navigation.tools.jobs'),
];

$templateMgr->setState($this->getJobsTableState($request));
$templateMgr->setState(['pageInitConfig' => $this->getJobsTableState($request)]);

$templateMgr->assign([
'pageComponent' => 'JobsPage',
'pageComponent' => 'Page',
'breadcrumbs' => $breadcrumbs,
'pageTitle' => 'navigation.tools.jobs',
]);
Expand Down Expand Up @@ -587,10 +587,10 @@ public function failedJobs($args, $request)
'name' => __('navigation.tools.jobs.failed'),
];

$templateMgr->setState($this->getFailedJobsTableState($request));
$templateMgr->setState(['pageInitConfig' => $this->getFailedJobsTableState($request)]);

$templateMgr->assign([
'pageComponent' => 'FailedJobsPage',
'pageComponent' => 'Page',
'breadcrumbs' => $breadcrumbs,
'pageTitle' => 'navigation.tools.jobs.failed',
]);
Expand Down Expand Up @@ -677,25 +677,29 @@ public function failedJobDetails($args, $request)
'name' => __('navigation.tools.jobs.failed.details'),
];

$templateMgr->setState([
'label' => __('navigation.tools.job.failed.details.view', ['id' => $failedJob->id]),
'columns' => [
[
'name' => 'attribute',
'label' => __('admin.job.failed.list.attribute'),
'value' => 'attribute',
],
[
'name' => 'value',
'label' => __('admin.job.failed.list.attribute.value'),
'value' => 'value',
],
],
'rows' => $rows,
]);
$templateMgr->setState(
[
'pageInitConfig' => [
'label' => __('navigation.tools.job.failed.details.view', ['id' => $failedJob->id]),
'columns' => [
[
'name' => 'attribute',
'label' => __('admin.job.failed.list.attribute'),
'value' => 'attribute',
],
[
'name' => 'value',
'label' => __('admin.job.failed.list.attribute.value'),
'value' => 'value',
],
],
'rows' => $rows,
]
]
);

$templateMgr->assign([
'pageComponent' => 'FailedJobDetailsPage',
'pageComponent' => 'Page',
'breadcrumbs' => $breadcrumbs,
'pageTitle' => 'navigation.tools.jobs.failed.details',
]);
Expand Down
24 changes: 2 additions & 22 deletions templates/admin/failedJobDetails.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,7 @@
<h1 class="app__pageHeading">
{translate key=$pageTitle}
</h1>
<div class="app__contentPanel app__contentPanel__overflow">
<pkp-table
:columns="columns"
:rows="rows"
:label="label"
>
<template #default="{ row, rowIndex }">
<table-cell
v-for="(column, columnIndex) in columns"
:key="column.name"
:column="column"
:row="row"
:tabindex="!rowIndex && !columnIndex ? 0 : -1"
>
<template #default v-if="column.name === 'value' && isValidJson(row.value)">
<span>
<pre>{{ row.value }}</pre>
</span>
</template>
</table-cell>
</template>
</pkp-table>
<div class="app__contentPanel overflow-auto">
<failed-job-details-page v-bind="pageInitConfig"/>
</div>
{/block}
51 changes: 1 addition & 50 deletions templates/admin/failedJobs.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,55 +14,6 @@
{translate key=$pageTitle}
</h1>
<div class="app__contentPanel">
<pkp-table
:columns="columns"
:rows="rows"
:description="description"
:label="label"
>
<template #label v-if="total > 0">
<div>
<span class="pkp_helpers_half pkp_helpers_align_left">{{ label }}</span>
<span class="pkp_helpers_half pkp_helpers_align_right pkp_helpers_text_right">
<spinner v-if="isLoadingItems"></spinner>
<pkp-button @click="requeueAll">
{translate key="admin.jobs.failed.action.redispatch.all"}
</pkp-button>
</span>
</div>
</template>

<template #default="{ row, rowIndex }">
<table-cell
v-for="(column, columnIndex) in columns"
:key="column.name"
:column="column"
:row="row"
:tabindex="!rowIndex && !columnIndex ? 0 : -1"
>
<template #default v-if="column.name === 'actions'">
<button-row >
<pkp-button @click="redispatch(row)">
{translate key="admin.jobs.failed.action.redispatch"}
</pkp-button>
<pkp-button is-warnable @click="remove(row)">
{translate key="common.delete"}
</pkp-button>
<pkp-button element="a" is-link :href="row._hrefs._details">
{translate key="common.details"}
</pkp-button>
</button-row>
</template>
</table-cell>
</template>
</pkp-table>

<pagination
v-if="lastPage > 1"
:current-page="currentPage"
:last-page="lastPage"
:is-loading="isLoadingItems"
@set-page="handlePagination"
/>
<failed-jobs-page v-bind="pageInitConfig" />
</div>
{/block}
14 changes: 1 addition & 13 deletions templates/admin/jobs.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,6 @@
{translate key=$pageTitle}
</h1>
<div class="app__contentPanel">
<pkp-table
:columns="columns"
:rows="rows"
:description="description"
:label="label"
></pkp-table>

<pagination v-if="lastPage > 1"
:current-page="currentPage"
:last-page="lastPage"
:is-loading="isLoadingItems"
@set-page="handlePagination"
/>
<jobs-page v-bind="pageInitConfig" />
</div>
{/block}
42 changes: 17 additions & 25 deletions templates/stats/context.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
</div>
<div class="pkpStats__panel" role="region" aria-live="polite">
<pkp-header>
<h2>
<h2 id="contextDetailTableLabel">
{translate key="stats.views"}
<tooltip
tooltip="{translate key="stats.context.tooltip.text"}"
Expand All @@ -110,38 +110,30 @@
</pkp-button>
</template>
</pkp-header>
<pkp-table
labelled-by="contextDetailTableLabel"
:class="tableClasses"
:columns="tableColumns"
:rows="items"
>
<template #default="{ row, rowIndex }">
<table-cell
v-for="(column, columnIndex) in tableColumns"
:key="column.name"
:column="column"
:row="row"
:tabindex="!rowIndex && !columnIndex ? 0 : -1"
>
<template #default v-if="column.name === 'title'">
<pkp-table labelled-by="contextDetailTableLabel">
<table-header>
<table-column v-for="column in tableColumns" :key="column.name" :id="column.name">
{{ column.label }}
</table-column>
</table-header>
<table-body>
<table-row v-for="(row) in items" :key="row.key">
<table-cell>
<a
:href="row.url"
class="pkpStats__itemLink"
target="_blank"
>
<span class="pkpStats__itemTitle">{{ localize(row.name) }}</span>
</a>
</template>
</table-cell>
</template>
</table-cell>
<table-cell>{{ row.total }}</table-cell>
</table-row>
<template #no-content v-if="!items.length && isLoadingItems">
{translate key="common.loading"}
</template>
</table-body>
</pkp-table>
<div v-if="!items.length" class="pkpStats__noRecords">
<template v-if="isLoadingItems">
<spinner></spinner>
{translate key="common.loading"}
</template>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 0d8b72e

Please sign in to comment.