Se pueden agregar Contactos, Grupos y aasignar contactos al grupo

src/Components/Utils/Notificaciones/Notificaciones.tsx

@@ -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>&nbsp;</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>&nbsp;</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}

src/DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo.ts

@@ -0,0 +1,5 @@
+export default interface DTONotificacionesContactoGrupo {
+    idgrupo: number,
+    accion: number,
+    contactos: number[]
+}

src/Interfaces/Utils/INotificacionesGrupos.ts

@@ -1,5 +1,5 @@
 export default interface INotificacionesGrupos {
   id: number
   grupo: string
-  activo: number
+  activo?: number
 }

src/Services/Utils/Notificaciones/Notificaciones.Services.ts

@@ -2,23 +2,27 @@ import http from "../../common/http-common";
 import INotificacionesContactos from "../../../Interfaces/Utils/INotificacionesContactos";
 import INotificacionesGrupos from "../../../Interfaces/Utils/INotificacionesGrupos";
 import INotificacionesContactosGrupos from "../../../Interfaces/Utils/INotificacionesContactosGrupos";
+import DTONotificacionesContactoGrupo from "../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo";
 
 class CorresponsalesDataService {
 
   ContactosAppend(data: INotificacionesContactos) {
-    return http.post<INotificacionesContactos>("/Notificaciones/Contacto/Append", data);
+    return http.post<INotificacionesContactos>(`/Notificaciones/Contacto/Append`, data);
   }
   ContactosGet() {
     return http.get<INotificacionesContactos[]>(`/Notificaciones/Contacto/Get`);
   }
   GruposAppend(data: INotificacionesGrupos) {
-    return http.post<INotificacionesGrupos>("/Corresponsalias/Anticipos/Append", data);
+    return http.post<INotificacionesGrupos>(`/Notificaciones/Grupos/Append`, data);
   }
   GruposGet() {
-    return http.get<INotificacionesGrupos[]>(`/Corresponsalias/Anticipos/Get`);
+    return http.get<INotificacionesGrupos[]>(`/Notificaciones/Grupos/Get`);
   }
-  ContactosGruposAction(data: INotificacionesContactosGrupos) {
-    return http.post<INotificacionesContactosGrupos>("/Corresponsalias/Anticipos/Append", data);
+  AsignacionContactosGrupos(data: DTONotificacionesContactoGrupo) {
+    return http.post<DTONotificacionesContactoGrupo>(`/Notificaciones/Asignacion/Contactos/Grupos`, data);
+  }
+  ContactosdelGrupoGet(IdGrupo: number) {
+    return http.get<INotificacionesContactos[]>(`/Notificaciones/ContactosdelGrupo/Get?idGrupo=${IdGrupo}`);
   }