verdnatura/salix
verdnatura
/
salix
3
5
Fork 0
Code Issues Pull Requests 65 Releases Wiki Activity

Localizador: paginación y ordenación desde front, selector actua sobre todos los elementos (no solo sobre los que se muestran)

This commit is contained in:
Dani Herrero 2017-06-28 13:12:01 +02:00
parent c2b351a777
commit 6815ab2b3c
8 changed files with 179 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/core/src/multi-check/multi-check.js
View File

@ -1,17 +1,24 @@
import {module} from '../module';
import './multi-check.scss';
/*
* @description Draw checkbox with a drop-down and multi options
* @param {Array} options - List of options shown in drop-down
* @param {Array} models - Elements to check / unCheck
* @param {String=} className - Optional css class name
*/
/**
* Draw checkbox with a drop-down and multi options
* @param {Array} options List of options shown in drop-down
* @param {Array} models Elements to check / unCheck
* @param {String} className Optional css class name
*/
export default class MultiCheck {
constructor() {
this._checkAll = 0;
this._models = [];
this.type = {};
this.showDropDown = false;
}
get models() {
return this._models;
}
set models(value) {
this._models = value;
}
get checkAll() {
return this._checkAll;
}
@ -20,24 +27,25 @@ export default class MultiCheck {
this.switchChecks();
}
switchChecks() {
this.models.forEach(
el => {
let checked;
if (this.type.id && this.type.id !== 'all' && this.type.id !== 'any') {
if (this.type.id.length > 3 && this.type.id.substr(0, 3) === 'no-') {
checked = el[this.type.id.replace('no-', '')] ? false : true;
} else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') {
let label = this.type.id.replace('equal-', '');
checked = (el[label] && el[label] === this.type.name);
if (this.models)
this.models.forEach(
el => {
let checked;
if (this.type.id && this.type.id !== 'all' && this.type.id !== 'any') {
if (this.type.id.length > 3 && this.type.id.substr(0, 3) === 'no-') {
checked = el[this.type.id.replace('no-', '')] == null;
} else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') {
let label = this.type.id.replace('equal-', '');
checked = (el[label] && el[label] === this.type.name);
} else {
checked = el[this.type.id] != null;
}
} else {
checked = el[this.type.id] ? true : false;
checked = this.checkAll === 1;
}
} else {
checked = this.checkAll === 1;
el.checked = checked;
}
el.checked = checked;
}
);
);
}
$onChanges() {
this.type = {};

56
client/production/src/index/index.html
View File

@ -13,7 +13,7 @@
icon="keyboard_arrow_down"
ng-click="$ctrl.moreFilters($event)">
</vn-icon>
<vn-button vn-none pad-small-top label="Filtrar" ng-click="$ctrl.filterTickets()"></vn-button>
<vn-button vn-none pad-small-top label="Filtrar" ng-click="$ctrl.searchTickets()"></vn-button>
</vn-two>
<vn-one vn-horizontal>
<vn-one></vn-one>
@ -49,58 +49,6 @@
</vn-one>
<vn-two></vn-two>
</vn-horizontal>
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
<vn-none min-none></vn-none>
<vn-colum-header vn-none min-none>
<vn-multi-check models="$ctrl.tickets" options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'},{id:'problem',name:'Con incidencia'},{id:'no-problem',name:'Sin incidencia'}]"></vn-multi-check>
</vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="ticketFk" text="ID Ticket"></vn-colum-header>
<vn-colum-header vn-two pad-medium-h field="agency" text="Agency"></vn-colum-header>
<vn-colum-header vn-two pad-medium-h field="salesPerson" text="Commercial"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="hour" text="Hour"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="state" text="State"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="lines" text="Lines"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="m3" text="m3"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="boxes" text="Boxes"></vn-colum-header>
<vn-none min-none></vn-none>
</vn-grid-header>
<vn-one class="list list-content">
<vn-horizontal vn-one class="list list-body text-center" ng-repeat="ticket in $ctrl.tickets track by ticket.id" ng-class="{warning: ticket.problem==='RIESGO'}">
<vn-none>
<vn-icon margin-small-left icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
</vn-none>
<vn-none>
<vn-check model="ticket.checked"></vn-check>
</vn-none>
<vn-one pad-medium-h>{{::ticket.ticketFk}}</vn-one>
<vn-two pad-medium-h>{{::ticket.agency}}</vn-two>
<vn-two pad-medium-h>{{::ticket.salesPerson | ucwords}}</vn-two>
<vn-one pad-medium-h>{{ticket.hour}}</vn-one>
<vn-one pad-medium-h>{{ticket.state}}</vn-one>
<vn-one pad-medium-h>{{::ticket.lines}}</vn-one>
<vn-one pad-medium-h>{{::ticket.m3}}</vn-one>
<vn-one pad-medium-h>{{::ticket.boxes}}</vn-one>
<vn-none>
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none>
</vn-horizontal>
</vn-one>
<vn-horizontal vn-one class="list list-footer">
<vn-none></vn-none>
<vn-none></vn-none>
<vn-one pad-medium-h>
<span translate="Resultados"></span>:
<span>{{$ctrl.totalFilter}}</span>
</vn-one>
<vn-six></vn-six>
<vn-one pad-medium-h text-right>{{$ctrl.lines}}</vn-one>
<vn-one pad-medium-h text-right>{{$ctrl.meters}}</vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
<vn-one>
<vn-paging page-change="$ctrl.searchTickets()" index="$ctrl.fakeIndex" total="$ctrl.totalFilter"></vn-paging>
</vn-one>
<vn-production-table tickets="$ctrl.tickets" footer="$ctrl.footer"></vn-production-table>
</vn-vertical>
</vn-card>

97
client/production/src/index/index.js
View File

@ -9,26 +9,21 @@ export default class ProductionIndex {
this.vnPopover = vnPopover;
this.vnApp = vnApp;
this.$translate = $translate;
this.fakeIndex = {
filter: {
page: 1,
size: 25
}
};
this.order = {};
this.filter = {};
this.order = {};
this.tickets = [];
this.states = [];
this.lines = 0;
this.meters = 0;
this.totalFilter = 0;
this.ticketsSelected = [];
this.actions = {
state: null,
worker: null,
hour: null
hours: null
};
this.footer = {
total: null,
lines: null,
meters: null
};
this.hourItems = [];
this.child = undefined;
this.warehouse = {
@ -71,20 +66,19 @@ export default class ProductionIndex {
// End Actions Callbacks
doAction(action) {
let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]:checked');
if (checks.length) {
let ids = [];
let index = [];
let tickets = [];
this.tickets.forEach(
(val, i) => {
if (val.checked) {
ids.push(val.ticketFk);
index.push(i);
tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
}
let ids = [];
let index = [];
let tickets = [];
this.tickets.forEach(
(val, i) => {
if (val.checked) {
ids.push(val.ticketFk);
index.push(i);
tickets.push({ticketFk: val.ticketFk, salesPersonFk: val.salesPersonFk});
}
);
}
);
if (tickets.length) {
switch (action) {
case 'changeState' :
this._changeState(ids, this.actions.state.id, this.actions.state.name, index);
@ -115,7 +109,7 @@ export default class ProductionIndex {
event.preventDefault();
}
onChildSubmit(filter) {
this.filterTickets(filter);
this.searchTickets(filter);
this.onChildCancel();
}
onChildCancel() {
@ -124,39 +118,28 @@ export default class ProductionIndex {
delete this.child;
}
// END modals and actions modals
searchTickets() {
let filters = Object.assign({}, {
where: this.filter
}, {
page: this.fakeIndex.filter.page,
limit: this.fakeIndex.filter.size
});
if (this.order.field) {
filters.order = this.order.field + ' ' + this.order.dir;
}
this.$http.get('/production/api/FakeProductions/list?filter=' + JSON.stringify(filters)).then(
json => {
this.tickets = json.data.tickets;
this.lines = json.data.lines;
this.meters = json.data.m3;
this.totalFilter = json.data.total;
this.fakeIndex.model = json.data.tickets;
}
);
}
filterTickets(filter) {
searchTickets(filter) {
if (filter) {
this.filter = Object.assign({}, this.filter, filter);
}
this.order = {field: null, dir: null};
this.fakeIndex.filter.page = 1;
this.fakeIndex.model = [];
this.searchTickets();
}
onOrder(field, dir) {
this.order = {field: field, dir: dir};
this.searchTickets();
let filters = Object.assign({}, {
where: this.filter
}, {
page: 1,
limit: 700
});
this.$http.get('/production/api/FakeProductions/list?filter=' + JSON.stringify(filters)).then(
json => {
this.tickets = json.data.tickets;
this.footer.lines = json.data.lines;
this.footer.meters = json.data.m3;
this.footer.total = json.data.total;
}
);
}
$doCheck() {
if (this.actions.state) {
this.doAction('changeState');
@ -175,7 +158,7 @@ export default class ProductionIndex {
hour += ':00';
this.hourItems.push({id: i, name: hour});
}
this.filterTickets();
this.searchTickets();
}
}
ProductionIndex.$inject = ['$element', '$scope', '$http', 'vnPopover', 'vnApp', '$translate'];

4
client/production/src/index/style.scss
View File

@ -33,8 +33,4 @@ vn-production-index {
width: 600px;
}
}
.list-content{
height: 531px;
overflow-y: auto;
}
}

55
client/production/src/production-table/production-table.html Normal file
View File

@ -0,0 +1,55 @@
<vn-vertical>
<vn-grid-header on-order="$ctrl.onOrder(field, order)">
<vn-none min-none></vn-none>
<vn-colum-header vn-none min-none>
<vn-multi-check models="$ctrl.tickets" options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'},{id:'problem',name:'Con incidencia'},{id:'no-problem',name:'Sin incidencia'}]"></vn-multi-check>
</vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="ticketFk" text="ID Ticket"></vn-colum-header>
<vn-colum-header vn-two pad-medium-h field="agency" text="Agency"></vn-colum-header>
<vn-colum-header vn-two pad-medium-h field="salesPerson" text="Commercial"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="hour" text="Hour"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="state" text="State"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="lines" text="Lines"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="m3" text="m3"></vn-colum-header>
<vn-colum-header vn-one pad-medium-h field="boxes" text="Boxes"></vn-colum-header>
<vn-none min-none></vn-none>
</vn-grid-header>
<vn-one class="list list-content">
<vn-horizontal vn-one class="list list-element text-center" ng-repeat="ticket in $ctrl.pageTable.model track by ticket.id" ng-class="{warning: ticket.problem==='RIESGO'}">
<vn-none>
<vn-icon margin-small-left icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
</vn-none>
<vn-none>
<vn-check model="ticket.checked"></vn-check>
</vn-none>
<vn-one pad-medium-h>{{::ticket.ticketFk}}</vn-one>
<vn-two pad-medium-h>{{::ticket.agency}}</vn-two>
<vn-two pad-medium-h>{{::ticket.salesPerson | ucwords}}</vn-two>
<vn-one pad-medium-h>{{ticket.hour}}</vn-one>
<vn-one pad-medium-h>{{ticket.state}}</vn-one>
<vn-one pad-medium-h>{{::ticket.lines}}</vn-one>
<vn-one pad-medium-h>{{::ticket.m3}}</vn-one>
<vn-one pad-medium-h>{{::ticket.boxes}}</vn-one>
<vn-none>
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none>
</vn-horizontal>
</vn-one>
<vn-horizontal vn-one class="list list-footer">
<vn-none></vn-none>
<vn-none></vn-none>
<vn-one pad-medium-h>
<span translate="Resultados"></span>:
<span>{{$ctrl.footer.total}}</span>
</vn-one>
<vn-six></vn-six>
<vn-one pad-medium-h text-right>{{$ctrl.footer.lines}}</vn-one>
<vn-one pad-medium-h text-right>{{$ctrl.footer.meters}}</vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
<vn-one>
<vn-paging page-change="$ctrl.pageTickets()" index="$ctrl.pageTable" total="$ctrl.totalFilter"></vn-paging>
</vn-one>
</vn-vertical>

48
client/production/src/production-table/production-table.js Normal file
View File

@ -0,0 +1,48 @@
import ngModule from '../module';
export class ProductionTable {
constructor($filter) {
this.$filter = $filter;
this._tickets = [];
this.itemsDisplayedInList = 10;
this.pageTable = {
filter: {
page: 1,
size: this.itemsDisplayedInList
},
model: []
};
}
set tickets(value) {
this._tickets = value;
this.totalFilter = this._tickets.length;
this.pageTable.model = this._tickets.slice(0, this.itemsDisplayedInList);
}
get tickets() {
return this._tickets;
}
onOrder(field, order) {
let reverse = order === 'DESC';
this.tickets = this.$filter('orderBy')(this.tickets, field, reverse);
let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;
let fin = this.pageTable.filter.page * this.itemsDisplayedInList;
this.pageTable.model = this.tickets.slice(init, fin);
}
pageTickets() {
let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;
let fin = this.pageTable.filter.page * this.itemsDisplayedInList;
this.pageTable.model = this.tickets.slice(init, fin);
}
}
ProductionTable.$inject = ['$filter'];
ngModule.component('vnProductionTable', {
template: require('./production-table.html'),
bindings: {
tickets: '=',
footer: '<',
selected: '='
},
controller: ProductionTable
});

3
client/production/src/production.js
View File

@ -4,4 +4,5 @@ export * from './module';
// import components
import './index/index';
import './production-filters/production-filters';
import './production-comment/production-comment';
// import './production-comment/production-comment';
import './production-table/production-table';

6
client/salix/src/styles/misc.scss
View File

@ -51,7 +51,7 @@ html [vn-center], .vn-center{
min-width: 60px;
}
.list-body{
.list-element{
padding: 4px 0px;
border-bottom: 1px solid $color-medium-grey;
i {
@ -67,7 +67,7 @@ html [vn-center], .vn-center{
font-weight: bold;
text-align: center
}
.list-body{
.list-element{
white-space: nowrap;
}
}
@ -75,7 +75,7 @@ html [vn-center], .vn-center{
font-weight: bold;
border-top: 3px solid $color-medium-grey;
}
.list-body.warning{
.list-element.warning{
background-color: $color-orange;
color:$color-white;
font-weight: bold;