verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 54 Releases Wiki Activity

dropDown con filtro

This commit is contained in:
Dani Herrero 2017-06-21 13:16:37 +02:00
parent a7a4a211e2
commit 05b6c81a1b
11 changed files with 82 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/core/src/colum-header/colum-header.html
View File

@ -1,10 +1,12 @@
<div class="{{$ctrl.className}}"> <div class="{{$ctrl.className}}">
<vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()"> <vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()">
<span translate> <vn-none class="title" translate>
{{::$ctrl.text}} {{::$ctrl.text}}
</span> </vn-none>
<vn-icon icon="keyboard_arrow_down" ng-if="$ctrl.gridHeader.field === $ctrl.field && $ctrl.order === 'DESC'"></vn-icon> <vn-none>
<vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.gridHeader.field === $ctrl.field && $ctrl.order === 'ASC'"></vn-icon> <vn-icon icon="keyboard_arrow_down" ng-if="$ctrl.gridHeader.currentColumn.field === $ctrl.field && $ctrl.order === 'DESC'"></vn-icon>
<vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.gridHeader.currentColumn.field === $ctrl.field && $ctrl.order === 'ASC'"></vn-icon>
</vn-none>
</vn-horizontal> </vn-horizontal>
<ng-transclude ng-if="!$ctrl.text"></ng-transclude> <ng-transclude ng-if="!$ctrl.text"></ng-transclude>
</div> </div>

8
client/core/src/drop-down/drop-down.html
View File

@ -1,3 +1,7 @@
<ul class="dropdown" ng-if="dd.show"> <ul class="dropdown" ng-show="$ctrl.show" ng-init="search = ''">
<li ng-repeat="item in ::dd.items track by $index" ng-click="dd.selected = item">{{::item.name}}</li> <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> </ul>

4
client/core/src/drop-down/drop-down.js
View File

@ -19,8 +19,8 @@ module.component('vnDropDown', {
bindings: { bindings: {
items: '<', items: '<',
show: '<', show: '<',
filter: '@?',
selected: '=', selected: '=',
top: '<?' top: '<?'
}, }
controllerAs: 'dd'
}); });

23
client/core/src/drop-down/style.scss
View File

@ -11,13 +11,34 @@ vn-drop-down {
border: 1px solid #A7A7A7; border: 1px solid #A7A7A7;
li { li {
list-style-type: none; list-style-type: none;
padding: 5px 20px 5px 5px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
white-space: nowrap; 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;
}
}
} }
li:hover{ li:hover{
background-color: #3D3A3B; background-color: #3D3A3B;
color: white; color: white;
&.filter{
vn-icon{
color: #3D3A3B;
&:hover{
color: red;
}
}
}
} }
} }
} }

2
client/core/src/grid-header/grid-header.html
View File

@ -1 +1 @@
<vn-horizontal ng-transclude></vn-horizontal> <vn-horizontal class="list" ng-transclude></vn-horizontal>

11
client/core/src/grid-header/grid-header.js
View File

@ -3,15 +3,16 @@ import './style.scss';
export default class GridHeader { export default class GridHeader {
constructor() { constructor() {
this.field = undefined; this.currentColumn = undefined;
this.order = undefined;
} }
selectColum(col) { selectColum(col) {
this.field = col.field; if (this.currentColumn && this.currentColumn.field != col.field)
this.order = col.order; this.currentColumn.order = undefined;
this.currentColumn = col;
if (this.onOrder) if (this.onOrder)
this.onOrder(this); this.onOrder(this.currentColumn);
} }
} }

21
client/core/src/grid-header/style.scss
View File

@ -3,11 +3,24 @@ vn-grid-header {
font-weight: bold; font-weight: bold;
.orderly{ .orderly{
cursor: pointer; cursor: pointer;
} text-align: center;
vn-none{ white-space: nowrap;
min-width: 60px; justify-content: center;
vn-none{
min-width: 16px;
}
} }
vn-icon{ vn-icon{
line-height: 17px; line-height: 16px;
font-size: 16px;
margin: 0;
padding: 0;
display: inline;
i {
padding-top: 3px;
}
} }
} }
vn-grid-header > vn-horizontal > vn-none {
min-width: 60px;
}

2
client/core/src/icon-menu/icon-menu.html
View File

@ -1,4 +1,4 @@
<div class="icon-menu"> <div class="icon-menu">
<vn-icon-button icon="{{::$ctrl.icon}}"></vn-icon-button> <vn-icon-button icon="{{::$ctrl.icon}}"></vn-icon-button>
<vn-drop-down items="$ctrl.items" show="$ctrl.showDropDown" selected="$ctrl.selected"></vn-drop-down> <vn-drop-down items="$ctrl.items" show="$ctrl.showDropDown" selected="$ctrl.selected" filter="true"></vn-drop-down>
</div> </div>

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

@ -1,5 +1,6 @@
<!--<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/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> <vn-card margin-large>
<vn-vertical pad-medium> <vn-vertical pad-medium>
@ -58,7 +59,7 @@
<vn-colum-header vn-none> <vn-colum-header vn-none>
<vn-check model="$ctrl.checkAll"></vn-check> <vn-check model="$ctrl.checkAll"></vn-check>
</vn-colum-header> </vn-colum-header>
<vn-colum-header vn-one field="ticket" text="ID Ticket"></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 vn-two field="agency" text="Agency"></vn-colum-header>
<vn-colum-header vn-two field="salePerson" text="Commercial"></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="hour" text="Hour"></vn-colum-header>
@ -76,14 +77,14 @@
<vn-none> <vn-none>
<vn-check model="ticket.cheched"></vn-check> <vn-check model="ticket.cheched"></vn-check>
</vn-none> </vn-none>
<vn-one>{{::ticket.ticket}}</vn-one> <vn-one pad-medium-h text-right>{{::ticket.ticket}}</vn-one>
<vn-two>{{::ticket.agency}}</vn-two> <vn-two pad-medium-h text-left>{{::ticket.agency}}</vn-two>
<vn-two>{{::ticket.salePerson | ucwords}}</vn-two> <vn-two pad-medium-h text-left>{{::ticket.salePerson | ucwords}}</vn-two>
<vn-one>{{::ticket.hour}}</vn-one> <vn-one pad-medium-h text-right>{{::ticket.hour}}</vn-one>
<vn-one>{{ticket.state}}</vn-one> <vn-one text-center>{{ticket.state}}</vn-one>
<vn-one>{{::ticket.lines}}</vn-one> <vn-one pad-medium-h text-right>{{::ticket.lines}}</vn-one>
<vn-one>{{::ticket.m3}}</vn-one> <vn-one pad-medium-h text-right>{{::ticket.m3}}</vn-one>
<vn-one>{{::ticket.boxes}}</vn-one> <vn-one pad-medium-h text-right>{{::ticket.boxes}}</vn-one>
<vn-none> <vn-none>
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon> <vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none> </vn-none>

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

@ -133,7 +133,7 @@ export default class ProductionIndex {
} }
// END modals and actions modals // END modals and actions modals
onOrder(field, dir) { onOrder(field, dir) {
console.log('order by', field, dir); console.log('TODO: call rest api order by', field, dir);
} }
$doCheck() { $doCheck() {
if (this.actions.state) { if (this.actions.state) {

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

@ -31,25 +31,22 @@ vn-button-bar {
html [text-center], .text-center { html [text-center], .text-center {
text-align: center; text-align: center;
} }
html [text-right], .text-right{
text-align: right;
}
html [text-left], .text-left{
text-align: left;
}
html [vn-right], .vn-right{ html [vn-right], .vn-right{
float: right; float: right;
} }
html [vn-left], .vn-left{ html [vn-left], .vn-left{
float: left; float: left;
} }
html [vn-center], .vn-center{
.list-header{ justify-content: center;
border-bottom: 3px solid $color-medium-grey;
font-weight: bold;
}
.list-footer{
border-top: 3px solid $color-medium-grey;
font-weight: bold;
}
.list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
text-align: center;
} }
.list > vn-none{ .list > vn-none{
min-width: 60px; min-width: 60px;
} }