@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/common/dynamicView/InputViewComponent.jsx

@@ -0,0 +1,298 @@
+import React, { useState, useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { Button, Container } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import '@/common/dynamicView/InputViewComponent.scss';
+import { InputFieldComponent } from '@/common/dynamicView/InputFieldComponent';
+import PropTypes from 'prop-types';
+import { t } from 'i18next';
+import { showToast } from '@/common/toaster/toaster';
+
+/**
+ * InputViewComponent - A component for displaying and handling a form based on dynamic input fields.
+ * @module InputViewComponent
+ * @param {Object} props - The properties passed to the component.
+ * @param {Function} props.handleOverlayState - Function to toggle the overlay state.
+ * @param {Function} props.search - Function to handle search functionality.
+ * @param {Array} props.details - Array of field details for rendering inputs.
+ * @param {Object} props.data - The current form data.
+ * @param {Function} props.setData - Function to update the form data.
+ * @param {Function} props.locationChange - Callback for handling location changes.
+ * @param {Function} props.fieldChangeCallback - Callback for handling field changes.
+ * @param {Function} props.fieldSelectizeCallback - Callback for handling selectize field changes.
+ * @param {boolean} [props.setDefaultValue=false] - Flag to set default values.
+ * @param {boolean} props.isDownloadOffline - Flag to enable offline download option.
+ * @returns {JSX.Element} The rendered component.
+ */
+const InputViewComponent = ({
+  handleOverlayState,
+  search,
+  details,
+  data,
+  setData,
+  locationChange,
+  fieldChangeCallback,
+  fieldSelectizeCallback,
+  setDefaultValue = false,
+  isDownloadOffline,
+  locations,
+  setLocations,
+  uiLocationId,
+  changedUsingUi,
+  setFetchUptoLevelLimit,
+  allDistrictReq,
+  setAllDistrictReq,
+  allBlockReq,
+  setAllBlockReq,
+  allPhcReq,
+  setAllPhcReq,
+  selectedLocation,
+  setSelectedLocation,
+  setUiLocations = () => {},
+  setUiSelectedLocation = () => {},
+  clearPreviousLocation,
+  resetFilter,
+  setResetFilter,
+  locationPartSelected,
+}) => {
+  const [fieldNameToEmptyString, setfieldNameToEmptyString] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+  const [isReset, setIsReset] = useState(false);
+  const [triggerFirstRun, setTriggerFirstRun] = useState(0);
+
+  const methods = useForm({
+    defaultValues: fieldNameToEmptyString,
+    mode: 'onChange',
+  });
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const resetInputView = () => {
+    reset();
+    setSelectedLocation({});
+    setIsReset(true);
+    setTriggerFirstRun((prev) => prev + 1);
+  };
+
+  useEffect(() => {
+    if (resetFilter) {
+      resetInputView();
+      setResetFilter(false);
+    }
+  }, [resetFilter]);
+
+  /**
+   * @function onSubmit
+   * Handles form submission, triggering the search and overlay state change.
+   */
+  const onSubmit = () => {
+    // setIsLoading((cur) => !cur);
+    const locationField = details?.find((field) => field.fieldType === 'location');
+    if (locationField) {
+      // 2. Check if requiredUptoLevel exists and has a value
+      const hasRequiredLevel = Object.prototype.hasOwnProperty.call(locationField, 'requiredUptoLevel');
+
+      if (hasRequiredLevel) {
+        const requiredLevel = parseInt(locationField?.requiredUptoLevel, 0);
+        if (requiredLevel) {
+          const optionSelected = selectedLocation?.finalSelected?.optionSelected;
+          const optionId = Array.isArray(optionSelected) ? optionSelected[0]?.id : optionSelected?.id;
+          const placeholderIds = [-1, -2, -3];
+          const isRealSelection = optionId !== undefined && !placeholderIds.includes(optionId);
+          if (isRealSelection) {
+            const currentLevel = selectedLocation?.finalSelected?.level;
+            if (requiredLevel > currentLevel) {
+              showToast({ message: t('Please select location up to the required level'), type: 'error' });
+              return;
+            }
+          }
+        }
+      }
+    }
+
+    // if(selectedLocation)
+    handleOverlayState({ search: true });
+    search({ reset: true, isSearch: true });
+    setIsReset(false);
+    // setIsLoading((cur) => !cur);
+  };
+  useEffect(() => {
+    if (!isReset) {
+      const fieldNameToEmpty = details
+        ?.filter((detail) => !detail.isHidden) // Filter out hidden fields
+        .sort((a, b) => a.sequence - b.sequence) // Sort by sequence
+        .reduce((acc, detail) => {
+          if (detail.fieldType === 'dateFromTo') {
+            const fromValue = data[`from_${detail.fieldName}_1`];
+            const toValue = data[`to_${detail.fieldName}_1`];
+            if (fromValue) {
+              setValue(`from_${detail.fieldName}`, fromValue);
+            }
+
+            if (toValue) {
+              setValue(`to_${detail.fieldName}`, toValue);
+            }
+          } else if (detail.fieldType === 'date') {
+            if (data[detail.fieldName]) {
+              setValue(detail.fieldName, data[`${detail.fieldName}_1`]);
+            }
+          } else if (detail.fieldType === 'onlyMonth') {
+            setValue(detail.fieldName, data[`${detail.fieldName}_1`]);
+          } else if (detail.fieldType === 'dateNTime') {
+            setValue(detail.fieldName, data[detail.fieldName]);
+          } else if (detail.fieldType === 'onlyMonthFromTo') {
+            const fromValue = data[`from_${detail.fieldName}_1`];
+            const toValue = data[`to_${detail.fieldName}_1`];
+            if (fromValue) {
+              setValue(`from_${detail.fieldName}`, fromValue);
+            }
+
+            if (toValue) {
+              setValue(`to_${detail.fieldName}`, toValue);
+            }
+          } else if (detail.fieldType === 'selectizeForCombo') {
+            if (data[detail.fieldName]) {
+              setValue(detail.fieldName, { key: data[detail.fieldName], value: data[detail.fieldName] });
+            }
+          } else {
+            setValue(detail.fieldName, data[detail.fieldName] ? data[detail.fieldName] : '');
+            acc[detail.fieldName] = data[detail.fieldName] || '';
+          }
+
+          return acc;
+        }, {});
+      setfieldNameToEmptyString(fieldNameToEmpty);
+      setShowForm(true);
+    }
+  }, [data, setValue, isReset]);
+
+  return (
+    <Container sx={{ marginTop: '10px' }} data-testid="reportview-filter-form">
+      {showForm && (
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} noValidate>
+            <Grid container spacing={2}>
+              <Grid item sx={{ width: '100%' }}>
+                {details
+                  ?.filter((detail) => !detail.isHidden)
+                  .sort((a, b) => a.sequence - b.sequence)
+                  .map((detail, index) => (
+                    <div key={index + 1}>
+                      <InputFieldComponent
+                        config={detail}
+                        data={data}
+                        setData={setData}
+                        locations={locations}
+                        setLocations={setLocations}
+                        fieldChangeCallback={fieldChangeCallback}
+                        setDefaultValue={setDefaultValue}
+                        locationChange={locationChange}
+                        fieldSelectizeCallback={fieldSelectizeCallback}
+                        control={control}
+                        errors={errors}
+                        uiLocationId={uiLocationId}
+                        changedUsingUi={changedUsingUi}
+                        dataTestId={`reportview-filterFiled-${detail?.fieldName}`}
+                        setFetchUptoLevelLimit={setFetchUptoLevelLimit}
+                        allDistrictReq={allDistrictReq}
+                        setAllDistrictReq={setAllDistrictReq}
+                        allBlockReq={allBlockReq}
+                        setAllBlockReq={setAllBlockReq}
+                        allPhcReq={allPhcReq}
+                        setAllPhcReq={setAllPhcReq}
+                        setSelectedLocation={setSelectedLocation}
+                        selectedLocation={selectedLocation}
+                        setUiLocations={setUiLocations}
+                        setUiSelectedLocation={setUiSelectedLocation}
+                        clearPreviousLocation={clearPreviousLocation}
+                        triggerFirstRun={triggerFirstRun}
+                        locationPartSelected={locationPartSelected}
+                      />
+                    </div>
+                  ))}
+              </Grid>
+
+              <Grid container className="mb-1 mr-4" spacing={1} justifyContent="flex-end">
+                <Grid item>
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    onClick={handleOverlayState}
+                    size="small"
+                    data-testid="reportview-filter-close-button"
+                  >
+                    {t('Close')}
+                  </Button>
+                </Grid>
+
+                {isDownloadOffline && (
+                  <Grid item>
+                    <Button
+                      variant="contained"
+                      onClick={() => {
+                        search({ reset: true, isSearch: true, isDownloadOffline: true });
+                      }}
+                      size="small"
+                    >
+                      {t('Download')}
+                    </Button>
+                  </Grid>
+                )}
+                <Grid item>
+                  <Button variant="contained" type="submit" size="small" data-testid="reportview-filter-submit-button">
+                    {t('Search')}
+                  </Button>
+                </Grid>
+              </Grid>
+            </Grid>
+          </form>
+        </FormProvider>
+      )}
+    </Container>
+  );
+};
+
+InputViewComponent.propTypes = {
+  handleOverlayState: PropTypes.any, // Assuming this is a function
+  search: PropTypes.any, // Use PropTypes.any if the type of search is variable
+  details: PropTypes.any, // Use PropTypes.any if the type of details is variable
+  data: PropTypes.any, // Use PropTypes.any if the type of data is variable
+  setData: PropTypes.any, // Assuming this is a function and is required
+  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.any,
+  isDownloadOffline: PropTypes.any,
+  setIsLoading: PropTypes.any,
+  locations: PropTypes.any,
+  setLocations: PropTypes.any,
+  uiLocationId: PropTypes.any,
+  changedUsingUi: PropTypes.any,
+  setFetchUptoLevelLimit: PropTypes.any,
+  allDistrictReq: PropTypes.any,
+  setAllDistrictReq: PropTypes.any,
+  allBlockReq: PropTypes.any,
+  setAllBlockReq: PropTypes.any,
+  allPhcReq: PropTypes.any,
+  setAllPhcReq: PropTypes.any,
+  setUiLocations: PropTypes.any,
+  setUiSelectedLocation: PropTypes.any,
+  selectedLocation: PropTypes.any,
+  setSelectedLocation: PropTypes.any,
+  uiLocations: PropTypes.any,
+  uiSelectedLocation: PropTypes.any,
+  clearPreviousLocation: PropTypes.any,
+  resetFilter: PropTypes.any,
+  setResetFilter: PropTypes.any,
+  callLocationChange: PropTypes.any,
+  setCallLocationChange: PropTypes.any,
+  locationPartSelected: PropTypes.any,
+};
+
+export default InputViewComponent;

package/src/common/dynamicView/InputViewComponent.scss

@@ -0,0 +1,15 @@
+.error-help-text {
+  color: #5c0606;
+  position: absolute;
+  padding: 1%;
+  padding-left: 3%;
+  padding-right: 3%;
+  border-radius: 20px;
+  right: 3%;
+  top: 0%;
+  transform: translateY(70%);
+  white-space: nowrap;
+  background-color: rgb(236, 188, 188);
+  font-size: 0.6rem;
+  /* Customize this color to match your theme */
+}

package/src/common/env.js

@@ -0,0 +1,5 @@
+export const isdnhdd = (() => {
+  const isdnhdd = !!(import.meta?.env?.isdnhdd ?? false);
+
+  return isdnhdd;
+})();

package/src/common/filters/locationNameFilter.js

@@ -0,0 +1,26 @@
+export const locationNameFilter = (input) => {
+  input = input || '';
+  if (input === 'D') {
+    return 'District';
+  } else if (input === 'S') {
+    return 'State';
+  } else if (input === 'C') {
+    return 'Corporation';
+  } else if (input === 'B') {
+    return 'Block';
+  } else if (input === 'Z') {
+    return 'Zone';
+  } else if (input === 'U') {
+    return 'UPHC';
+  } else if (input === 'P') {
+    return 'PHC';
+  } else if (input === 'SC') {
+    return 'Sub center';
+  } else if (input === 'UA') {
+    return 'Urban area';
+  } else if (input === 'V') {
+    return 'Village';
+  } else {
+    return input;
+  }
+};

package/src/common/fontAwesomeIcons/FontAwesomeIcons.jsx

@@ -0,0 +1,27 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as FontIcons from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+
+const FontAwesomeIcons = (props) => {
+  // Destructure the `iconName` from props
+  const { iconName, ...otherProps } = props;
+
+  // Dynamically fetch the icon component based on the `iconName`
+  const Icon = FontIcons[iconName];
+
+  // If the icon does not exist, return null or handle the error gracefully
+  if (!Icon) {
+    console.error(`Icon "${iconName}" does not exist in @fortawesome.`);
+    return null;
+  }
+
+  // Render the icon with additional props
+  return <FontAwesomeIcon icon={Icon} {...otherProps} />;
+};
+
+FontAwesomeIcons.propTypes = {
+  props: PropTypes.any,
+  iconName: PropTypes.string,
+};
+
+export default FontAwesomeIcons;