feat(UI): add reload button

frontend/fontello/config.json

@@ -15893,7 +15893,7 @@
       "css": "refresh",
       "code": 984144,
       "src": "custom_icons",
-      "selected": false,
+      "selected": true,
       "svg": {
         "path": "M736.3 263.7Q689.5 218.8 628.9 192.4T500 166Q410.2 166 333 210.9T210.9 333 166 500 210.9 667 333 789.1 500 834Q615.2 834 704.1 763.7T822.3 584H736.3Q709 656.3 644.5 703.1T500 750Q431.6 750 374 716.8T283.2 626 250 500 283.2 374 374 283.2 500 250Q550.8 250 595.7 269.5T675.8 324.2L541 459H834V166Z",
         "width": 1000

frontend/src/App.vue

@@ -13,6 +13,13 @@
         <navigation v-if="isMobile" :is-mobile="isMobile" :active-item="activeItem" :active-group="activeGroup"
           @toggleGroup="toggleGroup" @doLogout="doLogout" />
 
+        <b-navbar-item tag="a" href="#" @click.prevent="emitPageRefresh" data-cy="btn-reload"
+          :aria-label="$t('globals.buttons.reload')" class="refresh-btn">
+          <b-tooltip :label="$t('globals.buttons.reload')" type="is-dark" position="is-bottom">
+            <b-icon icon="refresh" :class="{ 'spin': isPageLoading }" />
+          </b-tooltip>
+        </b-navbar-item>
+
         <b-navbar-dropdown class="user" tag="div" right>
           <template v-if="profile.username" #label>
             <span class="user-avatar">
@@ -144,6 +151,10 @@ export default Vue.extend({
       this.activeGroup = state ? { [group]: true } : {};
     },
 
+    emitPageRefresh() {
+      this.$root.$emit('page.refresh');
+    },
+
     reloadApp() {
       this.$api.reloadApp().then(() => {
         this.$utils.toast('Reloading app ...');
@@ -185,7 +196,12 @@ export default Vue.extend({
   },
 
   computed: {
-    ...mapState(['serverConfig', 'profile']),
+    ...mapState(['serverConfig', 'profile', 'loading']),
+
+    isPageLoading() {
+      // Check if any model is currently loading
+      return Object.values(this.loading).some((v) => v === true);
+    },
 
     isGlobalNotices() {
       return (this.serverConfig.needs_restart

frontend/src/assets/icons/fontello.css

@@ -118,5 +118,6 @@
 .mdi-warning-empty:before { content: '\e827'; } /* '' */
 .mdi-account-outline:before { content: '󰀓'; } /* '\f0013' */
 .mdi-code:before { content: '󰅩'; } /* '\f0169' */
+.mdi-refresh:before { content: '󰑐'; } /* '\f0450' */
 .mdi-logout-variant:before { content: '󰗽'; } /* '\f05fd' */
 .mdi-wrench-outline:before { content: '󰯠'; } /* '\f0be0' */

frontend/src/assets/style.scss

@@ -1372,3 +1372,33 @@ th.role-toggle-select a {
     width: auto;
   }
 }
+
+/* Reload button spin animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+.btn-reload {
+  margin-left: 0.5rem;
+
+  .icon {
+    transition: transform 0.2s ease;
+  }
+
+  &:hover .icon {
+    transform: rotate(30deg);
+  }
+
+  &.is-loading .icon {
+    animation: spin 1s linear infinite;
+  }
+}

frontend/src/views/Bounces.vue

@@ -213,6 +213,14 @@ export default Vue.extend({
     },
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.getBounces);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.getBounces);
+  },
+
   mounted() {
     if (this.$route.query.campaign_id) {
       this.queryParams.campaign_id = parseInt(this.$route.query.campaign_id, 10);

frontend/src/views/Campaigns.vue

@@ -37,6 +37,7 @@
             </form>
           </div>
         </div>
+
         <div class="actions" v-if="bulk.checked.length > 0">
           <a class="a" href="#" @click.prevent="deleteCampaigns" data-cy="btn-delete-campaigns">
             <b-icon icon="trash-can-outline" size="is-small" /> Delete
@@ -531,12 +532,17 @@ export default Vue.extend({
     },
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.getCampaigns);
+  },
+
   mounted() {
     this.getCampaigns();
     this.pollStats();
   },
 
   destroyed() {
+    this.$root.$off('page.refresh', this.getCampaigns);
     clearInterval(this.pollID);
   },
 });

frontend/src/views/Dashboard.vue

@@ -176,6 +176,22 @@ export default Vue.extend({
   },
 
   methods: {
+    fetchData() {
+      this.isCountsLoading = true;
+      this.isChartsLoading = true;
+
+      this.$api.getDashboardCounts().then((data) => {
+        this.counts = data;
+        this.isCountsLoading = false;
+      });
+
+      this.$api.getDashboardCharts().then((data) => {
+        this.isChartsLoading = false;
+        this.campaignViews = this.makeChart(data.campaignViews);
+        this.campaignClicks = this.makeChart(data.linkClicks);
+      });
+    },
+
     makeChart(data) {
       if (data.length === 0) {
         return {};
@@ -202,19 +218,16 @@ export default Vue.extend({
     },
   },
 
-  mounted() {
-    // Pull the counts.
-    this.$api.getDashboardCounts().then((data) => {
-      this.counts = data;
-      this.isCountsLoading = false;
-    });
+  created() {
+    this.$root.$on('page.refresh', this.fetchData);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.fetchData);
+  },
 
-    // Pull the charts.
-    this.$api.getDashboardCharts().then((data) => {
-      this.isChartsLoading = false;
-      this.campaignViews = this.makeChart(data.campaignViews);
-      this.campaignClicks = this.makeChart(data.linkClicks);
-    });
+  mounted() {
+    this.fetchData();
   },
 });
 </script>

frontend/src/views/Lists.vue

@@ -363,6 +363,14 @@ export default Vue.extend({
     },
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.getLists);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.getLists);
+  },
+
   mounted() {
     if (this.$route.params.id) {
       this.$api.getList(parseInt(this.$route.params.id, 10)).then((data) => {

frontend/src/views/Media.vue

@@ -223,6 +223,14 @@ export default Vue.extend({
     },
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.getMedia);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.getMedia);
+  },
+
   mounted() {
     this.$api.getMedia();
 

frontend/src/views/Subscribers.vue

@@ -525,6 +525,14 @@ export default Vue.extend({
     },
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.querySubscribers);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.querySubscribers);
+  },
+
   mounted() {
     if (this.$route.params.listID) {
       this.queryParams.listID = parseInt(this.$route.params.listID, 10);

frontend/src/views/Templates.vue

@@ -120,6 +120,7 @@ import Vue from 'vue';
 import { mapState } from 'vuex';
 import CampaignPreview from '../components/CampaignPreview.vue';
 import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
+
 import TemplateForm from './TemplateForm.vue';
 
 export default Vue.extend({
@@ -139,6 +140,10 @@ export default Vue.extend({
   },
 
   methods: {
+    fetchTemplates() {
+      this.$api.getTemplates();
+    },
+
     // Show the edit form.
     showEditForm(data) {
       this.curItem = data;
@@ -199,6 +204,14 @@ export default Vue.extend({
     ...mapState(['templates', 'loading']),
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.fetchTemplates);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.fetchTemplates);
+  },
+
   mounted() {
     this.$api.getTemplates();
   },

frontend/src/views/Users.vue

@@ -132,6 +132,7 @@
 import Vue from 'vue';
 import { mapState } from 'vuex';
 import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
+
 import UserForm from './UserForm.vue';
 
 export default Vue.extend({
@@ -222,6 +223,14 @@ export default Vue.extend({
     ...mapState(['loading', 'settings']),
   },
 
+  created() {
+    this.$root.$on('page.refresh', this.getUsers);
+  },
+
+  destroyed() {
+    this.$root.$off('page.refresh', this.getUsers);
+  },
+
   mounted() {
     if (this.$route.params.id) {
       this.$api.getUser(parseInt(this.$route.params.id, 10)).then((data) => {

i18n/bg.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Запазване",
     "globals.buttons.saveChanges": "Запазване на промените",
     "globals.buttons.toggleSelect": "Превключване на избора",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Преглед",
     "globals.days.0": "Нед",
     "globals.days.1": "Нед",

i18n/ca.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Desa",
     "globals.buttons.saveChanges": "Desa els canvis",
     "globals.buttons.toggleSelect": "Alternar selecció",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Visualitzar",
     "globals.days.0": "dg.",
     "globals.days.1": "dg.",

i18n/cs-cz.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Uložit",
     "globals.buttons.saveChanges": "Uložit změny",
     "globals.buttons.toggleSelect": "Přepnout výběr",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Zobrazit",
     "globals.days.0": "Ne",
     "globals.days.1": "Ne",

i18n/cy.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Cadw",
     "globals.buttons.saveChanges": "Cadw'r newidiadau",
     "globals.buttons.toggleSelect": "Toglo dewis",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Ymddangos",
     "globals.days.0": "Sul",
     "globals.days.1": "Sul",

i18n/da.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Spare",
     "globals.buttons.saveChanges": "Gem ændringer",
     "globals.buttons.toggleSelect": "Skift markering",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Vis",
     "globals.days.0": "Søn",
     "globals.days.1": "Søn",

i18n/de.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Speichern",
     "globals.buttons.saveChanges": "Änderungen speichern",
     "globals.buttons.toggleSelect": "Auswahl umschalten",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Anzeigen",
     "globals.days.0": "So",
     "globals.days.1": "So",

i18n/el.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Αποθήκευση",
     "globals.buttons.saveChanges": "Αποθήκευση αλλαγών",
     "globals.buttons.toggleSelect": "Εναλλαγή επιλογής",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Προβολή",
     "globals.days.0": "Κυρ",
     "globals.days.1": "Κυρ",

i18n/en.json

@@ -161,6 +161,7 @@
     "globals.buttons.save": "Save",
     "globals.buttons.saveChanges": "Save changes",
     "globals.buttons.toggleSelect": "Toggle selection",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "View",
     "globals.days.0": "Sun",
     "globals.days.1": "Sun",

i18n/eo.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Desa",
     "globals.buttons.saveChanges": "Desa els canvis",
     "globals.buttons.toggleSelect": "Aktivigi/Dezaktivigi elektejon",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Visualitzar",
     "globals.days.0": "dg.",
     "globals.days.1": "dg.",

i18n/es.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Guardar",
     "globals.buttons.saveChanges": "Guardar cambios",
     "globals.buttons.toggleSelect": "Alternar selección",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Ver",
     "globals.days.0": "Dom",
     "globals.days.1": "Dom",

i18n/fi.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Tallenna",
     "globals.buttons.saveChanges": "Tallenna muutokset",
     "globals.buttons.toggleSelect": "Vaihda valinta",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Näytä",
     "globals.days.0": "Su",
     "globals.days.1": "Su",

i18n/fr-CA.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Enregistrer",
     "globals.buttons.saveChanges": "Enregistrer les changements",
     "globals.buttons.toggleSelect": "Basculer la sélection",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Voir",
     "globals.days.0": "Dim",
     "globals.days.1": "Dim",

i18n/fr.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "Enregistrer",
     "globals.buttons.saveChanges": "Enregistrer les changements",
     "globals.buttons.toggleSelect": "Basculer la sélection",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "Voir",
     "globals.days.0": "Dim",
     "globals.days.1": "Dim",

i18n/he.json

@@ -163,6 +163,7 @@
     "globals.buttons.save": "שמירה",
     "globals.buttons.saveChanges": "שמור שינויים",
     "globals.buttons.toggleSelect": "החלף בחירה",
+    "globals.buttons.reload": "Reload",
     "globals.buttons.view": "צפה",
     "globals.days.0": "ראשון",
     "globals.days.1": "ראשון",