feature: use htmx for step delete, add confirmation

DataShades · Sep 13, 2023 · a0df56e · a0df56e
1 parent 62814ee
commit a0df56e
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 21 deletions.
diff --git a/ckanext/tour/assets/js/tour-init.js b/ckanext/tour/assets/js/tour-init.js
@@ -74,7 +74,7 @@ this.ckan.module('tour-init', function (jQuery) {
         _prepareSteps: function (steps) {
             steps.forEach(step => {
                 if (step.image) {
-                    step.intro = step.intro + " " + $("<img />", {
+                    step.intro = step.intro + "<br><br>" + $("<img />", {
                         src: step.image.url
                     })[0].outerHTML;
                 }

diff --git a/ckanext/tour/assets/js/tour-steps.js b/ckanext/tour/assets/js/tour-steps.js
@@ -11,8 +11,7 @@ ckan.module("tour-steps", function ($) {
             this.addStepBtn = $(".add-step");
 
             // add event listeners
-            $(document).on('click', '.add-step', this._onAddStep);
-            $(document).on('click', '.remove-step', this._onRemoveStep);
+            $(document).on('click', '.add-step', this._afterStepAdded);
             $(document).on('click', '.btn-collapse-steps', this._onCollapseAllSteps);
 
             // HTMX events
@@ -38,23 +37,39 @@ ckan.module("tour-steps", function ($) {
                 plugins: [Plugins.SortAnimation]
             }).on('drag:stopped', () => this._updateStepsIndexes())
 
+
+            document.body.addEventListener('htmx:confirm', function (evt) {
+                if (evt.detail.path.includes("/tour/delete_step")) {
+                    evt.preventDefault();
+
+                    swal({
+                        text: "Are you sure you wish to delete a step?",
+                        icon: "warning",
+                        buttons: true,
+                        dangerMode: true,
+                    }).then((confirmed) => {
+                        if (confirmed) {
+                            self._onRemoveStep(evt.detail.target.dataset.stepId);
+                            evt.detail.issueRequest();
+                        }
+                    });
+                }
+            });
         },
 
-        _onAddStep: function (e) {
+        _afterStepAdded: function (e) {
             //
         },
 
         /**
-         * Triggered on remove step
+         * Remove a step node from DOM
          *
-         * @param {event} e
+         * @param {string} e
          */
-        _onRemoveStep: function (e) {
-            e.preventDefault();
-
+        _onRemoveStep: function (stepId) {
             var self = this;
 
-            $(e.target).closest(".tour-accordion").hide('slow', function () {
+            $("#step-" + stepId).hide('slow', function () {
                 this.remove();
                 self._toggleRemoveBtns();
                 self._updateStepsIndexes();

diff --git a/ckanext/tour/assets/js/vendor/sweetalert.min.js b/ckanext/tour/assets/js/vendor/sweetalert.min.js
diff --git a/ckanext/tour/assets/webassets.yml b/ckanext/tour/assets/webassets.yml
@@ -13,6 +13,7 @@ tour-htmx:
   filter: rjsmin
   output: ckanext-tour/%(version)s-tour-htmx.js
   contents:
+    - js/vendor/sweetalert.min.js
     - js/vendor/htmx.min.js
 
 tour-css:

diff --git a/ckanext/tour/templates/tour/snippets/tour_step.html b/ckanext/tour/templates/tour/snippets/tour_step.html
@@ -15,7 +15,14 @@ <h3 class="accordion-header" id="step-header-{{ step_id }}">
             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ step_id }}"
                 aria-expanded="true" aria-controls="collapse-{{ step_id }}">
             </button>
-            <button class="remove-step btn btn-danger" data-step-id="{{ step_id }}">{{ _("Delete") }}</button>
+            <button
+                class="remove-step btn btn-danger"
+                data-step-id="{{ step_id }}"
+                hx-trigger="click"
+                hx-post="{{ h.url_for('tour.delete_step', tour_step_id=step_id) }}"
+                >
+                {{ _("Delete") }}
+            </button>
         </h3>
         <div id="collapse-{{ step_id }}" class="accordion-collapse collapse show" aria-labelledby="step-header-{{ step_id }}"
             data-bs-parent="#step-{{ step_id }}">

diff --git a/ckanext/tour/templates/tour/tour_edit.html b/ckanext/tour/templates/tour/tour_edit.html
@@ -24,6 +24,11 @@
         <div class="form-actions js-form-wrapper form-wrapper">
             <button class="btn btn-primary" type="submit">{{ _("Update tour") }}</button>
             <button class="btn btn-black btn-collapse-steps">{{ _("Collapse all steps") }}</button>
+            <button class="add-step btn btn-success" hx-trigger="click" hx-post="{{ h.url_for('tour.add_step') }}"
+                hx-vals='' hx-swap="beforeend" hx-target=".tour-steps__steps">
+                {{ _("Add step") }}
+                <i class="fa fa-plus"></i>
+            </button>
         </div>
 
         <h3>{{ _("Tour steps:") }}</h3>
@@ -36,20 +41,11 @@ <h3>{{ _("Tour steps:") }}</h3>
         {% endif %}
 
         <div class="tour-steps" data-module="tour-steps tour-htmx">
-
             <div class="tour-steps__steps">
                 {% for step in tour.steps %}
                 {% snippet 'tour/snippets/tour_step.html', step=step, step_index=loop.index %}
                 {% endfor %}
             </div>
-
-            <div class="form-actions js-form-wrapper form-wrapper">
-                <button class="add-step btn btn-success" hx-trigger="click" hx-post="{{ h.url_for('tour.add_step') }}"
-                    hx-vals='' hx-swap="beforeend" hx-target=".tour-steps__steps">
-                    {{ _("Add step") }}
-                    <i class="fa fa-plus"></i>
-                </button>
-            </div>
         </div>
     </form>
 {% endblock ap_content %}

diff --git a/ckanext/tour/views/__init__.py b/ckanext/tour/views/__init__.py
@@ -7,7 +7,7 @@
 from ckanext.admin_panel.utils import ap_before_request
 from ckanext.tour.views.tour_add import TourAddStepView, TourAddView
 from ckanext.tour.views.tour_config import TourConfigView
-from ckanext.tour.views.tour_delete import TourDeleteView
+from ckanext.tour.views.tour_delete import TourDeleteView, TourStepDeleteView
 from ckanext.tour.views.tour_list import TourListView
 from ckanext.tour.views.tour_update import TourUpdateView
 
@@ -19,6 +19,7 @@
 tour.add_url_rule("/list", view_func=TourListView.as_view("list"))
 tour.add_url_rule("/new", view_func=TourAddView.as_view("add"))
 tour.add_url_rule("/delete/<tour_id>", view_func=TourDeleteView.as_view("delete"))
+tour.add_url_rule("/delete_step/<tour_step_id>", view_func=TourStepDeleteView.as_view("delete_step"))
 tour.add_url_rule("/edit/<tour_id>", view_func=TourUpdateView.as_view("edit"))
 tour.add_url_rule("/add_step", view_func=TourAddStepView.as_view("add_step"))
 

diff --git a/ckanext/tour/views/tour_delete.py b/ckanext/tour/views/tour_delete.py
@@ -24,3 +24,12 @@ def post(self, tour_id: str) -> Response:
             tk.h.flash_success("Done!")
 
         return tk.redirect_to("tour.list")
+
+class TourStepDeleteView(MethodView):
+    def post(self, tour_step_id: str) -> str:
+        try:
+            tk.get_action("tour_step_remove")({}, {"id": tour_step_id})
+        except tk.ValidationError:
+            pass
+
+        return ""