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

Nuevos componentes: drop-down, icon-menu. Refactorización de icon e icon-button (pasados a componentes sin template manager)

This commit is contained in:
Dani Herrero 2017-06-13 13:08:06 +02:00
parent 87857488c0
commit e09f60a53a
15 changed files with 199 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/core/src/components.js
View File

@ -15,6 +15,8 @@ import './subtitle/subtitle';
import './spinner/spinner';
import './snackbar/snackbar';
import './tooltip/tooltip';
import './icon-menu/icon-menu';
import './drop-down/drop-down';
export {NAME as BUTTON, directive as ButtonDirective} from './button/button';
export {NAME as BUTTON_MDL, factory as buttonMdl} from './button/button.mdl';

3
client/core/src/drop-down/drop-down.html Normal file
View File

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

16
client/core/src/drop-down/drop-down.js Normal file
View File

@ -0,0 +1,16 @@
import {module} from '../module';
import './style.scss';
/* export default class DropDown {
}*/
module.component('vnDropDown', {
template: require('./drop-down.html'),
// controller: DropDown,
bindings: {
items: '<',
show: '<',
selected: '='
},
controllerAs: 'dd'
});

20
client/core/src/drop-down/style.scss Normal file
View File

@ -0,0 +1,20 @@
vn-drop-down {
position: absolute;
z-index: 9999;
ul{
padding: 0;
margin: 10px 0 0 0;
background: white;
border: 1px solid #A7A7A7;
li {
list-style-type: none;
padding: 5px 20px 5px 5px;
cursor: pointer;
}
li:hover{
background-color: #3D3A3B;
color: white;
}
}
}

1
client/core/src/filters/index.js
View File

@ -1 +1,2 @@
import './phone';
import './ucwords';

20
client/core/src/filters/ucwords.js Normal file
View File

@ -0,0 +1,20 @@
import {module} from '../module';
/**
* Uppercase the first character of each word in a string
*
* @return {String} The formated string
*/
export default function ucwords() {
return function(input) {
input = input || '';
let out = '';
let aux = input.split(' ');
for (let i = 0; i < aux.length; i++) {
out += (aux[i]) ? aux[i].charAt(0).toUpperCase() + aux[i].substr(1).toLowerCase() : '';
out += ' ';
}
return out.trim();
};
}
module.filter('ucwords', ucwords);

3
client/core/src/icon-button/icon-button.html Normal file
View File

@ -0,0 +1,3 @@
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored icon-square {{ib.className}}" {{ib.enabled}}>
<vn-icon icon="{{ib.icon}}"></vn-icon>{{ib.label}}
</button>

18
client/core/src/icon-button/icon-button.js
View File

@ -1,10 +1,10 @@
import {module as _module} from '../module';
import * as resolveFactory from '../lib/resolveDefaultComponents';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
import * as util from '../lib/util';
const _NAME = 'iconButton';
export const NAME = util.getName(_NAME);
/*
directive.$inject = [resolveFactory.NAME];
export function directive(resolve) {
return {
@ -14,4 +14,16 @@ export function directive(resolve) {
}
};
}
_module.directive(NAME, directive);
_module.directive(NAME, directive); */
_module.component(NAME, {
template: require('./icon-button.html'),
bindings: {
icon: '@',
className: '<?',
enabled: '<?',
label: '@?'
},
controllerAs: 'ib'
});

4
client/core/src/icon-menu/icon-menu.html Normal file
View File

@ -0,0 +1,4 @@
<div class="icon-menu">
<vn-icon-button icon="{{im.icon}}"></vn-icon-button>
<vn-drop-down items="im.items" show="im.showDropDown" selected="im.selected"></vn-drop-down>
</div>

54
client/core/src/icon-menu/icon-menu.js Normal file
View File

@ -0,0 +1,54 @@
import {module} from '../module';
export default class IconMenu {
constructor($element, $http, $timeout) {
this.$element = $element;
this.$http = $http;
this.$timeout = $timeout;
this._showDropDown = false;
}
get showDropDown() {
return this._showDropDown;
}
set showDropDown(value) {
this._showDropDown = value;
}
getItems() {
this.$http.get(this.url).then(
json => {
this.items = json.data;
}
);
}
$onInit() {
if (!this.items && this.url) {
this.getItems();
}
this.$element.bind('mouseover', () => {
this.$timeout(() => {
this.showDropDown = true;
});
});
this.$element.bind('mouseout', () => {
this.$timeout(() => {
this.showDropDown = false;
});
});
}
}
IconMenu.$inject = ['$element', '$http', '$timeout'];
module.component('vnIconMenu', {
template: require('./icon-menu.html'),
bindings: {
url: '@?',
items: '=?',
icon: '@',
selected: '='
},
controller: IconMenu,
controllerAs: 'im'
});

16
client/core/src/icon/icon.js
View File

@ -1,12 +1,12 @@
import {module} from '../module';
import './icon.mdl';
import './style.css';
import * as resolveFactory from '../lib/resolveDefaultComponents';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
const _NAME = 'icon';
// const _NAME = 'icon';
export const NAME = 'vnIcon';
export function directive(resolver) {
/* export function directive(resolver) {
return {
restrict: 'E',
template: function(_, attrs) {
@ -16,4 +16,12 @@ export function directive(resolver) {
}
directive.$inject = [resolveFactory.NAME];
module.directive(NAME, directive);
module.directive(NAME, directive);*/
module.component(NAME, {
template: '<i class="material-icons">{{i.icon}}</i>',
bindings: {
icon: '@'
},
controllerAs: 'i'
});

2
client/core/src/icon/icon.mdl.js
View File

@ -6,7 +6,7 @@ export function factory() {
return {
template: template,
default: {}
}
};
}
module.factory(NAME, factory);

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

@ -1,4 +1,4 @@
<mg-ajax path="/static/mockIndexProduction.json" 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>
<vn-card margin-large>
<vn-vertical pad-medium>
<vn-horizontal vn-one>
@ -25,7 +25,10 @@
<vn-one>
<vn-horizontal>
<vn-button vn-none margin-medium-right label="Impreso"></vn-button>
<vn-icon-button vn-none margin-medium-right icon="assignment"></vn-icon-button>
<vn-none margin-medium-right>
<mg-ajax path="/production/api/States/productionStates" options="vnIndex as states" actions="$ctrl.states = states.model.states"></mg-ajax>
<vn-icon-menu icon="assignment" items="$ctrl.states" selected="$ctrl.state"></vn-icon-menu>
</vn-none>
<vn-icon-button vn-none margin-medium-right icon="textsms"></vn-icon-button>
<vn-icon-button vn-none margin-medium-right icon="person"></vn-icon-button>
<vn-icon-button vn-none margin-medium-right icon="query_builder"></vn-icon-button>
@ -34,51 +37,49 @@
<vn-two></vn-two>
</vn-horizontal>
<vn-horizontal vn-one class="list list-header">
<vn-one></vn-one>
<vn-one>
<vn-none></vn-none>
<vn-none>
<vn-check model="$ctrl.checkAll"></vn-check>
</vn-one>
</vn-none>
<vn-label vn-one text="ID Ticket"></vn-label>
<vn-label vn-one text="Agencia"></vn-label>
<vn-label vn-one text="Trabajador"></vn-label>
<vn-label vn-two text="Agencia"></vn-label>
<vn-label vn-two text="Trabajador"></vn-label>
<vn-label vn-one text="Hora"></vn-label>
<vn-label vn-one text="Estado"></vn-label>
<vn-label vn-one text="Lineas"></vn-label>
<vn-label vn-one text="m3"></vn-label>
<vn-label vn-one text="Cajas"></vn-label>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
<vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by ticket.id">
<vn-one>
<vn-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index">
<vn-none>
<vn-icon icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
</vn-one>
<vn-one>
</vn-none>
<vn-none>
<vn-check model="ticket.cheched"></vn-check>
</vn-one>
<vn-one>{{ticket.id}}</vn-one>
<vn-one>{{ticket.agency.name}}</vn-one>
<vn-one>{{ticket.employee.name}}</vn-one>
</vn-none>
<vn-one>{{ticket.ticket}}</vn-one>
<vn-two>{{ticket.agency}}</vn-two>
<vn-two>{{ticket.worker | ucwords}}</vn-two>
<vn-one>{{ticket.hour}}</vn-one>
<vn-one>{{ticket.state.name}}</vn-one>
<vn-one>{{ticket.state}}</vn-one>
<vn-one>{{ticket.lines}}</vn-one>
<vn-one>{{ticket.meters}}</vn-one>
<vn-one>{{ticket.m3}}</vn-one>
<vn-one>{{ticket.boxes}}</vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
<vn-horizontal vn-one margin-large-bottom class="list list-footer">
<vn-two>
<vn-none></vn-none>
<vn-none></vn-none>
<vn-one>
<span translate="Resultados"></span>:
<span>{{$ctrl.tickets.length}}</span>
</vn-two>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
</vn-one>
<vn-six></vn-six>
<vn-one>{{$ctrl.lines}}</vn-one>
<vn-one>{{$ctrl.meters}}</vn-one>
<vn-one></vn-one>
<vn-one></vn-one>
<vn-none></vn-none>
</vn-horizontal>
</vn-vertical>
</vn-card>

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

@ -10,6 +10,7 @@ export default class ProductionIndex {
this.tickets = [];
this.lines = 0;
this.meters = 0;
this.state = null;
}
get checkAll() {
return this._checkAll;
@ -18,6 +19,12 @@ export default class ProductionIndex {
this._checkAll = value;
this.switchChecks();
}
/*get state() {
return this._state;
}
set state(value) {
this._state = value;
}*/
switchChecks() {
let checks = this.$element[0].querySelectorAll('.list-body input[type="checkbox"]');
checks.forEach(
@ -33,11 +40,13 @@ export default class ProductionIndex {
let ids = [];
checks.forEach(
(_, i) => {
ids.push(this.tickets[i].id);
ids.push(this.tickets[i].ticket);
}
);
console.log("TODO: call action -> endPoint with tickets's Ids", action, ids, arguments[1]);
// TODO: call action -> endPoint with tickets's Ids
} else {
console.log("TODO: dialog with no items selected", action);
// TODO: dialog with no items selected
}
}
@ -47,7 +56,7 @@ export default class ProductionIndex {
this.tickets.forEach(
val => {
lines += parseFloat(val.lines);
meters += parseFloat(val.meters);
meters += parseFloat(val.m3);
}
);
this.lines = lines;
@ -57,6 +66,12 @@ export default class ProductionIndex {
this.$.index.filter = this.filter;
this.$.index.accept();
}
$doCheck() {
if (this.state) {
this.doAction('changeState', Object.assign({}, this.state));
this.state = null;
}
}
}
ProductionIndex.$inject = ['$element', '$scope'];

3
client/production/src/index/style.scss
View File

@ -29,6 +29,9 @@ vn-production-index {
.list > vn-one, .list > [vn-one], .list > [vn-two], .list > vn-two{
text-align: center;
}
.list > vn-none{
min-width: 60px;
}
.list-body{
padding: 4px 0px;
border-bottom: 1px solid #9D9D9D;