Se le agregan a las notificaciones el catalog de conceptos y poder visualizar el log de mensajes enviados

src/Components/Utils/Notificaciones/Notificaciones.tsx

@@ -19,6 +19,7 @@ import NotificacionesDS from '../../../Services/Utils/Notificaciones/Notificacio
 import {
   AiFillCaretLeft,
   AiFillCaretRight,
+  AiOutlineFileSearch,
   AiOutlineProfile,
   AiOutlineTeam,
   AiOutlineUsergroupAdd
@@ -28,11 +29,17 @@ import { HiCurrencyDollar } from 'react-icons/hi'
 import DTONotificacionesContactoGrupo from '../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo'
 import { number } from 'yup/lib/locale'
 import INotificacionesConceptos from '../../../Interfaces/Utils/INotificacionesConceptos'
+import INotificacionesLog from '../../../Interfaces/Utils/INotificacionesLog'
 
 export interface INotificacionesProps {}
 
 export function Notificaciones(props: INotificacionesProps) {
+  const [UserId, setUserId] = useState(() => {
+    const stickyValue = window.localStorage.getItem('UserId')
+    return stickyValue !== null ? JSON.parse(stickyValue) : 0
+  })
   const [selectedRows, setSelectedRows] = React.useState([])
+  const [Log, setLog] = useState<INotificacionesLog[]>([])
   const [Grupos, setGrupos] = useState<INotificacionesGrupos[]>([])
   const [Contactos, setContactos] = useState<INotificacionesContactos[]>([])
   const [CatConceptos, setCatConceptos] = useState<INotificacionesConceptos[]>(
@@ -43,7 +50,6 @@ export function Notificaciones(props: INotificacionesProps) {
   >([])
   const [Filtro, setFiltro] = useState('')
   const [FiltroEnGrupo, setFiltroEnGrupo] = useState('')
-  const [Mensaje, setMensaje] = useState('')
   const [Grupo, setGrupo] = useState('')
   const [IdGrupo, setIdGrupo] = useState(0)
   const [Concepto, setConcepto] = useState('')
@@ -58,6 +64,7 @@ export function Notificaciones(props: INotificacionesProps) {
   const [ShowModal, setShowModal] = useState(false)
   const [ShowModalG, setShowModalG] = useState(false)
   const [ShowModalC, setShowModalC] = useState(false)
+  const [ShowModalLog, setShowModalLog] = useState(false)
   const [SelectedConcepto, setSelectedConcepto] = useState(true)
   const [header, setHeader] = useState('')
   const [show, setShowMsg] = useState(false)
@@ -127,6 +134,39 @@ export function Notificaciones(props: INotificacionesProps) {
     }
   ]
 
+  const colLog = [
+    {
+      name: 'id',
+      width: '60px',
+      cell: (row: INotificacionesLog) => <div>{row.id}</div>,
+      sortable: true
+    },
+    {
+      name: 'Envia',
+      width: '130px',
+      cell: (row: INotificacionesLog) => <div>{row.envia}</div>,
+      sortable: true
+    },
+    {
+      name: 'Concepto',
+      width: '300px',
+      cell: (row: INotificacionesLog) => <div>{row.concepto}</div>,
+      sortable: true
+    },
+    {
+      name: 'Enviado a...',
+      width: '600px',
+      cell: (row: INotificacionesLog) => <div>{row.contactos}</div>,
+      sortable: true
+    },
+    {
+      name: 'Fecha / hora',
+      width: '200px',
+      cell: (row: INotificacionesLog) => <div>{row.fhCreacion}</div>,
+      sortable: true
+    }
+  ]
+
   const saveContact = () => {
     if (!Nombre) {
       setHeader('Error')
@@ -269,6 +309,21 @@ export function Notificaciones(props: INotificacionesProps) {
     loadAllConcepts()
   }, [])
 
+  useEffect(() => {
+    if (ShowModalLog) {
+      NotificacionesDS.Log$Get()
+        .then((response) => {
+          setLog(response.data)
+        })
+        .catch((e: Error) => {
+          setHeader('Error')
+          setMsg('Ocurrio un error: ' + e)
+          setShowMsg(true)
+          return
+        })
+    }
+  }, [ShowModalLog])
+
   useEffect(() => {
     if (ShowModal) {
       if (selectedRows.length > 0) {
@@ -334,19 +389,19 @@ export function Notificaciones(props: INotificacionesProps) {
   }
 
   const sendWhattsapp = () => {
-    if (IdConcepto===0) {
+    if (IdConcepto === 0) {
-        setHeader('Error')
+      setHeader('Error')
-        setMsg('Para enviar un concepto primero debe guardarlo en el catalogo')
+      setMsg('Para enviar un concepto primero debe guardarlo en el catalogo')
-        setShowMsg(true)
+      setShowMsg(true)
-        return
+      return
     }
-    if (IdGrupo===0) {
+    if (IdGrupo === 0) {
       setHeader('Error')
       setMsg('Para enviar un mensaje primero debe seleccionar el grupo')
       setShowMsg(true)
       return
-  }
+    }
-    NotificacionesDS.SendWhattsapp(IdConcepto, Mensaje, IdGrupo)
+    NotificacionesDS.SendWhattsapp(UserId, Concepto, IdGrupo)
       .then((response) => {
         setHeader('Informativo')
         setMsg(`El mensaje se ha enviado satisfactoriamente`)
@@ -370,7 +425,19 @@ export function Notificaciones(props: INotificacionesProps) {
     <div>
       <Card>
         <Card.Body>
-          <Card.Title>Notificaciones</Card.Title>
+          <Card.Title>
+            Notificaciones{' '}
+            <span
+              style={{ paddingLeft: '5px', cursor: 'pointer' }}
+              onClick={() => {
+                setShowModalLog(!ShowModalLog)
+              }}
+            >
+              <IconContext.Provider value={{ color: '#5923F6', size: '25px' }}>
+                <AiOutlineFileSearch />
+              </IconContext.Provider>
+            </span>
+          </Card.Title>
           <Row>
             <Col xs={1}>
               Mensaje
@@ -388,15 +455,6 @@ export function Notificaciones(props: INotificacionesProps) {
               </span>
             </Col>
             <Col xs={5}>
-              {/* <Form.Control
-                type="text"
-                placeholder="Teclee aqui el mensaje que desea enviar..."
-                size="sm"
-                value={Mensaje}
-                onChange={(e: any) => {
-                  setMensaje(e.target.value)
-                }}
-              /> */}
               <Form.Group className="typeahead-form-group">
                 <Form.Control
                   autoComplete="off"
@@ -870,6 +928,39 @@ export function Notificaciones(props: INotificacionesProps) {
           </div>
         </Modal.Body>
       </Modal>
+
+      <Modal
+        show={ShowModalLog}
+        onHide={() => {
+          setShowModalLog(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-90w'}
+        closeButton
+      >
+        <Modal.Body>
+          <div style={{ height: '600px', paddingTop: '10px' }}>
+            <Row>
+              <Col xs={12}>
+                <DataTable
+                  noHeader
+                  defaultSortFieldId={'id'}
+                  defaultSortAsc={true}
+                  striped={true}
+                  dense={true}
+                  paginationPerPage={10}
+                  pagination
+                  highlightOnHover
+                  columns={colLog}
+                  data={Log}
+                  pointerOnHover
+                  onSelectedRowsChange={handleRowSelected}
+                />
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
       <MsgInformativo
         show={show}
         msg={msg}

src/Interfaces/Utils/INotificacionesLog.ts

@@ -0,0 +1,7 @@
+export default interface INotificacionesLog {
+    id: number,
+    envia: string,
+    concepto: string,
+    contactos: string,
+    fhCreacion: string
+}

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

@@ -5,10 +5,14 @@ import INotificacionesContactosGrupos from "../../../Interfaces/Utils/INotificac
 import DTONotificacionesContactoGrupo from "../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo";
 import INotificacionesConceptos from "../../../Interfaces/Utils/INotificacionesConceptos";
 import { consumers } from "stream";
+import INotificacionesLog from "../../../Interfaces/Utils/INotificacionesLog";
 
 class CorresponsalesDataService {
-  SendWhattsapp(IdConcepto: number, Concepto: string, Grupo: number) {
+  SendWhattsapp(IdUsuario: number, Concepto: string, IdGrupo: number) {
-    return http.get<INotificacionesGrupos[]>(`/Notificaciones/SendWhattsapp?IdConcepto=${IdConcepto}&Concepto=${Concepto}&Grupo=${Grupo}`);
+    return http.get<INotificacionesGrupos[]>(`/Notificaciones/SendWhattsapp?IdUsuario=${IdUsuario}&Concepto=${Concepto}&IdGrupo=${IdGrupo}`);
+  }
+  Log$Get() {
+    return http.get<INotificacionesLog[]>(`/Notificaciones/Log/Get`);
   }
   ContactosAppend(data: INotificacionesContactos) {
     return http.post<INotificacionesContactos>(`/Notificaciones/Contacto/Append`, data);