Simplified to one component

front/core/components/index.js

@@ -52,4 +52,4 @@ import './wday-picker';
 import './datalist';
 import './contextmenu';
 import './rating';
-import './smart-table-menu';
+import './smart-table';

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

@@ -1,53 +0,0 @@
-import ngModule from '../../module';
-import Component from '../../lib/component';
-import './style.scss';
-
-export default class SmartTableMenu extends Component {
-    constructor($element, $, $transclude) {
-        super($element, $);
-        this.$transclude = $transclude;
-        // stuff
-    }
-
-    $onDestroy() {
-        if (this.$contentScope)
-            this.$contentScope.$destroy();
-    }
-
-    get model() {
-        return this._model;
-    }
-
-    set model(value) {
-        this._model = value;
-        if (value)
-            this.transclude();
-    }
-
-    transclude() {
-        const body = this.element.querySelector('.body');
-        this.$transclude(($clone, $scope) => {
-            this.$contentScope = $scope;
-            $scope.model = this.model;
-            body.appendChild($clone[0]);
-        }, null, 'body');
-    }
-
-    save() {
-        this.model.save()
-            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
-    }
-}
-
-SmartTableMenu.$inject = ['$element', '$scope', '$transclude'];
-
-ngModule.vnComponent('smartTableMenu', {
-    template: require('./index.html'),
-    controller: SmartTableMenu,
-    transclude: {
-        body: '?slotBody'
-    },
-    bindings: {
-        model: '<?'
-    }
-});

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

@@ -1,28 +1,33 @@
 <div class="vn-pa-md">
-    <div></div> <!-- transcluded actions -->
     <vn-horizontal>
         <div class="actions-left">
             <vn-button icon="view_column"
-                ng-click="$broadcast('displaySearch')"
+                ng-click="$ctrl.shownColumns()"
                 vn-tooltip="Shown columns">
             </vn-button>
+
+            <div ng-transclude="actions"></div> <!-- transcluded actions -->
         </div>
         <div class="actions">
             <vn-button icon="search"
-                ng-click="$broadcast('displaySearch')"
+                ng-click="$ctrl.displaySearch()"
                 vn-tooltip="Search">
             </vn-button>
             <div class="button-group">
                 <vn-button icon="add"
-                    ng-click="$broadcast('addRow')"
+                    ng-click="$ctrl.createRow()"
                     vn-tooltip="Add new row">
                 </vn-button>
+                <vn-button icon="undo"
+                    ng-click="$ctrl.model.undoChanges()"
+                    vn-tooltip="Undo">
+                </vn-button>
                 <vn-button icon="delete"
-                    ng-click="$broadcast('addRow')"
+                    ng-click="$ctrl.deleteAll('addRow')"
                     vn-tooltip="Remove selected rows">
                 </vn-button>
                 <vn-button icon="save"
-                    ng-click="$ctrl.save()"
+                    ng-click="$ctrl.saveAll()"
                     vn-tooltip="Save data">
                 </vn-button>
             </div>
@@ -40,5 +45,5 @@
         </div>
     </vn-horizontal>
 
-    <div class="body"></div>
+    <div id="table"></div>
 </div>

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

@@ -0,0 +1,102 @@
+import ngModule from '../../module';
+import Component from '../../lib/component';
+import './style.scss';
+
+export default class SmartTable extends Component {
+    constructor($element, $, $transclude) {
+        super($element, $);
+        this.$transclude = $transclude;
+        // stuff
+    }
+
+    /*    $onDestroy() {
+        if (this.$contentScope)
+            this.$contentScope.$destroy();
+    }
+ */
+    get model() {
+        return this._model;
+    }
+
+    set model(value) {
+        this._model = value;
+        if (value) {
+            this.$.model = value;
+            this.transclude();
+        }
+    }
+
+    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');
+            if (field)
+                column.addEventListener('click', () => this.orderHandler(column));
+        }
+    }
+
+    // Creo que se puede hacer directamente desde ng-transclude
+    transclude() {
+        const slotTable = this.element.querySelector('#table');
+        this.$transclude(($clone, $scope) => {
+            const table = $clone[0];
+            $scope.hasChanges = this.hasChanges;
+            slotTable.appendChild(table);
+            this.registerColumns();
+        }, null, 'table');
+    }
+
+    orderHandler(element) {
+        const field = element.getAttribute('field');
+        console.log(`You clicked to ` + field);
+    }
+
+    createRow() {
+        this.model.insert({
+            nickname: 'New row'
+        });
+    }
+
+    deleteAll() {
+        const data = this.model.data;
+        const checkedRows = data.filter(row => row.checked);
+        for (let row of checkedRows)
+            this.model.remove(row);
+
+        if (this.autoSave)
+            this.save();
+    }
+
+    saveAll() {
+        const model = this.model;
+        if (!model.isChanged)
+            return this.vnApp.showError(this.$t('No changes to save'));
+
+        this.model.save()
+            .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
+    }
+
+    hasChanges() {
+        return true;
+    }
+}
+
+SmartTable.$inject = ['$element', '$scope', '$transclude'];
+
+ngModule.vnComponent('smartTable', {
+    template: require('./index.html'),
+    controller: SmartTable,
+    transclude: {
+        table: '?slotTable',
+        actions: '?slotActions'
+    },
+    bindings: {
+        model: '<?',
+        autoSave: '<?'
+    }
+});

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

@@ -1,7 +1,7 @@
 @import "effects";
 @import "variables";
 
-smart-table-menu {
+smart-table {
     .actions-left {
         display: flex;
         justify-content: flex-start;
@@ -21,4 +21,16 @@ smart-table-menu {
             }
         }
     }
+
+    vn-tbody a[ng-repeat].vn-tr:focus {
+        background-color: $color-primary-light
+    }
+
+    .new-row {
+        background-color: $color-success-light
+    }
+
+    .changed-row {
+        background-color: $color-primary-light
+    }
 }

front/core/directives/smart-table2.js

@@ -45,7 +45,7 @@ class Controller extends Component {
 }
 Controller.$inject = ['$element', '$scope', '$attrs'];
 
-ngModule.directive('smartTable', () => {
+ngModule.directive('smartTable2', () => {
     return {
         controller: Controller,
         bindings: {

modules/ticket/front/index/index.html

@@ -1,27 +1,48 @@
-<vn-auto-search
+<!-- <vn-auto-search
     model="model">
-</vn-auto-search>
+</vn-auto-search> -->
+<vn-crud-model auto-load="true"
+    vn-id="model"
+    url="Tickets"
+    limit="20"
+    order="id DESC">
+</vn-crud-model>
 <vn-card>
     <!-- To access table component should be a nested component -->
-    <smart-table-menu vn-id="smart-menu" model="model">
-        <slot-body>
-            <table class="vn-table" smart-table>
+    <smart-table model="model" auto-save="true">
+        <slot-actions>
+            Mas iconos..
+        </slot-actions>
+        <slot-table>
+            <table class="vn-table">
                 <thead>
                     <tr>
-                        <th field="myfield1">Column 1</th>
-                        <th field="myfield2">Column 2</th>
+                        <th shrink>
+                            <vn-multi-check 
+                                model="model">
+                            </vn-multi-check>
+                        </th>
+                        <th field="myfield1" translate>ID</th>
+                        <th field="myfield2" translate>Nickname</th>
                     </tr>
                 </thead>
-                <tbody ng-repeat="ticket in model.data">
-                    <tr>
+                <tbody>
+                    <tr ng-repeat="ticket in model.data | orderBy:'!!id'"
+                        ng-class="{'new-row': ticket.$isNew, 'changed-row': ticket.$oldData}">
+                        <td>
+                            <vn-check 
+                                ng-model="ticket.checked"
+                                vn-click-stop>
+                            </vn-check>
+                        </td>
                         <td>{{::ticket.id}}</td>
-                        <td>{{::ticket.userName}}</td>
+                        <td>{{::ticket.nickname}}</td>
+                        <td><vn-textfield ng-model="::ticket.nickname"></td>
                     </tr>
                 </tbody>
             </table>
-        </slot-body>
-    </smart-table-menu>
-    
+        </slot-table>
+    </smart-table>
 </vn-card>
 <div fixed-bottom-right>
     <vn-vertical style="align-items: center;">