feat(claim_index): implemented smart-table and change state in summary

modules/claim/back/methods/claim/filter.js

@@ -94,19 +94,15 @@ module.exports = Self => {
                     ? {'cl.id': value}
                     : {
                         or: [
-                            {'c.name': {like: `%${value}%`}}
+                            {'cl.socialName': {like: `%${value}%`}}
                         ]
                     };
-            case 'client':
+            case 'workerFk':
-                return {'c.name': {like: `%${value}%`}};
+                return {['cl.workerFk']: value};
             case 'id':
-                return {'cl.id': value};
-            case 'clientFk':
-                return {'c.id': value};
             case 'claimStateFk':
-                return {'cl.claimStateFk': value};
+            case 'priority':
-            case 'salesPersonFk':
+                return {[`cl.${param}`]: value};
-                return {'c.salesPersonFk': value};
             case 'attenderFk':
                 return {'cl.workerFk': value};
             case 'created':
@@ -123,12 +119,23 @@ module.exports = Self => {
         const stmts = [];
 
         const stmt = new ParameterizedSQL(
-            `SELECT cl.id, c.name, cl.clientFk, cl.workerFk, u.name AS userName, cs.description, cl.created
+            `SELECT * 
+                FROM (
+                    SELECT 
+                        cl.id,
+                        cl.clientFk,
+                        c.socialName,
+                        cl.workerFk,
+                        u.name AS workerName,
+                        cs.description,
+                        cl.created,
+                        cs.priority,
+                        cl.claimStateFk
                     FROM claim cl
                         LEFT JOIN client c ON c.id = cl.clientFk
                         LEFT JOIN worker w ON w.id = cl.workerFk 
                         LEFT JOIN account.user u ON u.id = w.userFk
-                    LEFT JOIN claimState cs ON cs.id = cl.claimStateFk`
+                        LEFT JOIN claimState cs ON cs.id = cl.claimStateFk ) cl`
         );
 
         stmt.merge(conn.makeSuffix(filter));

modules/claim/front/index/index.html

@@ -1,59 +1,74 @@
 <vn-auto-search
     model="model">
 </vn-auto-search>
-<vn-data-viewer
-    model="model"
-    class="vn-w-lg">
 <vn-card>
-    <vn-table model="model">
+    <smart-table 
-        <vn-thead>
+        model="model"
-            <vn-tr>
+        options="$ctrl.smartTableOptions" 
-                <vn-th field="id" number>Id</vn-th>
+        expr-builder="$ctrl.exprBuilder(param, value)">
-                <vn-th field="clientFk">Client</vn-th>
+        <slot-table>
-                <vn-th field="created" center shrink-date>Created</vn-th>
+            <table>
-                <vn-th field="workerFk">Worker</vn-th>
+                <thead>
-                <vn-th field="claimStateFk">State</vn-th>
+                    <tr>
-                <vn-th></vn-th>
+                        <th field="id" shrink>
-            </vn-tr>
+                            <span translate>Id</span>
-        </vn-thead>
+                        </th>
-        <vn-tbody>
+                        <th field="clientFk">
-            <a
+                            <span translate>Client</span>
+                        </th>
+                        <th field="created" center shrink-date>
+                            <span translate>Created</span>
+                        </th>
+                        <th field="workerFk">
+                            <span translate>Worker</span>
+                        </th>
+                        <th field="claimStateFk">
+                            <span translate>State</span>
+                        </th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
                         ng-repeat="claim in model.data"
-                class="{{::$ctrl.compareDate(ticket.shipped)}} clickable vn-tr search-result"
+                        vn-anchor="::{
-                ui-sref="claim.card.summary({id: claim.id})">
+                            state: 'claim.card.summary', 
-                <vn-td number>{{::claim.id}}</vn-td>
+                            params: {id: claim.id}
-                <vn-td expand>
+                        }">
+                        <td>{{::claim.id}}</td>
+                        <td>
                             <span
                                 vn-click-stop="clientDescriptor.show($event, claim.clientFk)"
                                 class="link">
-                        {{::claim.name}}
+                                {{::claim.socialName}}
                             </span>
-                </vn-td>
+                        </td>
-                <vn-td center shrink-date>{{::claim.created | date:'dd/MM/yyyy'}}</vn-td>
+                        <td center shrink-date>{{::claim.created | date:'dd/MM/yyyy'}}</td>
-                <vn-td expand>
+                        <td>
                             <span
                                 vn-click-stop="workerDescriptor.show($event, claim.workerFk)"
                                 class="link" >
-                        {{::claim.userName}}
+                                {{::claim.workerName}}
                             </span>
-                </vn-td>
+                        </td>
-                <vn-td>
+                        <td>
                             <span class="chip {{::$ctrl.stateColor(claim)}}">
                                 {{::claim.description}}
                             </span>
-                </vn-td>
+                        </td>
-                <vn-td shrink>
+                        <td shrink>
                             <vn-icon-button
                                 vn-click-stop="$ctrl.preview(claim)"
                                 vn-tooltip="Preview"
                                 icon="preview">
                             </vn-icon-button>
-                </vn-td>
+                        </td>
-            </a>
+                    </tr>
-        </vn-tbody>
+                </tbody>
-    </vn-table>
+            </table>
+        </slot-table>
+    </smart-table>
 </vn-card>
-</vn-data-viewer>
 <vn-client-descriptor-popover
     vn-id="clientDescriptor">
 </vn-client-descriptor-popover>
@@ -62,6 +77,7 @@
 </vn-worker-descriptor-popover>
 <vn-popup vn-id="summary">
     <vn-claim-summary
-        claim="$ctrl.claimSelected">
+        claim="$ctrl.claimSelected"
+        parent-reload="$ctrl.reload()">
     </vn-claim-summary>
 </vn-popup>

modules/claim/front/index/index.js

@@ -1,7 +1,69 @@
 import ngModule from '../module';
 import Section from 'salix/components/section';
 
-export default class Controller extends Section {
+class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
+
+        this.smartTableOptions = {
+            activeButtons: {
+                search: true
+            },
+            columns: [
+                {
+                    field: 'clientFk',
+                    autocomplete: {
+                        url: 'Clients',
+                        showField: 'socialName',
+                        valueField: 'socialName'
+                    }
+                },
+                {
+                    field: 'workerFk',
+                    autocomplete: {
+                        url: 'Workers/activeWithInheritedRole',
+                        where: `{role: 'salesPerson'}`,
+                        searchFunction: '{firstName: $search}',
+                        showField: 'name',
+                        valueField: 'id',
+                    }
+                },
+                {
+                    field: 'claimStateFk',
+                    autocomplete: {
+                        url: 'ClaimStates',
+                        showField: 'description',
+                        valueField: 'id',
+                    }
+                },
+                {
+                    field: 'created',
+                    searchable: false
+                }
+            ]
+        };
+    }
+
+    exprBuilder(param, value) {
+        switch (param) {
+        case 'clientFk':
+            return {['cl.socialName']: value};
+        case 'id':
+        case 'workerFk':
+        case 'claimStateFk':
+        case 'priority':
+            return {[`cl.${param}`]: value};
+        case 'attenderFk':
+            return {'cl.workerFk': value};
+        case 'created':
+            value.setHours(0, 0, 0, 0);
+            to = new Date(value);
+            to.setHours(23, 59, 59, 999);
+
+            return {'cl.created': {between: [value, to]}};
+        }
+    }
+
     stateColor(claim) {
         switch (claim.description) {
         case 'Pendiente':

modules/claim/front/summary/index.html

@@ -12,6 +12,15 @@
             <vn-icon-button icon="launch"></vn-icon-button>
         </a>
         <span>{{::$ctrl.summary.claim.id}} - {{::$ctrl.summary.claim.client.name}}</span>
+        <vn-button-menu 
+            disabled="!$ctrl.isEditable"
+            class="message"
+            label="Change state"
+            value-field="id"
+            show-field="description"
+            url="claimStates"
+            on-change="$ctrl.changeState(value)">
+        </vn-button-menu>
     </h5>
     <vn-horizontal>
         <vn-one>

modules/claim/front/summary/index.js

@@ -13,6 +13,18 @@ class Controller extends Summary {
             this.getSummary();
     }
 
+    loadData() {
+        this.getSummary();
+    }
+
+    reload() {
+        if (this.card) {
+            console.log('CARD');
+            this.card.reload();
+        }
+        if (this.parentReload)
+            this.parentReload();
+    }
     get isSalesPerson() {
         return this.aclService.hasAny(['salesPerson']);
     }
@@ -29,8 +41,10 @@ class Controller extends Summary {
         this._claim = value;
 
         // Get DMS on summary load
-        if (value)
+        if (value) {
             this.$.$applyAsync(() => this.loadDms());
+            this.loadData();
+        }
     }
 
     loadDms() {
@@ -44,11 +58,29 @@ class Controller extends Summary {
         this.$http.get(`Claims/${this.claim.id}/getSummary`).then(response => {
             this.summary = response.data;
         });
+        this.$http.get(`Claims/${this.claim.id}/isEditable`).then(response => {
+            this.isEditable = response.data;
+        });
     }
 
     getImagePath(dmsId) {
         return this.vnFile.getPath(`/api/dms/${dmsId}/downloadFile`);
     }
+
+    changeState(value) {
+        const params = {
+            id: this.claim.id,
+            claimStateFk: value
+        };
+
+        this.$http.patch(`Claims/updateClaim/${this.claim.id}`, params)
+            .then(() => {
+                this.reload();
+            })
+            .then(() => {
+                this.vnApp.showSuccess(this.$t('Data saved!'));
+            });
+    }
 }
 
 Controller.$inject = ['$element', '$scope', 'vnFile'];
@@ -57,6 +89,11 @@ ngModule.vnComponent('vnClaimSummary', {
     template: require('./index.html'),
     controller: Controller,
     bindings: {
-        claim: '<'
+        claim: '<',
+        model: '<?',
+        parentReload: '&'
+    },
+    require: {
+        card: '?^vnClaimCard'
     }
 });

modules/claim/front/summary/index.spec.js

@@ -22,6 +22,7 @@ describe('Claim', () => {
             it('should perform a query to set summary', () => {
                 $httpBackend.expect('GET', `Claims/1/getSummary`).respond(200, 24);
                 controller.getSummary();
+                $httpBackend.expect('GET', `Claims/1/isEditable`).respond(200, true);
                 $httpBackend.flush();
 
                 expect(controller.summary).toEqual(24);