fear(smart-table): now shows the default order with the column arrows #825

Merged
carlosjr merged 4 commits from 3457-smart_table_order into dev 2021-12-21 12:45:38 +00:00
5 changed files with 89 additions and 19 deletions

View File

@ -44,16 +44,10 @@ export default class SmartTable extends Component {
set model(value) { set model(value) {
this._model = value; this._model = value;
if (value) if (value) {
this.$.model = value; this.$.model = value;
this.defaultOrder();
} }
get viewConfigId() {
return this._viewConfigId;
}
set viewConfigId(value) {
this._viewConfigId = value;
} }
getDefaultViewConfig() { getDefaultViewConfig() {
@ -163,6 +157,40 @@ export default class SmartTable extends Component {
} }
} }
defaultOrder() {
const order = this.model.order;
if (!order) return;
const orderFields = order.split(', ');
for (const fieldString of orderFields) {
const field = fieldString.split(' ');
const fieldName = field[0];
let sortType = 'ASC';
if (field.length === 2)
sortType = field[1];
const column = this.columns.find(column => column.field == fieldName);
if (column) {
this.sortCriteria.push({field: fieldName, sortType: sortType});
const isASC = sortType == 'ASC';
const isDESC = sortType == 'DESC';
if (isDESC) {
column.element.classList.remove('asc');
column.element.classList.add('desc');
}
if (isASC) {
column.element.classList.remove('desc');
column.element.classList.add('asc');
}
}
}
}
registerColumns() { registerColumns() {
const header = this.element.querySelector('thead > tr'); const header = this.element.querySelector('thead > tr');
if (!header) return; if (!header) return;
@ -175,7 +203,7 @@ export default class SmartTable extends Component {
const columnElement = angular.element(column); const columnElement = angular.element(column);
const caption = columnElement.text().trim(); const caption = columnElement.text().trim();
this.columns.push({field, caption, index}); this.columns.push({field, caption, index, element: column});
column.addEventListener('click', () => this.orderHandler(column)); column.addEventListener('click', () => this.orderHandler(column));
} }

View File

@ -80,6 +80,45 @@ describe('Component smartTable', () => {
}); });
}); });
describe('defaultOrder', () => {
it('should insert a new object to the controller sortCriteria with a sortType value of "ASC"', () => {
const element = document.createElement('div');
controller.model = {order: 'id'};
controller.columns = [
{field: 'id', element: element},
{field: 'test1', element: element},
{field: 'test2', element: element}
];
controller.defaultOrder();
const firstSortCriteria = controller.sortCriteria[0];
expect(firstSortCriteria.field).toEqual('id');
expect(firstSortCriteria.sortType).toEqual('ASC');
});
it('should insert two new objects to the controller sortCriteria with a sortType values of "ASC" and "DESC"', () => {
const element = document.createElement('div');
controller.model = {order: 'test1, id DESC'};
controller.columns = [
{field: 'id', element: element},
{field: 'test1', element: element},
{field: 'test2', element: element}
];
controller.defaultOrder();
const firstSortCriteria = controller.sortCriteria[0];
const secondSortCriteria = controller.sortCriteria[1];
expect(firstSortCriteria.field).toEqual('test1');
expect(firstSortCriteria.sortType).toEqual('ASC');
expect(secondSortCriteria.field).toEqual('id');
expect(secondSortCriteria.sortType).toEqual('DESC');
});
});
describe('addFilter()', () => { describe('addFilter()', () => {
it('should call the model addFilter() with a basic where filter if exprBuilder() was not received', () => { it('should call the model addFilter() with a basic where filter if exprBuilder() was not received', () => {
controller.model = {addFilter: jest.fn()}; controller.model = {addFilter: jest.fn()};

View File

@ -1,6 +1,7 @@
<vn-crud-model <vn-crud-model
vn-id="model" vn-id="model"
url="Buys/latestBuysFilter" url="Buys/latestBuysFilter"
order="itemFk DESC"
limit="20" limit="20"
data="$ctrl.buys" data="$ctrl.buys"
auto-load="true"> auto-load="true">
@ -34,8 +35,8 @@
</vn-multi-check> </vn-multi-check>
</th> </th>
<th translate>Picture</th> <th translate>Picture</th>
<th field="id"> <th field="itemFk">
<span translate>Identifier</span> <span translate>Item ID</span>
</th> </th>
<th field="packing" number> <th field="packing" number>
<span translate>Packing</span> <span translate>Packing</span>

View File

@ -2,7 +2,7 @@
vn-id="model" vn-id="model"
url="SalesMonitors/salesFilter" url="SalesMonitors/salesFilter"
limit="20" limit="20"
order="shippedDate DESC, theoreticalhour, id"> order="shipped DESC, theoreticalHour, id">
</vn-crud-model> </vn-crud-model>
<vn-portal slot="topbar"> <vn-portal slot="topbar">
<vn-searchbar <vn-searchbar
@ -27,11 +27,13 @@
view-config-id="ticketsMonitor" view-config-id="ticketsMonitor"
options="$ctrl.smartTableOptions" options="$ctrl.smartTableOptions"
expr-builder="$ctrl.exprBuilder(param, value)"> expr-builder="$ctrl.exprBuilder(param, value)">
<slot-actions><vn-check <slot-actions>
<vn-check
label="Auto-refresh" label="Auto-refresh"
vn-tooltip="Toggle auto-refresh every 2 minutes" vn-tooltip="Toggle auto-refresh every 2 minutes"
on-change="$ctrl.autoRefresh(value)"> on-change="$ctrl.autoRefresh(value)">
</vn-check></slot-actions> </vn-check>
</slot-actions>
<slot-table> <slot-table>
<table> <table>
<thead> <thead>

View File

@ -29,7 +29,7 @@ vn-monitor-sales-tickets {
height: 736px height: 736px
} }
vn-tbody a[ng-repeat].vn-tr:focus { tbody tr[ng-repeat]:focus {
background-color: $color-primary-light background-color: $color-primary-light
} }