modal candi info in home

src/Components/Home/Candidato.jsx

@@ -11,47 +11,47 @@ import {
   Error as ErrorIcon,
   AssignmentTurnedIn as AssignmentTurnedInIcon
 } from '@mui/icons-material'
-import { useNavigate } from 'react-router-dom'
+// import { useNavigate } from 'react-router-dom'
 
 import { Col, Row } from 'react-bootstrap'
 const big_as = 70
 
-function IconStatus(props){
-  return(
+function IconStatus(props) {
+  return (
     <Tooltip title={props.message}>
       <IconButton
         style={{ color: '#0bd641' }}
         components="label">
-        {<props.icon/>}
+        {<props.icon />}
       </IconButton>
     </Tooltip>
 
   )
 }
 
-function getOperation(estado){
+function getOperation(estado) {
   // Patrik: 100 -> Significa que el examen esta completo
   // Patrik: 99 -> Que el candidato lo esta haciendo (como "doing test" del otro servicio)
   // Patrik: 97 ->  Que hay un error y que hay mas respuestas de las que deberian
   // Patrik: 1 -> Solo esta asignado.
-  switch(estado){
+  switch (estado) {
     case 1: // solo asignado
-      return <IconStatus icon={AddTaskIcon} message="Candidato Asignado"/>
+      return <IconStatus icon={AddTaskIcon} message="Candidato Asignado" />
     case 97: //error en las respuestas
-      return <IconStatus icon={ErrorIcon} message="Hay error en las respuestas"/>
+      return <IconStatus icon={ErrorIcon} message="Hay error en las respuestas" />
     case 99: // el candidato se encuentra realizndolo
-      return <IconStatus icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba"/>
+      return <IconStatus icon={AssignmentTurnedInIcon} message="El candidato se encuentra realizando la prueba" />
     case 100: // finalizado
-      return <IconStatus icon={CheckBoxIcon} message="Calificar el examen"/>
+      return <IconStatus icon={CheckBoxIcon} message="Calificar el examen" />
     default: return null
   }
 }
 
 function Asignaciones(props) {
 
-  let navigate = useNavigate()
-  console.log(props)
-  let { estado,cattest, calificacionescleaver: test_result, id: SuperPWD } = props.asign;
+  // let navigate = useNavigate()
+  let { estado, cattest, calificacionescleaver: test_result, id: SuperPWD } = props.asign;
+  console.log(props,test_result,SuperPWD)
 
   return (
     <tr>
@@ -70,7 +70,7 @@ function Asignaciones(props) {
                 </IconButton>
               </Tooltip>
             ) : null
-        */}
+      */}
         {
           getOperation(estado)
         }
@@ -123,7 +123,7 @@ export function Candidato(props) {
   return (
     <div className="data_candidato">
       <Row>
-        <Col md="3" sm="12" style={{ padding: 10, borderRight: '1px solid #f1f1f1' }}>
+        <Col onClick={props.onClick}  md="3" sm="12" style={{ padding: 10, borderRight: '1px solid #f1f1f1' }}>
           <p><b>{password?.toUpperCase()}</b></p>
         </Col>
         <Col md="9">
@@ -134,7 +134,6 @@ export function Candidato(props) {
                   candidatos.length > 0 ?
                     candidatos.map(u => <TableUser key={u.candi.id} user={u} />)
                     : <SinAsignRealizadas />
-
                 }
               </TableBody>
             </Table>
@@ -145,6 +144,7 @@ export function Candidato(props) {
   )
 }
 
+
 function SinAsignRealizadas() {
   return (
     <tr style={{ padding: 5 }}>

src/Components/Home/Candidatos.js

@@ -25,11 +25,10 @@ function fromBase64(text) {
 
 export default function Candidatos(props) {
 
-  let { passwords } = props;
+  let { passwords, setPassword, setVisible} = props;
   const [page, setPage] = useState(1);
   const [users, setUser] = useState([]);
 
-
   const changePage = (_, value) => {
     let page_numer = value;
     Divide(users)
@@ -37,19 +36,22 @@ export default function Candidatos(props) {
   };
 
   useEffect(() => {
-
     let list = passwords.map(pwd => {
       let { candidatospwds } = pwd
-      console.log("CANDI: " , candidatospwds)
       return {
         password: fromBase64(pwd.pwd),
-        candidatos: candidatospwds
+        candidatos: candidatospwds,
+        pwd: pwd.pwd,
+        plz: pwd.plaza_id
       }
     })
 
     let divided = Divide(list);
     setUser(divided)
 
+    // setPassword({})
+    // setVisible(true)
+
   }, [passwords])
 
   return (
@@ -70,7 +72,16 @@ export default function Candidatos(props) {
         </div>
         {
           users.length
-            ? users[page - 1].map((user, i) => (<Candidato key={i} user={user} />))
+            ? users[page - 1].map((user, i) => (
+              <Candidato 
+                onClick={() => {
+                  setPassword(user) 
+                  setVisible(true) 
+                }}
+                key={i} 
+                user={user} 
+              />
+            ))
             : <Preview style={{ paddingTop: 10 }} lenght={10} />
         }
         <Row style={{ padding: 5 }}>

src/Components/Password/Operation.jsx

@@ -44,7 +44,7 @@ function Candidatos(props) {
   });
 
 
-  let { candidatos, add, remove } = props
+  let { candidatos, add, remove, home } = props
 
   const formik = useFormik({
     initialValues: {
@@ -80,12 +80,16 @@ function Candidatos(props) {
 
   return (
     <FormikProvider style={{ padding: 25 }} value={formik}>
-      <Typography style={{ padding: 5, marginBottom: 15 }}>Ingresa la informacion del candidato</Typography>
+      <Typography style={{ padding: !home? 5: 0, marginBottom: !home? 15: 0 }}>
+        { home ? "": "Ingresa la informacion del candidato" }
+      </Typography>
       <Divider />
       <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
         <Stack spacing={3}>
-          <Stack style={{ paddingTop: 15 }} direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+
+          <Stack style={{ paddingTop:!home? 15 :0, background:'' }} direction={{ xs: 'column', sm: 'row' }} spacing={2}>
             <TextField
+              style={{ display: home ?'none': 'block',background:'' }}
               label="Nombre"
               {...getFieldProps('nombres')}
               error={Boolean(touched.nombres && errors.nombres)}
@@ -93,6 +97,7 @@ function Candidatos(props) {
             />
 
             <TextField
+              style={{ display: home ?'none': 'block' }}
               label="Apellidos"
               {...getFieldProps('apellidos')}
               error={Boolean(touched.apellidos && errors.apellidos)}
@@ -100,8 +105,9 @@ function Candidatos(props) {
             />
           </Stack>
 
-          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+          <Stack style={{ marginTop:0}} direction={{ xs: 'column', sm: 'row' }} spacing={2}>
             <TextField
+              style={{ display: home ?'none': 'block' }}
               fullWidth
               type="email"
               label="Correo Electronico"
@@ -110,13 +116,14 @@ function Candidatos(props) {
               helperText={touched.mail && errors.mail}
             />
 
-            <Button type="submit">
+            <Button hidden={home} type="submit">
               <AddCircle style={{ color: 'var(--main)' }} />
             </Button>
 
           </Stack>
 
           <MailTable
+            home={home}
             remove={remove}
             users={candidatos}
           />
@@ -130,7 +137,7 @@ function Candidatos(props) {
 export function ModalEdit(props) {
 
   const auth = useSelector((state) => state.token)
-  let { password, open, handleOpen } = props
+  let { password, open, handleOpen, home } = props
   let { pwd, plz } = password
 
   return (
@@ -144,6 +151,7 @@ export function ModalEdit(props) {
     >
       <DialogContent>
         <ModalForm
+          home={home}
           pwdinfo={{ pwd, plz }}
           closeModal={handleOpen}
           token={auth.token}
@@ -161,7 +169,7 @@ export function Loading() {
 
 function ModalForm(props) {
 
-  let { pwdinfo, closeModal } = props
+  let { pwdinfo, closeModal,home } = props
   const auth = useSelector((state) => state.token)
   let [candidatos, setCandidatos] = React.useState([]);
   let [password, setPassword] = React.useState();
@@ -186,8 +194,10 @@ function ModalForm(props) {
 
   React.useEffect(() => {
     let { pwd, plz } = pwdinfo;
+    console.log('PWDINOF',{pwd,plz})
+
+    let rest = new Service(`/contrasenia/${home ? pwd : btoa(pwd)}/${plz}`)
 
-    let rest = new Service(`/contrasenia/${btoa(pwd)}/${plz}`)
     rest.getQuery(auth.token)
       .then(resp => {
 
@@ -212,14 +222,13 @@ function ModalForm(props) {
       })
       .catch(error => console.log(error))
 
-  }, [auth.token, pwdinfo, reset])
+  }, [auth.token, pwdinfo, reset,home])
 
   const saveCandidato = async (body) => {
     let rest = new Service('/passwordcandidato/candidato')
     return await rest.postQuery(body, auth.token)
   }
 
-
   function onSubmit(fields) {
 
     let candi_body = candidatos.map( c => {
@@ -248,7 +257,7 @@ function ModalForm(props) {
     }
 
     rest.putQuery(body_req, auth.token)
-      .then( async result => {
+      .then( async _result => {
         queryClient.invalidateQueries('passwords')
 
         //TODO: insert into passwordcanidato/candidato 
@@ -279,7 +288,7 @@ function ModalForm(props) {
   return (
     <Row>
       <Col>
-        <form style={{ padding: 20, maxWidth: 950 }} onSubmit={handleSubmit(onSubmit)}>
+        <form style={{ padding: !home? 20: 0, maxWidth: 950 }} onSubmit={handleSubmit(onSubmit)}>
           <Stack spacing={4}>
 
             <TextField
@@ -299,22 +308,28 @@ function ModalForm(props) {
                 type="text"
                 disabled
               />
-              <FormControlLabel
-                label="Activo?"
-                control={
-                  <Controller
-                    name="state"
-                    control={control}
-                    render={({ field: props }) =>
-                      <Checkbox
-                        style={{ color: 'var(--main)' }}
-                        checked={props.value}
-                        onChange={(e) => props.onChange(e.target.checked)}
+
+              {
+                !home ? 
+                  <FormControlLabel
+                    label="Activo?"
+                    control={
+                      <Controller
+                        name="state"
+                        control={control}
+                        render={({ field: props }) =>
+                          <Checkbox
+                            style={{ color: 'var(--main)' }}
+                            checked={props.value}
+                            onChange={(e) => props.onChange(e.target.checked)}
+                          />
+                        }
                       />
                     }
-                  />
-                }
-              />
+                  /> : null
+              }
+
+
             </Stack>
 
             <LocalizationProvider dateAdapter={DateFnsUtils}>
@@ -323,6 +338,7 @@ function ModalForm(props) {
                 control={control}
                 render={({ field }) =>
                   <DesktopDatePicker
+                    disabled={home}
                     {...field}
                     label="Fecha de Activación"
                     inputFormat="dd/MM/yyyy"
@@ -346,6 +362,7 @@ function ModalForm(props) {
                 render={({ field }) =>
                   <DesktopDatePicker
                     {...field}
+                    disabled={home}
                     label="Fecha de Vencimiento"
                     error={Boolean(errors?.deadpwd)}
                     inputFormat="dd/MM/yyyy"
@@ -361,14 +378,30 @@ function ModalForm(props) {
               </Controller>
             </LocalizationProvider>
 
-            <DialogActions style={{ paddingTop: 25, 'justifyContent': "flex-start" }}>
-              <Button onClick={() => closeModal(false)}>
-                Cerrar
-              </Button>
-              <Button type="submit" style={{ color: 'white', background: 'var(--main)' }} >
-                Guardar
-              </Button>
-            </DialogActions>
+            { !home?
+              <DialogActions style={{ paddingTop: 25, 'justifyContent': "flex-start" }}>
+                <Button onClick={() => closeModal(false)}>
+                  Cerrar
+                </Button>
+                <Button type="submit" style={{ color: 'white', background: 'var(--main)' }} >
+                  Guardar
+                </Button>
+              </DialogActions> : 
+
+              <DialogActions 
+                style={{
+                  justifyContent: "flex-start",
+                }} >
+                <Button onClick={() => { 
+                  console.log('close modal')
+                  console.log(closeModal)
+                  closeModal(true) 
+                }}>
+                  Cerrar
+                </Button>
+              </DialogActions>
+
+            }
 
           </Stack>
         </form>
@@ -376,6 +409,7 @@ function ModalForm(props) {
       </Col>
       <Col>
         <Candidatos
+          home={home}
           add={addCandidato}
           remove={removeCandidato}
           candidatos={candidatos}

src/Components/Password/Steps/MailTable.jsx

@@ -8,10 +8,12 @@ import { DisabledByDefault } from '@mui/icons-material'
 
 export function MailTable(props) {
 
-  let { users, remove } = props;
+  let { users, remove, home } = props;
 
   return (
-    <TableContainer component={Paper}>
+    <TableContainer 
+      style={{boxShadow:'none',margin:'0px !important'}}
+      component={Paper}>
       <Table aria-label="simple table">
         <TableHead>
           <TableRow>
@@ -29,11 +31,13 @@ export function MailTable(props) {
               </TableCell>
               <TableCell align="right">{row.nombres}</TableCell>
               <TableCell align="right">{row.apellidos}</TableCell>
-              <TableCell align="right">
-                <ButtonBase>
-                  <DisabledByDefault onClick={() => remove(row.mail)} style={{color:'var(--main)'}} />
-                </ButtonBase>
-              </TableCell>
+              { !home?
+                <TableCell align="right">
+                  <ButtonBase>
+                    <DisabledByDefault onClick={() => remove(row.mail)} style={{color:'var(--main)'}} />
+                  </ButtonBase>
+                </TableCell>: null
+              }
             </TableRow>
           )) : null}
         </TableBody>

src/Pages/Home.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Col, Row } from 'react-bootstrap'
 import { PersonOutline, VerifiedUser, ListAlt } from '@mui/icons-material/'
 // import Actividades from '../Components/Home/Actividades'
@@ -7,10 +7,14 @@ import { Card } from '../Components/Card';
 import { useSelector } from 'react-redux';
 import { Service } from '../Utils/HTTP.js'
 import { useQuery } from 'react-query';
+import { ModalEdit } from '../Components/Password/Operation';
 
 export function Home() {
 
   const auth = useSelector((state) => state.token)
+  const [password,setPasword]= useState(null)
+  const [visible,setVisible]= useState(false)
+  const hideModal = () => setVisible(false)
 
   const getAllPwd = async () => {
     let rest = new Service('/contrasenia/getallbyidUsr');
@@ -53,6 +57,8 @@ export function Home() {
             <Row>
               <Col md="12">
                 <Candidatos 
+                  setPassword={setPasword}
+                  setVisible={setVisible}
                   passwords={data?.data || []}
                 />
               </Col>
@@ -64,6 +70,16 @@ export function Home() {
             </Row>
           </div>
         </div>
+
+        { password ?
+          <ModalEdit
+            home={true}
+            password={password}
+            open={visible}
+            handleOpen={hideModal}
+          />: null
+        }
+
       </div>
     </section>
   )