add calendar subscriptions layout_ref
This commit is contained in:
Felix Niklas
parent
d119cc5eac
commit
a7e001db63
5 changed files with 178 additions and 4 deletions
|
|
@ -1428,4 +1428,77 @@ class searchableSelectRef extends App.ControllerContent
|
|||
|
||||
App.Config.set( 'layout_ref/search_select', searchableSelectRef, 'Routes' )
|
||||
|
||||
|
||||
class calendarSubscriptionsRef extends App.ControllerContent
|
||||
|
||||
elements:
|
||||
'input[type=checkbox]': 'options'
|
||||
'output': 'output'
|
||||
|
||||
events:
|
||||
'change input[type=checkbox]': 'onOptionsChange'
|
||||
'click .js-select': 'selectAll'
|
||||
|
||||
constructor: ->
|
||||
super
|
||||
@render()
|
||||
|
||||
render: ->
|
||||
@html App.view('layout_ref/calendar_subscription')
|
||||
|
||||
selectAll: (e) ->
|
||||
e.currentTarget.focus()
|
||||
e.currentTarget.select()
|
||||
|
||||
onOptionsChange: =>
|
||||
optionCount = 3
|
||||
data = @options.serializeArray()
|
||||
modules = []
|
||||
translationTable =
|
||||
own: 'my'
|
||||
not_assigned: 'not assigned'
|
||||
new_open: 'new & open'
|
||||
pending: 'pending'
|
||||
escalating: 'escalating'
|
||||
|
||||
# check if there is any data
|
||||
if data.length is 0
|
||||
@output
|
||||
.attr 'disabled', true
|
||||
.text "No subscriptions active"
|
||||
return
|
||||
|
||||
# check if all my tickets got selected
|
||||
own = data.filter((entry) -> entry.name.indexOf('own') >= 0)
|
||||
not_assigned = data.filter((entry) -> entry.name.indexOf('not_assigned') >= 0)
|
||||
|
||||
if own.length is optionCount
|
||||
modules.push "all my"
|
||||
else
|
||||
modules.push.apply modules, own.map (entry) ->
|
||||
[option, value] = entry.name.split('/')
|
||||
return "#{ translationTable[value] } #{ translationTable[option] }"
|
||||
|
||||
if not_assigned.length is optionCount
|
||||
modules.push "all not assigned"
|
||||
else
|
||||
modules.push.apply modules, not_assigned.map (entry) ->
|
||||
[option, value] = entry.name.split('/')
|
||||
return "#{ translationTable[value] } #{ translationTable[option] }"
|
||||
|
||||
@output
|
||||
.attr 'disabled', false
|
||||
.text "Subscription to #{ @joinItems modules } tickets:"
|
||||
|
||||
joinItems: (items) ->
|
||||
switch items.length
|
||||
when 1 then return items[0]
|
||||
when 2 then return "#{ items[0] } and #{ items[1] }"
|
||||
else
|
||||
return "#{ items.slice(0, -1).join(', ') } and #{ items[items.length-1] }"
|
||||
|
||||
|
||||
App.Config.set( 'layout_ref/calendar_subscription', calendarSubscriptionsRef, 'Routes' )
|
||||
|
||||
|
||||
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<div class="sidebar NavBarProfile">
|
||||
<h2>Profile</h2>
|
||||
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li><a href="#profile/language">Language</a></li>
|
||||
<li><a href="#profile/avatar">Avatar</a></li>
|
||||
<li><a href="#profile/password">Password</a></li>
|
||||
<li><a href="#profile/notifications">Notifications</a></li>
|
||||
<li class="active"><a href="#profile/calendar">Calendar</a></li>
|
||||
<li><a href="#profile/linked">Linked Accounts</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main flex">
|
||||
<div class="page-header">
|
||||
<div class="page-header-title">
|
||||
<h1>Calendar</h1>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Ticket Subscriptions</h2>
|
||||
|
||||
<p>See your tickets from within your favorite calendar by adding the following <b>url</b> to your calendar app.</p>
|
||||
|
||||
<h3>Url</h3>
|
||||
<div class="output-input">
|
||||
<output class="js-output">Subscription to all my tickets:</output>
|
||||
<input class="form-control js-select" readonly value="https://company.zammad.com/ical/tickets">
|
||||
</div>
|
||||
|
||||
<h3>Settings</h3>
|
||||
<table class="settings-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="white-space: nowrap;">Status Type
|
||||
<th colspan="2">Options
|
||||
<th width="100%">Direct URL
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>new/open
|
||||
<td><label class="inline-label"><input type="checkbox" name="new_open/own" checked> Own</label>
|
||||
<td><label class="inline-label"><input type="checkbox" name="new_open/not_assigned"> Not Assigned</label>
|
||||
<td><input class="form-control form-control--borderless js-select" readonly value="https://company.zammad.com/ical/tickets/new_open">
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pending
|
||||
<td><label class="inline-label"><input type="checkbox" name="pending/own" checked> Own</label>
|
||||
<td><label class="inline-label"><input type="checkbox" name="pending/not_assigned"> Not Assigned</label>
|
||||
<td><input class="form-control form-control--borderless js-select" readonly value="https://company.zammad.com/ical/tickets/pending">
|
||||
</tr>
|
||||
<tr>
|
||||
<td>escalating
|
||||
<td><label class="inline-label"><input type="checkbox" name="escalating/own" checked> Own</label>
|
||||
<td><label class="inline-label"><input type="checkbox" name="escalating/not_assigned"> Not Assigned</label>
|
||||
<td><input class="form-control form-control--borderless js-select" readonly value="https://company.zammad.com/ical/tickets/escalating">
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
|
||||
<ul>
|
||||
<li><a href="#layout_ref/calendar_subscription">Calendar Subscription</a></li>
|
||||
<li><a href="#layout_ref/search_select">Searchable Select</a></li>
|
||||
<li><a href="#layout_ref/schedulers">Schedulers</a></li>
|
||||
<li><a href="#layout_ref/sla">Service Level Agreements</a></li>
|
||||
|
|
|
|||
1
app/assets/stylesheets/bootstrap.css
vendored
1
app/assets/stylesheets/bootstrap.css
vendored
|
|
@ -1726,7 +1726,6 @@ output {
|
|||
color: #999;
|
||||
}
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
cursor: not-allowed;
|
||||
background-color: #eee;
|
||||
|
|
|
|||
|
|
@ -886,14 +886,24 @@ input[type=time] {
|
|||
padding-right: 34px;
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly] {
|
||||
.form-control[disabled] {
|
||||
cursor: not-allowed;
|
||||
background-color: #fff;
|
||||
color: #d5d5d5;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-control.form-control--borderless {
|
||||
border: none;
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control + .icon-arrow-down {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
|
|
@ -5305,12 +5315,41 @@ label + .wizard-buttonList {
|
|||
}
|
||||
}
|
||||
|
||||
.output-input {
|
||||
display: flex;
|
||||
margin: 0 0 14px;
|
||||
|
||||
output {
|
||||
margin: 0;
|
||||
border-radius: 3px 0 0 3px;
|
||||
border: 1px solid hsl(200,71%,59%);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: none;
|
||||
|
||||
&:focus {
|
||||
border-color: hsl(0,0%,90%);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
output {
|
||||
border-bottom: 1px solid hsl(200,71%,59%);
|
||||
margin: 14px 0 0;
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
padding: 10px 12px 8px;
|
||||
background: hsl(201,62%,93%);
|
||||
|
||||
&[disabled] {
|
||||
border-color: hsl(358,53%,56%);
|
||||
background: hsl(358,53%,76%);
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-filter-text {
|
||||
|
|
@ -5382,6 +5421,8 @@ output {
|
|||
|
||||
.settings-list {
|
||||
border-collapse: separate;
|
||||
color: hsl(60,1%,34%);
|
||||
background: white;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 34px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue