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

client/core/src/components.js

@@ -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';

client/core/src/drop-down/drop-down.html

@@ -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>

client/core/src/drop-down/drop-down.js

@@ -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'
+});

client/core/src/drop-down/style.scss

@@ -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;
+        }
+    }
+}

client/core/src/filters/index.js

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

client/core/src/filters/ucwords.js

@@ -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);

client/core/src/icon-button/icon-button.html

@@ -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>

client/core/src/icon-button/icon-button.js

@@ -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'
+});
+

client/core/src/icon-menu/icon-menu.html

@@ -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>

client/core/src/icon-menu/icon-menu.js

@@ -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'
+});

client/core/src/icon/icon.js

@@ -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'
+});

client/core/src/icon/icon.mdl.js

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

client/production/src/index/index.html

@@ -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-none></vn-none>
-           <vn-one>
+           <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-two text="Agencia"></vn-label>
-           <vn-label vn-one text="Trabajador"></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-horizontal vn-one class="list list-body" ng-repeat="ticket in $ctrl.tickets track by $index">
-           <vn-one>
+           <vn-none>
                <vn-icon icon="report_problem" ng-if="ticket.problem" vn-tooltip="{{ticket.problem}}" tooltip-position="right"></vn-icon>
-           </vn-one>
+           </vn-none>
-           <vn-one>
+           <vn-none>
                 <vn-check model="ticket.cheched"></vn-check>
-           </vn-one>
+           </vn-none>
-           <vn-one>{{ticket.id}}</vn-one>
+           <vn-one>{{ticket.ticket}}</vn-one>
-           <vn-one>{{ticket.agency.name}}</vn-one>
+           <vn-two>{{ticket.agency}}</vn-two>
-           <vn-one>{{ticket.employee.name}}</vn-one>
+           <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-six></vn-six>
-           <vn-one></vn-one>
-           <vn-one></vn-one>
-           <vn-one></vn-one>
-           <vn-one></vn-one>
            <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>

client/production/src/index/index.js

@@ -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'];
 

client/production/src/index/style.scss

@@ -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;