argous 1.2.131 → 1.2.135

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;

package/lib/components/Calendar/Calendar.js

@@ -0,0 +1,156 @@
+import { createField, initField, getField } from '../../fieldsRedux';
+import { addExtraZero } from '../../utils';
+import { getMonthName } from '../../utils/date';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Calendar as CalDep } from 'react-date-range';
+
+/**
+ * @deprecated 
+ */
+class Calendar extends Component {
+  state = {
+    open: false,
+    month: 0
+  }
+
+  componentDidMount() {
+    const { field, defaultValue } = this.props;
+    const defValHandled = this.checkDefaultValue(defaultValue);
+
+    initField(field, defValHandled).then(value => {
+      this.setMonthState(value);
+    });
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClickCalendar);
+  }
+
+  openCalendar = (e) => {
+    e.stopPropagation();
+    this.setState({ open: true });
+    setTimeout(() => document.addEventListener('click', this.handleClickCalendar), 0);
+  }
+
+  handleClickCalendar = (e) => {
+
+    const eCls = e.target.className;
+    const eClsP = e.target.parentNode.className;
+
+    const prev = eCls !== 'rdr-MonthAndYear-button next' && eClsP !== 'rdr-MonthAndYear-button next';
+    const next = eCls !== 'rdr-MonthAndYear-button prev' && eClsP !== 'rdr-MonthAndYear-button prev';
+
+    if (next && prev) {
+      this.setState({ open: false });
+      document.removeEventListener('click', this.handleClickCalendar);
+    } else {
+      const { month } = this.state;
+
+      let newMonth = next
+        ? month + 1
+        : month - 1;
+
+      newMonth = newMonth < 0
+        ? 11
+        : newMonth > 11
+          ? 0
+          : newMonth;
+
+      this.setState({ month: newMonth });
+      this.setMonthName(null, newMonth);
+    }
+
+  }
+
+  checkDefaultValue = (defaultValue) => {
+    if (defaultValue && defaultValue.length === 10) {
+      if (!defaultValue.indexOf('-')) {
+        const newDefVal = `${defaultValue.substring(8, 10)}/${defaultValue.substring(5, 7)}/${defaultValue.substring(0, 4)}`;
+        return newDefVal;
+      }
+    }
+    return defaultValue;
+  }
+
+  setMonthState = (value) => {
+    let month;
+
+    if (value) {
+      if (value.length === 10) {
+        month = value.substring(3, 5);
+      } else {
+        const { field } = this.props;
+        console.error(`Valor da data inválido no campo ${field}. Formatos aceitos são 'dd/mm/aaaa' ou 'aaaa-mm-dd'`);
+      }
+    } else {
+      month = new Date().getMonth();
+    }
+
+    this.setState({ month });
+  }
+
+  handleSelect = (date) => {
+    const { onChange } = this.props;
+
+    const day = date._d.getDate();
+    const month = (date._d.getMonth() + 1);
+    const year = date._d.getFullYear();
+
+    const formattedDate = `${addExtraZero(day)}/${addExtraZero(month)}/${year}`;
+
+    if (onChange) {
+      onChange(year, month, day);
+    }
+    
+    this.props.handleUpdates(formattedDate);
+    this.setState({ open: false });
+  }
+
+  setMonthName = (date, month) => {
+
+    if (date) {
+      this.setState({ month: date._d.getMonth() });
+    }
+
+    const name = getMonthName(typeof month !== 'undefined'
+      ? month
+      : date._d.getMonth());
+
+    const monthDescription = document.getElementsByClassName('rdr-MonthAndYear-month')[0];
+    monthDescription.innerHTML = name;
+  }
+
+  render() {
+    const { openCalendar, handleSelect, setMonthName } = this;
+    const { open } = this.state;
+    const { field } = this.props;
+
+    const date = getField(field, 'value');
+
+    return (
+      <div className='argous-calendar'>
+        <span onMouseUp={openCalendar}>{date ? date : 'dd/mm/aaaa'}</span>
+        {open && (<CalDep date={date} onChange={handleSelect} onInit={setMonthName} />)}
+      </div>
+    );
+  }
+}
+
+Calendar.propTypes = {
+  field: PropTypes.string.isRequired,
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]),
+  ajax: PropTypes.bool,
+  action: PropTypes.string,
+  dados: PropTypes.object,
+  sendUpdates: PropTypes.array,
+  receiveUpdates: PropTypes.array,
+  onFieldSuccess: PropTypes.func,
+  onActionSuccess: PropTypes.func,
+  onChange: PropTypes.func,
+  onAllUpdated: PropTypes.func,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool
+};
+
+export default createField(Calendar, { disableInitField: true });

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

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

package/lib/components/Calendar/index.js

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

package/lib/components/CartaoUsuario/CartaoUsuario.d.ts

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

package/lib/components/CartaoUsuario/CartaoUsuario.js

@@ -0,0 +1,108 @@
+import { ArgousAvatar } from '../';
+import { setAnotherProgramField } from '../../fieldsRedux';
+import { useStore } from '../../utils';
+import { serverAction } from '../../utils/api';
+import { Card, Typography, Grid, Button, Portal, Popper } from '@material-ui/core';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { IoIosCall } from 'react-icons/io';
+import { MdMail, MdMessage } from 'react-icons/md';
+
+function CartaoUsuario({ anchor, idUsuario }) {
+  const tempo = useRef();
+  const deixaMostrar = useRef(false);
+  const limpar = useRef(true);
+  const { usuarioLogado: { idUsuario: idUsuarioLogado } } = useStore();
+
+  const [localAnchor, setLocalAnchor] = useState(anchor);
+  const [localIdUsuario, setLocalIdUsuario] = useState(idUsuario);
+  const [dados, setDados] = useState({});
+  const [mostrar, setMostrar] = useState(false);
+
+  useEffect(() => {
+    if (anchor && idUsuario) {
+      setLocalAnchor(anchor);
+      setLocalIdUsuario(idUsuario);
+      deixaMostrar.current = true;
+    } else {
+      clearTimeout(tempo.current);
+      deixaMostrar.current = false;
+      setTimeout(() => {
+        if (!limpar.current) return;
+        setDados({});
+        setMostrar(false);
+      }, 200);
+    }
+  }, [anchor, idUsuario, mostrar]);
+
+  const busca = useCallback(async () => {
+    if (!localIdUsuario || !localAnchor) {
+      setMostrar(false);
+      clearTimeout(tempo.current);
+      return;
+    }
+    const res = await serverAction('getInfoUsuario', { idUsuario: localIdUsuario }, 'Argous.MntUsuarios', true);
+    tempo.current = setTimeout(() => {
+      if (deixaMostrar.current) {
+        setDados(res);
+        setMostrar(true);
+      }
+    }, 500);
+  }, [localAnchor, localIdUsuario]);
+  useEffect(() => void(busca()), [busca]);
+
+  const retornaUser = () => {
+    return { idUsuario, titulo: dados.dsNomeUsuario, subTitulo: dados.dsFuncaoUsuario, msgsNaoLidas: 0, online: false };
+  };
+
+  function mouseLeave() {
+    setLocalAnchor(null);
+    setLocalIdUsuario(null);
+    clearTimeout(tempo.current);
+    limpar.current = true;
+  }
+
+  function mouseEnter() {
+    clearTimeout(limpar.current);
+    limpar.current = false;
+  }
+
+  if (localIdUsuario && mostrar) return (
+    <Portal>
+      <Popper onClick={e => e.stopPropagation()} style={{ zIndex: 5 }} onMouseLeave={mouseLeave} onMouseEnter={mouseEnter} open={(!!anchor || !!localAnchor) && !!dados.dsNomeUsuario} anchorEl={anchor || localAnchor}>
+        <Card variant='outlined' style={{ padding: '10px', maxWidth: '350px' }}>
+          <Grid container spacing={1}>
+            <Grid item xs='auto'>
+              <ArgousAvatar style={{ width: '50px', height: '50px', margin: '10px' }} nome={dados.dsNomeUsuario} idUsuario={idUsuario || localIdUsuario} />
+            </Grid>
+            <Grid item xs='auto'>
+              <Typography variant='h6' style={{ overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dados.dsNomeUsuario}</Typography>
+              <Typography variant='body2' style={{ width: '250px' }}>{dados.dsFuncaoUsuario}</Typography>
+              <Typography variant='caption' style={{ width: '250px' }}>{dados.dsSetor}</Typography>
+            </Grid>
+            {dados.dtExclusaoUsuario ? 
+              <Typography variant='h6'>Usuário excluido em {dados.dtExclusaoUsuario}</Typography> 
+              : 
+              ((idUsuario && (idUsuarioLogado !== idUsuario)) || (localIdUsuario && (idUsuarioLogado !== localIdUsuario))) &&
+              <React.Fragment>
+                {dados.nrRamalUsuario &&
+                  <Grid item xs>
+                    <Button fullWidth variant='contained' href={`tel: ${dados.nrRamalUsuario}`} title={`Ramal: ${dados.nrRamalUsuario}`}><IoIosCall/>&nbsp;{dados.nrRamalUsuario}</Button>
+                  </Grid>
+                }
+                <Grid item xs>
+                  <Button fullWidth variant='contained' href={`mailto: ${dados.dsEmailUsuario}`} title={dados.dsEmailUsuario}><MdMail/>&nbsp;Email</Button>
+                </Grid>
+                <Grid item xs>
+                  <Button fullWidth variant='contained' onClick={() => setAnotherProgramField('janelaChatOpen', retornaUser(), 'argousSystem')} title='Abrir chat de conversa'><MdMessage/>&nbsp;Mensagem</Button>
+                </Grid>
+              </React.Fragment>
+            }
+          </Grid>
+        </Card>
+      </Popper>
+    </Portal>
+  );
+  return null;
+}
+
+export default CartaoUsuario;

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

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

package/lib/components/CartaoUsuario/index.js

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

package/lib/components/Collapse/Collapse.d.ts

@@ -0,0 +1,60 @@
+import { StandardProps } from '@material-ui/core';
+import { TransitionProps } from '@material-ui/core/transitions/transition';
+import * as React from 'react';
+
+export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
+  /**
+   * The content node to be collapsed.
+   */
+  children?: React.ReactNode;
+  /**
+   * The height of the container when collapsed.
+   */
+  collapsedHeight?: string | number;
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType<TransitionProps>;
+  /**
+   * Enable this prop if you encounter 'Function components cannot be given refs',
+   * use `unstable_createStrictModeTheme`,
+   * and can't forward the ref in the passed `Component`.
+   */
+  disableStrictModeCompat?: boolean;
+  /**
+   * If `true`, the component will transition in.
+   */
+  in?: boolean;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   */
+  timeout?: TransitionProps['timeout'] | 'auto';
+  /**
+   * Orientation of the collapse
+   */
+  orientation?: 'vertical' | 'horizontal'
+}
+
+export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' | 'wrapperInner';
+
+/**
+ * The Collapse transition is used by the
+ * [Vertical Stepper](https://material-ui.com/components/steppers/#vertical-stepper) StepContent component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ * Demos:
+ *
+ * - [Cards](https://material-ui.com/components/cards/)
+ * - [Lists](https://material-ui.com/components/lists/)
+ * - [Transitions](https://material-ui.com/components/transitions/)
+ *
+ * API:
+ *
+ * - [Collapse API](https://material-ui.com/api/collapse/)
+ * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)
+ */
+
+export default function Collapse(props: CollapseProps): JSX.Element;