@argusoft/medplat-app-shell 1.0.6 → 1.0.8

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

@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { TextField, FormHelperText, FormControl } from '@mui/material';
+import PropTypes from 'prop-types';
+import { showToast } from '@/common/toaster/toaster';
+import { containsMaliciousPattern } from '@/common/MalaciaousInputUtil';
+
+const EditInputField = ({
+  name,
+  error,
+  style,
+  errorText,
+  initialValue = '',
+  handleUpdate,
+  isEditable = false,
+  index,
+  field,
+  textLimitations,
+  isTeleconsultation = false,
+  ...restProps
+}) => {
+  const [readOnly, setReadOnly] = useState(initialValue === null ? false : true);
+  const [background, setBackground] = useState('transparent');
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef < HTMLInputElement > null;
+
+  useEffect(() => {
+    if (initialValue === null) {
+      inputRef.current?.focus();
+    }
+    setBackground(readOnly ? '#004C700D' : '#e3e3e3');
+  }, [readOnly]);
+
+  const handleDoubleClick = () => {
+    isEditable && setReadOnly(false);
+    if (inputRef.current && isEditable) {
+      inputRef.current.focus();
+      inputRef.current.setSelectionRange(value?.length ?? 0, value?.length ?? 0);
+    }
+  };
+
+  const formatDuration = (input) => {
+    // Regular expression to match numeric part
+    const matchNumeric = input?.match(/\d+/);
+    const numericPart = matchNumeric ? parseInt(matchNumeric[0]) : null;
+
+    if (numericPart === null) {
+      return '';
+    }
+
+    // Regular expression to match string part
+    const matchString = input?.match(/([^0-9]+)\b/);
+    const stringPart = matchString ? matchString[0].trim() : '';
+
+    let durationUnit;
+    switch (stringPart.toLowerCase().charAt(0)) {
+      case 'm':
+        durationUnit = 'Month';
+        break;
+      case 'w':
+        durationUnit = 'Week';
+        break;
+      case 'y':
+        durationUnit = 'Year';
+        break;
+      default:
+        durationUnit = 'Day';
+        break;
+    }
+
+    return `${numericPart} ${durationUnit}${numericPart > 1 ? 's' : ''}`;
+  };
+
+  const handleChange = (event) => {
+    const inputValue = event.target.value;
+
+  if (containsMaliciousPattern(inputValue)) {
+    showToast({ message: 'HTML or script content is not allowed', type: 'warn' });
+    return;
+  }
+    setValue(event.target.value);
+  };
+
+  const handleKeyPress = async (event) => {
+    if (event.key === 'Enter') {
+      if (field === 'duration' || field === 'since') {
+        const formattedDuration = formatDuration(event.target.value);
+        setValue(formattedDuration);
+        await handleUpdate(index, field, formattedDuration);
+      } else {
+        await handleUpdate(index, field, event.target.value);
+      }
+      setReadOnly(true);
+    }
+  };
+
+  return (
+    <div className="w-full" style={{ cursor: isEditable ? 'pointer' : 'default' }} onDoubleClick={handleDoubleClick}>
+      <FormControl sx={{ width: '100%' }}>
+        <TextField
+          variant="outlined"
+          sx={{
+            // Root class for the input field
+            '& .MuiOutlinedInput-root': {
+              backgroundColor: readOnly ? 'transparent' : isTeleconsultation ? 'rgba(0, 0, 0, 0.6)' : '#e3e3e3',
+              borderRadius: '0px',
+            },
+            '& .MuiOutlinedInput-input': {
+              paddingTop: readOnly ? '0px !important' : '5px !important',
+              paddingBottom: readOnly ? '0px !important' : '5px !important',
+              paddingRight: '0px !important',
+              paddingLeft: readOnly ? '0px !important' : '10px !important',
+              fontFamily: 'IBM Plex Mono',
+              fontSize: { md: '14px', lg: '14px', xl: '14px' },
+              lineHeight: '18px',
+              color: isTeleconsultation ? (readOnly ? '#ffffff' : '#ffffff') : '#485772',
+              fontWeight: '500',
+              borderRadius: '0px',
+              backgroundColor: 'transparent',
+              cursor: isEditable ? (readOnly ? 'pointer' : undefined) : 'default',
+            },
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: 'none ',
+            },
+
+            // Class for the label of the input field
+          }}
+          error={error}
+          style={{ ...style }}
+          inputRef={inputRef}
+          value={value}
+          onKeyDown={async (e) => {
+            await handleKeyPress(e);
+          }}
+          onBlur={async (event) => {
+            setReadOnly(true);
+            await handleUpdate(index, field, event.target.value);
+          }}
+          inputProps={{
+            maxLength: textLimitations?.maxLength,
+            readOnly: readOnly,
+            backgroundcolor: background,
+          }}
+          size="small"
+          multiline={textLimitations?.multiline}
+          maxRows={textLimitations?.maxRows}
+          onChange={handleChange}
+          {...restProps}
+        />
+        {error && (
+          <FormHelperText error id={`standard-weight-helper-text-${name}`}>
+            {errorText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    </div>
+  );
+};
+
+export default EditInputField;
+
+
+EditInputField.propTypes = {
+  name: PropTypes.any,
+  error: PropTypes.any,
+  style: PropTypes.any,
+  errorText: PropTypes.any,
+  initialValue: PropTypes.any,
+  handleUpdate: PropTypes.any,
+  isEditable: PropTypes.any,
+  index: PropTypes.any,
+  field: PropTypes.any,
+  textLimitations: PropTypes.any,
+  isTeleconsultation: PropTypes.any,
+};

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

@@ -0,0 +1,22 @@
+import React from "react";
+import FontAwesomeIcons from "@/common/fontAwesomeIcons/FontAwesomeIcons";
+import { Box, Tooltip } from "@mui/material";
+import PropTypes from "prop-types";
+
+const FieldDescription = ({ title, size = "md", sx }) => {
+  return (
+    <Tooltip title={title} arrow>
+      <Box component={"span"} sx={{ color: "info.main", ...sx }}>
+        <FontAwesomeIcons iconName="faCircleQuestion" size={size} />
+      </Box>
+    </Tooltip>
+  );
+};
+
+FieldDescription.propTypes = {
+  title: PropTypes.node.isRequired,
+  size: PropTypes.string,
+  sx: PropTypes.object,
+};
+
+export default FieldDescription;

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

@@ -0,0 +1,138 @@
+import { Divider, Typography } from '@mui/material';
+import { useQuery } from '@tanstack/react-query';
+import PropTypes from 'prop-types';
+import downloadFile from '@/common/services/DownloadFile';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { FormConfiguratorService } from '@/common/services/FormConfiguratorService';
+import { useMemo, useEffect, useRef } from 'react';
+import { showToast } from '@/common/toaster/toaster';
+
+const FileDisplayComponent = ({ versionReferenceUUID, mediaUUID, documentUuid, multimediaType, onError, style }) => {
+  const { translate } = useTranslateProvider();
+  const errorToastShownRef = useRef(false);
+
+  const fileIdentifier = documentUuid || `${versionReferenceUUID}-${mediaUUID}`;
+
+  useEffect(() => {
+    errorToastShownRef.current = false;
+  }, [fileIdentifier]);
+
+  const isEnabled = Boolean(documentUuid || (versionReferenceUUID && mediaUUID));
+
+  useEffect(() => {
+    if (!isEnabled) {
+      errorToastShownRef.current = true;
+      showToast({
+        type: 'error',
+        message: 'File does not exist or has been removed.',
+      });
+      onError?.();
+    }
+  }, []);
+
+  const { data, status } = useQuery({
+    queryKey: ['fileInfo', documentUuid, versionReferenceUUID, mediaUUID],
+    queryFn: () => {
+      if (documentUuid) {
+        return FormConfiguratorService.getFileByUUID(documentUuid).then((res) => res.data);
+      }
+      return downloadFile(versionReferenceUUID, mediaUUID);
+    },
+    enabled: isEnabled,
+    cacheTime: 1000 * 60 * 30,
+    staleTime: 1000 * 60 * 10,
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (status === 'error' && !errorToastShownRef.current) {
+      errorToastShownRef.current = true;
+      showToast({
+        type: 'error',
+        message: 'File does not exist or has been removed.',
+      });
+      onError?.();
+    }
+  }, [status]);
+
+  const styling = {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    objectFit: 'contain',
+  };
+
+  const file = (fileType, dataUrl, image) => {
+    const mime = fileType?.mime?.toLowerCase() || '';
+    if (mime.startsWith('video')) {
+      return (
+        <video width="320" height="240" controls>
+          <source src={dataUrl} type="video/mp4" />
+        </video>
+      );
+    } else if (mime.startsWith('audio')) {
+      return <audio src={dataUrl} controls autoPlay />;
+    } else if (mime.startsWith('image')) {
+      return <img src={dataUrl} alt="Not Found" style={styling}></img>;
+    } else if (mime === 'application/xml') {
+      return <img src={'data:image/svg+xml;base64,' + image.split(',')[1]} alt="Not Found" style={style}></img>;
+    } else {
+      return (
+        <>
+          <Divider />
+          <Typography color="error" align="center">
+            {translate('Can not be viewed. Not image, audio, or video')}
+          </Typography>
+        </>
+      );
+    }
+  };
+
+  const resolvedData = useMemo(() => {
+    if (!data) return null;
+    if (data.dataUrl) {
+      return data;
+    }
+    if (data instanceof Blob) {
+      const dataUrl = URL.createObjectURL(data);
+      let mimeType = data.type;
+      if ((!mimeType || mimeType === 'application/octet-stream') && multimediaType) {
+        const typeMap = {
+          VIDEO: 'video/mp4',
+          IMAGE: 'image/jpeg',
+          AUDIO: 'audio/mpeg',
+        };
+        mimeType = typeMap[multimediaType.toUpperCase()] || mimeType;
+      }
+      return {
+        dataUrl,
+        fileType: { mime: mimeType },
+      };
+    }
+    return null;
+  }, [data, multimediaType]);
+
+  return (
+    <>
+      {status === 'pending' ? (
+        <Typography align="center">{translate('Loading')}...</Typography>
+      ) : resolvedData ? (
+        file(resolvedData.fileType, resolvedData.dataUrl, resolvedData.image)
+      ) : (
+        <Typography color="error" align="center">
+          {translate('Error while loading')}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+FileDisplayComponent.propTypes = {
+  mediaUUID: PropTypes.any,
+  versionReferenceUUID: PropTypes.any,
+  documentUuid: PropTypes.string,
+  multimediaType: PropTypes.string,
+  onError: PropTypes.func,
+  style: PropTypes.object,
+};
+
+export default FileDisplayComponent;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip, Typography } from '@mui/material';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import Grid from '@mui/material/Grid2';
+
+export const FormItem = ({
+  label,
+  additionalLabel = '',
+  children,
+  required = false,
+  direction = 'column',
+  tooltip,
+  labelWidth = '25%',
+  childrenWidth = '75%',
+}) => {
+  const { translate } = useTranslateProvider();
+
+  return (
+    <Grid className={`flex w-full  ${direction === 'column' ? 'flex-col' : 'flex-col md:flex-row gap-4'}`}>
+      <Grid
+        className="flex items-start"
+        sx={{
+          width: direction === 'column' ? '100%' : { xs: '100%', md: labelWidth },
+        }}
+      >
+        <Tooltip title={translate(tooltip)} arrow placement="top">
+          <Typography variant="overline" component="div" sx={{ width: '100%', lineHeight: 1.3 }}>
+            <div className="flex items-start gap-1 flex-wrap break-words">
+              <span>
+                {translate(label)} {required && <span className="text-red-500">*</span>}
+              </span>
+              {additionalLabel}
+            </div>
+          </Typography>
+        </Tooltip>
+      </Grid>
+
+      <Grid sx={{ width: direction === 'column' ? '100%' : { xs: '100%', md: childrenWidth } }}>{children}</Grid>
+    </Grid>
+  );
+};
+
+FormItem.propTypes = {
+  label: PropTypes.any,
+  children: PropTypes.any,
+  required: PropTypes.any,
+  direction: PropTypes.any,
+  tooltip: PropTypes.any,
+  labelWidth: PropTypes.any,
+  childrenWidth: PropTypes.any,
+  additionalLabel: PropTypes.any,
+};

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

@@ -0,0 +1,80 @@
+import {
+  BarChart,
+  LineChart,
+  Bar,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import MuiToolTip from '@mui/material/Tooltip';
+import PropTypes from 'prop-types';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+const GenericChart = ({
+  chartType,
+  data,
+  xAxis = {},
+  yAxis = {},
+  series = [],
+  onChartClick,
+  title,
+  tooltip,
+  margin = { top: 20, right: 30, left: 10, bottom: 5 },
+  dataTestId,
+}) => {
+  const ChartComponent = chartType === 'bar' ? BarChart : LineChart;
+  const { translate } = useTranslateProvider();
+  return (
+    <Grid className="flex flex-col justify-center items-center space-y-2 py-2 w-full">
+      {tooltip ? (
+        <MuiToolTip title={tooltip} arrow placement="auto">
+          <Typography className="font-bold text-gray-600" data-testid={`${dataTestId}-title`}>
+            {translate(title)}
+          </Typography>
+        </MuiToolTip>
+      ) : (
+        <Typography className="font-bold text-gray-600" data-testid={`${dataTestId}-title`}>
+          {translate(title)}
+        </Typography>
+      )}
+
+      <Grid className="w-full overflow-x-auto">
+        <Grid className="min-w-[700px]">
+          <ResponsiveContainer width="100%" height={350} data-testid={`${dataTestId}-chart`}>
+            <ChartComponent data={data} onClick={onChartClick} margin={margin}>
+              <CartesianGrid strokeDasharray="3 3" />
+              <XAxis {...xAxis} />
+              <YAxis {...yAxis} />
+              <Tooltip />
+              <Legend layout="horizontal" verticalAlign="top" align="center" wrapperStyle={{ paddingBottom: 20 }} />
+              {series.map((s, index) =>
+                chartType === 'bar' ? <Bar key={index} {...s} /> : <Line key={index} {...s} />
+              )}
+            </ChartComponent>
+          </ResponsiveContainer>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+GenericChart.propTypes = {
+  chartType: PropTypes.oneOf(['bar', 'line']).isRequired,
+  data: PropTypes.array.isRequired,
+  xAxis: PropTypes.object,
+  yAxis: PropTypes.object,
+  series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onChartClick: PropTypes.func,
+  title: PropTypes.string.isRequired,
+  tooltip: PropTypes.string,
+  margin: PropTypes.object,
+  dataTestId: PropTypes.string,
+};
+
+export default GenericChart;

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

@@ -0,0 +1,60 @@
+import { Avatar, Stack, Tooltip, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const InfoBadge = ({
+  label,
+  value,
+  color = 'primary.main',
+  tooltipValue = '',
+  showTooltip = false,
+  valueSize = 30,
+  fontSize = '1rem',
+}) => (
+  <Stack direction="row" spacing={1} alignItems="center">
+    <Typography variant="button" fontWeight={'bold'}>
+      {label}
+    </Typography>
+    {showTooltip ? (
+      <Tooltip title={tooltipValue} arrow>
+        <Avatar
+          sx={{
+            width: valueSize,
+            height: valueSize,
+            borderRadius: '0.5rem',
+            bgcolor: color,
+            fontSize: fontSize,
+            fontWeight: 'bold',
+          }}
+        >
+          {value}
+        </Avatar>
+      </Tooltip>
+    ) : (
+      <Avatar
+        sx={{
+          width: 30,
+          height: 30,
+          borderRadius: 2,
+          bgcolor: color,
+          fontSize: '1rem',
+          fontWeight: 'bold',
+        }}
+      >
+        {value}
+      </Avatar>
+    )}
+  </Stack>
+);
+
+InfoBadge.propTypes = {
+  label: PropTypes.any,
+  value: PropTypes.any,
+  color: PropTypes.any,
+  tooltipValue: PropTypes.any,
+  showTooltip: PropTypes.any,
+  valueSize: PropTypes.any,
+  fontSize: PropTypes.any,
+};
+
+export default InfoBadge;