Deletion ammends and selection fixed

front/core/components/multi-check/multi-check.js

@@ -156,7 +156,7 @@ ngModule.vnComponent('vnMultiCheck', {
     controller: MultiCheck,
     bindings: {
         model: '<',
-        checkField: '<?',
+        checkField: '@?',
         checkAll: '=?',
         disabled: '<?'
     }

front/core/components/smart-table/index.html

@@ -8,7 +8,7 @@
 
             <div ng-transclude="actions"></div> <!-- transcluded actions -->
         </div>
-        <div class="actions">
+        <div class="actions-right">
             <vn-button icon="search"
                 ng-click="$ctrl.displaySearch()"
                 vn-tooltip="Search">
@@ -23,7 +23,8 @@
                     vn-tooltip="Undo">
                 </vn-button>
                 <vn-button icon="delete"
-                    ng-click="$ctrl.deleteAll()"
+                    ng-click="deleteConfirmation.show($event)"
+                    ng-show="$ctrl.checkedRows.length > 0"
                     vn-tooltip="Remove selected rows">
                 </vn-button>
                 <vn-button icon="save"
@@ -46,4 +47,17 @@
     </vn-horizontal>
 
     <div id="table"></div>
-</div>
+    <!-- Remove this in favour of data-viewer or replace it? -->
+    <vn-pagination
+        ng-if="$ctrl.model"
+        model="$ctrl.model"
+        class="vn-pt-md">
+    </vn-pagination>
+</div>
+
+<vn-confirm
+    vn-id="deleteConfirmation"
+    on-accept="$ctrl.deleteAll()"
+    question="Are you sure you want to continue?"
+    message="Remove selected rows">
+</vn-confirm>

front/core/components/smart-table/index.js

@@ -7,13 +7,9 @@ export default class SmartTable extends Component {
         super($element, $);
         this.$transclude = $transclude;
         this.sortCriteria = [];
+        this.autoSave = false;
     }
 
-    /*    $onDestroy() {
-        if (this.$contentScope)
-            this.$contentScope.$destroy();
-    }
- */
     get model() {
         return this._model;
     }
@@ -26,12 +22,19 @@ export default class SmartTable extends Component {
         }
     }
 
+    get checkedRows() {
+        const model = this.model;
+        if (model && model.data)
+            return model.data.filter(row => row.$checked);
+
+        return null;
+    }
+
     registerColumns() {
         const header = this.element.querySelector('thead > tr');
         if (!header) return;
         const columns = header.querySelectorAll('th');
 
-        // TODO: Add arrow icon and so on..
         // Click handler
         for (let column of columns) {
             const field = column.getAttribute('field');
@@ -96,17 +99,9 @@ export default class SmartTable extends Component {
     }
 
     deleteAll() {
-        const data = this.model.data;
-        const checkedRows = data.filter(row => row.checked);
-
-        for (let row of checkedRows) {
-            if (row.id)
-                this.model.remove(row);
-            else {
-                const index = this.model.data.indexOf(row);
-                this.model.data.splice(index, 1);
-            }
-        }
+        const rowsChecked = this.checkedRows();
+        for (let row of rowsChecked)
+            this.model.removeRow(row);
 
         if (this.autoSave)
             this.saveAll();
@@ -114,6 +109,7 @@ export default class SmartTable extends Component {
 
     saveAll() {
         const model = this.model;
+
         if (!model.isChanged)
             return this.vnApp.showError(this.$t('No changes to save'));
 

front/core/components/smart-table/locale/es.yml

@@ -0,0 +1,5 @@
+Remove selected rows: Eliminar líneas seleccionadas
+Add new row: Añadir nueva fila
+Undo: Deshacer
+Save data: Guardar datos
+Shown columns: Columnas visibles

front/core/components/smart-table/style.scss

@@ -34,19 +34,17 @@ smart-table {
         }
     }
 
-    .actions-left {
-        display: flex;
-        justify-content: flex-start;
+    tr[vn-anchor] {
+        @extend %clickable;
     }
 
-    .actions {
+    .actions-left, 
+    .actions-right {
         display: flex;
-        justify-content: flex-end;
 
         .button-group {
             display: flex;
             box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .3);
-            margin-left: 10px;
 
             & > vn-button {
                 box-shadow: 0 0 0 0
@@ -54,6 +52,28 @@ smart-table {
         }
     }
 
+    .actions-left {
+        justify-content: flex-start;
+        
+        slot-actions > vn-button,
+        & > vn-button,
+        .button-group {
+            margin-right: 10px
+        }
+
+        slot-actions {
+            display: flex
+        }
+    }
+
+    .actions-right {
+        justify-content: flex-end;
+        & > vn-button,
+        .button-group {
+            margin-left: 10px
+        }
+    }
+
     vn-tbody a[ng-repeat].vn-tr:focus {
         background-color: $color-primary-light
     }

modules/ticket/front/index/index.html

@@ -11,7 +11,21 @@
     <!-- To access table component should be a nested component -->
     <smart-table model="model" auto-save="true">
         <slot-actions>
-            Mas iconos..
+            <vn-button icon="info"
+                ng-click="$ctrl.test()"
+                vn-tooltip="Info">
+            </vn-button>
+
+            <div class="button-group">
+                <vn-button icon="info"
+                    ng-click="$ctrl.test()"
+                    vn-tooltip="Info">
+                </vn-button>
+                <vn-button icon="info"
+                    ng-click="$ctrl.test()"
+                    vn-tooltip="Info">
+                </vn-button>
+            </div>
         </slot-actions>
         <slot-table>
             <table class="vn-table">
@@ -19,7 +33,8 @@
                     <tr>
                         <th shrink>
                             <vn-multi-check 
-                                model="model">
+                                model="model"
+                                check-field="$checked"> <!-- Change $checked as default prop -->
                             </vn-multi-check>
                         </th>
                         <th field="id">
@@ -32,10 +47,14 @@
                 </thead>
                 <tbody>
                     <tr ng-repeat="ticket in model.data | orderBy:'!!id'"
-                        ng-class="{'new-row': ticket.$isNew, 'changed-row': ticket.$oldData}">
+                        ng-class="{'new-row': ticket.$isNew, 'changed-row': ticket.$oldData}"
+                        vn-anchor="::{
+                            state: 'ticket.card.summary', 
+                            params: {id: ticket.id}
+                        }">
                         <td>
                             <vn-check 
-                                ng-model="ticket.checked"
+                                ng-model="ticket.$checked"
                                 vn-click-stop>
                             </vn-check>
                         </td>