cm-admin 2.3.3 → 2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f85a062f8d926712d7817aeb392c0233208690eacbefeccdbcadb90ac6e85cf
-  data.tar.gz: eb59e86b5c40e9e592d8c1c488cbb5bf9ab2d7de5e66fbad97c0abb401449688
+  metadata.gz: 78211818c7078c8cf9723ca166d19c9eaea3155544754a60fca317a8eaf86276
+  data.tar.gz: 7a53125a99db46cc8a7686076baf674eb971f20430bf680c5c0e105b06c89dc1
 SHA512:
-  metadata.gz: e4bf5998df379c42994928003eac0f18770c1650983520aae1fd2940f062d239f567066ea16469b1c7fa5135d9d77a0307be7df13c2a34342625b02da0ed2445
-  data.tar.gz: 0a7d326057c1a49aff2ef3db674ab7e21f1634634f1b527d4cb85bc535c49c0ef441b102bcb16b6d8077f33f5866d333b49c9ab6d096c9833bd7da019c43e961
+  metadata.gz: a2da45fd35ae854471c2c0255359fc96df661ebcb482c452a65734daf3364465bfe7cbb5250488a13be7381a7c129af90288b31d5c364c65bd878523ed8c75b8
+  data.tar.gz: a7ed71594d873f6c525577f2f19a48efe68bb873f331ab9b49bec2b18b980ea03bdd86fcbd8d0d83d2eb78bb3a3805e97626806c83ac43b138b88dc376638335

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    cm-admin (2.3.3)
+    cm-admin (2.4.0)
       caxlsx_rails
       cocoon (~> 1.2.15)
       csv-importer (~> 0.8.2)

data/app/assets/javascripts/cm_admin/scaffolds.js

@@ -15,7 +15,6 @@ import "moment";
 import "bootstrap";
 import "@popperjs/core";
 import "flatpickr";
-import "jgrowl";
 import "trix";
 import "@rails/actiontext";
 import Select2 from "select2";
@@ -23,7 +22,6 @@ Select2();
 
 // import '@nathanvda/cocoon'
 import "daterangepicker";
-import jqueryJgrowl from "jgrowl";
 
 document.addEventListener("turbo:load", function () {
   flatpickr("[data-behaviour='date-only']", {
@@ -38,19 +36,25 @@ document.addEventListener("turbo:load", function () {
   $(".select-2").select2({
     theme: "bootstrap-5",
   });
-  jqueryJgrowl();
   setup_select_2_ajax();
-  var el = $("[data-section='nested-form-body']")
-  if(el[0]) {
-    Sortable.create(el[0],{
-      handle: '.drag-handle',
+  const bsToast = $('[data-behaviour="toast"]')[0];
+  if (bsToast) {
+    const toast = new bootstrap.Toast(bsToast);
+    toast.show();
+  }
+  var el = $("[data-section='nested-form-body']");
+  if (el[0]) {
+    Sortable.create(el[0], {
+      handle: ".drag-handle",
       animation: 150,
       onUpdate: function (evt) {
-        var itemEl = evt.item
-        $("[data-section='nested-form-body'] tr").each(function(index, el){
-          $(el).find('.hidden-position').val(index+1)
-        })
-      }
+        var itemEl = evt.item;
+        $("[data-section='nested-form-body'] tr").each(function (index, el) {
+          $(el)
+            .find(".hidden-position")
+            .val(index + 1);
+        });
+      },
     });
   }
 });
@@ -84,18 +88,25 @@ $(document).on(
   "click",
   '[data-behaviour="permission-check-box"]',
   function (e) {
-    var form_check = $(this).closest('.form-check')
-    var form_field = $(this).closest('.form-field')
-    if($(this).is(':checked')){
-      form_check.find('.cm-select-tag').removeClass('hidden')
+    var form_check = $(this).closest(".form-check");
+    var form_field = $(this).closest(".form-field");
+    if ($(this).is(":checked")) {
+      form_check.find(".cm-select-tag").removeClass("hidden");
     } else {
-      form_check.find('.cm-select-tag').addClass('hidden')
+      form_check.find(".cm-select-tag").addClass("hidden");
     }
-    if (form_field.find('[data-behaviour="permission-check-box"]:checked').length == form_field.find('[data-behaviour="permission-check-box"]').length) {
-      form_field.find('[data-behaviour="permission-check-all"]').prop('checked', true)
-    }
-    else {
-      form_field.find('[data-behaviour="permission-check-all"]').prop('checked', false)
+    if (
+      form_field.find('[data-behaviour="permission-check-box"]:checked')
+        .length ==
+      form_field.find('[data-behaviour="permission-check-box"]').length
+    ) {
+      form_field
+        .find('[data-behaviour="permission-check-all"]')
+        .prop("checked", true);
+    } else {
+      form_field
+        .find('[data-behaviour="permission-check-all"]')
+        .prop("checked", false);
     }
   }
 );
@@ -104,13 +115,17 @@ $(document).on(
   "click",
   '[data-behaviour="permission-check-all"]',
   function (e) {
-    var form_field = $(this).closest('.form-field')
-    if($(this).is(':checked')){
-      form_field.find('[data-behaviour="permission-check-box"]').prop('checked', true)
-      form_field.find('.cm-select-tag').removeClass('hidden')
+    var form_field = $(this).closest(".form-field");
+    if ($(this).is(":checked")) {
+      form_field
+        .find('[data-behaviour="permission-check-box"]')
+        .prop("checked", true);
+      form_field.find(".cm-select-tag").removeClass("hidden");
     } else {
-      form_field.find('[data-behaviour="permission-check-box"]').prop('checked', false)
-      form_field.find('.cm-select-tag').addClass('hidden')
+      form_field
+        .find('[data-behaviour="permission-check-box"]')
+        .prop("checked", false);
+      form_field.find(".cm-select-tag").addClass("hidden");
     }
   }
 );

data/app/assets/javascripts/cm_admin/shared_scaffolds.js

@@ -39,36 +39,107 @@ $(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) {
@@ -147,31 +218,31 @@ var replaceAccordionTitle = function (element) {
         .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);
-}
+  var headerElemHeight = $(".page-top-bar").height() + 64;
+  var calculatedHeight = "calc(100vh - " + headerElemHeight + "px" + ")";
+  $(".table-wrapper").css("maxHeight", calculatedHeight);
+}

data/app/assets/stylesheets/cm_admin/base/scaffold.scss

@@ -126,3 +126,9 @@ a {
   padding: 0.375rem 0.75rem 0.375rem 0.75rem !important;
   background-position: right 0.75rem center !important;
 }
+
+.cm-toast-container {
+  @extend .position-fixed, .bottom-0, .end-0, .p-3;
+
+  z-index: 11;
+}

data/app/assets/stylesheets/cm_admin/cm_admin.css.scss

@@ -21,5 +21,4 @@
 @import "./base/alertbanner";
 @import "./components/index";
 @import "./dependency/flatpickr.min";
-@import "./dependency/jquery-jgrowl.min";
 @import "./scaffold";

data/app/assets/stylesheets/cm_admin/components/_drawer.scss

@@ -1,110 +1,27 @@
-@import "../helpers/index.scss";
-
 .cm-drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5;
-  background-color: rgba(0, 0, 0, 0.7);
-  &__container {
-    position: relative;
-    width: 360px;
-    height: 100%;
-    background: $white;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 24px;
-      background: $grey-lightest-clr;
-      &__lhs {
-        .title {
-          @include font($size: $t1-text, $color: $primary-text-clr, $weight: 600);
-          font-family: $primary-font;
-          line-height: 28px;
-          margin-bottom: 8px;
-        }
-        .description {
-          @include font($size: $t4-text, $color: $primary-text-clr);
-          font-family: $primary-font;
-          line-height: 22px;
-          margin-bottom: 0;
-        }
-      }
-      &__rhs {
-        color: $ink-lighter-clr;
-      }
-    }
-    .body {
-      padding: 24px;
-      .info-text {
-        @include font($size: $t4-text, $color: $primary-text-clr);
-        font-family: $primary-font;
-        line-height: 22px;
-      }
-    }
-  }
-}
-
-.drawer-slide-in {
-  animation: slideInLeft 0.3s ease-in forwards;
+  @extend .offcanvas-end;
+  width: 640px !important;
 }
 
-.drawer-slide-out {
-  animation: slideOutLeft 0.3s ease-in forwards;
+.offcanvas-body {
+  padding: 0;
 }
 
-@keyframes slideInLeft {
-  0% {
-    left: -400px;
-    opacity: 0;
-  }
-  100% {
-    left: 0;
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutLeft {
-  0% {
-    left: 0;
-    opacity: 1;
-  }
-  100% {
-    left: -400px;
-    opacity: 0;
-  }
+.drawer-btn {
+  @extend .btn-link;
+  margin-left: auto;
+  margin-bottom: 0;
+  font-size: $t3-text !important;
 }
 
-.drawer-btn {
-  cursor: pointer;
-  margin-left: 8px;
-  @include font($size: $t4-text, $color: $brand-color);
+.drawer-btn-group {
+  @extend .d-flex, .flex-column, .gap-2;
+  position: absolute;
+  margin: 16px 0 0 -47px;
 }
 
-//Kanban drawer styles
-.kanban-drawer {
-  .cm-drawer {
-    display: flex;
-    justify-content: flex-end;
-    &__actions {
-      display: flex;
-      flex-direction: column;
-      margin: 16px;
-    }
-    &__container {
-      width: 624px;
-      [class^="col-"] {
-        width: 100% !important;
-      }
-      .show-page__inner {
-        height: calc(100vh - 126px);
-      }
-    }
-  }
+.drawer-nav-btn {
+  @extend .btn-ghost;
+  width: 31px;
+  height: 31px;
 }

data/app/assets/stylesheets/cm_admin/scaffold.scss

@@ -1,19 +1,5 @@
 @import "helpers/index.scss";
 
-.jGrowl {
-  color: $ink-regular-clr !important;
-  font-size: $t4-text !important;
-  .success {
-    background-color: $green-light-clr !important;
-  }
-  .notice {
-    background-color: $blue-light-clr !important;
-  }
-  .error {
-    background-color: $red-light-clr !important;
-  }
-}
-
 .nested-field-wrapper {
   label {
     font-size: $t4-text;

data/app/controllers/cm_admin/resource_controller.rb

@@ -85,9 +85,9 @@ module CmAdmin
       redirect_url = request.referrer || cm_admin.send("#{@model.name.underscore}_index_path")
       respond_to do |format|
         if @ar_object.destroy
-          format.html { redirect_back fallback_location: redirect_url, notice: "#{action_name.titleize} #{@ar_object.class.name.downcase} is successful" }
+          format.html { redirect_back fallback_location: redirect_url, notice: "#{@model.formatted_name} was deleted" }
         else
-          format.html { redirect_back fallback_location: redirect_url, notice: "#{action_name.titleize} #{@ar_object.class.name.downcase} is unsuccessful" }
+          format.html { redirect_back fallback_location: redirect_url, alert: "#{@model.formatted_name} could not be deleted" }
         end
       end
     end
@@ -114,12 +114,19 @@ module CmAdmin
       @bulk_action_processor = CmAdmin::BulkActionProcessor.new(@action, @model, params).perform_bulk_action
       respond_to do |format|
         if @bulk_action_processor.invalid_records.empty?
-          format.html { redirect_to request.referrer, notice: "#{@action.name.humanize} is successful" }
+          flash[:notice] = "#{@action.formatted_name} was successful"
+          flash[:bulk_action_success] = "<b>#{@action.formatted_name} was successful</b>"
+          format.html { redirect_to request.referrer }
         else
           error_messages = @bulk_action_processor.invalid_records.map do |invalid_record|
             "<li>#{invalid_record.error_message}</li>"
           end.join
-          format.html { redirect_to request.referrer, alert: "<b>#{@action.name.humanize} is unsuccessful</b><br /><ul>#{error_messages}</ul>" }
+          flash[:alert] = "#{@action.formatted_name} was unsuccessful"
+          flash[:bulk_action_error] = "<div>
+              <div><b>#{@action.formatted_name} encountered the following errors:</b></div>
+              <ul>#{error_messages}</ul>
+            </div>"
+          format.html { redirect_to request.referrer }
         end
       end
     end
@@ -161,13 +168,13 @@ module CmAdmin
                 format.json { render json: response_object }
               elsif response_object.errors.empty?
                 redirect_url = @model.current_action.redirection_url || @action.redirection_url || request.referrer || "/cm_admin/#{@model.ar_model.table_name}/#{@response_object.id}"
-                format.html { redirect_to redirect_url, notice: "#{@action.name.titleize} is successful" }
+                format.html { redirect_to redirect_url, notice: "#{@action.formatted_name} was successful" }
               else
                 error_messages = response_object.errors.full_messages.map { |error_message| "<li>#{error_message}</li>" }.join
-                format.html { redirect_to request.referrer, alert: "<b>#{@action.name.titleize} is unsuccessful</b><br /><ul>#{error_messages}</ul>" }
+                format.html { redirect_to request.referrer, alert: "#{@action.formatted_name} was unsuccessful<br /><ul>#{error_messages}</ul>" }
               end
             rescue StandardError => e
-              format.html { redirect_to request.referrer, alert: "<div><b>#{@action.name.titleize} is unsuccessful</b><br /><ul><li>#{e.message}</li></ul></div>" }
+              format.html { redirect_to request.referrer, alert: "<div>#{@action.formatted_name} was unsuccessful<br /><ul><li>#{e.message}</li></ul></div>" }
             end
           end
         end
@@ -191,6 +198,16 @@ module CmAdmin
       @model.default_sort_direction = nil
     end
 
+    def fetch_drawer
+      @model = Model.find_by({ name: controller_name.classify })
+      return if @model.blank?
+
+      action_page_title = CmAdmin::Models::Action.find_by(@model, name: 'new').page_title
+      drawer_title = action_page_title.presence || "New #{@model&.formatted_name}"
+      @ar_object = @model.ar_model.new
+      render partial: 'layouts/drawer', locals: { drawer_title:, from_field_id: params[:from_field_id] }
+    end
+
     def get_nested_table_fields(fields)
       nested_table_fields = []
       fields.each do |field|
@@ -233,9 +250,28 @@ module CmAdmin
                            cm_admin.send("#{@model.name.underscore}_show_path", @ar_object)
                          end
           ActiveStorage::Attachment.where(id: params['attachment_destroy_ids']).destroy_all if params['attachment_destroy_ids'].present?
-          format.html { redirect_to redirect_url, allow_other_host: true, notice: "#{action_name.titleize} #{@ar_object.class.name.downcase} is successful" }
+          notice = if @current_action&.name == 'new'
+                     "#{@model&.formatted_name} was created"
+                   elsif @current_action&.name == 'edit'
+                     "#{@model&.formatted_name} was updated"
+                   else
+                     "#{@action&.formatted_name} #{@model&.formatted_name} was successful"
+                   end
+          format.html { redirect_to redirect_url, allow_other_host: true, notice: }
+          name = if @ar_object.respond_to?(:formatted_name)
+                   @ar_object.formatted_name
+                 elsif @ar_object.respond_to?(:name)
+                   @ar_object.name
+                 else
+                   @ar_object&.id
+                 end
+          format.json { render json: { message: notice, data: { id: @ar_object&.id, name: } }, status: :ok }
         else
-          format.html { render '/cm_admin/main/new', notice: "#{action_name.titleize} #{@ar_object.class.name.downcase} is unsuccessful" }
+          format.html { render '/cm_admin/main/new', notice: "#{@action&.formatted_name} #{@model&.formatted_name} was unsuccessful" }
+          format.json do
+            formatted_error_response = @ar_object.errors.full_messages.map { |error_message| "<li>#{error_message}</li>" }.join
+            render json: { message: formatted_error_response }, status: :unprocessable_entity
+          end
         end
       end
     end

data/app/javascript/stylesheets/cm_admin/application.scss

@@ -1,4 +1,3 @@
 @import "bootstrap/scss/bootstrap";
 @import "flatpickr/dist/flatpickr";
 @import "../../../../node_modules/daterangepicker/daterangepicker.css";
-@import "jgrowl/jquery.jgrowl";

data/app/views/cm_admin/main/_associated_table.html.slim

@@ -13,12 +13,13 @@
     - if @associated_model.sort_columns.present?
       = render 'cm_admin/main/sort', model: @associated_model, ar_object: @associated_ar_object
 
-- if flash[:alert].present?
-  .alert.alert-danger role="alert"
-    = flash[:alert].html_safe
-- elsif flash[:notice].present?
-  .alert.alert-success
-    = flash[:notice].html_safe
+- if flash[:bulk_action_error].present?
+  .alert.alert-danger.me-4 role="alert"
+    = flash[:bulk_action_error].html_safe
+- if flash[:bulk_action_success].present?
+  .alert.alert-success.me-4 role="alert"
+    = flash[:bulk_action_success].html_safe
+
 - bulk_actions = actions_filter(@associated_model, @associated_ar_object, :bulk_action)
 - if bulk_actions.present?
   .table-top.hidden data-section="bulk-action"

data/app/views/cm_admin/main/_card.html.slim

@@ -8,17 +8,6 @@
         i.fa.fa-table
       a.btn.btn-ghost href="#{cm_admin.send("#{@model.name.underscore}_index_path")}?page=#{params[:page] || 1}&view_type=card"
         i.fa.fa-table-cells
-  /  button.secondary-btn.column-btn data-bs-target="#columnActionModal" data-bs-toggle="modal"
-  /    span
-  /      i.fa.fa-columns.bolder
-  /    span
-  /      i.fa.fa-angle-down
-- if flash[:alert].present?
-  .alert.alert-danger role="alert"
-    = flash[:alert].html_safe
-- elsif flash[:notice].present?
-  .alert.alert-success
-    = flash[:notice].html_safe
 
 - bulk_actions = actions_filter(@model, @ar_object, :bulk_action)
 - if bulk_actions.present?

data/app/views/cm_admin/main/_kanban.html.slim

@@ -1,10 +1,3 @@
-- if flash[:alert].present?
-  .alert.alert-danger role="alert"
-    = flash[:alert].html_safe
-- elsif flash[:notice].present?
-  .alert.alert-success
-    = flash[:notice].html_safe
-
 .kanban-container
   - column_names = @ar_object.data.keys
   = hidden_field_tag :kanban_column_names, column_names

data/app/views/cm_admin/main/_table.html.slim

@@ -7,16 +7,15 @@
           i.fa.fa-table
         a.btn.btn-ghost href="#{cm_admin.send("#{@model.name.underscore}_index_path")}?page=#{params[:page] || 1}&view_type=card"
           i.fa.fa-table-cells
-
   - if @model.sort_columns.present?
-    = render 'cm_admin/main/sort', model: @model, ar_object: @ar_object
+      = render 'cm_admin/main/sort', model: @model, ar_object: @ar_object
 
-- if flash[:alert].present?
+- if flash[:bulk_action_success].present?
+  .alert.alert-success.me-4 role="success"
+    = flash[:bulk_action_success].html_safe
+- if flash[:bulk_action_error].present?
   .alert.alert-danger.me-4 role="alert"
-    = flash[:alert].html_safe
-- elsif flash[:notice].present?
-  .alert.alert-success.me-4
-    = flash[:notice].html_safe
+    = flash[:bulk_action_error].html_safe
 
 - bulk_actions = actions_filter(@model, @ar_object, :bulk_action)
 - if bulk_actions.present?

data/app/views/cm_admin/main/edit.html.slim

@@ -1,3 +1,4 @@
+.drawer-container data-behaviour="cm-drawer-container"
 .form-page
   .form-page__header
     == render 'cm_admin/main/top_navbar'

data/app/views/cm_admin/main/new.html.slim

@@ -1,3 +1,4 @@
+.drawer-container data-behaviour="cm-drawer-container"
 .form-page
   .form-page__header
     == render 'cm_admin/main/top_navbar'
@@ -5,9 +6,9 @@
     - if @ar_object.errors.present?
       .flag-alert.mb-4
         p.alert-header
-            span
-              i.fa.fa-exclamation-triangle
-            | Attention
+          span
+            i.fa.fa-exclamation-triangle
+          | Attention
         .alert-body
           p.body-title 
             | Error: unable to save #{@ar_object.class.name.downcase}

data/app/views/layouts/_cm_flash_message.html.slim

@@ -1,9 +1,6 @@
 - if flash[:notice].present?
-  javascript:
-    $.jGrowl("#{flash[:notice]}", { theme: 'notice' })
+  = toast_message(flash[:notice], 'notice')
 - elsif flash[:success].present?
-  javascript:
-    $.jGrowl("#{flash[:success]}", { theme: 'success' })
+  = toast_message(flash[:success], 'success')
 - elsif flash[:alert].present?
-  javascript:
-    $.jGrowl("#{flash[:alert].html_safe}", { theme: 'error' })
+  = toast_message(flash[:alert], 'alert')

data/app/views/layouts/_drawer.html.slim

@@ -0,0 +1,23 @@
+.offcanvas.cm-drawer tabindex="-1" id="cm-drawer" aria-labelledby="offcanvasExampleLabel" data-behavior="cm-drawer" data-from-field-id="#{params[:from_field_id]}"
+  .drawer-btn-group
+    button.drawer-nav-btn type="button" data-bs-dismiss="offcanvas" aria-label="Close"
+      i.fa-solid.fa-x
+  .offcanvas-header
+    h4 = drawer_title
+  .offcanvas-body
+    .form-page
+      .form-page__body
+        .flag-alert.mb-4.hidden data-behavior="flag-alert"
+          p.alert-header
+            span
+              i.fa.fa-exclamation-triangle
+            | Attention
+          .alert-body
+            p.body-title
+              | Error: unable to save #{@ar_object.class.name.downcase}
+            p.body-info
+              ul data-behavior="error-list"
+                - @ar_object.errors.full_messages.each do |error_message|
+                  li = error_message
+        - if @model.present?
+          = generate_form(@ar_object, @model, is_drawer_form: true)

data/app/views/layouts/cm_admin.html.slim

@@ -66,7 +66,7 @@ html
             = yield
         - else
           = yield
+    div data-behaviour="flash-container"
     = render 'layouts/cm_flash_message'
     - unless (@current_action&.view_type == :kanban || params[:view_type] == 'kanban')
       = render 'layouts/custom_action_modals'
-

data/config/importmap.rb

@@ -3,7 +3,6 @@ pin 'jquery', to: 'https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js', preload:
 pin 'bootstrap', to: 'https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js', preload: true
 pin '@popperjs/core', to: 'https://ga.jspm.io/npm:@popperjs/core@2.11.5/lib/index.js', preload: true
 pin 'flatpickr', to: 'https://ga.jspm.io/npm:flatpickr@4.6.13/dist/esm/index.js'
-pin 'jgrowl', to: 'https://ga.jspm.io/npm:jgrowl@1.4.8/jquery.jgrowl.js'
 pin 'moment', to: 'https://ga.jspm.io/npm:moment@2.29.4/moment.js'
 pin 'trix', to: 'https://ga.jspm.io/npm:trix@2.1.3/dist/trix.esm.min.js'
 pin '@rails/actiontext', to: 'https://ga.jspm.io/npm:@rails/actiontext@7.1.3-4/app/assets/javascripts/actiontext.esm.js'

data/config/routes.rb

@@ -23,6 +23,10 @@ CmAdmin::Engine.routes.draw do
       end
     end
 
+    scope model.name.tableize do
+      send(:get, 'fetch_drawer', to: "#{model.name.underscore}#fetch_drawer", as: "cm_fetch_drawer_#{model.name.underscore}")
+    end
+
     model.available_actions.sort_by { |act| act.name }.each do |act|
       scope model.name.tableize do
         # Define route only when action trail related field is present

data/lib/cm_admin/model.rb

@@ -122,7 +122,7 @@ module CmAdmin
     end
 
     def formatted_name
-      @display_name != @name ? @display_name : @ar_model.table_name
+      @display_name != @name ? @display_name : @name.titleize
     end
 
     def alert_box(options = {})

data/lib/cm_admin/models/action.rb

@@ -5,9 +5,9 @@ module CmAdmin
     class Action
       include Actions::Blocks
       attr_accessor :name, :display_name, :verb, :layout_type, :layout, :partial, :path, :page_title, :page_description,
-        :child_records, :is_nested_field, :nested_table_name, :parent, :display_if, :route_type, :code_block,
-        :display_type, :action_type, :redirection_url, :sort_direction, :sort_column, :icon_name, :scopes, :view_type,
-        :kanban_attr, :model_name, :redirect_to
+                    :child_records, :is_nested_field, :nested_table_name, :parent, :display_if, :route_type, :code_block,
+                    :display_type, :action_type, :redirection_url, :sort_direction, :sort_column, :icon_name, :scopes, :view_type,
+                    :kanban_attr, :model_name, :redirect_to
 
       VALID_SORT_DIRECTION = Set[:asc, :desc].freeze
 
@@ -23,14 +23,14 @@ module CmAdmin
         end
         set_default_values
         attributes.each do |key, value|
-          self.send("#{key.to_s}=", value)
+          send("#{key}=", value)
         end
-        self.send("code_block=", block) if block_given?
+        send('code_block=', block) if block_given?
       end
 
       def set_default_values
         self.is_nested_field = false
-        self.display_if = lambda { |arg| return true }
+        self.display_if = ->(_arg) { true }
         self.display_type = :button
         self.action_type = :default
         self.sort_column = :created_at
@@ -44,7 +44,7 @@ module CmAdmin
         self.kanban_attr = {}
       end
 
-      def set_values(page_title, page_description, partial, redirect_to = nil, view_type=:table)
+      def set_values(page_title, page_description, partial, redirect_to = nil, view_type = :table)
         self.page_title = page_title
         self.page_description = page_description
         self.partial = partial
@@ -64,6 +64,10 @@ module CmAdmin
         end
       end
 
+      def formatted_name
+        display_name || name.titleize
+      end
+
       class << self
         def find_by(model, search_hash)
           model.available_actions.find { |i| i.name == search_hash[:name] }

data/lib/cm_admin/models/form_field.rb

@@ -7,7 +7,7 @@ module CmAdmin
 
       attr_accessor :field_name, :label, :header, :input_type, :collection, :disabled, :helper_method,
                     :placeholder, :display_if, :html_attrs, :target, :col_size, :ajax_url, :helper_text,
-                    :image_preview
+                    :image_preview, :can_create_new_entity
 
       VALID_INPUT_TYPES = %i[
         integer decimal string single_select multi_select date date_time text switch custom_single_select checkbox_group
@@ -34,6 +34,7 @@ module CmAdmin
         self.target = {}
         self.col_size = nil
         self.image_preview = false
+        self.can_create_new_entity = false
       end
 
       def set_default_placeholder

data/lib/cm_admin/version.rb

@@ -1,3 +1,3 @@
 module CmAdmin
-  VERSION = '2.3.3'
+  VERSION = '2.4.0'
 end

data/lib/cm_admin/view_helpers/filter_helper.rb

@@ -20,7 +20,7 @@ module CmAdmin
       def add_filters_dropdown(filters)
         concat(content_tag(:button, class: 'dropdown btn-ghost', data: { bs_toggle: 'dropdown' }) do
           concat tag.i(class: 'fas fa-filter')
-          concat tag.span 'Filter'
+          concat tag.span 'Filters'
         end)
 
         concat(content_tag(:div, class: 'dropdown-menu dropdown-popup') do
@@ -32,7 +32,7 @@ module CmAdmin
               concat(content_tag(:div, class: 'list-area') do
                 filters.each do |filter|
                   concat(content_tag(:div, class: 'pointer list-item', data: { behaviour: 'filter-option', filter_type: "#{filter.filter_type}", db_column: "#{filter.db_column_name}" }) do
-                    tag.span filter.placeholder.to_s.titleize
+                    tag.span filter.display_name.to_s
                   end)
                 end
               end)

data/lib/cm_admin/view_helpers/form_helper.rb

@@ -7,8 +7,9 @@ module CmAdmin
     module FormHelper
       include FormFieldHelper
       REJECTABLE = %w[id created_at updated_at]
+      attr_accessor :is_drawer_form
 
-      def generate_form(resource, cm_model)
+      def generate_form(resource, cm_model, is_drawer_form: false)
         if resource.new_record?
           action = :new
           method = :post
@@ -16,6 +17,7 @@ module CmAdmin
           action = :edit
           method = :patch
         end
+        @is_drawer_form = is_drawer_form
         return form_with_all_fields(resource, method) if cm_model.available_fields[action].empty?
 
         form_with_mentioned_fields(resource, cm_model.available_fields[action], method)
@@ -66,6 +68,7 @@ module CmAdmin
       def create_sections(resource, form_obj, section)
         content_tag :div, class: 'col form-container' do
           return render partial: section.partial, locals: { form_obj: } if section.partial
+
           concat content_tag(:p, section.section_name, class: 'form-title') unless section.parent_section.present?
           concat set_form_for_fields(resource, form_obj, section)
         end
@@ -116,10 +119,7 @@ module CmAdmin
             concat input_field_for_column(form_obj, field, is_required:)
           else
             concat(content_tag(:div, class: "form-field #{field.disabled ? 'disabled' : ''}") do
-              if field.label && %i[check_box switch].exclude?(field.input_type)
-                concat form_obj.label field.label, field.label, class: "field-label #{is_required ? 'required-label' : ''}"
-                concat tag.br
-              end
+              concat set_form_label(field, form_obj, is_required)
               concat input_field_for_column(form_obj, field, is_required:)
               concat tag.small field.helper_text, class: 'form-text text-muted' if field.helper_text.present?
               concat tag.p resource.errors[field.field_name].first if resource.errors[field.field_name].present?
@@ -128,6 +128,25 @@ module CmAdmin
         end
       end
 
+      def set_form_label(field, form_obj, is_required)
+        return unless field.label && %i[check_box switch].exclude?(field.input_type)
+
+        content_tag(:div, class: 'd-flex') do
+          concat form_obj.label field.label, field.label, class: "field-label #{is_required ? 'required-label' : ''}"
+          concat set_drawer_form_button(field, form_obj)
+        end
+      end
+
+      def set_drawer_form_button(field, form_obj)
+        model_name = find_model_name(form_obj, field)
+        ar_object = model_name.constantize.new if model_name.present?
+        return unless field.input_type.to_s == 'single_select' && model_name.present? && has_valid_policy(ar_object, 'new')
+
+        field_id = form_obj.field_id(field.field_name.to_sym)
+        drawer_fetch_url = "#{CmAdmin::Engine.mount_path}/#{model_name.tableize}/fetch_drawer?from_field_id=#{field_id}"
+        tag.div 'New Entity', class: 'drawer-btn', data: { behaviour: 'offcanvas', drawer_fetch_url: }
+      end
+
       def set_nested_section_form_fields(resource, form_obj, nested_sections)
         return if nested_sections.blank?
 
@@ -142,7 +161,7 @@ module CmAdmin
       def set_nested_form_fields(form_obj, section)
         content_tag(:div) do
           section.nested_table_fields.each do |nested_table_field|
-            concat(render(partial: '/cm_admin/main/nested_table_form', locals: { f: form_obj, nested_table_field: nested_table_field }))
+            concat(render(partial: '/cm_admin/main/nested_table_form', locals: { f: form_obj, nested_table_field: }))
           end
         end
       end
@@ -150,7 +169,7 @@ module CmAdmin
       def set_form_with_sections(resource, entities, url, method)
         url_with_query_params = extract_query_params(url)
 
-        form_for(resource, url: url_with_query_params || url, method: method, html: { class: "cm_#{resource.class.name.downcase}_form" }) do |form_obj|
+        form_for(resource, url: url_with_query_params || url, method:, html: { class: "cm_#{resource.class.name.downcase}_form" }, data: { is_drawer_form: @is_drawer_form }) do |form_obj|
           concat form_obj.text_field 'referrer', class: 'normal-input', hidden: true, value: params[:referrer], name: 'referrer' if params[:referrer]
           if params[:polymorphic_name].present?
             concat form_obj.text_field params[:polymorphic_name] + '_type', class: 'normal-input', hidden: true, value: params[:associated_class].classify
@@ -162,7 +181,7 @@ module CmAdmin
           concat split_form_into_section(resource, form_obj, entities)
           concat tag.br
           concat form_obj.submit 'Save', class: 'btn-cta', data: { behaviour: 'form_submit', form_class: "cm_#{form_obj.object.class.name.downcase}_form" }
-          concat button_tag 'Discard', class: 'btn-secondary discard-form', data: { behaviour: 'discard_form' }
+          concat button_tag 'Discard', class: 'btn-secondary discard-form', data: { behaviour: 'discard_form' } unless @is_drawer_form
         end
       end
 
@@ -184,6 +203,16 @@ module CmAdmin
         end
         form_obj.object._validators[field.field_name].map(&:kind).include?(:presence) || associated_field.present?
       end
+
+      def find_model_name(form_obj, field)
+        return unless field.can_create_new_entity.presence
+        return field.can_create_new_entity[:model] if field.can_create_new_entity.is_a?(Hash) && field.can_create_new_entity[:model].present?
+
+        associated_field = form_obj.object.class.reflect_on_all_associations(:belongs_to).select do |association|
+          "#{association.name}_id" == field.field_name.to_s
+        end
+        associated_field&.first&.klass&.name
+      end
     end
   end
 end

data/lib/cm_admin/view_helpers/page_info_helper.rb

@@ -38,21 +38,26 @@ module CmAdmin
       end
 
       def custom_action_items(custom_action, current_action_name)
-        if custom_action.name.present? && policy([:cm_admin, @model.name.classify.constantize]).send(:"#{custom_action.name}?")
-          scoped_model = "CmAdmin::#{@model.name}Policy::#{custom_action.name.classify}Scope".constantize.new(Current.user, @model.name.constantize).resolve
-          if custom_action.display_if.call(@ar_object) && scoped_model.find_by(id: params[:id])
-            case custom_action.display_type
-            when :icon_only
-              custom_action_icon(custom_action, current_action_name)
-            when :button
-              custom_action_button(custom_action, current_action_name)
-            when :modal
-              custom_modal_button(custom_action)
-            when :page
-              path = cm_admin.send("#{@model.name.underscore}_#{custom_action.name}_path", @ar_object.id, custom_action.url_params)
-              link_to custom_action_title(custom_action), path, class: 'btn-secondary ms-2', method: custom_action.verb
-            end
-          end
+        return unless custom_action.name.present? && policy([:cm_admin, @model.name.classify.constantize]).send(:"#{custom_action.name}?")
+
+        scoped_model = "CmAdmin::#{@model.name}Policy::#{custom_action.name.classify}Scope".constantize.new(Current.user, @model.name.constantize).resolve
+        has_scoped_record = if current_action_name == 'index'
+                              scoped_model.present?
+                            else
+                              scoped_model.find_by(id: params[:id]).present?
+                            end
+        return unless custom_action.display_if.call(@ar_object) && has_scoped_record
+
+        case custom_action.display_type
+        when :icon_only
+          custom_action_icon(custom_action, current_action_name)
+        when :button
+          custom_action_button(custom_action, current_action_name)
+        when :modal
+          custom_modal_button(custom_action)
+        when :page
+          path = cm_admin.send("#{@model.name.underscore}_#{custom_action.name}_path", @ar_object.id, custom_action.url_params)
+          link_to custom_action_title(custom_action), path, class: 'btn-secondary ms-2', method: custom_action.verb
         end
       end
 
@@ -66,7 +71,7 @@ module CmAdmin
 
       def custom_action_button(custom_action, current_action_name)
         if current_action_name == "index"
-          button_to custom_action_title(custom_action), @model.ar_model.table_name + '/' + custom_action.path, class: 'btn-secondary ms-2', method: custom_action.verb
+          button_to custom_action_title(custom_action), @model.ar_model.table_name + '/' + (custom_action.path || custom_action.name), class: 'btn-secondary ms-2', method: custom_action.verb
         elsif current_action_name == "show"
           button_to custom_action_title(custom_action), custom_action.path.gsub(':id', params[:id]), class: 'btn-secondary ms-2', method: custom_action.verb
         end

data/lib/cm_admin/view_helpers.rb

@@ -83,6 +83,17 @@ module CmAdmin
       "#{count} #{table_name.humanize.downcase} found"
     end
 
+    def toast_message(message, toast_type)
+      tag.div class: 'position-fixed bottom-0 end-0 p-3', style: 'z-index: 11' do
+        tag.div class: "toast #{toast_type == 'alert' ? 'text-white bg-danger' : ''}", role: 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true', data: { behaviour: 'toast' } do
+          tag.div class: 'd-flex' do
+            concat tag.div message.html_safe, class: 'toast-body'
+            concat tag.button '', type: 'button', class: "btn-close me-2 m-auto #{toast_type == 'alert' ? 'btn-close-white' : ''}", data: { 'bs-dismiss': 'toast' }, 'aria-label': 'Close'
+          end
+        end
+      end
+    end
+
     def project_name_with_env
       return CmAdmin.config.project_name if Rails.env.production?
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: cm-admin
 version: !ruby/object:Gem::Version
-  version: 2.3.3
+  version: 2.4.0
 platform: ruby
 authors:
 - Michael
@@ -14,7 +14,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2024-10-08 00:00:00.000000000 Z
+date: 2024-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: caxlsx_rails
@@ -344,7 +344,6 @@ files:
 - app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/utilities/_api.scss
 - app/assets/stylesheets/cm_admin/dependency/bootstrap/scss/vendor/_rfs.scss
 - app/assets/stylesheets/cm_admin/dependency/flatpickr.min.css
-- app/assets/stylesheets/cm_admin/dependency/jquery-jgrowl.min.css
 - app/assets/stylesheets/cm_admin/helpers/_mixins.scss
 - app/assets/stylesheets/cm_admin/helpers/_variable.scss
 - app/assets/stylesheets/cm_admin/helpers/index.scss
@@ -375,7 +374,6 @@ files:
 - app/views/cm_admin/main/_card.html.slim
 - app/views/cm_admin/main/_cm_pagy_nav.html.slim
 - app/views/cm_admin/main/_custom_action_modal_form.html.slim
-- app/views/cm_admin/main/_drawer.html.slim
 - app/views/cm_admin/main/_filters.html.slim
 - app/views/cm_admin/main/_kanban.html.slim
 - app/views/cm_admin/main/_member_custom_action_modal.html.slim
@@ -406,6 +404,7 @@ files:
 - app/views/layouts/_custom_action_modal.html.slim
 - app/views/layouts/_custom_action_modals.html.slim
 - app/views/layouts/_destroy_action_modal.html.slim
+- app/views/layouts/_drawer.html.slim
 - app/views/layouts/_left_sidebar_nav.html.slim
 - app/views/layouts/_quick_links.html.slim
 - app/views/layouts/cm_admin.html.slim

data/app/assets/stylesheets/cm_admin/dependency/jquery-jgrowl.min.css

@@ -1 +0,0 @@
-.jGrowl{z-index:9999;color:#fff;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;position:fixed}.jGrowl.top-left{left:0;top:0}.jGrowl.top-right{right:0;top:0}.jGrowl.bottom-left{left:0;bottom:0}.jGrowl.bottom-right{right:0;bottom:0}.jGrowl.center{top:0;width:50%;left:25%}.jGrowl.center .jGrowl-closer,.jGrowl.center .jGrowl-notification{margin-left:auto;margin-right:auto}.jGrowl-notification{background-color:#000;opacity:.9;zoom:1;width:250px;padding:10px;margin:10px;text-align:left;display:none;border-radius:5px;min-height:40px}.jGrowl-notification .ui-state-highlight,.jGrowl-notification .ui-widget-content .ui-state-highlight,.jGrowl-notification .ui-widget-header .ui-state-highlight{border:1px solid #000;background:#000;color:#fff}.jGrowl-notification .jGrowl-header{font-weight:700;font-size:.85em}.jGrowl-notification .jGrowl-close{background-color:transparent;color:inherit;border:none;z-index:99;float:right;font-weight:700;font-size:1em;cursor:pointer}.jGrowl-closer{background-color:#000;opacity:.9;zoom:1;width:250px;padding:10px;margin:10px;text-align:left;display:none;border-radius:5px;padding-top:4px;padding-bottom:4px;cursor:pointer;font-size:.9em;font-weight:700;text-align:center}.jGrowl-closer .ui-state-highlight,.jGrowl-closer .ui-widget-content .ui-state-highlight,.jGrowl-closer .ui-widget-header .ui-state-highlight{border:1px solid #000;background:#000;color:#fff}@media print{.jGrowl{display:none}}

data/app/views/cm_admin/main/_drawer.html.slim

@@ -1,13 +0,0 @@
-.cm-drawer.hidden
-  .cm-drawer__container#drawer-container
-    .header  
-      .header__lhs 
-        h2.title Review
-        p.description Theresa Webb
-      .header__rhs 
-        i.fa.fa-times.drawer-close.pointer
-    .body 
-      p.info-text
-        | It was really an amazing experience being an Unschooler. Its really different from other e-learning websites in every aspects like certification, providing internship opportunities and many more. I am going to recommend Unschool for sure!
-
-