Merge pull request #2965 from coreshop/copilot/optimize-messenger-ui

[MessengerBundle] Add auto-refresh and chart tooltip

Author: dpfaffenbauer

src/CoreShop/Bundle/MessengerBundle/Resources/public/pimcore/js/list.js

@@ -20,6 +20,10 @@ coreshop.messenger.list = Class.create({
     messagesStore: null,
     failedMessagesStore: null,
 
+    autoRefreshInterval: null,
+    autoRefreshTimer: null,
+    lastRefreshLabel: null,
+
     initialize: function () {
         this.getPanel();
     },
@@ -36,8 +40,47 @@ coreshop.messenger.list = Class.create({
         }
     },
 
+    updateLastRefreshLabel: function () {
+        if (this.lastRefreshLabel) {
+            var now = new Date();
+            var timeString = Ext.Date.format(now, 'Y-m-d H:i:s');
+            this.lastRefreshLabel.setText(t('coreshop_messenger_last_refresh') + ': ' + timeString);
+        }
+    },
+
+    startAutoRefresh: function (interval) {
+        this.stopAutoRefresh();
+
+        if (interval > 0) {
+            this.autoRefreshInterval = interval;
+            this.autoRefreshTimer = setInterval(this.reload.bind(this), interval * 1000);
+        }
+    },
+
+    stopAutoRefresh: function () {
+        if (this.autoRefreshTimer) {
+            clearInterval(this.autoRefreshTimer);
+            this.autoRefreshTimer = null;
+        }
+        this.autoRefreshInterval = null;
+    },
+
     getPanel: function () {
         if (!this.panel) {
+            this.lastRefreshLabel = Ext.create('Ext.toolbar.TextItem', {
+                text: ''
+            });
+
+            var autoRefreshStore = Ext.create('Ext.data.Store', {
+                fields: ['value', 'text'],
+                data: [
+                    {value: 0, text: t('coreshop_messenger_auto_refresh_disabled')},
+                    {value: 5, text: t('coreshop_messenger_auto_refresh_5s')},
+                    {value: 10, text: t('coreshop_messenger_auto_refresh_10s')},
+                    {value: 30, text: t('coreshop_messenger_auto_refresh_30s')}
+                ]
+            });
+
             this.panel = Ext.create('Ext.panel.Panel', {
                 id: 'coreshop_messenger_list',
                 title: t('coreshop_messenger_list'),
@@ -49,7 +92,21 @@ coreshop.messenger.list = Class.create({
                     xtype: 'button',
                     iconCls: 'pimcore_icon_reload',
                     handler: this.reload.bind(this)
-                }],
+                }, '-', {
+                    xtype: 'combo',
+                    store: autoRefreshStore,
+                    displayField: 'text',
+                    valueField: 'value',
+                    value: 0,
+                    editable: false,
+                    width: 200,
+                    queryMode: 'local',
+                    listeners: {
+                        select: function (combo, record) {
+                            this.startAutoRefresh(record.get('value'));
+                        }.bind(this)
+                    }
+                }, '->', this.lastRefreshLabel],
                 items: [{
                     xtype: 'panel',
                     layout: 'border',
@@ -78,6 +135,7 @@ coreshop.messenger.list = Class.create({
             tabPanel.setActiveItem('coreshop_messenger_list');
 
             this.panel.on('destroy', function () {
+                this.stopAutoRefresh();
                 pimcore.globalmanager.remove('coreshop_messenger_list');
             }.bind(this));
 
@@ -98,7 +156,10 @@ coreshop.messenger.list = Class.create({
                     rootProperty: 'data'
                 }
             },
-            fields: ['name', 'count']
+            fields: ['receiver', 'count'],
+            listeners: {
+                load: this.updateLastRefreshLabel.bind(this)
+            }
         });
         this.chartStore.load();
 
@@ -117,16 +178,23 @@ coreshop.messenger.list = Class.create({
                 type: 'category',
                 position: 'bottom',
                 grid: true,
-                fields: ['receiver'],
+                fields: ['receiver']
             }],
             series: [{
                 type: 'bar',
                 title: 'Messages',
                 xField: 'receiver',
                 yField: 'count',
+                highlight: true,
                 label: {
                     field: 'count',
                     display: 'insideEnd'
+                },
+                tooltip: {
+                    trackMouse: true,
+                    renderer: function (tooltip, record) {
+                        tooltip.setHtml(record.get('receiver') + ': ' + record.get('count') + ' ' + t('coreshop_messenger_messages'));
+                    }
                 }
             }]
         };

src/CoreShop/Bundle/MessengerBundle/Resources/translations/admin.de.yml

@@ -10,4 +10,10 @@ coreshop_messenger_failed_messages: 'Fehlgeschlagene Nachrichten'
 coreshop_messenger_pending_messages: 'Ausstehende Nachrichten'
 coreshop_messenger_receivers: 'Empfänger'
 coreshop_messenger_info: 'Details'
-coreshop_permission_messenger: 'CoreShop: Messenger'
+coreshop_permission_messenger: 'CoreShop: Messenger'
+coreshop_messenger_last_refresh: 'Aktualisiert'
+coreshop_messenger_auto_refresh_disabled: 'Nicht aktualisieren'
+coreshop_messenger_auto_refresh_5s: 'Alle 5 Sekunden aktualisieren'
+coreshop_messenger_auto_refresh_10s: 'Alle 10 Sekunden aktualisieren'
+coreshop_messenger_auto_refresh_30s: 'Alle 30 Sekunden aktualisieren'
+coreshop_messenger_messages: 'Nachricht(en)'

src/CoreShop/Bundle/MessengerBundle/Resources/translations/admin.en.yml

@@ -10,4 +10,10 @@ coreshop_messenger_failed_messages: 'Failed Messages'
 coreshop_messenger_pending_messages: 'Pending Messages'
 coreshop_messenger_receivers: 'Receivers'
 coreshop_messenger_info: 'Details'
-coreshop_permission_messenger: 'CoreShop: Messenger'
+coreshop_permission_messenger: 'CoreShop: Messenger'
+coreshop_messenger_last_refresh: 'Refreshed'
+coreshop_messenger_auto_refresh_disabled: 'Do not refresh'
+coreshop_messenger_auto_refresh_5s: 'Refresh every 5 seconds'
+coreshop_messenger_auto_refresh_10s: 'Refresh every 10 seconds'
+coreshop_messenger_auto_refresh_30s: 'Refresh every 30 seconds'
+coreshop_messenger_messages: 'message(s)'