Improved navigation. Moved recent viewed to navbar.
This commit is contained in:
parent
c9a7108af2
commit
56eb2c19dd
5 changed files with 176 additions and 60 deletions
|
@ -31,9 +31,9 @@ class Index extends App.Controller
|
||||||
activity_stream: {
|
activity_stream: {
|
||||||
controller: App.DashboardActivityStream,
|
controller: App.DashboardActivityStream,
|
||||||
},
|
},
|
||||||
recent_viewed: {
|
# recent_viewed: {
|
||||||
controller: App.DashboardRecentViewed,
|
# controller: App.DashboardRecentViewed,
|
||||||
}
|
# }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
$ = jQuery.sub()
|
$ = jQuery.sub()
|
||||||
|
|
||||||
class App.Navigation extends Spine.Controller
|
class App.Navigation extends App.Controller
|
||||||
events:
|
events:
|
||||||
'focusin [data-type=edit]': 'edit_in'
|
'focusin [data-type=edit]': 'edit_in'
|
||||||
|
|
||||||
|
@ -9,6 +9,12 @@ class App.Navigation extends Spine.Controller
|
||||||
@log 'nav...'
|
@log 'nav...'
|
||||||
@render()
|
@render()
|
||||||
|
|
||||||
|
sync_ticket_overview = =>
|
||||||
|
@sync(@ticket_overview, 30000,'interval_id_ticket_overview')
|
||||||
|
|
||||||
|
sync_recent_viewed = =>
|
||||||
|
@sync(@recent_viewed, 40000, 'interval_id_recent_viewed')
|
||||||
|
|
||||||
Spine.bind 'navupdate', (data) =>
|
Spine.bind 'navupdate', (data) =>
|
||||||
@update(arguments[0])
|
@update(arguments[0])
|
||||||
|
|
||||||
|
@ -18,21 +24,36 @@ class App.Navigation extends Spine.Controller
|
||||||
|
|
||||||
Spine.bind 'navupdate_remote', (user) =>
|
Spine.bind 'navupdate_remote', (user) =>
|
||||||
@log 'navupdate_remote'
|
@log 'navupdate_remote'
|
||||||
@delay( @sync, 500 )
|
@delay( sync_ticket_overview, 500 )
|
||||||
|
@delay( sync_recent_viewed, 1000 )
|
||||||
|
|
||||||
# rerender if new overview data is there
|
# rerender if new overview data is there
|
||||||
@delay( @sync, 800 )
|
@delay( sync_ticket_overview, 800 )
|
||||||
@delay( @sync, 2000 )
|
@delay( sync_ticket_overview, 2000 )
|
||||||
|
|
||||||
|
@delay( sync_recent_viewed, 1000 )
|
||||||
|
|
||||||
render: (user) ->
|
render: (user) ->
|
||||||
# @log 'nav render', Config.NavBar
|
nav_left = @getItems( navbar: Config.NavBar )
|
||||||
# @log '111', _.keys(Config.NavBar)
|
nav_right = @getItems( navbar: Config.NavBarRight )
|
||||||
navbar = _.values(Config.NavBar)
|
|
||||||
|
@html App.view('navigation')(
|
||||||
|
navbar_left: nav_left,
|
||||||
|
navbar_right: nav_right,
|
||||||
|
user: user,
|
||||||
|
)
|
||||||
|
|
||||||
|
getItems: (data) ->
|
||||||
|
navbar = _.values(data.navbar)
|
||||||
|
|
||||||
level1 = []
|
level1 = []
|
||||||
dropdown = {}
|
dropdown = {}
|
||||||
|
|
||||||
for item in navbar
|
for item in navbar
|
||||||
|
if typeof item.callback is 'function'
|
||||||
|
data = item.callback() || {}
|
||||||
|
for key, value of data
|
||||||
|
item[key] = value
|
||||||
if !item.parent
|
if !item.parent
|
||||||
match = 0
|
match = 0
|
||||||
if !window.Session['roles']
|
if !window.Session['roles']
|
||||||
|
@ -72,10 +93,7 @@ class App.Navigation extends Spine.Controller
|
||||||
itemLevel1.child = sub
|
itemLevel1.child = sub
|
||||||
|
|
||||||
nav = @getOrder(level1)
|
nav = @getOrder(level1)
|
||||||
@html App.view('navigation')(
|
return nav
|
||||||
navbar: nav,
|
|
||||||
user: user,
|
|
||||||
)
|
|
||||||
|
|
||||||
getOrder: (data) ->
|
getOrder: (data) ->
|
||||||
newlist = {}
|
newlist = {}
|
||||||
|
@ -110,19 +128,23 @@ class App.Navigation extends Spine.Controller
|
||||||
@el.find("[href=\"#{url}\"]").parents('li').addClass('active')
|
@el.find("[href=\"#{url}\"]").parents('li').addClass('active')
|
||||||
# @el.find("[href*=\"#{url}\"]").parents('li').addClass('active')
|
# @el.find("[href*=\"#{url}\"]").parents('li').addClass('active')
|
||||||
|
|
||||||
sync: =>
|
sync: (action, interval, interval_id) =>
|
||||||
|
|
||||||
@ticket_overview()
|
# check global var
|
||||||
|
if !@intervalID
|
||||||
|
@intervalID = {}
|
||||||
|
|
||||||
|
action()
|
||||||
|
|
||||||
# auto save
|
# auto save
|
||||||
every = (ms, cb) -> setInterval cb, ms
|
every = (ms, cb) -> setInterval cb, ms
|
||||||
|
|
||||||
# clear auto save
|
# clear auto save
|
||||||
clearInterval(@intervalID) if @intervalID
|
clearInterval(@intervalID[interval_id]) if @intervalID[interval_id]
|
||||||
|
|
||||||
# request new data
|
# request new data
|
||||||
@intervalID = every 30000, () =>
|
@intervalID[interval_id] = every interval, () =>
|
||||||
@ticket_overview()
|
action()
|
||||||
|
|
||||||
# get data
|
# get data
|
||||||
ticket_overview: =>
|
ticket_overview: =>
|
||||||
|
@ -162,3 +184,65 @@ class App.Navigation extends Spine.Controller
|
||||||
# rebuild navbar
|
# rebuild navbar
|
||||||
Spine.trigger 'navrebuild', window.Session
|
Spine.trigger 'navrebuild', window.Session
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
# get data
|
||||||
|
recent_viewed: =>
|
||||||
|
|
||||||
|
# do no load and rerender if sub-menu is open
|
||||||
|
open = @el.find('.open').val()
|
||||||
|
if open isnt undefined
|
||||||
|
return
|
||||||
|
|
||||||
|
# do no load and rerender if user is not logged in
|
||||||
|
if !window.Session['id']
|
||||||
|
return
|
||||||
|
|
||||||
|
@ajax = new App.Ajax
|
||||||
|
@ajax.ajax(
|
||||||
|
type: 'GET',
|
||||||
|
url: '/recent_viewed',
|
||||||
|
data: {
|
||||||
|
limit: 5,
|
||||||
|
}
|
||||||
|
processData: true,
|
||||||
|
success: (data, status, xhr) =>
|
||||||
|
|
||||||
|
items = data.recent_viewed
|
||||||
|
|
||||||
|
# load user collection
|
||||||
|
@loadCollection( type: 'User', data: data.users )
|
||||||
|
|
||||||
|
# load ticket collection
|
||||||
|
@loadCollection( type: 'Ticket', data: data.tickets )
|
||||||
|
|
||||||
|
# remove old views
|
||||||
|
for key of Config.NavBarRight
|
||||||
|
if Config.NavBarRight[key].parent is '#current_user'
|
||||||
|
part = Config.NavBarRight[key].target.split '::'
|
||||||
|
if part is 'RecendViewed'
|
||||||
|
delete Config.NavBarRight[key]
|
||||||
|
|
||||||
|
# add new views
|
||||||
|
prio = 5000
|
||||||
|
for item in items
|
||||||
|
divider = false
|
||||||
|
navheader = false
|
||||||
|
if prio is 5000
|
||||||
|
divider = true
|
||||||
|
navheader = 'Recent Viewed'
|
||||||
|
ticket = App.Ticket.find(item.o_id)
|
||||||
|
prio++
|
||||||
|
Config.NavBarRight['RecendViewed::' + ticket.id] = {
|
||||||
|
prio: prio,
|
||||||
|
parent: '#current_user',
|
||||||
|
name: item.history_object.name + ' (' + ticket.title + ')',
|
||||||
|
target: '#ticket/zoom/' + ticket.id,
|
||||||
|
role: ['Agent'],
|
||||||
|
divider: divider,
|
||||||
|
navheader: navheader
|
||||||
|
}
|
||||||
|
|
||||||
|
# rebuild navbar
|
||||||
|
Spine.trigger 'navrebuild', window.Session
|
||||||
|
)
|
||||||
|
|
|
@ -60,3 +60,18 @@ Config.NavBar['TicketOverview'] = { prio: 1000, parent: '', name: 'Overviews', t
|
||||||
#Config.NavBar[''] = { prio: 1600, parent: '', name: 'anybody+agent', target: '#aa', role: ['Anybody', 'Agent'] }
|
#Config.NavBar[''] = { prio: 1600, parent: '', name: 'anybody+agent', target: '#aa', role: ['Anybody', 'Agent'] }
|
||||||
#Config.NavBar[''] = { prio: 1600, parent: '', name: 'Anybody', target: '#anybody', role: ['Anybody'] }
|
#Config.NavBar[''] = { prio: 1600, parent: '', name: 'Anybody', target: '#anybody', role: ['Anybody'] }
|
||||||
Config.NavBar['CustomerTickets'] = { prio: 1600, parent: '', name: 'Tickets', target: '#customer_tickets', role: ['Customer'] }
|
Config.NavBar['CustomerTickets'] = { prio: 1600, parent: '', name: 'Tickets', target: '#customer_tickets', role: ['Customer'] }
|
||||||
|
|
||||||
|
Config.NavBarRight['TicketNew'] = { prio: 8000, parent: '', name: 'New', target: '#ticket_create', role: ['Agent'] }
|
||||||
|
Config.NavBarRight['User'] = {
|
||||||
|
prio: 10000,
|
||||||
|
parent: '',
|
||||||
|
callback: ->
|
||||||
|
item = {}
|
||||||
|
item['name'] = window.Session['login']
|
||||||
|
return item
|
||||||
|
target: '#current_user',
|
||||||
|
role: [ 'Agent', 'Customer' ]
|
||||||
|
}
|
||||||
|
Config.NavBarRight['UserProfile'] = { prio: 1700, parent: '#current_user', name: 'Profile', target: '#profile', role: [ 'Agent', 'Customer' ] }
|
||||||
|
Config.NavBarRight['UserLogout'] = { prio: 1800, parent: '#current_user', name: 'Sign out', target: '#logout', divider: true, role: [ 'Agent', 'Customer' ] }
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,20 @@
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a class="brand" href="#/"><%- Config.product_name %></a>
|
<a class="brand" href="#/"><%- Config.product_name %></a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<% for item in @navbar: %>
|
<% for item in @navbar_left: %>
|
||||||
<% if item.child: %>
|
<% if item.child: %>
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%= item.name %> <b class="caret"></b></a>
|
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%= item.name %> <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<% for item in item.child: %>
|
<% for item in item.child: %>
|
||||||
|
<% if item.divider: %>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<% end %>
|
||||||
|
<% if item.navheader: %>
|
||||||
|
<li class="nav-header"><%= item.navheader %></li>
|
||||||
|
<% end %>
|
||||||
<li><a href="<%= item.target %>"><%= item.name %></a></li>
|
<li><a href="<%= item.target %>"><%= item.name %></a></li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -23,17 +29,26 @@
|
||||||
</form>
|
</form>
|
||||||
<% if @user: %>
|
<% if @user: %>
|
||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
<li>
|
<% for item in @navbar_right: %>
|
||||||
<a href="#ticket_create">New</a>
|
<% if item.child: %>
|
||||||
</li>
|
|
||||||
<li class="dropdown">
|
<li class="dropdown">
|
||||||
<a href="#current_user" class="dropdown-toggle" data-toggle="dropdown"><%= @user.login %> <b class="caret"></b></a>
|
<a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%= item.name %> <b class="caret"></b></a>
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#profile">Profile</a></li>
|
<% for item in item.child: %>
|
||||||
|
<% if item.divider: %>
|
||||||
<li class="divider"></li>
|
<li class="divider"></li>
|
||||||
<li><a href="#logout">Sign out</a></li>
|
<% end %>
|
||||||
|
<% if item.navheader: %>
|
||||||
|
<li class="nav-header"><%= item.navheader %></li>
|
||||||
|
<% end %>
|
||||||
|
<li><a href="<%= item.target %>"><%= item.name %></a></li>
|
||||||
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
<% else: %>
|
||||||
|
<li><a href="<%= item.target %>"><%= item.name %></a></li>
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
<% else: %>
|
<% else: %>
|
||||||
<ul class="nav pull-right">
|
<ul class="nav pull-right">
|
||||||
|
@ -42,4 +57,4 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
var Config = {};
|
var Config = {};
|
||||||
Config.Routes = {};
|
Config.Routes = {};
|
||||||
Config.NavBar = {};
|
Config.NavBar = {};
|
||||||
|
Config.NavBarRight = {};
|
||||||
Config.product_name = 'Zammad'
|
Config.product_name = 'Zammad'
|
||||||
Config.requested_url = ''
|
Config.requested_url = ''
|
||||||
|
var Store = {};
|
||||||
var Session = {};
|
var Session = {};
|
||||||
|
|
Loading…
Reference in a new issue