feat(front): interceptor getVersion from back

front/core/services/interceptor.js

@@ -30,11 +30,12 @@ function interceptor($q, vnApp, vnToken, $translate) {
         },
         response(response) {
             vnApp.popLoader();
+            localStorage.setItem('salix-version', response.headers('salix-version'));
             return response;
         },
         responseError(rejection) {
             vnApp.popLoader();
-            let err = new HttpError(rejection.statusText);
+            const err = new HttpError(rejection.statusText);
             Object.assign(err, rejection);
             return $q.reject(err);
         }

front/salix/components/layout/index.html

@@ -19,6 +19,14 @@
     </div>
     <vn-slot name="topbar"></vn-slot>
     <div class="side end">
+        <vn-icon-button
+            id="refresh"
+            icon="refresh"
+            ng-if="$ctrl.hasNewVersion"
+            ng-click="$ctrl.refresh()"
+            class="refresh"
+            translate-attr="{title: 'There is a new version, click here to reload'}">
+        </vn-icon-button>
         <vn-icon-button
             id="apps"
             icon="apps"
@@ -39,7 +47,6 @@
             translate-attr="{title: 'Account'}"
             on-error-src/>
         </button>
-       
     </div>
     <vn-menu vn-id="apps-menu">
         <vn-list class="modules-menu">

front/salix/components/layout/index.js

@@ -3,9 +3,11 @@ import Component from 'core/lib/component';
 import './style.scss';
 
 export class Layout extends Component {
-    constructor($element, $, vnModules) {
+    constructor($element, $, vnModules, $http) {
         super($element, $);
         this.modules = vnModules.get();
+        this.$http = $http;
+        this.versionInterval = setInterval(this.getVersion.bind(this), 1000);
     }
 
     $onInit() {
@@ -26,8 +28,23 @@ export class Layout extends Component {
         const token = this.vnToken.token;
         return `/api/Images/user/160x160/${userId}/download?access_token=${token}`;
     }
+
+    refresh() {
+        window.location.reload();
+    }
+
+    getVersion() {
+        const currentVersion = localStorage.getItem('salix-version');
+        this.$http.get('Applications/status').then(res => {
+            const newVersion = res.headers('salix-version');
+            if (newVersion != currentVersion) {
+                this.hasNewVersion = true;
+                clearInterval(this.versionInterval);
+            }
+        });
+    }
 }
-Layout.$inject = ['$element', '$scope', 'vnModules'];
+Layout.$inject = ['$element', '$scope', 'vnModules', '$http'];
 
 ngModule.vnComponent('vnLayout', {
     template: require('./index.html'),

front/salix/components/layout/index.spec.js

@@ -37,4 +37,17 @@ describe('Component vnLayout', () => {
             expect(url).not.toBeDefined();
         });
     });
+
+    describe('getVersion()', () => {
+        it('should detect if there is a new version', () => {
+            const frontVersion = '1';
+            localStorage.setItem('salix-version', frontVersion);
+
+            $httpBackend.when('GET', `Applications/status`).respond(200);
+            controller.getVersion();
+            $httpBackend.flush();
+
+            expect(controller.hasNewVersion).toEqual(true);
+        });
+    });
 });

front/salix/components/layout/style.scss

@@ -60,6 +60,9 @@ vn-layout {
             font-size: 1.05rem;
             padding: 0;
         }
+        .vn-icon-button.refresh {
+            color: $color-alert;
+        }
     }
     & > vn-side-menu > .menu {
         display: flex;

front/salix/locale/es.yml

@@ -17,6 +17,7 @@ Go to module summary: Ir a la vista previa del módulo
 Show summary: Mostrar vista previa
 What is new: Novedades de la versión
 Settings: Ajustes
+There is a new version, click here to reload: Hay una nueva versión, pulse aquí para recargar
 
 # Actions
 

loopback/server/middleware/salix-version.js

@@ -3,7 +3,7 @@ module.exports = function(options) {
     return function(req, res, next) {
         const packageJson = require('../../../package.json');
 
-        res.header('Salix-Version', packageJson.version);
+        res.set('Salix-Version', packageJson.version);
         next();
     };
 };