Localizador, cambio estlios, añadido paginador, order by
This commit is contained in:
Dani Herrero
parent
4890a69238
commit
2bdbda6192
|
|
@ -1,7 +1,13 @@
|
|||
<ul class="dropdown" ng-show="$ctrl.show" ng-init="search = ''">
|
||||
<li ng-show="$ctrl.filter" class="filter">
|
||||
<input placeholder="{{'Search' | translate}}" type="text" ng-model="search"/>
|
||||
<vn-icon icon="clear" ng-click="search = ''"></vn-icon>
|
||||
</li>
|
||||
<li ng-repeat="item in $ctrl.items | filter:search" ng-click="$ctrl.selected = item">{{::item.name}}</li>
|
||||
</ul>
|
||||
<vn-vertical class="dropdown-body" ng-show="$ctrl.show">
|
||||
<vn-one ng-show="$ctrl.filter" class="filter">
|
||||
<vn-horizontal>
|
||||
<input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="search"/>
|
||||
<vn-icon vn-none icon="clear" ng-click="$ctrl.clearSearch()"></vn-icon>
|
||||
</vn-horizontal>
|
||||
</vn-one>
|
||||
<vn-one>
|
||||
<ul class="dropdown">
|
||||
<li ng-repeat="item in $ctrl.items | filter:search" ng-click="$ctrl.selected = item">{{::item.name}}</li>
|
||||
</ul>
|
||||
</vn-one>
|
||||
</vn-vertical>
|
||||
|
|
@ -2,16 +2,23 @@ import {module} from '../module';
|
|||
import './style.scss';
|
||||
|
||||
export default class DropDown {
|
||||
constructor($element, $window) {
|
||||
constructor($element, $scope) {
|
||||
this.$element = $element;
|
||||
this.$ = $scope;
|
||||
}
|
||||
$onChanges(changesObj) {
|
||||
if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
|
||||
this.$element.css('top', changesObj.top.currentValue + 'px');
|
||||
}
|
||||
}
|
||||
clearSearch() {
|
||||
this.$.search = '';
|
||||
}
|
||||
$onInit() {
|
||||
this.clearSearch();
|
||||
}
|
||||
}
|
||||
DropDown.$inject = ['$element'];
|
||||
DropDown.$inject = ['$element', '$scope'];
|
||||
|
||||
module.component('vnDropDown', {
|
||||
template: require('./drop-down.html'),
|
||||
|
|
|
|||
|
|
@ -4,41 +4,41 @@ vn-drop-down {
|
|||
padding: 0 15px;
|
||||
margin-left: -15px;
|
||||
background: transparent;
|
||||
ul{
|
||||
padding: 0;
|
||||
margin: 10px 0 0 0;
|
||||
.dropdown-body{
|
||||
background: white;
|
||||
border: 1px solid #A7A7A7;
|
||||
li {
|
||||
list-style-type: none;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
&.filter{
|
||||
padding: 5px;
|
||||
input{
|
||||
height: 25px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
vn-icon{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
margin-left: -20px;
|
||||
margin-top: 7px;
|
||||
.filter{
|
||||
padding: 5px 9px 5px 5px;
|
||||
input{
|
||||
height: 25px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
vn-icon{
|
||||
font-size: 16px;
|
||||
margin-left: -20px;
|
||||
margin-top: 7px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
li:hover{
|
||||
background-color: #3D3A3B;
|
||||
color: white;
|
||||
&.filter{
|
||||
vn-icon{
|
||||
color: #3D3A3B;
|
||||
&:hover{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: white;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
li {
|
||||
list-style-type: none;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
li:hover{
|
||||
background-color: #3D3A3B;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="icon-menu">
|
||||
<div class="icon-menu" ng-click="$ctrl.show()">
|
||||
<vn-icon-button icon="{{::$ctrl.icon}}"></vn-icon-button>
|
||||
<vn-drop-down items="$ctrl.items" show="$ctrl.showDropDown" selected="$ctrl.selected" filter="true"></vn-drop-down>
|
||||
</div>
|
||||
|
|
@ -14,6 +14,9 @@ export default class IconMenu {
|
|||
set showDropDown(value) {
|
||||
this._showDropDown = value;
|
||||
}
|
||||
show() {
|
||||
// this._showDropDown = true;
|
||||
}
|
||||
|
||||
getItems() {
|
||||
this.$http.get(this.url).then(
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ export default class Paging {
|
|||
$onChanges(changes) {
|
||||
if (!this.index) return;
|
||||
this.numPerPage = this.index.filter.size;
|
||||
if(changes.total)
|
||||
this.currentPage = this.index.filter.page;
|
||||
if (changes.total)
|
||||
this.numItems = changes.total.currentValue;
|
||||
}
|
||||
onModelUpdated() {
|
||||
|
|
@ -29,7 +30,11 @@ export default class Paging {
|
|||
}
|
||||
onPageChange(page) {
|
||||
this.index.filter.page = page;
|
||||
this.index.accept();
|
||||
if (typeof this.pageChange === 'undefined') {
|
||||
this.index.accept();
|
||||
} else {
|
||||
this.pageChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
Paging.$inject = ['$http', '$scope'];
|
||||
|
|
@ -39,6 +44,7 @@ export const COMPONENT = {
|
|||
template: require('./paging.html'),
|
||||
bindings: {
|
||||
index: '<',
|
||||
pageChange: '&?',
|
||||
total: '<'
|
||||
},
|
||||
controller: Paging
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<!--<mg-ajax path="/production/api/FakeProductions/list" options="vnIndex" actions="$ctrl.tickets = index.model;$ctrl.sumTickets()"></mg-ajax>-->
|
||||
<mg-ajax path="/production/api/Tickets/list" options="vnIndex" actions="$ctrl.tickets = index.model.tickets;$ctrl.sumTickets()"></mg-ajax>
|
||||
<mg-ajax path="/production/api/States/list" options="vnIndex as states" actions="$ctrl.states = states.model;"></mg-ajax>
|
||||
|
||||
<vn-card margin-large>
|
||||
|
|
@ -20,11 +18,14 @@
|
|||
icon="keyboard_arrow_down"
|
||||
ng-click="$ctrl.moreFilters($event)">
|
||||
</vn-icon>
|
||||
<vn-button vn-none pad-small-top label="Filtrar" ng-click="$ctrl.onSearch()"></vn-button>
|
||||
<vn-button vn-none pad-small-top label="Filtrar" ng-click="$ctrl.filterTickets()"></vn-button>
|
||||
</vn-two>
|
||||
<vn-one vn-horizontal>
|
||||
<vn-one></vn-one>
|
||||
<vn-autocomplete vn-two
|
||||
initial-value="$ctrl.warehouse"
|
||||
show-field="name"
|
||||
value-field="id"
|
||||
field="$ctrl.warehouseFk"
|
||||
url="/production/api/Warehouses/production"
|
||||
label="Store">
|
||||
|
|
@ -59,29 +60,29 @@
|
|||
<vn-colum-header vn-none>
|
||||
<vn-check model="$ctrl.checkAll"></vn-check>
|
||||
</vn-colum-header>
|
||||
<vn-colum-header text-right vn-one field="ticket" text="ID Ticket"></vn-colum-header>
|
||||
<vn-colum-header vn-two field="agency" text="Agency"></vn-colum-header>
|
||||
<vn-colum-header text-right vn-one field="ticketFk" text="ID Ticket"></vn-colum-header>
|
||||
<vn-colum-header vn-two field="agency.name" text="Agency"></vn-colum-header>
|
||||
<vn-colum-header vn-two field="salePerson" text="Commercial"></vn-colum-header>
|
||||
<vn-colum-header vn-one field="hour" text="Hour"></vn-colum-header>
|
||||
<vn-colum-header vn-one field="state" text="State"></vn-colum-header>
|
||||
<vn-colum-header vn-one field="state.name" text="State"></vn-colum-header>
|
||||
<vn-colum-header vn-one field="lines" text="Lines"></vn-colum-header>
|
||||
<vn-colum-header vn-one field="m3" text="m3"></vn-colum-header>
|
||||
<vn-colum-header vn-one field="boxes" text="Boxes"></vn-colum-header>
|
||||
<vn-none></vn-none>
|
||||
</vn-grid-header>
|
||||
|
||||
<vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index" ng-class="{warning: ticket.problems==='RIESGO'}">
|
||||
<vn-horizontal vn-one class="list list-body" 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.problems" vn-tooltip="{{::ticket.problems}}" tooltip-position="right"></vn-icon>
|
||||
<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.cheched"></vn-check>
|
||||
</vn-none>
|
||||
<vn-one pad-medium-h text-right>{{::ticket.ticket}}</vn-one>
|
||||
<vn-two pad-medium-h text-left>{{::ticket.agency}}</vn-two>
|
||||
<vn-two pad-medium-h text-left>{{::ticket.salePerson | ucwords}}</vn-two>
|
||||
<vn-one pad-medium-h text-right>{{::ticket.ticketFk}}</vn-one>
|
||||
<vn-two pad-medium-h text-left>{{::ticket.agency.name}}</vn-two>
|
||||
<vn-two pad-medium-h text-left>{{::ticket.salesPerson.name | ucwords}} {{::ticket.salesPerson.surname | ucwords}}</vn-two>
|
||||
<vn-one pad-medium-h text-right>{{::ticket.hour}}</vn-one>
|
||||
<vn-one text-center>{{ticket.state}}</vn-one>
|
||||
<vn-one text-center>{{ticket.state.name}}</vn-one>
|
||||
<vn-one pad-medium-h text-right>{{::ticket.lines}}</vn-one>
|
||||
<vn-one pad-medium-h text-right>{{::ticket.m3}}</vn-one>
|
||||
<vn-one pad-medium-h text-right>{{::ticket.boxes}}</vn-one>
|
||||
|
|
@ -89,18 +90,21 @@
|
|||
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
|
||||
</vn-none>
|
||||
</vn-horizontal>
|
||||
<vn-horizontal vn-one margin-large-bottom class="list list-footer">
|
||||
<vn-horizontal vn-one class="list list-footer">
|
||||
<vn-none></vn-none>
|
||||
<vn-none></vn-none>
|
||||
<vn-one>
|
||||
<vn-one pad-medium-h>
|
||||
<span translate="Resultados"></span>:
|
||||
<span>{{$ctrl.tickets.length}}</span>
|
||||
<span>{{$ctrl.totalFilter}}</span>
|
||||
</vn-one>
|
||||
<vn-six></vn-six>
|
||||
<vn-one>{{$ctrl.lines}}</vn-one>
|
||||
<vn-one>{{$ctrl.meters}}</vn-one>
|
||||
<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-vertical>
|
||||
</vn-card>
|
||||
|
|
@ -9,13 +9,21 @@ export default class ProductionIndex {
|
|||
this.vnPopover = vnPopover;
|
||||
this.vnApp = vnApp;
|
||||
this.$translate = $translate;
|
||||
|
||||
this.fakeIndex = {
|
||||
filter: {
|
||||
page: 1,
|
||||
size: 14
|
||||
}
|
||||
};
|
||||
this.order = {};
|
||||
this.filter = {};
|
||||
this.order = {};
|
||||
this._checkAll = false;
|
||||
this.tickets = [];
|
||||
this.states = [];
|
||||
this.lines = 0;
|
||||
this.meters = 0;
|
||||
this.totalFilter = 0;
|
||||
this.actions = {
|
||||
state: null,
|
||||
worker: null,
|
||||
|
|
@ -46,11 +54,11 @@ export default class ProductionIndex {
|
|||
}
|
||||
// Actions Callbacks
|
||||
_changeState(ids, sateteId, stateName, index) {
|
||||
this.$http.put(`/production/api/TicketStates/[${ids}]/${sateteId}/changeState`).then(
|
||||
this.$http.put(`/production/api/TicketStates/${sateteId}/changeState`, ids).then(
|
||||
() => {
|
||||
index.forEach(
|
||||
val => {
|
||||
this.tickets[val].state = this.actions.state.name;
|
||||
this.tickets[val].state = stateName;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -67,7 +75,7 @@ export default class ProductionIndex {
|
|||
let index = [];
|
||||
checks.forEach(
|
||||
(_, i) => {
|
||||
ids.push(this.tickets[i].ticket);
|
||||
ids.push(this.tickets[i].id);
|
||||
index.push(i);
|
||||
}
|
||||
);
|
||||
|
|
@ -83,18 +91,7 @@ export default class ProductionIndex {
|
|||
this.vnApp.showMessage(this.$translate.instant('Error: No tickets selected!'));
|
||||
}
|
||||
}
|
||||
sumTickets() {
|
||||
let lines = 0;
|
||||
let meters = 0;
|
||||
this.tickets.forEach(
|
||||
val => {
|
||||
lines += parseFloat(val.lines);
|
||||
meters += parseFloat(val.m3);
|
||||
}
|
||||
);
|
||||
this.lines = lines;
|
||||
this.meters = meters.toFixed(2);
|
||||
}
|
||||
|
||||
// Start modals and actions modals
|
||||
_openComment(ids) {
|
||||
this.child = this.vnPopover.showComponent('vn-production-comment', this.$, this.$element[0].querySelector('.actionPanel'));
|
||||
|
|
@ -109,17 +106,10 @@ export default class ProductionIndex {
|
|||
childCtrl.filter = Object.assign({}, this.filter);
|
||||
childCtrl.onSubmit = filter => this.onChildSubmit(filter);
|
||||
childCtrl.onCancel = () => this.onChildCancel();
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
onSearch(filter) {
|
||||
let filters = filter || this.filter;
|
||||
/* this.$.index.filter = filters;
|
||||
this.$.index.accept(); */
|
||||
console.log('TODO: search with filters', filters);
|
||||
}
|
||||
onChildSubmit(filter) {
|
||||
this.onSearch(filter);
|
||||
this.filterTickets(filter);
|
||||
this.onChildCancel();
|
||||
}
|
||||
onChildComment(ids, comment) {
|
||||
|
|
@ -132,8 +122,38 @@ 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) {
|
||||
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) {
|
||||
console.log('TODO: call rest api order by', field, dir);
|
||||
this.order = {field: field, dir: dir};
|
||||
this.searchTickets();
|
||||
}
|
||||
$doCheck() {
|
||||
if (this.actions.state) {
|
||||
|
|
@ -150,6 +170,7 @@ export default class ProductionIndex {
|
|||
hour += ':00';
|
||||
this.hourItems.push({id: i, name: hour});
|
||||
}
|
||||
this.filterTickets();
|
||||
}
|
||||
}
|
||||
ProductionIndex.$inject = ['$element', '$scope', '$http', 'vnPopover', 'vnApp', '$translate'];
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
vn-production-index {
|
||||
flex: 1;
|
||||
|
||||
button {
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<vn-icon icon="account_circle" translate-attr="{title: 'Profile'}" style="font-size: 35px;"></vn-icon>
|
||||
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" pad-medium for="apps">
|
||||
<vn-horizontal>
|
||||
<div ng-repeat="mod in $ctrl.modules">
|
||||
<div ng-repeat="mod in $ctrl.modules track by $index" margin-medium-right>
|
||||
<vn-vertical>
|
||||
<a ui-sref="{{::mod.route.state}}">
|
||||
<button vn-one class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored popover-button">
|
||||
|
|
|
|||
|
|
@ -50,12 +50,29 @@ html [vn-center], .vn-center{
|
|||
.list > vn-none{
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.list-body{
|
||||
padding: 4px 0px;
|
||||
border-bottom: 1px solid $color-medium-grey;
|
||||
i {
|
||||
color: $color-orange;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $color-light-grey;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
.list-header{
|
||||
border-bottom: 3px solid $color-medium-grey;
|
||||
font-weight: bold;
|
||||
text-align: center
|
||||
}
|
||||
.list-body{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.list-footer{
|
||||
font-weight: bold;
|
||||
}
|
||||
.list-body:last-child{
|
||||
border: none;
|
||||
|
|
@ -73,4 +90,7 @@ html [vn-center], .vn-center{
|
|||
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline{
|
||||
background-color: $color-white;
|
||||
}
|
||||
&:hover{
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue