@argusoft/medplat-app-shell 1.0.5 → 1.0.7

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

@@ -0,0 +1,249 @@
+import React, { useState, useEffect, useRef } from "react";
+import { FormControl, Autocomplete, TextField, FormHelperText } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+// Styled span for read-only display
+const StyledSpan = styled("span")(() => ({
+  backgroundColor: "transparent",
+  borderRadius: "0px",
+  padding: "0px",
+  paddingTop: "5px !important",
+  paddingBottom: "5px !important",
+  fontFamily: '"IBM Plex Mono"',
+  lineHeight: "18px",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "14px",
+  "@media (max-width: 1536px)": {
+    fontSize: "13px",
+  },
+  "@media (max-width: 1200px)": {
+    fontSize: "12px",
+  },
+}));
+
+
+
+const ResizableEditAutocompleteField = ({
+  name,
+  menuItems,
+  error,
+  style,
+  // size = "big",
+  isEditable,
+  errorText,
+  initialValue,
+  index,
+  field,
+  showBrackets = false,
+  handleUpdate,
+  isTeleconsultation = false,
+  placeholder,
+  enteredInputTexts,
+  setEnteredInputText,
+  ...restProps
+}) => {
+  const [readOnly, setReadOnly] = useState(true);
+  const [background, setBackground] = useState("transparent");
+  const [value, setValue] = useState({
+    value: initialValue,
+    menuLabel: initialValue,
+  });
+  const [inputText, setInputText] = useState(value?.menuLabel || "");
+
+  const inputRef = useRef(null);
+  const spanRef = useRef(null);
+
+  useEffect(() => {
+    setBackground(readOnly ? "transparent" : "#e3e3e3");
+  }, [readOnly]);
+
+  useEffect(() => {
+    if (spanRef.current && value?.menuLabel) {
+      spanRef.current.style.width = `${value.menuLabel.length + 2}ch`;
+    }
+  }, [value, readOnly]);
+
+  const handleDoubleClick = () => {
+    isEditable && setReadOnly(false);
+  };
+
+  useEffect(() => {
+    if (!readOnly && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [readOnly]);
+
+  const handleChange = async (
+    event,
+    selectedItem
+  ) => {
+    let finalValue;
+
+    // Handle custom input
+    if (typeof selectedItem === "string") {
+      finalValue = { value: selectedItem, menuLabel: selectedItem };
+    } else if (selectedItem && typeof selectedItem === "object") {
+      finalValue = {
+        value: selectedItem.value ?? "",
+        menuLabel: selectedItem.menuLabel ?? "",
+      };
+    } else {
+      finalValue = { value: "", menuLabel: "" };
+    }
+
+    setValue(finalValue);
+    if (setEnteredInputText) {
+      const updated = [...(enteredInputTexts || [])];
+      updated[index] = finalValue.menuLabel;
+      setEnteredInputText(updated);
+    }
+    setInputText(finalValue.menuLabel);
+    await handleUpdate(index, field, finalValue.value);
+    setReadOnly(true);
+  };
+
+  const displayText = value?.menuLabel || "";
+
+  return readOnly ? (
+    <StyledSpan
+      onDoubleClick={handleDoubleClick}
+      ref={spanRef}
+      style={{
+        marginLeft: "4px",
+        cursor: isEditable ? "pointer" : "default",
+        color: isTeleconsultation ? "#ffffff" : "#485772",
+      }}
+    >
+      {displayText === "" && isEditable ? (
+        <i
+          className="ri-add-line"
+          style={{ color: isTeleconsultation ? "#1aff1a" : "green" }}
+          onClick={handleDoubleClick}
+        >
+          {placeholder}
+        </i>
+      ) : showBrackets && displayText !== "" ? (
+        `(${displayText})`
+      ) : (
+        `${displayText}`
+      )}
+    </StyledSpan>
+  ) : (
+    <div>
+      <FormControl error={error} sx={style}>
+        <Autocomplete
+          fullWidth
+          disableClearable
+          options={menuItems}
+          getOptionLabel={(option) =>
+            typeof option === "string" ? option : option?.menuLabel || ""
+          }
+          isOptionEqualToValue={(option, val) => option.value === val.value}
+          value={value}
+          freeSolo
+          inputValue={inputText}
+          onInputChange={(event, newInputValue) => {
+            setInputText(newInputValue);
+            if (setEnteredInputText) {
+              const updated = [...(enteredInputTexts || [])];
+              updated[index] = newInputValue;
+              setEnteredInputText(updated);
+            }
+          }}
+          onChange={async (event, selectedValue) => {
+            await handleChange(event, selectedValue);
+          }}
+          onBlur={() => setReadOnly(true)}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              inputRef={inputRef}
+              placeholder={placeholder}
+              variant="outlined"
+              sx={{
+                "& .MuiOutlinedInput-root": {
+                  padding: "3.5px 0px",
+                  fontSize: "13px",
+                  lineHeight: "18px",
+                  background: background,
+                  borderRadius: "0px",
+                  width: `${inputText?.length + 2}ch`,
+                  minWidth: `${(inputText?.length || 8) + 2}ch`,
+                },
+                "& .MuiOutlinedInput-input": {
+                  backgroundColor: "#e3e3e3",
+                  color: "#485772",
+                  py: "0px !important",
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  border: "none",
+                },
+              }}
+              error={error}
+            />
+          )}
+          slotProps={{
+            popper: { style: { minWidth: "150px" } },
+            paper: {
+              sx: {
+                boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+                maxHeight: "200px",
+                overflowY: "auto",
+              },
+            },
+            listbox: {
+              sx: {
+                maxHeight: "200px",
+                borderRadius: "4px",
+                overflowY: "auto",
+                "&::-webkit-scrollbar": {
+                  width: "4px",
+                },
+                "&::-webkit-scrollbar-thumb": {
+                  backgroundColor: "#398bb2",
+                  borderRadius: "8px",
+                },
+                "&::-webkit-scrollbar-track": {
+                  backgroundColor: "#f1f1f1",
+                },
+              },
+            },
+          }}
+          openOnFocus
+          {...restProps}
+        />
+        {error && (
+          <FormHelperText error id={`standard-weight-helper-text-${name}`}>
+            {errorText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    </div>
+  );
+};
+
+export default ResizableEditAutocompleteField;
+
+
+ResizableEditAutocompleteField.propTypes = {
+  name: PropTypes.any,
+  menuItems: PropTypes.any,
+  error: PropTypes.any,
+  style: PropTypes.any,
+  size: PropTypes.any,
+  isEditable: PropTypes.any,
+  errorText: PropTypes.any,
+  initialValue: PropTypes.any,
+  index: PropTypes.any,
+  field: PropTypes.any,
+  showBrackets: PropTypes.any,
+  handleUpdate: PropTypes.any,
+  isTeleconsultation: PropTypes.any,
+  placeholder: PropTypes.any,
+  enteredInputTexts: PropTypes.any,
+  setEnteredInputText: PropTypes.any,
+};

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

@@ -0,0 +1,215 @@
+import React from 'react';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import { useRef } from 'react';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+
+const StyledTextField = styled('input')(() => ({
+  backgroundColor: '#e3e3e3',
+  borderRadius: '0px',
+  padding: '0px 5px',
+  paddingTop: '2px !important',
+  paddingBottom: '2px !important',
+  fontFamily: 'IBM Plex Mono',
+  fontSize: '14px',
+  lineHeight: '18px',
+  fontWeight: 500,
+  border: 'none',
+  '&:focus-visible': {
+    outline: 'none !important',
+  },
+  '&::placeholder': {
+    color: '#939393',
+  },
+}));
+
+const StyledSpan = styled('span')(() => ({
+  backgroundColor: 'transparent',
+  borderRadius: '0px',
+  padding: '0px',
+  paddingTop: '5px !important',
+  paddingBottom: '5px !important',
+  fontFamily: '"IBM Plex Mono"',
+  lineHeight: '18px',
+  color: '#485772',
+  fontWeight: 500,
+  border: 'none',
+  width: 'auto',
+
+  fontSize: '14px',
+  '@media (max-width: 1536px)': {
+    fontSize: '13px',
+  },
+  '@media (max-width: 1200px)': {
+    fontSize: '12px',
+  },
+}));
+
+const ResizableEditInputField = ({
+  // name,
+  // error,
+  // style,
+  // errorText,
+  initialValue = '',
+  handleUpdate,
+  index,
+  field,
+  maxLength,
+  // textLimitations,
+  isTeleconsultation = false,
+  showBrackets = false,
+  placeholder = 'Add Text',
+  isEditable = false,
+  InputProps,
+  ...restProps
+}) => {
+  const [readOnly, setReadOnly] = useState(true);
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.setSelectionRange(value?.length, value?.length);
+    }
+  }, [readOnly]);
+
+  const handleDoubleClick = () => {
+    isEditable && setReadOnly(false);
+  };
+
+  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) => {
+    setValue(event.target.value);
+    if (inputRef.current) {
+      inputRef.current.style.width = `${event.target.value?.length + 2}ch`;
+    }
+  };
+
+  const handleBlur = async () => {
+    if (field === 'duration' || field === 'since') {
+      const formattedDuration = formatDuration(value);
+      setValue(formattedDuration);
+      await handleUpdate(index, field, formattedDuration);
+    } else {
+      await handleUpdate(index, field, value);
+    }
+    setReadOnly(true);
+  };
+
+  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 readOnly ? (
+    <StyledSpan
+      onDoubleClick={handleDoubleClick}
+      style={{
+        width: `${value?.length}ch`,
+        marginLeft: showBrackets ? '4px' : '0px',
+        cursor: isEditable ? 'pointer' : 'default',
+        color: isTeleconsultation ? '#ffffff' : '#485772',
+      }}
+    >
+      {value
+        ? showBrackets
+          ? `(${value})`
+          : value
+        : isEditable && (
+            <i
+              className="ri-add-line"
+              style={{ color: isTeleconsultation ? '#1aff1a' : 'green' }}
+              onClick={handleDoubleClick}
+            >
+              {placeholder}
+            </i>
+          )}
+    </StyledSpan>
+  ) : (
+    <StyledTextField
+      ref={inputRef}
+      type="text"
+      value={value || ''}
+      placeholder={placeholder}
+      onChange={handleChange}
+      onKeyDown={async (e) => {
+        await handleKeyPress(e);
+      }}
+      onBlur={async () => {
+        await handleBlur();
+      }}
+      readOnly={readOnly}
+      maxLength={maxLength}
+      style={{
+        width: value ? `${value?.length + 2}ch` : `${placeholder.length + 2}ch`,
+        marginLeft: '3px',
+        color: isTeleconsultation ? '#ffffff' : '#485772',
+        backgroundColor: isTeleconsultation ? 'rgba(0, 0, 0, 0.6)' : '',
+        borderRadius: isTeleconsultation ? '5px' : '',
+      }}
+      {...InputProps}
+      {...restProps}
+    />
+  );
+};
+
+export default ResizableEditInputField;
+
+
+ResizableEditInputField.propTypes = {
+  name: PropTypes.any,
+  error: PropTypes.any,
+  style: PropTypes.any,
+  errorText: PropTypes.any,
+  initialValue: PropTypes.any,
+  handleUpdate: PropTypes.any,
+  index: PropTypes.any,
+  field: PropTypes.any,
+  maxLength: PropTypes.any,
+  textLimitations: PropTypes.any,
+  isTeleconsultation: PropTypes.any,
+  showBrackets: PropTypes.any,
+  placeholder: PropTypes.any,
+  isEditable: PropTypes.any,
+  InputProps: PropTypes.any,
+};

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

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FormControl, Select, MenuItem, FormHelperText } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+
+// Styled components for read-only mode (span) and editable mode (Select)
+const StyledSpan = styled('span')(() => ({
+  backgroundColor: 'transparent',
+  borderRadius: '0px',
+  padding: '0px',
+  paddingTop: '5px !important',
+  paddingBottom: '5px !important',
+  lineHeight: '18px',
+  border: 'none',
+  cursor: 'pointer',
+  fontSize: '14px',
+  '@media (max-width: 1536px)': {
+    fontSize: '13px',
+  },
+  '@media (max-width: 1200px)': {
+    fontSize: '12px',
+  },
+}));
+
+const ResizableEditSelectField = ({
+  name,
+  menuItems,
+  error,
+  style,
+  // size = 'big',
+  isEditable,
+  errorText,
+  initialValue,
+  index,
+  field,
+  showBrackets = false,
+  handleUpdate,
+  isTeleconsultation = false,
+  placeholder,
+  ...restProps
+}) => {
+  const [readOnly, setReadOnly] = useState(true);
+  const [background, setBackground] = useState('transparent');
+  const [value, setValue] = useState(initialValue === null ? menuItems[0].value : initialValue);
+  const selectRef = useRef(null);
+  const inputRef = useRef(null);
+  const spanRef = useRef(null);
+  const [forceOpen, setForceOpen] = useState(false);
+
+  useEffect(() => {
+    setBackground(readOnly ? 'transparent' : '#e3e3e3');
+  }, [readOnly]);
+
+  useEffect(() => {
+    if (selectRef.current && value !== undefined) {
+      selectRef.current.style.width = `${value.length + 5}ch`;
+    }
+    if (spanRef.current && value !== undefined) {
+      spanRef.current.style.width = `${value.length + 2}ch`;
+    }
+  }, [value, readOnly]);
+
+  const handleDoubleClick = () => {
+    if (isEditable) {
+      setReadOnly(false);
+      setForceOpen(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!readOnly && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+    }
+  }, [readOnly]);
+
+  const handleChange = async (event) => {
+    const selectedValue = event.target.value;
+    setValue(selectedValue);
+    // Switch back to readOnly mode when an option is selected
+    setReadOnly(true);
+    await handleUpdate(index, field, selectedValue);
+  };
+
+  const handleKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      setReadOnly(true);
+      handleUpdate(index, field, value ?? '');
+    }
+  };
+
+  return readOnly ? (
+    <StyledSpan
+      onDoubleClick={handleDoubleClick}
+      ref={spanRef}
+      style={{
+        width: `${(value ?? '').length + 2}ch`,
+        marginLeft: '4px',
+        cursor: isEditable ? 'pointer' : 'default',
+        color: isTeleconsultation ? '#ffffff' : '#485772',
+      }}
+    >
+      {value === '' && isEditable ? (
+        <i
+          className="ri-add-line"
+          style={{ color: isTeleconsultation ? '#1aff1a' : 'green' }}
+          onClick={handleDoubleClick}
+        >
+          {placeholder}
+        </i>
+      ) : showBrackets && value !== '' ? (
+        `(${menuItems.find((item) => item.value === value)?.menuLabel || ''})`
+      ) : (
+        `${menuItems.find((item) => item.value === value)?.menuLabel || ''}`
+      )}
+    </StyledSpan>
+  ) : (
+    <div>
+      <FormControl error={error} sx={style}>
+        <Select
+          onClose={() => setReadOnly(true)}
+          open={forceOpen}
+          ref={selectRef}
+          sx={{
+            '& .MuiSelect-select': {
+              paddingTop: readOnly ? '0px' : '5px',
+              paddingBottom: readOnly ? '10px' : '5px',
+              paddingLeft: readOnly ? '0px' : '10px',
+              paddingRight: '0px !important',
+              fontSize: '14px',
+              lineHeight: '18px',
+              color: isTeleconsultation ? (readOnly ? '#ffffff' : '#485772') : '#485772',
+              fontWeight: '500',
+              borderRadius: '0px',
+            },
+            '& .MuiOutlinedInput-notchedOutline': {
+              border: 'none',
+            },
+            '& .MuiSelect-icon': {
+              display: readOnly ? 'none' : undefined,
+            },
+            background: background,
+          }}
+          MenuProps={{ MenuListProps: { disablePadding: true } }}
+          inputProps={{
+            sx: {
+              background: background,
+            },
+            ref: inputRef,
+          }}
+          value={value}
+          onChange={async (e) => {
+            await handleChange(e);
+          }}
+          onKeyDownCapture={handleKeyPress}
+          onBlur={() => {
+            setReadOnly(true);
+          }}
+          {...restProps}
+        >
+          {menuItems.map((row, index) => (
+            <MenuItem key={index} value={row.value}>
+              {row.menuLabel}
+            </MenuItem>
+          ))}
+        </Select>
+        {error && (
+          <FormHelperText error id={`standard-weight-helper-text-${name}`}>
+            {errorText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    </div>
+  );
+};
+
+export default ResizableEditSelectField;
+
+
+
+ResizableEditSelectField.propTypes = {
+  name: PropTypes.any,
+  menuItems: PropTypes.any,
+  error: PropTypes.any,
+  style: PropTypes.any,
+  size: PropTypes.any,
+  isEditable: PropTypes.any,
+  errorText: PropTypes.any,
+  initialValue: PropTypes.any,
+  index: PropTypes.any,
+  field: PropTypes.any,
+  showBrackets: PropTypes.any,
+  handleUpdate: PropTypes.any,
+  isTeleconsultation: PropTypes.any,
+  placeholder: PropTypes.any,
+};