argous 1.2.132 → 1.2.136

package/lib/components/BarraFerramentas/BarraFerramentas.js

@@ -0,0 +1,277 @@
+import { Compartilhar } from '..';
+import ThreadLog from '../../components/ThreadLog';
+import { usePrevious } from '../../utils';
+import { Box, ClickAwayListener, Collapse, Divider, IconButton, makeStyles, MenuItem, MenuList, Paper, Popper, Toolbar, Tooltip, Typography } from '@material-ui/core';
+import clsx from 'clsx';
+import { isArray, isNumber, isString, isEqual, isFunction } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import { MdShare, MdFormatListBulleted, MdArrowBack, MdEdit, MdDelete, MdSave, MdKeyboardArrowRight, MdFirstPage, MdKeyboardArrowLeft, MdLastPage } from 'react-icons/md';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: '-11px',
+    marginBottom: 0,
+    width: 'calc(100% + 22px)',
+    zIndex: 0,
+    paddingRight: theme.spacing(2), 
+    paddingLeft: theme.spacing(2) 
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  menuSelected: {
+    backgroundColor: theme.palette.action.selected
+  },
+  title: {
+    flexGrow: ({ habNavegador }) => habNavegador ? 0 : 1,
+  },
+  navigator: {
+    flexGrow: 1,
+    marginLeft: theme.spacing(2)
+  }
+}));
+
+function BarraFerramentas ({      
+  titulo,
+  abas = [],
+  ferramentas = [],
+  habFavorito = true,
+  habCrud = false,
+  habNavegador = false,
+  checkIfIsFavorite,
+  addFavorite,
+  favoriteAnimationInsert,
+  favoriteAnimationRemove,
+  nmFuncaoVoltar,
+  nmCompartilhar,
+  linkCompartilhamento = '',
+  threads,
+  currentProgram,
+  nmSalva, 
+  nmExclui, 
+  executaFuncao = prm => void(prm),
+}) {
+  const classes = useStyles({ habNavegador });
+  const anchorMenu = useRef(null);
+  const anchorCompartilhar = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [abaAtual, setAbaAtual] = useState(undefined);
+  const [habEditar, setHabEditar] = useState(true);
+  const [habSalvar, setHabSalvar] = useState(false);
+  const [habExcluir, setHabExcluir] = useState(false);
+  const [openCompartilhar, setOpenCompartilhar] = useState(false);
+
+  useEffect(() => {
+    if (anchorMenu.current) anchorMenu.current.focus();
+  }, [open]);
+
+  const previousAbas = usePrevious(abas);
+  useEffect(() => {
+    if (isEqual(abas, previousAbas)) return;
+    if (!abas.length) setAbaAtual(undefined);
+    else for (let i = 0; i < abas?.length; i++) {
+      const aba = abas[i];
+      if (aba[1] === 'active') {
+        setAbaAtual(aba[0]);
+        break;
+      }
+    }
+  }, [abas, previousAbas]);
+
+  const toggleAbas = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const toggleCompartilhar = e => {
+    e.stopPropagation();
+    setOpenCompartilhar(o => !o);
+    executaFuncao(nmCompartilhar);
+  };
+
+  const closeCompartilhar = event => {
+    if (anchorCompartilhar.current && anchorCompartilhar?.current?.contains(event.target)) return;
+    setOpenCompartilhar(false);
+  };
+
+  const selecionaAba = (index, item, alias) => event => {
+    if (anchorMenu.current && anchorMenu?.current?.contains(event.target)) return;
+    if (isString(item)) setAbaAtual(item);
+    if (isNumber(index)) executaFuncao(alias || `T${index}`);
+    setOpen(false);
+  };
+
+  function handleListKeyDown(event) {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  const getFerramentas = (item, index) => {
+    return (
+      <Tooltip key={index} title={item[1] || ''}>
+        <IconButton onClick={() => isFunction(item[2]) ? item[2]() : executaFuncao(item[2] || 'F' + index)}>
+          {typeof item[0] === 'string' ? (
+            <i style={{ color: '#999' }} className={item[0]}></i>
+          ) : (
+            item[0]
+          )}
+        </IconButton>
+      </Tooltip>
+    );
+  };
+
+  return <>
+    <Toolbar className={classes.root} /*disableGutters*/ variant='dense'>
+      {(isArray(abas) && abas.length > 0) && (
+        <IconButton id='botaoAbasBarraFerramentas' ref={anchorMenu} onClick={toggleAbas} className={classes.menuButton}>
+          <MdFormatListBulleted />
+        </IconButton>       
+      )}
+      <Popper open={open} anchorEl={anchorMenu.current} role={undefined} transition keepMounted style={{ zIndex: 2, marginLeft: 10 }}>
+        {({ TransitionProps }) => (
+          <Collapse in={TransitionProps.in} timeout={100}>
+            <Paper style={{ maxHeight: '80vh', overflowY: 'auto' }}>
+              <ClickAwayListener onClickAway={selecionaAba()}>
+                <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
+                  {isArray(abas) && abas.map((item, key) => (
+                    <MenuItem className={clsx({ [classes.menuSelected]: abaAtual === item[0] })} key={key} onClick={selecionaAba(key, item[0], item[2])}>{item[0]}</MenuItem>
+                  ))}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Collapse>
+        )}
+      </Popper>
+      <Typography component='div' variant='h6' className={classes.title}>
+        {abaAtual ? (
+          <Typography variant='subtitle1'>{abaAtual} <Typography variant='caption'>( {titulo} )</Typography></Typography> 
+        ) : (
+          <Typography variant='subtitle1'>{titulo}</Typography>
+        )}
+      </Typography>
+
+      {habNavegador && (
+        <Box className={classes.navigator}>
+          <Tooltip title='Primeiro registro'>
+            <IconButton size='small' onClick={() => executaFuncao('NF')}>
+              <MdFirstPage />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='Registro anterior'>
+            <IconButton size='small' onClick={() => executaFuncao('NP')}>
+              <MdKeyboardArrowLeft/>
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='Próximo registro'>
+            <IconButton size='small' onClick={() => executaFuncao('NN')}>
+              <MdKeyboardArrowRight/>
+            </IconButton>
+          </Tooltip>
+          <Tooltip title='Último registro'>
+            <IconButton size='small' onClick={() => executaFuncao('NL')}>
+              <MdLastPage />
+            </IconButton>
+          </Tooltip>
+        </Box>
+      )}
+
+      {isArray(ferramentas) && ferramentas.map(g => g.map((item, index) => getFerramentas(item, index)))}
+
+      {nmFuncaoVoltar && (
+        <Tooltip title='Voltar'>
+          <IconButton onClick={() => executaFuncao(nmFuncaoVoltar)}>
+            <MdArrowBack/>
+          </IconButton>
+        </Tooltip>
+      )}
+      {habCrud && <>
+        {habEditar ? (
+          <Tooltip title='Editar'>
+            <IconButton onClick={() => {
+              setHabEditar(false);
+              setHabSalvar(true);
+              setHabExcluir(true); 
+            }}>
+              <MdEdit/>
+            </IconButton>
+          </Tooltip>
+        ) : (
+          <ClickAwayListener onClickAway={() => {
+            setHabEditar(true);
+            setHabSalvar(false);
+            setHabExcluir(false); 
+          }}>
+            <Box>
+              {habSalvar && (
+                <Tooltip title='Salvar Registro'>
+                  <IconButton onClick={() => executaFuncao(nmSalva)}>
+                    <MdSave/>
+                  </IconButton>
+                </Tooltip>
+              )}
+              {habExcluir && (
+                <Tooltip title='Excluir Registro'>
+                  <IconButton onClick={() => executaFuncao(nmExclui)}>
+                    <MdDelete/>
+                  </IconButton>
+                </Tooltip>
+              )}
+            </Box>
+          </ClickAwayListener>
+        )}
+      </>}
+      {nmCompartilhar && (
+        <Tooltip title='Compartilhar'>
+          <IconButton ref={anchorCompartilhar} onClick={toggleCompartilhar}>
+            <MdShare />
+          </IconButton>
+        </Tooltip>
+      )}
+      <Popper open={openCompartilhar} anchorEl={anchorCompartilhar.current} role={undefined} transition keepMounted style={{ zIndex: 2, marginRight: 10 }}>
+        {({ TransitionProps }) => (
+          <Collapse in={TransitionProps.in} timeout={100}>
+            <ClickAwayListener onClickAway={closeCompartilhar}>
+              <Compartilhar {...{ linkCompartilhamento }} />
+            </ClickAwayListener>
+          </Collapse>
+        )}
+      </Popper>
+      {isArray(threads) && threads.map((thread, key) => <ThreadLog {...{ key, thread, currentProgram }} />)}
+      {habFavorito && checkIfIsFavorite && (
+        <Tooltip title='Favorito'>
+          <IconButton onClick={addFavorite}>
+            <FaStar className={`pg-fav-start ${checkIfIsFavorite()}`}></FaStar>
+            {favoriteAnimationInsert && <FaStar className='pg-fav-start active insertion-star-fav' />}
+            {favoriteAnimationRemove && <FaStar className='pg-fav-start active removing-star-fav' />}
+          </IconButton>
+        </Tooltip>
+      )}
+    </Toolbar>
+    <Divider style={{ marginBottom: 10 }}/>
+  </>;
+}
+
+BarraFerramentas.propTypes = {
+  titulo: PropTypes.string,
+  ferramentas: PropTypes.array,
+  abas: PropTypes.array,
+  executaFuncao: PropTypes.func,
+  nmFuncaoVoltar: PropTypes.string,
+  nmCompartilhar: PropTypes.string,
+  habFavorito: PropTypes.bool,
+  habNavegador: PropTypes.bool,
+  habCrud: PropTypes.bool,
+  nmSalva: PropTypes.string,
+  nmExclui: PropTypes.string,
+  addFavorite: PropTypes.func,
+  favoriteAnimationInsert: PropTypes.bool,
+  favoriteAnimationRemove: PropTypes.bool,
+  linkCompartilhamento: PropTypes.string,
+  threads: PropTypes.array,
+  currentProgram: PropTypes.string,
+};
+
+export default BarraFerramentas;

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

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

package/lib/components/BarraFerramentas/index.js

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

package/lib/components/Button/Button.d.ts

@@ -0,0 +1,8 @@
+export interface ButtonProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function Button(props: ButtonProps): JSX.Element
+
+export default Button;

package/lib/components/Button/Button.js

@@ -0,0 +1,135 @@
+import { getAllFields, fieldUpdatesActionHandler } from '../../fieldsRedux';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+/**
+ * @deprecated 
+ */
+class Button extends Component {
+  onClick = event => {
+    const { onClick } = this.props;
+    const allProgramFields = getAllFields();
+
+    if (onClick) {
+      onClick(allProgramFields, event);
+    }
+
+    this.handleUpdates(allProgramFields);
+  }
+
+  handleUpdates = (allProgramFields, res) => {
+    const {
+      action,
+      dados,
+      receiveUpdates = [],
+      sendUpdates = [],
+      onAllUpdated,
+      onSuccess,
+    } = this.props;
+
+    fieldUpdatesActionHandler(
+      sendUpdates,
+      receiveUpdates,
+      action,
+      dados,
+      onSuccess,
+      onAllUpdated,
+      allProgramFields
+    );
+  }
+
+  resolveFieldValues = fields => {
+    if (fields) {
+      const fieldsValues = {};
+
+      Object.keys(fields).map(key => {
+        fieldsValues[key] = fields[key].value;
+        return null;
+      });
+
+      return fieldsValues;
+    }
+
+    return {};
+  }
+
+  checkButtonProps = () => {
+    const {
+      value,
+      type = 'button',
+      name,
+      autoFocus,
+      disabled,
+      formNoValidate,
+      formTarget,
+      formMethod,
+      formEncType,
+      formAction,
+      form,
+      style,
+      title,
+    } = this.props;
+
+    const className = `${this.props.className ? this.props.className : 'btn'}`;
+
+    const onClick = this.onClick;
+
+    return {
+      className,
+      onClick,
+      value,
+      type,
+      name,
+      autoFocus,
+      disabled,
+      formNoValidate,
+      formTarget,
+      formMethod,
+      formEncType,
+      formAction,
+      form,
+      style,
+      title,
+    };
+  }
+
+  render() {
+    const { checkButtonProps } = this;
+    const { children } = this.props;
+
+    const buttonProps = checkButtonProps();
+
+    return <button {...buttonProps}>{children}</button>;
+  }
+}
+
+Button.propTypes = {
+  receiveUpdates: PropTypes.array,
+  sendUpdates: PropTypes.array,
+  onAllUpdated: PropTypes.func,
+  onSuccess: PropTypes.func,
+  className: PropTypes.string,
+  action: PropTypes.string,
+  dados: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
+  type: PropTypes.oneOf(['submit', 'reset', 'button']),
+  value: PropTypes.string,
+  style: PropTypes.object,
+  onClick: PropTypes.func,
+  name: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  formNoValidate: PropTypes.bool,
+  formTarget: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  formMethod: PropTypes.oneOf(['post', 'get']),
+  formEncType: PropTypes.oneOf([
+    'application/x-www-form-urlencoded',
+    'multipart/form-data',
+    'text/plain',
+  ]),
+  formAction: PropTypes.string,
+  form: PropTypes.string,
+  title: PropTypes.string,
+};
+
+export default Button;

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

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

package/lib/components/Button/index.js

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

package/lib/components/Cabecalho/Cabecalho.d.ts

@@ -0,0 +1,8 @@
+export interface CabecalhoProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function Cabecalho(props: CabecalhoProps): JSX.Element
+
+export default Cabecalho;

package/lib/components/Cabecalho/Cabecalho.js

@@ -0,0 +1,245 @@
+import Input from './../Input';
+import { createField, setField, getField } from '../../fieldsRedux';
+import { serverAction } from '../../utils/api';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { GoTriangleLeft, GoTriangleRight } from 'react-icons/go';
+
+/**
+ * @deprecated 
+ */
+class Cabecalho extends Component {
+  state = {
+    ready: false,
+    focus: false,
+    isNew: true
+  }
+
+  componentDidUpdate() {
+    const { focus, isNew } = this.state;
+
+    if (!focus && !isNew) {
+      const { field, receiveUpdates } = this.props;
+      const { value, state = [] } = getField(field);
+
+      this.saveReceivedUpdatesValuesInState(field, value, state, receiveUpdates);
+    }
+  }
+
+  saveReceivedUpdatesValuesInState = (field, value, state, receiveUpdates) => {
+
+    if (value) {
+
+      for (let ru of receiveUpdates) {
+
+        const receivedValue = getField(ru, 'value');
+
+        let exist = false;
+
+        for (let s of state) {
+
+          if (s[0] === value) {
+            exist = true;
+
+            if (s[1][ru] !== receivedValue) {
+
+              s[1][ru] = receivedValue;
+              setField(field, 'state', state);
+            }
+
+            break;
+          }
+        }
+
+        if (!exist) {
+          state.push([value, { [ru]: receivedValue }]);
+          setField(field, 'state', state);
+        }
+      }
+    }
+  }
+
+  listener = (obj) => {
+
+    const { ready } = this.state;
+
+    if (ready) {
+      this.saveState(obj);
+
+    } else if (typeof obj.value === 'object') {
+
+      const { field } = this.props;
+
+      if (obj.value.length > 0) {
+        const cabecalho = obj.value[0][0];
+
+        setField(field, 'state', obj.value);
+        this.setStates(obj.value, cabecalho);
+        this.setState({ isNew: false });
+      } else {
+        setField(field, 'value', 'Escreva um título para salvar...');
+        setField(field, 'active', undefined);
+        this.setState({ isNew: true });
+      }
+
+    } else if (typeof obj.value !== 'undefined' && typeof obj.defaultValue !== 'undefined') {
+      this.setState({ ready: true });
+    }
+  }
+
+  setStates = (state, cabecalho) => {
+    const { field, receiveUpdates } = this.props;
+
+    let activeState = {};
+
+    for (let s of state) {
+      if (s[0] === cabecalho) {
+        activeState = s[1];
+        break;
+      }
+    }
+
+    this.sendAction(activeState);
+
+    for (let ru of receiveUpdates) {
+      setField(ru, 'value', activeState[ru]);
+    }
+
+    setField(field, 'value', cabecalho);
+    setField(field, 'active', cabecalho);
+  }
+
+  sendAction = (activeState) => {
+    const { action } = this.props;
+
+    serverAction(action, { state: activeState });
+  }
+
+  saveState = (obj) => {
+
+    clearTimeout(this.saveTimeout);
+
+    this.saveTimeout = setTimeout(() => {
+      const { field, updateAction } = this.props;
+
+      let state = getField(field, 'state') || {};
+
+      serverAction(updateAction, { states: state });
+    }, 350);
+  }
+
+  changeActiveState = (nr) => {
+    const { field, receiveUpdates } = this.props;
+    const { value, state = [], active } = getField(field);
+
+    let index = -1;
+    for (let s of state) {
+      index++;
+      if (s[0] === value) {
+        break;
+      }
+    }
+
+    const newIndex = active ? index + nr : nr > 0 ? 0 : state.length - 1;
+
+    if (newIndex < 0 || newIndex >= state.length) {
+      setField(field, 'value', 'Escreva um título para salvar...');
+      setField(field, 'active', undefined);
+
+      const activeState = {};
+      for (let ru of receiveUpdates) {
+        setField(ru, 'value', undefined);
+        activeState[ru] = null;
+      }
+
+      this.sendAction(activeState);
+
+      this.setState({ isNew: true });
+    } else {
+      this.setStates(state, state[newIndex][0]);
+      this.setState({ isNew: false });
+    }
+
+  }
+
+  blur = () => {
+    const { isNew } = this.state;
+
+    const { field } = this.props;
+    const { value, state = [], active } = getField(field);
+
+    if (!isNew) {
+      this.editKeyValue(field, state, value, active);
+    } else if (value !== 'Escreva um título para salvar...') {
+
+      state.push([value, {}]);
+
+      setField(field, 'state', state);
+      setField(field, 'active', value);
+
+      this.setState({ isNew: false });
+    }
+
+    this.setState({ focus: false });
+  }
+
+  editKeyValue = (field, state, value, active) => {
+
+    if (value !== active) {
+
+      let index = -1;
+      for (let s of state) {
+        index++;
+        if (s[0] === active) {
+          s[0] = value;
+
+          break;
+        }
+      }
+
+      if (value === '') {
+        state.splice(index, 1);
+      }
+
+      setField(field, 'state', state);
+      setField(field, 'active', value);
+    }
+  }
+
+  render() {
+    const { field, className = '' } = this.props;
+
+    return (
+      <div className={`ag-component-cabecalho transition-cubic ${className}`}>
+        <div className='ag-arrow-cc' onClick={() => this.changeActiveState(-1)}>
+          <GoTriangleLeft size={25} />
+        </div>
+        <div className='ag-painel-cc'>
+          <Input
+            field={field}
+            fieldListener={this.listener}
+            onFocus={() => this.setState({ focus: true })}
+            onBlur={this.blur}
+            className='ag-input-cabecalho'
+          />
+        </div>
+        <div className='ag-arrow-cc' onClick={() => this.changeActiveState(1)}>
+          <GoTriangleRight size={25} />
+        </div>
+      </div>
+    );
+  }
+}
+
+Cabecalho.propTypes = {
+  field: PropTypes.string.isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]),
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  receiveUpdates: PropTypes.array,
+  action: PropTypes.string,
+  updateAction: PropTypes.string,
+  className: PropTypes.string
+};
+
+export default createField(Cabecalho);

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

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

package/lib/components/Cabecalho/index.js

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

package/lib/components/Calendar/Calendar.d.ts

@@ -0,0 +1,8 @@
+export interface CalendarProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function Calendar(props: CalendarProps): JSX.Element
+
+export default Calendar;