argous 1.2.222 → 1.2.224

package/lib/components/Programa/Annotations/Annotation.js

@@ -0,0 +1,274 @@
+import { AnnotationsContext } from '.';
+import { EXTRA_SMALL_SIZE, MEDIUM_SIZE, SMALL_SIZE, LIGHT_GREY_COLOR, MEDIUM_GREY_COLOR, AVATAR_SIZE, ViewedIcon, UNIMED_GREEN_COLOR, AnswerIcon } from './utils';
+import { getProgramAnnotations } from '../../../api';
+import { ArgousAvatar, IconsComponent, ModalVisualizacaoDocumentos } from '../../../components';
+import { useModal } from '../../../utils';
+import { Button, Divider, Grid, Typography, makeStyles } from '@material-ui/core';
+import moment from 'moment';
+import React, { useContext } from 'react';
+
+
+const ANSWER_USER_MIN_WIDTH = 159.78;
+
+const useStyles = makeStyles((theme) => ({
+  annotationContainer: {
+    padding: SMALL_SIZE,
+    border: `2px solid ${LIGHT_GREY_COLOR(theme.palette.type)}`,
+    '&:not(:last-child)': {
+      marginBottom: MEDIUM_SIZE
+    },
+    '&:last-child': {
+      borderBottom: 0
+    }
+  },
+  annotationHeader: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  annotationUser: {
+    display: 'flex',
+    gap: SMALL_SIZE,
+    '&>div:nth-child(1)': {
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE
+    },
+    '&>div:nth-child(2)': {
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      gap: EXTRA_SMALL_SIZE,
+      '&>h6': {
+        lineHeight: 1
+      },
+      '&>p': {
+        lineHeight: 1,
+        fontSize: '.75rem',
+        fontWeight: 500,
+        color: MEDIUM_GREY_COLOR(theme.palette.type)
+      }
+    }
+  },
+  annotationBody: {
+    '&>div:nth-child(1)': {
+      padding: '10px 0',
+      overflow: 'hidden'
+    }
+  },
+  annotationFooter: {
+    display: 'flex',
+    gap: SMALL_SIZE,
+    paddingTop: SMALL_SIZE,
+    minHeight: 43
+  },
+  buttonsDiv: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: SMALL_SIZE
+  },
+  markedUsers: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: SMALL_SIZE
+  },
+  markedUser: {
+    position: 'relative',
+    '&>div:nth-child(1)': {
+      width: AVATAR_SIZE,
+      height: AVATAR_SIZE
+    }
+  },
+  avatarViewedIcon: {
+    position: 'absolute',
+    bottom: -2,
+    right: -8,
+    width: 18,
+    height: 18,
+    color: UNIMED_GREEN_COLOR
+  },
+  answer: {
+    alignItems: 'flex-start',
+    padding: SMALL_SIZE,
+    gap: SMALL_SIZE
+  },
+  answerUserDiv: {
+    display: 'flex',
+    gap: SMALL_SIZE,
+    minWidth: ANSWER_USER_MIN_WIDTH,
+    '&>div:nth-child(1)': {
+      position: 'relative',
+      '&>div:nth-child(1)': {
+        width: AVATAR_SIZE,
+        height: AVATAR_SIZE
+      }
+    },
+    '&>div:nth-child(2)': {
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      gap: EXTRA_SMALL_SIZE,
+      '&>h6': {
+        lineHeight: 1
+      },
+      '&>p': {
+        lineHeight: 1,
+        fontSize: '.75rem',
+        fontWeight: 500,
+        color: MEDIUM_GREY_COLOR(theme.palette.type)
+      }
+    }
+  },
+  avatarAnswerIcon: {
+    position: 'absolute',
+    top: -2,
+    left: -8,
+    width: 18,
+    height: 18,
+    color: UNIMED_GREEN_COLOR
+  },
+  answerTextDiv: {
+    width: '100%',
+    maxWidth: '100%',
+    [theme.breakpoints.up('sm')]: {
+      maxWidth: `calc(100% - ${ANSWER_USER_MIN_WIDTH}px - ${SMALL_SIZE}px)`
+    }
+  },
+  divider: {
+    height: 2
+  }
+}));
+
+
+export const ANNOTATION_ID_INDEX = 0;
+export const ANNOTATION_PARENT_ID_INDEX = 1;
+export const ANNOTATION_USER_INDEX = 2;
+export const ANNOTATION_PROGRAM_CODE_INDEX = 3;
+export const ANNOTATION_PARAMETERS_INDEX = 4;
+export const ANNOTATION_DATE_INDEX = 5;
+export const ANNOTATION_TEXT_INDEX = 6;
+export const ANNOTATION_DOCUMENT_ID_INDEX = 7;
+export const ANNOTATION_ANSWERS_INDEX = 8;
+export const ANNOTATION_MARKED_USERS_INDEX = 9;
+export const ANNOTATION_PRIVACY_TYPE_INDEX = 10;
+export const ANNOTATION_CODE_INDEX = 11;
+export const ANNOTATION_DOCUMENT_MIME_TYPE_INDEX = 12;
+export const ANNOTATION_DOCUMENT_URL_INDEX = 13;
+
+
+const Annotation = ({ annotation }) => {
+
+  const classes = useStyles();
+  const { createModal } = useModal();
+  const fileView = createModal(ModalVisualizacaoDocumentos);
+  const { openAnnotationParameters, handleDialogClose, scrollDialogToBottom, dispatch } = useContext(AnnotationsContext);
+
+  const user = { id: (annotation[ANNOTATION_USER_INDEX]?.[0] || -1), name: (annotation[ANNOTATION_USER_INDEX]?.[1] || '') };
+  const date = (annotation[ANNOTATION_DATE_INDEX]) ? moment(annotation[ANNOTATION_DATE_INDEX]).format('DD/MM/YYYY HH:mm:ss') : '';
+  const text = annotation[ANNOTATION_TEXT_INDEX];
+  const answers = (annotation[ANNOTATION_ANSWERS_INDEX] || []);
+  const markedUsers = (annotation[ANNOTATION_MARKED_USERS_INDEX] || []);
+  const annotationParameters = (annotation[ANNOTATION_PARAMETERS_INDEX] || {});
+  const file = { 
+    id: annotation[ANNOTATION_DOCUMENT_ID_INDEX], 
+    type: annotation[ANNOTATION_DOCUMENT_MIME_TYPE_INDEX], 
+    url: annotation[ANNOTATION_DOCUMENT_URL_INDEX] 
+  };
+
+  const reply = (event) => {
+    dispatch({ field: 'selectedAnnotation', value: annotation });
+    setTimeout(() => scrollDialogToBottom(event), 0);
+  };
+
+  const access = (event) => {
+    (openAnnotationParameters && (typeof openAnnotationParameters === 'function')) && openAnnotationParameters(event, annotationParameters);
+    handleDialogClose();
+  };
+
+  const handleFileClick = async (event) => {
+    const response = await getProgramAnnotations({ snToken: true });
+    if (response?.status) {
+      await fileView({ nome: 'Documento da anotação', linkPronto: file.url, tokenSistema: response?.token });
+    }
+  };
+
+
+  return <div className={classes.annotationContainer}>
+    <div className={classes.annotationHeader}>
+      <div className={classes.annotationUser}>
+        <ArgousAvatar alt={`${user.name} avatar`} idUsuario={user.id} nome={user.name} />
+        <div>
+          <Typography variant='subtitle2'>{user.name}</Typography>
+          <Typography variant='body2'>{date}</Typography>
+        </div>
+      </div>
+      <div>
+        {(file.id) && <IconsComponent mimeType={file.type} height={AVATAR_SIZE} onClick={handleFileClick} style={{ cursor: 'pointer' }} />}
+      </div>
+    </div>
+    <div className={classes.annotationBody}>
+      <div>
+        <Typography variant='body2'>{text}</Typography>
+      </div>
+      <div>
+        {answers.map((answer, answerIndex) => <Answer key={`answer-${answerIndex}`} {...{ answer }} />)}
+      </div>
+    </div>
+    <Divider className={classes.divider} />
+    <Grid container justifyContent={(markedUsers.length) ? 'space-between' : 'flex-end'} className={classes.annotationFooter}>
+      {(!!markedUsers.length) && (
+        <Grid item xs={12} sm='auto' className={classes.markedUsers}>
+          {markedUsers.map((user, userIndex) => <MarkedUser key={`marked-user-${user?.idUsuario}`} {...{ user }} />)}
+        </Grid>
+      )}
+      <Grid item xs={12} sm='auto' className={classes.buttonsDiv}>
+        <Button fullWidth variant='outlined' size='small' onClick={access}>Acessar</Button>
+        <Button fullWidth color='primary' variant='contained' size='small' onClick={reply}>Responder</Button>
+      </Grid>
+    </Grid>
+  </div>;
+};
+
+
+export default Annotation;
+
+
+const Answer = ({ answer }) => {
+
+  const classes = useStyles();
+  const user = { id: (answer?.usuario?.[0] || -1), name: (answer?.usuario?.[1] || '') };
+  const date = (answer?.dtAnotacao) ? moment(answer?.dtAnotacao).format('DD/MM/YYYY HH:mm:ss') : '';
+  const text = answer?.dsAnotacao;
+
+
+  return <div>
+    <Divider className={classes.divider} />
+    <Grid container className={classes.answer}>
+      <div className={classes.answerUserDiv}>
+        <div>
+          <ArgousAvatar alt={`${user.name} avatar`} idUsuario={user.id} nome={user.name} />
+          <AnswerIcon className={classes.avatarAnswerIcon} />
+        </div>
+        <div>
+          <Typography variant='subtitle2'>{user.name}</Typography>
+          <Typography variant='body2'>{date}</Typography>
+        </div>
+      </div>
+      <div className={classes.answerTextDiv}>
+        <Typography variant='body2'>{text}</Typography>
+      </div>
+    </Grid>
+  </div>;
+};
+
+
+const MarkedUser = (props) => {
+
+  const classes = useStyles();
+  const user = { id: (props?.user?.idUsuario || -1), name: (props?.user?.nmUsuario || '') };
+  const viewDate = props?.user?.dtVisualizacao;
+
+
+  return <div className={classes.markedUser}>
+    <ArgousAvatar alt={`${user.name} avatar`} idUsuario={user.id} nome={user.name} />
+    {(viewDate) && <ViewedIcon className={classes.avatarViewedIcon} />}
+  </div>;
+};

package/lib/components/Programa/Annotations/AnnotationsList.js

@@ -0,0 +1,30 @@
+import { AnnotationsContext } from '.';
+import Annotation from './Annotation';
+import { LIGHT_GREY_COLOR } from './utils';
+import { useTheme } from '@material-ui/core';
+import React, { useContext } from 'react';
+
+
+const AnnotationsList = () => {
+
+  const theme = useTheme();
+  const { list } = useContext(AnnotationsContext);
+
+
+  return (
+    <div 
+      style={{ 
+        maxHeight: '60vh', 
+        overflow: 'hidden auto', 
+        borderBottom: `2px solid ${LIGHT_GREY_COLOR(theme.palette.type)}` 
+      }}
+    >
+      {list.annotations.map((annotation, annotationIndex) => (
+        <Annotation key={`annotation-${annotation?.[0]}`} {...{ annotation }} />
+      ))}
+    </div>
+  );
+};
+
+
+export default AnnotationsList;

package/lib/components/Programa/Annotations/Input/FileInput.js

@@ -0,0 +1,96 @@
+import { AnnotationsContext } from '..';
+import { IconsComponent } from '../../../../components';
+import { printScreen as getPrintScreen } from '../../../../utils';
+import { CloseIcon, EXTRA_SMALL_SIZE, MEDIUM_SIZE, SMALL_SIZE, ELLIPSIS_TEXT_STYLE, LARGE_SIZE } from '../utils';
+import { Button, IconButton, Typography, makeStyles } from '@material-ui/core';
+import React, { useContext, useRef } from 'react';
+import { IoDocumentAttachOutline, IoImageOutline } from 'react-icons/io5';
+
+
+const useStyles = makeStyles({
+  fileInputContainer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: SMALL_SIZE,
+    '&>input': {
+      display: 'none'
+    }
+  },
+  fileInputButtonsDiv: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: SMALL_SIZE
+  },
+  file: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: EXTRA_SMALL_SIZE,
+    maxWidth: '100%',
+    '&>p': {
+      ...ELLIPSIS_TEXT_STYLE
+    }
+  }
+});
+
+
+const FileInput = ({ file, onChange }) => {
+
+  const classes = useStyles();
+  const { printScreen, loading, dispatch } = useContext(AnnotationsContext);
+  const inputRef = useRef(null);
+  const canAddPrintScreen = !(file === printScreen?.file);
+  const disabled = (loading.save || loading.file);
+
+  const printScreenClick = async (event) => {
+    dispatch({ type: 'loading', field: 'file', value: true });
+
+    let file;
+    if (printScreen?.file) file = printScreen?.file;
+    else {
+      const response = await getPrintScreen({ event });
+      if (response?.status) {
+        dispatch({ field: 'printScreen', value: response });
+        file = response?.file;
+      }
+    }
+
+    (file) && onChange(event, file);
+    dispatch({ type: 'loading', field: 'file', value: false });
+  };
+
+
+  return <div className={classes.fileInputContainer}>
+    <input ref={inputRef} type='file' onChange={e => (e?.target?.files?.length) && onChange(e, e.target.files[0])} />
+    {(file) && <File {...{ file, disabled, classes }} onDelete={e => onChange(e, undefined)} />}
+    <div className={classes.fileInputButtonsDiv}>
+      <IconButton {...{ disabled }} onClick={() => (inputRef.current) && inputRef.current.click()} style={{ padding: EXTRA_SMALL_SIZE }}>
+        <IoDocumentAttachOutline size={MEDIUM_SIZE} />
+      </IconButton>
+      {(canAddPrintScreen) && (
+        <Button 
+          {...{ disabled }} 
+          size='small' 
+          variant='outlined' 
+          startIcon={<IoImageOutline />} 
+          onClick={printScreenClick}
+        >
+          Captura de tela
+        </Button>
+      )}
+    </div>
+  </div>;
+};
+
+
+export default FileInput;
+
+
+const File = ({ file, disabled, onDelete, classes }) => <div className={classes.file}>
+  <IconsComponent fileName={file?.name} mimeType={file?.type} height={LARGE_SIZE} />
+  <Typography>{file?.name}</Typography>
+  <IconButton {...{ disabled }} size='small' onClick={e => (typeof onDelete === 'function') && onDelete(e)}>
+    <CloseIcon />
+  </IconButton>
+</div>;

package/lib/components/Programa/Annotations/Input/Input.js

@@ -0,0 +1,190 @@
+import FileInput from './FileInput';
+import PrivacySelection from './PrivacySelection';
+import ReplyInformation from './ReplyInformation';
+import UsersAutocomplete from './UsersAutocomplete';
+import { AnnotationsContext } from '..';
+import { prepareFile, saveProgramAnnotation } from '../../../../api';
+import { ANNOTATION_ANSWERS_INDEX, ANNOTATION_DATE_INDEX, ANNOTATION_ID_INDEX, ANNOTATION_PARAMETERS_INDEX, ANNOTATION_PROGRAM_CODE_INDEX, ANNOTATION_TEXT_INDEX, ANNOTATION_USER_INDEX } from '../Annotation';
+import { EXTRA_SMALL_SIZE, SMALL_SIZE, LARGE_SIZE, LIGHT_GREY_COLOR } from '../utils';
+import { Button, CircularProgress, Input as MaterialInput, makeStyles } from '@material-ui/core';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+
+
+const useStyles = makeStyles(theme => ({
+  inputContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: SMALL_SIZE
+  },
+  materialInput: {
+    padding: EXTRA_SMALL_SIZE,
+    backgroundColor: theme.palette.background.default,
+    border: `1px solid ${LIGHT_GREY_COLOR(theme.palette.type)}`,
+    '&>textarea': {
+      minHeight: (LARGE_SIZE + SMALL_SIZE)
+    }
+  },
+  buttonsDiv: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: SMALL_SIZE,
+    '&>button': {
+      minHeight: 30,
+      lineHeight: 1
+    }
+  }
+}));
+
+
+const initialStatePrivacyType = '0';
+
+
+const Input = () => {
+
+  const classes = useStyles();
+  const materialInputRef = useRef(null);
+  const { list, annotationParameters, selectedAnnotation, code, loading, dispatch } = useContext(AnnotationsContext);
+  const replying = !!selectedAnnotation.length;
+
+  const [text, setText] = useState('');
+  const [file, setFile] = useState('');
+  const [markedUsers, setMarkedUsers] = useState([]);
+  const [privacyType, setPrivacyType] = useState(initialStatePrivacyType);
+
+
+  function resetStates() {
+    setText('');
+    setFile('');
+    setMarkedUsers([]);
+    setPrivacyType(initialStatePrivacyType);
+  }
+
+  const cancelReply = () => {
+    dispatch({ field: 'selectedAnnotation', value: [] });
+    resetStates();
+  };
+
+  const addAnnotation = ({ answer, newAnnotation = [] }) => {
+    if (!newAnnotation.length) return;
+
+    let newList = [...list.annotations];
+
+    if (answer) {
+      const parentIndex = newList.findIndex((annotation) => (annotation[ANNOTATION_ID_INDEX] === answer));
+      if (parentIndex === -1) return;
+
+      let newParentAnnotation = [...newList[parentIndex]];
+      let newAnswers = [...newParentAnnotation[ANNOTATION_ANSWERS_INDEX]];
+      const newAnswer = { 
+        dsAnotacao: newAnnotation[ANNOTATION_TEXT_INDEX], 
+        dtAnotacao: newAnnotation[ANNOTATION_DATE_INDEX], 
+        idAnotacao: newAnnotation[ANNOTATION_ID_INDEX], 
+        idAnotacaoPai: answer, 
+        parametros: newAnnotation[ANNOTATION_PARAMETERS_INDEX], 
+        pgCode: newAnnotation[ANNOTATION_PROGRAM_CODE_INDEX], 
+        usuario: newAnnotation[ANNOTATION_USER_INDEX] 
+      };
+
+      newAnswers.push(newAnswer);
+      newParentAnnotation.splice(ANNOTATION_ANSWERS_INDEX, 1, newAnswers);
+      newList.splice(parentIndex, 1, newParentAnnotation);
+    } else {
+      newList.unshift(newAnnotation);
+    }
+
+    dispatch({ type: 'list', field: 'annotations', value: newList });
+  };
+
+  const saveAnnotation = async (event) => {
+    dispatch({ type: 'loading', field: 'save', value: true });
+
+    let methodParameters = { 
+      pgCode: code, 
+      dsAnotacao: text, 
+      idAnotacaoPai: (selectedAnnotation.length) ? selectedAnnotation[ANNOTATION_ID_INDEX] : undefined, 
+      parametros: annotationParameters, 
+      tpPrivacidade: privacyType, 
+      idRecebimento: undefined, 
+      usuarioRelacionado: markedUsers.map(([id]) => id) 
+    };
+
+    if (file) {
+      const { idRecebimento } = await prepareFile(file);
+      methodParameters.idRecebimento = idRecebimento;
+    }
+
+    const response = await saveProgramAnnotation(methodParameters);
+    if (response?.status) {
+      cancelReply();
+      addAnnotation({ answer: selectedAnnotation[ANNOTATION_ID_INDEX], newAnnotation: response?.anotacao });
+    }
+
+    dispatch({ type: 'loading', field: 'save', value: false });
+  };
+
+  const setUpReply = () => {
+    (materialInputRef.current) && materialInputRef.current.focus();
+    setFile('');
+    setMarkedUsers([]);
+    setPrivacyType(initialStatePrivacyType);
+  };
+  useEffect(() => (replying) && setUpReply(), [replying]);
+
+
+  return <div className={classes.inputContainer}>
+    {(replying) && <ReplyInformation {...{ selectedAnnotation }} />}
+    <div>
+      <MaterialInput 
+        fullWidth 
+        multiline 
+        inputRef={materialInputRef} 
+        placeholder='Escreva a sua anotação' 
+        disabled={loading.save} 
+        value={text} 
+        onChange={(event) => setText(event.target.value)} 
+        className={classes.materialInput} 
+      />
+    </div>
+    {(!replying) && (
+      <>
+        <div className={classes.buttonsDiv}>
+          <FileInput {...{ file }} onChange={(_, value) => setFile(value)} />
+        </div>
+        <div className={classes.buttonsDiv}>
+          <UsersAutocomplete 
+            disabled={loading.save} 
+            value={markedUsers} 
+            onChange={(event, value, reason, details) => setMarkedUsers(value)} 
+          />
+        </div>
+        <div className={classes.buttonsDiv}>
+          <PrivacySelection 
+            disabled={loading.save} 
+            value={privacyType} 
+            onChange={event => setPrivacyType(event.target.value)} 
+          />
+        </div>
+      </>
+    )}
+    <div className={classes.buttonsDiv}>
+      {(replying) && (
+        <Button color='default' variant='contained' size='small' onClick={cancelReply}>
+          Cancelar
+        </Button>
+      )}
+      <Button 
+        color='primary' 
+        variant='contained' 
+        size='small' 
+        disabled={!text.length || loading.save} 
+        onClick={saveAnnotation} 
+        style={{ width: (replying) ? 97.13 : 72.45 }}
+      >
+        {(loading.save) ? <CircularProgress color='primary' size={22} /> : (replying) ? 'Responder' : 'Anotar'}
+      </Button>
+    </div>
+  </div>;
+};
+
+
+export default Input;

package/lib/components/Programa/Annotations/Input/PrivacySelection.js

@@ -0,0 +1,72 @@
+import { EXTRA_SMALL_SIZE, MEDIUM_SIZE, privacyTypeOptions } from '../utils';
+import { MenuItem, TextField, Typography, makeStyles } from '@material-ui/core';
+import React from 'react';
+
+
+const useStyles = makeStyles({
+  selectTextField: {
+    '&>div>svg': {
+      right: EXTRA_SMALL_SIZE
+    }
+  },
+  menuItem: {
+    display: 'flex',
+    gap: EXTRA_SMALL_SIZE,
+    padding: EXTRA_SMALL_SIZE
+  }
+});
+
+
+const PrivacySelection = ({ value = '', onChange = () => '', disabled = false }) => {
+
+  const classes = useStyles();
+
+
+  return (
+    <TextField 
+      {...{ value, onChange, disabled }} 
+      select 
+      variant='filled' 
+      InputProps={{ 
+        disableUnderline: true, 
+        style: { 
+          borderRadius: 4, 
+          height: '100%' 
+        } 
+      }} 
+      SelectProps={{ 
+        SelectDisplayProps: { 
+          style: { 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: EXTRA_SMALL_SIZE, 
+            padding: `${EXTRA_SMALL_SIZE}px ${(EXTRA_SMALL_SIZE * 2) + 24}px ${EXTRA_SMALL_SIZE}px ${EXTRA_SMALL_SIZE}px` 
+          } 
+        }, 
+        MenuProps: { 
+          variant: 'menu', 
+          MenuListProps: { 
+            style: { padding: `${EXTRA_SMALL_SIZE}px 0` } 
+          } 
+        } 
+      }} 
+      className={classes.selectTextField}
+    >
+      {privacyTypeOptions.map((privacyType) => {
+
+        const value = privacyType[0];
+        const label = privacyType[1];
+        const ICON = privacyType[2];
+
+
+        return <MenuItem key={`${value}-menu-item`} {...{ value }} className={classes.menuItem}>
+          {(ICON) && <ICON size={MEDIUM_SIZE} />}
+          <Typography variant='body2'>{label}</Typography>
+        </MenuItem>;
+      })}
+    </TextField>
+  );
+};
+
+
+export default PrivacySelection;