Improved navigation. Moved recent viewed to navbar.

This commit is contained in:
Martin Edenhofer 2012-04-24 12:33:34 +02:00
parent c9a7108af2
commit 56eb2c19dd
5 changed files with 176 additions and 60 deletions

View file

@ -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,
} # }
} }
} }

View file

@ -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
)

View file

@ -40,7 +40,7 @@ Config.NavBar['AdminTrigger'] = { prio: 3000, parent: '#admin', name: 'Trigger',
Config.NavBar['AdminScheduler'] = { prio: 3500, parent: '#admin', name: 'Scheduler', target: '#scheduler', role: ['Admin'] } Config.NavBar['AdminScheduler'] = { prio: 3500, parent: '#admin', name: 'Scheduler', target: '#scheduler', role: ['Admin'] }
Config.NavBar['Setting'] = { prio: 20000, parent: '', name: 'Settings', target: '#settings', role: ['Admin'] } Config.NavBar['Setting'] = { prio: 20000, parent: '', name: 'Settings', target: '#settings', role: ['Admin'] }
Config.NavBar['SettingSystem'] = { prio: 1400, parent: '#settings', name: 'System', target: '#settings/system', role: ['Admin'] } Config.NavBar['SettingSystem'] = { prio: 1400, parent: '#settings', name: 'System', target: '#settings/system', role: ['Admin'] }
Config.NavBar['SettingSecurity'] = { prio: 1500, parent: '#settings', name: 'Security', target: '#settings/security', role: ['Admin'] } Config.NavBar['SettingSecurity'] = { prio: 1500, parent: '#settings', name: 'Security', target: '#settings/security', role: ['Admin'] }
Config.NavBar['SettingTicket'] = { prio: 1600, parent: '#settings', name: 'Ticket', target: '#settings/ticket', role: ['Admin'] } Config.NavBar['SettingTicket'] = { prio: 1600, parent: '#settings', name: 'Ticket', target: '#settings/ticket', role: ['Admin'] }
@ -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' ] }

View file

@ -1,45 +1,60 @@
<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: %>
<li><a href="<%= item.target %>"><%= item.name %></a></li> <% if item.divider: %>
<% end %> <li class="divider"></li>
</ul> <% end %>
</li> <% if item.navheader: %>
<% else: %> <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 %>
<% end %> </ul>
</ul> </li>
<form class="navbar-search pull-left"> <% else: %>
<input class="search-query" type="search" value="" placeholder="Search"/> <li><a href="<%= item.target %>"><%= item.name %></a></li>
</form> <% end %>
<% end %>
</ul>
<form class="navbar-search pull-left">
<input class="search-query" type="search" value="" placeholder="Search"/>
</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="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%= item.name %> <b class="caret"></b></a>
<a href="#current_user" class="dropdown-toggle" data-toggle="dropdown"><%= @user.login %> <b class="caret"></b></a> <ul class="dropdown-menu">
<ul class="dropdown-menu"> <% for item in item.child: %>
<li><a href="#profile">Profile</a></li> <% if item.divider: %>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#logout">Sign out</a></li> <% end %>
</ul> <% if item.navheader: %>
</li> <li class="nav-header"><%= item.navheader %></li>
</ul> <% end %>
<li><a href="<%= item.target %>"><%= item.name %></a></li>
<% end %>
</ul>
</li>
<% else: %>
<li><a href="<%= item.target %>"><%= item.name %></a></li>
<% end %>
<% end %>
</ul>
<% else: %> <% else: %>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><a href="#login">Sign in</a></li> <li><a href="#login">Sign in</a></li>
</ul> </ul>
<% end %> <% end %>
</div>
</div>
</div> </div>
</div>
</div>

View file

@ -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 = {};