ui-soxo-bootstrap-core 2.6.20 → 2.6.22

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 
-import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
+import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
 
 import { QrcodeOutlined } from '@ant-design/icons';
 
@@ -17,10 +17,10 @@ import './reporting-dashboard.scss';
 // import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
 import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
 import { useHistory } from 'react-router-dom';
-
 import * as ReportingDashboardComp from '../index';
 import buildDisplayColumns from './display-columns/build-display-columns';
 import { getRedirectLink } from './display-columns/display-cell-renderer';
+import AdvancedSearchSelect from './adavance-search/advance-search';
 
 // import { isPdfFile } from 'pdfjs-dist';
 
@@ -56,15 +56,20 @@ export default function ReportingDashboard({
   const [config, setConfig] = useState({});
 
   // State to manage the layout of the form
-  const [formLayout, setFormLayout] = useState('inline');
+  const [formLayout, setFormLayout] = useState('vertical');
 
   const [loading, setLoading] = useState(true);
 
   const [cardLoading, setCardLoading] = useState(true);
 
+  const [searchParameters, setSearchParameters] = useState([]);
+
+  const [searchValues, setSearchValues] = useState({});
+
   const [dashboardVisible, setDashBoardVisible] = useState(false);
 
   const [formContents, setformContents] = useState({});
+  const [liveFormContents, setLiveFormContents] = useState({});
 
   const scriptId = useRef(null);
 
@@ -112,7 +117,7 @@ export default function ReportingDashboard({
       }
       setColumns(parsedColumns);
 
-      await prepareInputParameters(result, parsedColumns);
+      await prepareInputParameters(result, parsedColumns, fetchId);
 
       if (result.summary_columns) {
         setSummaryColumns(JSON.parse(result.summary_columns));
@@ -157,7 +162,7 @@ export default function ReportingDashboard({
    */
 
   //Prepare input parameters by mapping default values and binding models if needed
-  async function prepareInputParameters(record, parsedColumns) {
+  async function prepareInputParameters(record, parsedColumns, fetchId) {
     setLoading(true);
     let urlParams = Location.search();
 
@@ -166,9 +171,11 @@ export default function ReportingDashboard({
 
     let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
 
-    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
+    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : [];
 
     let formContent = {};
+    const searchFields = (parameters || []).filter((p) => p.type === 'search' && p.search_enabled === 'yes');
+    setSearchParameters([...searchFields]);
 
     parameters = await parameters?.map((record) => {
       // Only if the url params does have a matching value ,
@@ -212,7 +219,15 @@ export default function ReportingDashboard({
       if (record.type === 'date' && !formContent[record.field]) {
         formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
       }
-
+      if (record.type === 'search') {
+        if (!formContent[record.field]) formContent[record.field] = [];
+        return {
+          ...record,
+          reportId: fetchId,
+          onReset: () => getPatientDetails(fetchId),
+          required: record.required,
+        };
+      }
       if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
         // let model = "";
         let model = CustomModels[record.modelName];
@@ -231,6 +246,7 @@ export default function ReportingDashboard({
     });
     // Update form content state
     setformContents(formContent);
+    setLiveFormContents(formContent);
 
     // Trigger form submission
     onFinish(formContent, null, record.input_parameters, parsedColumns);
@@ -242,12 +258,8 @@ export default function ReportingDashboard({
       // If enabled, clear the details array
       setDetails([]);
     } else {
-      //// Filter the array "parameters" and keep only elements where "type" is present (truthy)
-      //Keep only parameters that have a "type" → used for UI display
-      let filter = parameters.filter((ele) => ele.type);
-      // Update the "details" state with the filtered results
-
-      setDetails([...filter]);
+      // Keep all parameters with a type (including search) to render in FormCreator
+      setDetails([...parameters.filter((ele) => ele.type)]);
     }
   }
 
@@ -261,6 +273,7 @@ export default function ReportingDashboard({
     const { current, pageSize } = pagination || {};
     // If card script id is exist load that id otherwise load id
     const coreScriptId = scriptId.current ? scriptId.current : id;
+    const normalizedColumns = Array.isArray(parsedColumns) ? parsedColumns : Array.isArray(columns) ? columns : [];
 
     setLoading(true);
     try {
@@ -286,6 +299,7 @@ export default function ReportingDashboard({
       if (scope) {
         formBody = { body: { ...scope, ...paginationData } };
       }
+
       // Fetch result
       const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
 
@@ -299,8 +313,8 @@ export default function ReportingDashboard({
       // Update patients
       setPatients(resultDetails || []);
 
-      // Check if columns are not yet defined
-      if (parsedColumns.length === 0 && resultDetails.length > 0) {
+      // When display_columns is missing, build columns from the response keys.
+      if (normalizedColumns.length === 0 && resultDetails.length > 0) {
         // Create columns dynamically from resultDetails keys
         setColumns((prev) => {
           if (prev.length > 0) return prev;
@@ -330,31 +344,127 @@ export default function ReportingDashboard({
     }
   };
 
-  // Handle Submit
   const handleSubmit = (values) => {
+    // Extract search fields from the form values
+    const searchKeys = searchParameters.map((p) => p.field);
+    const currentSearchValues = {};
+    const formValues = {};
+
+    Object.keys(values).forEach((key) => {
+      if (searchKeys.includes(key)) {
+        currentSearchValues[key] = values[key];
+      } else {
+        formValues[key] = values[key];
+      }
+    });
+
+    const hasSearchValues = Object.values(currentSearchValues).some((v) => Array.isArray(v) && v.length > 0);
+
+    if (!hasSearchValues) {
+      runSubmit(formValues);
+      return;
+    }
+
+    // Check if main form values (non-search) changed
+    const formChanged = Object.keys(formValues).some((key) => {
+      const newVal = formValues[key];
+      const oldVal = formContents[key];
+
+      if (moment.isMoment(newVal) && moment.isMoment(oldVal)) {
+        return !newVal.isSame(oldVal, 'day');
+      }
+
+      return newVal !== oldVal;
+    });
+
+    if (formChanged) {
+      Modal.confirm({
+        title: 'Filters changed',
+        content: 'You changed some filters. Do you want to search using these filters also?',
+        okText: 'Yes',
+        cancelText: 'No',
+
+        onOk() {
+          // YES → send form values + search condition
+          const finalValues = {
+            ...formValues,
+            search_values: currentSearchValues,
+          };
+
+          runSubmit(finalValues);
+        },
+
+        onCancel() {
+          // NO → reset form values
+          const resetValues = {};
+          Object.keys(formValues).forEach((key) => {
+            resetValues[key] = null;
+          });
+
+          const finalValues = {
+            ...resetValues,
+            search_values: currentSearchValues,
+          };
+
+          runSubmit(finalValues);
+        },
+      });
+    } else {
+      // no form change
+      const resetValues = {};
+      Object.keys(formValues).forEach((key) => {
+        resetValues[key] = null;
+      });
+
+      const finalValues = {
+        ...resetValues,
+        search_values: currentSearchValues,
+      };
+
+      runSubmit(finalValues);
+    }
+  };
+
+  const runSubmit = (finalValues) => {
     const { pageSize } = pagination;
     const resetPage = 1;
 
-    // Reset script id on Submit
     scriptId.current = null;
 
-    // Get current query params
-    const currentUrlParams = Location.search();
-    const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
 
-    // Construct new query string
-    const newParams = new URLSearchParams({
-      ...cleanParams,
-      current: resetPage,
-      pageSize,
-    });
+    if (!hasSearchValues) {
+      const currentUrlParams = Location.search();
+      const { script_id, selected_card, ...cleanParams } = currentUrlParams;
 
-    // Replace URL
-    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
+      const newParams = new URLSearchParams({
+        ...cleanParams,
+        current: resetPage,
+        pageSize,
+      });
+
+      const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+      window.history.replaceState({}, '', newUrl);
+    }
 
-    // Trigger submit handler
-    onFinish(values, resetPage);
+    onFinish(finalValues, resetPage);
+  };
+
+  const selectedSearchFields = details.filter((field) => {
+    if (field.type !== 'search') return false;
+
+    const value = liveFormContents[field.field];
+    return Array.isArray(value) ? value.length > 0 : !!value;
+  });
+
+  const handleRemoveSearchField = (fieldName) => {
+    const updatedValues = {
+      ...liveFormContents,
+      [fieldName]: [],
+    };
+
+    setLiveFormContents(updatedValues);
+    handleSubmit(updatedValues);
   };
 
   /**
@@ -389,6 +499,12 @@ export default function ReportingDashboard({
         //Getting url friendly value by matching the url values and input_parameter values
         let value = values[parameter.field];
 
+        // If the value is missing at the root level (which happens when search fields are moved 
+        // into search_values during submission), try to retrieve it from the nested object.
+        if (value === undefined && values.search_values && values.search_values[parameter.field] !== undefined) {
+          value = values.search_values[parameter.field];
+        }
+
         // Keep Moment object in state for picker
         if (parameter.type === 'date' && value) {
           formContent[parameter.field] = value.isValid ? value : moment(value); // ensure Moment
@@ -410,6 +526,7 @@ export default function ReportingDashboard({
       );
 
       setformContents(formContent);
+      setLiveFormContents(formContent);
       Location.search({ ...Location.search(), ...filteredParams });
     }
 
@@ -505,17 +622,18 @@ export default function ReportingDashboard({
                 }}
                 styles={{ paddingRight: '15px', alignItems: 'center' }}
                 fields={details}
+                reportId={id}
                 formContent={formContents}
                 // formContent={{ [model]: {} }}
                 modelIndex="requestId"
                 model={model}
                 onSubmit={handleSubmit}
+                onFormValuesChange={setLiveFormContents}
                 callback={() => {
                   // history.goBack();
                 }}
               />
             ) : null}
-            {/* </Card> */}
           </div>
 
           {/** GuestList component start*/}
@@ -533,6 +651,8 @@ export default function ReportingDashboard({
             pagination={pagination}
             handlePagination={handlePagination}
             attributes={attributes}
+            selectedSearchFields={selectedSearchFields}
+            handleRemoveSearchField={handleRemoveSearchField}
             fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
           />
           {/** GuestList component end*/}
@@ -566,6 +686,8 @@ function GuestList({
   pagination,
   handlePagination,
   attributes,
+  selectedSearchFields,
+  handleRemoveSearchField,
   fetchReportData,
 }) {
   /**
@@ -824,13 +946,31 @@ function GuestList({
     <>
       <div className="table-header">
         <div className="table-left">
-          {/* shwoing caption is not correct so this commented */}
-          {/* <span  className="menu-caption">{config.caption}</span> */}
-          <Search placeholder="Enter Search Value" allowClear onChange={onSearch} />
-          {/* <p className="size-hint">{patients.length} records.</p> */}
+          {/* {selectedSearchFields?.length > 0 ? (
+            <div className="search-tags-container">
+              {selectedSearchFields.map((field) => (
+                <Tag key={field.field} closable color="blue" onClose={() => handleRemoveSearchField(field.field)}>
+                  {field.caption}
+                </Tag>
+              ))}
+            </div>
+          ) : null} */}
         </div>
 
         <div className="table-right">
+          {/* shwoing caption is not correct so this commented */}
+          {/* <span  className="menu-caption">{config.caption}</span> */}
+          <Search className="table-search-input" placeholder="Enter Search Value" allowClear onChange={onSearch} />
+          <div className="table-export-button">
+            {exportData.exportDatas && (
+              <ExportReactCSV
+                title={config.caption}
+                headers={exportData.exportDatas.exportDataHeaders}
+                csvData={exportData.exportDatas.exportDataColumns}
+              />
+            )}
+          </div>
+
           {/* QR Scan start */}
           {showScanner ? (
             <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
@@ -863,19 +1003,7 @@ function GuestList({
           <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
             <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
           </Modal>
-
-          <div>
-            {/* QR Scan End */}
-            {/*table data export to csc component*/}
-            {exportData.exportDatas && (
-              <ExportReactCSV
-                title={config.caption}
-                fileName={`${(config.caption || 'Report').trim().replace(/\s+/g, '_')}_${moment().format('YYYY-MM-DD-HH-mm-ss-SSS')}.xlsx`}
-                headers={exportData.exportDatas.exportDataHeaders}
-                csvData={exportData.exportDatas.exportDataColumns}
-              />
-            )}
-          </div>
+          {/* QR Scan End */}
         </div>
       </div>
 

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

@@ -16,12 +16,17 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 12px;
     padding-bottom: 10px;
     padding-top: 10px;
 
     .table-left {
       display: flex;
       align-items: center;
+      gap: 8px;
+      flex: 1;
+      min-width: 0;
+      margin-left: 6px;
 
       .menu-caption {
         min-width: 100px;
@@ -31,9 +36,23 @@
 
     .table-right{
       display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: nowrap;
       gap: 4px;
     }
   }
+
+  .table-search-input {
+    width: 220px;
+    min-width: 220px;
+  }
+
+  .table-export-button {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
   
 
   .form-card {
@@ -48,6 +67,23 @@
     padding: 0px;
   }
 
+  .search-tags-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+  }
+
+  .search-tags-container .ant-tag {
+    flex-shrink: 0;
+    margin-inline-end: 0;
+  }
+
   // margin: 0px 10px;
 
   .ant-skeleton {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.20",
+  "version": "2.6.22",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"