verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 67 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}}">
<vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()">
<span translate>
<vn-none class="title" translate>
{{::$ctrl.text}}
</span>
<vn-icon icon="keyboard_arrow_down" ng-if="$ctrl.gridHeader.field === $ctrl.field && $ctrl.order === 'DESC'"></vn-icon>
<vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.gridHeader.field === $ctrl.field && $ctrl.order === 'ASC'"></vn-icon>
</vn-none>
<vn-none>
<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>
<ng-transclude ng-if="!$ctrl.text"></ng-transclude>
</div>

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

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

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

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

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

@ -11,13 +11,34 @@ vn-drop-down {
border: 1px solid #A7A7A7;
li {
list-style-type: none;
padding: 5px 20px 5px 5px;
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;
}
}
}
li:hover{
background-color: #3D3A3B;
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 {
constructor() {
this.field = undefined;
this.order = undefined;
this.currentColumn = undefined;
}
selectColum(col) {
this.field = col.field;
this.order = col.order;
if (this.currentColumn && this.currentColumn.field != col.field)
this.currentColumn.order = undefined;
this.currentColumn = col;
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;
.orderly{
cursor: pointer;
}
vn-none{
min-width: 60px;
text-align: center;
white-space: nowrap;
justify-content: center;
vn-none{
min-width: 16px;
}
}
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">
<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>

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/States/list" options="vnIndex as states" actions="$ctrl.states = states.model;"></mg-ajax>
<vn-card margin-large>
<vn-vertical pad-medium>
@ -58,7 +59,7 @@
<vn-colum-header vn-none>
<vn-check model="$ctrl.checkAll"></vn-check>
</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="salePerson" text="Commercial"></vn-colum-header>
<vn-colum-header vn-one field="hour" text="Hour"></vn-colum-header>
@ -76,14 +77,14 @@
<vn-none>
<vn-check model="ticket.cheched"></vn-check>
</vn-none>
<vn-one>{{::ticket.ticket}}</vn-one>
<vn-two>{{::ticket.agency}}</vn-two>
<vn-two>{{::ticket.salePerson | ucwords}}</vn-two>
<vn-one>{{::ticket.hour}}</vn-one>
<vn-one>{{ticket.state}}</vn-one>
<vn-one>{{::ticket.lines}}</vn-one>
<vn-one>{{::ticket.m3}}</vn-one>
<vn-one>{{::ticket.boxes}}</vn-one>
<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.hour}}</vn-one>
<vn-one text-center>{{ticket.state}}</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>
<vn-none>
<vn-icon icon="more" vn-tooltip tooltip-template="/static/templates/tooltip.locator.tpl.html" tooltip-position="left"></vn-icon>
</vn-none>

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

@ -133,7 +133,7 @@ export default class ProductionIndex {
}
// END modals and actions modals
onOrder(field, dir) {
console.log('order by', field, dir);
console.log('TODO: call rest api order by', field, dir);
}
$doCheck() {
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 {
text-align: center;
}
html [text-right], .text-right{
text-align: right;
}
html [text-left], .text-left{
text-align: left;
}
html [vn-right], .vn-right{
float: right;
}
html [vn-left], .vn-left{
float: left;
}
.list-header{
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;
html [vn-center], .vn-center{
justify-content: center;
}
.list > vn-none{
min-width: 60px;
}