alphagov · pixeltrix · Mar 15, 2024 · Feb 5, 2024
diff --git a/app/assets/javascripts/admin-actions-autosave.js b/app/assets/javascripts/admin-actions-autosave.js
@@ -0,0 +1,64 @@
+$(function() {
+    if (typeof $ === 'undefined') { return; }
+
+    $(document).on({
+        ajaxStart: function() { $('body').addClass('ajax-active'); },
+        ajaxStop: function() { $('body').removeClass('ajax-active'); }
+    });
+
+    function debounce(f, delay) {
+        var debounceTimer = 0;
+        return function() {
+            var context = this;
+            var args = arguments;
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(function() {
+                f.apply(context, args);
+            }, delay);
+        }
+    }
+
+    function setHeaderOrLabelState(headerOrLabel, state) {
+        headerOrLabel.removeClass(['saving', 'saved', 'error']);
+        if(state) headerOrLabel.addClass(state);
+
+        headerOrLabel.next('.flash-alert').remove();
+        if("error" == state) {
+            headerOrLabel.after('<p class="flash-alert"></p>').next().text('There was an error saving. Please manually submit the form.')
+        }
+    }
+
+    var debouncedSubmitForm = debounce(function() {
+        var form = $(this).closest('form');
+        var headerOrLabel = form.prevAll('h2');
+        if(!headerOrLabel.length) {
+            headerOrLabel = $("label[for='" + $(this).attr('id') + "']");
+        }
+        setHeaderOrLabelState(headerOrLabel, 'saving');
+
+        $.ajax({
+            type: form.attr('method'),
+            url: form.attr('action'),
+            headers: { 'Accept': 'application/json' },
+            data: form.serialize(),
+            success: function(response) {
+                if(response && response.updated) {
+                    setHeaderOrLabelState(headerOrLabel, 'saved');
+                } else {
+                    setHeaderOrLabelState(headerOrLabel, 'error');
+                }
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                setHeaderOrLabelState(headerOrLabel, 'error');
+            }
+        });
+    }, 500); //500ms delay
+
+    $('input[type=checkbox][data-autosave]').change(function() {
+        debouncedSubmitForm.call(this);
+    });
+
+    $('textarea[data-autosave]').on('input', function() {
+        debouncedSubmitForm.call(this);
+    });
+});
diff --git a/app/assets/stylesheets/petitions/admin/_actions.scss b/app/assets/stylesheets/petitions/admin/_actions.scss
@@ -1,3 +1,11 @@
+@keyframes spinner {
+  to {transform: rotate(360deg);}
+}
+@keyframes fadeOut {
+  from {opacity: 1;}
+  to {opacity: 0;}
+}
+
 .admin {
   .petition-actions {
     margin-top: $gutter*2;
@@ -7,6 +15,38 @@
       padding: $gutter-two-thirds 0;
       border-top: 1px solid $border-colour;
       @extend %contain-floats;
+
+      .saving::after {
+        content: "";
+        box-sizing: border-box;
+        display: inline-block;
+        top: 50%;
+        left: 50%;
+        width: 12px;
+        height: 12px;
+        margin-top: -10px;
+        margin-left: 8px;
+        border-radius: 50%;
+        border: 2px solid rgba($caution, 0.5);
+        border-top-color: $caution;
+        background: rgba($caution, 0.5);
+        animation: spinner .6s linear infinite;
+        vertical-align: 3px;
+      }
+
+      .saved::after {
+        background-color: $caution;
+        border-radius: 6px;
+        content: "";
+        display: inline-block;
+        height: 12px;
+        margin-left: 8px;
+        width: 12px;
+        vertical-align: 3px;
+        animation-name: fadeOut;
+        animation-duration: 2s;
+        animation-fill-mode: forwards;
+      }
     }
 
     .petition-action-heading {

diff --git a/app/controllers/admin/archived/notes_controller.rb b/app/controllers/admin/archived/notes_controller.rb
@@ -12,9 +12,15 @@ def show
 
   def update
     if @note.update(note_params)
-      redirect_to admin_archived_petition_url(@petition)
+      respond_to do |format|
+        format.html { redirect_to admin_archived_petition_url(@petition) }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/archived/petitions/show', alert: :petition_not_updated
+      respond_to do |format|
+        format.html { render 'admin/archived/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: false } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/archived/petition_departments_controller.rb b/app/controllers/admin/archived/petition_departments_controller.rb
@@ -7,9 +7,15 @@ def show
 
   def update
     if @petition.update(petition_params)
-      redirect_to admin_archived_petition_url(@petition), notice: :petition_updated
+      respond_to do |format|
+        format.html { redirect_to admin_archived_petition_url(@petition), notice: :petition_updated }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/archived/petitions/show'
+      respond_to do |format|
+        format.html { render 'admin/archived/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: true } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/archived/petition_tags_controller.rb b/app/controllers/admin/archived/petition_tags_controller.rb
@@ -7,9 +7,15 @@ def show
 
   def update
     if @petition.update(petition_params)
-      redirect_to admin_archived_petition_url(@petition), notice: :petition_updated
+      respond_to do |format|
+        format.html { redirect_to admin_archived_petition_url(@petition), notice: :petition_updated }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/archived/petitions/show', alert: :petition_not_updated
+      respond_to do |format|
+        format.html { render 'admin/archived/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: true } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/archived/petition_topics_controller.rb b/app/controllers/admin/archived/petition_topics_controller.rb
@@ -7,9 +7,15 @@ def show
 
   def update
     if @petition.update(petition_params)
-      redirect_to admin_archived_petition_url(@petition), notice: :petition_updated
+      respond_to do |format|
+        format.html { redirect_to admin_archived_petition_url(@petition), notice: :petition_updated }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/archived/petitions/show', alert: :petition_not_updated
+      respond_to do |format|
+        format.html { render 'admin/archived/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: true } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/notes_controller.rb b/app/controllers/admin/notes_controller.rb
@@ -12,9 +12,15 @@ def show
 
   def update
     if @note.update(note_params)
-      redirect_to [:admin, @petition]
+      respond_to do |format|
+        format.html { redirect_to [:admin, @petition] }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/petitions/show', alert: :petition_not_updated
+      respond_to do |format|
+        format.html { render 'admin/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: false } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/petition_departments_controller.rb b/app/controllers/admin/petition_departments_controller.rb
@@ -7,9 +7,15 @@ def show
 
   def update
     if @petition.update(petition_params)
-      redirect_to [:admin, @petition], notice: :petition_updated
+      respond_to do |format|
+        format.html { redirect_to admin_petition_url(@petition), notice: :petition_updated }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/petitions/show'
+      respond_to do |format|
+        format.html { render 'admin/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: false } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/petition_tags_controller.rb b/app/controllers/admin/petition_tags_controller.rb
@@ -7,9 +7,15 @@ def show
 
   def update
     if @petition.update(petition_params)
-      redirect_to [:admin, @petition], notice: :petition_updated
+      respond_to do |format|
+        format.html { redirect_to admin_petition_url(@petition), notice: :petition_updated }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/petitions/show', alert: :petition_not_updated
+      respond_to do |format|
+        format.html { render 'admin/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: false } }
+      end
     end
   end
 

diff --git a/app/controllers/admin/petition_topics_controller.rb b/app/controllers/admin/petition_topics_controller.rb
@@ -7,9 +7,15 @@ def show
 
   def update
     if @petition.update(petition_params)
-      redirect_to [:admin, @petition], notice: :petition_updated
+      respond_to do |format|
+        format.html { redirect_to admin_petition_url(@petition), notice: :petition_updated }
+        format.json { render json: { updated: true } }
+      end
     else
-      render 'admin/petitions/show', alert: :petition_not_updated
+      respond_to do |format|
+        format.html { render 'admin/petitions/show', alert: :petition_not_updated }
+        format.json { render json: { updated: false } }
+      end
     end
   end
 

diff --git a/app/models/archived/petition.rb b/app/models/archived/petition.rb
@@ -244,6 +244,10 @@ def scheduled_for_debate
       end
     end
 
+    def notes?
+      note && note.details.present?
+    end
+
     def moderated?
       state.in?(MODERATED_STATES)
     end

diff --git a/app/views/admin/admin/_petition_action_departments.html.erb b/app/views/admin/admin/_petition_action_departments.html.erb
@@ -1,7 +1,5 @@
 <% if @petition.is_a?(::Archived::Petition) %>
-  <%= link_to 'Departments', admin_archived_petition_departments_path(@petition), class: 'petition-action-heading' %>
-<% elsif @petition.departments? %>
-  <%= link_to 'Departments', admin_petition_departments_path(@petition), class: 'petition-action-heading present' %>
+  <%= link_to 'Departments', admin_archived_petition_departments_path(@petition), class: class_names('petition-action-heading', present: @petition.departments?) %>
 <% else %>
-  <%= link_to 'Departments', admin_petition_departments_path(@petition), class: 'petition-action-heading' %>
+  <%= link_to 'Departments', admin_petition_departments_path(@petition), class: class_names('petition-action-heading', present: @petition.departments?) %>
 <% end %>
diff --git a/app/views/admin/admin/_petition_action_notes.html.erb b/app/views/admin/admin/_petition_action_notes.html.erb
@@ -1,7 +1,5 @@
 <% if @petition.is_a?(::Archived::Petition) %>
-  <%= link_to 'Notes', admin_archived_petition_notes_path(@petition), class: 'petition-action-heading' %>
-<% elsif @petition.notes? %>
-  <%= link_to 'Notes', admin_petition_notes_path(@petition), class: 'petition-action-heading present' %>
+  <%= link_to 'Notes', admin_archived_petition_notes_path(@petition), class: class_names('petition-action-heading', present: @petition.notes?) %>
 <% else %>
-  <%= link_to 'Notes', admin_petition_notes_path(@petition), class: 'petition-action-heading' %>
+  <%= link_to 'Notes', admin_petition_notes_path(@petition), class: class_names('petition-action-heading', present: @petition.notes?) %>
 <% end %>
diff --git a/app/views/admin/admin/_petition_action_tags.html.erb b/app/views/admin/admin/_petition_action_tags.html.erb
@@ -1,7 +1,5 @@
 <% if @petition.is_a?(::Archived::Petition) %>
-  <%= link_to 'Tags', admin_archived_petition_tags_path(@petition), class: 'petition-action-heading' %>
-<% elsif @petition.tags? %>
-  <%= link_to 'Tags', admin_petition_tags_path(@petition), class: 'petition-action-heading present' %>
+  <%= link_to 'Tags', admin_archived_petition_tags_path(@petition), class: class_names('petition-action-heading', present: @petition.tags?) %>
 <% else %>
-  <%= link_to 'Tags', admin_petition_tags_path(@petition), class: 'petition-action-heading' %>
+  <%= link_to 'Tags', admin_petition_tags_path(@petition), class: class_names('petition-action-heading', present: @petition.tags?) %>
 <% end %>
diff --git a/app/views/admin/admin/_petition_action_topics.html.erb b/app/views/admin/admin/_petition_action_topics.html.erb
@@ -1,7 +1,5 @@
 <% if @petition.is_a?(::Archived::Petition) %>
-  <%= link_to 'Topics', admin_archived_petition_topics_path(@petition), class: 'petition-action-heading' %>
-<% elsif @petition.topics? %>
-  <%= link_to 'Topics', admin_petition_topics_path(@petition), class: 'petition-action-heading present' %>
+  <%= link_to 'Topics', admin_archived_petition_topics_path(@petition), class: class_names('petition-action-heading', present: @petition.topics?) %>
 <% else %>
-  <%= link_to 'Topics', admin_petition_topics_path(@petition), class: 'petition-action-heading' %>
+  <%= link_to 'Topics', admin_petition_topics_path(@petition), class: class_names('petition-action-heading', present: @petition.topics?) %>
 <% end %>
diff --git a/app/views/admin/archived/notes/_petition_action_notes.html.erb b/app/views/admin/archived/notes/_petition_action_notes.html.erb
@@ -2,11 +2,19 @@
   <%= form_row :for => [f.object, :admin_notes] do %>
     <%= f.label :details, 'Notes', class: 'form-label petition-action-heading' %>
     <%= error_messages_for_field f.object, :admin_notes %>
-    <%= f.text_area :details, tabindex: increment, rows: 10, class: 'form-control' %>
+    <%= f.text_area :details, tabindex: increment, data: { autosave: true }, rows: 10, class: 'form-control' %>
   <% end %>
 
-  <%= f.submit 'Save notes', class: 'button' %>
-  <%= link_to 'Cancel', admin_archived_petition_path(@petition), class: 'button-secondary' %>
+  <%= link_to 'Done', admin_archived_petition_path(petition), class: 'button-secondary js-only' %>
+
+  <noscript>
+    <%= f.submit 'Save notes', class: 'button' %>
+    <%= link_to 'Cancel', admin_archived_petition_path(@petition), class: 'button-secondary' %>
+  </noscript>
 <% end %>
 
 <%= render 'edit_lock' %>
+
+<% content_for :admin_scripts do %>
+  <%= javascript_include_tag "admin-actions-autosave" %>
+<% end %>
diff --git a/app/views/admin/archived/petition_departments/_petition_action_departments.html.erb b/app/views/admin/archived/petition_departments/_petition_action_departments.html.erb
@@ -5,7 +5,7 @@
     <% if Department.any? %>
       <%= collection_check_boxes(:petition, :departments, Department.by_name, :id, :label) do |b| %>
         <div class="multiple-choice">
-          <%= b.check_box %>
+          <%= b.check_box data: { autosave: true } %>
           <%= b.label title: b.object.name %>
         </div>
       <% end %>
@@ -15,8 +15,16 @@
     <% end %>
   <% end %>
 
-  <%= f.submit 'Save departments', class: 'button' %>
-  <%= link_to 'Cancel', admin_archived_petition_path(petition), class: 'button-secondary' %>
+  <%= link_to 'Done', admin_archived_petition_path(petition), class: 'button-secondary js-only' %>
+
+  <noscript>
+    <%= f.submit 'Save departments', class: 'button' %>
+    <%= link_to 'Cancel', admin_archived_petition_path(petition), class: 'button-secondary' %>
+  </noscript>
 <% end %>
 
 <%= render 'edit_lock' %>
+
+<% content_for :admin_scripts do %>
+  <%= javascript_include_tag "admin-actions-autosave" %>
+<% end %>
diff --git a/app/views/admin/archived/petition_tags/_petition_action_tags.html.erb b/app/views/admin/archived/petition_tags/_petition_action_tags.html.erb
@@ -5,7 +5,7 @@
     <% if Tag.any? %>
       <%= collection_check_boxes(:petition, :tags, Tag.by_name, :id, :name) do |b| %>
         <div class="multiple-choice">
-          <%= b.check_box %>
+          <%= b.check_box data: { autosave: true } %>
           <%= b.label title: b.object.description %>
         </div>
       <% end %>
@@ -20,8 +20,16 @@
     <% end %>
   <% end %>
 
-  <%= f.submit 'Save tags', class: 'button' %>
-  <%= link_to 'Cancel', admin_archived_petition_path(petition), class: 'button-secondary' %>
+  <%= link_to 'Done', admin_archived_petition_path(petition), class: 'button-secondary js-only' %>
+
+  <noscript>
+    <%= f.submit 'Save tags', class: 'button' %>
+    <%= link_to 'Cancel', admin_archived_petition_path(petition), class: 'button-secondary' %>
+  </noscript>
 <% end %>
 
 <%= render 'edit_lock' %>
+
+<% content_for :admin_scripts do %>
+  <%= javascript_include_tag "admin-actions-autosave" %>
+<% end %>