@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/system-config/ManageSystemConfigs.jsx

@@ -0,0 +1,284 @@
+import { useSelector } from 'react-redux';
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import {
+  checkSystemConfigExists,
+  getSystemConfigsByKey,
+  postSystemConfig,
+  updateSystemConfig,
+} from '@/common/services/SystemConfig';
+import { showToast } from '@/common/toaster/toaster';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import FontAwesomeIcons from '@/common/fontAwesomeIcons/FontAwesomeIcons';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router';
+import useTrackEvent from '@/hooks/useTrackEvent';
+import * as Yup from 'yup';
+/**
+ * @module ManageSystemConfig
+ * @returns {JSX.Element}
+ */
+
+export default function ManageSystemConfig() {
+  const formRef = useRef(null);
+  const submitRef = useRef(false);
+  const trackEvent = useTrackEvent();
+  const { key } = useParams();
+  const navigate = useNavigate();
+  const validationSchema = Yup.object().shape({
+    key: Yup.string().required('Enter System Key'),
+    value: Yup.string().required('Enter Value'),
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const { translate } = useTranslateProvider();
+
+  const {
+    control,
+    setValue,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      key: '',
+      value: '',
+    },
+    resolver: yupResolver(validationSchema),
+    mode: 'onChange',
+  });
+
+  /**
+   * Handles closing the current view and navigating to the system configuration management page.
+   * @function handleClose
+   * @returns {void}
+   */
+
+  const handleClose = () => {
+    !key && reset();
+    navigate('/ui/medplat/manage/systemconfigs');
+  };
+
+  /**
+   * Handles form submission to check if a system configuration with the given key exists, and if not, submits a new system configuration.
+   * @async
+   * @function onSubmit
+   * @param {Object} values - The form values to be submitted.
+   * @param {string} values.key - The unique key for the system configuration.
+   * @param {string} values.otherField - Other fields in the form, as defined by the form schema.
+   * @returns {Promise<void>} - A promise that resolves when the submission is complete.
+   */
+
+  useEffect(() => {
+    let form = formRef.current;
+
+    return () => {
+      trackEvent('conversion_event', { form, form_name: 'Manage System Config', submit: submitRef.current }); //Use the current ref value
+    };
+  }, []);
+
+  const onSubmit = async (values) => {
+    try {
+      const { data: check } = await checkSystemConfigExists({
+        code: 'check_if_system_configuration_exists',
+        parameters: {
+          key: values.key,
+        },
+      });
+      if (check.result[0]?.count === 0 && !key) {
+        await postSystemConfig({
+          code: `system_config_add`,
+          parameters: {
+            ...values,
+          },
+        });
+        showToast({
+          message: `System Configiration Added successfully`,
+          type: 'success',
+        });
+
+        submitRef.current = true;
+        handleClose();
+      } else if (
+        (check.result[0]?.count === 1 && key === values.key) ||
+        (check.result[0]?.count === 0 && key !== values.key)
+      ) {
+        await updateSystemConfig({
+          code: 'system_config_update',
+          parameters: {
+            ...values,
+            oldKey: key,
+          },
+        });
+        showToast({
+          message: `System Configuration Updated  successfully`,
+          type: 'success',
+        });
+
+        submitRef.current = true;
+        handleClose();
+      } else if (check.result[0]?.count === 1 && key !== values.key) {
+        showToast({
+          message: 'Same key already Exists',
+          type: 'error',
+        });
+      }
+    } catch (error) {
+      showToast({
+        message: error?.message,
+        type: 'error',
+      });
+    }
+  };
+
+  /**
+   * Effect hook to fetch and populate system configuration data when the component is mounted.
+   * @async
+   * @function useEffect
+   * @returns {void}
+   */
+
+  useEffect(() => {
+    const getInitialData = async () => {
+      try {
+        setIsLoading((cur) => !cur);
+        if (key) {
+          const { data } = await getSystemConfigsByKey({
+            code: 'retrieve_system_configuration_by_key',
+            parameters: {
+              key,
+            },
+          });
+          if (!data.result.length) {
+            showToast({ type: 'error', message: 'error loading initial data' });
+            handleClose();
+          }
+          setValue('key', data.result[0]?.key);
+          setValue('value', data.result[0]?.value);
+          setValue('isActive', data.result[0]?.isActive);
+        }
+        setIsLoading((cur) => !cur);
+      } catch (error) {
+        console.error(error);
+        showToast({ type: 'error', message: 'error loading initial data' });
+        setIsLoading((cur) => !cur);
+      }
+    };
+    getInitialData();
+  }, [key, setValue]);
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} data-testid="managesystemconfigs-form" ref={formRef}>
+      <ManageSystemConfigSkeleton isLoading={isLoading}>
+        <Grid container className="flex flex-col border border-gray-300 mt-6 bg-white">
+          <Grid borderBottom={'1px solid #ccc'} bgcolor={'#eee'}>
+            <Typography variant="body2" className="p-2.5 font-bold font-sans text-customBlue text-lg tracking-[0.5px]">
+              {translate('System Config Details')}
+            </Typography>
+          </Grid>
+
+          <Grid container spacing={2} className="flex flex-col p-[15px]">
+            <Grid className="flex flex-row justify-between w-[50%]">
+              <Typography variant="body2">
+                {translate('System Key')}
+                <span className="text-red-500 ml-1">*</span>
+              </Typography>
+              <Box width={'70%'}>
+                <CustomTextField
+                  control={control}
+                  name="key"
+                  id="key"
+                  label="Enter System Key"
+                  errors={errors}
+                  dataTestId="managesystemconfigs-key-field"
+                />
+              </Box>
+            </Grid>
+            <Grid className="flex flex-row justify-between w-[50%]">
+              <Typography variant="body2">
+                {translate('Value')}
+                <span className="text-red-500 ml-1">*</span>
+              </Typography>
+              <Box width={'70%'}>
+                <CustomTextField
+                  control={control}
+                  id="value"
+                  name="value"
+                  label="Key Value"
+                  errors={errors}
+                  dataTestId="managesystemconfigs-value-field"
+                />
+              </Box>
+            </Grid>
+          </Grid>
+          <Grid borderTop={'1px solid #ccc'}>
+            <Stack direction="row" spacing={2} justifyContent="flex-end" mt={1.5} mb={1.5} mr={1.5}>
+              <Button
+                variant="contained"
+                color="primary"
+                size="small"
+                type="submit"
+                data-testid="managesystemconfigs-submit-btn"
+              >
+                <FontAwesomeIcons iconName="faPrint" />
+                <Typography variant="caption">{key ? `${translate('Update')}` : `${translate('Add')}`}</Typography>
+              </Button>
+              <Button
+                variant="contained"
+                color="secondary"
+                size="small"
+                onClick={handleClose}
+                data-testid="managesystemconfigs-close-btn"
+              >
+                {translate('Close')}
+              </Button>
+            </Stack>
+          </Grid>
+        </Grid>
+      </ManageSystemConfigSkeleton>
+    </form>
+  );
+}
+
+const ManageSystemConfigSkeleton = ({ children, isLoading }) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  if (!useSkeleton) {
+    return children;
+  }
+
+  if (!isLoading) {
+    return children;
+  }
+
+  return (
+    <div className="flex flex-col w-full bg-white  border border-gray-300 mr-8 my-4">
+      <div className="px-4 py-2 flex space-x-3 items-center justify-between ">
+        <div className="bg-gray-300 animate-pulse rounded-sm w-40 h-10"></div>
+      </div>
+      <hr></hr>
+      <div className="flex flex-col w-full space-y-4 p-4">
+        <div className="flex flex-row ">
+          <button className="bg-gray-300 animate-pulse rounded-sm w-40 h-10  mr-[100px]"></button>
+          <button className="bg-gray-300 animate-pulse rounded-sm w-[300px] h-10 "></button>
+        </div>
+        <div className="flex flex-row ">
+          <button className="bg-gray-300 animate-pulse rounded-sm w-40 h-10  mr-[100px]"></button>
+          <button className="bg-gray-300 animate-pulse rounded-sm w-[300px] h-10 "></button>
+        </div>
+      </div>
+      <hr></hr>
+      <div className="px-2 py-2 w-full flex space-x-3 items-center justify-end ">
+        <div className="bg-gray-300 animate-pulse rounded-sm w-20 h-10"></div>
+        <div className="bg-gray-300 animate-pulse rounded-sm w-20 h-10"></div>
+      </div>
+    </div>
+  );
+};
+
+ManageSystemConfigSkeleton.propTypes = {
+  children: PropTypes.any,
+  isLoading: PropTypes.any,
+};

package/src/views/feature-components/system-config/SystemConfig.jsx

@@ -0,0 +1,299 @@
+import { useSelector } from "react-redux";
+import { getUseSkeleton } from "@/store/reducers/SkeletonReducer";
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { getSystemConfigs, updateSystemConfig } from '@/common/services/SystemConfig';
+import { showToast } from '@/common/toaster/toaster';
+import { getAssignedFeatures } from '@/utils/feature';
+import CustomConfirmationModal from '@/views/custom-components/CustomConfirmationModal';
+import CustomizedTable from '@/views/custom-components/CustomizedTable/CustomizedTableV2';
+import { faBars, faPen } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Paper, TableContainer, TextField, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+/**
+ * @module SystemConfig
+ * @returns {JSX.Element}
+ */
+
+export default function SystemConfig() {
+  const [data, setData] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+  const [canAddRight, setCanAddRight] = useState('');
+  const [open, setOpen] = useState(false);
+  const [rowData, setRowData] = useState({});
+  const navigate = useNavigate();
+  const { translate } = useTranslateProvider();
+  const [isLoading, setIsLoading] = useState(false);
+  const updatedData = data?.map((config) => {
+    return {
+      ...config,
+      state: config?.state ? 'ACTIVE' : 'INACTIVE',
+    };
+  });
+
+  const filterData = updatedData?.filter(
+    (item) =>
+      item.key.toLowerCase().includes(debouncedQuery.toLowerCase()) ||
+      item.value.toLowerCase().includes(debouncedQuery.toLowerCase())
+  );
+  const defaultColumns = [
+    { field: 'key', label: 'Key', align: 'left', sortable: true, sortOrder: 'asc' },
+    { field: 'value', label: 'Value', align: 'left' },
+    { field: 'state', label: 'State' },
+    { field: 'Actions', label: 'Actions' },
+  ];
+
+  const [columns, setColumns] = useState(defaultColumns);
+
+  /**
+   * Handles the navigation to the edit page for a system configuration.
+   * @function handleEdit
+   * @param {Object} row - The row object containing details of the system configuration.
+   * @param {string} row.key - The key of the system configuration to edit.
+   */
+
+  const handleEdit = (row) => {
+    const url = `/ui/medplat/manage/systemconfigs/managesystemconfig/${row.key}`;
+    navigate(url);
+  };
+
+  /**
+   * Handles the status update of a system configuration.
+   * @async
+   * @function handleOpenStatusModal
+   * @param {Object} row - The row object containing details of the system configuration.
+   * @param {string} row.key - The key of the system configuration to update.
+   * @param {string} row.value - The value of the system configuration to update.
+   * @param {string} row.state - The current state of the system configuration ('ACTIVE' or 'INACTIVE').
+   * @throws {Error} Throws an error if the update or data retrieval fails.
+   */
+
+  const handleOpenStatusModal = async (row) => {
+    try {
+      setIsLoading((cur) => !cur);
+      const { key, value } = row;
+      await updateSystemConfig({
+        code: 'system_config_update',
+        parameters: {
+          key,
+          value,
+          isActive: row.state !== 'ACTIVE',
+          oldKey: key,
+        },
+      });
+      const { data } = await getSystemConfigs({
+        code: 'system_configs_retrieve_all',
+        parameters: {},
+      });
+      setData(data.result);
+      setOpen(false);
+      setIsLoading((cur) => !cur);
+    } catch (error) {
+      console.error(error);
+      showToast({ type: 'error', message: 'error toggling status' });
+      setIsLoading((cur) => !cur);
+    }
+  };
+
+  /**
+   * Handles sorting of data based on the current sort order.
+   * @async
+   * @function handleSort
+   * @returns {void}
+   */
+
+  const handleSort = async (column) => {
+    const newOrder = column.sortOrder === 'asc' ? 'desc' : 'asc';
+    const Data =
+      newOrder === 'asc'
+        ? data.toSorted((a, b) => a.key?.localeCompare(b.key))
+        : data.toSorted((a, b) => b.key?.localeCompare(a.key));
+    setData(Data);
+    setColumns((prev) =>
+      prev.map((col) => {
+        if (col.field === column.field) {
+          return { ...col, sortOrder: newOrder };
+        }
+        return col;
+      })
+    );
+  };
+
+  const actions = (row) => [
+    {
+      label: '',
+      icon: <FontAwesomeIcon icon={faPen} />,
+      onClick: handleEdit,
+      disabled: true,
+    },
+    {
+      label: '',
+      icon: <FontAwesomeIcon icon={faBars} />,
+      menuItems: [
+        {
+          label: translate(row.state === 'ACTIVE' ? 'Mark as Inactive' : 'Mark as Active'),
+          onClick: (row) => {
+            setOpen(true);
+            setRowData(row);
+          },
+        },
+      ],
+    },
+  ];
+
+  /**
+   * Effect hook to handle debouncing of the search query.
+   * @async
+   * @function useEffect
+   * @param {string} searchQuery - The current search query input by the user.
+   * @returns {void}
+   */
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedQuery(searchQuery);
+    }, 300);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchQuery]);
+
+  /**
+   * Effect hook to fetch and set system configurations and feature rights when the component is mounted.
+   * @async
+   * @function useEffect
+   * @returns {void}
+   */
+
+  const allConfigs = async () => {
+    try {
+      setIsLoading((cur) => !cur);
+      if (!canAddRight) {
+        const { data: rights } = await getAssignedFeatures('techo.manage.systemconfigs');
+        setCanAddRight(JSON.parse(rights).canAdd);
+      }
+      const { data } = await getSystemConfigs({
+        code: 'system_configs_retrieve_all',
+        parameters: {},
+      });
+
+      setData(data.result);
+      setIsLoading((cur) => !cur);
+    } catch {
+      showToast({
+        type: 'error',
+        message: 'Error Loading in System Configuration Data',
+      });
+      setIsLoading((cur) => !cur);
+    }
+  };
+  useEffect(() => {
+    allConfigs();
+  }, []);
+
+  return (
+    <Grid container className="w-[99%] my-4 flex flex-col" spacing={2}>
+      <SystemConfigSkeleton isLoading={isLoading}>
+        <Grid
+          container
+          className=" flex flex-col items-start justify-center md:flex-row md:justify-between md:items-center  w-full"
+          spacing={1}
+        >
+          <Grid>
+            <Typography
+              variant="body2"
+              className="font-bold font-sans text-lg text-customBlue uppercase"
+              data-testid="notification-list-typography-title"
+            >
+              {translate('System Configuration')}
+            </Typography>
+          </Grid>
+
+          <Grid className="flex space-x-3 flex-col md:flex-row ">
+            <TextField
+              name="searchQuery"
+              id="searchQuery"
+              placeholder="Search Text"
+              size="small"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              sx={{
+                backgroundColor: 'white',
+                '& .MuiInputBase-root': {
+                  height: '2.2em',
+                  width: '190px',
+                },
+              }}
+              data-testid="systemconfig-textfield-search-query"
+            />
+            {canAddRight && (
+              <Grid>
+                <Button
+                  size="small"
+                  variant="contained"
+                  onClick={() => navigate('/ui/medplat/manage/systemconfigs/managesystemconfig')}
+                  data-testid="systemconfig-button-add"
+                >
+                  {translate('Add')}
+                </Button>
+              </Grid>
+            )}
+          </Grid>
+        </Grid>
+      </SystemConfigSkeleton>
+      <Grid className="w-full">
+        <TableContainer component={Paper}>
+          <CustomizedTable
+            columns={columns}
+            tableData={filterData}
+            paginationConfig={{ pagination: false }}
+            actions={actions}
+            handleSort={handleSort}
+            dataTestId="systemconfig-customizedtable-main"
+            // customHeight="max-h-128"
+            isLoading={isLoading}
+          />
+        </TableContainer>
+      </Grid>
+      <CustomConfirmationModal
+        open={open}
+        description={'Are you sure you want to change the state of this System configuration ?'}
+        title={'CONFIRM ACTION'}
+        handleClick={() => handleOpenStatusModal(rowData)}
+        handleClose={() => setOpen(false)}
+        dataTestId="systemconfig-modal-confirmation"
+      />
+    </Grid>
+  );
+}
+
+export const SystemConfigSkeleton = ({ children, isLoading }) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  if (!useSkeleton) {
+    return children;
+  }
+  if (!isLoading) {
+    return children;
+  }
+
+  return (
+    <div className="flex w-full items-center justify-between space-x-2 my-4">
+      <div className="bg-gray-300 rounded-sm animate-pulse w-60 h-10"></div>
+      <div className="flex space-x-3">
+        <div className="bg-gray-300 rounded-sm animate-pulse w-40 h-10"></div>
+        <div className="bg-gray-300 rounded-sm animate-pulse w-20 h-10"></div>
+      </div>
+    </div>
+  );
+};
+
+SystemConfigSkeleton.propTypes = {
+  children: PropTypes.any,
+  isLoading: PropTypes.any,
+};