shared_scaffolds.js in cm-admin-2.4.0

- old
+ new

@@ -37,40 +37,111 @@
 
 $(document).on("mouseleave", ".row-action-cell", function () {
   $(this).find(".table-export-popup").addClass("hidden");
 });
 
-$(document).on("click", ".drawer-btn", function (e) {
-  e.stopPropagation();
-  var drawer_el = $(this).parent().closest(".drawer").find(".cm-drawer");
-  if (drawer_el.hasClass("hidden")) {
-    drawer_el.removeClass("hidden");
-    drawer_container = drawer_el.find(".drawer-container");
-    if (drawer_container.hasClass("drawer-slide-out")) {
-      drawer_container.removeClass("drawer-slide-out");
-    }
-    drawer_container.addClass("drawer-slide-in");
-  } else {
-    return drawer_el.addClass("hidden");
-  }
+$(document).on("click", '[data-behaviour="offcanvas"]', function (e) {
+  const drawerFetchUrl = $(this).attr("data-drawer-fetch-url");
+  const drawerContainer = $("[data-behaviour='cm-drawer-container']");
+
+  if (!drawerFetchUrl || !drawerContainer) return;
+
+  $.ajax({
+    url: drawerFetchUrl,
+    method: "GET",
+    success: function (response) {
+      drawerContainer.html(response);
+      const drawerForm = new bootstrap.Offcanvas(
+        drawerContainer.children().first()
+      );
+      drawerForm.show();
+      initializeComponents();
+      handleDrawerFormSubmission(drawerForm);
+    },
+    error: function (error) {
+      console.error("Error:", error);
+    },
+  });
 });
 
-$(document).on("click", ".drawer-close", function (e) {
-  e.stopPropagation();
-  $(".drawer-container").removeClass("drawer-slide-in");
-  $(".drawer-container").addClass("drawer-slide-out");
-  setTimeout(() => {
-    $(".cm-drawer").addClass("hidden");
-  }, 300);
+$(document).on("click", '[data-bs-dismiss="offcanvas"]', function (e) {
+  $(document).off("submit", "[data-is-drawer-form='true']");
 });
 
+function handleDrawerFormSubmission(drawerForm) {
+  $(document).on("submit", "[data-is-drawer-form='true']", function (e) {
+    e.preventDefault();
+    let url = $(this).attr("action");
+    if (url.charAt(url.length - 1) === "/") {
+      url = url.slice(0, -1);
+    }
+    url = `${url}.json`;
+    $.ajaxSetup({
+      headers: {
+        "X-CSRF-Token": $('meta[name="csrf-token"]').attr("content"),
+      },
+    });
+    const isMultipart = $(this).attr("enctype") === "multipart/form-data";
+    const ajaxOptions = {
+      url: url,
+      method: $(this).attr("method"),
+      data: null,
+      success: function (response) {
+        $('[data-behavior="flag-alert"]').addClass("hidden");
+        drawerForm.hide();
+        $(document).off("submit", "[data-is-drawer-form='true']");
+        const fromFieldId = $('[data-behavior="cm-drawer"]').attr(
+          "data-from-field-id"
+        );
+        const fromField = $(`#${fromFieldId}`);
+        toastMessage(response?.message);
+        const bsToast = $('[data-behaviour="drawer-toast"]')[0];
+        if (bsToast) {
+          const toast = new bootstrap.Toast(bsToast);
+          toast.show();
+        }
+        fromField.append(
+          `<option value="${response?.data?.id}">${response?.data?.name}</option>`
+        );
+        fromField.val(response?.data?.id).change();
+      },
+      error: function (error) {
+        $('[data-behavior="flag-alert"]').removeClass("hidden");
+        $('[data-behavior="error-list"]').html(error?.responseJSON?.message);
+      },
+    };
+    if (isMultipart) {
+      ajaxOptions["data"] = new FormData($(this)[0]);
+      ajaxOptions["contentType"] = false;
+      ajaxOptions["processData"] = false;
+      $.ajax(ajaxOptions);
+    } else {
+      ajaxOptions["data"] = $(this).serialize();
+      $.ajax(ajaxOptions);
+    }
+  });
+}
+
+function toastMessage(message) {
+  const toastHtml = ` 
+    <div class="cm-toast-container">
+      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"  data-behaviour="drawer-toast">
+        <div class="d-flex">
+          <div class="toast-body">${message}</div>
+          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+      </div>
+    </div>
+  `;
+  $('[data-behaviour="flash-container"]').html(toastHtml);
+}
+
 $(document).on("change", '[data-field-type="linked-field"]', function (e) {
   e.stopPropagation();
   var params = {};
   params[$(this).data("field-name")] = $(this).val();
   var request_url = $(this).data("target-url") + "?" + $.param(params);
-  console.log(request_url);
   $.ajax(request_url, {
     type: "GET",
     success: function (data) {
       apply_response_to_field(data);
     },
@@ -145,33 +216,33 @@
       $(this)
         .find(".card-title")
         .attr("data-bs-target", "#" + accordion_id);
       $(this).find(".accordion-collapse").attr("id", accordion_id);
     });
-    initializeComponents();
+  initializeComponents();
 };
 
 export function initializeComponents() {
-  $('.select-2').select2({
+  $(".select-2").select2({
     theme: "bootstrap-5",
   });
   flatpickr("[data-behaviour='date-only']", {
-    dateFormat: "d-m-Y"
-  })
+    dateFormat: "d-m-Y",
+  });
   flatpickr("[data-behaviour='date-time']", {
-    enableTime: true
-  })
+    enableTime: true,
+  });
   flatpickr("[data-behaviour='filter'][data-filter-type='date']", {
-    mode: 'range'
-  })
-  var el = document.getElementsByClassName('columns-list')
-  if(el[0]) {
-    Sortable.create(el[0],{
-      handle: '.dragger',
-      animation: 150
+    mode: "range",
+  });
+  var el = document.getElementsByClassName("columns-list");
+  if (el[0]) {
+    Sortable.create(el[0], {
+      handle: ".dragger",
+      animation: 150,
     });
   }
 
-  var headerElemHeight = $('.page-top-bar').height() + 64
-  var calculatedHeight = "calc(100vh - " + headerElemHeight+"px"+")"
-  $('.table-wrapper').css("maxHeight", calculatedHeight);
-}
\ No newline at end of file
+  var headerElemHeight = $(".page-top-bar").height() + 64;
+  var calculatedHeight = "calc(100vh - " + headerElemHeight + "px" + ")";
+  $(".table-wrapper").css("maxHeight", calculatedHeight);
+}