|
|
|
@ -15,15 +15,27 @@ import INotificacionesContactos from '../../../Interfaces/Utils/INotificacionesC |
|
|
|
|
import INotificacionesGrupos from '../../../Interfaces/Utils/INotificacionesGrupos' |
|
|
|
|
import { MsgInformativo } from '../Toast/msgInformativo' |
|
|
|
|
import NotificacionesDS from '../../../Services/Utils/Notificaciones/Notificaciones.Services' |
|
|
|
|
import { AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai' |
|
|
|
|
import { |
|
|
|
|
AiFillCaretLeft, |
|
|
|
|
AiFillCaretRight, |
|
|
|
|
AiOutlineTeam, |
|
|
|
|
AiOutlineUsergroupAdd |
|
|
|
|
} from 'react-icons/ai' |
|
|
|
|
import { IconContext } from 'react-icons' |
|
|
|
|
import { HiCurrencyDollar } from 'react-icons/hi' |
|
|
|
|
import DTONotificacionesContactoGrupo from '../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo' |
|
|
|
|
import { number } from 'yup/lib/locale' |
|
|
|
|
|
|
|
|
|
export interface INotificacionesProps {} |
|
|
|
|
|
|
|
|
|
export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
const [selectedRows, setSelectedRows] = React.useState([]) |
|
|
|
|
const [Grupos, setGrupos] = useState<INotificacionesGrupos[]>([]) |
|
|
|
|
const [Contactos, setContactos] = useState<INotificacionesContactos[]>([]) |
|
|
|
|
const [ContactosdelGrupo, setContactosdelGrupo] = useState<INotificacionesContactos[]>([]) |
|
|
|
|
const [Mensaje, setMensaje] = useState('') |
|
|
|
|
const [Grupo, setGrupo] = useState(0) |
|
|
|
|
const [Grupo, setGrupo] = useState('') |
|
|
|
|
const [IdGrupo, setIdGrupo] = useState(0) |
|
|
|
|
const [IdContacto, setIdContacto] = useState(0) |
|
|
|
|
const [Nombre, setNombre] = useState('') |
|
|
|
|
const [Puesto, setPuesto] = useState('') |
|
|
|
@ -31,12 +43,13 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
const [Empresa, setEmpresa] = useState('') |
|
|
|
|
const [Activo, setActivo] = useState(1) |
|
|
|
|
const [ShowModal, setShowModal] = useState(false) |
|
|
|
|
const [ShowModalG, setShowModalG] = useState(false) |
|
|
|
|
const [header, setHeader] = useState('') |
|
|
|
|
const [show, setShowMsg] = useState(false) |
|
|
|
|
const [msg, setMsg] = useState('') |
|
|
|
|
const msgColor = 'primary' |
|
|
|
|
|
|
|
|
|
const colContactosConcepts = [ |
|
|
|
|
const colContactos = [ |
|
|
|
|
{ |
|
|
|
|
name: 'id', |
|
|
|
|
width: '60px', |
|
|
|
@ -115,6 +128,33 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
activo: Activo |
|
|
|
|
} |
|
|
|
|
NotificacionesDS.ContactosAppend(data) |
|
|
|
|
.then((response) => { |
|
|
|
|
setHeader('Informativo') |
|
|
|
|
setMsg('Se encontro la siguiente informacion...') |
|
|
|
|
setShowMsg(true) |
|
|
|
|
loadAllContacts() |
|
|
|
|
}) |
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg('Ocurrio un error: ' + e) |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const saveGroup = () => { |
|
|
|
|
if (!Grupo) { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg('Favor de proporcionar el nombre') |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
const data: INotificacionesGrupos = { |
|
|
|
|
id: IdContacto, |
|
|
|
|
grupo: Grupo, |
|
|
|
|
activo: 1 |
|
|
|
|
} |
|
|
|
|
NotificacionesDS.GruposAppend(data) |
|
|
|
|
.then((response) => { |
|
|
|
|
setHeader('Informativo') |
|
|
|
|
setMsg('Se encontro la siguiente informacion...') |
|
|
|
@ -128,7 +168,7 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loadContacts = () => { |
|
|
|
|
const loadAllContacts = () => { |
|
|
|
|
NotificacionesDS.ContactosGet() |
|
|
|
|
.then((response) => { |
|
|
|
|
setContactos(response.data) |
|
|
|
@ -141,10 +181,81 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loadGroupContacts = () => { |
|
|
|
|
NotificacionesDS.ContactosdelGrupoGet(IdGrupo) |
|
|
|
|
.then((response) => { |
|
|
|
|
setContactosdelGrupo(response.data) |
|
|
|
|
}) |
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg('Ocurrio un error: ' + e) |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const loadGroups = () => { |
|
|
|
|
NotificacionesDS.GruposGet() |
|
|
|
|
.then((response) => { |
|
|
|
|
setGrupos(response.data) |
|
|
|
|
}) |
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg('Ocurrio un error: ' + e) |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
loadContacts() |
|
|
|
|
loadAllContacts() |
|
|
|
|
loadGroups() |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
loadGroupContacts() |
|
|
|
|
}, [IdGrupo]) |
|
|
|
|
|
|
|
|
|
const handleRowSelected = React.useCallback((state) => { |
|
|
|
|
setSelectedRows(state.selectedRows) |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
const asignaContactoAlGrupo = (accion: number) => { |
|
|
|
|
if (IdGrupo === 0) { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg(`Antes de asignar un usuario a un grupo, seleccione el grupo`) |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
const listaContactos: INotificacionesContactos[] = selectedRows |
|
|
|
|
var contactos: number[] = [] |
|
|
|
|
listaContactos.forEach((row) => { |
|
|
|
|
contactos.push(row.id) |
|
|
|
|
}) |
|
|
|
|
const data: DTONotificacionesContactoGrupo = { |
|
|
|
|
idgrupo: IdGrupo, |
|
|
|
|
accion, |
|
|
|
|
contactos |
|
|
|
|
} |
|
|
|
|
NotificacionesDS.AsignacionContactosGrupos(data) |
|
|
|
|
.then((response) => { |
|
|
|
|
setHeader('Informativo') |
|
|
|
|
setMsg( |
|
|
|
|
accion === 1 |
|
|
|
|
? `Se agregaron los contactos al grupo` |
|
|
|
|
: `Se eliminaron los contactos del grupo` |
|
|
|
|
) |
|
|
|
|
setShowMsg(true) |
|
|
|
|
}) |
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg('Ocurrio un error: ' + e) |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div> |
|
|
|
|
<Card> |
|
|
|
@ -162,12 +273,26 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={1}>Grupo</Col> |
|
|
|
|
<Col xs={1} style={{ textAlign: 'right' }}> |
|
|
|
|
Grupo |
|
|
|
|
<span |
|
|
|
|
style={{ paddingLeft: '5px', cursor: 'pointer' }} |
|
|
|
|
onClick={() => { |
|
|
|
|
setShowModalG(!ShowModalG) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ color: '#31C50D', size: '25px' }} |
|
|
|
|
> |
|
|
|
|
<AiOutlineTeam /> |
|
|
|
|
</IconContext.Provider> |
|
|
|
|
</span> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={4}> |
|
|
|
|
<Form.Control |
|
|
|
|
as="select" |
|
|
|
|
onChange={(e) => { |
|
|
|
|
setGrupo(parseInt(e.target.value)) |
|
|
|
|
setIdGrupo(parseInt(e.target.value)) |
|
|
|
|
}} |
|
|
|
|
className="form-select form-select-sm" |
|
|
|
|
> |
|
|
|
@ -194,12 +319,20 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
<Col xs={6}> |
|
|
|
|
<Card> |
|
|
|
|
<Card.Body> |
|
|
|
|
<Card.Title |
|
|
|
|
onClick={() => { |
|
|
|
|
setShowModal(!ShowModal) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<Card.Title> |
|
|
|
|
Contactos |
|
|
|
|
<span |
|
|
|
|
style={{ paddingLeft: '10px', cursor: 'pointer' }} |
|
|
|
|
onClick={() => { |
|
|
|
|
setShowModal(!ShowModal) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ color: '#F6A323', size: '25px' }} |
|
|
|
|
> |
|
|
|
|
<AiOutlineUsergroupAdd /> |
|
|
|
|
</IconContext.Provider> |
|
|
|
|
</span> |
|
|
|
|
</Card.Title> |
|
|
|
|
<Row> |
|
|
|
|
<Col xs={12}> |
|
|
|
@ -212,9 +345,11 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
paginationPerPage={10} |
|
|
|
|
pagination |
|
|
|
|
highlightOnHover |
|
|
|
|
columns={colContactosConcepts} |
|
|
|
|
data={Contactos} |
|
|
|
|
selectableRows |
|
|
|
|
columns={colContactos} |
|
|
|
|
data={Contactos.filter(obj1 => !ContactosdelGrupo.some(obj2 => obj1.id === obj2.id))} |
|
|
|
|
pointerOnHover |
|
|
|
|
onSelectedRowsChange={handleRowSelected} |
|
|
|
|
/> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -229,8 +364,13 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
<Col> </Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row> |
|
|
|
|
<Col style={{textAlign:'center'}}> |
|
|
|
|
<Button title='Presione aqui para asignar usuario al grupo'> |
|
|
|
|
<Col style={{ textAlign: 'center' }}> |
|
|
|
|
<Button |
|
|
|
|
title="Presione aqui para asignar usuario al grupo" |
|
|
|
|
onClick={() => { |
|
|
|
|
asignaContactoAlGrupo(1) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<AiFillCaretRight /> |
|
|
|
|
</Button> |
|
|
|
|
</Col> |
|
|
|
@ -245,9 +385,14 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
<Col> </Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row> |
|
|
|
|
<Col style={{textAlign:'center'}}> |
|
|
|
|
<Col style={{ textAlign: 'center' }}> |
|
|
|
|
<Button> |
|
|
|
|
<AiFillCaretLeft title='Presione aqui para desasignar usuario del grupo'/> |
|
|
|
|
<AiFillCaretLeft |
|
|
|
|
title="Presione aqui para desasignar usuario del grupo" |
|
|
|
|
onClick={() => { |
|
|
|
|
asignaContactoAlGrupo(0) |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</Button> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -257,7 +402,23 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
<Card.Body> |
|
|
|
|
<Card.Title>Contactos en el grupo</Card.Title> |
|
|
|
|
<Row> |
|
|
|
|
<Col xs={12}></Col> |
|
|
|
|
<Col xs={12}> |
|
|
|
|
<DataTable |
|
|
|
|
noHeader |
|
|
|
|
defaultSortFieldId={'id'} |
|
|
|
|
defaultSortAsc={true} |
|
|
|
|
striped={true} |
|
|
|
|
dense={true} |
|
|
|
|
paginationPerPage={10} |
|
|
|
|
pagination |
|
|
|
|
highlightOnHover |
|
|
|
|
selectableRows |
|
|
|
|
columns={colContactos} |
|
|
|
|
data={ContactosdelGrupo} |
|
|
|
|
pointerOnHover |
|
|
|
|
onSelectedRowsChange={handleRowSelected} |
|
|
|
|
/> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</Card.Body> |
|
|
|
|
</Card> |
|
|
|
@ -389,6 +550,50 @@ export function Notificaciones(props: INotificacionesProps) { |
|
|
|
|
</div> |
|
|
|
|
</Modal.Body> |
|
|
|
|
</Modal> |
|
|
|
|
|
|
|
|
|
<Modal |
|
|
|
|
show={ShowModalG} |
|
|
|
|
onHide={() => { |
|
|
|
|
setShowModalG(false) |
|
|
|
|
}} |
|
|
|
|
size={'sm'} |
|
|
|
|
dialogClassName={'modal-50w'} |
|
|
|
|
closeButton |
|
|
|
|
> |
|
|
|
|
<Modal.Body> |
|
|
|
|
<div style={{ height: '70px', paddingTop: '10px' }}> |
|
|
|
|
<Row> |
|
|
|
|
<Col xs={10}> |
|
|
|
|
<FloatingLabel |
|
|
|
|
controlId="floatingInput" |
|
|
|
|
label="Grupo" |
|
|
|
|
className="mb-3" |
|
|
|
|
> |
|
|
|
|
<Form.Control |
|
|
|
|
type="text" |
|
|
|
|
placeholder="Grupo" |
|
|
|
|
value={Grupo} |
|
|
|
|
onChange={(e: any) => { |
|
|
|
|
setGrupo(e.target.value) |
|
|
|
|
}} |
|
|
|
|
style={{ height: '45px' }} |
|
|
|
|
/> |
|
|
|
|
</FloatingLabel> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={2}> |
|
|
|
|
<Button |
|
|
|
|
onClick={() => { |
|
|
|
|
saveGroup() |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
Guardar |
|
|
|
|
</Button> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
</Modal.Body> |
|
|
|
|
</Modal> |
|
|
|
|
|
|
|
|
|
<MsgInformativo |
|
|
|
|
show={show} |
|
|
|
|
msg={msg} |
|
|
|
|