Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3788 | Rev 4116 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3788 Rev 4115
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from "react";
 2 
import React, { Children } from "react";
3 
import { useState, useRef, useEffect } from "react";
 3 
import { useState, useRef, useEffect } from "react";
4 
import styled from "styled-components";
 4 
import styled from "styled-components";
5 
import { axios } from "../../../utils";
 5 
import { axios } from "../../../utils";
6 
import Emojione from "./emojione/Emojione";
 6 
import Emojione from "./emojione/Emojione";
7 
import SendFileModal from "./send-file-modal/SendFileModal";
 7 
import SendFileModal from "./send-file-modal/SendFileModal";
8 
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
 8 
import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
9 
import MessageTemplate from "./messageTemplate/MessageTemplate";
 9 
import MessageTemplate from "./messageTemplate/MessageTemplate";
- 
 
 10 
import { Button, Modal } from "react-bootstrap";
- 
 
 11 
import Spinner from "../../../shared/loading-spinner/Spinner";
- 
 
 12 
import { useForm } from "react-hook-form";
- 
 
 13 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
Línea 10... Línea 14...
10 
 
 14 
 
11 
const StyledChatHead = styled.div`
 15 
const StyledChatHead = styled.div`
12 
  .notify {
 16 
  .notify {
13 
    animation: notify 2s infinite;
 17 
    animation: notify 2s infinite;
Línea 65... Línea 69...
65 
      border-bottom: 1px solid #e2e2e2;
 69 
      border-bottom: 1px solid #e2e2e2;
66 
    }
 70 
    }
67 
  }
 71 
  }
68 
`;
 72 
`;
Línea 69... Línea 73...
69 
 
 73 
 
Línea 70... Línea 74...
70 
const PersonalChat = ({ entity, index, onClose, onMinimize, onRead, not_seen_messages, minimized }) => {
 74 
const PersonalChat = ({ entity, onClose, onMinimize, onRead, not_seen_messages, minimized }) => {
71 
 
 75 
 
72 
  // entity destructuring
 76 
  // entity destructuring
73 
  const {
 77 
  const {
Línea 99... Línea 103...
99 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([]);
 103 
  const [availableContactsToAdd, setAvailableContactsToAdd] = useState([]);
100 
  const [groupContactsList, setGroupContactsList] = useState([]);
 104 
  const [groupContactsList, setGroupContactsList] = useState([]);
101 
  const [confirmModalShow, setConfirmModalShow] = useState(false);
 105 
  const [confirmModalShow, setConfirmModalShow] = useState(false);
102 
  const [showEmojiTab, setShowEmojiTab] = useState(false);
 106 
  const [showEmojiTab, setShowEmojiTab] = useState(false);
103 
  const [shareFileModalShow, setShareFileModalShow] = useState(false);
 107 
  const [shareFileModalShow, setShareFileModalShow] = useState(false);
- 
 
 108 
  const [showConferenceModal, setShowConferenceModal] = useState(false);
104 
  const [loading, setLoading] = useState(false);
 109 
  const [loading, setLoading] = useState(false);
Línea 105... Línea 110...
105 
 
 110 
 
106 
  // refs
 111 
  // refs
107 
  const conversationListEl = useRef(null);
 112 
  const conversationListEl = useRef(null);
Línea 329... Línea 334...
329 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
 334 
      : setResponseMessage({ ...element, m: 'Archivo adjunto' })
Línea 330... Línea 335...
330 
 
 335 
 
331 
    textAreaEl.current && textAreaEl.current.focus()
 336 
    textAreaEl.current && textAreaEl.current.focus()
Línea -... Línea 337...
- 
 
 337 
  };
- 
 
 338 
 
332 
  };
 339 
  const displayConferenceModal = () => setShowConferenceModal(!displayConferenceModal)
333 
 
 340 
 
334 
  const messagesRender = () => {
 341 
  const messagesRender = () => {
335 
    return (
 342 
    return (
336 
      <React.Fragment>
 343 
      <React.Fragment>
Línea 486... Línea 493...
486 
        </ul>
 493 
        </ul>
487 
      </div>
 494 
      </div>
488 
    </React.Fragment>
 495 
    </React.Fragment>
489 
  );
 496 
  );
Línea -... Línea 497...
- 
 
 497 
 
- 
 
 498 
  const meetingOptionsTab = (
- 
 
 499 
    <>
- 
 
 500 
      <span className="optionBack" onClick={() => handleShowOptions()}>
- 
 
 501 
        <i className="fa icon-arrow-left" />
- 
 
 502 
      </span>
- 
 
 503 
      <div className="optionsTab">
- 
 
 504 
        <ul>
- 
 
 505 
          <li
- 
 
 506 
            className="optionsTab__option"
- 
 
 507 
            onClick={displayConferenceModal}
- 
 
 508 
          >
- 
 
 509 
            <span className="optionsTab__option__icon">
- 
 
 510 
              <i className="fa fa-user-plus" />
- 
 
 511 
            </span>
- 
 
 512 
            Crear conferencia
- 
 
 513 
          </li>
- 
 
 514 
        </ul>
- 
 
 515 
      </div>
- 
 
 516 
    </>
- 
 
 517 
  );
490 
 
 518 
 
491 
  const addPersonToGroupTab = (
 519 
  const addPersonToGroupTab = (
492 
    <React.Fragment>
 520 
    <React.Fragment>
493 
      <span
 521 
      <span
494 
        className="optionBack"
 522 
        className="optionBack"
Línea 611... Línea 639...
611 
                  <br />
 639 
                  <br />
612 
                  <small className={`status ${online ? "Online" : "Offline"}`}>
 640 
                  <small className={`status ${online ? "Online" : "Offline"}`}>
613 
                    <b>{online ? "En línea" : "Desconectado"}</b>
 641 
                    <b>{online ? "En línea" : "Desconectado"}</b>
614 
                  </small>
 642 
                  </small>
615 
                  <div className="pull-right options">
 643 
                  <div className="pull-right options">
616 
                    <div
 - 
 
617 
                      className="btn-group uploadFile"
 644 
                    <div className="btn-group uploadFile">
618 
                      id="uploadFile"
 - 
 
619 
                      data-client="'+chatboxtitle+'"
 - 
 
620 
                    >
 - 
 
621 
                      {/* <span>
 645 
                      {/* <span>
622 
                      <i className="fa fa-trash"></i>
 646 
                      <i className="fa fa-trash"></i>
623 
                    </span> */}
 647 
                    </span> */}
624 
                    </div>
 648 
                    </div>
625 
                    <div
 - 
 
626 
                      className="btn-group"
 649 
                    <div className="btn-group">
627 
                    // onClick="javascript:clearHistory(\''+chatboxtitle+'\')"
 - 
 
628 
                    // href="javascript:void(0)"
 - 
 
629 
                    >
 - 
 
630 
                      {/* <span>
 650 
                      {/* <span>
631 
                      <i className="fa fa-trash"></i>
 651 
                      <i className="fa fa-trash"></i>
632 
                    </span> */}
 652 
                    </span> */}
633 
                    </div>
 653 
                    </div>
634 
                    <div
 654 
                    <div
635 
                      className="btn-group"
 655 
                      className="btn-group addUser"
636 
                    // onClick="javascript:toggleChatBoxGrowth(\''+chatboxtitle+'\')"
 656 
                      data-client="8cb2a840-56c2-4f93-9cf1-27ad598acd8f"
637 
                    // href="javascript:void(0)"
 657 
                      data-name="Grupo de jesus"
638 
                    >
 658 
                    >
639 
                      <span>
 659 
                      <span>
640 
                        <i
 - 
 
641 
                          className={`fa fa-minus-circle`}
 660 
                        <i className="fa fa-gear" onClick={handleShowOptions} />
642 
                          onClick={handleActive}
 - 
 
643 
                        ></i>
 - 
 
644 
                      </span>
 661 
                      </span>
645 
                    </div>
 662 
                    </div>
646 
                    <div
 - 
 
647 
                      className="btn-group"
 663 
                    <div className="btn-group">
648 
                    // onClick="javascript:closeChatBox(\''+chatboxtitle+'\')"
 - 
 
649 
                    // href="javascript:void(0)"
 - 
 
650 
                    >
 - 
 
651 
                      <span>
 664 
                      <span>
- 
 
 665 
                        <i className={`fa fa-minus-circle`} onClick={handleActive} />
652 
                        <i
 666 
                      </span>
653 
                          className="fa fa-times-circle"
 667 
                    </div>
654 
                          onClick={handleCloseChat}
 668 
                    <div className="btn-group">
655 
                        ></i>
 669 
                      <span>
- 
 
 670 
                        <i className="fa fa-times-circle" onClick={handleCloseChat} />
656 
                      </span>
 671 
                      </span>
657 
                    </div>
 672 
                    </div>
658 
                  </div>
 673 
                  </div>
659 
                </div>
 674 
                </div>
660 
              </div>
 675 
              </div>
Línea 935... Línea 950...
935 
    default:
 950 
    default:
936 
      break;
 951 
      break;
937 
  }
 952 
  }
938 
};
 953 
};
Línea -... Línea 954...
- 
 
 954 
 
- 
 
 955 
const StyleModal = ({
- 
 
 956 
  title = 'Crea una conferencia',
- 
 
 957 
  size = 'md',
- 
 
 958 
  show = false,
- 
 
 959 
  children
- 
 
 960 
}) => {
- 
 
 961 
 
- 
 
 962 
  const [isShow, setIsShow] = useState(show)
- 
 
 963 
 
- 
 
 964 
  const closeModal = () => setIsShow(false)
- 
 
 965 
 
- 
 
 966 
  return (
- 
 
 967 
    <Modal
- 
 
 968 
      size={size}
- 
 
 969 
      show={isShow}
- 
 
 970 
      onHide={closeModal}
- 
 
 971 
      style={{ overflowY: "scroll" }}
- 
 
 972 
    >
- 
 
 973 
      <Modal.Header closeButton>
- 
 
 974 
        <Modal.Title>{title}</Modal.Title>
- 
 
 975 
      </Modal.Header>
- 
 
 976 
      <Modal.Body>
- 
 
 977 
        {children}
- 
 
 978 
      </Modal.Body>
- 
 
 979 
    </Modal>
- 
 
 980 
  )
- 
 
 981 
}
- 
 
 982 
 
- 
 
 983 
const ConferenceModal = ({
- 
 
 984 
  show = false,
- 
 
 985 
}) => {
- 
 
 986 
 
- 
 
 987 
  const { handleSubmit, register, errors, reset } = useForm()
- 
 
 988 
 
- 
 
 989 
  const onSubmit = () => {
- 
 
 990 
    reset()
- 
 
 991 
  }
- 
 
 992 
 
- 
 
 993 
  return (
- 
 
 994 
    <StyleModal
- 
 
 995 
      title='Crea una conferencia'
- 
 
 996 
      size='md'
- 
 
 997 
      show={show}
- 
 
 998 
    >
- 
 
 999 
      <form onSubmit={handleSubmit(onSubmit)}>
- 
 
 1000 
        <div className="d-flex flex-wrap pb-3" style={{ gap: '1rem' }}>
- 
 
 1001 
          <div className="cp-field">
- 
 
 1002 
            <label htmlFor="first_name">Título</label>
- 
 
 1003 
            <input
- 
 
 1004 
              type="text"
- 
 
 1005 
              name="title"
- 
 
 1006 
              {...register({ required: "Por favor un título" })}
- 
 
 1007 
            />
- 
 
 1008 
            {errors.title && <FormErrorFeedback> {errors.title.message}</FormErrorFeedback>}
- 
 
 1009 
          </div>
- 
 
 1010 
          <div className="cp-field">
- 
 
 1011 
            <label htmlFor="first_name">Título</label>
- 
 
 1012 
            <input
- 
 
 1013 
              type="text"
- 
 
 1014 
              name="title"
- 
 
 1015 
              {...register({ required: "Por favor ingrese su nombre" })}
- 
 
 1016 
            />
- 
 
 1017 
            {errors.title && <FormErrorFeedback> {errors.title.message}</FormErrorFeedback>}
- 
 
 1018 
          </div>
- 
 
 1019 
        </div>
- 
 
 1020 
      </form>
- 
 
 1021 
    </StyleModal>
- 
 
 1022 
  )
- 
 
 1023 
}
939 
 
 1024 
 
940 
export default React.memo(PersonalChat);
 1025 
export default React.memo(PersonalChat);