alfonso
/
GEMCOFrontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Se ele agrega facultad para poder manejar catalogo de conceptos en las notificaciones

Browse Source
AmazonRelease1.1
unknown 2 years ago
parent a6d64de16c
commit 3d256abb6f
8 changed files with 655 additions and 130 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/Components/GEMCO/Facturacion/Anexo/RptConsolidadosSinCerrar.tsx
  2. 226
      src/Components/GEMCO/Facturacion/Anexo/RptRelacionAlen.tsx
  3. 138
      src/Components/GEMCO/Facturacion/Anexo/RptRelacionMission.tsx
  4. 346
      src/Components/Utils/Notificaciones/Notificaciones.tsx
  5. 5
      src/Interfaces/Utils/INotificacionesConceptos.ts
  6. 1
      src/Interfaces/Utils/INotificacionesContactos.ts
  7. 13
      src/Services/Utils/Notificaciones/Notificaciones.Services.ts
  8. 54
      src/css/autoComplete.css

2
src/Components/GEMCO/Facturacion/Anexo/RptConsolidadosSinCerrar.tsx
Unescape View File

@ -35,7 +35,7 @@ export default function RtpConsolidadosSinCerrar(
]
const downloadExcel = () => {
exportExcel(Data, 'Relacion Mission')
exportExcel(Data, 'Consolidados sin cerrar')
}
function exportExcel(jsonData: any[], fileName: string): void {

226
src/Components/GEMCO/Facturacion/Anexo/RptRelacionAlen.tsx
Unescape View File

@ -8,6 +8,7 @@ import DTOAnexoFacturacionMission from '../../../../DTO/Facturacion/Anexo/DTOAne
import IAnexoFacturacionAlen from '../../../../Interfaces/Facturacion/Anexo/IAnexoFacturacionAlen'
import DSAnexoFacturacion from '../../../../Services/Facturacion/Anexo/Anexo.Facturacion.Services'
import DTOAnexoFacturacionAlen from '../../../../DTO/Facturacion/Anexo/DTOAnexoFacturacionAlen'
import * as CurrencyFormat from 'react-currency-format'
export interface IRptRelacionAlenProps {}
@ -24,114 +25,121 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
name: 'Referencia',
width: '110px',
cell: (row: IAnexoFacturacionAlen) => row.sReferencia,
sortable: true,
sortable: true
},
{
name: 'Remesa',
width: '90px',
cell: (row: IAnexoFacturacionAlen) => row.remesa,
sortable: true,
sortable: true
},
{
name: 'Entrega',
width: '200px',
cell: (row: IAnexoFacturacionAlen) => row.entrega,
sortable: true,
sortable: true
},
{
name: 'Numero',
width: '180px',
cell: (row: IAnexoFacturacionAlen) => row.sNumero,
sortable: true,
sortable: true
},
{
name: 'Fecha',
width: '100px',
cell: (row: IAnexoFacturacionAlen) => row.dFecha,
sortable: true,
sortable: true
},
{
name: 'eDocument',
width: '140px',
cell: (row: IAnexoFacturacionAlen) => row.sEDocument,
sortable: true,
sortable: true
},
{
name: 'Val factura',
width: '105px',
cell: (row: IAnexoFacturacionAlen) => row.valorFactura,
sortable: true,
sortable: true
},
{
name: 'Pedimento',
width: '110px',
cell: (row: IAnexoFacturacionAlen) => row.sPedimento,
sortable: true,
sortable: true
},
{
name: 'Cruce',
width: '150px',
cell: (row: IAnexoFacturacionAlen) => row.cruce,
sortable: true,
sortable: true
},
{
name: 'Semaforo',
width: '125px',
cell: (row: IAnexoFacturacionAlen) => row.semaforo,
sortable: true,
sortable: true
},
{
name: 'Fecha Cta Corresponsal',
width: '125px',
cell: (row: IAnexoFacturacionAlen) => row.fechaCtaCorresponsal,
sortable: true,
sortable: true
},
{
name: 'Honorarios',
width: '110px',
cell: (row: IAnexoFacturacionAlen) => (Math.round(row.honorarios * 100) / 100).toFixed(2),
sortable: true,
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.honorarios * 100) / 100).toFixed(2),
sortable: true
},
{
name: 'Maniobras',
width: '120px',
cell: (row: IAnexoFacturacionAlen) => (Math.round(row.maniobras * 100) / 100).toFixed(2),
sortable: true,
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.maniobras * 100) / 100).toFixed(2),
sortable: true
},
{
name: 'Validacion',
width: '120px',
cell: (row: IAnexoFacturacionAlen) => (Math.round(row.validacion * 100) / 100).toFixed(2),
sortable: true,
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.validacion * 100) / 100).toFixed(2),
sortable: true
},
{
name: 'Prevalidacion',
width: '120px',
cell: (row: IAnexoFacturacionAlen) => (Math.round(row.prevalidacion * 100) / 100).toFixed(2),
sortable: true,
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.prevalidacion * 100) / 100).toFixed(2),
sortable: true
},
{
name: 'Coordinacion',
width: '120px',
cell: (row: IAnexoFacturacionAlen) =>(Math.round(row.coordinacion * 100) / 100).toFixed(2),
sortable: true,
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.coordinacion * 100) / 100).toFixed(2),
sortable: true
},
{
name: 'IVA',
width: '120px',
cell: (row: IAnexoFacturacionAlen) => (Math.round(row.iva * 100) / 100).toFixed(2),
sortable: true,
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.iva * 100) / 100).toFixed(2),
sortable: true
},
{
name: 'Total MN',
width: '120px',
cell: (row: IAnexoFacturacionAlen) => (Math.round(row.totalMN * 100) / 100).toFixed(2),
sortable: true,
},
cell: (row: IAnexoFacturacionAlen) =>
(Math.round(row.totalMN * 100) / 100).toFixed(2),
sortable: true
}
]
const downloadExcel = () => {
exportExcel(Data, 'Relacion Alen '+Referencia)
exportExcel(Data, 'Relacion Alen ' + Referencia)
}
function exportExcel(jsonData: any[], fileName: string): void {
@ -155,7 +163,7 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
'Coordinacion',
'IVA',
'Total MN'
],
]
]
const wb = XLSX.utils.book_new()
const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([])
@ -177,7 +185,7 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
nHonorarios: Honorarios,
nValidacion: Validacion,
nPrevalidacion: Prevalidacion,
nCoordinacion: Coordinacion,
nCoordinacion: Coordinacion
}
DSAnexoFacturacion.GetAlen(data)
.then((response) => {
@ -197,12 +205,14 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
<Card.Body>
<Card.Title>
<Row>
<Col xs={3}>Relacion Alen : {Total>0 ? Total-1 : Total} registros</Col>
<Col xs={3}>
Relacion Alen : {Total > 0 ? Total - 1 : Total} registros
</Col>
<Col xs={8}></Col>
<Col xs={1} className='colAlignRight'>
<Col xs={1} className="colAlignRight">
<Button
size='sm'
variant='success'
size="sm"
variant="success"
onClick={() => {
downloadExcel()
}}
@ -213,67 +223,139 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
</Col>
</Row>
</Card.Title>
<Card.Subtitle className='mb-2 text-muted'>
<Card.Subtitle className="mb-2 text-muted">
<Row>
<Col className='colAlignRight'>Referencia: </Col>
<Col className="colAlignRight">Referencia: </Col>
<Col>
<Form.Control
type='text'
size='sm'
placeholder='Referencia'
type="text"
size="sm"
placeholder="Referencia"
onChange={(e: any) => {
setReferencia(e.target.value)
}}
/>
</Col>
<Col className='colAlignRight'>Honorarios:</Col>
<Col className="colAlignRight">Honorarios:</Col>
<Col>
<Form.Control
{/* <Form.Control
type='number'
size='sm'
placeholder='Honorarios'
onChange={(e: any) => {
setHonorarios(e.target.value)
}}
/> */}
<CurrencyFormat
value={Honorarios}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setHonorarios(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col className='colAlignRight'>Validacion:</Col>
<Col className="colAlignRight">Validacion:</Col>
<Col>
<Form.Control
type='number'
size='sm'
placeholder='Validacion'
{/* <Form.Control
type="number"
size="sm"
placeholder="Validacion"
onChange={(e: any) => {
setValidacion(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={Validacion}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setValidacion(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col className='colAlignRight'>Prevalidacion:</Col>
<Col className="colAlignRight">Prevalidacion:</Col>
<Col>
<Form.Control
type='number'
size='sm'
placeholder='Prevalidacion'
{/* <Form.Control
type="number"
size="sm"
placeholder="Prevalidacion"
onChange={(e: any) => {
setPrevalidacion(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={Prevalidacion}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setPrevalidacion(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col className='colAlignRight'>Coordinacion:</Col>
<Col className="colAlignRight">Coordinacion:</Col>
<Col>
<Form.Control
type='number'
size='sm'
placeholder='Coordinacion'
{/* <Form.Control
type="number"
size="sm"
placeholder="Coordinacion"
onChange={(e: any) => {
setCoordinacion(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={Coordinacion}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setCoordinacion(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col>
<Button
variant='primary'
size='sm'
variant="primary"
size="sm"
onClick={() => {
generaReporte()
}}
@ -290,19 +372,19 @@ export default function RptRelacionAlen(props: IRptRelacionAlenProps) {
<Row>
<Col xs={12}>
<DataTable
dense
noHeader
defaultSortFieldId={'cliente'}
defaultSortAsc={true}
fixedHeaderScrollHeight="550px"
striped={true}
fixedHeader
/* paginationPerPage={10}
dense
noHeader
defaultSortFieldId={'cliente'}
defaultSortAsc={true}
fixedHeaderScrollHeight="550px"
striped={true}
fixedHeader
/* paginationPerPage={10}
pagination */
highlightOnHover
columns={columnsConcepts}
data={Data}
pointerOnHover
highlightOnHover
columns={columnsConcepts}
data={Data}
pointerOnHover
/>
</Col>
</Row>

138
src/Components/GEMCO/Facturacion/Anexo/RptRelacionMission.tsx
Unescape View File

@ -4,6 +4,7 @@ import DataTable from 'react-data-table-component'
import { BsFileEarmarkExcel, BsSearch } from 'react-icons/bs'
import '../../../../css/generic01.css'
import * as XLSX from 'xlsx'
import * as CurrencyFormat from 'react-currency-format'
import DTOAnexoFacturacionMission from '../../../../DTO/Facturacion/Anexo/DTOAnexoFacturacionMission'
import IAnexoFacturacionMission from '../../../../Interfaces/Facturacion/Anexo/IAnexoFacturacionMission'
import DSAnexoFacturacion from '../../../../Services/Facturacion/Anexo/Anexo.Facturacion.Services'
@ -53,49 +54,57 @@ export default function RptRelacionMission(props: IRptRelacionMissionProps) {
{
name: 'Ctr',
width: '80px',
cell: (row: IAnexoFacturacionMission) => row.contraprestacion,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.contraprestacion * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'Cruce',
width: '100px',
cell: (row: IAnexoFacturacionMission) => row.cruce,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.cruce * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'Flete',
width: '100px',
cell: (row: IAnexoFacturacionMission) => row.flete,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.flete * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'Otros Serv.',
width: '125px',
cell: (row: IAnexoFacturacionMission) => row.otrosServicios,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.otrosServicios * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'Tot Comp',
width: '125px',
cell: (row: IAnexoFacturacionMission) => row.totComp,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.totComp * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'Honorarios',
width: '125px',
cell: (row: IAnexoFacturacionMission) => row.honorarios,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.honorarios * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'IVA',
width: '80px',
cell: (row: IAnexoFacturacionMission) => row.iva,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.iva * 100) / 100).toFixed(2),
sortable: true,
},
{
name: 'Total',
width: '120px',
cell: (row: IAnexoFacturacionMission) => row.total,
cell: (row: IAnexoFacturacionMission) =>
(Math.round(row.total * 100) / 100).toFixed(2),
sortable: true,
},
]
@ -180,25 +189,61 @@ export default function RptRelacionMission(props: IRptRelacionMissionProps) {
</Col>
<Col className='colAlignRight'>Coord de cruce:</Col>
<Col>
<Form.Control
{/* <Form.Control
type='number'
size='sm'
placeholder='Coordinacion cruce'
onChange={(e: any) => {
setCoordinacionCruce(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={CoordinacionCruce}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setCoordinacionCruce(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col className='colAlignRight'>Coord de flete:</Col>
<Col>
<Form.Control
{/* <Form.Control
type='number'
size='sm'
placeholder='Coordinacion flete'
onChange={(e: any) => {
setCoordinacionFlete(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={CoordinacionFlete}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setCoordinacionFlete(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col>&nbsp;</Col>
</Row>
@ -206,39 +251,92 @@ export default function RptRelacionMission(props: IRptRelacionMissionProps) {
<Row>
<Col className='colAlignRight'>Servicio:</Col>
<Col>
<Form.Control
{/* <Form.Control
type='number'
size='sm'
placeholder='Servicio'
onChange={(e: any) => {
setServicio(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={Servicio}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setServicio(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col className='colAlignRight'>Contrapestracion:</Col>
<Col className='colAlignRight'>Contraprestacion:</Col>
<Col>
<Form.Control
{/* <Form.Control
type='number'
size='sm'
placeholder='Contraprestacion'
onChange={(e: any) => {
setContraprestacion(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={Contraprestacion}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setContraprestacion(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col className='colAlignRight'>Honorarios:</Col>
<Col>
<Form.Control
{/* <Form.Control
type='number'
size='sm'
placeholder='Honorarios'
onChange={(e: any) => {
setHonorarios(e.target.value)
}}
/>
/> */}
<CurrencyFormat
value={Honorarios}
displayType={'input'}
thousandSeparator={true}
decimalScale={2}
onValueChange={(values: any) => {
const { value } = values
setHonorarios(value)
}}
style={{
fontSize: '18px',
backgroundColor: '#F5FFED',
border: '2px solid #25D05B',
width: '100px',
textAlign: 'right',
borderRadius: '10px'
}}
/>
</Col>
<Col>
{' '}
<Button
variant='primary'
size='sm'

346
src/Components/Utils/Notificaciones/Notificaciones.tsx
Unescape View File

@ -4,6 +4,7 @@ import {
Button,
Card,
Col,
Dropdown,
FloatingLabel,
Form,
Modal,
@ -18,6 +19,7 @@ import NotificacionesDS from '../../../Services/Utils/Notificaciones/Notificacio
import {
AiFillCaretLeft,
AiFillCaretRight,
AiOutlineProfile,
AiOutlineTeam,
AiOutlineUsergroupAdd
} from 'react-icons/ai'
@ -25,6 +27,7 @@ import { IconContext } from 'react-icons'
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'
export interface INotificacionesProps {}
@ -32,18 +35,30 @@ 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 [CatConceptos, setCatConceptos] = useState<INotificacionesConceptos[]>(
[]
)
const [ContactosdelGrupo, setContactosdelGrupo] = useState<
INotificacionesContactos[]
>([])
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('')
const [IdConcepto, setIdConcepto] = useState(0)
const [IdContacto, setIdContacto] = useState(0)
const [Nombre, setNombre] = useState('')
const [Puesto, setPuesto] = useState('')
const [Pais, setPais] = useState('+52')
const [Celular, setCelular] = useState('')
const [Empresa, setEmpresa] = useState('')
const [Activo, setActivo] = useState(1)
const [ShowModal, setShowModal] = useState(false)
const [ShowModalG, setShowModalG] = useState(false)
const [ShowModalC, setShowModalC] = useState(false)
const [SelectedConcepto, setSelectedConcepto] = useState(true)
const [header, setHeader] = useState('')
const [show, setShowMsg] = useState(false)
const [msg, setMsg] = useState('')
@ -62,17 +77,17 @@ export function Notificaciones(props: INotificacionesProps) {
},
{
name: 'Celular',
width: '110px',
width: '130px',
cell: (row: INotificacionesContactos) => (
<div style={{ width: '100%' }} onClick={() => {}}>
{row.celular}
{(row.pais ? row.pais : '') + row.celular}
</div>
),
sortable: true
},
{
name: 'Nombre',
width: '200px',
width: '150px',
cell: (row: INotificacionesContactos) => (
<div style={{ width: '100%' }} onClick={() => {}}>
{row.nombre}
@ -81,21 +96,21 @@ export function Notificaciones(props: INotificacionesProps) {
sortable: true
},
{
name: 'Puesto',
width: '250px',
name: 'Empresa',
width: '200px',
cell: (row: INotificacionesContactos) => (
<div style={{ width: '100%' }} onClick={() => {}}>
{row.puesto}
{row.empresa}
</div>
),
sortable: true
},
{
name: 'Empresa',
width: '125px',
name: 'Puesto',
width: '200px',
cell: (row: INotificacionesContactos) => (
<div style={{ width: '100%' }} onClick={() => {}}>
{row.empresa}
{row.puesto}
</div>
),
sortable: true
@ -123,6 +138,7 @@ export function Notificaciones(props: INotificacionesProps) {
id: IdContacto,
nombre: Nombre,
puesto: Puesto,
pais: Pais,
celular: Celular,
empresa: Empresa,
activo: Activo
@ -168,6 +184,33 @@ export function Notificaciones(props: INotificacionesProps) {
})
}
const saveConcept = () => {
if (!Concepto) {
setHeader('Error')
setMsg('Favor de proporcionar el concepto')
setShowMsg(true)
return
}
const data: INotificacionesConceptos = {
id: IdConcepto,
concepto: Concepto,
activo: 1
}
NotificacionesDS.Conceptos$Append(data)
.then((response) => {
setHeader('Informativo')
setMsg('Se encontro la siguiente informacion...')
loadAllConcepts()
setShowMsg(true)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
const loadAllContacts = () => {
NotificacionesDS.ContactosGet()
.then((response) => {
@ -181,6 +224,19 @@ export function Notificaciones(props: INotificacionesProps) {
})
}
const loadAllConcepts = () => {
NotificacionesDS.Conceptos$Get()
.then((response) => {
setCatConceptos(response.data)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
const loadGroupContacts = () => {
NotificacionesDS.ContactosdelGrupoGet(IdGrupo)
.then((response) => {
@ -210,13 +266,33 @@ export function Notificaciones(props: INotificacionesProps) {
useEffect(() => {
loadAllContacts()
loadGroups()
loadAllConcepts()
}, [])
useEffect(() => {
if (ShowModal) {
if (selectedRows.length > 0) {
const listaContactos: INotificacionesContactos[] = selectedRows
setIdContacto(listaContactos[0].id)
setNombre(listaContactos[0].nombre)
setPuesto(listaContactos[0].puesto)
setEmpresa(listaContactos[0].empresa)
setCelular(listaContactos[0].celular)
setActivo(listaContactos[0].activo)
}
}
}, [ShowModal])
useEffect(() => {
loadGroupContacts()
}, [IdGrupo])
useEffect(() => {
if (Concepto.length === 0) {
setIdConcepto(0)
}
}, [Concepto])
const handleRowSelected = React.useCallback((state) => {
setSelectedRows(state.selectedRows)
}, [])
@ -247,6 +323,7 @@ export function Notificaciones(props: INotificacionesProps) {
: `Se eliminaron los contactos del grupo`
)
setShowMsg(true)
loadGroupContacts()
})
.catch((e: Error) => {
setHeader('Error')
@ -256,22 +333,109 @@ export function Notificaciones(props: INotificacionesProps) {
})
}
const sendWhattsapp = () => {
if (IdConcepto===0) {
setHeader('Error')
setMsg('Para enviar un concepto primero debe guardarlo en el catalogo')
setShowMsg(true)
return
}
if (IdGrupo===0) {
setHeader('Error')
setMsg('Para enviar un mensaje primero debe seleccionar el grupo')
setShowMsg(true)
return
}
NotificacionesDS.SendWhattsapp(IdConcepto, Mensaje, IdGrupo)
.then((response) => {
setHeader('Informativo')
setMsg(`El mensaje se ha enviado satisfactoriamente`)
setShowMsg(true)
})
.catch((e: Error) => {
setHeader('Error')
setMsg('Ocurrio un error: ' + e)
setShowMsg(true)
return
})
}
const handleKeyDown = (e: any) => {
if (e.keyCode === 40) {
console.log('arrow down')
}
}
return (
<div>
<Card>
<Card.Body>
<Card.Title>Notificaciones</Card.Title>
<Row>
<Col xs={1}>Mensaje</Col>
<Col xs={1}>
Mensaje
<span
style={{ paddingLeft: '5px', cursor: 'pointer' }}
onClick={() => {
setShowModalC(!ShowModalC)
}}
>
<IconContext.Provider
value={{ color: '#23A0F6', size: '25px' }}
>
<AiOutlineProfile />
</IconContext.Provider>
</span>
</Col>
<Col xs={5}>
<Form.Control
{/* <Form.Control
type="text"
placeholder="Teclee aqui el mensaje que desea enviar..."
size="sm"
value={Mensaje}
onChange={(e: any) => {
setMensaje(e)
setMensaje(e.target.value)
}}
/>
/> */}
<Form.Group className="typeahead-form-group">
<Form.Control
autoComplete="off"
type="text"
id="Cliente"
value={Concepto}
size="sm"
className="pull-right"
onChange={(e) => {
setConcepto(e.target.value)
setSelectedConcepto(false)
}}
onKeyDown={(e) => {
handleKeyDown(e)
}}
/>
<Dropdown
className="d-inline mx-6"
show={!SelectedConcepto && Concepto.length > 1}
>
<Dropdown.Menu>
{CatConceptos.filter((result) =>
result.concepto
.toLocaleLowerCase()
.includes(Concepto.toLocaleLowerCase())
).map((result) => (
<Dropdown.Item
onClick={() => {
setIdConcepto(result.id)
setConcepto(result.concepto)
setSelectedConcepto(true)
}}
>
{result.concepto}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Form.Group>
</Col>
<Col xs={1} style={{ textAlign: 'right' }}>
Grupo
@ -309,7 +473,13 @@ export function Notificaciones(props: INotificacionesProps) {
</Form.Control>
</Col>
<Col>
<Button>Enviar</Button>
<Button
onClick={() => {
sendWhattsapp()
}}
>
Enviar
</Button>
</Col>
</Row>
<Row>
@ -320,19 +490,34 @@ export function Notificaciones(props: INotificacionesProps) {
<Card>
<Card.Body>
<Card.Title>
Contactos
<span
style={{ paddingLeft: '10px', cursor: 'pointer' }}
onClick={() => {
setShowModal(!ShowModal)
}}
>
<IconContext.Provider
value={{ color: '#F6A323', size: '25px' }}
>
<AiOutlineUsergroupAdd />
</IconContext.Provider>
</span>
<Row>
<Col xs={3}>
Contactos
<span
style={{ paddingLeft: '10px', cursor: 'pointer' }}
onClick={() => {
setShowModal(!ShowModal)
}}
>
<IconContext.Provider
value={{ color: '#F6A323', size: '25px' }}
>
<AiOutlineUsergroupAdd />
</IconContext.Provider>
</span>
</Col>
<Col>
<Form.Control
type="text"
placeholder="Search..."
size="sm"
onChange={(e) => {
setFiltro(e.target.value)
console.log(Filtro)
}}
/>
</Col>
</Row>
</Card.Title>
<Row>
<Col xs={12}>
@ -347,7 +532,19 @@ export function Notificaciones(props: INotificacionesProps) {
highlightOnHover
selectableRows
columns={colContactos}
data={Contactos.filter(obj1 => !ContactosdelGrupo.some(obj2 => obj1.id === obj2.id))}
data={Contactos.filter(
(obj1) =>
!ContactosdelGrupo.some(
(obj2) => obj1.id === obj2.id
)
).filter(function (row) {
return (
row.celular.includes(Filtro) ||
row.nombre.includes(Filtro) ||
row.puesto.includes(Filtro) ||
row.empresa.includes(Filtro)
)
})}
pointerOnHover
onSelectedRowsChange={handleRowSelected}
/>
@ -400,7 +597,21 @@ export function Notificaciones(props: INotificacionesProps) {
<Col xs={5}>
<Card>
<Card.Body>
<Card.Title>Contactos en el grupo</Card.Title>
<Card.Title>
<Row>
<Col xs={5}>Contactos en el grupo</Col>
<Col>
<Form.Control
type="text"
placeholder="Search..."
size="sm"
onChange={(e) => {
setFiltroEnGrupo(e.target.value)
}}
/>
</Col>
</Row>
</Card.Title>
<Row>
<Col xs={12}>
<DataTable
@ -414,7 +625,14 @@ export function Notificaciones(props: INotificacionesProps) {
highlightOnHover
selectableRows
columns={colContactos}
data={ContactosdelGrupo}
data={ContactosdelGrupo.filter(function (row) {
return (
row.celular.includes(FiltroEnGrupo) ||
row.nombre.includes(FiltroEnGrupo) ||
row.puesto.includes(FiltroEnGrupo) ||
row.empresa.includes(FiltroEnGrupo)
)
})}
pointerOnHover
onSelectedRowsChange={handleRowSelected}
/>
@ -472,7 +690,7 @@ export function Notificaciones(props: INotificacionesProps) {
</Col>
</Row>
<Row>
<Col xs={8}>
<Col xs={7}>
<FloatingLabel
controlId="floatingInput"
label="Puesto"
@ -489,16 +707,32 @@ export function Notificaciones(props: INotificacionesProps) {
/>
</FloatingLabel>
</Col>
<Col xs={4}>
<Col xs={2}>
<FloatingLabel controlId="floatingSelect" label="LADA">
<Form.Select
aria-label="Floating label select example"
style={{ height: '55px' }}
value={Pais}
onChange={(e: any) => {
setPais(e.target.value)
}}
>
<option value="+52">MEX</option>
<option value="+1">USA</option>
</Form.Select>
</FloatingLabel>
</Col>
<Col>
<FloatingLabel
controlId="floatingInput"
label="Celular"
className="mb-3"
className=""
>
<Form.Control
type="text"
placeholder="Celular"
value={Celular}
maxLength={10}
style={{ height: '45px' }}
onChange={(e: any) => {
setCelular(e.target.value)
@ -536,7 +770,7 @@ export function Notificaciones(props: INotificacionesProps) {
</Form.Select>
</FloatingLabel>
</Col>
<Col xs={2}>
<Col xs={2} style={{ paddingTop: `10px` }}>
<Button
onClick={() => {
saveContact()
@ -594,6 +828,48 @@ export function Notificaciones(props: INotificacionesProps) {
</Modal.Body>
</Modal>
<Modal
show={ShowModalC}
onHide={() => {
setShowModalC(false)
}}
size={'sm'}
dialogClassName={'modal-50w'}
closeButton
>
<Modal.Body>
<div style={{ height: '70px', paddingTop: '10px' }}>
<Row>
<Col xs={10}>
<FloatingLabel
controlId="floatingInput"
label="Concepto"
className="mb-3"
>
<Form.Control
type="text"
placeholder="Concepto"
value={Concepto}
onChange={(e: any) => {
setConcepto(e.target.value)
}}
style={{ height: '45px' }}
/>
</FloatingLabel>
</Col>
<Col xs={2}>
<Button
onClick={() => {
saveConcept()
}}
>
Guardar
</Button>
</Col>
</Row>
</div>
</Modal.Body>
</Modal>
<MsgInformativo
show={show}
msg={msg}

5
src/Interfaces/Utils/INotificacionesConceptos.ts
Unescape View File

@ -0,0 +1,5 @@
export default interface INotificacionesConceptos {
id: number,
concepto: string,
activo: number
}

1
src/Interfaces/Utils/INotificacionesContactos.ts
Unescape View File

@ -2,6 +2,7 @@ export default interface INotificacionesContactos {
id: number
nombre: string
puesto: string
pais: string
celular: string
empresa: string
activo: number

13
src/Services/Utils/Notificaciones/Notificaciones.Services.ts
Unescape View File

@ -3,9 +3,13 @@ import INotificacionesContactos from "../../../Interfaces/Utils/INotificacionesC
import INotificacionesGrupos from "../../../Interfaces/Utils/INotificacionesGrupos";
import INotificacionesContactosGrupos from "../../../Interfaces/Utils/INotificacionesContactosGrupos";
import DTONotificacionesContactoGrupo from "../../../DTO/Utils/Notificaciones/DTONotificacionesContactoGrupo";
import INotificacionesConceptos from "../../../Interfaces/Utils/INotificacionesConceptos";
import { consumers } from "stream";
class CorresponsalesDataService {
SendWhattsapp(IdConcepto: number, Concepto: string, Grupo: number) {
return http.get<INotificacionesGrupos[]>(`/Notificaciones/SendWhattsapp?IdConcepto=${IdConcepto}&Concepto=${Concepto}&Grupo=${Grupo}`);
}
ContactosAppend(data: INotificacionesContactos) {
return http.post<INotificacionesContactos>(`/Notificaciones/Contacto/Append`, data);
}
@ -24,7 +28,12 @@ class CorresponsalesDataService {
ContactosdelGrupoGet(IdGrupo: number) {
return http.get<INotificacionesContactos[]>(`/Notificaciones/ContactosdelGrupo/Get?idGrupo=${IdGrupo}`);
}
Conceptos$Get() {
return http.get<INotificacionesConceptos[]>(`/Notificaciones/Catalogo/Conceptos/Get`);
}
Conceptos$Append(data: INotificacionesConceptos) {
return http.post<INotificacionesConceptos>(`/Notificaciones/Catalogo/Conceptos/Append`, data);
}
}
export default new CorresponsalesDataService();

54
src/css/autoComplete.css
Unescape View File

@ -0,0 +1,54 @@
.mainDiv {
/* padding-top: 50px; */
font-family: sans-serif;
text-align: left;
/*width: 300px;*/
/*margin: 0 auto;*/
}
.typeahead-form-group {
position: relative;
z-index: 1000;
}
.typeahead-form-group1 {
position: relative;
z-index: 999;
}
.typeahead-form-group2 {
position: relative;
z-index: 998;
}
.typeahead-form-group3 {
position: relative;
z-index: 998;
}
.typeahead-list-group4 {
position: absolute;
width: 100%;
top: 38px;
left: 0;
}
.typeahead-list-group-item {
/* padding: 0.3rem 1.3rem; */
background-color: rgb(228, 243, 240);
}
.typeahead-list-group-item:hover {
cursor: pointer;
background: #2d4ddc;
color: #fff;
}
.textBoxViaje {
z-index: 100;
}
.textField {
margin-right: 0px !important;
padding-right: 0px;
}
Write Preview
Loading…
Cancel
Save