argous 1.2.225 → 1.2.227

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

@@ -1,190 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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;

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

@@ -1,86 +0,0 @@
-import { ArgousAvatar } from '../../../../components';
-import { ANNOTATION_DATE_INDEX, ANNOTATION_TEXT_INDEX, ANNOTATION_USER_INDEX } from '../Annotation';
-import { AVATAR_SIZE, AnswerIcon, EXTRA_SMALL_SIZE, MEDIUM_GREY_COLOR, SMALL_SIZE, UNIMED_GREEN_COLOR } from '../utils';
-import { Typography, makeStyles } from '@material-ui/core';
-import moment from 'moment';
-import React from 'react';
-
-
-const useStyles = makeStyles(theme => ({
-  replyInformation: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    gap: SMALL_SIZE,
-    '&>div:nth-child(1)': {
-      display: 'flex',
-      gap: SMALL_SIZE,
-      '&>h6': {
-        fontWeight: 500,
-        lineHeight: 1
-      }
-    },
-    '&>div:nth-child(2)': {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: SMALL_SIZE,
-      '&>div:nth-child(1)': {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        gap: SMALL_SIZE,
-        '&>div:nth-child(1)': {
-          display: 'flex',
-          alignItems: 'flex-end',
-          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)
-          }
-        },
-        '&>div:nth-child(2)': {
-          width: AVATAR_SIZE,
-          height: AVATAR_SIZE
-        }
-      }
-    }
-  }
-}));
-
-
-const ReplyInformation = ({ selectedAnnotation }) => {
-
-  const classes = useStyles();
-  const text = selectedAnnotation[ANNOTATION_TEXT_INDEX];
-  const user = { id: (selectedAnnotation[ANNOTATION_USER_INDEX]?.[0] || -1), name: (selectedAnnotation[ANNOTATION_USER_INDEX]?.[1] || '') };
-  const date = (selectedAnnotation[ANNOTATION_DATE_INDEX]) ? moment(selectedAnnotation[ANNOTATION_DATE_INDEX]).format('DD/MM/YYYY HH:mm:ss') : '';
-
-
-  return <div className={classes.replyInformation}>
-    <div>
-      <AnswerIcon color={UNIMED_GREEN_COLOR} size={16} />
-      <Typography variant='subtitle1'>Respondendo</Typography>
-    </div>
-    <div>
-      <div>
-        <div>
-          <Typography variant='subtitle2'>{user.name}</Typography>
-          <Typography variant='body2'>{date}</Typography>
-        </div>
-        <ArgousAvatar alt={`${user.name}-avatar`} idUsuario={user.id} nome={user.name} />
-      </div>
-      <div>
-        <Typography variant='body2' align='right'>{text}</Typography>
-      </div>
-    </div>
-  </div>;
-};
-
-
-export default ReplyInformation;

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

@@ -1,122 +0,0 @@
-import { searchUsers } from '../../../../api';
-import { ArgousAvatar } from '../../../../components';
-import { formataNome } from '../../../../utils';
-import { setError } from '../../../../utils/api';
-import { EXTRA_SMALL_SIZE, LARGE_SIZE, SMALL_SIZE } from '../utils';
-import { Chip, TextField, makeStyles } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
-import React, { useEffect, useState } from 'react';
-
-
-const useStyles = makeStyles({
-  userAutocomplete: {
-    maxWidth: '100%'
-  },
-  usersAutocompleteInput: {
-    '&>div>input': {
-      minWidth: '137px !important',
-      padding: `${EXTRA_SMALL_SIZE}px !important`
-    },
-    '& .MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] .MuiAutocomplete-endAdornment': {
-      right: EXTRA_SMALL_SIZE
-    }
-  },
-  usersAutocompleteChip: {
-    height: LARGE_SIZE,
-    borderRadius: 0,
-    margin: EXTRA_SMALL_SIZE,
-    '&>span': {
-      padding: `0 ${SMALL_SIZE}px`
-    },
-    '&>svg': {
-      margin: `0 ${EXTRA_SMALL_SIZE}px 0 0`
-    }
-  }
-});
-
-
-const UsersAutocomplete = ({ value = [], onChange = () => '', disabled = false }) => {
-
-  const classes = useStyles();
-  const [search, setSearch] = useState('');
-  const [users, setUsers] = useState([]);
-
-  async function getUsers(dsFiltroNome) {
-    const res = await searchUsers({ dsFiltroNome });
-    if (res.users?.length) setUsers(res.users || []);
-    else setError(res.dsErro);
-  }
-  useEffect(() => getUsers(search), [search]);
-
-  function handleOnChange (event, value, reason, details) {
-    (onChange) && onChange(event, value, reason, details);
-  }
-
-
-  return (
-    <Autocomplete 
-      {...{ value, disabled }} 
-      multiple 
-      onChange={handleOnChange} 
-      options={users.filter(user => value.indexOf(user) < 0)} 
-      getOptionLabel={option => formataNome(option[1])} 
-      getOptionSelected={(option, value) => (option?.[0] === value?.[0])} 
-      noOptionsText='Não encontrado' 
-      openText='Abrir' 
-      closeText='Fechar' 
-      clearText='Limpar' 
-      renderTags={(value, getTagProps) => (
-        value.map((option, index) => {
-
-          const id = option?.[0];
-          const name = option?.[1];
-
-
-          return (
-            <Chip 
-              icon={(
-                <ArgousAvatar 
-                  alt={`${name} avatar`} 
-                  idUsuario={id} 
-                  nome={name} 
-                  style={{ height: 30, width: 30, margin: `0 0 0 ${EXTRA_SMALL_SIZE}px` }} 
-                />
-              )} 
-              label={option[1] || option} 
-              {...getTagProps({ index })} 
-              className={classes.usersAutocompleteChip} 
-            />
-          );
-        })
-      )} 
-      renderInput={params => (
-        <TextField 
-          id={params.id} 
-          variant='filled' 
-          placeholder='Selecione usuários' 
-          fullWidth={params.fullWidth} 
-          size={params.size} 
-          disabled={params.disabled} 
-          InputLabelProps={params.InputLabelProps} 
-          InputProps={{ 
-            ...params.InputProps, 
-            disableUnderline: true, 
-            style: { 
-              height: '100%', 
-              borderRadius: 4, 
-              padding: `${EXTRA_SMALL_SIZE}px 62px ${EXTRA_SMALL_SIZE}px ${EXTRA_SMALL_SIZE}px` 
-            } 
-          }} 
-          inputProps={params.inputProps} 
-          value={search} 
-          onChange={e => setSearch(e.target.value)} 
-          className={classes.usersAutocompleteInput} 
-        />
-      )} 
-      className={classes.userAutocomplete} 
-    />
-  );
-};
-
-
-export default UsersAutocomplete;

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

@@ -1,136 +0,0 @@
-import AnnotationsList from './AnnotationsList';
-import Input from './Input/Input';
-import { CloseIcon, EXTRA_SMALL_SIZE, MEDIUM_SIZE } from './utils';
-import { getProgramAnnotations } from '../../../api';
-import { useStore } from '../../../utils';
-import { CircularProgress, Dialog, IconButton, Typography, makeStyles } from '@material-ui/core';
-import React, { createContext, useCallback, useEffect, useMemo, useRef } from 'react';
-import { useImmerReducer } from 'use-immer';
-
-
-const useStyles = makeStyles(() => ({
-  dialogContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: MEDIUM_SIZE,
-    padding: MEDIUM_SIZE,
-    overflowY: 'auto'
-  },
-  dialogHeader: {
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    gap: MEDIUM_SIZE,
-    '&>h6': {
-      lineHeight: 1
-    }
-  },
-  dialogHeaderActions: {
-    position: 'relative',
-    '&>button': {
-      zIndex: 1,
-      padding: EXTRA_SMALL_SIZE
-    }
-  },
-  dialogHeaderLoading: {
-    position: 'absolute',
-    inset: 0,
-    zIndex: 0
-  }
-}));
-
-
-const initialStateLoading = { 
-  main: false, 
-  save: false, 
-  file: false 
-};
-
-const initialStateList = { 
-  annotations: [] 
-};
-
-const initialState = { 
-  selectedAnnotation: [], 
-  list: initialStateList, 
-  loading: initialStateLoading, 
-  printScreen: {} 
-};
-
-const reducer = (state = initialState, { type, property, field, value }) => {
-  switch (type) {
-    default:
-      if (type && property && field) state[type][property][field] = value;
-      else if (type && field) state[type][field] = value;
-      else if (field) state[field] = value;
-      break;
-  }
-};
-
-export const AnnotationsContext = createContext(initialState);
-
-
-const Annotations = ({ open, proceed, onClose, code, pgTitle, annotationParameters, openAnnotationParameters }) => {
-
-  const classes = useStyles();
-  const { usuarioLogado: loggedUser } = useStore();
-  const dialogRef = useRef(null);
-  const [state, dispatch] = useImmerReducer(reducer, initialState);
-  const { loading, list } = state;
-
-
-  const handleDialogClose = useCallback((event) => {
-    (proceed) && proceed();
-    (onClose) && onClose(event);
-  }, [proceed, onClose]);
-
-  const getAnnotations = useCallback(async (code) => {
-    dispatch({ type: 'loading', field: 'main', value: true });
-
-    const response = await getProgramAnnotations({ pgCode: code, ctrlPgn: {} });
-    (response?.status) && dispatch({ type: 'list', field: 'annotations', value: (response?.list || []) });
-
-    dispatch({ type: 'loading', field: 'main', value: false });
-  }, [dispatch]);
-  useEffect(() => getAnnotations(code), [code, getAnnotations]);
-
-  const scrollDialogToBottom = (event) => {
-    if (!dialogRef.current) return;
-    dialogRef.current.children[2].children[0].scroll({ top: dialogRef.current.offsetHeight, behavior: 'smooth' });
-  };
-
-  const contextValues = useMemo(() => ({ 
-    ...state, 
-    code, 
-    pgTitle, 
-    loggedUser, 
-    dialogRef, 
-    annotationParameters, 
-    openAnnotationParameters, 
-    scrollDialogToBottom, 
-    handleDialogClose, 
-    dispatch 
-  }), [code, pgTitle, annotationParameters, openAnnotationParameters, loggedUser, state, handleDialogClose, dispatch]);
-
-
-  return <AnnotationsContext.Provider value={contextValues}>
-    <Dialog {...{ open }} maxWidth='lg' disableRestoreFocus disableEnforceFocus ref={dialogRef} onClose={handleDialogClose}>
-      <div className={classes.dialogContainer}>
-        <div className={classes.dialogHeader}>
-          <Typography variant='h6'>Anotações {pgTitle}</Typography>
-          <div className={classes.dialogHeaderActions}>
-            <IconButton onClick={handleDialogClose}>
-              <CloseIcon />
-            </IconButton>
-            {(loading.main) && <CircularProgress color='secondary' size={34} className={classes.dialogHeaderLoading} />}
-          </div>
-        </div>
-        {(!!list.annotations.length) && <AnnotationsList />}
-        <Input />
-      </div>
-    </Dialog>
-  </AnnotationsContext.Provider>;
-};
-
-
-export default Annotations;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { BsCheck2All } from 'react-icons/bs';
-import { IoMdGlobe } from 'react-icons/io';
-import { IoArrowUndoSharp, IoClose, IoLockClosed } from 'react-icons/io5';
-
-
-export const EXTRA_SMALL_SIZE = 5;
-export const SMALL_SIZE = (EXTRA_SMALL_SIZE * 2);
-export const MEDIUM_SIZE = (SMALL_SIZE * 2);
-export const LARGE_SIZE = (MEDIUM_SIZE * 2);
-export const AVATAR_SIZE = 33;
-
-export const UNIMED_GREEN_COLOR = '#00995D';
-export const LIGHT_GREY_COLOR = type => `rgba(${(type === 'light') ? '0, 0, 0' : '255, 255, 255'}, .12)`;
-export const MEDIUM_GREY_COLOR = type => `rgba(${(type === 'light') ? '0, 0, 0' : '255, 255, 255'}, .6)`;
-
-export const ViewedIcon = props => <BsCheck2All {...props} />;
-export const AnswerIcon = props => <IoArrowUndoSharp {...props} />;
-export const CloseIcon = props => <IoClose {...props} />;
-
-export const privacyTypeOptions = [
-  ['0', 'Público', IoMdGlobe], 
-  ['1', 'Privado', IoLockClosed]
-];
-
-export const ELLIPSIS_TEXT_STYLE = { 
-  overflow: 'hidden', 
-  whiteSpace: 'nowrap', 
-  textOverflow: 'ellipsis' 
-};