{value}}\r\n {\r\n props.row.ESTADO_ALUMNO !== null ? \r\n
: \r\n null}\r\n \r\n );\r\n }\r\n\r\n return (
);\r\n \r\n}\r\n\r\nexport default withStyles(styles) ( \r\nclass App extends React.Component {\r\n\r\ntablaRef = React.createRef();\r\ninput1Ref = React.createRef();\r\ninput2Ref = React.createRef();\r\ninput3Ref = React.createRef();\r\ninput4Ref = React.createRef();\r\ninput5Ref = React.createRef();\r\ninput6Ref = React.createRef();\r\ninput7Ref = React.createRef();\r\ninput8Ref = React.createRef();\r\ninput9Ref = React.createRef();\r\nselect1Ref = React.createRef();\r\nselect2Ref = React.createRef();\r\ndate1Ref = React.createRef();\r\n\r\n constructor (props) {\r\n super(props);\r\n this.l=props.l\r\n this.e=props.e\r\n this.i=props.i\r\n this.state = {\r\n isLoggin : undefined,\r\n loadingMain: true,\r\n rows: [],\r\n openBackDrop: false,\r\n recientes: [],\r\n showWarning: true,\r\n showRecientes: false,\r\n optionsPais: [],\r\n datosSelectTipo: null,\r\n datosSelectSexo: null,\r\n datosSelectEC: null,\r\n activeStep: 0,\r\n openModal: false,\r\n openModalEstadoPlan: false,\r\n checkedConfirm: false,\r\n rowsPlanes: [],\r\n datosSelectEP: null,\r\n };\r\n this.registar = [\r\n {icono: 'Check', toolt: '', nombre: 'Aceptar', onclick: this.handleSave, display:'auto'},\r\n {icono: 'Close', toolt: '', nombre: 'Cerrar' , onclick: this.handleClose, display:'auto', color: 'red'},\r\n ];\r\n this.ubicaciones = [];\r\n this.planes = [];\r\n this.tmp_id_plan=null;\r\n}\r\n\r\nhandleChangeCheck = (event)=>{\r\n\r\nconst { checked, name } = event.target;\r\nthis.setState({ [\"checked\"+name]: checked });\r\n\r\n}\r\n\r\nhandleOpen = ()=>{\r\n\r\n this.planes = []; \r\n this.state.rowsPlanes.map((item)=>{ item.ESTADO_ALUMNO=null; return item; });\r\n this.setState({ showWarning: false,\r\n cuenta: \"\",\r\n apellido1: \"\",\r\n apellido2: \"\",\r\n nombres: \"\",\r\n nombre_completo: \"\",\r\n valuePaisNac: null,\r\n valueDepNac: null,\r\n valueMunNac: null,\r\n selectedTipo: \"\",\r\n identidad: \"\",\r\n selectedSexo: \"\",\r\n fechaNac: null,\r\n selectedEC: \"\",\r\n valuePais: null,\r\n valueDep: null,\r\n valueMun: null,\r\n valueCol: null,\r\n direccion: null,\r\n tel1: null,\r\n tel2: null,\r\n email1: \"\",\r\n email2: null,\r\n optionsDepNac: [],\r\n optionsMunNac: [],\r\n optionsDep: [],\r\n optionsMun: [],\r\n optionsCol: [],\r\n selection: [],\r\n activeStep: 0,\r\n openModal: true }); \r\n}\r\n\r\nhandleClose = ()=>{\r\n this.setState({ openModal: false }, ()=>{\r\n if (!this.state.showRecientes) this.setState({ showRecientes: true });\r\n }); \r\n \r\n}\r\n\r\nrecientes = (cuenta, nombre)=>{\r\n const {recientes} = this.state;\r\n return recientes.concat({ cuenta, nombre });\r\n}\r\n\r\nobtener_ubicaciones = ()=>{\r\n\r\n new Request\r\n .get(`${globales.ip}/insertaclientes/formulario/ubicaciones`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .retry(1)\r\n .timeout({ response: 30000, deadline: 30000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n window.location.reload();\r\n return; \r\n }\r\n \r\n funciones.showToast('e', 'No hay conexión'); \r\n return;\r\n }\r\n \r\n this.ubicaciones = JSON.parse(res.text);\r\n let optionsPais = [];\r\n this.ubicaciones.map((item)=>{\r\n if (!optionsPais.find(x => x.ID_PAIS === item.ID_PAIS))\r\n optionsPais.push({ ID_PAIS: item.ID_PAIS, \r\n NOMBRE_PAIS: item.NOMBRE_PAIS, \r\n ESTADO_PAIS: item.ESTADO_PAIS });\r\n\r\n return item;\r\n }); \r\n this.setState({ optionsPais }); \r\n \r\n });\r\n\r\n}\r\n\r\nobtener_estados_civiles = ()=>{\r\n\r\n new Request\r\n .get(`${globales.ip}/insertaclientes/formulario/estadosciviles`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .retry(1)\r\n .timeout({ response: 20000, deadline: 20000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n window.location.reload();\r\n return;\r\n }\r\n \r\n funciones.showToast('e', 'No hay conexión'); \r\n return;\r\n }\r\n \r\n const rows = JSON.parse(res.text);\r\n const datosSelectEC = rows.map((item, i) =>{\r\n return
\r\n });\r\n this.setState({ datosSelectEC });\r\n \r\n });\r\n\r\n}\r\n\r\nobtener_tipos_identificadores = ()=>{\r\n\r\n new Request\r\n .get(`${globales.ip}/insertaclientes/formulario/tipos`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .retry(1)\r\n .timeout({ response: 20000, deadline: 20000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n window.location.reload();\r\n return;\r\n }\r\n \r\n funciones.showToast('e', 'No hay conexión'); \r\n return;\r\n }\r\n \r\n const rows = JSON.parse(res.text);\r\n const datosSelectTipo = rows.map((item, i) =>{\r\n return
\r\n });\r\n this.setState({ datosSelectTipo });\r\n \r\n });\r\n}\r\n\r\nobtener_planes = ()=>{\r\n new Request\r\n .get(`${globales.ip}/insertaclientes/formulario/planes`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .retry(1)\r\n .timeout({ response: 15000, deadline: 30000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n window.location.reload();\r\n return; \r\n }\r\n \r\n funciones.showToast('e', 'No hay conexión'); \r\n return;\r\n }\r\n\r\n const rowsPlanes = JSON.parse(res.text);\r\n this.setState({ rowsPlanes }); \r\n \r\n });\r\n}\r\n\r\nobtener_estados_plan = ()=>{\r\n \r\n new Request\r\n .get(`${globales.ip}/insertaclientes/formulario/planes/estados`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .retry(1)\r\n .timeout({ response: 20000, deadline: 20000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n {\r\n window.location.reload();\r\n return;\r\n }\r\n \r\n funciones.showToast('e', 'No hay conexión'); \r\n return;\r\n }\r\n \r\n const rows = JSON.parse(res.text);\r\n const datosSelectEP = rows.map((item, i) =>{\r\n return
\r\n });\r\n this.setState({ datosSelectEP });\r\n \r\n });\r\n\r\n}\r\n\r\nonChangePaisNac = (event, value) =>{\r\n\r\n this.setState({ valuePaisNac: value }, ()=>{ \r\n this.onChangeDepNac({}, null);\r\n this.setState({ optionsDepNac: [] });\r\n \r\n if (value === null)\r\n return;\r\n \r\n let optionsDepNac = [];\r\n this.ubicaciones.filter(x => x.ID_PAIS === value.ID_PAIS && x.ID_DEPARTAMENTO !== null).map((item)=>{\r\n if (!optionsDepNac.find(x => x.ID_DEPARTAMENTO === item.ID_DEPARTAMENTO))\r\n optionsDepNac.push({ ID_DEPARTAMENTO: item.ID_DEPARTAMENTO, \r\n NOMBRE_DEPARTAMENTO: item.NOMBRE_DEPARTAMENTO,\r\n ESTADO_DEPARTAMENTO: item.ESTADO_DEPARTAMENTO });\r\n \r\n return item;\r\n }); \r\n this.setState({ optionsDepNac });\r\n \r\n });\r\n}\r\n\r\nonChangeDepNac = (event, value) =>{\r\n this.setState({ valueDepNac: value }, ()=>{ \r\n this.onChangeMunNac({}, null);\r\n this.setState({ optionsMun: [] });\r\n \r\n if (value === null)\r\n return;\r\n \r\n let optionsMunNac = [];\r\n this.ubicaciones.filter(x => x.ID_DEPARTAMENTO === value.ID_DEPARTAMENTO && x.ID_MUNICIPIO !== null).map((item)=>{\r\n if (!optionsMunNac.find(x => x.ID_MUNICIPIO === item.ID_MUNICIPIO))\r\n optionsMunNac.push({ ID_MUNICIPIO: item.ID_MUNICIPIO, \r\n NOMBRE_MUNICIPIO: item.NOMBRE_MUNICIPIO,\r\n ESTADO_MUNICIPIO: item.ESTADO_MUNICIPIO });\r\n \r\n return item;\r\n }); \r\n this.setState({ optionsMunNac });\r\n \r\n });\r\n}\r\n\r\nonChangeMunNac = (event, value) =>{ \r\n this.setState({ valueMunNac: value });\r\n}\r\n\r\nonChangePais = (event, value) =>{\r\n\r\n this.setState({ valuePais: value }, ()=>{ \r\n this.onChangeDep({}, null);\r\n this.setState({ optionsDep: [] });\r\n \r\n if (value === null)\r\n return;\r\n \r\n let optionsDep = [];\r\n this.ubicaciones.filter(x => x.ID_PAIS === value.ID_PAIS && x.ID_DEPARTAMENTO !== null).map((item)=>{\r\n if (!optionsDep.find(x => x.ID_DEPARTAMENTO === item.ID_DEPARTAMENTO))\r\n optionsDep.push({ ID_DEPARTAMENTO: item.ID_DEPARTAMENTO, \r\n NOMBRE_DEPARTAMENTO: item.NOMBRE_DEPARTAMENTO,\r\n ESTADO_DEPARTAMENTO: item.ESTADO_DEPARTAMENTO });\r\n \r\n return item;\r\n }); \r\n this.setState({ optionsDep });\r\n \r\n });\r\n}\r\n\r\nonChangeDep = (event, value) =>{\r\n this.setState({ valueDep: value }, ()=>{ \r\n this.onChangeMun({}, null);\r\n this.setState({ optionsMun: [] });\r\n \r\n if (value === null)\r\n return;\r\n \r\n let optionsMun = [];\r\n this.ubicaciones.filter(x => x.ID_DEPARTAMENTO === value.ID_DEPARTAMENTO && x.ID_MUNICIPIO !== null).map((item)=>{\r\n if (!optionsMun.find(x => x.ID_MUNICIPIO === item.ID_MUNICIPIO))\r\n optionsMun.push({ ID_MUNICIPIO: item.ID_MUNICIPIO, \r\n NOMBRE_MUNICIPIO: item.NOMBRE_MUNICIPIO,\r\n ESTADO_MUNICIPIO: item.ESTADO_MUNICIPIO });\r\n \r\n return item;\r\n }); \r\n this.setState({ optionsMun });\r\n \r\n });\r\n}\r\n\r\nonChangeMun = (event, value) =>{ \r\n this.setState({ valueMun: value }, ()=>{ \r\n this.onChangeCol({}, null);\r\n this.setState({ optionsCol: [] });\r\n \r\n if (value === null)\r\n return;\r\n \r\n let optionsCol = [];\r\n this.ubicaciones.filter(x => x.ID_MUNICIPIO === value.ID_MUNICIPIO && x.ID_COLONIA !== null).map((item)=>{\r\n if (!optionsCol.find(x => x.ID_COLONIA === item.ID_COLONIA))\r\n optionsCol.push({ ID_COLONIA: item.ID_COLONIA, \r\n DESCRIPCION_COLONIA: item.DESCRIPCION_COLONIA,\r\n ESTADO_COLONIA: item.ESTADO_COLONIA });\r\n \r\n return item;\r\n }); \r\n this.setState({ optionsCol });\r\n \r\n });\r\n}\r\n\r\nonChangeCol = (event, value) =>{ \r\n this.setState({ valueCol: value });\r\n}\r\n\r\nestablecer_generos = ()=>{\r\n const generos = [{ value: \"F\", label: \"FEMENINO\" },\r\n { value: \"M\", label: \"MASCULINO\" }];\r\n const datosSelectSexo = generos.map((item, i) =>{\r\n return
\r\n });\r\n this.setState({ datosSelectSexo });\r\n \r\n}\r\n\r\nhandleChangeSelect = (event)=>{\r\n\r\n const {name, value} = event.target;\r\n this.setState({ [\"selected\"+name]: value });\r\n\r\n}\r\n\r\nvalidaciones = ()=>{\r\n\r\nlet r = false;\r\n\r\nif (funciones.isEmpty(this.input1Ref.current.value)){\r\n funciones.showToast(\"w\", \"Se necesita el número de cuenta\");\r\n this.input1Ref.current.focus();\r\n return r;\r\n}\r\n\r\nif (funciones.isEmpty(this.input2Ref.current.value)){\r\n funciones.showToast(\"w\", \"El primer apellido es necesario\");\r\n this.input2Ref.current.focus();\r\n return r;\r\n}\r\n\r\nif (funciones.isEmpty(this.input4Ref.current.value)){\r\n funciones.showToast(\"w\", \"El nombre es necesario\");\r\n this.input4Ref.current.focus();\r\n return r;\r\n}\r\n\r\nif (funciones.isEmpty(this.state.fechaNac) || String(this.state.fechaNac)===\"Invalid Date\"){\r\n funciones.showToast(\"w\", \"Fecha de nacimiento no válida\");\r\n this.date1Ref.current.focus();\r\n return r;\r\n}\r\n\r\nif (funciones.isEmpty(this.state.selectedSexo)){\r\n funciones.showToast(\"w\", \"Seleccione el género\");\r\n this.select1Ref.current.focus();\r\n return r;\r\n}\r\n\r\nif (funciones.isEmpty(this.input5Ref.current.value)){\r\n funciones.showToast(\"w\", \"El necesario un tipo de identificación\");\r\n this.input5Ref.current.focus();\r\n return r;\r\n}\r\n\r\nreturn true;\r\n\r\n}\r\n\r\nhandleSave = ()=>{\r\n \r\nthis.setState({ openBackDrop: true }, ()=>{\r\n \r\n const {cuenta, nombre_completo, apellido1, nombres, identidad, selection} = this.state;\r\n let {apellido2, fechaNac, tel1, tel2, direccion, email2} = this.state;\r\n apellido2 = funciones.isEmpty(apellido2) ? null : apellido2; \r\n fechaNac = funciones.getDateSelect(fechaNac);\r\n tel1 = funciones.isEmpty(tel1) ? null : tel1;\r\n tel2 = funciones.isEmpty(tel2) ? null : tel2;\r\n direccion = funciones.isEmpty(direccion) ? null : direccion;\r\n email2 = funciones.isEmpty(email2) ? null : email2; \r\n const idMunicipioNac = funciones.isEmpty(this.state.valueMunNac) ? null : this.state.valueMunNac.ID_MUNICIPIO;\r\n const genero = this.state.selectedSexo;\r\n const tipoIdentidad = this.state.selectedTipo; \r\n const estadoCivil = funciones.isEmpty(this.state.selectedEC) ? null : this.state.selectedEC;\r\n const idColonia = funciones.isEmpty(this.state.valueCol) ? null : this.state.valueCol.ID_COLONIA;\r\n const idMunicipio = idColonia === null ? null : this.state.valueMun.ID_MUNICIPIO;\r\n let strIdPlanes = \"\";\r\n let strIdEstadoPlanes =\"\";\r\n this.planes.map((item, index)=>{\r\n strIdPlanes += String(item.ID_PLAN) + ((index + 1) < selection.length ? \";\" : \"\");\r\n strIdEstadoPlanes += String(item.ID_ESTADO_PLAN) + ((index + 1) < selection.length ? \";\" : \"\")\r\n return item;\r\n });\r\n\r\n new Request\r\n .post(`${globales.ip}/insertaclientes/cliente`)\r\n .set({'authorization': 'Bearer ' + Auth.getToken() })\r\n .set('Content-Type', 'application/json')\r\n .send({ cuenta, \r\n nombre_completo, \r\n nombres, \r\n apellido1,\r\n apellido2, \r\n identidad,\r\n fechaNac,\r\n genero,\r\n direccion,\r\n tel1,\r\n tel2,\r\n email2,\r\n estadoCivil,\r\n idMunicipio,\r\n idMunicipioNac,\r\n tipoIdentidad,\r\n idColonia,\r\n strIdPlanes,\r\n strIdEstadoPlanes,\r\n ad_usuario: tokenInfo.user })\r\n .retry(0)\r\n .timeout({ response: 20000, deadline: 10000, }) \r\n .end((err, res) => {\r\n \r\n if (err) { \r\n \r\n if (err.toString().substr(0,16) === 'Error: Forbidden')\r\n { \r\n window.location.reload();\r\n return; \r\n }\r\n \r\n this.setState({ openBackDrop: false }, ()=> { \r\n funciones.showToast('e', 'No hay conexión'); \r\n });\r\n \r\n return;\r\n }\r\n \r\n const rows = JSON.parse(res.text);\r\n this.setState({ openBackDrop: false }, ()=>{\r\n\r\n if (rows[0].RESP === 'OK'){ \r\n const recientes = this.recientes(cuenta, nombre_completo);\r\n this.setState({ recientes }, ()=>{\r\n this.handleClose();\r\n funciones.showToast(\"s\", \"Cliente registrado\");\r\n });\r\n } \r\n else\r\n funciones.showToast(\"w\", rows[0].RESP);\r\n\r\n }); \r\n });\r\n\r\n});\r\n\r\n \r\n\r\n}\r\n\r\nhandleDateChange = (date)=>{ \r\n this.setState({ fechaNac: date });\r\n}\r\n\r\nhandleBack = ()=>{\r\n let {activeStep} = this.state;\r\n this.setState({ activeStep: activeStep - 1 });\r\n}\r\n\r\nhandleNext = ()=>{\r\n let {activeStep} = this.state;\r\n \r\n if (activeStep === 0 && !this.validaciones())\r\n return;\r\n\r\n if (activeStep === 1 && this.state.selection.length === 0){\r\n funciones.showToast(\"w\", \"Debe seleccionar al menos un plan\");\r\n return;\r\n }\r\n \r\n if (activeStep === 0){\r\n const cuenta = this.input1Ref.current.value;\r\n const apellido1 = this.input2Ref.current.value.trim().toUpperCase();\r\n const apellido2 = this.input3Ref.current.value.trim().toUpperCase();\r\n const nombres = this.input4Ref.current.value.trim().toUpperCase();\r\n const identidad = this.input5Ref.current.value;\r\n const direccion = this.input6Ref.current.value.trim().toUpperCase();\r\n const tel1 = this.input7Ref.current.value;\r\n const tel2 = this.input8Ref.current.value;\r\n const email2 = this.input9Ref.current.value;\r\n const nombre_completo = String(nombres.trim() + \" \" + apellido1.trim() + (\" \" + apellido2.trim())).trim();\r\n this.setState({ cuenta,\r\n apellido1,\r\n apellido2, \r\n nombres,\r\n identidad,\r\n direccion,\r\n tel1,\r\n tel2,\r\n email2,\r\n nombre_completo });\r\n }\r\n \r\n this.setState({ activeStep: activeStep + 1 });\r\n}\r\n\r\nchangeSelection = selection =>{ \r\n \r\n const id_plan = funciones.getIdRowChecking(selection, this.state.selection);\r\n \r\n if ((selection.length > this.state.selection.length)){\r\n this.tmp_id_plan = id_plan;\r\n this.setState({ selectedEP: 0,\r\n openModalEstadoPlan: true }); \r\n }\r\n else{\r\n this.planes = this.planes.filter(x => x.ID_PLAN !== id_plan);\r\n \r\n this.state.rowsPlanes.map((item)=>{\r\n if (item.ID_PLAN===id_plan) item.ESTADO_ALUMNO=null;\r\n return item;\r\n });\r\n }\r\n \r\n \r\n this.setState({ selection }); \r\n}\r\n\r\nonEntering = ()=>{\r\n this.input1Ref.current.focus();\r\n}\r\n\r\nhandleCloseEP = ()=>{\r\n\r\n if (Boolean(this.planes.find(x => x.ID_ESTADO_PLAN === 1)) && this.state.selectedEP === 1){\r\n funciones.showToast(\"w\", \"Solo es posible asignar un plan activo\");\r\n return;\r\n }\r\n \r\n this.setState({ openModalEstadoPlan: false }, ()=>{\r\n\r\n if (this.state.selectedEP === -1){ \r\n let {selection} = this.state;\r\n selection = selection.filter(x => x !== this.tmp_id_plan);\r\n this.setState({ selection });\r\n return;\r\n }\r\n\r\n let estado_alumno = this.state.datosSelectEP.find(x => x.props.value===this.state.selectedEP);\r\n this.planes.push({ ID_PLAN: this.tmp_id_plan, ID_ESTADO_PLAN: this.state.selectedEP });\r\n let {rowsPlanes} = this.state;\r\n rowsPlanes.map((item)=>{ \r\n if (item.ID_PLAN===this.tmp_id_plan) item.ESTADO_ALUMNO=(estado_alumno!==undefined ? String(estado_alumno.props.children).trim() : null);\r\n return item;\r\n });\r\n this.setState({ rowsPlanes });\r\n\r\n });\r\n}\r\n\r\ncomponentDidMount() { \r\n \r\n tokenInfo = Auth.getProfile(); \r\n\r\n this.setState({ isLoggin: tokenInfo.plataforma !== undefined ? true : false }, ()=>{ \r\n\r\n if (tokenInfo.plataforma === 1) \r\n {\r\n this.obtener_ubicaciones(); \r\n this.obtener_estados_civiles();\r\n this.obtener_tipos_identificadores();\r\n this.obtener_planes();\r\n this.obtener_estados_plan();\r\n this.establecer_generos(); \r\n }\r\n\r\n }); \r\n \r\n}\r\n\r\nrender() {\r\nconst { classes } = this.props;\r\n\r\n if (this.state.isLoggin === true)\r\n {\r\n return (\r\n \r\n
\r\n {\r\n (() => {\r\n \r\n if (tokenInfo.plataforma === 1) //Si es Usuario Admin\r\n {\r\n \r\n return (\r\n \r\n \r\n { this.state.showWarning ? \r\n \r\n
\r\n Se recomienda usar esta funcionalidad con precaución y responsabilidad\r\n \r\n }\r\n label=\"Comprendo, estoy seguro(a) de lo que hago.\"\r\n />\r\n
\r\n : null\r\n }\r\n {this.state.showRecientes ?\r\n \r\n
\r\n
\r\n
{\"Agregados recientemente (\"+this.state.recientes.length+\")\"}\r\n \r\n \r\n {this.state.recientes.map((item, index)=>{ \r\n return
} size=\"small\" label={item.cuenta + \" \" + item.nombre} style={{ marginBottom: 5, marginLeft: 5 }}/>\r\n })}\r\n \r\n \r\n : null\r\n }\r\n
\r\n }\r\n style={{ textTransform: \"none\" }}\r\n disabled={!this.state.checkedConfirm}\r\n size=\"medium\"\r\n onClick={this.handleOpen}>\r\n Agregar\r\n \r\n \r\n\r\n