arredgroup · NectarQ · Jul 16, 2024
diff --git a/app/bulkCreate/page.js b/app/bulkCreate/page.js
@@ -0,0 +1,115 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Container, Button } from "@mui/material";
+import Navbar from '@/components/Navbar';
+import RegisterForm from '@/components/registerForm';
+import AuthService from '@/services/AuthService';
+import SimpleSnackbar from '@/components/SimpleSnackbar';
+
+const BulkCreate = () => {
+  const [forms, setForms] = useState([{ id: 0, formData: {}, errors: {} }]);
+  const [message, setMessage] = useState("");
+  const [openSnack, setOpenSnack] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      router.push('/login');
+    }
+  }, [router]);
+
+  const addForm = () => {
+    setForms([...forms, { id: forms.length, formData: {}, errors: {} }]);
+  };
+
+  const removeForm = (id) => {
+    setForms(forms.filter(form => form.id !== id));
+  };
+
+  const updateFormData = (id, data) => {
+    setForms(forms.map(form => form.id === id ? { ...form, formData: data } : form));
+  };
+
+  const validateEmail = (email) => {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(String(email).toLowerCase());
+  };
+
+  const handleSubmit = async () => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      setMessage('Por favor, inicia sesión primero');
+      setOpenSnack(true);
+      return;
+    }
+
+    const newForms = forms.map((form) => {
+      const newErrors = {};
+      if (!form.formData.name) newErrors.name = "Este campo es obligatorio.";
+      if (!form.formData.email) newErrors.email = "Este campo es obligatorio.";
+      if (!form.formData.password) newErrors.password = "Este campo es obligatorio.";
+      if (form.formData.password !== form.formData.password_second) newErrors.password_second = "Las contraseñas no coinciden.";
+      if (!form.formData.cellphone) newErrors.cellphone = "Este campo es obligatorio.";
+      if (form.formData.email && !validateEmail(form.formData.email)) newErrors.email = "El formato del email no es válido.";
+      return { ...form, errors: newErrors };
+    });
+
+    setForms(newForms);
+
+    const hasErrors = newForms.some(form => Object.keys(form.errors).length > 0);
+    if (hasErrors) {
+      setMessage("Por favor, corrige los errores en los formularios.");
+      setOpenSnack(true);
+      return;
+    }
+
+    let users = newForms.map(form => ({
+      name: form.formData.name,
+      email: form.formData.email,
+      password: form.formData.password,
+      password_second: form.formData.password_second,
+      cellphone: form.formData.cellphone
+    }));
+
+    let objetos = { users };
+
+    console.log('Users to be sent:', objetos); // Asegúrate de que los datos son correctos
+
+    try {
+      const response = await AuthService.bulkCreateUsers(objetos); // Enviar como objeto con clave 'users'
+      if (response && response.message) {
+        setMessage(`Usuarios creados: ${response.message.successful}, fallidos: ${response.message.failed}`);
+      } else {
+        setMessage('Error inesperado al crear usuarios');
+      }
+    } catch (error) {
+      setMessage('Error al conectar con el servidor');
+    }
+    setOpenSnack(true);
+  };
+
+  return (
+    <Container>
+      <Navbar />
+      <h1>Registrar Múltiples Usuarios</h1>
+      <SimpleSnackbar message={message} openSnack={openSnack} closeSnack={() => setOpenSnack(!openSnack)} />
+      {forms.map((form, index) => (
+        <div key={index}>
+          <RegisterForm
+            index={index}
+            formData={form.formData}
+            errors={form.errors}
+            updateFormData={updateFormData}
+          />
+          <Button onClick={() => removeForm(form.id)}>Quitar</Button>
+        </div>
+      ))}
+      <Button onClick={addForm}>Agregar Usuario</Button>
+      <Button variant="contained" color="primary" onClick={handleSubmit}>Registrar Todos</Button>
+    </Container>
+  );
+};
+
+export default BulkCreate;
diff --git a/app/filters/page.js b/app/filters/page.js
@@ -0,0 +1,124 @@
+// app/filters/page.js
+"use client"
+import React, { useEffect, useState } from 'react';
+import { Container, Select, MenuItem, FormControl, InputLabel, TextField, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { useRouter, useSearchParams } from 'next/navigation';
+import AuthService from '@/services/AuthService';
+import Navbar from '@/components/Navbar';
+
+const Filters = () => {
+  const [users, setUsers] = useState([]);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const status = searchParams.get('status') || '';
+  const name = searchParams.get('name') || '';
+  const logAfter = searchParams.get('logAfter') || '';
+  const logBefore = searchParams.get('logBefore') || '';
+
+  useEffect(() => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+
+    const fetchFilteredUsers = async () => {
+      const filters = {
+        status,
+        name,
+        logAfter,
+        logBefore,
+      };
+      const data = await AuthService.findUsers(filters);
+      setUsers(data);
+    };
+    fetchFilteredUsers();
+  }, [status, name, logAfter, logBefore, router]);
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    const params = new URLSearchParams(window.location.search);
+    if (value) {
+      params.set(name, value);
+    } else {
+      params.delete(name);
+    }
+    router.push(`/filters?${params.toString()}`);
+  };
+
+  return (
+    <Container>
+      <Navbar />
+      <h1>Filtros</h1>
+      <FormControl fullWidth style={{ marginBottom: '20px' }}>
+        <InputLabel id="statusFilterLabel">Filtrar por estado</InputLabel>
+        <Select
+          labelId="statusFilterLabel"
+          id="statusFilter"
+          name="status"
+          value={status}
+          onChange={handleInputChange}
+        >
+          <MenuItem value="">Todos</MenuItem>
+          <MenuItem value="true">Activos</MenuItem>
+          <MenuItem value="false">Inactivos</MenuItem>
+        </Select>
+      </FormControl>
+      <TextField
+        fullWidth
+        label="Filtrar por nombre"
+        variant="outlined"
+        name="name"
+        value={name}
+        onChange={handleInputChange}
+        style={{ marginBottom: '20px' }}
+      />
+      <TextField
+        fullWidth
+        label="Filtrar por fecha de inicio de sesión después de"
+        variant="outlined"
+        type="date"
+        name="logAfter"
+        value={logAfter}
+        onChange={handleInputChange}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        style={{ marginBottom: '20px' }}
+      />
+      <TextField
+        fullWidth
+        label="Filtrar por fecha de inicio de sesión antes de"
+        variant="outlined"
+        type="date"
+        name="logBefore"
+        value={logBefore}
+        onChange={handleInputChange}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        style={{ marginBottom: '20px' }}
+      />
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>Nombre</TableCell>
+            <TableCell>Email</TableCell>
+            <TableCell>Estado</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {users.map(user => (
+            <TableRow key={user.id}>
+              <TableCell>{user.name}</TableCell>
+              <TableCell>{user.email}</TableCell>
+              <TableCell>{user.status ? 'Activo' : 'Inactivo'}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Container>
+  );
+};
+
+export default Filters;
diff --git a/app/login/page.js b/app/login/page.js
@@ -1,27 +1,39 @@
 "use client"
-import React, {useState} from 'react';
-import {Card, CardContent, Container} from "@mui/material";
+import React, { useState } from 'react';
+import { Card, CardContent, Container } from "@mui/material";
 import TextField from '@mui/material/TextField';
-import Button from "@mui/material/Button";
+import Button from '@mui/material/Button';
 import SimpleSnackbar from '../../components/SimpleSnackbar';
 import { useRouter } from 'next/navigation';
+import FormHelperText from '@mui/material/FormHelperText';
 
 import AuthService from '../../services/AuthService';
 
 import './page.css';
 
-export default function Login(){
+export default function Login() {
     const router = useRouter();
 
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [state, setState] = useState(true);
+    const [emailError, setEmailError] = useState("");
+    const [generalError, setGeneralError] = useState("");
 
     const handleLogin = async () => {
-        const login = await AuthService.handleLogin(email, password);
-        setState(login);
-        if(login){
+        const response = await AuthService.handleLogin(email, password);
+        if (response.success) {
+            setState(true);
             router.push('/users');
+        } else {
+            if (response.message === "Correo electrónico no encontrado en la base de datos") {
+                setEmailError("El email no existe, regístrate.");
+                setGeneralError("");
+            } else {
+                setEmailError("");
+                setGeneralError(response.message || "Usuario o contraseña incorrectos");
+            }
+            setState(false);
         }
     }
 
@@ -36,25 +48,36 @@ export default function Login(){
                     <div className={"login-box-child"}>
                         <h1>Inicia Sesión</h1>
                     </div>
-                    <SimpleSnackbar message={"Usuario o contraseña incorrectos"} openSnack={!state}
-                                    closeSnack={() => setState(true)}/>
+                    <SimpleSnackbar message={generalError} openSnack={!state && generalError !== ""}
+                        closeSnack={() => setState(true)} />
                     <div className={"login-box-child"}>
                         <TextField
-                            id="outlined-basic"
+                            id="email"
                             label="Email"
                             variant="outlined"
                             placeholder="alfa@beta.cl"
-                            onChange={(e) => setEmail(e.target.value)}
+                            value={email}
+                            onChange={(e) => {
+                                setEmail(e.target.value);
+                                setEmailError("");
+                            }}
+                            error={emailError !== ""}
+                            helperText={emailError}
                         />
                     </div>
-
+                    <div className={"login-box-child"}>
+                        <FormHelperText error={true} style={{ color: 'red' }}>
+                            {emailError}
+                        </FormHelperText>
+                    </div>
                     <div className={"login-box-child"}>
                         <TextField
-                            id="outlined-basic"
+                            id="password"
                             label="Password"
                             variant="outlined"
                             placeholder="*********"
                             type="password"
+                            value={password}
                             onChange={(e) => setPassword(e.target.value)}
                         />
                     </div>
@@ -68,4 +91,4 @@ export default function Login(){
             </Card>
         </Container>
     );
-}
+}