feat(monitors): added auto-refresh feature to ticket monitors

modules/monitor/front/index/index.html

@@ -1,4 +1,4 @@
-<vn-horizontal>
+<vn-horizontal ng-class="{'hidden': $ctrl.isTopPanelHidden}">
     <vn-monitor-sales-clients class="vn-mb-sm"></vn-monitor-sales-clients>
     <vn-monitor-sales-orders></vn-monitor-sales-orders>
 </vn-horizontal>

modules/monitor/front/index/index.js

@@ -3,14 +3,25 @@ import Section from 'salix/components/section';
 import './style.scss';
 
 export default class Controller extends Section {
+    constructor($element, $) {
+        super($element, $);
+
+        const isTopPanelHidden = localStorage.getItem('ticketTopPanelHidden');
+        if (isTopPanelHidden === 'true')
+            this.isTopPanelHidden = true;
+    }
+
     toggle() {
         const monitor = this.element.querySelector('vn-horizontal');
         const isHidden = monitor.classList.contains('hidden');
 
-        if (!isHidden)
+        if (!isHidden) {
             monitor.classList.add('hidden');
-        else
+            localStorage.setItem('ticketTopPanelHidden', true);
+        } else {
             monitor.classList.remove('hidden');
+            localStorage.setItem('ticketTopPanelHidden', false);
+        }
     }
 }
 

modules/monitor/front/index/index.spec.js

@@ -0,0 +1,38 @@
+import './index.js';
+describe('Component vnMonitorIndex', () => {
+    let controller;
+    let $element;
+
+    beforeEach(ngModule('monitor'));
+
+    beforeEach(inject(($compile, $rootScope) => {
+        $element = $compile('<vn-monitor-index></vn-monitor-index>')($rootScope);
+        controller = $element.controller('vnMonitorIndex');
+    }));
+
+    describe('toggle()', () => {
+        it('should add the hidden class to the horizontal contaning the panel to hide', () => {
+            controller.toggle();
+
+            const targetElement = $element[0].querySelector('vn-horizontal');
+            const firstClass = targetElement.classList[0];
+
+            const isTopPanelHidden = localStorage.getItem('ticketTopPanelHidden');
+
+            expect(firstClass).toEqual('hidden');
+            expect(isTopPanelHidden).toEqual('true');
+        });
+
+        it('should remove the hidden class to the horizontal contaning the panel to hide', () => {
+            const targetElement = $element[0].querySelector('vn-horizontal');
+            targetElement.classList.add('hidden');
+            controller.toggle();
+            const firstClass = targetElement.classList[0];
+
+            const isTopPanelHidden = localStorage.getItem('ticketTopPanelHidden');
+
+            expect(firstClass).toBeUndefined();
+            expect(isTopPanelHidden).toEqual('false');
+        });
+    });
+});

modules/monitor/front/index/locale/es.yml

@@ -8,4 +8,6 @@ Component lack: Faltan componentes
 Minimize/Maximize: Minimizar/Maximizar
 Problems: Problemas
 Theoretical: Teórica
-Practical: Práctica
+Practical: Práctica
+Auto-refresh: Auto-refresco
+Toggle auto-refresh every 2 minutes: Conmuta el refresco automático cada 2 minutos

modules/monitor/front/index/tickets/index.html

@@ -22,6 +22,11 @@
         Tickets monitor
     </vn-one> 
     <vn-none>
+        <vn-check
+            label="Auto-refresh"
+            vn-tooltip="Toggle auto-refresh every 2 minutes"
+            on-change="$ctrl.autoRefresh(value)">
+        </vn-check>
         <vn-icon
             icon="refresh"
             vn-tooltip="Refresh"

modules/monitor/front/index/tickets/index.js

@@ -95,6 +95,15 @@ export default class Controller extends Section {
         this.selectedTicket = ticket;
         this.$.summary.show();
     }
+
+    autoRefresh(value) {
+        if (value)
+            this.refreshTimer = setInterval(() => this.$.model.refresh(), 120000);
+        else {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
+        }
+    }
 }
 
 ngModule.vnComponent('vnMonitorSalesTickets', {