new user preference: calendar subscriptions

app/assets/javascripts/app/controllers/_profile/calendar_subscriptions.js.coffee

@@ -0,0 +1,104 @@
+class CalendarSubscriptions extends App.Controller
+  elements:
+    'input[type=checkbox]': 'options'
+    'output': 'output'
+
+  events:
+    'change input[type=checkbox]': 'onOptionsChange'
+    'click .js-select': 'selectAll'
+    'click .js-showLink': 'showLink'
+
+  constructor: ->
+    super
+    return if !@authenticate()
+
+    @translationTable =
+      new_open: App.i18n.translatePlain('new & open')
+      pending: App.i18n.translatePlain('pending')
+      escalation: App.i18n.translatePlain('escalation')
+
+    @render()
+
+  render: =>
+    userPreferences = @Session.get('preferences')
+    @preferences =
+      new_open:
+        own: true
+        not_assigned: false
+      pending:
+        own: true
+        not_assigned: false
+      escalation:
+        own: true
+        not_assigned: false
+
+    if userPreferences.ical
+      if userPreferences.ical.ticket
+        _.extend(@preferences, userPreferences.ical.ticket)
+
+    @html App.view('profile/calendar_subscriptions')
+      baseurl: window.location.origin
+      preferences: @preferences
+      translationTable: @translationTable
+
+  showLink: (e) ->
+    $(e.currentTarget).next().removeClass('is-hidden')
+    $(e.currentTarget).remove()
+
+  selectAll: (e) ->
+    e.currentTarget.focus()
+    e.currentTarget.select()
+
+  onOptionsChange: =>
+    @setAllPreferencesToFalse()
+
+    for i, checkbox of @options.serializeArray()
+      [state, option] = checkbox.name.split('/')
+      @preferences[state][option] = true
+
+    @store()
+
+  setAllPreferencesToFalse: ->
+    for state of @preferences
+      @preferences[state].own = false
+      @preferences[state].not_assigned = false
+
+  store: ->
+    # get data
+    data =
+      user:
+        ical:
+          ticket: @preferences
+
+    @ajax(
+      id:          'preferences'
+      type:        'PUT'
+      url:         @apiPath + '/users/preferences'
+      data:        JSON.stringify data
+      success:     @success
+      error:       @error
+    )
+
+  success: (data, status, xhr) =>
+    App.User.full(
+      App.Session.get( 'id' ),
+      =>
+        App.i18n.set( @locale )
+        App.Event.trigger( 'ui:rerender' )
+        @notify(
+          type: 'success'
+          msg:  App.i18n.translateContent( 'Successfully!' )
+        )
+      ,
+      true
+    )
+
+  error: (xhr, status, error) =>
+    @render()
+    data = JSON.parse( xhr.responseText )
+    @notify(
+      type: 'error'
+      msg:  App.i18n.translateContent( data.message )
+    )
+
+App.Config.set( 'CalendarSubscriptions', { prio: 4000, name: 'Calendar Subscriptions', parent: '#profile', target: '#profile/calendar_subscriptions', controller: CalendarSubscriptions }, 'NavBarProfile' )

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -1444,7 +1444,7 @@ class calendarSubscriptionsRef extends App.ControllerContent
     @render()
 
   render: ->
-    @html App.view('layout_ref/calendar_subscription')
+    @html App.view('layout_ref/calendar_subscriptions')
 
   selectAll: (e) ->
     e.currentTarget.focus()
@@ -1498,7 +1498,7 @@ class calendarSubscriptionsRef extends App.ControllerContent
         return "#{ items.slice(0, -1).join(', ') } and #{ items[items.length-1] }"
 
 
-App.Config.set( 'layout_ref/calendar_subscription', calendarSubscriptionsRef, 'Routes' )
+App.Config.set( 'layout_ref/calendar_subscriptions', calendarSubscriptionsRef, 'Routes' )
 
 
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', translate: true, target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

app/assets/javascripts/app/views/profile/calendar_subscriptions.jst.eco

@@ -0,0 +1,32 @@
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%= @T('Calendar') %></h1>
+  </div>
+</div>
+<h2><%= @T('Ticket Subscriptions') %></h2>
+
+<p><%= @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
+
+<h3><%= @T('Combined Url') %></h3>
+<input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
+
+<h3><%= @T('Subscription Settings') %></h3>
+<table class="settings-list">
+  <thead>
+    <tr>
+      <th style="white-space: nowrap;"><%= @T('Status Type') %>
+      <th colspan="2"><%= @T('Options') %>
+      <th width="100%"><%= @T('Direct URL') %>
+    </tr>
+  </thead>
+  <tbody>
+    <% for stateType, options of @preferences: %>
+    <tr>
+      <td style="text-transform: capitalize"><%= @translationTable[stateType] %>
+      <td><label class="inline-label"><input type="checkbox" name="<%= stateType %>/own"<%= if options.own then ' checked' %>> <%= @T('own tickets') %></label>
+      <td><label class="inline-label"><input type="checkbox" name="<%= stateType %>/not_assigned"<%= if options.not_assigned then ' checked' %>> <%= @T('not assigned tickets') %></label>
+      <td><div class="btn btn--table btn--text js-showLink"><%= @T('Show') %></div><input class="form-control form-control--borderless js-select is-hidden" readonly value="<%= @baseurl %>/ical/tickets/<%= stateType %>">
+    </tr>
+    <% end %>
+  </tbody>
+</table>

app/assets/stylesheets/zammad.css.scss

@@ -294,6 +294,7 @@ span[data-tooltip]:hover:before {
     font-weight: 300;
     border: none;
     margin: 5px 6px 0;
+    vertical-align: baseline; /* calendar_subscriptions.jst.eco */
     
     .icon {
       vertical-align: middle;
@@ -693,7 +694,7 @@ h2.popover-title {
 
 h3 {
   font-size: 13px;
-  margin: 14px 0 6px;
+  margin: 20px 0 8px;
   color: #a9bcc4;
   font-weight: 200;
   text-transform: uppercase;
@@ -886,6 +887,10 @@ input[type=time] {
     padding-right: 34px;
   }
 
+  .form-control.is-hidden {
+    display: none;
+  }
+
   .form-control[disabled] {
     cursor: not-allowed;
     background-color: #fff;
@@ -5462,6 +5467,10 @@ output {
     color: hsl(198,18%,72%);
   }
 
+  .btn--table {
+    margin: 0;
+  }
+
   th:not(:last-child),
   td:not(:last-child) {
     border-right: none;