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

dropDown with search and columHeader preview icon

This commit is contained in:
Dani Herrero 2017-06-29 13:56:52 +02:00
parent df614b4943
commit 491ea3b796
10 changed files with 112 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<div class="{{$ctrl.className}}">
<div class="{{$ctrl.className}}" ng-mouseover="$ctrl.mouseIsOver = true" ng-mouseleave="$ctrl.mouseIsOver = false">
<vn-horizontal ng-if="$ctrl.text" class="orderly" ng-click="$ctrl.onClick()">
<vn-none class="title" translate>
{{::$ctrl.text}}
</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-icon icon="keyboard_arrow_down" ng-if="$ctrl.showArrow('DESC')"></vn-icon>
<vn-icon icon="keyboard_arrow_up" ng-if="$ctrl.showArrow('ASC')"></vn-icon>
</vn-none>
</vn-horizontal>
<ng-transclude ng-if="!$ctrl.text"></ng-transclude>

9
client/core/src/colum-header/colum-header.js
View File

@ -3,6 +3,7 @@ import {module} from '../module';
export default class ColumHeader {
constructor() {
this.order = undefined;
this.mouseIsOver = false;
}
onClick() {
if (this.order === 'ASC') {
@ -12,6 +13,14 @@ export default class ColumHeader {
}
this.gridHeader.selectColum(this);
}
showArrow(type) {
let showArrow = (this.gridHeader && this.gridHeader.currentColumn && this.gridHeader.currentColumn.field === this.field && this.order === type);
let showOther = (this.gridHeader && this.gridHeader.currentColumn && this.gridHeader.currentColumn.field === this.field && this.order !== type);
if (type === 'DESC' && this.mouseIsOver && !showOther) {
showArrow = true;
}
return showArrow;
}
}
ColumHeader.$inject = [];

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

@ -1,13 +1,18 @@
<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"/>
<div ng-if="$ctrl.filterAction">
<input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="$ctrl.search" ng-change="$ctrl.onFilterRest()"/>
</div>
<div ng-if="!$ctrl.filterAction">
<input vn-one placeholder="{{'Search' | translate}}" type="text" ng-model="$ctrl.search" ng-change="$ctrl.filterItems()"/>
</div>
<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>
<li ng-repeat="item in $ctrl.itemsFiltered" ng-click="$ctrl.selected = item">{{::item.name}}</li>
<li ng-if="$ctrl.showLoadMore" class="dropdown__loadMore" ng-click="$ctrl.loadMore()" translate="Load More"></li>
</ul>
</vn-one>

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

@ -2,34 +2,43 @@ import {module} from '../module';
import './style.scss';
export default class DropDown {
constructor($element, $scope) {
constructor($element, $filter) {
this.$element = $element;
this.$ = $scope;
this._showLoadMore = false;
this.$filter = $filter;
this.search = '';
this.itemsFiltered = [];
}
get showLoadMore() {
return this._showLoadMore;
filterItems() {
this.itemsFiltered = this.search ? this.$filter('filter')(this.items, this.search) : this.items;
}
onFilterRest() {
this.showLoadMore = false;
if (this.filterAction) {
this.filterAction({search: this.search});
}
set showLoadMore(value) {
this._showLoadMore = value;
}
$onChanges(changesObj) {
if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
this.$element.css('top', changesObj.top.currentValue + 'px');
}
if (this.loadMore) {
this.showLoadMore = true;
if (changesObj.items) {
this.filterItems();
}
}
clearSearch() {
this.$.search = '';
this.search = '';
this.showLoadMore = this.loadMore != null;
if (this.filterAction) {
this.filterAction();
}
$onInit() {
this.clearSearch();
}
}
DropDown.$inject = ['$element', '$scope'];
DropDown.$inject = ['$element', '$filter'];
module.component('vnDropDown', {
template: require('./drop-down.html'),
@ -40,6 +49,8 @@ module.component('vnDropDown', {
filter: '@?',
selected: '=',
loadMore: '&?',
filterAction: '&?',
showLoadMore: '<?',
top: '<?'
}
});

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

@ -34,6 +34,10 @@ vn-drop-down {
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
&.dropdown__loadMore{
color: rgb(255,171,64);
font-weight: 700;
}
}
li:hover{
background-color: #3D3A3B;

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

@ -1,4 +1,22 @@
<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" filter="true"></vn-drop-down>
<div ng-if="!$ctrl.url">
<vn-drop-down
items="$ctrl.items"
show="$ctrl.showDropDown"
selected="$ctrl.selected"
filter="true"
></vn-drop-down>
</div>
<div ng-if="$ctrl.url">
<vn-drop-down
items="$ctrl.items"
show="$ctrl.showDropDown"
selected="$ctrl.selected"
filter="true"
load-more="$ctrl.getItems()"
show-load-more="$ctrl.maxRow"
filter-action="$ctrl.findItems(search)"
></vn-drop-down>
</div>
</div>

43
client/core/src/icon-menu/icon-menu.js
View File

@ -14,15 +14,53 @@ export default class IconMenu {
set showDropDown(value) {
this._showDropDown = value;
}
getItems() {
this.$http.get(this.url).then(
findItems(search) {
if (!this.url)
return this.items ? this.items : [];
if (search) {
let filter = {where: {name: {regexp: search}}};
let json = JSON.stringify(filter);
this.$http.get(`${this.url}?filter=${json}`).then(
json => {
this.items = json.data;
}
);
} else {
this.items = [];
this.getItems();
}
}
getItems() {
let filter = {};
if (this.maxRow) {
if (this.items) {
filter.skip = this.items.length;
}
filter.limit = this.maxRow;
filter.order = 'name ASC';
}
let json = JSON.stringify(filter);
this.$http.get(`${this.url}?filter=${json}`).then(
json => {
if (json.data.length)
json.data.forEach(
el => {
this.items.push(el);
}
);
else
this.maxRow = false;
}
);
}
$onInit() {
if (!this.items && this.url) {
this.items = [];
this.getItems();
}
@ -51,6 +89,7 @@ module.component('vnIconMenu', {
url: '@?',
items: '<?',
icon: '@',
maxRow: '@?',
selected: '='
},
controller: IconMenu

2
client/production/src/production-actions/production-actions.html
View File

@ -7,7 +7,7 @@
<vn-icon-button icon="textsms" ng-click="$ctrl.doAction('addComment')"></vn-icon-button>
</vn-none>
<vn-none margin-medium-right>
<vn-icon-menu icon="person" items="[{id:1,name:'trabajador 01'},{id:2,name:'trabajador 02'},{id:3,name:'trabajador 03'}]"
<vn-icon-menu icon="person" url="/client/api/Employees" max-row="10"
selected="$ctrl.actionWorker"></vn-icon-menu>
</vn-none>
<vn-none margin-medium-right>

4
client/production/src/production-table/production-table.html
View File

@ -43,8 +43,8 @@
<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 pad-medium-h text-center>{{$ctrl.footer.lines}}</vn-one>
<vn-one pad-medium-h text-center>{{$ctrl.footer.meters}}</vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>

1
services/salix/server/boot/routes.js
View File

@ -85,6 +85,7 @@ module.exports = function (app) {
//acl.userProfile = userProfile;
acl.userProfile.id = userProfile.id;
acl.userProfile.username = userProfile.username;
acl.userProfile.warehouseId = 1;
sendACL(res, acl);
});
}