@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/common/directives/SearchTemplate.scss

@@ -0,0 +1,14 @@
+.error-help-text-searchtemplate {
+  color: #5c0606;
+  position: absolute;
+  padding: 1%;
+  padding-left: 3%;
+  padding-right: 3%;
+  border-radius: 20px;
+  right: 3%;
+  top: 0%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  background-color: rgb(236, 188, 188);
+  font-size: 0.6rem;
+}

package/src/common/dynamicView/DynamicView.jsx

@@ -0,0 +1,353 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { useSelector } from 'react-redux';
+import { getAssignedFeature } from '@/common/getAssignedFeature/getAssignedFeature';
+import { showToast } from '@/common/toaster/toaster';
+import SideOverlay from '@/views/custom-components/SideOverlay';
+import InputViewComponent from '@/common/dynamicView/InputViewComponent';
+import PropTypes from 'prop-types';
+import CustomizedTable from '@/views/custom-components/CustomizedTable/CustomizedTableV2';
+import { useParams } from 'react-router';
+
+// import SafeHtml from '@/common/SafeHtml.jsx';
+/**
+ * DynamicView component for rendering and managing dynamic data views.
+ *
+ * @module DynamicView
+ * @param {Object} props - The component props.
+ * @param {Object} props.config - Configuration object for the component.
+ * @param {Object} props.data - Data object to be displayed in the view.
+ * @param {Function} props.setData - Function to update the data state.
+ * @param {Object} props.navigationstate - Current navigation state.
+ * @param {Function} props.locationChange - Callback for location changes.
+ * @param {Function} props.fieldChangeCallback - Callback for field changes.
+ * @param {Function} props.fieldSelectizeCallback - Callback for selectize field changes.
+ * @param {boolean} [props.setDefaultValue=false] - Flag to set default values.
+ * @param {string} props.search - Search string for filtering data.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+function DynamicView({
+  config,
+  data,
+  setData,
+  navigationstate,
+  locationChange,
+  fieldChangeCallback,
+  fieldSelectizeCallback,
+  setDefaultValue = false,
+  search,
+  isLoading,
+  setIsLoading,
+  uiLocationId,
+  changedUsingUi,
+  setFetchUptoLevelLimit,
+  pagingService,
+  retrieveTableDataByQueryId,
+  onDataRendered,
+  allDistrictReq,
+  setAllDistrictReq,
+  allBlockReq,
+  setAllBlockReq,
+  allPhcReq,
+  setAllPhcReq,
+  clearPreviousLocation,
+  styleConfig,
+  callLocationChange,
+  setCallLocationChange,
+  locationPartSelected,
+  showScrollArrows
+}) {
+  let { id } = useParams();
+
+  const [aboveData, setAboveData] = useState('');
+  const [belowData, setBelowData] = useState('');
+
+  useEffect(() => {
+    const htmlData = config?.containers?.tableContainer?.[0]?.htmlData;
+
+    if (htmlData && htmlData.includes('#table#')) {
+      const [above, below] = htmlData.split('#table#');
+      setAboveData(above);
+      setBelowData(below);
+    }
+  }, [config?.containers?.tableContainer?.[0]?.htmlData]);
+  const [sortedData, setSortedData] = useState(
+    data?.tableData?.map((item) => {
+      Object.keys(item)?.forEach((key) => {
+        const value = item[key];
+        item[key] = value || value === 0 || typeof value === 'boolean' ? value : ' ';
+      });
+      return item;
+    }) || []
+  );
+  const columns = data?.tableToDisplay?.header.map((column) => {
+    return { ...column, sortOrder: 'asc' };
+  });
+  const [headers, setHeaders] = useState(columns);
+  const { user, linearMenuItems } = useSelector((state) => state.Authenticate);
+  const [isFilterToBeShown, setIsFilterToBeShown] = useState(false);
+  const [overlayOpen, setOverlayOpen] = useState(false);
+  const [locations, setLocations] = useState([]);
+  const [uiLocations, setUiLocations] = useState(null);
+  const [selectedLocation, setSelectedLocation] = useState({});
+  const [uiSelectedLocation, setUiSelectedLocation] = useState(null);
+  const [keepMounted, setKeepMounted] = useState(true);
+  const [resetFilter, setResetFilter] = useState(false);
+
+  /**
+   * Toggles the state of the overlay component.
+   *
+   * @function handleOverlayState
+   */
+
+  const resetLocation = () => {
+    if (uiLocations && uiSelectedLocation) {
+      setLocations(uiLocations);
+      setSelectedLocation(uiSelectedLocation);
+      setUiLocations(null);
+      setUiSelectedLocation(null);
+      setTimeout(() => {
+        setCallLocationChange(false);
+      }, 100);
+      return;
+    }
+    setCallLocationChange(false);
+  };
+  useEffect(() => {
+    if (callLocationChange) {
+      resetLocation();
+    }
+  }, [callLocationChange, uiLocations, uiSelectedLocation, search]);
+  const handleOverlayState = ({ search } = {}) => {
+    if (search) {
+      setUiLocations(null);
+      setUiSelectedLocation(null);
+    }
+
+    setOverlayOpen(!overlayOpen);
+  };
+  /**
+   * Handles sorting of the data based on the specified field.
+   *
+   * @function handleSort
+   * @param {string} field - The field name to sort by.
+   */
+  const handleSort = (column) => {
+    const order = column.sortOrder === 'asc' ? 'desc' : 'asc';
+    setHeaders((prev) =>
+      prev.map((col) => {
+        if (col.field === column.field) {
+          return { ...col, sortOrder: order };
+        }
+        return col;
+      })
+    );
+    const newSortedData = [...sortedData].sort((a, b) => {
+      const aValue = a[column.field]?.toString().toLowerCase() || '';
+      const bValue = b[column.field]?.toString().toLowerCase() || '';
+
+      if (order === 'asc') {
+        return aValue.localeCompare(bValue);
+      } else {
+        return bValue.localeCompare(aValue);
+      }
+    });
+
+    setSortedData(newSortedData);
+  };
+
+  /**
+   * Renders the input component for dynamic field handling.
+   *
+   * @function inputComponent
+   * @returns {JSX.Element} The rendered input component.
+   */
+
+  useEffect(() => {
+    setKeepMounted(false);
+    setTimeout(() => {
+      setKeepMounted(true);
+    }, 1000);
+    // if (config?.isFilterOpen !== undefined) {
+    setTimeout(() => {
+      setOverlayOpen(config?.isFilterOpen || false);
+    }, 400);
+    // }
+  }, [id, config?.isFilterOpen]);
+  const inputComponent = () => {
+    // fieldChangeCallback("date","dfkdjf")
+    return (
+      <div key={id} id={id}>
+        <InputViewComponent
+          handleOverlayState={handleOverlayState}
+          details={config.containers?.fieldsContainer}
+          data={data}
+          setData={setData}
+          setDefaultValue={setDefaultValue}
+          locationChange={locationChange}
+          locations={locations}
+          setLocations={setLocations}
+          fieldChangeCallback={fieldChangeCallback}
+          fieldSelectizeCallback={fieldSelectizeCallback}
+          search={search}
+          isDownloadOffline={!!config.isSupportOffline}
+          uiLocationId={uiLocationId}
+          changedUsingUi={changedUsingUi}
+          setFetchUptoLevelLimit={setFetchUptoLevelLimit}
+          allDistrictReq={allDistrictReq}
+          setAllDistrictReq={setAllDistrictReq}
+          allBlockReq={allBlockReq}
+          setAllBlockReq={setAllBlockReq}
+          allPhcReq={allPhcReq}
+          setAllPhcReq={setAllPhcReq}
+          selectedLocation={selectedLocation}
+          setSelectedLocation={setSelectedLocation}
+          setUiLocations={setUiLocations}
+          setUiSelectedLocation={setUiSelectedLocation}
+          clearPreviousLocation={clearPreviousLocation}
+          resetFilter={resetFilter}
+          setResetFilter={setResetFilter}
+          locationPartSelected={locationPartSelected}
+        />
+      </div>
+    );
+  };
+
+  /**
+   * Fetches user rights and permissions based on the current navigation state.
+   *
+   * @function getRights
+   * @returns {Promise<void>} A promise that resolves when rights are fetched.
+   */
+  const getRights = useCallback(async () => {
+    try {
+      const res = await getAssignedFeature(navigationstate, linearMenuItems);
+      if (res) {
+        console.log('res', res);
+      }
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in loading features', type: 'error' });
+    }
+  }, [navigationstate, linearMenuItems]);
+  useEffect(() => {
+    if (user) {
+      if (navigationstate != null) {
+        getRights();
+      }
+    }
+    if (data?.tableToDisplay?.header) {
+      const updatedHeader = data.tableToDisplay.header.map((header) => ({
+        ...header,
+        hide: header?.field?.includes('hidden_'), // Add 'hide' property if fieldName includes 'hidden_'
+      }));
+      setHeaders(updatedHeader);
+    }
+    if (config.containers) {
+      const isFilterVisible = config?.containers?.fieldsContainer?.some((field) => !field.isHidden);
+      setIsFilterToBeShown(isFilterVisible);
+    }
+    // if (config?.isFilterOpen !== undefined) {
+    //   // setOverlayOpen(config.isFilterOpen);
+    // }
+  }, [config, user, navigationstate, getRights]);
+  useEffect(() => {
+    setSortedData(data?.tableData);
+    if (data?.tableToDisplay?.header) {
+      const updatedHeader = data.tableToDisplay.header.map((header) => ({
+        ...header,
+        hide: header?.field?.includes('hidden_'), // Add 'hide' property if fieldName includes 'hidden_'
+      }));
+      setHeaders(updatedHeader);
+    }
+    if (onDataRendered) {
+      onDataRendered();
+    }
+  }, [data]);
+  return (
+    <div>
+      <div className="mb-4">
+        {config.htmlData && aboveData && data.tableToDisplay.body.length > 0 && (
+          <div dangerouslySetInnerHTML={{ __html: aboveData }} />
+        )}
+      </div>
+
+      <CustomizedTable
+        dataColspan={config?.containers?.tableContainer[0]?.dataColspan}
+        colspanData={config.colspanData}
+        paginationConfig={{
+          pagination: config?.layout === 'dynamicReportWithPagination',
+          paginationType: config.layout === 'dynamicReportWithPagination' ? 'infinite-scroll' : 'pagination',
+          rowsPerPageInTable: config?.numberOfRecordsPerPage,
+          hasMore: !pagingService.allRetrieved,
+          loadMore: () =>
+            !pagingService.allRetrieved && !pagingService.pagingRetrivalOn && retrieveTableDataByQueryId(),
+        }}
+        styleConfig={styleConfig}
+        columns={headers}
+        tableData={sortedData}
+        handleSort={handleSort}
+        isLoading={isLoading}
+        showAllBorders={true}
+        showFullContent={true}
+        showScrollArrows={showScrollArrows}
+      />
+      <div className="mb-2 mt-6">
+        {config.htmlData && belowData && data.tableToDisplay.body.length > 0 && (
+          <div dangerouslySetInnerHTML={{ __html: belowData }} />
+        )}
+      </div>
+      {isFilterToBeShown && (
+        <SideOverlay
+          ModalProps={{
+            keepMounted: keepMounted,
+          }}
+          title="Filter"
+          FormBody={inputComponent()}
+          handleOverlayState={handleOverlayState}
+          resetButtonLabel="Reset"
+          onResetClick={() => {
+            setResetFilter(true);
+          }}
+          overlayOpen={overlayOpen}
+          isForm={false}
+          dataTestId="report-view-sideoverlay"
+          formProps={{ isLoading, setIsLoading }}
+        />
+      )}
+    </div>
+  );
+}
+DynamicView.propTypes = {
+  config: PropTypes.any, // Adjust the shape according to your actual config object structure
+  data: PropTypes.any, // or PropTypes.array, PropTypes.object depending on what data is
+  setData: PropTypes.any,
+  navigationstate: PropTypes.any, // Adjust according to the actual type
+  locationChange: PropTypes.any, // Assuming this is a anytion
+  fieldChangeCallback: PropTypes.any, // Assuming this is a anytion
+  fieldSelectizeCallback: PropTypes.any, // Assuming this is a function
+  setDefaultValue: PropTypes.bool, // Boolean type
+  search: PropTypes.any, // Adjust according to the actual type of search
+  isLoading: PropTypes.any,
+  setIsLoading: PropTypes.any,
+  uiLocationId: PropTypes.any,
+  changedUsingUi: PropTypes.any,
+  setFetchUptoLevelLimit: PropTypes.any,
+  pagingService: PropTypes.any,
+  retrieveTableDataByQueryId: PropTypes.any,
+  allDistrictReq: PropTypes.any,
+  setAllDistrictReq: PropTypes.any,
+  allBlockReq: PropTypes.any,
+  setAllBlockReq: PropTypes.any,
+  allPhcReq: PropTypes.any,
+  setAllPhcReq: PropTypes.any,
+  onDataRendered: PropTypes.any,
+  clearPreviousLocation: PropTypes.any,
+  styleConfig: PropTypes.any,
+  callLocationChange: PropTypes.any,
+  setCallLocationChange: PropTypes.any,
+  locationPartSelected: PropTypes.any,
+  showScrollArrows: PropTypes.any,
+};
+export default DynamicView;