@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/custom-components/CustomDropdown.jsx

@@ -0,0 +1,191 @@
+import React, { useMemo } from 'react';
+import { FormControl, TextField, Typography, Box } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Controller, get } from 'react-hook-form';
+import Autocomplete from '@mui/material/Autocomplete';
+
+export default function CustomDropdown({
+  control,
+  name,
+  options,
+  onChange,
+  rules = {},
+  size = 'small',
+  displayName,
+  optionValue,
+  optionKey,
+  errors,
+  multiple = false,
+  isNullSelectDisabled = true,
+  dataTestId,
+  id,
+  dropdownZindex,
+  defaultValue,
+  getOptionDisabled,
+  disableClearable = false,
+  disabled,
+  isSortedOptions = false,
+  disablePortal = false,
+  sx,
+  errorMessage,
+  ...props
+}) {
+  const error = get(errors, name);
+
+  const placeholderOption = { [optionValue || 'value']: '', [displayName || 'label']: props.placeholder || 'Select' };
+
+  const sortedOptions = useMemo(() => {
+    let opts = options || [];
+    if (isSortedOptions && opts.length) {
+      opts = [...opts].sort((a, b) => {
+        const aValue = typeof a === 'object' ? a[displayName] : a;
+        const bValue = typeof b === 'object' ? b[displayName] : b;
+        if (typeof aValue === 'string' && typeof bValue === 'string') {
+          return aValue.localeCompare(bValue);
+        }
+        return aValue > bValue ? 1 : -1;
+      });
+    }
+    if (!isNullSelectDisabled && !multiple) {
+      return [placeholderOption, ...opts];
+    }
+    return opts;
+  }, [options, isSortedOptions, isNullSelectDisabled, multiple]);
+
+  return (
+    <FormControl fullWidth error={!!error}>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        defaultValue={defaultValue}
+        render={({ field }) => (
+          <Autocomplete
+            disablePortal={disablePortal}
+            disabled={disabled}
+            {...field}
+            multiple={multiple}
+            options={sortedOptions}
+            disableClearable={disableClearable && (isNullSelectDisabled || multiple)}
+            getOptionLabel={(option) =>
+              option && typeof option === 'object' ? String(option?.[displayName] || '') : String(option || '')
+            }
+            isOptionEqualToValue={(option, value) =>
+              optionValue ? option?.[optionValue] === value?.[optionValue] : option === value
+            }
+            data-testid={dataTestId}
+            id={id}
+            value={
+              multiple
+                ? sortedOptions.filter((opt) =>
+                    field.value?.some?.((val) => (optionValue ? val === opt[optionValue] : val === opt))
+                  )
+                : sortedOptions.find((opt) => (optionValue ? opt[optionValue] === field.value : opt === field.value)) ||
+                  null
+            }
+            onChange={(event, value) => {
+              const isPlaceholder =
+                !multiple && optionValue ? value?.[optionValue] === '' : value === placeholderOption;
+
+              const target = {
+                name,
+                value: multiple
+                  ? (Array.isArray(value) ? value : []).map((v) => (optionValue ? v?.[optionValue] : v)).filter(Boolean)
+                  : isPlaceholder
+                    ? ''
+                    : optionValue
+                      ? value?.[optionValue] || ''
+                      : value || '',
+              };
+
+              onChange?.({ ...event, target });
+              field.onChange(target.value);
+            }}
+            getOptionDisabled={getOptionDisabled}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                size={size}
+                error={!!error}
+                placeholder={isNullSelectDisabled ? 'Select an option' : ''}
+                sx={{
+                  backgroundColor: '#F8FAFC',
+                  borderColor: error ? 'red' : 'rgba(0, 0, 0, 0.23)',
+                  ...sx,
+                }}
+                // onChange={(e) => {
+                //   const value = e.target.value === '' ? '' : e.target.value;
+                //   field.onChange(value);
+                // }}
+                {...props}
+              />
+            )}
+            slotProps={{
+              paper: {
+                sx: {
+                  borderRadius: '1rem',
+                  boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.1)',
+                  border: '1px solid #E0E0E0',
+                  my: 1,
+                },
+              },
+              popper: {
+                sx: {
+                  ...(dropdownZindex && { zIndex: dropdownZindex }),
+                },
+              },
+            }}
+            renderOption={(props, option, { index }) => (
+              <Box
+                {...props}
+                key={optionKey ? option[optionKey] : optionValue ? option[optionValue] : `option-${index}`}
+                sx={{
+                  borderRadius: '16px',
+                  mx: 1,
+                  my: 0.5,
+                  px: 2,
+                  py: 1,
+                }}
+                data-testid={`${dataTestId}-option-${optionValue ? option[optionValue] : `option-${index}`}`}
+              >
+                <Typography variant="body2">{displayName ? option[displayName] : option}</Typography>
+              </Box>
+            )}
+          />
+        )}
+      />
+      {error && (
+        <p data-testid="custom-error-message" className="error-helper-text">
+          {errorMessage || error?.message}
+        </p>
+      )}
+    </FormControl>
+  );
+}
+
+CustomDropdown.propTypes = {
+  control: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func,
+  size: PropTypes.string,
+  displayName: PropTypes.string,
+  optionValue: PropTypes.string,
+  optionKey: PropTypes.string,
+  errors: PropTypes.object,
+  multiple: PropTypes.bool,
+  isNullSelectDisabled: PropTypes.bool,
+  dataTestId: PropTypes.string,
+  defaultValue: PropTypes.any,
+  id: PropTypes.any,
+  rules: PropTypes.any,
+  sx: PropTypes.object,
+  getOptionDisabled: PropTypes.any,
+  disableClearable: PropTypes.any,
+  disabled: PropTypes.bool,
+  isSortedOptions: PropTypes.bool,
+  disablePortal: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  placeholder: PropTypes.string,
+  dropdownZindex: PropTypes.number,
+};

package/src/views/custom-components/CustomFileUpload.jsx

@@ -0,0 +1,387 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Button,
+  Chip,
+  FormControl,
+  IconButton,
+  LinearProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { Box } from '@mui/system';
+import { showToast } from '@/common/toaster/toaster';
+import { api } from '@/common/interceptors/AxiosInterceptor';
+import { get } from 'react-hook-form';
+import FileDisplayComponent from '@/views/custom-components/FileDisplayComponent';
+import PropTypes from 'prop-types';
+import FontAwesomeIcons from '@/common/fontAwesomeIcons/FontAwesomeIcons';
+
+const wrapperSx = {
+  display: 'flex',
+  alignItems: 'center',
+  backgroundColor: 'white',
+  padding: '1rem',
+  margin: '1rem 0',
+  borderRadius: '10px',
+};
+
+const CustomFileUpload = ({
+  formControl,
+  name,
+  editing,
+  accept = '*',
+  uploadButtonName = 'UPLOAD',
+  maxNoOfFiles = 1,
+  _moduleName = 'TECHO',
+  isTemporary = true,
+  errors,
+}) => {
+  const error = get(errors, name);
+  const [uploadFiles, setUploadFiles] = useState([]);
+  const fileInputRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [uploadRate, setUploadRate] = useState(0);
+  const [eta, setEta] = useState('');
+  const [fileNameToFileIdMap, setFileNameToFileIdMap] = useState({});
+  const [referenceId, setReferenceId] = useState(-1);
+  const [openDisplayComp, setOpenDisplayComp] = useState(false);
+
+  useEffect(() => {
+    if (formControl.formState.isSubmitted || formControl.getFieldState(name).isTouched) {
+      formControl.trigger(name, { shouldFocus: true });
+    }
+  }, [JSON.stringify(uploadFiles)]);
+
+  useEffect(() => {
+    let id = formControl.getValues(name);
+    if (id && editing) {
+      fetchFileDetails(id);
+    }
+  }, [editing]);
+
+  const fetchFileDetails = async (id) => {
+    api
+      .get(`/document/fetchFileDetails/${id}`)
+      .then((res) => {
+        if (res) {
+          let data = res.data;
+          const newFile = {
+            id: id,
+            actualFileName: data.fileName,
+            fileType: data.fileType,
+            size: data.fileSize,
+            image: '',
+            progress: 0,
+            isLoading: true,
+            documentId: data.id,
+          };
+          setReferenceId(data.mediaReferenceId);
+          setOpenDisplayComp(true);
+          setUploadFiles((prevFiles) => [...prevFiles, newFile]);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  const handleFileChange = async (event) => {
+    if (uploadFiles.length + 1 > maxNoOfFiles) {
+      showToast({ message: 'Max no of files reached', type: 'error' });
+      return;
+    }
+    try {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      if (fileInputRef.current) fileInputRef.current.value = '';
+
+      if (uploadFiles.some((item) => item.actualFileName === file.name && item.size === file.size)) {
+        showToast({ message: 'File already uploaded!', type: 'info' });
+        return;
+      }
+
+      setIsLoading(true);
+      const startTime = Date.now();
+      let dataToUpload = {
+        fieldKey: name,
+        referenceIdKey: referenceId,
+        filesToUpload: [file],
+      };
+
+      api
+        .post(
+          `/document/uploaddocumentV2?isTemporary=${isTemporary}`,
+          { ...dataToUpload },
+          {
+            type: 'fileUpload',
+            showLoader: false,
+            onUploadProgress: (progressEvent) => {
+              const { loaded, total } = progressEvent;
+              const currentTime = Date.now();
+
+              const percentage = Math.round((loaded * 100) / total);
+              setUploadProgress(percentage);
+
+              const elapsedSeconds = (currentTime - startTime) / 1000;
+              const rate = loaded / 1024 / elapsedSeconds;
+              setUploadRate(rate.toFixed(2));
+
+              const remainingBytes = total - loaded;
+              const estimatedTime = remainingBytes / (rate * 1024);
+              const etaMinutes = Math.floor(estimatedTime / 60);
+              const etaSeconds = Math.floor(estimatedTime % 60);
+              setEta(`${etaMinutes}m ${etaSeconds}s`);
+            },
+          }
+        )
+        .then((res) => {
+          setFileNameToFileIdMap({ ...fileNameToFileIdMap, ...{ [file.name]: res.data.docIds[0] } });
+          setReferenceId(res.data.referenceId || -1);
+
+          formControl.setValue(
+            name,
+            formControl.getValues(name)
+              ? (() =>
+                maxNoOfFiles > 1
+                  ? [formControl.getValues(name), ...res.data.docIds]
+                  : [formControl.getValues(name), res.data.docIds])()
+              : res.data.docIds,
+            {
+              shouldTouch: true,
+            }
+          );
+
+          setIsLoading(false);
+
+          const newFile = {
+            actualFileName: file.name,
+            fileType: file.type,
+            size: file.size,
+            image: file.type.startsWith('image') ? URL.createObjectURL(file) : null,
+            progress: 0,
+            isLoading: true,
+            documentId: res.data.docIds[0],
+          };
+          setOpenDisplayComp(false);
+          setUploadFiles((prevFiles) => [...prevFiles, newFile]);
+        })
+        .catch(() => {
+          showToast({
+            message: 'File not uploaded!',
+            type: 'error',
+          });
+          setIsLoading(false);
+        });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleFileRemove = (file) => {
+    if (Object.prototype.hasOwnProperty.call(fileNameToFileIdMap, file.actualFileName)) {
+      setFileNameToFileIdMap((prevState) => {
+        delete prevState[file.actualFileName];
+        formControl.setValue(name, Object.values(prevState), {
+          shouldTouch: true,
+        });
+        return prevState;
+      });
+    }
+    formControl.setValue(name, null);
+    setUploadFiles((prevFiles) => prevFiles.filter((f) => f.actualFileName !== file.actualFileName));
+  };
+
+  const getIcon = (fileType) => {
+    if (fileType === 'video/mp4') {
+      return <FontAwesomeIcons iconName="faFileVideo" />;
+    } else {
+      return <FontAwesomeIcons iconName="faFileArrowUp" />;
+    }
+  };
+
+  return (
+    <Box sx={wrapperSx} boxShadow={5}>
+      <FormControl fullWidth error={!!error}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Box>
+            <Button
+              component="label"
+              variant="contained"
+              size="small"
+              startIcon={<FontAwesomeIcons iconName="faPlusSquare" />}
+              disabled={isLoading}
+            >
+              {uploadButtonName}
+              <input
+                type="file"
+                hidden
+                onChange={handleFileChange}
+                required={true}
+                accept={accept}
+                ref={fileInputRef}
+              />
+            </Button>
+          </Box>
+          <Box>
+            <Tooltip title="Maximum no of files" arrow sx={{ mr: 1 }}>
+              <Chip label={`${uploadFiles?.length} / ${maxNoOfFiles}`} variant="filled" color="primary" />
+            </Tooltip>
+          </Box>
+        </Box>
+        {isLoading && (
+          <Box sx={{ width: '100%', mt: 1 }}>
+            <Typography variant="body1">File Upload Progress</Typography>
+            <LinearProgress variant="determinate" value={uploadProgress} />
+            <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
+              <Typography variant="body2">Progress: {uploadProgress}%</Typography>
+              <Typography variant="body2">Rate: {uploadRate} KB/s</Typography>
+              <Typography variant="body2">ETA: {eta}</Typography>
+            </Box>
+          </Box>
+        )}
+
+        <Box sx={{ mt: 1 }}>
+          {uploadFiles?.length > 0 ? (
+            <TableContainer component={Paper}>
+              <Table size="small">
+                <TableHead
+                  sx={{
+                    backgroundColor: 'background.default',
+                  }}
+                >
+                  <TableRow>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        fontSize: '1rem',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      #
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        fontSize: '1rem',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      View
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        fontSize: '1rem',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      Name
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        fontSize: '1rem',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      Type
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        fontSize: '1rem',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      Size
+                    </TableCell>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        fontSize: '1rem',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      Action
+                    </TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {uploadFiles?.map((file, index) => (
+                    <TableRow key={file?.documentId}>
+                      <TableCell align="center">{index + 1}</TableCell>
+                      <TableCell
+                        align="center"
+                        sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+                      >
+                        {file.fileType.startsWith('image') ? (
+                          (() =>
+                            openDisplayComp ? (
+                              <div style={{ maxHeight: '100px', alignSelf: 'center' }}>
+                                <FileDisplayComponent id={file.id} style={{ height: '50px', width: '50px' }} />
+                              </div>
+                            ) : (
+                              <img
+                                src={file?.image}
+                                alt={file?.actualFileName || 'Uploaded file'}
+                                style={{ maxHeight: '100px', alignSelf: 'center' }}
+                              />
+                            ))()
+                        ) : (
+                          <>{getIcon(file.fileType)}</>
+                        )}
+                      </TableCell>
+                      <TableCell align="center">{file.actualFileName}</TableCell>
+                      <TableCell align="center">{file.fileType}</TableCell>
+                      <TableCell align="center">{(file.size / 1024).toFixed(2)}KB</TableCell>
+                      <TableCell align="center">
+                        <IconButton
+                          color="error"
+                          onClick={() => {
+                            handleFileRemove(file);
+                          }}
+                        >
+                          <FontAwesomeIcons iconName="faWindowClose" />
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <Alert severity="info" variant="outlined">
+              No Files Added!
+            </Alert>
+          )}
+        </Box>
+        {error && <p className="error-helper-text">{error?.message}</p>}
+      </FormControl>
+    </Box>
+  );
+};
+
+CustomFileUpload.propTypes = {
+  formControl: PropTypes.any,
+  name: PropTypes.any,
+  editing: PropTypes.any,
+  accept: PropTypes.any,
+  uploadButtonName: PropTypes.any,
+  maxNoOfFiles: PropTypes.any,
+  _moduleName: PropTypes.any,
+  isTemporary: PropTypes.any,
+  errors: PropTypes.any,
+};
+
+export default CustomFileUpload;