ui-soxo-bootstrap-core 2.6.1-dev.26 → 2.6.1-dev.28

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';
 
@@ -56,7 +56,7 @@ 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);
 
@@ -69,6 +69,7 @@ export default function ReportingDashboard({
   const [dashboardVisible, setDashBoardVisible] = useState(false);
 
   const [formContents, setformContents] = useState({});
+  const [liveFormContents, setLiveFormContents] = useState({});
 
   const scriptId = useRef(null);
 
@@ -116,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));
@@ -161,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();
 
@@ -170,10 +171,10 @@ 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');
+    const searchFields = (parameters || []).filter((p) => p.type === 'search' && p.search_enabled === 'yes');
     setSearchParameters([...searchFields]);
 
     parameters = await parameters?.map((record) => {
@@ -218,13 +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') {
-      //   return {
-      //     ...record,
-      //     component: AdvancedSearchSelect,
-      //     required: record.required,
-      //   };
-      // }
+      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];
@@ -243,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);
@@ -254,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 && ele.type !== 'search');
-      // 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)]);
     }
   }
 
@@ -345,16 +345,29 @@ export default function ReportingDashboard({
   };
 
   const handleSubmit = (values) => {
-    const hasSearchValues = Object.values(searchValues).some((v) => Array.isArray(v) && v.length > 0);
+    // 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(values);
+      runSubmit(formValues);
       return;
     }
 
-    // Check if form values changed (date or others)
-    const formChanged = Object.keys(values).some((key) => {
-      const newVal = values[key];
+    // 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)) {
@@ -374,8 +387,8 @@ export default function ReportingDashboard({
         onOk() {
           // YES → send form values + search condition
           const finalValues = {
-            ...values,
-            search_values: searchValues,
+            ...formValues,
+            search_values: currentSearchValues,
           };
 
           runSubmit(finalValues);
@@ -384,13 +397,13 @@ export default function ReportingDashboard({
         onCancel() {
           // NO → reset form values
           const resetValues = {};
-          Object.keys(values).forEach((key) => {
+          Object.keys(formValues).forEach((key) => {
             resetValues[key] = null;
           });
 
           const finalValues = {
             ...resetValues,
-            search_values: searchValues,
+            search_values: currentSearchValues,
           };
 
           runSubmit(finalValues);
@@ -399,13 +412,13 @@ export default function ReportingDashboard({
     } else {
       // no form change
       const resetValues = {};
-      Object.keys(values).forEach((key) => {
+      Object.keys(formValues).forEach((key) => {
         resetValues[key] = null;
       });
 
       const finalValues = {
         ...resetValues,
-        search_values: searchValues,
+        search_values: currentSearchValues,
       };
 
       runSubmit(finalValues);
@@ -436,6 +449,24 @@ export default function ReportingDashboard({
 
     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);
+  };
+
   /**
    *
    * @param {*} values
@@ -468,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
@@ -489,6 +526,7 @@ export default function ReportingDashboard({
       );
 
       setformContents(formContent);
+      setLiveFormContents(formContent);
       Location.search({ ...Location.search(), ...filteredParams });
     }
 
@@ -584,62 +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 style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
-              {searchParameters.length > 0
-                ? searchParameters.map((param) => (
-                    <AdvancedSearchSelect
-                      key={param.field}
-                      parameter={param}
-                      field={param}
-                      reportId={reportId}
-                      value={searchValues[param.field] || []}
-                      onChange={(value) => {
-                        setSearchValues((prev) => ({
-                          ...prev,
-                          [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}
-            </div>
           </div>
 
           {/** GuestList component start*/}
@@ -657,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*/}
@@ -690,6 +686,8 @@ function GuestList({
   pagination,
   handlePagination,
   attributes,
+  selectedSearchFields,
+  handleRemoveSearchField,
   fetchReportData,
 }) {
   /**
@@ -722,7 +720,6 @@ function GuestList({
 
   const { isMobile, dispatch } = useContext(GlobalContext);
   const [single, setSingle] = useState({});
-  const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
 
   // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
   const cols = buildDisplayColumns({
@@ -731,7 +728,6 @@ function GuestList({
     isFixedIndex,
     CustomComponents,
     refresh,
-    otherDetails,
   });
 
   /**
@@ -863,51 +859,35 @@ function GuestList({
   const handleCloseEdit = () => {
     setShowEdit(false);
   };
-  /**
-   *
-   */
-  function calculateSummaryValues(summaryCols, pageData) {
-    const summaryValues = {};
-
-    summaryCols.forEach((col) => {
-      const field = col.field;
-
-      if (col.function === 'sum') {
-        summaryValues[field] = pageData.reduce((total, row) => total + Number(row[field] || 0), 0);
-      }
-
-      if (col.function === 'count') {
-        summaryValues[field] = pageData.length;
-      }
-
-      if (col.function === 'avg') {
-        const total = pageData.reduce((sum, row) => sum + Number(row[field] || 0), 0);
-        summaryValues[field] = pageData.length ? total / pageData.length : 0;
-      }
-      if (col.function === 'min') {
-        const values = pageData.map((row) => Number(row[field] || 0));
-        summaryValues[field] = values.length ? Math.min(...values) : 0;
-      }
-
-      if (col.function === 'max') {
-        const values = pageData.map((row) => Number(row[field] || 0));
-        summaryValues[field] = values.length ? Math.max(...values) : 0;
-      }
-    });
-
-    return summaryValues;
-  }
   return (
     <>
       <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)}>
@@ -940,18 +920,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}
-                headers={exportData.exportDatas.exportDataHeaders}
-                csvData={exportData.exportDatas.exportDataColumns}
-              />
-            )}
-          </div>
+          {/* QR Scan End */}
         </div>
       </div>
 
@@ -972,131 +941,46 @@ function GuestList({
               sticky
               pagination={false}
               // title={config.caption}
-              // summary={(pageData) => {
-              //   // Variable to save the summary data
-              //   let summary = {};
-
-              //   let summaryColumns = [
-              //     { field: 'opb_amt', title: 'Amount' },
-              //     { field: 'opb_netamt', title: 'Net Amount' },
-              //   ];
-
-              //   let tableColumns = cols;
-
-              //   // Creating a copy of columns to append the summary configuration that is needed to set
-              //   tableColumns.forEach((record, index) => {
-              //     summaryColumns.forEach((inner) => {
-              //       if (record.field === inner.field) {
-              //         tableColumns[index].summary = inner;
-              //       }
-              //     });
-              //   });
-
-              //   // Initialize
-              //   summaryColumns.map((item) => {
-              //     return (summary[item.field] = 0);
-              //   });
-
-              //   // Find the total
-              //   summaryColumns.map((item) => {
-              //     pageData.forEach((entry) => {
-              //       return (summary[item.field] = summary[item.field] + entry[item.field]);
-              //     });
-              //   });
-
-              //   return (
-              //     <>
-              //       <Table.Summary.Row>
-              //         {tableColumns.map((column, key) => {
-              //           return <Table.Summary.Cell key={key}>{column.summary ? <>{summary[column.summary.field]}</> : null}</Table.Summary.Cell>;
-              //         })}
-              //       </Table.Summary.Row>
-              //     </>
-              //   );
-              // }}
-              //  summary={(pageData) => {
-              //   const summaryCols = columns.filter((col) => col.enable_summary);
-              //   if (!summaryCols.length) return null;
-
-              //   const summaryValues = {};
-
-              //   summaryCols.forEach((col) => {
-              //     const field = col.field;
-
-              //     if (col.function === 'sum') {
-              //       summaryValues[field] = pageData.reduce((total, row) => total + Number(row[field] || 0), 0);
-              //     }
-
-              //     if (col.function === 'count') {
-              //       summaryValues[field] = pageData.length;
-              //     }
-
-              //     if (col.function === 'avg') {
-              //       const total = pageData.reduce((sum, row) => sum + Number(row[field] || 0), 0);
-              //       summaryValues[field] = pageData.length ? total / pageData.length : 0;
-              //     }
-              //   });
-
-              //   return (
-              //     <Table.Summary.Row className="report-summary-row">
-              //       {cols.map((col, index) => {
-              //         // show summary value
-              //         if (summaryValues[col.field] !== undefined) {
-              //           return (
-              //             <Table.Summary.Cell key={index}>
-              //               <strong>{summaryValues[col.field]}</strong>
-              //             </Table.Summary.Cell>
-              //           );
-              //         }
-
-              //         // caption before summary column
-              //         const nextCol = cols[index + 1];
-              //         if (nextCol && summaryValues[nextCol.field] !== undefined) {
-              //           const configCol = columns.find((c) => c.field === nextCol.field);
-              //           return (
-              //             <Table.Summary.Cell key={index}>
-              //               <strong>{configCol?.summary_caption || 'Total'}</strong>
-              //             </Table.Summary.Cell>
-              //           );
-              //         }
-
-              //         return <Table.Summary.Cell key={index} />;
-              //       })}
-              //     </Table.Summary.Row>
-              //   );
-              // }}
-
               summary={(pageData) => {
-                const summaryCols = columns.filter((col) => col.enable_summary);
-                if (!summaryCols.length) return null;
-
-                const summaryValues = calculateSummaryValues(summaryCols, pageData);
+                // Variable to save the summary data
+                let summary = {};
+
+                let summaryColumns = [
+                  { field: 'opb_amt', title: 'Amount' },
+                  { field: 'opb_netamt', title: 'Net Amount' },
+                ];
+
+                let tableColumns = cols;
+
+                // Creating a copy of columns to append the summary configuration that is needed to set
+                tableColumns.forEach((record, index) => {
+                  summaryColumns.forEach((inner) => {
+                    if (record.field === inner.field) {
+                      tableColumns[index].summary = inner;
+                    }
+                  });
+                });
+
+                // Initialize
+                summaryColumns.map((item) => {
+                  return (summary[item.field] = 0);
+                });
+
+                // Find the total
+                summaryColumns.map((item) => {
+                  pageData.forEach((entry) => {
+                    return (summary[item.field] = summary[item.field] + entry[item.field]);
+                  });
+                });
 
                 return (
-                  <Table.Summary.Row className="report-summary-row">
-                    {cols.map((col, index) => {
-                      if (summaryValues[col.field] !== undefined) {
-                        return (
-                          <Table.Summary.Cell key={index}>
-                            <strong>{summaryValues[col.field]}</strong>
-                          </Table.Summary.Cell>
-                        );
-                      }
-
-                      const nextCol = cols[index + 1];
-                      if (nextCol && summaryValues[nextCol.field] !== undefined) {
-                        const configCol = columns.find((c) => c.field === nextCol.field);
-
-                        return (
-                          <Table.Summary.Cell key={index}>
-                            <strong>{configCol?.summary_caption || 'Total'}</strong>
-                          </Table.Summary.Cell>
-                        );
-                      }
-
-                      return <Table.Summary.Cell key={index} />;
-                    })}
-                  </Table.Summary.Row>
+                  <>
+                    <Table.Summary.Row>
+                      {tableColumns.map((column, key) => {
+                        return <Table.Summary.Cell key={key}>{column.summary ? <>{summary[column.summary.field]}</> : null}</Table.Summary.Cell>;
+                      })}
+                    </Table.Summary.Row>
+                  </>
                 );
               }}
             />

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.1-dev.26",
+  "version": "2.6.1-dev.28",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"