bulk action wizard

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

@@ -172,6 +172,9 @@ class App.ControllerForm extends App.Controller
     # create item id
     attribute.id = classname + '_' + attribute.name
 
+    # set label class name
+    attribute.label_class = @model.labelClass
+
     # set autofocus
     if @autofocus && attribute_count is 1
       attribute.autofocus = 'autofocus'

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

@@ -270,6 +270,8 @@ class Table extends App.ControllerContent
 
         # hide
         @el.find('.bulk-action').addClass('hide')
+
+        @resetBulkForm()
       else
 
         # show
@@ -282,6 +284,21 @@ class Table extends App.ControllerContent
         $(e.target).parents().find('[name="bulk_all"]').attr('checked', false)
     )
 
+    # bind bulk form buttons
+    @$('.js-confirm').click(@bulkFormConfirm)
+    @$('.js-cancel').click(@resetBulkForm)
+
+  bulkFormConfirm: =>
+    @$('.js-action-step').addClass('hide')
+    @$('.js-confirm-step').removeClass('hide')
+
+    # need a delay because of the click event
+    setTimeout ( => @$('.textarea.form-group textarea').focus() ), 0
+
+  resetBulkForm: =>
+    @$('.js-action-step').removeClass('hide')
+    @$('.js-confirm-step').addClass('hide')
+
   page: (e) =>
     e.preventDefault()
     id = $(e.target).data('id')
@@ -310,8 +327,7 @@ class Table extends App.ControllerContent
       { name: 'group_id',     display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @bulk, nulloption: true, class: '', item_class: ''  },
       { name: 'owner_id',     display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @bulk, nulloption: true, class: '', item_class: '' },
       { name: 'type_id',      display: 'Type',     tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', filter: articleTypeFilter, default: '9', translate: true, class: 'medium' },
-      { name: 'internal',     display: 'Visibility', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false },
-      { name: 'body',         display: 'Text',     tag: 'textarea', rows: 8, null: true, upload: false },
+      { name: 'internal',     display: 'Visibility', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false }
     ]
 
     # render init page
@@ -321,6 +337,16 @@ class Table extends App.ControllerContent
       model:
         configure_attributes: @configure_attributes_ticket
         className:            'create'
+        labelClass:           'input-group-addon'
+      form_data:   @bulk
+      noFieldset: true
+    )
+    new App.ControllerForm(
+      el: html.find('#form-ticket-bulk-text')
+      model:
+        configure_attributes: [{ name: 'body', display: 'Comment', tag: 'textarea', rows: 1, null: true, upload: false, item_class: 'flex' }]
+        className:            'create'
+        labelClass:           'input-group-addon'
       form_data:   @bulk
       noFieldset: true
     )

app/assets/javascripts/app/views/agent_ticket_view/bulk.jst.eco

@@ -1,9 +1,18 @@
-<form class="pull-left update-box bulk-action-form">
-  <div id="form-ticket-bulk"></div>
-  <input type="submit" class="btn primary submit" value="update">
+<form class="update-box bulk-action-form" role="form">
+  <div class="horizontal center js-action-step">
+    <div id="form-ticket-bulk" class="form-inline form-inline--enclosed flex horizontal"></div>
+    <div class="btn btn--primary js-confirm"><%- @T('Confirm') %></div>
+  </div>
+  <div class="horizontal center hide js-confirm-step">
+    <div id="form-ticket-bulk-text" class="form-inline flex horizontal"></div>
+    <div class="bulkAction-labelOffset">
+      <a class="subtle-link standalone js-cancel"><%- @T( 'Cancel' ) %></a>
+      <input type="submit" class="btn btn--primary submit" value="<%- @T('Update') %>">
+    </div>
+  </div>
 </form>
 <!--
-<form class="form-inline update-box bulk-action-form" role="form">
+<form class="form-inline update-box bulk-action-form">
   <div id="form-ticket-bulk2" class="horizontal">
     <div class="form-group">
       <label for="create_state_id" class="input-group-addon">Status</label>

app/assets/javascripts/app/views/generic/attribute.jst.eco

@@ -1,5 +1,5 @@
-<div class="form-group <%= @attribute.item_class %>">
-  <label for="<%= @attribute.id %>"><%- @T( @attribute.display ) %> <span><% if !@attribute.null: %>*<% end %></span></label>
+<div class="<%= @attribute.tag %> form-group<%= " #{ @attribute.item_class }" if @attribute.item_class %>">
+  <label for="<%= @attribute.id %>"<% if @attribute.label_class: %> class="<%= @attribute.label_class %>"<% end %>><%- @T( @attribute.display ) %> <span><% if !@attribute.null: %>*<% end %></span></label>
   <div class="controls">
     <%- @item %><% if @attribute.note: %><span class="glyphicon glyphicon-question-sign help-message" title="<%- @Ti( @attribute.note ) + ' ' %>"></span><% end %>
 	<% if @attribute.remove: %><span><a href="#" class="glyphicon glyphicon-minus"></a></span><% end %>

app/assets/javascripts/app/views/generic/select.jst.eco

@@ -1,4 +1,4 @@
-<select id="<%= @attribute.id %>" class="form-control <%= @attribute.class %>" name="<%= @attribute.name %>" <%= @attribute.multiple %> <%= @attribute.required %> <%= @attribute.autofocus %>>
+<select id="<%= @attribute.id %>" class="form-control<%= " #{ @attribute.class }" if @attribute.class %>" name="<%= @attribute.name %>" <%= @attribute.multiple %> <%= @attribute.required %> <%= @attribute.autofocus %>>
 <% if @attribute.options: %>
 <% for row in @attribute.options: %>
   <option value="<%= row.value %>" <%= row.selected %> <%= row.disabled %>><%= row.name %></option>

app/assets/stylesheets/zzz.css.erb

@@ -578,6 +578,7 @@ label {
   .subtle-link {
     color: rgba(0,0,0,.32);
     text-decoration: underline;
+    cursor: pointer;
   }
 
   .subtle-link:hover {
@@ -1302,6 +1303,14 @@ footer {
     0 -3px rgba(0,0,0,.01);
 }
 
+  .bulk-action .btn {
+    margin: 0 10px;
+  }
+
+  .bulkAction-labelOffset {
+    margin-top: 14px;
+  }
+
 .show_toogle {
   font-size: 10px;
   line-height: 12px;
@@ -1390,7 +1399,8 @@ footer {
   padding: 9px 24px 8px;
 }
 
-.btn--primary {
+.btn--primary,
+.btn--primary:hover {
   color: white;
   background: #419ed7;
   border-color: #419ed7;
@@ -1432,7 +1442,7 @@ footer {
     background: none;
     color: #F0FAFF;
   }
-  
+
   .main-navigation > li.active > a .icon,
   .main-navigation > li > a:hover .icon,
   .main-navigation > li > a:focus .icon {
@@ -2196,7 +2206,7 @@ footer {
   }
 
 .form-inline .input-group-addon,
-.form-inline .form-control {
+.form-inline .form-control:not(textarea) {
   background: white;
   border: none;
   line-height: 1;
@@ -2254,7 +2264,8 @@ footer {
     margin: 10px;
   }
 
-  .form-inline .form-group:not(:last-child) {
+  .form-inline .form-group:not(:last-child),
+  .form-inline.form-inline--enclosed .form-group {
     border-right: 1px solid #f0f0f0;
   }
 
@@ -2268,7 +2279,7 @@ footer {
     position: relative;
   }
 
-  .form-inline .form-control {
+  .form-inline .form-control:not(textarea) {
     width: 100%;
     height: 100%;
     left: 0;
@@ -2285,6 +2296,24 @@ footer {
             appearance: none;
   }
 
+  .form-inline .textarea.form-group {
+    padding: 0 18px;
+    height: auto;
+    flex-grow: 1;
+  }
+
+    .form-inline .textarea.form-group  .input-group-addon {
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 5px;
+    }
+
+    .form-inline textarea.form-control {
+      display: block;
+      width: 100%;
+      resize: vertical;
+    }
+
 .ticketZoom {
   background: #f8f9fa;
 }