Publish/unpublish petition from edition page

pytition/petition/static/css/common.css

@@ -31,3 +31,11 @@ nav.navbar {
 .petition-list-row {
   margin-top: 2em;
 }
+
+.petition-publish-switch input ~ label {
+    color: var(--red);
+}
+
+.petition-publish-switch input:checked ~ label {
+    color: var(--green);
+}

pytition/petition/templates/petition/edit_petition.html

@@ -29,6 +29,25 @@
 {% endblock main_title %}
 
 {% block edit_content %}
+<div data-petition-id="{{ petition.id }}" data-petition-unpublish="{% url 'petition_unpublish' petition.id %}" data-petition-publish="{% url 'petition_publish' petition.id %}"
+    class="petition-publish-switch mb-4 custom-control custom-switch
+                       {% if not petition.published %}
+                       text-muted
+                       {% else %}
+                       text-success
+                       {% endif %}" data-action="publish">
+    <input type="checkbox" class="custom-control-input"
+                           name="petition_published_{{ petition.id }}"
+                           id="petition_published_{{ petition.id }}"
+                           {% if petition.published %} checked {% endif %}>
+    <label class="custom-control-label" for="petition_published_{{ petition.id }}">
+        {% if not petition.published %}
+        {% trans "Not published" %}
+        {% else %}
+        {% trans "Published" %}
+        {% endif %}
+    </label>
+</div>
 <div class="list-group list-group-horizontal mb-5" id="list-tab" role="tablist">
     <a href="#content_form" class="list-group-item list-group-item-info list-group-item-action"
     data-toggle="list" aria-controls="content_form" role="tab"><span class="oi oi-clipboard"></span> {% trans "Content" %}</a>

pytition/petition/templates/petition/generic.js

@@ -50,47 +50,39 @@ $(function () {
 
 $(function () {
    $('[data-action="publish"]').find('input:checkbox').on("change", function() {
+    var box = $(this);
+    var publish = box.prop('checked');
+    box.prop('checked', !publish);
+    var petition_id = $(this).closest("[data-petition-id]").data("petition-id");
     var petition_publish_url = $(this).closest("[data-petition-publish]").data("petition-publish");
     var petition_unpublish_url = $(this).closest("[data-petition-unpublish]").data("petition-unpublish");
-    var box = $(this);
-    var checked = box.prop('checked');
     var label = box.siblings('label');
     var custom_switch = box.closest('.custom-switch');
     box.prop('disabled', true);
-    if (checked) {
-        label.text("{% trans "Published" %}");
-        custom_switch.removeClass("text-danger");
-        custom_switch.addClass("text-success");
-        $.ajax(petition_publish_url
-        ).done(function(){
-            box.prop('disabled', false);
-        }).fail(function () { // reset checkbox state upon failure
-            setTimeout(function(){
-                box.prop('checked', false);
-                label.text("{% trans "Not published" %}");
-                custom_switch.removeClass("text-success");
-                custom_switch.addClass("text-danger");
-                box.prop('disabled', false);
-            }, 1000);
-            //FIXME: show an alert message to the user about the failure
-        });
-    } else {
-        label.text("{% trans "Not published" %}");
-        custom_switch.removeClass("text-success");
-        custom_switch.addClass("text-danger");
-        $.ajax(petition_unpublish_url
-        ).done(function(){
+    var loader_id = 'loader_' + petition_id;
+    $(`<div id=${loader_id} class="spinner-border spinner-border-sm ml-1" \
+        style="color: initial" role="status"><span class="sr-only">Loading...</span></div>`)
+           .insertAfter(label);
+    loader_id = '#' + loader_id;
+    $.ajax(publish ? petition_publish_url : petition_unpublish_url
+    ).done(function() {
+        var published = box.prop('checked');
+        label.text(published ? "{% trans "Not published" %}" : "{% trans "Published" %}");
+        box.prop('disabled', false);
+        box.prop('checked', !box.prop('checked'));
+        $(loader_id).remove();
+        if (document.getElementById(`failed_${petition_id}`) !== null)
+            $(`#failed_${petition_id}`).remove();
+
+
+    }).fail(function () {
+        setTimeout(function() {
             box.prop('disabled', false);
-        }).fail(function () { // reset checkbox state upon failure
-            setTimeout(function() {
-                box.prop('checked', true);
-                label.text("{% trans "Published" %}");
-                custom_switch.removeClass("text-danger");
-                custom_switch.addClass("text-success");
-                box.prop('disabled', false);
-            }, 1000);
-            //FIXME: show an alert message to the user about the failure
-        });
-    }
+            $(loader_id).remove();
+            var action = box.prop('checked') ? 'unpublish' : 'publish';
+            if (!box.siblings("div.alert").length)
+                $(`<div id="failed_${petition_id}" class="alert alert-danger" role="alert">Failed to ${action} the petition, try again or refresh the page</div>`).insertAfter(label);
+        }, 1000);
+    });
    });
 });

pytition/petition/templates/petition/petition_list.html

@@ -36,7 +36,7 @@ <h4 class="card-title">{{ petition.title|striptags }}</h4>
             <p class="card-text">{{ petition.twitter_description|safe }}</p>
           {% endif %}
           <p class="text-muted">{{ petition.signature_number }} signatures</p>
-          <div class="custom-control custom-switch
+          <div class="petition-publish-switch custom-control custom-switch
                       {% if not petition.published %}
                           text-muted
                       {% else %}