toast for ordering and deleting elements

Author: libargutxi

src/cs_dynamicpages/browser/static/delete-row.js

@@ -114,6 +114,7 @@
           if (modal) {
             modal.hide();
           }
+          sessionStorage.setItem('toast-message', 'Element deleted successfully.');
           // Refresh the page after successful update
           window.location.reload();
         });

src/cs_dynamicpages/browser/static/reorder-rows.js

@@ -18,21 +18,14 @@
       !document.body.classList.contains("template-dynamic-view") ||
       !document.body.classList.contains("userrole-manager")
     ) {
-      console.log(
-        "Not in dynamic-view edit mode, skipping row reordering initialization"
-      );
       return;
     }
 
-    console.log("Initializing row reordering...");
     // Find all move up/down buttons
     const moveUpButtons = document.querySelectorAll('a[data-action="move-up"]');
     const moveDownButtons = document.querySelectorAll(
       'a[data-action="move-down"]'
     );
-    console.log(
-      `Found ${moveUpButtons.length} move-up buttons and ${moveDownButtons.length} move-down buttons`
-    );
 
     // Add event listeners to move up buttons
     moveUpButtons.forEach((button) => {
@@ -46,11 +39,7 @@
           if (this.disabled) return;
           this.disabled = true;
 
-          console.log("Move up button clicked");
           const element = this.closest('[data-move-target="true"]');
-          console.log(
-            `Moving element with ID: ${element.dataset.elementid} up`
-          );
 
           // Re-habilitar el botón después de un tiempo
           setTimeout(() => {
@@ -75,11 +64,7 @@
           if (this.disabled) return;
           this.disabled = true;
 
-          console.log("Move down button clicked");
           const element = this.closest('[data-move-target="true"]');
-          console.log(
-            `Moving element with ID: ${element.dataset.elementid} down`
-          );
 
           // Re-habilitar el botón después de un tiempo
           setTimeout(() => {
@@ -97,15 +82,12 @@
     const elementId = element.dataset.elementid;
     if (!elementId) {
       const errorMsg = "No data-element-id attribute found on element";
-      console.error(errorMsg);
       alert(errorMsg);
       return;
     }
 
-    console.log(`Preparing to move element ${elementId} with delta ${delta}`);
 
     const baseUrl = element.dataset.parenturl || "";
-    console.log(`Sending request to: ${baseUrl}`);
 
     const requestBody = {
       ordering: {
@@ -114,7 +96,6 @@
       },
     };
 
-    console.log("Request payload:", JSON.stringify(requestBody, null, 2));
 
     fetch(baseUrl, {
       method: "PATCH",
@@ -127,16 +108,13 @@
       credentials: "same-origin",
     })
       .then((response) => {
-        console.log(`Received response with status: ${response.status}`);
-        console.log("Response headers:", response.headers);
-        console.log("Response ok:", response.ok);
         if (!response.ok) {
           const error = new Error(`HTTP error! status: ${response.status}`);
-          console.error("Response not OK:", error);
           throw error;
         }
       })
       .finally(() => {
+        sessionStorage.setItem('toast-message', 'Element reordered successfully.');
         // Refresh the page after successful update
         window.location.reload();
       });

src/cs_dynamicpages/browser/static/toast-handler.js

@@ -0,0 +1,23 @@
+(function () {
+  "use strict";
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const toastMessage = sessionStorage.getItem("toast-message");
+
+    if (toastMessage) {
+      const toastLiveExample = document.getElementById("liveToast");
+      if (toastLiveExample) {
+        const toastBody = toastLiveExample.querySelector(".toast-body");
+        if (toastBody) {
+          toastBody.textContent = toastMessage;
+        }
+
+        const toast = new bootstrap.Toast(toastLiveExample);
+        toast.show();
+      }
+
+      // Clear the message from session storage
+      sessionStorage.removeItem("toast-message");
+    }
+  });
+})();

src/cs_dynamicpages/profiles/default/registry/dynamic_bundle.xml

@@ -35,6 +35,17 @@
     <value key="expression" />
   </records>
 
+  <records interface="Products.CMFPlone.interfaces.IBundleRegistry"
+           prefix="plone.bundles/cs_dynamicpages.toast_handler"
+  >
+    <value key="enabled">True</value>
+    <value key="jscompilation">++plone++cs_dynamicpages.edit/toast-handler.js</value>
+    <value key="depends">plone</value>
+    <value key="load_async">True</value>
+    <value key="load_defer">False</value>
+    <value key="expression" />
+  </records>
+
   <records interface="Products.CMFPlone.interfaces.IBundleRegistry"
            prefix="plone.bundles/cs_dynamicpages.editmode_toggle"
   >

src/cs_dynamicpages/views/dynamic_page_folder_view.py

@@ -43,7 +43,7 @@ def __call__(self):
                 type="DynamicPageRow",
                 container=self.context,
                 row_type=row_type,
-                title="New Row",
+                title=row_type,
                 description="Here goes the description",
                 id=str(random_id),
                 link_text="Link Text",

src/cs_dynamicpages/views/dynamic_view.pt

@@ -13,6 +13,16 @@
   <body>
     <metal:main fill-slot="main">
       <main id="content">
+        <div class="toast-container position-fixed bottom-0 end-0 p-3">
+          <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="toast-header">
+              <strong class="me-auto">Notification</strong>
+              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+            </div>
+            <div class="toast-body">
+            </div>
+          </div>
+        </div>
         <tal:condition-configuration condition="view/dynamic_page_folder_element">
           <div class="sticky-top right-0 d-flex justify-content-end py-2 me-2"
                tal:condition="view/can_edit"