Dashboard rewrite part 1.

This commit is contained in:
Martin Edenhofer 2015-06-21 00:56:36 +02:00
parent 5ace610bc9
commit aaf57357cc
10 changed files with 63 additions and 530 deletions

View file

@ -40,18 +40,18 @@ class App.DashboardActivityStream extends App.Controller
render: (items) ->
items = @prepareForObjectList(items)
@html App.view('dashboard/activity_stream')(
head: 'Activity Stream',
)
html = $('<div></div>')
for item in items
@el.append( @renderItem(item) )
html.append( @renderItem(item) )
@el.append html
# update time
@frontendTimeUpdate()
renderItem: (item) ->
html = $(App.view('dashboard/activity_stream_item')(
item: item,
html = $(App.view('dashboard/activity_stream')(
item: item
))
new App.WidgetAvatar(
el: html.find('.js-avatar')

View file

@ -1,41 +0,0 @@
class App.DashboardRecentViewed extends App.Controller
constructor: ->
super
@items = []
# get data
@ajax(
id: 'dashboard_recent_view',
type: 'GET',
url: @apiPath + '/recent_view',
data: {
limit: 5,
}
processData: true,
success: (data, status, xhr) =>
@items = data.recent_viewed
# load assets
App.Collection.loadAssets( data.assets )
@render()
)
render: ->
for item in @items
item.link = '#ticket_zoom/' + item.o_id
item.title = App.Ticket.find( item.o_id ).title
item.type = item.recent_view_object
html = App.view('dashboard/recent_viewed')(
head: 'Recent Viewed',
items: @items
)
html = $(html)
@html html
# start user popups
@userPopups('left')

View file

@ -1,187 +0,0 @@
class App.DashboardTicket extends App.Controller
events:
'click [data-type=settings]': 'settings'
'click [data-type=page]': 'page'
constructor: ->
super
@item_from = 1
# set new key
@key = 'ticket_overview_' + @view
# bind to rebuild view event
@bind( 'ticket_overview_rebuild', @fetch )
# render
@fetch()
fetch: (force) =>
# use cache of first page
cache = App.Store.get( @key )
if !force && cache
@load( cache )
# init fetch via ajax, all other updates on time via websockets
else
@ajax(
id: 'dashboard_ticket_' + @key,
type: 'GET',
url: @apiPath + '/ticket_overviews',
data: {
view: @view,
view_mode: 'd',
start_page: @start_page,
}
processData: true,
success: (data) =>
@load( data, true )
)
load: (data, ajax = false) =>
if ajax
App.Store.write( @key, data )
# load assets
App.Collection.loadAssets( data.assets )
# get meta data
App.Overview.refresh( data.overview, options: { clear: true } )
App.Overview.unbind('local:rerender')
App.Overview.bind 'local:rerender', (record) =>
@log 'notice', 'rerender...', record
data.overview = record
@render(data)
App.Overview.unbind('local:refetch')
App.Overview.bind 'local:refetch', (record) =>
@log 'notice', 'refetch...', record
@fetch(true)
@render( data )
render: (data) ->
return if !data
return if !data.ticket_ids
return if !data.overview
@overview = data.overview
@tickets_count = data.tickets_count
@ticket_ids = data.ticket_ids
items_total = @tickets_count
items_per_page = Math.min(@overview.view.per_page || 10, @tickets_count)
items_from = @item_from
items_till = items_from-1 + items_per_page
if items_till > items_total
items_till = items_total
html = App.view('dashboard/ticket')(
overview: @overview
items_per_page: items_per_page
items_from: items_from
items_till: items_till
items_total: items_total
)
html = $(html)
html.find('li').removeClass('active')
html.find(".page [data-id=\"#{@start_page}\"]").parents('li').addClass('active')
@tickets_in_table = []
i = items_from - 1
while i < items_till
if @ticket_ids[ i ]
@tickets_in_table.push App.Ticket.retrieve( @ticket_ids[ i ] )
i = i + 1
openTicket = (id,e) =>
ticket = App.Ticket.fullLocal(id)
@navigate ticket.uiUrl()
callbackTicketTitleAdd = (value, object, attribute, attributes, refObject) =>
attribute.title = object.title
value
callbackLinkToTicket = (value, object, attribute, attributes, refObject) =>
attribute.link = object.uiUrl()
value
callbackResetLink = (value, object, attribute, attributes, refObject) =>
attribute.link = undefined
value
callbackUserPopover = (value, object, attribute, attributes, refObject) =>
attribute.class = 'user-popover'
attribute.data =
id: refObject.id
value
callbackIconHeader = (header) ->
attribute =
name: 'icon'
display: ''
translation: false
style: 'width: 28px'
header.unshift(0)
header[0] = attribute
header
callbackIcon = (value, object, attribute, header, refObject) ->
value = ' '
attribute.class = object.icon()
attribute.link = ''
attribute.title = App.i18n.translateInline( object.iconTitle() )
value
new App.ControllerTable(
overview: @overview.view.d
el: html.find('.table-overview'),
model: App.Ticket
objects: @tickets_in_table,
checkbox: false
groupBy: @overview.group_by
callbackHeader: callbackIconHeader
bindRow:
events:
'click': openTicket
callbackAttributes:
icon:
[ callbackIcon ]
customer_id:
[ callbackResetLink, callbackUserPopover ]
owner_id:
[ callbackResetLink, callbackUserPopover ]
title:
[ callbackLinkToTicket, callbackTicketTitleAdd ]
number:
[ callbackLinkToTicket, callbackTicketTitleAdd ]
)
@html html
# show frontend times
@frontendTimeUpdate()
# start user popups
@userPopups()
zoom: (e) =>
e.preventDefault()
id = $(e.target).parents('[data-id]').data('id')
position = $(e.target).parents('[data-position]').data('position')
@Config.set('LastOverview', @view )
@Config.set('LastOverviewPosition', position )
@Config.set('LastOverviewTotal', @tickets_count )
@navigate 'ticket/zoom/' + id + '/nav/true'
settings: (e) =>
e.preventDefault()
new App.OverviewSettings(
overview_id: @overview.id
view_mode: 'd'
)
page: (e) =>
e.preventDefault()
@item_from = $(e.target).data('from')
if !@item_from
@item_from = $(e.target).parent().data('from')
return if !@item_from
@fetch()

View file

@ -1,164 +0,0 @@
class App.DashboardTicketSearch extends App.Controller
events:
'click [data-type=page]': 'page'
constructor: ->
super
@item_from = 1
@navupdate '#'
@key = @name + Math.floor( Math.random() * 999999 ).toString()
# render
@fetch()
fetch: (force) =>
@ajax(
id: 'dashboard_ticket_search' + @key,
type: 'GET',
url: @apiPath + '/tickets/search',
data:
condition: @condition
order: @order
detail: true
limit: 200
processData: true,
success: (data) =>
@load( data, true )
)
load: (data = false, ajax = false) =>
if ajax
App.Store.write( 'dashboard_ticket_search' + @key, data )
# load assets
App.Collection.loadAssets( data.assets )
@render( data )
else
data = App.Store.get( 'dashboard_ticket_search' + @key )
if data
@render( data )
render: (data) ->
return if !data
return if !data.tickets
@overview =
name: @name
@tickets_count = data.tickets_count
@ticket_ids = data.tickets
per_page = @per_page || 5
items_total = @tickets_count
items_per_page = Math.min(per_page || 10, @tickets_count)
items_from = @item_from
items_till = items_from-1 + items_per_page
if items_till > items_total
items_till = items_total
html = App.view('dashboard/ticket')(
overview: @overview
items_per_page: items_per_page
items_from: items_from
items_till: items_till
items_total: items_total
)
html = $(html)
html.find('li').removeClass('active')
html.find(".page [data-id=\"#{@start_page}\"]").parents('li').addClass('active')
@tickets_in_table = []
i = items_from - 1
while i < items_till
if @ticket_ids[ i ]
@tickets_in_table.push App.Ticket.retrieve( @ticket_ids[ i ] )
i = i + 1
openTicket = (id,e) =>
ticket = App.Ticket.fullLocal(id)
@navigate ticket.uiUrl()
callbackTicketTitleAdd = (value, object, attribute, attributes, refObject) =>
attribute.title = object.title
value
callbackLinkToTicket = (value, object, attribute, attributes, refObject) =>
attribute.link = object.uiUrl()
value
callbackResetLink = (value, object, attribute, attributes, refObject) =>
attribute.link = undefined
value
callbackUserPopover = (value, object, attribute, attributes, refObject) =>
attribute.class = 'user-popover'
attribute.data =
id: refObject.id
value
callbackIconHeader = (header) ->
attribute =
name: 'icon'
display: ''
translation: false
style: 'width: 28px'
header.unshift(0)
header[0] = attribute
header
callbackIcon = (value, object, attribute, header, refObject) ->
value = ' '
attribute.class = object.icon()
attribute.link = ''
attribute.title = App.i18n.translateInline( object.iconTitle() )
value
new App.ControllerTable(
overview: @view.d
el: html.find('.table-overview'),
model: App.Ticket
objects: @tickets_in_table,
checkbox: false
groupBy: @group_by
bindRow:
events:
'click': openTicket
callbackHeader: callbackIconHeader
callbackAttributes:
icon:
[ callbackIcon ]
customer_id:
[ callbackResetLink, callbackUserPopover ]
owner_id:
[ callbackResetLink, callbackUserPopover ]
title:
[ callbackLinkToTicket, callbackTicketTitleAdd ]
number:
[ callbackLinkToTicket, callbackTicketTitleAdd ]
)
@html html
# show frontend times
@frontendTimeUpdate()
# start user popups
@userPopups()
zoom: (e) =>
e.preventDefault()
id = $(e.target).parents('[data-id]').data('id')
@navigate 'ticket/zoom/' + id
page: (e) =>
e.preventDefault()
id = $(e.target).data('id')
@item_from = id
@load()
page: (e) =>
e.preventDefault()
@item_from = $(e.target).data('from')
if !@item_from
@item_from = $(e.target).parent().data('from')
return if !@item_from
@load()

View file

@ -1,4 +1,6 @@
class App.Dashboard extends App.Controller
events:
'click .tabs .tab': 'toggle'
constructor: ->
super
@ -6,54 +8,10 @@ class App.Dashboard extends App.Controller
@navigate '#'
return
@plugins = {
main: {
my_assigned: {
controller: App.DashboardTicket,
params: {
view: 'my_assigned',
},
},
all_unassigned: {
controller: App.DashboardTicket,
params: {
view: 'all_unassigned',
},
},
},
side: {
activity_stream: {
controller: App.DashboardActivityStream,
params: {
limit: 20,
},
},
# rss_atom: {
# controller: App.DashboardRss,
# params: {
# head: 'Heise ATOM',
# url: 'http://www.heise.de/newsticker/heise-atom.xml',
# limit: 5,
# },
# },
# rss_rdf: {
# controller: App.DashboardRss,
# params: {
# head: 'Heise RDF',
# url: 'http://www.heise.de/newsticker/heise.rdf',
# limit: 5,
# },
# },
# recent_viewed: {
# controller: App.DashboardRecentViewed,
# }
}
}
# render page
@render()
# rerender view, e. g. on langauge change
# rerender view, e. g. on language change
@bind 'ui:rerender', =>
return if !@authenticate(true)
@render()
@ -64,28 +22,13 @@ class App.Dashboard extends App.Controller
head: 'Dashboard'
)
for area, plugins of @plugins
for name, plugin of plugins
target = area + '_' + name
@el.find('.' + area + '-overviews').append('<div class="" id="' + target + '"></div>')
if plugin.controller
params = plugin.params || {}
params.el = @el.find( '#' + target )
new plugin.controller( params )
dndOptions =
handle: 'h2.can-move'
placeholder: 'can-move-plcaeholder'
tolerance: 'pointer'
distance: 15
opacity: 0.6
forcePlaceholderSize: true
new App.DashboardActivityStream(
el: @$('.sidebar')
limit: 25
)
@renderWidgetClockFace 25
@el.find( '#sortable' ).sortable( dndOptions )
@el.find( '#sortable-sidebar' ).sortable( dndOptions )
renderWidgetClockFace: (time) =>
canvas = @el.find 'canvas'
ctx = canvas.get(0).getContext '2d'
@ -155,6 +98,13 @@ class App.Dashboard extends App.Controller
release: =>
# no
toggle: (e) =>
@$('.tabs .tab').removeClass('active')
$(e.target).addClass('active')
target = $(e.target).data('area')
@$('.tab-content').addClass('hidden')
@$(".tab-content.#{target}").removeClass('hidden')
class DashboardRouter extends App.ControllerPermanent
constructor: (params) ->
super

View file

@ -1,11 +1,35 @@
<div class="dashboard main flex center">
<div class="tabs wide-tabs horizontal">
<div class="tab my-stats active"><%- @T('My Stats') %></div>
<div class="tab my-groups"><%- @T('My Group') %></div>
<div class="tab all-stats"><%- @T('All') %></div>
<div class="tab active" data-area="stat-widgets"><%- @T('My Stats') %></div>
<div class="tab" data-area="first-steps-widgets"><%- @T('First Steps') %></div>
</div>
<div class="stat-widgets three-columns horizontal">
<div class="tab-content first-steps-widgets hidden">
Configuration
<ul>
<li>Branding</li>
<li>Your Email Configuration</li>
<li>Invite Agents/Colliges</li>
</ul>
How to use it
<ul>
<li>Intro</li>
<li>Create a Test Ticket</li>
<li>Create new Overviews</li>
<li>Create Text Modues</li>
<li>Create Macros</li>
</ul>
Aditionals Channels
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Chat</li>
<li>Widget</li>
</ul>
</div>
<div class="tab-content stat-widgets three-columns horizontal">
<div class="column">
<div class="time stat-widget vertical">
<h3>∅ Waiting time today</h3>
@ -117,9 +141,7 @@
</div>
</div>
<div class="main-overviews" id="sortable">
</div>
</div>
<div class="sidebar optional">
<div class="side-overviews" id="sortable-sidebar"></div>
<h2><%- @T('Activity Stream') %></h2>
</div>

View file

@ -1 +1,14 @@
<h2 class="can-move"><%- @T( @head ) %></h2>
<div class="activity-entry">
<div class="activity-avatar js-avatar"></div>
<a href="<%- @item.link %>" class="activity-body">
<span class="activity-message">
<span class="activity-text">
<%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %>
</span>
<span class="activity-time humanTimeFromNow" data-time="<%- @item.created_at %>">?</span>
</span>
<span class="activity-icon">
<span class="<%- @item.cssIcon %> icon"></span>
</span>
</a>
</div>

View file

@ -1,14 +0,0 @@
<div class="activity-entry">
<div class="activity-avatar js-avatar"></div>
<a href="<%- @item.link %>" class="activity-body">
<span class="activity-message">
<span class="activity-text">
<%= @item.created_by.displayName() %> <%- @T( @item.type ) %> <%- @T( @item.object_name ) %><% if @item.title: %> (<%= @item.title %>)<% end %>
</span>
<span class="activity-time humanTimeFromNow" data-time="<%- @item.created_at %>">?</span>
</span>
<span class="activity-icon">
<span class="<%- @item.cssIcon %> icon"></span>
</span>
</a>
</div>

View file

@ -1,8 +0,0 @@
<div class="span3">
<h2 class="can-move"><%- @T( @head ) %></h2>
<ul>
<% for item in @items: %>
<li><span data-id="<%= item.o_id %>"><a href="<%= item.link %>"><%= item.type %> (<%= item.title %>)</a></span></li>
<% end %>
</ul>
</div>

View file

@ -1,38 +0,0 @@
<div>
<div class="page-header">
<div class="page-header-title">
<h1 class="can-move"><%- @T( @overview.name ) %></h1>
</div>
<div class="page-header-meta">
<div class="btn btn--action" data-type="settings"><%- @T('Options') %></div>
<div class="pagination-counter">
<span class="pagination-items-range"><%- @items_from %>-<%- @items_till %></span> <%- @T("of") %> <span class="pagination-total-items"><%- @items_total %></span>
</div>
<ul class="pagination">
<li>
<% if @items_from != 1: %>
<a class="btn btn--action" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
<svg class="icon-arrow-left"><use xlink:href="#icon-arrow-left" /></svg>
</a>
<% else: %>
<a class="btn btn--action is-disabled" href="#" data-from="" data-type="page">
<svg class="icon-arrow-left arrow--disabled"><use xlink:href="#icon-arrow-left" /></svg>
</a>
<% end %>
</li>
<li>
<% if @items_till != @items_total: %>
<a class="btn btn--action" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
<svg class="icon-arrow-right"><use xlink:href="#icon-arrow-right" /></svg>
</a>
<% else: %>
<a class="btn btn--action is-disabled" href="#" data-from="" data-type="page">
<svg class="icon-arrow-right arrow--disabled"><use xlink:href="#icon-arrow-right" /></svg>
</a>
</li>
<% end %>
</ul>
</div>
</div>
<div class="table-overview"></div>
</div>