ui-soxo-bootstrap-core 2.6.1-dev.11 → 2.6.1-dev.13

package/core/modules/reporting/components/reporting-dashboard/adavance-search/advance-search.js

@@ -1,137 +1,20 @@
 
-
-// import React, { useState, useEffect, useRef } from "react";
-// import { Select, Checkbox, Input, Spin } from "antd";
-// import { CoreScripts } from "../../../../../models";
-
-// const { Search } = Input;
-
-// export default function AdvancedSearchSelect({ field, value = [], onChange }) {
-//   const [searchResults, setSearchResults] = useState([]); // only API results
-//   const [selectedItems, setSelectedItems] = useState(value); // persisted selections
-//   const [loading, setLoading] = useState(false);
-//   const debounceRef = useRef(null);
-
-//   // Sync selectedItems if parent value changes externally
-//   useEffect(() => {
-//     setSelectedItems(value);
-//   }, [value]);
-
-//   const loadOptions = async (searchText = "") => {
-//     try {
-//       setLoading(true);
-
-//       let query = field?.search_query || "";
-//       query = query.replace("@search_text;", searchText || "");
-
-//       const res = await CoreScripts.getQuery({ script: query });
-//       const data = Array.isArray(res) ? res[0] : [];
-//       const apiValues = data?.map((r) => r[field.field]) || [];
-
-//       setSearchResults(apiValues);
-//     } catch (error) {
-//       console.error("Search API error", error);
-//     } finally {
-//       setLoading(false);
-//     }
-//   };
-
-//   useEffect(() => {
-//     loadOptions("");
-//   }, [field]);
-
-//   const handleSearch = (text) => {
-//     if (debounceRef.current) clearTimeout(debounceRef.current);
-//     debounceRef.current = setTimeout(() => loadOptions(text), 400);
-//   };
-
-//   const toggleValue = (checked, item) => {
-//     let newValues;
-
-//     if (checked) {
-//       newValues = [...selectedItems, item];
-//     } else {
-//       newValues = selectedItems.filter((v) => v !== item);
-//     }
-
-//     setSelectedItems(newValues); // update local persisted state immediately
-//     onChange(newValues);
-//   };
-
-//   // Merge: selected items always on top, then search results (excluding already selected)
-//   const displayOptions = [
-//     ...selectedItems,
-//     ...searchResults.filter((item) => !selectedItems.includes(item)),
-//   ];
-
-//   return (
-//     <Select
-//       mode="multiple"
-//       value={value}
-//       style={{ width: 250 }}
-//       placeholder={field.caption}
-//       allowClear
-//       maxTagCount={0}
-//       onChange={onChange}
-//       maxTagPlaceholder={() => (
-//         <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-//           {field.caption}
-//           <span
-//             style={{
-//               background: "#e6f0ff",
-//               color: "#1677ff",
-//               borderRadius: "10px",
-//               padding: "0 8px",
-//               fontWeight: 600,
-//               fontSize: 12,
-//             }}
-//           >
-//             {value?.length || 0}
-//           </span>
-//         </span>
-//       )}
-//       dropdownRender={() => (
-//         <div style={{ padding: 10 }}>
-//           <Search
-//             placeholder={`Search ${field.caption}`}
-//             onChange={(e) => handleSearch(e.target.value)}
-//           />
-
-//           <div style={{ maxHeight: 200, overflowY: "auto", marginTop: 10 }}>
-//             {loading ? (
-//               <Spin />
-//             ) : (
-//               displayOptions.map((item) => (
-//                 <div key={item} style={{ marginBottom: 6 }}>
-//                   <Checkbox
-//                     checked={selectedItems.includes(item)}
-//                     onChange={(e) => toggleValue(e.target.checked, item)}
-//                   >
-//                     {item}
-//                   </Checkbox>
-//                 </div>
-//               ))
-//             )}
-//           </div>
-//         </div>
-//       )}
-//     />
-//   );
-// }
-
 import React, { useState, useEffect, useRef } from "react";
 import { Select, Checkbox, Input, Spin } from "antd";
 import { CoreScripts } from "../../../../../models";
+import "./advance-search.scss";
 
 const { Search } = Input;
 
-export default function AdvancedSearchSelect({ field, value = [], onChange }) {
-  const [searchResults, setSearchResults] = useState([]); // only API results
-  const [selectedItems, setSelectedItems] = useState(value); // persisted selections
+export default function AdvancedSearchSelect({ reportId, field, value = [], onChange ,onReset}) {
+
+  const isSearchQuery = !!field.search_query;
+
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedItems, setSelectedItems] = useState(value);
   const [loading, setLoading] = useState(false);
   const debounceRef = useRef(null);
 
-  // Sync selectedItems if parent value changes externally
   useEffect(() => {
     setSelectedItems(value);
   }, [value]);
@@ -140,11 +23,14 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
     try {
       setLoading(true);
 
-      let query = field?.search_query || "";
-      query = query.replace("@search_text;", searchText || "");
+      const formBody = {
+        script_id: reportId,
+        search_field: field.field,
+        search_condition: searchText,
+      };
 
-      const res = await CoreScripts.getQuery({ script: query });
-      const data = Array.isArray(res) ? res[0] : [];
+      const res = await CoreScripts.getQuerySeacch(formBody);
+      const data = Array.isArray(res.data) ? res.data : [];
       const apiValues = data?.map((r) => r[field.field]) || [];
 
       setSearchResults(apiValues);
@@ -156,7 +42,7 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
   };
 
   useEffect(() => {
-    loadOptions("");
+    if (isSearchQuery) loadOptions("");
   }, [field]);
 
   const handleSearch = (text) => {
@@ -167,11 +53,8 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
   const toggleValue = (checked, item) => {
     let newValues;
 
-    if (checked) {
-      newValues = [...selectedItems, item];
-    } else {
-      newValues = selectedItems.filter((v) => v !== item);
-    }
+    if (checked) newValues = [...selectedItems, item];
+    else newValues = selectedItems.filter((v) => v !== item);
 
     setSelectedItems(newValues);
     onChange(newValues);
@@ -180,53 +63,67 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
   const handleReset = () => {
     setSelectedItems([]);
     onChange([]);
+    // if (onReset) {
+    onReset();   // 🔥 trigger dashboard refresh
+  // }
   };
 
-  // Merge: selected items always on top, then search results
   const displayOptions = [
     ...selectedItems,
     ...searchResults.filter((item) => !selectedItems.includes(item)),
   ];
 
+  const isActive = value && value.length > 0;
+
+  // -------- INPUT MODE --------
+  if (!isSearchQuery) {
+    return (
+      <Input
+        className={`advanced-search-input ${isActive ? "advanced-search-active" : ""}`}
+        placeholder={`Search ${field.caption}`}
+        // The parent provides an array for `value`.
+        // We take the first element for the input's display value.
+        value={value[0] || ""}
+        onChange={(e) => {
+          const text = e.target.value;
+          // Always pass an array back to the parent to be consistent with the Select mode.
+          onChange(text ? [text] : []);
+        }}
+      />
+    );
+  }
+
+  // -------- SELECT MODE --------
   return (
     <Select
+      className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
       mode="multiple"
       value={value}
-      style={{ width: 250 }}
       placeholder={field.caption}
       allowClear
       maxTagCount={0}
       onChange={onChange}
       maxTagPlaceholder={() => (
-        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <span className="tag-placeholder">
           {field.caption}
-          <span
-            style={{
-              background: "#e6f0ff",
-              color: "#1677ff",
-              borderRadius: "10px",
-              padding: "0 8px",
-              fontWeight: 600,
-              fontSize: 12,
-            }}
-          >
+          <span className="tag-placeholder-count">
             {value?.length || 0}
           </span>
         </span>
       )}
       dropdownRender={() => (
-        <div style={{ padding: 10 }}>
+        <div className="dropdown-content">
           <Search
             placeholder={`Search ${field.caption}`}
             onChange={(e) => handleSearch(e.target.value)}
           />
 
-          <div style={{ maxHeight: 200, overflowY: "auto", marginTop: 10 }}>
+          <div className="dropdown-options-list">
             {loading ? (
               <Spin />
             ) : (
               displayOptions.map((item) => (
-                <div key={item} style={{ marginBottom: 6 }}>
+                <div key={item} className="dropdown-option-item">
                   <Checkbox
                     checked={selectedItems.includes(item)}
                     onChange={(e) => toggleValue(e.target.checked, item)}
@@ -238,24 +135,8 @@ export default function AdvancedSearchSelect({ field, value = [], onChange }) {
             )}
           </div>
 
-          {/* Reset Button */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "flex-end",
-              marginTop: 10,
-              borderTop: "1px solid #f0f0f0",
-              paddingTop: 8,
-            }}
-          >
-            <span
-              style={{
-                color: "#1677ff",
-                cursor: "pointer",
-                fontWeight: 500,
-              }}
-              onClick={handleReset}
-            >
+          <div className="dropdown-footer">
+            <span className="dropdown-reset-button" onClick={handleReset}>
               Reset
             </span>
           </div>

package/core/modules/reporting/components/reporting-dashboard/adavance-search/advance-search.scss

@@ -0,0 +1,76 @@
+// .advanced-search-select,
+/* Base select width */
+.advanced-search-select {
+  width: 160px;
+}
+.advanced-search-input {
+  width: 160px;
+}
+/* Active state (when value selected) */
+.advanced-search-select.advanced-search-active .ant-select-selector {
+  border-color: #1677ff !important;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2) !important;
+  border-radius: 6px !important;
+}
+
+/* Input active state */
+.advanced-search-input.advanced-search-active {
+  border-color: #1677ff !important;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+  border-radius: 6px;
+}
+// .advanced-search-input {
+//   width: 250px;
+
+//   &.advanced-search-active {
+//     // Antd Select and Input don't share the same border-radius property,
+//     // so we apply a wrapper style that works for both.
+//     // For more specific control, you might need to target internal antd classes.
+//     border: 1px solid #91caff !important;
+//     box-shadow: 0 0 0 1px #91caff;
+//     border-radius: 6px;
+//   }
+// }
+
+.tag-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .tag-placeholder-count {
+    background: #e6f0ff;
+    color: #1677ff;
+    border-radius: 10px;
+    padding: 0 8px;
+    font-weight: 600;
+    font-size: 12px;
+  }
+}
+
+.dropdown-content {
+  padding: 10px;
+
+  .dropdown-options-list {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 10px;
+
+    .dropdown-option-item {
+      margin-bottom: 6px;
+    }
+  }
+
+  .dropdown-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    border-top: 1px solid #f0f0f0;
+    padding-top: 8px;
+
+    .dropdown-reset-button {
+      color: #1677ff;
+      cursor: pointer;
+      font-weight: 500;
+    }
+  }
+}