PC-27: Added option to load items without category

Author: PivtoranisV

app/admin/quotes.rb

@@ -34,63 +34,14 @@
     f.inputs do
       f.input :customer, as: :select, collection: Customer.pluck(:company_name, :id)
       f.input :user, as: :select, collection: User.order(:email).map { |u| ["#{u.email} (#{u.name})", u.id] }
-      f.input :categories, as: :check_boxes, collection: Category.pluck(:name, :id)
+      f.input :categories, as: :check_boxes,
+                           collection: Category.order(:name).pluck(:name, :id) + [['Items without category', 'other']],
+                           wrapper_html: { class: 'categories-wrapper' }
     end
     div do
       button_tag 'Load Items from Category', type: 'button', id: 'load-items-button', class: 'button'
     end
     f.actions
-    # JS to load items dynamically
-    script do
-      raw <<-JS
-    document.addEventListener("DOMContentLoaded", function () {
-      const button = document.getElementById("load-items-button");
-      button?.addEventListener("click", function () {
-        const selectedCategories = Array.from(document.querySelectorAll("input[name='quote[category_ids][]']:checked")).map(cb => cb.value);
-
-        if (selectedCategories.length === 0) {
-          alert("Please select at least one category.");
-          return;
-        }
-
-        fetch("/admin/quotes/load_items_from_categories", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
-          },
-          body: JSON.stringify({ category_ids: selectedCategories })
-        })
-        .then(response => response.json())
-        .then(items => {
-          const container = document.querySelector(".has_many_container.quote_items");
-
-          items.forEach(item => {
-            const addButton = container.querySelector(".has_many_add");
-            addButton.click();
-
-            setTimeout(() => {
-              const lastItemGroup = container.querySelectorAll(".has_many_fields").item(-1);
-              const itemSelect = lastItemGroup.querySelector("select[id$='_item_id']");
-              const pricingParams = lastItemGroup.querySelector("input[id$='_pricing_parameters']");
-              const discount = lastItemGroup.querySelector("input[id$='_discount']");
-
-              if (itemSelect) {
-                itemSelect.value = item.item_id;
-              }
-              if (pricingParams) {
-                pricingParams.value = item.pricing_parameters;
-              }
-              if (discount) {
-                discount.value = item.discount;
-              }
-            }, 100);
-          });
-        });
-      });
-    });
-      JS
-    end
   end
 
   show do
@@ -117,14 +68,19 @@
 
   collection_action :load_items_from_categories, method: :post do
     category_ids = params[:category_ids] || []
-    items = Item.where(category_id: category_ids)
+
+    items = Item.where(category_id: category_ids.reject { |id| id == 'other' })
+    items += Item.where(category_id: nil) if category_ids.include?('other')
 
     render json: items.map { |item|
       {
         category_id: item.category_id,
         item_id: item.id,
         item_name: item.name,
-        _pricing_parameters: '',
+        item_fixed_parameters: item.fixed_parameters,
+        item_pricing_options: item.pricing_options,
+        item_open_parameters_label: item.open_parameters_label,
+        pricing_parameters: {},
         discount: 0
       }
     }

app/assets/javascripts/active_admin.js

@@ -1,6 +1,7 @@
 //= require active_admin/base
 //= require formula_builder
 //= require new_parameter
+//= require quotes_admin
 
 
 

app/assets/javascripts/quotes_admin.js

@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const button = document.getElementById('load-items-button')
+  if (!button) return
+
+  button.addEventListener('click', function () {
+    const selectedCategories = Array.from(document.querySelectorAll("input[name='quote[category_ids][]']:checked")).map(
+      (cb) => cb.value,
+    )
+
+    if (selectedCategories.length === 0) {
+      alert('Please select at least one category.')
+      return
+    }
+
+    fetch('/admin/quotes/load_items_from_categories', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+      },
+      body: JSON.stringify({ category_ids: selectedCategories }),
+    })
+      .then((response) => response.json())
+      .then((items) => {
+        const container = document.querySelector('.has_many_container.quote_items')
+        if (!container) return
+
+        items.forEach((item) => {
+          const addButton = container.querySelector('.has_many_add')
+          addButton?.click()
+
+          setTimeout(() => {
+            const lastItemGroup = container.querySelectorAll('.has_many_fields').item(-1)
+            const itemSelect = lastItemGroup?.querySelector("select[id$='_item_id']")
+            const pricingParams = lastItemGroup?.querySelector("input[id$='_pricing_parameters']")
+            const discount = lastItemGroup?.querySelector("input[id$='_discount']")
+
+            if (itemSelect) itemSelect.value = item.item_id
+            if (pricingParams) pricingParams.value = item.pricing_parameters
+            if (discount) discount.value = item.discount
+          }, 100)
+        })
+      })
+  })
+})

app/assets/stylesheets/active_admin.scss

@@ -233,4 +233,14 @@
   color: #222 !important;
 }
 
+.categories-wrapper .choices-group {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.5rem 1rem;
+  margin: auto;
+  list-style: none;
+  width: 100%;
+}
+
+
 @import "active_admin/forms/select";