continuacion con la maquetacion del localizador de rutas

This commit is contained in:
Daniel Herrero 2017-11-07 09:59:49 +01:00
parent be6e33acd2
commit 7f3df756c8
6 changed files with 108 additions and 41 deletions

View File

@ -1,7 +1,8 @@
import {module} from '../module'; import {module} from '../module';
export default class ColumnHeader { export default class ColumnHeader {
constructor() { constructor($attrs) {
this.$attrs = $attrs;
this.order = undefined; this.order = undefined;
this.mouseIsOver = false; this.mouseIsOver = false;
} }
@ -21,8 +22,14 @@ export default class ColumnHeader {
} }
return showArrow; return showArrow;
} }
$onInit() {
if (this.$attrs.defaultOrder) {
this.order = this.$attrs.defaultOrder;
this.onClick();
} }
ColumnHeader.$inject = []; }
}
ColumnHeader.$inject = ['$attrs'];
module.component('vnColumnHeader', { module.component('vnColumnHeader', {
template: require('./column-header.html'), template: require('./column-header.html'),

View File

@ -64,12 +64,12 @@ export default class MultiCheck {
if (this.type.id && this.type.id !== 'all' && this.type.id !== 'any') { 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-') { if (this.type.id.length > 3 && this.type.id.substr(0, 3) === 'no-') {
let label = this.type.id.replace('no-', ''); let label = this.type.id.replace('no-', '');
checked = el[label] == null; checked = Boolean(el[label]) === false;
} else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') { } else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') {
let label = this.type.id.replace('equal-', ''); let label = this.type.id.replace('equal-', '');
checked = (el[label] && el[label] === this.type.name); checked = (el[label] && el[label] === this.type.name);
} else { } else {
checked = el[this.type.id] != null; checked = Boolean(el[this.type.id]) === true;
} }
} else { } else {
checked = this.checkAll === 1; checked = this.checkAll === 1;

View File

@ -3,10 +3,26 @@ import ngModule from '../module';
class LocatorIndex { class LocatorIndex {
constructor($state) { constructor($state) {
this.$state = $state; this.$state = $state;
this.routes = [ this.routes = [];
{id: 1, zoneFk: 1, postalcode: 46006, order: 1, preparado: '25/08', entrada: '26/08', ticket: 1547892, routeFk: 9999, alias: 'Flores Vendrell', bultos: 12, m3: 0.23},
{id: 2, zoneFk: 1, postalcode: 46006, order: 1, preparado: '25/08', entrada: '26/08', ticket: 1547892, routeFk: 9999, alias: 'Flores Vendrell', bultos: 12, m3: 0.23} for (let i = 1; i < 100; i++) {
]; this.routes.push(
{
id: i,
zoneFk: Math.floor(Math.random() * 6) + 1,
postalcode: 46006,
order: Math.floor(Math.random() * 3) + 1,
preparado: '25/08',
entrada: '26/08',
ticket: 1547890 + i,
routeFk: Math.floor(Math.random() * 9999) + 1000,
alias: `Flores X${Math.floor(Math.random() * 3) + 1}`,
bultos: Math.floor(Math.random() * 20) + 10,
m3: (Math.random()).toFixed(2),
error: (Math.floor(Math.random() * 3) + 1) === 1
}
);
}
} }
} }
LocatorIndex.$inject = ['$state']; LocatorIndex.$inject = ['$state'];

View File

@ -1,5 +1,6 @@
{ {
"Routes locator": "Localizador de rutas", "Routes locator": "Localizador de rutas",
"Filter": "Filtro", "Filter": "Filtro",
"Store": "Almacén" "Store": "Almacén",
"Address": "Dirección"
} }

View File

@ -1,41 +1,54 @@
<vn-vertical> <vn-vertical>
<vn-grid-header on-order="$ctrl.onOrder(field, order)"> <vn-grid-header on-order="$ctrl.onOrder(field, order)">
<vn-column-header vn-none min-none> <vn-column-header vn-one pad-medium-h>
<vn-multi-check check-all="$ctrl.checkAll" models="$ctrl.routes" options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'}]"></vn-multi-check> <vn-multi-check
check-all="$ctrl.checkAll"
models="$ctrl.routes"
options="[{id:'all',name:'Todos'},{id:'any',name:'Ninguno'}, {id:'error', name:'Con problema'}, {id:'no-error', name:'Sin problema'}]"
></vn-multi-check>
</vn-column-header> </vn-column-header>
<vn-column-header vn-one pad-medium-h field="zoneFk" text="Zona"></vn-column-header> <vn-column-header vn-two pad-medium-h field="zoneFk" text="Zona"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="postalcode" text="Postal Code"></vn-column-header> <vn-column-header vn-two pad-medium-h field="postalcode" text="Postal Code"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="order" text="Order"></vn-column-header> <vn-column-header vn-two pad-medium-h field="order" text="Order" default-order="DESC"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="preparado" text="Preparado"></vn-column-header> <vn-column-header vn-two pad-medium-h field="preparado" text="Preparado"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="entrada" text="Entrada"></vn-column-header> <vn-column-header vn-two pad-medium-h field="entrada" text="Entrada"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="ticket" text="Ticket"></vn-column-header> <vn-column-header vn-two pad-medium-h field="ticket" text="Ticket"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="routeFk" text="ID de ruta"></vn-column-header> <vn-column-header vn-two pad-medium-h field="routeFk" text="ID de ruta"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="alias" text="Alias"></vn-column-header> <vn-column-header vn-two pad-medium-h field="alias" text="Alias"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="bultos" text="Bultos"></vn-column-header> <vn-column-header vn-two pad-medium-h field="bultos" text="Bultos"></vn-column-header>
<vn-column-header vn-one pad-medium-h field="m3" text="m3"></vn-column-header> <vn-column-header vn-two pad-medium-h field="m3" text="m3"></vn-column-header>
</vn-grid-header> </vn-grid-header>
<vn-twoe class="list list-content"> <vn-one class="list list-content">
<vn-vertical class="list list-element text-center" ng-repeat="route in $ctrl.routes"> <vn-vertical
class="list list-element text-center"
ng-repeat="route in $ctrl.pageTable.model track by route.id"
ng-class="{warning: route.error}"
>
<vn-horizontal> <vn-horizontal>
<vn-none pad-medium-h></vn-none> <vn-one pad-medium-h></vn-one>
<vn-one pad-medium-h>{{::route.zoneFk}}</vn-one> <vn-two pad-medium-h>{{::route.zoneFk}}</vn-two>
<vn-one pad-medium-h>{{::route.postalcode}}</vn-one> <vn-two pad-medium-h>{{::route.postalcode}}</vn-two>
<vn-one pad-medium-h>{{::route.order}}</vn-one> <vn-two pad-medium-h>{{::route.order}}</vn-two>
<vn-one pad-medium-h>{{::route.preparado}}</vn-one> <vn-two pad-medium-h>{{::route.preparado}}</vn-two>
<vn-one pad-medium-h>{{::route.entrada}}</vn-one> <vn-two pad-medium-h>{{::route.entrada}}</vn-two>
<vn-one pad-medium-h>{{::route.ticket}}</vn-one> <vn-two pad-medium-h>{{::route.ticket}}</vn-two>
<vn-one pad-medium-h>{{::route.routeFk}}</vn-one> <vn-two pad-medium-h>{{::route.routeFk}}</vn-two>
<vn-one pad-medium-h>{{::route.alias}}</vn-one> <vn-two pad-medium-h>{{::route.alias}}</vn-two>
<vn-one pad-medium-h>{{::route.bultos}}</vn-one> <vn-two pad-medium-h>{{::route.bultos}}</vn-two>
<vn-one pad-medium-h>{{::route.m3}}</vn-one> <vn-two pad-medium-h>{{::route.m3}}</vn-two>
</vn-horizontal> </vn-horizontal>
<vn-horizontal margin-small-top> <vn-horizontal margin-small-top>
<vn-none> <vn-one pad-medium-h>
<vn-check model="route.checked"></vn-check> <vn-check model="route.checked"></vn-check>
</vn-none> </vn-one>
<vn-one></vn-one> <vn-none></vn-none>
<vn-six text-left pad-small border-solid>Direccion: </vn-twoe> <vn-seven text-left pad-small border-solid>
<strong translate>Address</strong>: {{::route.address}}
</vn-seven>
</vn-horizontal> </vn-horizontal>
</vn-vertical> </vn-vertical>
</vn-one> </vn-one>
<vn-one>
<vn-paging page-change="$ctrl.paginate()" index="$ctrl.pageTable" total="$ctrl.totalFilter"></vn-paging>
</vn-one>
</vn-vertical> </vn-vertical>

View File

@ -1,11 +1,41 @@
import ngModule from '../module'; import ngModule from '../module';
class LocatorTable { class LocatorTable {
constructor($state) { constructor($filter) {
this.$state = $state; this.$filter = $filter;
this.itemsDisplayedInList = 7;
this.pageTable = {
filter: {
page: 1,
size: this.itemsDisplayedInList
},
model: []
};
this._routes = [];
}
set routes(value) {
this._routes = value;
this.totalFilter = this._routes.length;
this.pageTable.filter.page = 1;
this.paginate();
}
get routes() {
return this._routes;
}
onOrder(field, order) {
let reverse = order === 'DESC';
this.routes = this.$filter('orderBy')(this.routes, field, reverse);
this.paginate();
}
paginate() {
let init = (this.pageTable.filter.page - 1) * this.itemsDisplayedInList;
let fin = this.pageTable.filter.page * this.itemsDisplayedInList;
this.pageTable.model = this.routes.slice(init, fin);
} }
} }
LocatorTable.$inject = ['$state']; LocatorTable.$inject = ['$filter'];
ngModule.component('vnLocatorTable', { ngModule.component('vnLocatorTable', {
template: require('./locator-table.html'), template: require('./locator-table.html'),