descriptor quicklings fixed #593

client/client/src/descriptor/index.html

@@ -54,22 +54,29 @@
     </vn-icon>
     </vn-horizontal>
     <vn-horizontal pad-small class="quicklinks">
-        <vn-button ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
             vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
-            icon="{{::$ctrl.quicklinks.btnOne.icon}}" 
+            ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
-            ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnOne.state, $ctrl.quicklinks.btnOne.params)">
+            <vn-icon 
-        </vn-button>
+                class="mdl-button mdl-js-button mdl-button--colored" 
-
+                icon="{{::$ctrl.quicklinks.btnOne.icon}}">
-        <vn-button ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            </vn-icon>
+        </a>
+        <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
             vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
-            icon="{{::$ctrl.quicklinks.btnTwo.icon}}" 
+            ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
-            ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnTwo.state, $ctrl.quicklinks.btnTwo.params)">
+            <vn-icon 
-        </vn-button>
+                class="mdl-button mdl-js-button mdl-button--colored" 
-
+                icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
-        <vn-button ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            </vn-icon>
+        </a>
+        <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
             vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
-            icon="{{::$ctrl.quicklinks.btnThree.icon}}" 
+            ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
-            ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnThree.state, $ctrl.quicklinks.btnThree.params)">
+            <vn-icon 
-        </vn-button>
+                class="mdl-button mdl-js-button mdl-button--colored" 
+                icon="{{::$ctrl.quicklinks.btnThree.icon}}">
+            </vn-icon>
+        </a>
     </vn-horizontal>
 </vn-card>

client/client/src/descriptor/index.js

@@ -21,8 +21,7 @@ class Controller {
         this._quicklinks = {
             btnOne: {
                 icon: 'icon-ticket',
-                state: 'ticket.index',
+                state: `ticket.index({q: '{"clientFk": ${value.id}}'})`,
-                params: {q: `{"clientFk": ${value.id}}`},
                 tooltip: 'Client ticket list'
             }
         };

client/core/src/components/chip/index.html

@@ -0,0 +1,8 @@
+<div>
+    <span ng-class="{'mdl-chip--deletable': !$ctrl.disabled}" class="mdl-chip">
+        <span class="mdl-chip__text" ng-transclude></span>
+        <button ng-show="!$ctrl.disabled" type="button" class="mdl-chip__action">
+            <i class="material-icons">cancel</i>
+        </button>
+    </span>
+</div>

client/core/src/components/chip/index.js

@@ -0,0 +1,27 @@
+import ngModule from '../../module';
+import './style.scss';
+
+export default class Chip {
+    constructor($element, $scope, $transclude) {
+        $transclude($scope.$parent, clone => {
+            angular.element($element[0].querySelector('div')).append(clone);
+        });
+    /*     this.mdlElement = this.element.querySelector('.mdl-slider');
+        componentHandler.upgradeElement(this.mdlElement); */
+      /*   this.mdlElement.addEventListener('change', () => {
+            this._value = this.input.value;
+            this.$.$applyAsync();
+        }); */
+    }
+}
+
+Chip.$inject = ['$element', '$scope', '$transclude'];
+
+ngModule.component('vnChip', {
+    template: require('./index.html'),
+    controller: Chip,
+    transclude: true,
+    bindings: {
+        disabled: '<?'
+    }
+});

client/core/src/components/chip/style.scss

@@ -0,0 +1,7 @@
+@import 'colors';
+
+vn-chip {
+    .mdl-chip {
+        background-color: $main-01
+    }
+}

client/core/src/components/index.js

@@ -39,3 +39,4 @@ import './searchbar/searchbar';
 import './table';
 import './th';
 import './input-range';
+import './chip';

client/item/src/descriptor/index.html

@@ -48,22 +48,30 @@
         </vn-auto>
     </vn-vertical>
     <vn-horizontal pad-small class="quicklinks">
-        <vn-button ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+        <vn-horizontal pad-small class="quicklinks">
+            <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
                 vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
-            icon="{{::$ctrl.quicklinks.btnOne.icon}}" 
+                ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
-            ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnOne.state, $ctrl.quicklinks.btnOne.params)">
+                <vn-icon 
-        </vn-button>
+                    class="mdl-button mdl-js-button mdl-button--colored" 
-
+                    icon="{{::$ctrl.quicklinks.btnOne.icon}}">
-        <vn-button ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+                </vn-icon>
+            </a>
+            <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
                 vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
-            icon="{{::$ctrl.quicklinks.btnTwo.icon}}" 
+                ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
-            ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnTwo.state, $ctrl.quicklinks.btnTwo.params)">
+                <vn-icon 
-        </vn-button>
+                    class="mdl-button mdl-js-button mdl-button--colored" 
-
+                    icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
-        <vn-button ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+                </vn-icon>
+            </a>
+            <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
                 vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
-            icon="{{::$ctrl.quicklinks.btnThree.icon}}" 
+                ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
-            ng-click="$ctrl.quicklinkGo($ctrl.quicklinks.btnThree.state, $ctrl.quicklinks.btnThree.params)">
+                <vn-icon 
-        </vn-button>
+                    class="mdl-button mdl-js-button mdl-button--colored" 
+                    icon="{{::$ctrl.quicklinks.btnThree.icon}}">
+                </vn-icon>
+            </a>
     </vn-horizontal>
 </vn-card>

client/item/src/diary/index.html

@@ -27,7 +27,7 @@
                             <vn-th number>Id</vn-th>
                             <vn-th>State</vn-th>
                             <vn-th>Reference</vn-th>
-                            <vn-th>Worker</vn-th>
+                            <vn-th>Client</vn-th>
                             <vn-th number>In</vn-th>
                             <vn-th number>Out</vn-th>
                             <vn-th number>Balance</vn-th>
@@ -37,11 +37,14 @@
                         <vn-tr ng-class="{'warning': $ctrl.isToday(sale.date)}" 
                             ng-repeat="sale in sales" vn-repeat-last on-last="$ctrl.scrollToActive()">
                             <vn-td>{{::sale.date | date:'dd/MM/yyyy HH:mm' }}</vn-td>
-                            <vn-td ng-click="$ctrl.showDescriptor($event, sale)" pointer number class="link">
+                            <vn-td ng-class="{'link pointer': sale.isTicket}" 
+                                ng-click="$ctrl.showDescriptor($event, sale)" number>
                                 {{::sale.origin | dashIfEmpty}}</vn-td>
                             <vn-td>{{::sale.stateName | dashIfEmpty}}</vn-td>
                             <vn-td>{{::sale.reference | dashIfEmpty}}</vn-td>
-                            <vn-td >{{sale.name | dashIfEmpty}}</vn-td>
+                            <vn-td ng-class="{'link pointer': sale.isTicket}" 
+                                ng-click="$ctrl.showClientDescriptor($event, sale)">
+                                {{sale.name | dashIfEmpty}}</vn-td>
                             <vn-td number>{{::sale.in | dashIfEmpty}}</vn-td>
                             <vn-td number>{{::sale.out | dashIfEmpty}}</vn-td>
                             <vn-td number><span class="balance">{{::sale.balance | dashIfEmpty}}</span></vn-td>
@@ -54,4 +57,10 @@
         </vn-vertical>
     </vn-card>
 </vn-vertical>
-<vn-ticket-descriptor-popover vn-id="descriptor"></vn-ticket-descriptor-popover>
+<vn-ticket-descriptor-popover 
+    vn-id="descriptor">
+</vn-ticket-descriptor-popover>
+
+<vn-client-descriptor-popover 
+    vn-id="clientDescriptor">
+</vn-client-descriptor-popover>

client/item/src/diary/index.js

@@ -125,6 +125,16 @@ class Controller {
         event.stopImmediatePropagation();
     }
 
+    showClientDescriptor(event, sale) {
+        if (!sale.isTicket) return;
+
+        this.$scope.clientDescriptor.clientFk = sale.clientFk;
+        this.$scope.clientDescriptor.parent = event.target;
+        this.$scope.clientDescriptor.show();
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+
     onDescriptorLoad() {
         this.$scope.popover.relocate();
     }

client/item/src/ticket-descriptor/index.html

@@ -4,7 +4,7 @@
             <vn-icon icon="chevron_left"></vn-icon>
         </a>
         <vn-icon icon="icon-ticket"></vn-icon>
-        <a translate-attr="{title: 'Preview'}" ui-sref="ticket.card.summary">
+        <a translate-attr="{title: 'Preview'}" ui-sref="ticket.card.summary({id: $ctrl.ticket.id})">
             <vn-icon icon="desktop_windows"></vn-icon>
         </a>
     </vn-horizontal>
@@ -14,8 +14,6 @@
             value="{{$ctrl.ticket.id}}">
         </vn-label-value>
         <vn-label-value label="Client" 
-            class="link"
-            ng-click="$ctrl.showDescriptor($event, $ctrl.ticket.client.id)"
             value="{{$ctrl.ticket.client.name}}">
         </vn-label-value>
         <vn-label-value label="State" 
@@ -59,5 +57,30 @@
             ng-class="{bright: $ctrl.ticket.client.isTaxDataChecked == false}">
         </vn-icon>
     </vn-horizontal>
+    <vn-horizontal pad-small class="quicklinks">
+        <a ng-if="$ctrl.quicklinks.btnOne" pad-small-right
+            vn-tooltip="{{::$ctrl.quicklinks.btnOne.tooltip}}"
+            ui-sref="{{::$ctrl.quicklinks.btnOne.state}}" target="_blank">
+            <vn-icon 
+                class="mdl-button mdl-js-button mdl-button--colored" 
+                icon="{{::$ctrl.quicklinks.btnOne.icon}}">
+            </vn-icon>
+        </a>
+        <a ng-if="$ctrl.quicklinks.btnTwo" pad-small-right
+            vn-tooltip="{{::$ctrl.quicklinks.btnTwo.tooltip}}"
+            ui-sref="{{::$ctrl.quicklinks.btnTwo.state}}" target="_blank">
+            <vn-icon 
+                class="mdl-button mdl-js-button mdl-button--colored" 
+                icon="{{::$ctrl.quicklinks.btnTwo.icon}}">
+            </vn-icon>
+        </a>
+        <a ng-if="$ctrl.quicklinks.btnThree" pad-small-right
+            vn-tooltip="{{::$ctrl.quicklinks.btnThree.tooltip}}"
+            ui-sref="{{::$ctrl.quicklinks.btnThree.state}}" target="_blank">
+            <vn-icon 
+                class="mdl-button mdl-js-button mdl-button--colored" 
+                icon="{{::$ctrl.quicklinks.btnThree.icon}}">
+            </vn-icon>
+        </a>
+    </vn-horizontal>
 </vn-card>
-<vn-client-descriptor-popover vn-id="descriptor"></vn-client-descriptor-popover>

client/item/src/ticket-descriptor/index.js

@@ -1,25 +1,43 @@
 import ngModule from '../module';
 
 class Controller {
-    constructor($http, $scope) {
+    constructor($state, $scope) {
         this.$scope = $scope;
-        this.$http = $http;
+        this.$state = $state;
     }
 
-    showDescriptor(event, clientFk) {
+    get ticket() {
-        this.$scope.descriptor.clientFk = clientFk;
+        return this._ticket;
-        this.$scope.descriptor.parent = event.target;
-        this.$scope.descriptor.show();
-        event.preventDefault();
-        event.stopImmediatePropagation();
     }
 
-    onDescriptorLoad() {
+    set ticket(value) {
-        this.$scope.popover.relocate();
+        this._ticket = value;
+
+        if (!value) return;
+
+        this._quicklinks = {
+            btnOne: {
+                icon: 'person',
+                state: `client.card.summary({id: ${value.clientFk}})`,
+                tooltip: 'Client card'
+            }
+        };
+    }
+
+    set quicklinks(value = {}) {
+        this._quicklinks = Object.assign(value, this._quicklinks);
+    }
+
+    get quicklinks() {
+        return this._quicklinks;
+    }
+
+    quicklinkGo(state, params) {
+        this.$state.go(state, params);
     }
 }
 
-Controller.$inject = ['$http', '$scope'];
+Controller.$inject = ['$state', '$scope'];
 
 ngModule.component('vnTicketDescriptor', {
     template: require('./index.html'),

client/order/src/filter/index.html

@@ -42,7 +42,7 @@
                 </vn-horizontal>
 
                 <vn-horizontal pad-medium>
-                    tags
+                    <vn-chip onRemove="$ctrl.onRemove($index)">Tag1</vn-chip>
                 </vn-horizontal>
             </vn-vertical>
         </vn-card>

client/salix/src/styles/misc.scss

@@ -212,16 +212,13 @@ vn-main-block {
         align-items: center;
         
         & > a {
-            background-color: $main-01;
-            @extend %clickable;
-            display: flex;
-            align-items: center;
-            padding: .5em;
-            color: white;
-            text-decoration: none;
-
             & > vn-icon {
                 font-size: 1.8em;
+                padding: 0;
+            }
+
+            & > vn-icon i[class="material-icons"] {
+                line-height: 36px;
             }
         }
     }
@@ -287,8 +284,11 @@ fieldset[disabled] .mdl-textfield .mdl-textfield__label,
 
 .counter {
     background-color: $main-header;
+    display: inline-block;
     color: $color-white;
+    text-align: center;
     border-radius: 3px;
+    min-width: 1.5em;
     padding: 5px
 }
 

client/ticket/src/component/index.html

@@ -76,4 +76,6 @@
 <!--         <vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging> -->
     </vn-card>
 </vn-vertical>
-<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
+<vn-item-descriptor-popover vn-id="descriptor"
+    quicklinks="$ctrl.quicklinks">
+</vn-item-descriptor-popover>

client/ticket/src/component/index.js

@@ -88,6 +88,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();

client/ticket/src/expedition/index.html

@@ -57,4 +57,6 @@
         </vn-pagination>
     </vn-card>
 </vn-vertical>
-<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
+<vn-item-descriptor-popover vn-id="descriptor"
+    quicklinks="$ctrl.quicklinks">
+</vn-item-descriptor-popover>

client/ticket/src/expedition/index.js

@@ -32,6 +32,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();
@@ -46,5 +56,8 @@ Controller.$inject = ['$scope', '$stateParams', '$http'];
 
 ngModule.component('vnTicketExpedition', {
     template: require('./index.html'),
-    controller: Controller
+    controller: Controller,
+    bindings: {
+        ticket: '<'
+    }
 });

client/ticket/src/locale/es.yml

@@ -57,6 +57,7 @@ Risk: Riesgo
 Delay: Retraso
 Code 100: Código 100
 Invoice: Factura
+Client card: Ficha del cliente
 
 #sections
 List: Listado

client/ticket/src/sale-checked/index.html

@@ -47,4 +47,6 @@
         </vn-pagination>
     </vn-card>
 </vn-vertical>
-<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
+<vn-item-descriptor-popover vn-id="descriptor"
+    quicklinks="$ctrl.quicklinks">
+</vn-item-descriptor-popover>

client/ticket/src/sale-checked/index.js

@@ -34,6 +34,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();
@@ -48,5 +58,8 @@ Controller.$inject = ['$scope', '$stateParams'];
 
 ngModule.component('vnTicketSaleChecked', {
     template: require('./index.html'),
-    controller: Controller
+    controller: Controller,
+    bindings: {
+        ticket: '<'
+    }
 });

client/ticket/src/sale-tracking/index.html

@@ -60,5 +60,6 @@
         </vn-pagination> 
     </vn-card>
 </vn-vertical>
-<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
+<vn-item-descriptor-popover vn-id="descriptor"
-
+    quicklinks="$ctrl.quicklinks">
+</vn-item-descriptor-popover>

client/ticket/src/sale-tracking/index.js

@@ -7,6 +7,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();

client/ticket/src/sale/index.js

@@ -20,25 +20,6 @@ class Controller {
         ];
     }
 
-    set ticket(value) {
-        this._ticket = value;
-
-        if (!value) return;
-
-        this.quicklinks = {
-            btnThree: {
-                icon: 'icon-transaction',
-                state: 'item.card.diary',
-                params: {id: value.id, q: `{"warehouseFk": ${value.warehouseFk}}`},
-                tooltip: 'Item diary'
-            }
-        };
-    }
-
-    get ticket() {
-        return this._ticket;
-    }
-
     onDataChange() {
         this.sales = this.$scope.model.data;
         this.getTaxes();
@@ -241,6 +222,16 @@ class Controller {
 
     // Item Descriptor
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();

client/ticket/src/summary/index.html

@@ -92,4 +92,6 @@
         </vn-horizontal>
     </vn-vertical>
 </vn-card>
-<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
+<vn-item-descriptor-popover vn-id="descriptor"
+    quicklinks="$ctrl.quicklinks">
+</vn-item-descriptor-popover>

client/ticket/src/summary/index.js

@@ -7,8 +7,14 @@ class Controller {
         this.$http = $http;
     }
 
-    $onChanges() {
+    get ticket() {
-        if (!this.ticket) return;
+        return this._ticket;
+    }
+
+    set ticket(value) {
+        this._ticket = value;
+
+        if (!value) return;
 
         this.$http.get(`/ticket/api/Tickets/${this.ticket.id}/summary`).then(res => {
             if (res && res.data)
@@ -26,6 +32,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();

client/ticket/src/summary/index.spec.js

@@ -18,12 +18,12 @@ describe('Ticket', () => {
             controller.ticket = {id: 1};
         }));
 
-        describe('$onChanges()', () => {
+        describe('ticket()', () => {
             it('should perform a GET query and define summary property', () => {
                 let res = {id: 1, nickname: 'Batman'};
                 $httpBackend.when('GET', `/ticket/api/Tickets/1/summary`).respond(200, res);
                 $httpBackend.expect('GET', `/ticket/api/Tickets/1/summary`);
-                controller.$onChanges();
+                controller.ticket = {id: 1};
                 $httpBackend.flush();
 
                 expect(controller.summary).toBeDefined();

client/ticket/src/volume/index.html

@@ -53,5 +53,7 @@
         </vn-pagination>
     </vn-card>
 </vn-vertical>
-<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
+<vn-item-descriptor-popover vn-id="descriptor"
+    quicklinks="$ctrl.quicklinks">
+</vn-item-descriptor-popover>
 

client/ticket/src/volume/index.js

@@ -47,6 +47,16 @@ class Controller {
     }
 
     showDescriptor(event, itemFk) {
+        this.quicklinks = {
+            btnThree: {
+                icon: 'icon-transaction',
+                state: `item.card.diary({
+                    id: ${itemFk}, 
+                    q: '{"warehouseFk": ${this.ticket.warehouseFk}}'
+                })`,
+                tooltip: 'Item diary'
+            }
+        };
         this.$scope.descriptor.itemFk = itemFk;
         this.$scope.descriptor.parent = event.target;
         this.$scope.descriptor.show();