ui-soxo-bootstrap-core 2.6.20 → 2.6.22

package/core/models/core-scripts/core-scripts.js

@@ -9,142 +9,150 @@ import React from 'react';
 
 import Base from '../base/base';
 
-import { ApiUtils } from './../../lib/'
-
+import { ApiUtils } from './../../lib/';
 
 class CoreScript extends Base {
+  constructor() {
+    super();
 
-    constructor() {
-        super();
-
-        this.fields = [
-            {
-                field: 'name',
-                caption: 'Name'
-            },
-            {
-                field: 'amount',
-                caption: 'Amount'
-            }
-        ];
-
-        // this.columns = ;
-    }
-
-    get id() {
-        return 'id';
-    }
-
-    get getEndpoint() {
-        return 'core-scripts';
-    }
-
-
-    get modelName() {
-        return `core-scripts`;
-    }
-
-    get columns() {
-        return [
-            {
-                caption: 'Staff',
-                field: 'staff.name',
-                key: 'staff'
-            },
-            {
-                caption: 'Weight',
-                field: 'weight',
-                key: 'weight'
-            },
-            {
-                caption: 'Date',
-                field: 'created_at',
-                key: 'created_at'
-            }
-        ];
-    }
-
-
-    /**
-     *Getting core_script data
-     * @returns
-     */
-    getReportingLisitng = (id, formBody, dbPtr = null) => {
-        
-        // Settings db pointer
-        if (!dbPtr) dbPtr = localStorage.db_ptr;
-        return ApiUtils.post({
-            url: `core-scripts/dashboardquery/${id}`,
-            formBody,
-            headers: {
-        'Content-Type': 'application/json',
-        Authorization: 'Bearer ' + localStorage.access_token,
-        db_ptr: dbPtr
+    this.fields = [
+      {
+        field: 'name',
+        caption: 'Name',
       },
-        });
-    };
-
+      {
+        field: 'amount',
+        caption: 'Amount',
+      },
+    ];
 
-    /**
-     *Updating user details
-     * @returns
-     */
-    getUserDetailsLisitng = (id, formBody) => {
+    // this.columns = ;
+  }
 
-        return ApiUtils.post({
-            url: `core-scripts/update-user-deatils/${id}`,
-            formBody,
-        });
-    };
+  get id() {
+    return 'id';
+  }
 
+  get getEndpoint() {
+    return 'core-scripts';
+  }
 
-    /**
-     * 
-     */
-    getReportMenu = async ({ id }) => {
-
-        const result = await this.getRecord({ id });
-
-        const report = result.result
-
-        return {
-            ...report,
-            caption: report.caption,
-            path: '/reports/' + report.id,
-            is_visible: true
-        }
-    }
-
-    /**
-      * To get extra script data corresponding to mode
-      *
-      * @param {*} mode
-      * @returns
-      */
-    getExtraInfo = (mode) => {
-        return ApiUtils.get({
-            url: `core-scripts/get-script-data?mode=${mode}`,
-        });
-    };
+  get modelName() {
+    return `core-scripts`;
+  }
 
-
-    /**
-      * To get executed data
-      *
-      * @param {*} mode
-      * @returns
-      */
-
-    getSelectedExtraInfo = (formBody) => {
-        return ApiUtils.post({
-            url: `core-scripts/get-selected-script-data`,
-            formBody,
-            headers: {
-                'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + localStorage.access_token,
-            },
-        });
+  get columns() {
+    return [
+      {
+        caption: 'Staff',
+        field: 'staff.name',
+        key: 'staff',
+      },
+      {
+        caption: 'Weight',
+        field: 'weight',
+        key: 'weight',
+      },
+      {
+        caption: 'Date',
+        field: 'created_at',
+        key: 'created_at',
+      },
+    ];
+  }
+
+  /**
+   *Getting core_script data
+   * @returns
+   */
+  getReportingLisitng = (id, formBody, dbPtr = null) => {
+    // Settings db pointer
+    if (!dbPtr) dbPtr = localStorage.db_ptr;
+    return ApiUtils.post({
+        // baseUrl: 'http://localhost:8002/dev/',  
+      url: `core-scripts/dashboardquery/${id}`,
+      formBody,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + localStorage.access_token,
+        db_ptr: dbPtr,
+      },
+    });
+  };
+
+  /**
+   *Updating user details
+   * @returns
+   */
+  getUserDetailsLisitng = (id, formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/update-user-deatils/${id}`,
+      formBody,
+    });
+  };
+
+  getQuery = (formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/execute-script-api`,
+      formBody,
+    });
+  };
+/**
+ * 
+ */
+  getQuerySeacch = (formBody) => {
+    return ApiUtils.post({
+    //   baseUrl: 'http://localhost:8002/dev/',
+      url: `core-scripts/execute-script-by-search`,
+      formBody,
+    });
+  };
+
+  /**
+   *
+   */
+  getReportMenu = async ({ id }) => {
+    const result = await this.getRecord({ id });
+
+    const report = result.result;
+
+    return {
+      ...report,
+      caption: report.caption,
+      path: '/reports/' + report.id,
+      is_visible: true,
     };
+  };
+
+  /**
+   * To get extra script data corresponding to mode
+   *
+   * @param {*} mode
+   * @returns
+   */
+  getExtraInfo = (mode) => {
+    return ApiUtils.get({
+      url: `core-scripts/get-script-data?mode=${mode}`,
+    });
+  };
+
+  /**
+   * To get executed data
+   *
+   * @param {*} mode
+   * @returns
+   */
+
+  getSelectedExtraInfo = (formBody) => {
+    return ApiUtils.post({
+      url: `core-scripts/get-selected-script-data`,
+      formBody,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + localStorage.access_token,
+      },
+    });
+  };
 }
 
 export default CoreScript;

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

@@ -0,0 +1,174 @@
+
+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({ reportId, onReset, field, value, onChange, style, ...rest }) {
+  // Normalize the configuration. 
+  // If 'field' is an object, we are in "legacy" mode. If it's a string, we are using the spread props from rest.
+  const isObjectMode = typeof field === "object";
+  const config = isObjectMode ? field : { ...rest, field };
+  
+  const finalReportId = reportId || config.reportId;
+  const finalOnReset = onReset || config.onReset;
+  const isSearchQuery = !!config.search_query;
+  const fieldName = isObjectMode ? field.field : field;
+  const caption = config.caption;
+
+  const safeValue = Array.isArray(value) ? value : [];
+
+  const [searchResults, setSearchResults] = useState([]);
+  const [displayOptions, setDisplayOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef(null);
+
+  const loadOptions = async (searchText = "") => {
+    try {
+      setLoading(true);
+
+      const formBody = {
+        script_id: finalReportId,
+        search_field: fieldName,
+        search_condition: searchText,
+      };
+
+      const res = await CoreScripts.getQuerySeacch(formBody);
+      const data = Array.isArray(res.data) ? res.data : [];
+      const apiValues = data?.map((r) => r[fieldName]) || [];
+
+      setSearchResults(apiValues);
+      // Refresh display options only when new search results arrive to keep the list stable during interaction
+      setDisplayOptions([
+        ...safeValue,
+        ...apiValues.filter((item) => !safeValue.includes(item)),
+      ]);
+    } catch (error) {
+      console.error("Search API error", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Clear search results when the field or report context changes, 
+    // but do not load automatically on mount.
+    setSearchResults([]);
+  }, [fieldName, finalReportId]);
+
+  const handleSearch = (text) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => loadOptions(text), 400);
+  };
+
+  const toggleValue = (checked, item) => {
+    let newValues;
+
+    if (checked) newValues = [...safeValue, item];
+    else newValues = safeValue.filter((v) => v !== item);
+
+    onChange(newValues);
+  };
+
+  const handleReset = () => {
+    onChange([]);
+    if (finalOnReset) {
+      finalOnReset();   // 🔥 trigger dashboard refresh
+    }
+  };
+
+  const isActive = safeValue.length > 0;
+
+  // -------- INPUT MODE --------
+  if (!isSearchQuery) {
+    return (
+      <Input
+        allowClear
+        className={`advanced-search-input ${isActive ? "advanced-search-active" : ""}`}
+        placeholder={`Search ${caption}`}
+      style={style}
+        // The parent provides an array for `value`.
+        // We take the first element for the input's display value.
+        value={safeValue[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] : []);
+          if (!text && finalOnReset) {
+            finalOnReset();
+          }
+        }}
+      />
+    );
+  }
+
+  // -------- SELECT MODE --------
+  return (
+    <Select
+      className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
+      style={style}
+      mode="multiple"
+      value={safeValue}
+      placeholder={caption}
+      onDropdownVisibleChange={(open) => {
+        if (open) {
+          loadOptions("");
+        } else {
+          // When closing, re-sort selected items to the top so they are visible next time it opens
+          const currentResults = searchResults.length > 0 ? searchResults : displayOptions;
+          setDisplayOptions([
+            ...safeValue,
+            ...currentResults.filter((item) => !safeValue.includes(item)),
+          ]);
+        }
+      }}
+      allowClear
+      maxTagCount={1}
+      onChange={onChange}
+      maxTagPlaceholder={(omittedValues) => (
+        <span className="tag-placeholder-count">
+          +{omittedValues.length}
+        </span>
+      )}
+      dropdownRender={() => (
+        <div className="dropdown-content">
+          <Search
+            placeholder={`Search ${caption}`}
+            onChange={(e) => handleSearch(e.target.value)}
+          />
+
+          <div className="dropdown-options-list">
+            {loading ? (
+              <Spin />
+            ) : (
+              displayOptions.map((item, idx) => (
+                <div 
+                  key={`${item}-${idx}`} 
+                  className="dropdown-option-item"
+                  onClick={() => toggleValue(!safeValue.includes(item), item)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <Checkbox
+                    checked={safeValue.includes(item)}
+                    onClick={(e) => e.stopPropagation()} // Prevent double trigger when clicking the checkbox box specifically
+                    onChange={(e) => toggleValue(e.target.checked, item)}
+                  >
+                    {item}
+                  </Checkbox>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="dropdown-footer">
+            <span className="dropdown-reset-button" onClick={handleReset}>
+              Reset
+            </span>
+          </div>
+        </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;
+  // width: 100%;
+}
+.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;
+    }
+  }
+}