ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

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

@@ -1,271 +1,271 @@
-
-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;
-const advancedSearchCache = {};
-
-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 cacheKey = `${finalReportId || "no-report"}::${fieldName || "no-field"}`;
-
-  const safeValue = Array.isArray(value) ? value : [];
-  const cachedState = advancedSearchCache[cacheKey] || { optionLabels: {}, displayOptions: [] };
-
-  const [searchResults, setSearchResults] = useState([]);
-  const [displayOptions, setDisplayOptions] = useState(cachedState.displayOptions);
-  const [optionLabels, setOptionLabels] = useState(cachedState.optionLabels);
-  const [loading, setLoading] = useState(false);
-  const debounceRef = useRef(null);
-  const missingLabelsFetchRef = useRef("");
-
-  const mergeDisplayOptions = (apiOptions = [], selectedValues = safeValue, labels = optionLabels) => {
-    const selectedOptions = selectedValues
-      .filter((item) => labels[item])
-      .map((item) => ({
-        search_value: item,
-        display_value: labels[item],
-      }));
-
-    return [...selectedOptions, ...apiOptions].filter(
-      (item, index, array) =>
-        array.findIndex((entry) => entry.search_value === item.search_value) === index
-    );
-  };
-
-  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 nextLabels = {
-        ...optionLabels,
-        ...data.reduce((acc, item) => {
-          acc[item.search_value] = item.display_value;
-          return acc;
-        }, {}),
-      };
-
-      setSearchResults(data.map((item) => item.search_value));
-      setOptionLabels(nextLabels);
-      setDisplayOptions(mergeDisplayOptions(data, safeValue, nextLabels));
-      advancedSearchCache[cacheKey] = {
-        optionLabels: nextLabels,
-        displayOptions: mergeDisplayOptions(data, safeValue, nextLabels),
-      };
-    } catch (error) {
-      console.error("Search API error", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    // Restore cached labels/options for the current field after remounts like submit refreshes.
-    setSearchResults([]);
-    setOptionLabels(cachedState.optionLabels || {});
-    setDisplayOptions(cachedState.displayOptions || []);
-    missingLabelsFetchRef.current = "";
-  }, [cacheKey]);
-
-  useEffect(() => {
-    // FormCreator can remount this field after submit with only search_value(s).
-    // If any selected value is missing a label, fetch the option list once to recover display_value.
-    const missingValues = safeValue.filter((item) => !optionLabels[item]);
-    const missingKey = missingValues.join("||");
-
-    if (!isSearchQuery || safeValue.length === 0 || missingValues.length === 0) {
-      missingLabelsFetchRef.current = "";
-      return;
-    }
-
-    if (missingLabelsFetchRef.current === missingKey) {
-      return;
-    }
-
-    missingLabelsFetchRef.current = missingKey;
-    if (isSearchQuery && safeValue.length > 0) {
-      loadOptions("");
-    }
-  }, [isSearchQuery, safeValue, optionLabels]);
-
-  useEffect(() => {
-    if (!isSearchQuery || safeValue.length === 0) return;
-
-    setDisplayOptions((prev) => {
-      const nextDisplayOptions = mergeDisplayOptions(prev, safeValue, optionLabels);
-      advancedSearchCache[cacheKey] = {
-        optionLabels,
-        displayOptions: nextDisplayOptions,
-      };
-      return nextDisplayOptions;
-    });
-  }, [cacheKey, isSearchQuery, safeValue, optionLabels]);
-
-  const handleSearch = (text) => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => loadOptions(text), 400);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, []);
-
-  const toggleValue = (checked, item) => {
-    let newValues;
-
-    if (checked) newValues = [...safeValue, item];
-    else newValues = safeValue.filter((v) => v !== item);
-
-    onChange(newValues);
-  };
-
-  const notifyReset = () => {
-    if (finalOnReset) {
-      finalOnReset(fieldName);
-    }
-  };
-
-  const handleReset = () => {
-    onChange([]);
-    notifyReset();
-  };
-
-  const handleSelectChange = (nextValue) => {
-    const nextValues = Array.isArray(nextValue) ? nextValue : [];
-
-    onChange(nextValues);
-
-    if (safeValue.length > 0 && nextValues.length === 0) {
-      notifyReset();
-    }
-  };
-
-  const isActive = safeValue.length > 0;
-  const selectOptions = [
-    ...safeValue
-      .filter((item) => optionLabels[item])
-      .map((item) => ({
-        value: item,
-        label: optionLabels[item],
-      })),
-    ...displayOptions.map((item) => ({
-      value: item.search_value,
-      label: item.display_value,
-    })),
-  ].filter((item, index, array) => array.findIndex((entry) => entry.value === item.value) === index);
-
-  // -------- 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(fieldName);
-          }
-        }}
-      />
-    );
-  }
-
-  // -------- SELECT MODE --------
-  return (
-    <Select
-      className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
-      style={style}
-      mode="multiple"
-      showSearch={false}
-      value={safeValue}
-      options={selectOptions}
-      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 = displayOptions.length > 0 ? displayOptions : [];
-          setDisplayOptions(mergeDisplayOptions(currentResults, safeValue, optionLabels));
-        }
-      }}
-      allowClear
-      maxTagCount={1}
-      onChange={handleSelectChange}
-      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)}
-            onKeyDown={(e) => {
-              // Prevent the parent Select from treating backspace as "remove last selected tag".
-              e.stopPropagation();
-            }}
-          />
-
-          <div className="dropdown-options-list">
-            {loading ? (
-              <Spin />
-            ) : (
-              displayOptions.map((item, idx) => (
-                <div 
-                  key={`${item.search_value}-${idx}`} 
-                  className="dropdown-option-item"
-                  onClick={() => toggleValue(!safeValue.includes(item.search_value), item.search_value)}
-                  style={{ cursor: 'pointer' }}
-                >
-                  <Checkbox
-                    checked={safeValue.includes(item.search_value)}
-                    onClick={(e) => e.stopPropagation()} // Prevent double trigger when clicking the checkbox box specifically
-                    onChange={(e) => toggleValue(e.target.checked, item.search_value)}
-                  >
-                    {item.display_value}
-                  </Checkbox>
-                </div>
-              ))
-            )}
-          </div>
-
-          <div className="dropdown-footer">
-            <span className="dropdown-reset-button" onClick={handleReset}>
-              Reset
-            </span>
-          </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;
+const advancedSearchCache = {};
+
+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 cacheKey = `${finalReportId || "no-report"}::${fieldName || "no-field"}`;
+
+  const safeValue = Array.isArray(value) ? value : [];
+  const cachedState = advancedSearchCache[cacheKey] || { optionLabels: {}, displayOptions: [] };
+
+  const [searchResults, setSearchResults] = useState([]);
+  const [displayOptions, setDisplayOptions] = useState(cachedState.displayOptions);
+  const [optionLabels, setOptionLabels] = useState(cachedState.optionLabels);
+  const [loading, setLoading] = useState(false);
+  const debounceRef = useRef(null);
+  const missingLabelsFetchRef = useRef("");
+
+  const mergeDisplayOptions = (apiOptions = [], selectedValues = safeValue, labels = optionLabels) => {
+    const selectedOptions = selectedValues
+      .filter((item) => labels[item])
+      .map((item) => ({
+        search_value: item,
+        display_value: labels[item],
+      }));
+
+    return [...selectedOptions, ...apiOptions].filter(
+      (item, index, array) =>
+        array.findIndex((entry) => entry.search_value === item.search_value) === index
+    );
+  };
+
+  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 nextLabels = {
+        ...optionLabels,
+        ...data.reduce((acc, item) => {
+          acc[item.search_value] = item.display_value;
+          return acc;
+        }, {}),
+      };
+
+      setSearchResults(data.map((item) => item.search_value));
+      setOptionLabels(nextLabels);
+      setDisplayOptions(mergeDisplayOptions(data, safeValue, nextLabels));
+      advancedSearchCache[cacheKey] = {
+        optionLabels: nextLabels,
+        displayOptions: mergeDisplayOptions(data, safeValue, nextLabels),
+      };
+    } catch (error) {
+      console.error("Search API error", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Restore cached labels/options for the current field after remounts like submit refreshes.
+    setSearchResults([]);
+    setOptionLabels(cachedState.optionLabels || {});
+    setDisplayOptions(cachedState.displayOptions || []);
+    missingLabelsFetchRef.current = "";
+  }, [cacheKey]);
+
+  useEffect(() => {
+    // FormCreator can remount this field after submit with only search_value(s).
+    // If any selected value is missing a label, fetch the option list once to recover display_value.
+    const missingValues = safeValue.filter((item) => !optionLabels[item]);
+    const missingKey = missingValues.join("||");
+
+    if (!isSearchQuery || safeValue.length === 0 || missingValues.length === 0) {
+      missingLabelsFetchRef.current = "";
+      return;
+    }
+
+    if (missingLabelsFetchRef.current === missingKey) {
+      return;
+    }
+
+    missingLabelsFetchRef.current = missingKey;
+    if (isSearchQuery && safeValue.length > 0) {
+      loadOptions("");
+    }
+  }, [isSearchQuery, safeValue, optionLabels]);
+
+  useEffect(() => {
+    if (!isSearchQuery || safeValue.length === 0) return;
+
+    setDisplayOptions((prev) => {
+      const nextDisplayOptions = mergeDisplayOptions(prev, safeValue, optionLabels);
+      advancedSearchCache[cacheKey] = {
+        optionLabels,
+        displayOptions: nextDisplayOptions,
+      };
+      return nextDisplayOptions;
+    });
+  }, [cacheKey, isSearchQuery, safeValue, optionLabels]);
+
+  const handleSearch = (text) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => loadOptions(text), 400);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  const toggleValue = (checked, item) => {
+    let newValues;
+
+    if (checked) newValues = [...safeValue, item];
+    else newValues = safeValue.filter((v) => v !== item);
+
+    onChange(newValues);
+  };
+
+  const notifyReset = () => {
+    if (finalOnReset) {
+      finalOnReset(fieldName);
+    }
+  };
+
+  const handleReset = () => {
+    onChange([]);
+    notifyReset();
+  };
+
+  const handleSelectChange = (nextValue) => {
+    const nextValues = Array.isArray(nextValue) ? nextValue : [];
+
+    onChange(nextValues);
+
+    if (safeValue.length > 0 && nextValues.length === 0) {
+      notifyReset();
+    }
+  };
+
+  const isActive = safeValue.length > 0;
+  const selectOptions = [
+    ...safeValue
+      .filter((item) => optionLabels[item])
+      .map((item) => ({
+        value: item,
+        label: optionLabels[item],
+      })),
+    ...displayOptions.map((item) => ({
+      value: item.search_value,
+      label: item.display_value,
+    })),
+  ].filter((item, index, array) => array.findIndex((entry) => entry.value === item.value) === index);
+
+  // -------- 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(fieldName);
+          }
+        }}
+      />
+    );
+  }
+
+  // -------- SELECT MODE --------
+  return (
+    <Select
+      className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
+      style={style}
+      mode="multiple"
+      showSearch={false}
+      value={safeValue}
+      options={selectOptions}
+      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 = displayOptions.length > 0 ? displayOptions : [];
+          setDisplayOptions(mergeDisplayOptions(currentResults, safeValue, optionLabels));
+        }
+      }}
+      allowClear
+      maxTagCount={1}
+      onChange={handleSelectChange}
+      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)}
+            onKeyDown={(e) => {
+              // Prevent the parent Select from treating backspace as "remove last selected tag".
+              e.stopPropagation();
+            }}
+          />
+
+          <div className="dropdown-options-list">
+            {loading ? (
+              <Spin />
+            ) : (
+              displayOptions.map((item, idx) => (
+                <div 
+                  key={`${item.search_value}-${idx}`} 
+                  className="dropdown-option-item"
+                  onClick={() => toggleValue(!safeValue.includes(item.search_value), item.search_value)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <Checkbox
+                    checked={safeValue.includes(item.search_value)}
+                    onClick={(e) => e.stopPropagation()} // Prevent double trigger when clicking the checkbox box specifically
+                    onChange={(e) => toggleValue(e.target.checked, item.search_value)}
+                  >
+                    {item.display_value}
+                  </Checkbox>
+                </div>
+              ))
+            )}
+          </div>
+
+          <div className="dropdown-footer">
+            <span className="dropdown-reset-button" onClick={handleReset}>
+              Reset
+            </span>
+          </div>
+        </div>
+      )}
+    />
+  );
+}