From f67dce22663048c4633d112e04b0f7c4d5739e3a Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Fri, 2 Feb 2018 07:34:57 +0100 Subject: [PATCH 1/2] Refactoring of sidebar and sidebar tabs backends. Added config option to show sidebar customer ticket indicator colored. --- .../_application_controller_generic.coffee | 48 ++++++++--- .../agent_ticket_create/sidebar.coffee | 4 +- .../sidebar_customer.coffee | 63 +++++++++------ .../sidebar_organization.coffee | 17 ++-- .../sidebar_template.coffee | 14 ++-- .../controllers/ticket_zoom/sidebar.coffee | 8 +- .../ticket_zoom/sidebar_customer.coffee | 71 +++++++++------- .../ticket_zoom/sidebar_idoit.coffee | 13 +-- .../ticket_zoom/sidebar_organization.coffee | 17 ++-- .../ticket_zoom/sidebar_ticket.coffee | 16 ++-- .../app/views/generic/sidebar_tabs.jst.eco | 9 +-- .../views/generic/sidebar_tabs_item.jst.eco | 4 + app/assets/stylesheets/zammad.scss | 80 ++++++++++++++++++- ...01_sidebar_customer_open_ticket_colored.rb | 34 ++++++++ db/seeds/settings.rb | 27 +++++++ 15 files changed, 303 insertions(+), 122 deletions(-) create mode 100644 app/assets/javascripts/app/views/generic/sidebar_tabs_item.jst.eco create mode 100644 db/migrate/20180202000001_sidebar_customer_open_ticket_colored.rb diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee index 00ae69725..9b2c87cc8 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_generic.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_generic.coffee @@ -656,7 +656,7 @@ class App.Sidebar extends App.Controller '.sidebar': 'sidebars' events: - 'click .tabsSidebar-tab': 'toggleTab' + 'click .tabsSidebar-tab': 'toggleTab' 'click .tabsSidebar-close': 'toggleSidebar' 'click .sidebar-header .js-headline': 'toggleDropdown' @@ -680,26 +680,48 @@ class App.Sidebar extends App.Controller @toggleTabAction(name) render: => + itemsLocal = [] + for item in @items + itemLocal = item.sidebarItem() + if itemLocal + itemsLocal.push itemLocal + + # container localEl = $(App.view('generic/sidebar_tabs')( - items: @items + items: itemsLocal scrollbarWidth: App.Utils.getScrollBarWidth() dir: App.i18n.dir() )) - # init content callback - for item in @items - area = localEl.filter('.sidebar[data-tab="' + item.name + '"]') - if item.callback - item.callback(area.find('.sidebar-content')) - if !_.isEmpty(item.actions) - new App.ActionRow( - el: area.find('.js-actions') - items: item.actions - type: 'small' - ) + # init sidebar badget + for item in itemsLocal + el = localEl.find('.tabsSidebar-tab[data-tab="' + item.name + '"]') + if item.badgeCallback + item.badgeCallback(el) + else + @badgeRender(el, item) + + # init sidebar content + for item in itemsLocal + if item.sidebarCallback + el = localEl.filter('.sidebar[data-tab="' + item.name + '"]') + item.sidebarCallback(el.find('.sidebar-content')) + if !_.isEmpty(item.sidebarActions) + new App.ActionRow( + el: el.find('.js-actions') + items: item.sidebarActions + type: 'small' + ) @html localEl + badgeRender: (el, item) => + @badgeEl = el + @badgeRenderLocal(item) + + badgeRenderLocal: (item) => + @badgeEl.html(App.view('generic/sidebar_tabs_item')(icon: item.badgeIcon)) + toggleDropdown: (e) -> e.stopPropagation() $(e.currentTarget).next('.js-actions').find('.dropdown-toggle').dropdown('toggle') diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar.coffee index 88b151449..1d34f85d6 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar.coffee @@ -32,9 +32,7 @@ class App.TicketCreateSidebar extends App.Controller params: @params query: @query ) - item = @sidebarBackends[key].sidebarItem() - if item - @sidebarItems.push item + @sidebarItems.push @sidebarBackends[key] new App.Sidebar( el: @el diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_customer.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_customer.coffee index 1dbecf1fb..8de9ea04a 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_customer.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_customer.coffee @@ -2,48 +2,61 @@ class SidebarCustomer extends App.Controller sidebarItem: => return if !@permissionCheck('ticket.agent') return if _.isEmpty(@params.customer_id) - counter = '' - if App.User.exists(@params.customer_id) - user = App.User.find(@params.customer_id) - counter = @sidebarItemCounter(user) - { - head: 'Customer' - name: 'customer' - icon: 'person' - counter: counter - counterPossible: true - actions: [ + @item = { + name: 'customer' + badgeCallback: @badgeRender + sidebarHead: 'Customer' + sidebarCallback: @showCustomer + sidebarActions: [ { title: 'Edit Customer' name: 'customer-edit' callback: @editCustomer }, ] - callback: @showCustomer } + metaBadge: (user) => + counter = '' + cssClass = '' + counter = @sidebarItemCounter(user) + + if @Config.get('ui_sidebar_open_ticket_indicator_colored') is true + if counter == 1 + cssClass = 'tabsSidebar-tab-count--warning' + if counter > 1 + cssClass = 'tabsSidebar-tab-count--danger' + + { + name: 'customer' + icon: 'person' + counterPossible: true + counter: counter + cssClass: cssClass + } + + badgeRender: (el) => + @badgeEl = el + if App.User.exists(@params.customer_id) + user = App.User.find(@params.customer_id) + @badgeRenderLocal(user) + + badgeRenderLocal: (user) => + @badgeEl.html(App.view('generic/sidebar_tabs_item')(@metaBadge(user))) + sidebarItemCounter: (user) -> counter = '' if user && user.preferences && user.preferences.tickets_open counter = user.preferences.tickets_open counter - sidebarItemUpdate: (user) => - counter = @sidebarItemCounter(user) - element = @el.closest('.tabsSidebar-holder').find('.tabsSidebar .tabsSidebar-tabs .tabsSidebar-tab[data-tab=customer] .js-tabCounter') - if !counter || counter is 0 - element.addClass('hide') - else - element.removeClass('hide') - element.text(counter) - showCustomer: (el) => - @el = el + @elSidebar = el return if _.isEmpty(@params.customer_id) new App.WidgetUser( - el: @el + el: @elSidebar user_id: @params.customer_id - callback: @sidebarItemUpdate + callback: @badgeRenderLocal ) editCustomer: => @@ -55,7 +68,7 @@ class SidebarCustomer extends App.Controller title: 'Users' object: 'User' objects: 'Users' - container: @el.closest('.content') + container: @elSidebar.closest('.content') ) App.Config.set('200-Customer', SidebarCustomer, 'TicketCreateSidebar') diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_organization.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_organization.coffee index db2a9239d..de2bc6b26 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_organization.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_organization.coffee @@ -6,24 +6,25 @@ class SidebarOrganization extends App.Controller customer = App.User.find(@params.customer_id) @organization_id = customer.organization_id return if !@organization_id - { - head: 'Organization' + @item = { name: 'organization' - icon: 'group' - actions: [ + badgeIcon: 'group' + sidebarHead: 'Organization' + sidebarCallback: @showOrganization + sidebarActions: [ { title: 'Edit Organization' name: 'organization-edit' callback: @editOrganization }, ] - callback: @showOrganization } + @item showOrganization: (el) => - @el = el + @elSidebar = el new App.WidgetOrganization( - el: @el + el: @elSidebar organization_id: @organization_id ) @@ -35,7 +36,7 @@ class SidebarOrganization extends App.Controller title: 'Organizations' object: 'Organization' objects: 'Organizations' - container: @el.closest('.content') + container: @elSidebar.closest('.content') ) App.Config.set('300-Organization', SidebarOrganization, 'TicketCreateSidebar') diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_template.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_template.coffee index bb724bc83..318813dec 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_template.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create/sidebar_template.coffee @@ -1,13 +1,15 @@ class SidebarTemplate extends App.Controller sidebarItem: => return if !@permissionCheck('ticket.agent') - { - head: 'Templates' - name: 'template' - icon: 'templates' - actions: [] - callback: @showTemplates + @item = { + name: 'template' + badgeIcon: 'templates' + badgeCallback: @badgeRender + sidebarHead: 'Templates' + sidebarActions: [] + sidebarCallback: @showTemplates } + @item showTemplates: (el) => @el = el diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar.coffee index 3059d1d0c..416d16742 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar.coffee @@ -32,16 +32,14 @@ class App.TicketZoomSidebar extends App.ObserverController ) else @sidebarBackends[key].reload( - params: @params - query: @query + params: @params + query: @query formMeta: @formMeta markForm: @markForm tags: @tags links: @links ) - item = @sidebarBackends[key].sidebarItem() - if item - @sidebarItems.push item + @sidebarItems.push @sidebarBackends[key] new App.Sidebar( el: @el.find('.tabsSidebar') diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_customer.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_customer.coffee index 01c4751be..521e0d4ac 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_customer.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_customer.coffee @@ -1,32 +1,54 @@ class SidebarCustomer extends App.Controller sidebarItem: => return if !@permissionCheck('ticket.agent') - counter = '' - if App.User.exists(@ticket.customer_id) - user = App.User.find(@ticket.customer_id) - counter = @sidebarItemCounter(user) - items = { - head: 'Customer' - name: 'customer' - icon: 'person' - counter: counter - counterPossible: true - actions: [ + @item = { + name: 'customer' + badgeCallback: @badgeRender + sidebarHead: 'Customer' + sidebarCallback: @showCustomer + sidebarActions: [ { title: 'Change Customer' name: 'customer-change' callback: @changeCustomer }, ] - callback: @showCustomer } - return items if @ticket && @ticket.customer_id == 1 - items.actions.push { + return @item if @ticket && @ticket.customer_id == 1 + @item.sidebarActions.push { title: 'Edit Customer' name: 'customer-edit' callback: @editCustomer } - items + @item + + metaBadge: (user) => + counter = '' + cssClass = '' + counter = @sidebarItemCounter(user) + + if @Config.get('ui_sidebar_open_ticket_indicator_colored') is true + if counter == 1 + cssClass = 'tabsSidebar-tab-count--warning' + if counter > 1 + cssClass = 'tabsSidebar-tab-count--danger' + + { + name: 'customer' + icon: 'person' + counterPossible: true + counter: counter + cssClass: cssClass + } + + badgeRender: (el) => + @badgeEl = el + if App.User.exists(@ticket.customer_id) + user = App.User.find(@ticket.customer_id) + @badgeRenderLocal(user) + + badgeRenderLocal: (user) => + @badgeEl.html(App.view('generic/sidebar_tabs_item')(@metaBadge(user))) sidebarItemCounter: (user) -> counter = '' @@ -34,21 +56,12 @@ class SidebarCustomer extends App.Controller counter = user.preferences.tickets_open counter - sidebarItemUpdate: (user) => - counter = @sidebarItemCounter(user) - element = @el.closest('.tabsSidebar-holder').find('.tabsSidebar .tabsSidebar-tabs .tabsSidebar-tab[data-tab=customer] .js-tabCounter') - if !counter || counter is 0 - element.addClass('hide') - else - element.removeClass('hide') - element.text(counter) - showCustomer: (el) => - @el = el + @elSidebar = el new App.WidgetUser( - el: @el + el: @elSidebar user_id: @ticket.customer_id - callback: @sidebarItemUpdate + callback: @badgeRenderLocal ) editCustomer: => @@ -60,13 +73,13 @@ class SidebarCustomer extends App.Controller title: 'Users' object: 'User' objects: 'Users' - container: @el.closest('.content') + container: @elSidebar.closest('.content') ) changeCustomer: => new App.TicketCustomer( ticket_id: @ticket.id - container: @el.closest('.content') + container: @elSidebar.closest('.content') ) App.Config.set('200-Customer', SidebarCustomer, 'TicketZoomSidebar') diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_idoit.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_idoit.coffee index 5ebce7924..a3a8aad7d 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_idoit.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_idoit.coffee @@ -1,19 +1,20 @@ class SidebarIdoit extends App.Controller sidebarItem: => return if !@Config.get('idoit_integration') - { - head: 'i-doit' - name: 'idoit' - icon: 'printer' - actions: [ + @item = { + name: 'idoit' + badgeIcon: 'printer' + sidebarHead: 'i-doit' + sidebarCallback: @showObjects + sidebarActions: [ { title: 'Change Objects' name: 'objects-change' callback: @changeObjects }, ] - callback: @showObjects } + @item changeObjects: => new App.IdoitObjectSelector( diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_organization.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_organization.coffee index 6fc2ef5cb..357813ef4 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_organization.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_organization.coffee @@ -2,24 +2,25 @@ class SidebarOrganization extends App.Controller sidebarItem: => return if !@permissionCheck('ticket.agent') return if !@ticket.organization_id - { - head: 'Organization' + @item = { name: 'organization' - icon: 'group' - actions: [ + badgeIcon: 'group' + sidebarHead: 'Organization' + sidebarCallback: @showOrganization + sidebarActions: [ { title: 'Edit Organization' name: 'organization-edit' callback: @editOrganization }, ] - callback: @showOrganization } + @item showOrganization: (el) => - @el = el + @elSidebar = el new App.WidgetOrganization( - el: @el + el: @elSidebar organization_id: @ticket.organization_id ) @@ -31,7 +32,7 @@ class SidebarOrganization extends App.Controller title: 'Organizations' object: 'Organization' objects: 'Organizations' - container: @el.closest('.content') + container: @elSidebar.closest('.content') ) App.Config.set('300-Organization', SidebarOrganization, 'TicketZoomSidebar') diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_ticket.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_ticket.coffee index c2c950076..53253d729 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_ticket.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom/sidebar_ticket.coffee @@ -37,14 +37,14 @@ class Edit extends App.ObserverController class SidebarTicket extends App.Controller sidebarItem: => - sidebarItem = { - head: 'Ticket' - name: 'ticket' - icon: 'message' - callback: @editTicket + @item = { + name: 'ticket' + badgeIcon: 'message' + sidebarHead: 'Ticket' + sidebarCallback: @editTicket } if @permissionCheck('ticket.agent') - sidebarItem['actions'] = [ + @item.sidebarActions = [ { title: 'History' name: 'ticket-history' @@ -61,7 +61,7 @@ class SidebarTicket extends App.Controller callback: @changeCustomer }, ] - sidebarItem + @item reload: (args) => @@ -80,7 +80,7 @@ class SidebarTicket extends App.Controller editTicket: (el) => @el = el - localEl = $( App.view('ticket_zoom/sidebar_ticket')() ) + localEl = $(App.view('ticket_zoom/sidebar_ticket')()) @edit = new Edit( object_id: @ticket.id diff --git a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco index 30366fd86..f41f1fb33 100644 --- a/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco +++ b/app/assets/javascripts/app/views/generic/sidebar_tabs.jst.eco @@ -1,7 +1,7 @@ <% for item in @items: %>