From 5cdd3587315e4c1e3667082b8b5d9dae9eaa7a10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Fri, 27 Sep 2019 16:53:48 +0200
Subject: [PATCH] Implement click update again, because of mobile has no hover

But I prevent multiple triggered updates for 10 seconds.
---
 .../NotificationMenu/NotificationMenu.vue     | 28 ++++++++++++++++---
 webapp/constants/notifications.js             |  1 +
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
index 4708a687a..5c24a82f3 100644
--- a/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/notifications/NotificationMenu/NotificationMenu.vue
@@ -1,8 +1,14 @@
 <template>
   <div @mouseover="hoverUpdate" @mouseleave="hover = false">
-    <ds-button v-if="totalNotificationsCount === 0" class="notifications-menu" disabled icon="bell">
-      {{ unreadNotificationsCount }}
-    </ds-button>
+    <div
+      v-if="totalNotificationsCount === 0"
+      class="notifications-menu-pointer"
+      @click.prevent="updateNotifications"
+    >
+      <ds-button class="notifications-menu" disabled icon="bell">
+        {{ unreadNotificationsCount }}
+      </ds-button>
+    </div>
     <dropdown v-else class="notifications-menu" :placement="placement">
       <template slot="default" slot-scope="{ toggleMenu }">
         <ds-button primary icon="bell" @click.prevent="callToggleMenu(toggleMenu)">
@@ -24,6 +30,7 @@ import {
   NOTIFICATIONS_POLL_INTERVAL,
   NOTIFICATIONS_CHECK_UPDATED_INTERVAL,
   NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL,
+  NOTIFICATIONS_UPDATE_PAUSE_INTERVAL,
 } from '~/constants/notifications'
 import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 import NotificationList from '../NotificationList/NotificationList'
@@ -39,6 +46,7 @@ export default {
       displayedNotifications: [],
       notifications: [],
       updateOn: false,
+      updatePause: false,
       menuDelayTicks: 0,
       menuTimerId: null,
       hover: false,
@@ -49,7 +57,7 @@ export default {
   },
   methods: {
     updateNotifications() {
-      if (this.updateOn) return
+      if (this.updateOn || this.updatePause) return
 
       this.updateOn = true
       this.$apollo.queries.notifications.refetch()
@@ -81,6 +89,7 @@ export default {
     callToggleMenu(toggleMenu) {
       if (this.menuTimerId) return
 
+      this.updateNotifications() // then the update works even on mobile by click and without hover
       // open menu after update is done, but latest after delay of "NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL"
       this.menuDelayTicks = 0
       this.menuTimerId = setInterval(() => {
@@ -131,6 +140,13 @@ export default {
               : -1
           })
         this.updateOn = false
+
+        // pause before next triggered update by "updateNotifications"
+        this.updatePause = true
+        setTimeout(() => {
+          this.updatePause = false
+        }, NOTIFICATIONS_UPDATE_PAUSE_INTERVAL)
+
         return data.notifications
       },
       error(error) {
@@ -147,6 +163,10 @@ export default {
   align-items: center;
 }
 
+.notifications-menu-pointer {
+  cursor: pointer;
+}
+
 .notifications-menu-popover {
   max-width: 500px;
 }
diff --git a/webapp/constants/notifications.js b/webapp/constants/notifications.js
index 771abd9e1..38c8bdf63 100644
--- a/webapp/constants/notifications.js
+++ b/webapp/constants/notifications.js
@@ -1,3 +1,4 @@
 export const NOTIFICATIONS_POLL_INTERVAL = 60000
 export const NOTIFICATIONS_CHECK_UPDATED_INTERVAL = 100
 export const NOTIFICATIONS_MENU_OPEN_LATEST_INTERVAL = 2000
+export const NOTIFICATIONS_UPDATE_PAUSE_INTERVAL = 10000