Tarea #428 Componentizar descriptor de client

client/client/src/card/index.html

@@ -6,7 +6,7 @@
     </mg-ajax>
     <vn-horizontal>
         <vn-auto class="left-block">
-            <vn-client-descriptor client="$ctrl.client"></vn-client-descriptor>
+            <vn-client-descriptor client="$ctrl.client" clientFk="$ctrl.client.id"></vn-client-descriptor>
             <vn-left-menu></vn-left-menu>
         </vn-auto>
         <vn-one>

client/client/src/client.js

@@ -7,6 +7,7 @@ import './basic-data';
 import './fiscal-data';
 import './billing-data';
 import './descriptor';
+import './descriptor-popover';
 import './search-panel';
 import './address/index';
 import './address/create';

client/client/src/descriptor-popover/index.html

@@ -0,0 +1,4 @@
+<vn-popover vn-id="popover">
+    <vn-client-descriptor client="$ctrl.client" clientFk="$ctrl.clientFk">
+    </vn-client-descriptor>
+</vn-popover>

client/client/src/descriptor-popover/index.js

@@ -0,0 +1,61 @@
+import ngModule from '../module';
+import Component from 'core/src/lib/component';
+import './style.scss';
+
+class Controller extends Component {
+    constructor($element, $scope, $http, $timeout) {
+        super($element, $scope);
+        this.$http = $http;
+        this.$timeout = $timeout;
+        this.isTooltip = true;
+        this.client = {};
+    }
+
+    clear() {
+        this.client = {};
+        this.clientFk = null;
+    }
+
+    _getClientDebt(clientFk) {
+        this.$http.get(`/client/api/Clients/${clientFk}/getDebt`)
+        .then(response => {
+            this.clientDebt = response.data.debt;
+        });
+    }
+
+    _getClient(clientFk) {
+        this.$http.get(`/client/api/Clients/${clientFk}/card`)
+        .then(response => {
+            this.client = response.data;
+        });
+    }
+
+    goToClientTickets() {
+        this.$state.go('ticket.index', {q: `{"clientFk": ${this.client.id}}`});
+    }
+
+    set clientFk(value) {
+        if (value) {
+            this._getClient(value);
+            this._getClientDebt(value);
+        }
+    }
+
+    show() {
+        this.$.popover.parent = this.parent;
+        setTimeout(() => {
+            this.$.popover.show();
+        }, 150);
+    }
+
+}
+Controller.$inject = ['$element', '$scope', '$http', '$timeout'];
+
+ngModule.component('vnClientDescriptorPopover', {
+    template: require('./index.html'),
+    controller: Controller,
+    bindings: {
+        client: '<',
+        clientFk: '<'
+    }
+});

client/client/src/descriptor-popover/style.scss

@@ -0,0 +1,15 @@
+vn-client-descriptor-popover {
+    div.popover{
+        width: 16em;
+    }
+    vn-client-descriptor {
+        width: 16em;
+        display: block;
+        &>vn-card{
+            margin: 0!important;
+        }
+        .header > a:first-child {
+            display: none
+        }
+    }
+}

client/client/src/descriptor/index.js

@@ -23,10 +23,10 @@ class Controller {
         this.$state.go('ticket.index', {q: `{"clientFk": ${this.client.id}}`});
     }
 
-    $onChanges(changes) {
+    set clientFk(value) {
-        if (changes.client && this.client) {
+        if (value) {
-            this._getClient(this.client.id);
+            this._getClient(value);
-            this._getClientDebt(this.client.id);
+            this._getClientDebt(value);
         }
     }
 }
@@ -36,7 +36,8 @@ Controller.$inject = ['$http', '$state'];
 ngModule.component('vnClientDescriptor', {
     template: require('./index.html'),
     bindings: {
-        client: '<'
+        client: '<',
+        clientFk: '<?'
     },
     controller: Controller
 });

client/ticket/src/index/index.html

@@ -44,7 +44,7 @@
                     <td>{{::ticket.shipped | date:'HH:mm'}}</td>
                     <td
                         class="link"
-                        ui-sref="client.card.summary({id: {{::ticket.client.id}}})">
+                        ng-click="$ctrl.showDescriptor($event, ticket.clientFk)">
                         {{::ticket.nickname}}
                     </td>
                     <td>{{::ticket.address.province.name}}</td>
@@ -63,6 +63,7 @@
                 </tr>
             </tbody>
         </table>
+        <vn-client-descriptor-popover vn-id="descriptor"></vn-client-descriptor-popover>
     </vn-card>
     <vn-pagination
         model="model"

client/ticket/src/index/index.js

@@ -90,6 +90,17 @@ export default class Controller {
         if (comparation < 0)
             return 'success';
     }
+    showDescriptor(event, clientFk) {
+        this.$.descriptor.clientFk = clientFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+
+    onDescriptorLoad() {
+        this.$.popover.relocate();
+    }
 
     preview(event, ticket) {
         event.preventDefault();