Improved online notification. Widget should stay open on updates and close after click to an object.

2015-01-21 00:30:19 +01:00 · 2015-01-21 00:30:19 +01:00 · 8ee9002c33
parent 55fb234e5b
commit 8ee9002c33
6 changed files with 102 additions and 67 deletions
--- a/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
+++ b/app/assets/javascripts/app/controllers/widget/online_notification.js.coffee
@ -8,7 +8,7 @@ class App.OnlineNotificationWidget extends App.Controller
    @bind 'OnlineNotification::changed', =>
      @delay(
        => @fetch()
-        1000
+        1200
        'online-notification-changed'
      )

@ -20,14 +20,14 @@ class App.OnlineNotificationWidget extends App.Controller
        if !@access()
          @el.find('activity-counter').html('')
          return
-        @start()
+        @createContainer()

    if @access()
-      @start()
-      @subscribeId = App.OnlineNotification.subscribe( @start )
+      @createContainer()
+      @subscribeId = App.OnlineNotification.subscribe( @updateContent )

  release: =>
-    @stop()
+    @removeContainer()
    App.OnlineNotification.unsubscribe( @subscribeId )

  access: ->
@ -46,17 +46,13 @@ class App.OnlineNotificationWidget extends App.Controller
    else
      @toggle.append('<div class="activity-counter">' + count.toString() + '</div>')

-  markAllAsSeen: () =>
+  markAllAsRead: =>
    @ajax(
-      id:   'markAllAsSeen'
+      id:   'markAllAsRead'
      type: 'POST'
-      url:  @apiPath + '/online_notifications/markAllAsSeen'
+      url:  @apiPath + '/online_notifications/mark_all_as_read'
      data: JSON.stringify( '' )
      processData: true
-      success: (data, status, xhr) =>
-        if data.result is 'ok'
-        else
-      fail: =>
    )

  removeClickCatcher: () =>
@ -65,34 +61,44 @@ class App.OnlineNotificationWidget extends App.Controller
    @clickCatcher = null

  onShow: =>
-    # show frontend times
-    $('#markAllAsSeen').bind('click', (e) =>
-      e.preventDefault()
-      @markAllAsSeen()
+    @updateContent()
+
+    # set heigth of notification popover
+    height = $('#app').height()
+    $('.js-notificationsContainer').css('height', "#{height-12}px")
+    $('.js-notificationsContainer .arrow').css('top', '20px')
+
+    # close notification list on click
+    $('.js-notificationsContainer').on('click', (e) =>
+      #console.log('CL')
+      @hidePopover()
    )
-    @frontendTimeUpdate()
-    
+
+    # mark all notifications as read
+    $('.js-markAllAsRead').on('click', (e) =>
+      e.preventDefault()
+      @markAllAsRead()
+    )
+
    # add clickCatcher
    @clickCatcher = new App.clickCatcher
-      holder: @el.offsetParent()
-      callback: @hidePopover
+      holder:      @el.offsetParent()
+      callback:    @hidePopover
      zIndexScale: 4

  onHide: =>
-    $('#markAllAsSeen').unbind('click')
    @removeClickCatcher()

  hidePopover: =>
    @toggle.popover('hide')

-  stop: =>
-    @counterUpdate(0)
-    @toggle.popover('destroy')
+  fetch: =>
+    load = (items) =>
+      App.OnlineNotification.refresh( items, { clear: true } )
+      @updateContent()
+    App.OnlineNotification.fetchFull(load)

-  start: =>
-    @stop()
-
-    # show popover
+  updateContent: =>
    items = App.OnlineNotification.search( sortBy: 'created_at', order: 'DESC' )
    counter = 0
    for item in items
@ -100,26 +106,46 @@ class App.OnlineNotificationWidget extends App.Controller
        counter = counter + 1
    @counterUpdate(counter)

+    # update title
+    $('.js-notificationsContainer .popover-title').html(
+      App.i18n.translateInline( 'Notifications' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
+    )
+
+    # update content
    items = @prepareForObjectList(items)
+    $('.js-notificationsContainer .popover-content').html(
+      $( App.view('widget/online_notification_content')(items: items) )
+    )

-    @toggle.popover
-      trigger:    'click'
-      container:  'body'
-      html:       true
-      placement:  'right'
-      viewport: { "selector": "#app", "padding": 10 }
-      template: App.view('widget/online_notification')()
-      title: ->
-        App.i18n.translateInline( 'Notifications' ) + " <span class='popover-notificationsCounter'>#{counter}</span>"
-      content: =>
-        # insert data
-        $( App.view('widget/online_notification_content')(items: items) )
-    .on
-      'shown.bs.popover': @onShow
-      'hide.bs.popover': @onHide
+    # show frontend times
+    @frontendTimeUpdate()

-  fetch: =>
-    load = (items) =>
-      App.OnlineNotification.refresh( items, { clear: true } )
-      @start()
-    App.OnlineNotification.fetchFull(load)
+  createContainer: =>
+    @removeContainer()
+
+    # show popover
+    waitUntilOldPopoverIsRemoved = =>
+      @toggle.popover
+        trigger:   'click'
+        container: 'body'
+        html:      true
+        placement: 'right'
+        viewport:  { "selector": "#app", "padding": 10 }
+        template:  App.view('widget/online_notification')()
+        title:     ' '
+        content:   ' '
+      .on
+        'shown.bs.popover': @onShow
+        'hide.bs.popover':  @onHide
+
+      @updateContent()
+
+    @delay(
+      => waitUntilOldPopoverIsRemoved()
+      600
+      'popover'
+    )
+
+  removeContainer: =>
+    @counterUpdate(0)
+    @toggle.popover('destroy')
--- a/app/assets/javascripts/app/views/widget/online_notification.jst.eco
+++ b/app/assets/javascripts/app/views/widget/online_notification.jst.eco
@ -1,8 +1,8 @@
-<div class="popover popover--notifications" role="tooltip">
+<div class="popover popover--notifications js-notificationsContainer" role="tooltip">
  <div class="arrow"></div>
  <div class="popover-notificationsHeader">
    <span class="popover-title"></span>
-    <a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
+    <a class="popover-notificationsMarkRead js-markAllAsRead"><%- @T( 'Mark all as read' ) %></a>
  </div>
  <div class="popover-content"></div>
 </div>
--- a/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco
+++ b/app/assets/javascripts/app/views/widget/online_notification_header.jst.eco
@ -1,5 +0,0 @@
-<span class="popover-notificationsTitle">
-  <%- @T( 'Notifications' ) %>
-  <span class="popover-notificationsCounter"><%= @counter %></span>
-  <a class="popover-notificationsMarkRead" id="markAllAsSeen"><%- @T( 'Mark all as read' ) %></a>
-</span>
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@ -2605,7 +2605,7 @@ footer {
    margin-left: auto;
  }

-  a.list-group-item.active > .badge, 
+  a.list-group-item.active > .badge,
  .nav-pills > .active > a > .badge {
    color: #96969b;
    background: none;
@ -2634,10 +2634,6 @@ footer {
  z-index: 1110;
  box-shadow: 0 1px 14px rgba(0,8,14,.25);
  // max-height: calc(100vh - 20px);
-  
-  &.is-visible {
-    display: block;
-  }
 }

  .popover-title {
--- a/app/controllers/online_notifications_controller.rb
+++ b/app/controllers/online_notifications_controller.rb
@ -88,12 +88,30 @@ curl http://localhost/api/v1/online_notifications -v -u #{login}:#{password} -H
    model_update_render(OnlineNotification, params)
  end

-  def markAllAsSeen
+=begin
+
+Resource:
+PUT /api/v1/online_notifications/mark_all_as_read
+
+Payload:
+{}
+
+Response:
+{}
+
+Test:
+curl http://localhost/api/v1/online_notifications/mark_all_as_read -v -u #{login}:#{password} -X POST -d '{}'
+
+=end
+
+  def mark_all_as_read
      notifications = OnlineNotification.list(current_user,100)
      notifications.each do |notification|
-        OnlineNotification.seen({:id => notification['id']})
+        if !notification['seen']
+          OnlineNotification.seen( :id => notification['id'] )
+        end
      end
-      render :json => {data:'ok'}
+    render :json => {}, :status => :ok
  end

-end
+end
--- a/config/routes/online_notification.rb
+++ b/config/routes/online_notification.rb
@ -2,8 +2,8 @@ Zammad::Application.routes.draw do
  api_path = Rails.configuration.api_path

  # groups
-  match api_path + '/online_notifications',                   :to => 'online_notifications#index',         :via => :get
-  match api_path + '/online_notifications/:id',               :to => 'online_notifications#update',        :via => :put
-  match api_path + '/online_notifications/markAllAsSeen',     :to => 'online_notifications#markAllAsSeen', :via => :post
+  match api_path + '/online_notifications',                   :to => 'online_notifications#index',            :via => :get
+  match api_path + '/online_notifications/:id',               :to => 'online_notifications#update',           :via => :put
+  match api_path + '/online_notifications/mark_all_as_read',  :to => 'online_notifications#mark_all_as_read', :via => :post

 end