argous 1.2.132 → 1.2.136

package/lib/components/FormVisualizer/FormVisualizer.d.ts

@@ -0,0 +1,92 @@
+import { CheckboxProps, OutlinedTextFieldProps, RadioProps, TypographyProps } from '@material-ui/core';
+import { ClassNameMap } from '@material-ui/core/styles/withStyles';
+import { AutocompleteProps } from '@material-ui/lab';
+import { KeyboardDatePickerProps } from '@material-ui/pickers';
+import * as React from 'react';
+
+interface TextField extends OutlinedTextFieldProps {
+  tp: 'text',
+  name: string
+}
+
+interface TextSelection extends AutocompleteProps<any, false, false, false> {
+  tp: 'text',
+  variant: 'select',
+  name: string
+}
+
+interface MultipleTextSelection extends AutocompleteProps<any, true, false, false> {
+  tp: 'text',
+  variant: 'select',
+  multiple: true
+  name: string
+}
+
+interface Label extends TypographyProps {
+  tp: 'label',
+  value: string
+}
+
+interface Data extends KeyboardDatePickerProps {
+  tp: 'data',
+  name: string
+}
+
+interface SelectionRadio extends RadioProps{
+  tp: 'checkBox',
+  multiple?: false,
+  name: string,
+  options: string[]
+}
+
+interface SelectionCheckBox extends CheckboxProps{
+  tp: 'checkBox',
+  multiple: true
+  name: string,
+  options: string[]
+}
+
+interface Coluna {
+  span: number,
+  className?: string,
+  style?: React.CSSProperties, 
+  obj: TextField | TextSelection | MultipleTextSelection | Label | Data | SelectionRadio | SelectionCheckBox
+}
+
+interface Linha {
+  className?: string,
+  colunas: Coluna[],
+}
+
+interface Documento {
+  idDoc: number,
+  nome: string,
+  obrigatorio: boolean,
+  className?: string,
+  linhas: Linha[]
+}
+
+interface Fase {
+  idFase: number,
+  nome: string,
+  grupos?: number[],
+  usuarios?: number[],
+  className?: string,
+  documentos: Documento[]
+}
+
+interface JSONInterface {
+  nome: string,
+  classes: ClassNameMap,
+  fases: Fase[],
+}
+
+export interface FormVisualizerProps {
+  json: JSONInterface,
+  initialValues?: object[],
+  onChange?: (valores: object[]) => void
+}
+
+declare function FormVisualizer(props: FormVisualizerProps): JSX.Element
+
+export default FormVisualizer;

package/lib/components/FormVisualizer/FormVisualizer.js

@@ -0,0 +1,289 @@
+import Button from '../../components/MaterialButton';
+import { useUpdateEffect } from '../../utils';
+import { getStore } from '../../utils/store';
+import MomentUtils from '@date-io/moment';
+import { makeStyles, Grid, Paper, Card, Typography, TextField, FormLabel, FormGroup, FormControlLabel, Checkbox, RadioGroup, Radio, Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment, IconButton } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { isArray, isEqual, isString, set } from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState, useCallback, memo } from 'react';
+import { MdVisibility, MdVisibilityOff } from 'react-icons/md';
+import { useImmerReducer } from 'use-immer';
+
+const reducer = (state = {}, { fase, documento, field, value }) => {
+  state[fase][documento][field] = value;
+};
+
+const init = (initialValues) => (initialState) => {
+  if (isArray(initialValues) && !isArray(initialValues[0])) {
+    return initialState.map((fase, i) => fase.map((_, j) => initialValues[i].documentos[j].values));
+  }
+  return initialValues;
+};
+
+const FormVisualizer = ({ json = {}, initialValues = [], onChange = () => '', disabled }) => {
+  const classes = makeStyles(json.classes)();
+
+  const [state, dispatch] = useImmerReducer(reducer, json.fases.map(fase => fase.documentos.map(documento => documento.linhas.reduce((a, linha) => ({ ...a, ...linha.colunas.reduce((ac, { obj }) => obj.name ? ({ ...ac, [obj.name]: obj.value }) : ac, {}) }), {}))), init(initialValues));
+
+  useUpdateEffect(() => {
+    onChange(state);
+  }, [state]);
+
+  return (
+    <Card style={{ padding: '10px' }}>
+      <Typography variant='h4' component='div' align='center' style={{ marginBottom: '10px' }}>{json.nome}</Typography>
+      {json.fases && json.fases.map((fase, i) => (
+        <Card key={fase.idFase} className={classes[fase.className]} style={{ ...fase.style, padding: '10px', margin: '10px' }}>
+          <Typography variant='h5' component='div' align='center' style={{ marginBottom: '5px' }}>{fase.nome}</Typography>
+          {fase.documentos.map((documento, j) => (
+            <Paper elevation={3} key={documento.idDoc} className={classes[documento.className]} style={{ ...documento.style, padding: '10px', margin: '10px' }}>
+              <Typography variant='h6' component='div' align='center' style={{ marginBottom: '5px' }}>{documento.nome}</Typography>
+              {documento.linhas.map((linha, k) => (
+                <Grid container spacing={linha.spacing || 2} key={`${k}`} className={classes[linha.className]} style={linha.style}>
+                  {linha.colunas.map(({ span, className, style, obj: { name, ...obj } }, l) => (
+                    <Grid item key={l} xs={span} className={classes[className]} style={style}>
+                      {console.log(state[i][j][name])}
+                      <RetornaComponente value={obj.value || state[i][j][name]} fase={i} documento={j} {...{ ...obj, name, dispatch, disabled }} />
+                    </Grid>
+                  ))}
+                </Grid>
+              ))}
+            </Paper>
+          ))}
+        </Card>
+      ))}
+    </Card>
+  );
+};
+
+export default FormVisualizer;
+
+const RetornaComponente = memo(({ tp, name, dispatch, disabled, fase, documento, ...props }) => {
+  switch (tp) {
+    case 'label':
+      return <Label disabled={disabled} {...props} />;
+    case 'text':
+      return <Text disabled={disabled} dispatch={value => dispatch({ fase, documento, field: name, value })} {...props} />;
+    case 'data':
+      return <Data disabled={disabled} dispatch={value => dispatch({ fase, documento, field: name, value })} {...props} />;
+    case 'checkBox':
+      return <Selection disabled={disabled} dispatch={value => dispatch({ fase, documento, field: name, value })} {...props} />;
+    case 'assinatura':
+      return <Signature disabled={disabled} dispatch={value => dispatch({ fase, documento, field: name, value })} {...props} />;
+    default:
+      break;
+  }
+}, isEqual);
+
+const Label = ({ className, style, value, ...props }) => {
+  return <Typography {...{ className, style, ...props }}>{value}</Typography>;
+};
+
+const useStyles = makeStyles({
+  textArea: {
+    '& textarea': {
+      resize: 'vertical',
+      minHeight: '50px'
+    }
+  }
+});
+
+const Text = ({ variant, label, multiple, className, style, options, value, dispatch, path, ...props }) => {
+  const classes = useStyles();
+  if (variant === 'select') return (
+    <Autocomplete
+      {...{ multiple, options }}
+      defaultValue={value}
+      limitTags={1}
+      disableCloseOnSelect={multiple}
+      disablePortal
+      closeText='Fechar'
+      clearText='Limpar'
+      openText='Abrir'
+      onChange={(_e, value_) => {
+        dispatch(value_);
+      }}
+      {...props}
+      renderInput={params => (
+        <TextField
+          variant='outlined'
+          margin='dense' fullWidth
+          {...{ label, style, className }}{...params}
+        />
+      )}
+    />
+  );
+  return (
+    <TextField
+      className={`${classes.textArea} mostraSpinner ${className}`}
+      variant='outlined' margin='dense'
+      fullWidth multiline={variant === 'multiline'}
+      {...{ label, style }}
+      defaultValue={value}
+      onBlur={e => {
+        e.persist();
+        if (e.target.value === value) return;
+        dispatch(e.target.value);
+      }}{...props} />
+  );
+};
+
+const Data = ({ label, className, style, value, dispatch, path, ...props }) => {
+  const [state, setState] = useState(value);
+  
+  useEffect(() => {
+    if ((value || undefined) === (isString(state) ? state || undefined : state?.format('YYYY-MM-DD'))) return;
+    const time = setTimeout(() => {     
+      dispatch(state ? moment(state).format('YYYY-MM-DD') : '');
+    }, 100);
+    return () => clearTimeout(time);
+    // eslint-disable-next-line
+  }, [state, path])
+
+  return (
+    <MuiPickersUtilsProvider utils={MomentUtils}>
+      <KeyboardDatePicker
+        fullWidth
+        invalidDateMessage='Data inválida'
+        autoOk
+        variant='inline'
+        inputVariant='outlined'
+        label='Data inicial'
+        margin='dense'
+        InputAdornmentProps={{ position: 'end' }}
+        format='DD/MM/YYYY'
+        {...{ className, label, style }}
+        {...props}
+        value={state || null}
+        onChange={setState}
+      />
+    </MuiPickersUtilsProvider>
+  );
+};
+
+const Selection = ({ label, multiple, className, style, options, value, dispatch, path, ...props }) => {
+  const [state, setState] = useState(value || (multiple ? [] : ''));
+
+  const atualizaDados = useCallback(() => {
+    dispatch(state);
+    // eslint-disable-next-line
+  }, [state])
+
+  useUpdateEffect(() => atualizaDados(), [state, atualizaDados]);
+
+  const changeCheckBox = (e) => {
+    if (e.target.checked) {
+      setState([...state, e.target.value]);
+    } else {
+      let temp = state;
+      temp.splice(temp.indexOf(e.target.value), 1);
+      setState(temp);
+    }
+    atualizaDados();
+  };
+
+  if (multiple) return (
+    <Grid container>
+      <Grid item xs={12} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5, }} {...{ className }}>
+        {label && <FormLabel style={{ marginBottom: '0px' }}>{label}</FormLabel>}
+        <FormGroup row style={{ flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' }}>
+          {options.map((item, i) => (
+            <FormControlLabel
+              key={i}
+              value={item}
+              control={<Checkbox name={item} onChange={changeCheckBox}{...{ style }}{...props} />}
+              label={item}
+              labelPlacement='start'
+            />
+          ))}
+        </FormGroup>
+      </Grid>
+    </Grid>
+  );
+  return (
+    <Grid container>
+      <Grid item xs={12} style={{ ...style, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5, }} {...{ className }}>
+        {label && <FormLabel style={{ marginBottom: '0px' }}>{label}</FormLabel>}
+        <RadioGroup row defaultValue={value} onChange={e => setState(e.target.value)} style={{ flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' }}>
+          {options.map((item, i) => (
+            <FormControlLabel
+              key={i}
+              value={item}
+              control={<Radio {...{ style }}{...props} />}
+              label={item}
+              labelPlacement='start'
+            />
+          ))}
+        </RadioGroup>
+      </Grid>
+    </Grid>
+  );
+};
+
+const Signature = ({ label, grupos, usuarios, className, style, value, dados, setDados, path }) => {
+  const usuario = getStore().getState().argous.usuarioLogado;
+  const podeAssinar = (usuarios.filter(id => id === usuario.idUsuario)).length > 0;
+
+  const [values, setValues] = useState({ modal: false, password: '', showPassword: false, senhaIncorreta: '' });
+
+  //action para checar se o usuario é do grupo para poder assinar 
+
+  async function confirmaAssinatura() {
+    const res = { status: true, hash: 'sdfghil349' }; // = await algumaFuncao('', {idUsuario:usuario.idUsuario,senha:values.password}, true)
+    if (res.status) {
+      setValues({ ...values, senhaIncorreta: '' });
+      const temp = { ...dados };
+      set(temp, path, [usuario.idUsuario, usuario.nome, moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), res.hash]);
+      setDados(temp);
+      setValues({ ...values, modal: false });
+    } else setValues({ ...values, senhaIncorreta: 'Senha Incorreta!' });
+  }
+
+  if (value.length > 0) return (
+    <div {...{ className }} style={{ ...style, height: '50px', display: 'flex', justifyContent: 'flex-end', alignItems: ' flex-end' }}>
+      <Typography title={value[3]} variant='subtitle2' style={{ textAlign: 'right' }}>{`${value[1]} - ${moment(value[2]).format('DD/MM/YYYY HH:mm:ss')}`}</Typography>
+    </div>
+  );
+  return (
+    <>
+      <Grid container direction='row-reverse' {...{ className, style }}>
+        <Grid item xs={12} sm={6} md={4} lg={2} xl={1}>
+          <Button title={label} color='primary' variant='contained' fullWidth disabled={!podeAssinar} onClick={() => setValues({ ...values, modal: true })}>Assinar</Button>
+        </Grid>
+      </Grid>
+      <Dialog open={values.modal} onClose={() => setValues({ ...values, modal: false })} style={{ padding: '0px 10px 5px' }}>
+        <DialogTitle>Confirme sua senha</DialogTitle>
+        <DialogContent>
+          <TextField
+            variant='outlined'
+            label='Senha'
+            fullWidth
+            type={values.showPassword ? 'text' : 'password'}
+            value={values.password}
+            onChange={e => setValues({ ...values, password: e.target.value })}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position='end'>
+                  <IconButton
+                    onClick={() => setValues({ ...values, showPassword: !values.showPassword })}
+                    onMouseDown={e => e.preventDefault()}
+                  >
+                    {values.showPassword ? <MdVisibility /> : <MdVisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              )
+            }}
+            error={!!values.senhaIncorreta}
+            helperText={values.senhaIncorreta}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button title='Cancelar' color='warning' variant='contained' fullWidth onClick={() => setValues({ ...values, modal: false })}>Cancelar</Button>
+          <Button title='Confirmar' color='success' variant='contained' fullWidth onClick={confirmaAssinatura}>Confirmar</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};

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

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

package/lib/components/FormVisualizer/index.js

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

package/lib/components/Highlight/Highlight.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export interface HighlightProps {}
+
+declare function Highlight(props: HighlightProps): JSX.Element
+
+export default Highlight;

package/lib/components/Highlight/Highlight.js

@@ -0,0 +1,51 @@
+import highlight from 'highlight.js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+
+class HighLight extends Component {
+
+  componentDidMount () {
+    highlight.highlightBlock(findDOMNode(this.refs.code));
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (this.props.language !== nextProps.language || this.props.className !== nextProps.className || this.props.children !== nextProps.children) {
+      return true;
+    }
+
+    return false;
+  }
+
+  componentDidUpdate () {
+    highlight.initHighlighting.called = false;
+    highlight.highlightBlock(findDOMNode(this.refs.code));
+  }
+
+  render () {
+    const { children, className, language, style } = this.props;
+
+    return (
+      <pre
+        className={className}
+        style={style}
+      >
+        <code
+          className={language}
+          ref='code'
+        >
+          {children}
+        </code>
+      </pre>
+    );
+  }
+}
+
+HighLight.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  language: PropTypes.string,
+  style: PropTypes.object
+};
+
+export default HighLight;

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

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

package/lib/components/Highlight/index.js

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

package/lib/components/ImageResize/ImageResize.d.ts

@@ -0,0 +1,28 @@
+import { DialogProps } from '@material-ui/core';
+
+export interface ImageResizeProps extends DialogProps {
+  /**
+   * Imagem a ser Redimensionada
+   */
+  imagem: File,
+  /**
+   * Funcao chamada quando a imagem termina de ser redimensionada
+   * 
+   * @param {string} urlImagem - Base64 da imagem redimensionada
+   * 
+   * @returns {void} Sem Retorno 
+   */
+  onImage?: (urlImagem: string) => void, 
+  /**
+   * Propriedades da imagem final
+   * 
+   * @param {number | string} width - Largura da imagem final
+   * @param {number | string} height - Altura da imagem final
+   * @param {number | string} borderRadius - Raio da imagem final
+   */
+  finalImageProperties?: { width:number | string, height: number | string, borderRadius: number | string }
+}
+
+declare function ImageResize(props: ImageResizeProps): JSX.Element
+
+export default ImageResize;