argous 1.2.132 → 1.2.136

package/lib/components/Compartilhar/Compartilhar.js

@@ -0,0 +1,314 @@
+import { enviaCompartilhamentoDePrograma, searchUsers } from '../../api/index';
+import { formataNome, setError } from '../../utils/index';
+import { IconButton, Grid, TextField, Button, InputAdornment, Typography, Collapse, Chip, makeStyles, Paper } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
+import React, { useState, useEffect, forwardRef } from 'react';
+import { MdLink } from 'react-icons/md';
+
+const useStyles = makeStyles({
+  fundoCompartilhar: {
+    width: '500px',
+    padding: '20px',
+    marginTop: 5,
+  }
+});
+
+const Compartilhar = forwardRef((props, ref) => {
+
+  const [metodoCompartilhar, setMetodoCompartilhar] = useState('');
+  const [mensagemEmail, setMensagemEmail] = useState('');
+  const [email, setEmail] = useState([]);
+  const [stringEmail, setStringEmail] = useState('');
+
+  const [notificacao, setNotificacao] = useState([]);
+  const [stringNotificacao, setStringNotificacao] = useState('');
+
+  const [mensagemNotificação, setMensagemNotificacao] = useState('');
+  const link = props.linkCompartilhamento;
+
+  const [copiado, setCopiado] = useState(false);
+  const [enviado, setEnviado] = useState(false);
+
+  const [options, setOptions] = useState([]);
+
+  const erroVazio = { email: '', stringEmail: '', notificacao: '', stringNotificacao: '' };
+  const [erro, setErro] = useState(erroVazio);
+
+  const classes = useStyles();
+
+  function copiarParaAreaDeTransferencia() {
+    let link = document.getElementById('link');
+    link.select();
+    link.setSelectionRange(0, 99999);
+    document.execCommand('copy');
+    setCopiado(true);
+    setTimeout(() => {
+      setCopiado(false);
+    }, 3500);
+  }
+
+  useEffect(() => {
+    if (stringEmail.length < 3 && stringNotificacao.length < 3) return;
+    (async () => {
+      const res = await searchUsers({ dsFiltroNome: metodoCompartilhar === 'email' ? stringEmail : stringNotificacao });
+      if (res.status) {
+        setOptions(res.users);
+      } else setError(res.dsErro);
+    })();
+  }, [stringEmail, stringNotificacao, metodoCompartilhar]);
+
+  async function enviaCompartilhamento(tpComp) {
+    let temp = false;
+    if (tpComp === 'E') {
+      if (email.length === 0 && mensagemEmail === '') {
+        setErro({ ...erro, email: 'Campo Obrigatório', stringEmail: 'Campo Obrigatório' });
+        temp = true;
+      } else {
+        if (email.length === 0) {
+          setErro({ ...erro, email: 'Campo Obrigatório' });
+          temp = true;
+        }
+        if (mensagemEmail === '') {
+          setErro({ ...erro, stringEmail: 'Campo Obrigatório' });
+          temp = true;
+        }
+      }
+    } else if (notificacao.length === 0 && mensagemNotificação === '') {
+      setErro({ ...erro, notificacao: 'Campo Obrigatório', stringNotificacao: 'Campo Obrigatório' });
+      temp = true;
+    } else if (notificacao.length === 0) {
+      setErro({ ...erro, notificacao: 'Campo Obrigatório' });
+      temp = true;
+    } else if (mensagemNotificação === '') {
+      setErro({ ...erro, stringNotificacao: 'Campo Obrigatório' });
+      temp = true;
+    }
+
+    if (temp) return;
+
+    const not = notificacao.map(item => item[0]);
+    const mail = email.map(item => item[0]);
+
+    const dados = {
+      mensagem: mensagemNotificação || mensagemEmail,
+      usuarios: not.length > 0 ? not : mail,
+      tpMensagem: tpComp,
+      link: link
+    };
+    const res = await enviaCompartilhamentoDePrograma(dados);
+    if (res.status) {
+      setNotificacao([]);
+      setEmail([]);
+      setMensagemEmail('');
+      setStringEmail('');
+      setStringNotificacao('');
+      setMensagemNotificacao('');
+      setEnviado(true);
+      setTimeout(() => {
+        setEnviado(false);
+      }, 3500);
+    }
+  }
+
+  return (
+    <Grid innerRef={ref} className={classes.fundoCompartilhar} component={Paper} elevation={2} onClick={e => e.stopPropagation()}>
+      <Grid container spacing={2} style={{ position: 'relative', padding: '6px 12px', display: 'flex' }} justifyContent='center'>
+        <Typography component='h3' style={{ fontSize: '24px', textAlign: 'center', marginTop: '0px' }}>Compartilhar</Typography>
+        <Grid item xs={12} className='row'>
+          <TextField
+            label='Link'
+            value={link}
+            readOnly
+            id='link'
+            fullWidth
+            variant='outlined'
+            margin='dense'
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position='end'>
+                  <IconButton onClick={() => copiarParaAreaDeTransferencia()} title='Copiar Link'>
+                    <MdLink />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }} />
+          <Collapse in={copiado}>
+            <Typography variant='body2' component='div' color='primary'>Link copiado para a área de transferência!</Typography>
+          </Collapse>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center' }}>
+          <IconButton size='medium' title='Enviar link por notificação' onClick={() => {
+            setErro(erroVazio); setEmail([]); setStringEmail(''); setMetodoCompartilhar(metodoCompartilhar === 'notificacao' ? '' : 'notificacao'); 
+          }} >
+            <Typography component='span' variant='body1' className='icon-linecons-megaphone icon-lg'
+              style={{
+                fontSize: '45px',
+                width: '75px',
+                height: '75px',
+                color: 'white',
+                background: '#009C6A',
+                borderRadius: '50px',
+                border: '5px solid #33b088',
+              }}
+            />
+          </IconButton>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center' }}>
+          <IconButton size='medium' title='Enviar link por email' onClick={() => {
+            setErro(erroVazio); setNotificacao([]); setStringNotificacao(''); setMetodoCompartilhar(metodoCompartilhar === 'email' ? '' : 'email'); 
+          }} >
+            <Typography component='span' variant='body1' className='glyph-icon icon-envelope icon-lg'
+              style={{
+                fontSize: '45px',
+                width: '75px',
+                height: '75px',
+                color: 'white',
+                background: '#009C6A',
+                borderRadius: '50px',
+                border: '5px solid #33b088',
+              }}
+            />
+          </IconButton>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}>
+          <Typography component='label' variant='body1'>Notificação</Typography>
+        </Grid>
+        <Grid item xs={6} style={{ display: 'flex', justifyContent: 'center', paddingTop: 0, marginBottom: '5px' }}>
+          <Typography component='label' variant='body1'>Email</Typography>
+        </Grid>
+        <Grid item xs={12} style={{ padding: 0 }}>
+          <Collapse in={metodoCompartilhar === 'notificacao'}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <Autocomplete
+                  multiple
+                  value={notificacao}
+                  options={options}
+                  getOptionLabel={option => formataNome(option[1])}
+                  size='small'
+                  limitTags={1}
+                  onChange={(_e, value) => setNotificacao(value)}
+                  disableCloseOnSelect
+                  disablePortal
+                  noOptionsText={stringEmail.length < 3 && stringNotificacao.length < 3 ? 'Digite para começar a pesquisar' : 'Não Encontrado'}
+                  renderTags={(value, getTagProps) => (
+                    value.map((option, index) => (
+                      <Chip
+                        variant='outlined'
+                        label={option[1] || option}
+                        {...getTagProps({ index })} />
+                    ))
+                  )}
+                  renderInput={params => (
+                    <TextField
+                      variant='outlined'
+                      margin='dense'
+                      label='Contatos:'
+                      onChange={e => setStringNotificacao(e.target.value)}
+                      placeholder={notificacao.length === 0 ? 'Selecionar' : undefined}
+                      InputLabelProps={{ shrink: true }}
+                      error={!!erro.notificacao}
+                      helperText={erro.notificacao}
+                      {...params}
+                    />
+                  )}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  variant='outlined'
+                  margin='dense'
+                  label='Mensagem:'
+                  placeholder='Mensagem da Notificação'
+                  fullWidth
+                  value={mensagemNotificação}
+                  onChange={e => setMensagemNotificacao(e.target.value)}
+                  error={!!erro.stringNotificacao}
+                  helperText={erro.stringNotificacao} />
+              </Grid>
+              <Grid container style={{ display: 'flex ' }} direction='row-reverse'>
+                <Grid item xs={2}>
+                  <Button color='primary' variant='contained' onClick={() => enviaCompartilhamento('N')}>Enviar</Button>
+                </Grid>
+                <Grid item xs={10}>
+                  <Collapse in={enviado}>
+                    <Typography variant='body2' component='div' color='primary'>Link enviado com sucesso!</Typography>
+                  </Collapse>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Collapse>
+        </Grid>
+        <Grid item xs={12} style={{ padding: 0 }}>
+          <Collapse in={metodoCompartilhar === 'email'}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <Autocomplete
+                  multiple
+                  freeSolo
+                  value={email}
+                  options={options}
+                  getOptionLabel={option => option[2]}
+                  size='small'
+                  limitTags={1}
+                  onChange={(_e, value) => setEmail(value)}
+                  disableCloseOnSelect
+                  disablePortal
+                  noOptionsText={stringEmail.length < 3 && stringNotificacao.length < 3 ? 'Digite para começar a pesquisar' : 'Não Encontrado'}
+                  renderTags={(value, getTagProps) => (
+                    value.map((option, index) => (
+                      <Chip
+                        variant='outlined'
+                        label={option[2] || option}
+                        {...getTagProps({ index })} />
+                    ))
+                  )}
+                  renderInput={params => (
+                    <TextField
+                      variant='outlined'
+                      margin='dense'
+                      label='Emails:'
+                      onChange={e => setStringEmail(e.target.value)}
+                      placeholder={email.length === 0 ? 'Selecionar' : undefined}
+                      InputLabelProps={{ shrink: true }}
+                      error={!!erro.email}
+                      helperText={erro.email}
+                      {...params}
+                    />
+                  )}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  multiline
+                  label='Mensagem:'
+                  rows='2'
+                  margin='dense'
+                  variant='outlined'
+                  fullWidth
+                  placeholder='Mensagem do Email'
+                  value={mensagemEmail}
+                  onChange={e => setMensagemEmail(e.target.value)}
+                  style={{ resize: 'vertical', height: '50px' }}
+                  error={!!erro.stringEmail}
+                  helperText={erro.stringEmail} />
+              </Grid>
+              <Grid container style={{ display: 'flex' }} direction='row-reverse'>
+                <Grid item xs={2}>
+                  <Button color='primary' variant='contained' onClick={() => enviaCompartilhamento('E')}>Enviar</Button>
+                </Grid>
+                <Grid item xs={10}>
+                  <Collapse in={enviado}>
+                    <Typography variant='body2' component='div' color='primary'>Link enviado com sucesso!</Typography>
+                  </Collapse>
+                </Grid>
+              </Grid>
+            </Grid>
+          </Collapse>
+        </Grid>
+      </Grid>
+    </Grid >
+  );
+});
+
+export default Compartilhar;

package/lib/components/Compartilhar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Compartilhar';
+export * from './Compartilhar'; 

package/lib/components/Compartilhar/index.js

@@ -0,0 +1 @@
+export { default } from './Compartilhar';

package/lib/components/ConfirmModal/BasicModal.tsx

@@ -0,0 +1,63 @@
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, DialogProps } from '@material-ui/core';
+import React from 'react';
+
+export interface BasicModalProps {
+  /**
+   * Label no botao de confirmar
+   */
+  okLabel: React.ReactNode,
+  /**
+   * Label no botao de cancelar
+   */
+  cancelLabel: React.ReactNode,
+  /**
+   * Titulo do modal
+   */
+  title: React.ReactNode,
+  /**
+   * Descricao do modal
+   */
+  description: React.ReactNode,
+  /**
+   * Props repassados ao componente dialog
+   */
+  dialogProps: Omit<DialogProps, 'open'>,
+  /**
+   * @ignore
+   */
+  proceed: Function,
+  /**
+   * @ignore
+   */
+  cancel: Function,
+  /**
+   * @ignore
+   */
+  open: boolean,
+}
+
+const BasicModal = ({
+  okLabel = 'Ok',
+  cancelLabel = 'Cancelar',
+  title = '',
+  description = '',
+  open,
+  proceed,
+  dialogProps,
+  cancel
+}: BasicModalProps) => {
+  return (
+    <Dialog open={open} onClose={() => cancel(false)} {...dialogProps}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText component='div'>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant='contained' color='secondary' onClick={() => proceed(false)}>{cancelLabel}</Button>
+        <Button variant='contained' color='primary' onClick={() => proceed(true)}>{okLabel}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default BasicModal;

package/lib/components/ConfirmModal/ModalProvider.tsx

@@ -0,0 +1,81 @@
+import { CreateModalType, ModalProviderContextProps } from '.';
+import BasicModal from './BasicModal';
+import { setAnotherProgramField } from '../../fieldsRedux';
+import { ArgousType } from '../../types';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { connect } from 'react-redux';
+import { useImmer } from 'use-immer';
+
+// @ts-ignore
+export const ModalProviderContext = createContext<ModalProviderContextProps>();
+
+const ModalProvider = ({ children, argousSystem }: any) => {
+
+  const [modals, setCurrentModal] = useImmer<unknown[]>([]);
+
+  const close = useCallback((unmountDelay: number, index: number) => () => {
+    setTimeout(() => setCurrentModal(modais => void(modais.splice(index, 1))), unmountDelay);
+  }, [setCurrentModal]);
+
+  const createModal = useCallback<CreateModalType>((Component, unmountDelay = 0) => (props) => {
+    const promise = new Promise((resolve, reject) => {
+      setCurrentModal(modais => void(modais.push(<ModalWrapper Component={Component} close={close(unmountDelay, modals.length)} resolve={resolve} reject={reject} {...props} />)));
+    });
+
+    return promise.then((result) => {
+      close(unmountDelay, modals.length);
+      return result;
+    }, (result) => {
+      close(unmountDelay, modals.length);
+      return Promise.reject(result);
+    });
+  }, [close, modals.length, setCurrentModal]);
+
+  const openModal = useMemo(() => argousSystem?.openModal?.value, [argousSystem]); 
+
+  useEffect(() => {
+    if (!openModal) return;
+    const { reject, resolve, ...props } = openModal;
+    createModal(BasicModal)(props).then(resolve as any, reject);
+    setAnotherProgramField('openModal', undefined, 'argousSystem');
+    //eslint-disable-next-line
+  }, [openModal]);
+
+  const context = useMemo(() => ({ createModal }), [createModal]);
+
+  return (
+    <ModalProviderContext.Provider value={context}>
+      {children}
+      {modals.map(Modal => Modal)}
+    </ModalProviderContext.Provider>
+  );
+};
+
+const mapStateToProps = (state: { argous: ArgousType }) => ({
+  argousSystem: state.argous.fields.argousSystem, 
+});
+
+export default connect(mapStateToProps)(ModalProvider);
+
+const ModalWrapper = ({ Component, reject, resolve, close, ...props }) => {
+  const [show, setShow] = useState(true);
+
+  const cancel = useCallback((reject: (reason?: any) => void) => <V extends unknown>(value: V) => {
+    setShow(false);
+    reject(value);
+    close();
+  }, [close]);
+
+  const proceed = useCallback((resolve: (value: unknown) => void) => <V extends unknown>(value: V) => {
+    setShow(false);
+    resolve(value);
+    close();
+  }, [close]);
+
+  return <Component
+    cancel={cancel(reject)}
+    proceed={proceed(resolve)}
+    open={show}
+    {...props}
+  />;
+};

package/lib/components/ConfirmModal/WrapperModal.tsx

@@ -0,0 +1,33 @@
+import Button from '../MaterialButton/MaterialButton';
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from '@material-ui/core';
+import React from 'react';
+
+export interface WrapperModalProps {
+  okLabel: React.ReactNode,
+  cancelLabel: React.ReactNode,
+  title: React.ReactNode,
+  dialogProps: Omit<DialogProps, 'open'>,
+  /**
+   * @ignore
+   */
+  proceed: Function,
+  /**
+   * @ignore
+   */
+  open: boolean,
+}
+
+const WrapperModal = (Component: (props: any) => JSX.Element) => ({ proceed, open, title, cancelLabel = 'Cancelar', okLabel = 'Ok', dialogProps, ...props }: WrapperModalProps) => {
+  return <Dialog open={open} onClose={() => proceed(false)} {...dialogProps}>
+    {title && <DialogTitle>{title}</DialogTitle>}
+    <DialogContent>
+      <Component {...props}/>
+    </DialogContent>
+    <DialogActions>
+      {cancelLabel && <Button variant='contained' color='secondary' onClick={() => proceed(false)}>{cancelLabel}</Button>}
+      {okLabel && <Button variant='contained' color='primary' onClick={() => proceed(true)}>{okLabel}</Button>}
+    </DialogActions>
+  </Dialog>;
+};
+
+export default WrapperModal;

package/lib/components/ConfirmModal/index.d.ts

@@ -0,0 +1,20 @@
+export interface BasicComponentProps {
+  cancel: (value: unknown) => void,
+  proceed: (value: unknown) => void,
+  open: boolean
+}
+
+export type CreateModalType = <P>(Component: (props: P & BasicComponentProps) => JSX.Element, unmountDelay?: number) => (props?: Omit<P, keyof BasicComponentProps>) => Promise<unknown>
+
+export interface ModalProviderContextProps {
+  createModal: CreateModalType
+}
+
+export { default } from './ModalProvider';
+export * from './ModalProvider';
+
+export { default as BasicModal } from './BasicModal';
+export * from './BasicModal';
+
+export { default as WrapperModal } from './WrapperModal';
+export * from './WrapperModal';

package/lib/components/ConfirmModal/index.js

@@ -0,0 +1,8 @@
+export { default } from './ModalProvider';
+export * from './ModalProvider';
+
+export { default as BasicModal } from './BasicModal';
+export * from './BasicModal';
+
+export { default as WrapperModal } from './WrapperModal';
+export * from './WrapperModal';

package/lib/components/DropArea/DropArea.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export interface DropAreaProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+  /**
+   * Função chamada ao receber arquivo
+   * 
+   * @param arquivo - Arquivo
+   * 
+   * @returns {void} Sem Retorno
+   */
+  onChange?: (arquivo: File) => void
+}
+
+/**
+ * Componente para drop de arquivos
+ * 
+ * Repassa o arquivo dropado diretamente para um file preparer se tiver o mesmo como filho
+ */
+declare function DropArea(props: DropAreaProps): JSX.Element
+
+export default DropArea;

package/lib/components/DropArea/DropArea.js

@@ -0,0 +1,90 @@
+import { getDroppedOrSelectedFiles } from './Html5FileSelector';
+import { FilePreparer } from '../';
+import { Box, CircularProgress } from '@material-ui/core';
+import React, { useState, Children, isValidElement, cloneElement, forwardRef } from 'react';
+import { MdFileUpload } from 'react-icons/md';
+
+const DropArea = ({ children, onChange, style, ...props }, ref) => {
+  
+  const [abrir, setAbrir] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  /** @param {React.DragEvent<HTMLDivElement>} e */
+  const dropArquivo = async e => {
+    e.preventDefault();
+    setLoading(true);
+
+    const finalArray = await getDroppedOrSelectedFiles(e);
+
+    // console.log(temp, temp.reduce((acc, { fileObject, fullPath }) => {
+    //   const fileName = fullPath.match(/\/([^\/]*)$/)?.at(1);
+    //   const objectPath = fullPath.replace(fileName, '').substring(1).slice(0, -1);
+    //   return set(acc, objectPath.length ? [...objectPath.split('/'), fileName] : fileName, fileObject)
+    // }, {}));
+
+    // const length = e.dataTransfer.items.length, 
+    //     i = 0, itens = e.dataTransfer.items, finalArray = [];
+
+    // for (i; i < length; i++) {
+    //   const item = itens[i];
+    //   if (item.kind === 'file') finalArray.push(item.getAsFile())
+    // }
+
+    // onChange && onChange(finalArray)
+    // if (ref?.current) ref.current.preparaArquivo(finalArray)
+
+    onChange && onChange(finalArray);
+    if (ref?.current) ref.current.preparaArquivo(finalArray);
+
+    setLoading(false);
+    setAbrir(false);
+  };
+
+  return (
+    <div onDragEnter={() => setAbrir(true)} style={{ position: 'relative', ...style }} {...props}>
+      {abrir && (!ref?.current || (ref.current && !ref.current.loading)) && (
+        <div onDragLeave={() => setAbrir(false)} onDrop={dropArquivo} onDragOver={e => e.preventDefault() }
+          style={{ 
+            position: 'absolute', 
+            border: '1px dashed', 
+            background: 'rgba(0,0,0,0.5)', 
+            zIndex: 5, width: '100%', height: '100%'
+          }}>
+          {loading ? 
+            <Box display='flex' justifyContent='center' alignItems='center' height='100%'>
+              <CircularProgress disableShrink/>
+            </Box>
+            :
+            <MdFileUpload style={{ width: '100%', height: '100%' }}/>
+          }
+        </div>
+      )} 
+      {deepMap(children, (filho) => filho.type === FilePreparer ? cloneElement(filho, { ...filho.props, ref }) : filho)}
+    </div>
+  );
+};
+
+export default forwardRef(DropArea);
+
+
+const deepMap = (children, deepMapFn) => {
+  return Children.toArray(children).map((child, index, mapChildren) => {
+    if (isValidElement(child) && hasComplexChildren(child)) {
+      return deepMapFn(
+        cloneElement(child, {
+          ...child.props,
+          children: deepMap(child.props.children, deepMapFn),
+        }),
+      );
+    }
+    return deepMapFn(child, index, mapChildren);
+  },
+  );
+};
+
+const hasComplexChildren = (element) =>
+  isValidElement(element) &&
+  hasChildren(element) &&
+  Children.toArray(element.props.children).reduce((response, child) => response || isValidElement(child), false);
+
+const hasChildren = (element) => isValidElement(element) && element.props.children;