#1128 User view directive first version

back/methods/user-config-view/getConfig.js

@@ -0,0 +1,32 @@
+module.exports = function(Self) {
+    Self.remoteMethodCtx('getConfig', {
+        description: 'returns the information from UserConfig model for the active user',
+        accepts: [
+            {
+                arg: 'ctx',
+                type: 'Object',
+                http: {source: 'context'}
+            }, {
+                arg: 'tableCode',
+                type: 'String',
+                description: `Code of the table you ask its configuration`
+            }
+        ],
+        returns: {
+            type: 'object',
+            root: true
+        },
+        http: {
+            path: `/getConfig`,
+            verb: 'get'
+        }
+    });
+
+    Self.getConfig = async ctx => {
+        let userView = await Self.app.models.UserConfigView.findOne({
+            where: {tableCode: ctx.args.tableCode, userFk: ctx.req.accessToken.userId}
+        });
+
+        return userView;
+    };
+};

back/methods/user-config-view/save.js

@@ -0,0 +1,34 @@
+module.exports = function(Self) {
+    Self.remoteMethodCtx('save', {
+        description: 'returns the information from UserConfig model for the active user',
+        accepts: [{
+            arg: 'config',
+            type: 'Object',
+            required: true,
+            description: `Code of the table you ask its configuration`,
+            http: {source: 'body'}
+        }
+        ],
+        returns: {
+            type: 'object',
+            root: true
+        },
+        http: {
+            path: `/save`,
+            verb: 'post'
+        }
+    });
+
+    Self.save = async(ctx, config) => {
+        let userView = await Self.app.models.UserConfigView.findOne({
+            where: {tableCode: config.tableCode, userFk: ctx.req.accessToken.userId}
+        });
+
+        if (userView)
+            return userView.updateAttributes(config);
+
+        config.userFk = ctx.req.accessToken.userId;
+
+        return await Self.app.models.UserConfigView.create(config);
+    };
+};

back/models/user-config-view.js

@@ -0,0 +1,4 @@
+module.exports = Self => {
+    require('../methods/user-config-view/getConfig')(Self);
+    require('../methods/user-config-view/save')(Self);
+};

back/models/user-config-view.json

@@ -9,7 +9,10 @@
     "properties": {
         "id": {
             "id": true,
-            "type": "Number",
+            "type": "Number"
+        },
+        "userFk": {
+            "type": "String",
             "required": true
         },
         "tableCode": {
@@ -17,7 +20,7 @@
             "required": true
         },
         "configuration": {
-            "type": "String"
+            "type": "Object"
         }
     },
     "relations": {

front/core/components/table/index.html

@@ -1,4 +1,4 @@
-<div>
+<div class="table">
     <vn-empty-rows ng-if="$ctrl.model && !$ctrl.model.data" translate>
         Enter a new search
     </vn-empty-rows>

front/core/components/table/index.js

@@ -10,7 +10,7 @@ export default class Table {
         this.autoLoad = true;
 
         $transclude($scope.$parent, clone => {
-            angular.element($element[0].querySelector('div')).append(clone);
+            angular.element($element[0].querySelector('.table')).append(clone);
         });
     }
 

front/core/directives/index.js

@@ -10,3 +10,4 @@ import './visible-by';
 import './bind';
 import './repeat-last';
 import './title';
+import './uvc';

front/core/directives/uvc.html

@@ -0,0 +1,30 @@
+<div style="position: relative;">
+    <div style="position: absolute; top: 0; left: 0; padding: .5em; z-index: 1">
+        <vn-icon-button
+            icon="menu"
+            style="font-size: .4em;"
+            ng-click="$ctrl.showUvc($event)">
+        </vn-icon-button>
+        <vn-dialog
+            class="modal-form"
+            vn-id="uvc">
+            <tpl-body>
+                <vn-horizontal pad-medium class="header">
+                    <h5><span translate>Fields to show</span></h5>
+                </vn-horizontal>
+                <div pad-medium>
+                    <vn-horizontal ng-repeat="field in fields">
+                        <vn-check
+                            vn-one label="{{field}}"
+                            field="tableConfiguration.configuration[field]">
+                        </vn-check> 
+                    </vn-horizontal>
+                    <vn-button 
+                        label="Save" 
+                        ng-click="$ctrl.saveConfiguration(tableConfiguration)">
+                    </vn-button>
+                </div>
+            </tpl-body>
+        </vn-dialog>
+    </div>
+</div>

front/core/directives/uvc.js

@@ -0,0 +1,95 @@
+import ngModule from '../module';
+import template from './uvc.html';
+
+directive.$inject = ['$http', '$compile', 'vnApp', '$translate'];
+export function directive($http, $compile, vnApp, $translate) {
+    function getHeaderList($element, $scope) {
+        let allHeaders = $element[0].querySelectorAll(`vn-th[field], vn-th[th-id]`);
+        let headerList = Array.from(allHeaders);
+        let ids = [];
+
+        headerList.forEach(header => {
+            ids.push(header.getAttribute('th-id') || header.getAttribute('field'));
+        });
+
+        $scope.fields = ids;
+
+        return headerList;
+    }
+
+    function getTableConfig(tableCode) {
+        return $http.get(`/api/UserConfigViews/getConfig?tableCode=${tableCode}`);
+    }
+
+    function createViewConfig(config, fields) {
+        fields.forEach(field => {
+            if (config.configuration[field] == null)
+                config.configuration[field] = true;
+        });
+    }
+
+    function addHideClass($scope, headerList, userConfig) {
+        let selectors = [];
+        Object.keys(userConfig.configuration).forEach(key => {
+            let index;
+            if (userConfig.configuration[key] === false) {
+                index = headerList.findIndex(el => {
+                    return (el.getAttribute('th-id') == key || el.getAttribute('field') == key);
+                });
+
+                let baseSelector = `vn-table[vn-uvc=${userConfig.tableCode}] > div`;
+                selectors.push(`${baseSelector} vn-thead > vn-tr > vn-th:nth-child(${index + 1})`);
+                selectors.push(`${baseSelector} vn-tbody > vn-tr > vn-td:nth-child(${index + 1})`);
+                selectors.push(`${baseSelector} vn-tbody > .vn-tr > vn-td:nth-child(${index + 1})`);
+            }
+        });
+
+        let rule = selectors.join(', ') + '{display: none;}';
+        if ($scope.css)
+            document.head.removeChild($scope.css);
+
+        $scope.css = document.createElement('style');
+        document.head.appendChild($scope.css);
+        $scope.css.appendChild(document.createTextNode(rule));
+    }
+
+    function saveConfiguration(tableConfiguration) {
+        tableConfiguration.configuration = JSON.parse(JSON.stringify(tableConfiguration.configuration));
+        return $http.post(`/api/UserConfigViews/save`, tableConfiguration);
+    }
+
+    return {
+        restrict: 'A',
+        link: async function($scope, $element, $attrs) {
+            let cTemplate = $compile(template)($scope)[0];
+            $scope.$ctrl.showUvc = event => {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                $scope.uvc.show();
+            };
+
+            let tableCode = $attrs.vnUvc.trim();
+            let headerList = getHeaderList($element, $scope);
+
+            let defaultConfigView = {tableCode: tableCode, configuration: {}};
+            let userView = await getTableConfig(tableCode);
+            let config = userView.data || defaultConfigView;
+
+            $scope.tableConfiguration = config;
+            createViewConfig(config, $scope.fields);
+
+            addHideClass($scope, headerList, config);
+
+            let table = document.querySelector(`vn-table[vn-uvc=${tableCode}]`);
+
+            table.insertBefore(cTemplate, table.firstChild);
+            $scope.$ctrl.saveConfiguration = async tableConfiguration => {
+                let newConfig = await saveConfiguration(tableConfiguration);
+                vnApp.showSuccess($translate.instant('Data saved!'));
+                addHideClass($scope, headerList, newConfig.data);
+                $scope.uvc.hide();
+            };
+        }
+    };
+}
+ngModule.directive('vnUvc', directive);

front/core/locale/es.yml

@@ -39,3 +39,4 @@ November: Noviembre
 December: Diciembre
 Has delivery: Hay reparto
 Loading: Cargando
+Fields to show: Campos a mostrar