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

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;
+    }
+  }
+}

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js

@@ -344,144 +344,6 @@ export default function ReportingDashboard({
     }
   };
 
-  /**
-   *
-   * @param {*} searchValues
-   * @param {*} searchParameters
-   * @returns
-   */
-  const buildSearchCondition = (searchValues, searchParameters) => {
-    let searchCondition = '';
-
-    Object.keys(searchValues).forEach((key) => {
-      const arr = searchValues[key];
-      if (!Array.isArray(arr) || arr.length === 0) return;
-
-      const param = searchParameters.find((p) => p.field === key);
-      if (!param) return;
-
-      const operator = (param.search_operator || '').trim().toUpperCase();
-      const column = param.db_column || key;
-
-      if (operator === 'LIKE') {
-        const likeConditions = arr.map((v) => `${column} LIKE '${v}'`).join(' OR ');
-        searchCondition += ` AND (${likeConditions})`;
-      } else if (operator === 'IN') {
-        const valueList = arr.map((v) => `'${v}'`).join(',');
-        searchCondition += ` AND ${column} IN (${valueList})`;
-      } else if (operator === '=') {
-        const eqConditions = arr.map((v) => `${column} = '${v}'`).join(' OR ');
-        searchCondition += ` AND (${eqConditions})`;
-      } else if (operator === '!=') {
-        const neqConditions = arr.map((v) => `${column} != '${v}'`).join(' AND ');
-        searchCondition += ` AND (${neqConditions})`;
-      } else {
-        // fallback for other operators like > < >= <=
-        const conditions = arr.map((v) => `${column} ${operator} '${v}'`).join(' OR ');
-        searchCondition += ` AND (${conditions})`;
-      }
-    });
-
-    return searchCondition;
-  };
-  // const handleSubmit = (values) => {
-  //     const hasSearchValues = Object.values(searchValues).some((v) => Array.isArray(v) && v.length > 0);
-
-  //     // Check if regular form values have changed since the last submission.
-  //     const regularValuesChanged = (() => {
-  //       const newKeys = Object.keys(values);
-  //       const oldKeys = Object.keys(formContents);
-
-  //       if (newKeys.length !== oldKeys.length) return true;
-
-  //       for (const key of newKeys) {
-  //         const newValue = values[key];
-  //         const oldValue = formContents[key];
-
-  //         if (moment.isMoment(newValue) && moment.isMoment(oldValue)) {
-  //           if (!newValue.isSame(oldValue)) {
-  //             return true;
-  //           }
-  //         } else if (newValue !== oldValue) {
-  //           // This is a shallow comparison, but should work for primitives and new array/object references.
-  //           return true;
-  //         }
-  //       }
-  //       return false;
-  //     })();
-
-  //     if (hasSearchValues && regularValuesChanged) {
-  //       Modal.confirm({
-  //         title: 'Combine Filters',
-  //         content: 'You have applied both standard and advanced filters. Do you want to combine them?',
-  //         okText: 'Yes, Apply Both',
-  //         cancelText: 'No, Use Advanced Only',
-  //         onOk: () => {
-  //           // User chose to combine filters.
-  //           const searchCondition = buildSearchCondition(searchValues, searchParameters);
-  //           const finalValues = {
-  //             ...values,
-  //             search_condition: searchCondition,
-  //           };
-  //           onFinish(finalValues, 1);
-  //         },
-  //         onCancel: () => {
-  //           // User chose to use only advanced search.
-  //           const searchCondition = buildSearchCondition(searchValues, searchParameters);
-  //           const resetValues = {};
-  //           Object.keys(values).forEach((key) => {
-  //             resetValues[key] = null;
-  //           });
-  //           const finalValues = {
-  //             ...resetValues,
-  //             search_condition: searchCondition,
-  //           };
-  //           onFinish(finalValues, 1);
-  //         },
-  //       });
-  //       return; // Stop further execution, wait for modal response.
-  //     }
-
-  //     // --- Default behavior if the condition for the modal is not met ---
-
-  //     let finalValues = values;
-  //     if (hasSearchValues) {
-  //       // If only advanced search has values (or regular filters haven't changed), reset regular filters.
-  //       const searchCondition = buildSearchCondition(searchValues, searchParameters);
-  //       const resetValues = {};
-  //       Object.keys(values).forEach((key) => {
-  //         resetValues[key] = null;
-  //       });
-  //       finalValues = {
-  //         ...resetValues,
-  //         search_condition: searchCondition,
-  //       };
-  //     }
-
-  //     const { pageSize } = pagination;
-  //     const resetPage = 1;
-
-  //     scriptId.current = null;
-
-  //     // Update URL only when NOT using advanced search
-  //     if (!hasSearchValues) {
-  //       const currentUrlParams = Location.search();
-  //       const { script_id, selected_card, ...cleanParams } = currentUrlParams;
-
-  //       const newParams = new URLSearchParams({
-  //         ...cleanParams,
-  //         current: resetPage,
-  //         pageSize,
-  //       });
-
-  //       const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-  //       window.history.replaceState({}, '', newUrl);
-  //     }
-
-  //     // Call report API
-  //     onFinish(finalValues, resetPage);
-  //   };
-
   const handleSubmit = (values) => {
     const hasSearchValues = Object.values(searchValues).some((v) => Array.isArray(v) && v.length > 0);
 
@@ -511,11 +373,9 @@ export default function ReportingDashboard({
 
         onOk() {
           // YES → send form values + search condition
-          const searchCondition = buildSearchCondition(searchValues, searchParameters);
-
           const finalValues = {
             ...values,
-            search_condition: searchCondition,
+            search_values: searchValues,
           };
 
           runSubmit(finalValues);
@@ -523,8 +383,6 @@ export default function ReportingDashboard({
 
         onCancel() {
           // NO → reset form values
-          const searchCondition = buildSearchCondition(searchValues, searchParameters);
-
           const resetValues = {};
           Object.keys(values).forEach((key) => {
             resetValues[key] = null;
@@ -532,7 +390,7 @@ export default function ReportingDashboard({
 
           const finalValues = {
             ...resetValues,
-            search_condition: searchCondition,
+            search_values: searchValues,
           };
 
           runSubmit(finalValues);
@@ -540,8 +398,6 @@ export default function ReportingDashboard({
       });
     } else {
       // no form change
-      const searchCondition = buildSearchCondition(searchValues, searchParameters);
-
       const resetValues = {};
       Object.keys(values).forEach((key) => {
         resetValues[key] = null;
@@ -549,7 +405,7 @@ export default function ReportingDashboard({
 
       const finalValues = {
         ...resetValues,
-        search_condition: searchCondition,
+        search_values: searchValues,
       };
 
       runSubmit(finalValues);
@@ -562,7 +418,7 @@ export default function ReportingDashboard({
 
     scriptId.current = null;
 
-    const hasSearchValues = finalValues.search_condition;
+    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
 
     if (!hasSearchValues) {
       const currentUrlParams = Location.search();
@@ -746,6 +602,7 @@ export default function ReportingDashboard({
                       key={param.field}
                       parameter={param}
                       field={param}
+                      reportId={reportId}
                       value={searchValues[param.field] || []}
                       onChange={(value) => {
                         setSearchValues((prev) => ({
@@ -753,6 +610,32 @@ export default function ReportingDashboard({
                           [param.field]: value,
                         }));
                       }}
+                      onReset={() => {
+                        setSearchValues((prev) => {
+                          const updated = {
+                            ...prev,
+                            [param.field]: [],
+                          };
+
+                          // const finalValues = {
+                          //   ...formContents,
+                          //   search_values: updated,
+                          // };
+                          // console.log(finalValues);
+                          // runSubmit(finalValues); // 🔥 refresh report correctly
+                          getPatientDetails();
+
+                          return updated;
+                        });
+                      }}
+                      // onReset={() => {
+                      //   setSearchValues((prev) => ({
+                      //     ...prev,
+                      //     [param.field]: [],
+                      //   }));
+
+                      //   handleSubmit(formContents); // 🔥 refresh report
+                      // }}
                     />
                   ))
                 : null}

package/core/modules/steps/action-buttons.js

@@ -13,6 +13,8 @@ export default function ActionButtons({
   steps,
   activeStep,
   isStepCompleted,
+  isFullscreen,
+  onToggleFullscreen,
   renderDynamicComponent,
   handlePrevious,
   handleNext,
@@ -37,6 +39,10 @@ export default function ActionButtons({
           Back
         </Button>
 
+        <Button type="default" onClick={onToggleFullscreen}>
+          {isFullscreen ? 'Exit Full Screen' : 'Switch to Full Screen'}
+        </Button>
+
         {/* Skip button */}
         {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
           <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>

package/core/modules/steps/action-buttons.scss

@@ -11,6 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
+
   padding-bottom: 8px;
 }
 
@@ -27,7 +28,6 @@
   border-top: 1px solid #f0f0f0;
   box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
 
-
   width: 61%;
   padding: 10px;
   position: fixed;
@@ -37,9 +37,15 @@
   display: flex;
   border-radius: 4px;
   box-shadow: -1px -4px 10px 2px #f7f7f76e;
-
+  flex-wrap: wrap;
 
   .ant-btn {
     border-radius: 4px;
   }
-}
+}
+
+.process-steps-page.is-fullscreen .action-buttons-container {
+  width: calc(100% - 24px);
+  left: 12px;
+  right: 12px;
+}