SAW - Bootstrap 4 Forms Styling Fixes

app/assets/javascripts/surveyor/responses.js.coffee

@@ -23,7 +23,7 @@ $(document).ready ->
 
   $(document).on 'click', '#responsesList .export button', ->
     url = new URL($('#responsesTable').data('url'), window.location.origin)
-    url.pathname = url.pathname.replace('json', 'csv')
+    url.pathname = url.pathname.replace('json', 'xlsx')
     window.location = url
 
 
@@ -104,14 +104,6 @@ $(document).ready ->
       $('.survey-select option').prop('disabled', false)
       $('.survey-select').selectpicker('refresh')
 
-  $('#responses-panel .export button').removeClass('dropdown-toggle').removeAttr('data-toggle')
-  $('#responses-panel .export button .caret').remove()
-  $('#responses-panel .export .dropdown-menu').remove()
-
-  $(document).on 'click', '#responses-panel .export button', ->
-    $(this).parent().removeClass('open')
-    window.location = '/surveyor/responses.xlsx'
-
   if $('#responseStartDatePicker').length && $('#responseEndDatePicker').length
     startDate = $('#responseStartDatePicker').data().date
     endDate   = $('#responseEndDatePicker').data().date

app/helpers/surveyor/responses_helper.rb

@@ -21,14 +21,15 @@
 module Surveyor::ResponsesHelper
 
   def complete_display(response)
-    klass = response.completed? ? 'glyphicon glyphicon-ok text-success' : 'glyphicon glyphicon-remove text-danger'
-
-    content_tag(:h4, content_tag(:span, '', class: klass))
+    if response.completed?
+      content_tag(:h4, icon('fas', 'check'), class: 'text-success')
+    else
+      content_tag(:h4, icon('fas', 'times'), class: 'text-danger')
+    end
   end
 
   def response_options(response, accessible_surveys)
     # See https://www.pivotaltracker.com/story/show/157749896 for scenarios
-
     view_permissions =
       if response.survey.is_a?(SystemSurvey) && response.survey.system_satisfaction?
         current_user.is_site_admin?
@@ -52,10 +53,11 @@ def response_options(response, accessible_surveys)
         current_user.is_site_admin? || accessible_surveys.include?(response.survey)
       end
 
-    [ view_response_button(response, view_permissions),
+    content_tag(:div,
+    raw([ view_response_button(response, view_permissions),
       edit_response_button(response, edit_permissions),
       resend_survey_button(response, resend_permissions)
-    ].join('')
+    ].join('')), class: 'd-flex')
   end
 
   def view_response_button(response, permissions=true)

app/views/surveyor/response_filters/_saved_searches.html.haml

@@ -26,6 +26,6 @@
     %ul.list-group.list-group-flush.border-0
       - ResponseFilter.latest_for_user(current_user.id).each do |rf|
         %li.list-group-item.d-flex.align-items-center<
-          = link_to rf.name, rf.href, remote: true, class: 'apply-filter mr-auto'
+          = link_to rf.name, rf.href, remote: true, class: 'apply-filter mr-auto text-break'
           = link_to surveyor_response_filter_path(rf), class: 'text-danger delete-filter', method: :delete, remote: true do
             = icon('fas', 'trash-alt')

app/views/surveyor/responses/_table.html.haml

@@ -27,21 +27,21 @@
     %table#responsesTable{ data: { toggle: 'table', url: surveyor_responses_path(format: :json), search: 'true', 'show-columns' => 'true', 'show-refresh' => 'true', 'show-export' => 'true', pagination: 'true', page_size: '25', sort_name: 'completion_date', sort_order: 'desc', toolbar: '#responsesCustomToolbar' } }
       %thead
         %tr
-          %th{ data: { class: 'srid col-sm-2', align: 'left', sortable: 'true', field: 'srid' } }
+          %th{ data: { class: 'srid w-auto', align: 'left', sortable: 'true', field: 'srid' } }
             = t(:surveyor)[:responses][:table][:headers][:srid]
-          %th{ data: { class: 'short-title col-sm-2', align: 'left', sortable: 'true', field: 'short_title' } }
+          %th{ data: { class: 'short-title w-auto', align: 'left', sortable: 'true', field: 'short_title' } }
             = t(:surveyor)[:responses][:table][:headers][:short_title]
-          %th{ data: { class: 'primary-pi col-sm-1', align: 'left', sortable: 'true', field: 'primary_pi' } }
+          %th{ data: { class: 'primary-pi w-auto', align: 'left', sortable: 'true', field: 'primary_pi' } }
             = t(:surveyor)[:responses][:table][:headers][:primary_pi]
-          %th{ data: { class: 'title col-sm-2', align: 'left', sortable: 'true', field: 'title' } }
+          %th{ data: { class: 'title w-auto', align: 'left', sortable: 'true', field: 'title' } }
             = t('surveyor.responses.table.headers.title', type: type)
-          %th{ data: { class: 'complete col-sm-1', align: 'center', sortable: 'true', field: 'by' } }
+          %th{ data: { class: 'completed-by w-auto', align: 'center', sortable: 'true', field: 'by' } }
             = t(:surveyor)[:responses][:table][:headers][:by]
-          %th{ data: { class: 'complete col-sm-1', align: 'center', sortable: 'true', field: 'complete', visible: 'false' } }
+          %th{ data: { class: 'complete w-auto', align: 'center', sortable: 'true', field: 'complete', visible: 'false' } }
             = t(:surveyor)[:responses][:table][:headers][:complete]
-          %th{ data: { class: 'completion-date col-sm-1', align: 'left', sortable: 'true', sorter: 'dateSorter', field: 'completion_date' } }
+          %th{ data: { class: 'completion-date w-auto', align: 'left', sortable: 'true', sorter: 'dateSorter', field: 'completion_date' } }
             = t(:surveyor)[:responses][:table][:headers][:date]
-          %th{ data: {class: 'survey-sent-date col-sm-1', align: 'left', sortable: 'true', sorter: 'dateSorter', field: 'survey_sent_date', visible: 'false'} }
+          %th{ data: {class: 'survey-sent-date w-auto', align: 'left', sortable: 'true', sorter: 'dateSorter', field: 'survey_sent_date', visible: 'false'} }
             = t(:surveyor)[:responses][:table][:headers][:survey_sent_date]
-          %th{ data: { class: 'actions col-sm-2', align: 'center', sortable: 'false', field: 'actions' } }
+          %th{ data: { class: 'actions w-auto', align: 'center', sortable: 'false', field: 'actions' } }
             = t(:surveyor)[:responses][:table][:headers][:actions]

app/views/surveyor/responses/index.js.coffee

@@ -22,5 +22,6 @@ window.history.pushState({}, null, "<%= @url %>")
 
 $('#filterResponses').replaceWith("<%= j render 'surveyor/responses/filter_responses_form', filterrific: @filterrific %>")
 $('#responsesList').replaceWith("<%= j render 'surveyor/responses/table', type: @type %>")
+$('#responsesList .export button').addClass('no-caret').siblings('.dropdown-menu').addClass('d-none')
 
 $(document).trigger('ajax:complete') # rails-ujs element replacement bug fix

app/views/surveyor/responses/index.xlsx.axlsx

@@ -79,7 +79,7 @@ sub_header_style  = wb.styles.add_style sz: 12, b: true, bg_color: 'ADADAD', ali
 
 @responses.includes(:question_responses).order("surveys.title, surveys.version").group_by(&:survey).each do |survey, responses|
   version = "v#{survey.version}"
-  wb.add_worksheet(name: "#{survey.full_title.truncate(30 - version.length)} #{version}") do |sheet|
+  wb.add_worksheet(name: "#{survey.full_title.truncate(30 - version.length).gsub(/[\[\]\:\/\\\?\*]/, "-")} #{version}") do |sheet|
     sheet.add_row survey_header(survey), style: header_style
     sheet.add_row ["Title:", survey.title], style: [bold, default]
     sheet.add_row ["Version:", survey.version], style: [bold, default]