argous 1.2.222 → 1.2.224

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

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

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

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

@@ -0,0 +1,30 @@
+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' 
+};

package/lib/components/Programa/Programa.d.ts

@@ -23,7 +23,9 @@ export interface ProgramaProps extends BoxProps {
   bfHabFavorito: boolean,
   bfTitulo: string, 
   linkCompartilhamento: string,
-  className: string
+  className: string,
+  annotationParameters?: object,
+  openAnnotationParameters?: (event: Event, parameters: object) => void
 }
 
 declare function Programa(props: ProgramaProps): JSX.Element

package/lib/components/Programa/Programa.js

@@ -1,13 +1,21 @@
 import BarraFerramentas from './../BarraFerramentas';
+import Annotations from './Annotations';
 import PageCodeEasterEgg from './PageCodeEasterEgg';
 import * as argous from '../../actions';
 import { getProgram, toggleFavorite } from '../../api';
+import { useModal } from '../../utils';
 import { Box, CircularProgress, Paper, Typography, useTheme } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { FaExclamationTriangle } from 'react-icons/fa';
 import { connect } from 'react-redux';
 
+
+const initialStateToolbarLoading = { 
+  annotations: false 
+};
+
+
 function Programa({
   code,
   children,
@@ -38,14 +46,20 @@ function Programa({
   rightSidebar,
   setRightSidebar,
   setAddProgramWidget,
+  annotationParameters = {},
+  openAnnotationParameters = () => '',
   fields: _,
   ...props
 }) {
+
+  const theme = useTheme();
+  const { createModal } = useModal();
+  const annotationsModal = createModal(Annotations);
   const [programa, setPrograma] = useState({});
   const [favoriteAnimationInsert, setFavoriteAnimationInsert] = useState(false);
   const [favoriteAnimationRemove, setFavoriteAnimationRemove] = useState(false);
+  const [toolbarLoading/*, setToolbarLoading*/] = useState(initialStateToolbarLoading);
 
-  const theme = useTheme();
 
   useEffect(() => {
     (async () => {
@@ -53,13 +67,15 @@ function Programa({
       const res = await getProgram(code);
       // TODO prever aqui tempo de bloqueio diferenciado
       if (res.pgmOk) setPrograma({ ...res.pgmDd, loaded: true, habWidget: res.habWidget });
-      else setPrograma(p => ({ ...p, dsErro: res.dsErro, loaded: true }));   
+      else setPrograma(p => ({ ...p, dsErro: res.dsErro, loaded: true }));
       programDidMount && programDidMount();
     })();
     return () => setCurrentProgram(undefined);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const openAnnotations = async (event) => await annotationsModal({ ...programa, code, annotationParameters, openAnnotationParameters });
+
   const addFavorite = () => {
     const path = window.location.pathname;
     toggleFavorite({ link: path }).then(res => {
@@ -87,7 +103,7 @@ function Programa({
     return existIn.length > 0 ? 'active' : '';
   };
 
-  let { pgHint, pgTitle, pnlTitle, dsErro, loaded } = programa;
+  let { pgHint, pgTitle, pnlTitle, dsErro, loaded, habWidget, snAnotacaoPrograma } = programa;
 
   if (title !== undefined) pgTitle = title;
   if (hint !== undefined) pgHint = hint;
@@ -125,8 +141,7 @@ function Programa({
           favoriteAnimationRemove={favoriteAnimationRemove}
           threads={threads}
           currentProgram={code}
-          habWidget={programa?.habWidget}
-          {...{ addWidget }}
+          {...{ addWidget, habWidget, snAnotacaoPrograma, openAnnotations, toolbarLoading }}
         />
         {dsErro ? (
           <Box textAlign='center' >

package/lib/components/index.d.ts

@@ -169,4 +169,6 @@ export { default as Carousel } from './Carousel';
 export * from './Carousel';
 
 export { default as Cam } from './Cam';
-export * from './Cam';
+export * from './Cam';
+
+export * from './Document';

package/lib/components/index.js

@@ -167,4 +167,6 @@ export { default as Carousel } from './Carousel';
 export * from './Carousel';
 
 export { default as Cam } from './Cam';
-export * from './Cam';
+export * from './Cam';
+
+export * from './Document';

package/lib/utils/index.ts

@@ -1,3 +1,4 @@
+import { serverAction } from './api';
 import { getStore } from './store';
 import { getFileFromLink, headers } from '../api';
 import { ModalProviderContext } from '../components/ConfirmModal/ModalProvider';
@@ -6,8 +7,10 @@ import { ActionType, ArgousType } from '../types';
 import { useTheme } from '@material-ui/core';
 import * as colors from '@material-ui/core/colors';
 import { ChartOptions } from 'chart.js';
+import DomToImage from 'dom-to-image';
 import { BasicModalProps } from 'lib/components';
 import { isNumber } from 'lodash';
+import moment from 'moment';
 import React, { useRef, useEffect, useContext, useState } from 'react';
 
 
@@ -386,4 +389,113 @@ export function cpfTest(cpf: (string|number)) {
   if (rest !== parseInt(cpf.substring(10, 11))) return false;
 
   return true;
+}
+
+interface PrintScreenParameters { 
+  /**
+   * Event
+   */
+  event?: Event, 
+  /**
+   * Element id
+   */
+  id: string, 
+  /**
+   * Auto download
+   */
+  download: boolean 
+}
+export const printScreen = async ({ event, id = 'root', download = false }: PrintScreenParameters): Promise<object> => {
+  let status = false;
+  let file;
+  let linkElement;
+
+  const element = document.getElementById(id);
+  if (element) {
+
+    const dataUrl = await DomToImage.toPng(element);
+    if (dataUrl) {
+      linkElement = document.createElement('a');
+      linkElement.download = `print_screen_${moment(new Date()).format('DD-MM-YYYY_HH:mm:ss')}.png`;
+      linkElement.href = dataUrl;
+
+      const blob = dataUrlToBlob(dataUrl);
+      if (blob) file = new File([blob], linkElement.download, { type: blob.type });
+    }
+  }
+
+  (linkElement && file) && (status = true);
+  (linkElement && download) && linkElement.click();
+
+  return { event, status, file, element, link: linkElement };
+};
+
+interface GeraLogInterface { 
+  (
+    /**
+     * Id do documento
+     */
+    idDocumento: number, 
+    /**
+     * Descrição
+     */
+    descricao: string, 
+    /**
+     * Tipo de ação
+     * 
+     * 1 - Upload
+     * 2 - Alteração
+     * 3 - Consulta
+     */
+    tpAcao: string, 
+    /**
+     * Token do sistema
+     */
+    tokenSistema?: string
+  ): Promise<void> 
+}
+export const geraLog: GeraLogInterface = async (idDocumento, descricao, tpAcao, tokenSistema) => {
+  if (!getStore()?.getState()?.argous?.usuarioLogado?.idUsuario) return;
+  await serverAction('geraLog', { idDocumento, descricao, tpAcao }, 'CtrlDocumentos', false, tokenSistema);
+};
+
+export const printUrl = async (url: string): Promise<void> => {
+  const res = await fetch(url);
+  const file = await res.blob();
+  let iframe = document.createElement('iframe');
+  document.body.appendChild(iframe);
+  iframe.style.display = 'none';
+  iframe.src = window.URL.createObjectURL(file);
+  iframe.onload = () => {
+    setTimeout(() => {
+      iframe.focus();
+      iframe?.contentWindow?.print();
+    }, 1);
+  };
+};
+
+declare global {
+  interface Window {
+    clipboardData: any;
+  }
+}
+export function stopPrntScr(e: KeyboardEvent) {
+  if (e.key === 'PrintScreen') {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      window.clipboardData.setData('text', 'Access Restricted');
+    } catch (err) {}
+  }
+  let inpFld = document.createElement('input');
+  inpFld.setAttribute('value', '.');
+  inpFld.setAttribute('width', '0');
+  inpFld.style.height = '0px';
+  inpFld.style.width = '0px';
+  inpFld.style.border = '0px';
+  document.body.appendChild(inpFld);
+  inpFld.select();
+  document.execCommand('copy');
+  inpFld.remove();
+  return false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.222",
+  "version": "1.2.224",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",
@@ -37,6 +37,7 @@
     "chart.js": "^2.9.4",
     "clsx": "^1.1.1",
     "date-fns": "^2.19.0",
+    "dom-to-image": "^2.6.0",
     "eslint": "^7.22.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.4.0",
@@ -76,6 +77,7 @@
     "chart.js": "*",
     "clsx": "*",
     "date-fns": "*",
+    "dom-to-image": "*",
     "immer": "*",
     "lodash": "*",
     "moment": "*",