-
-
- {touched.gender && errors.gender ?
{errors.gender} : null}
+
+
Editar : {cliente.fullName}
+
{
+ onsubmit1(values)
+ resetForm()
+ }}
+ validationSchema={validateYupSchema}
+ >
+ {({ errors, touched }) => {
+ return (
+
+ )
+ }}
+
+
+ )
+
-
}
export default Formulario
\ No newline at end of file
diff --git a/db.json b/db.json
index 01f9be4..d58a995 100644
--- a/db.json
+++ b/db.json
@@ -64,13 +64,13 @@
"picture": "https://randomuser.me/api/portraits/lego/7.jpg"
},
{
- "id": 8,
"fullName": "Samantha Taylor",
- "age": 26,
- "occupation": "Graphic Designer",
"nickname": "Sam",
+ "age": 26,
"gender": "Female",
- "picture": "https://randomuser.me/api/portraits/lego/8.jpg"
+ "picture": "https://randomuser.me/api/portraits/lego/8.jpg",
+ "occupation": "Graphic Designer",
+ "id": 8
},
{
"id": 9,
From 4c8860c2f4729e8a5869cde572e1151790660c31 Mon Sep 17 00:00:00 2001
From: SrJuan <79216367+lopohalo@users.noreply.github.com>
Date: Wed, 7 Dec 2022 02:44:50 -0500
Subject: [PATCH 07/10] terminacion de tareas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
se creo un formulario para tareas compartido con las tareas del usuario, estas mismas cartas se enlazan con el id del usuario que las creo, para esto se manejo el localStorage y se hizo el crud entero tanto para editar eliminar y actualizar ademas de mantener el responsive y el diseño
---
components/FormularioTareas.jsx | 83 +++++++++++++++++++++++++++++++++
components/ListadoTareas.jsx | 63 +++++++++++++++++++++++++
components/Tarea.jsx | 30 ++++++++++++
pages/verCliente/[id].jsx | 24 ++++++----
pages/verPerfil/[id].jsx | 1 +
5 files changed, 192 insertions(+), 9 deletions(-)
create mode 100644 components/FormularioTareas.jsx
create mode 100644 components/ListadoTareas.jsx
create mode 100644 components/Tarea.jsx
diff --git a/components/FormularioTareas.jsx b/components/FormularioTareas.jsx
new file mode 100644
index 0000000..b763877
--- /dev/null
+++ b/components/FormularioTareas.jsx
@@ -0,0 +1,83 @@
+import { useState } from "react"
+import { useEffect } from "react"
+import Alerta from './Alerta'
+const FormularioTareas = ({setTrayendoTareas, cliente,tareaEditar}) => {
+ const [tareas, setTareas] = useState(localStorage.getItem('tareas') ? JSON.parse(localStorage.getItem('tareas')) : [])
+ const [nombre, setNombre] = useState('')
+ const [nombrePropietario, setNombrePropietario] = useState('')
+ const [descripcion, setdescripcion] = useState('')
+ const [Alerta , setAlerta] = useState(false)
+
+ useEffect(( ) => {
+ setTrayendoTareas(tareas)
+ localStorage.setItem('tareas', JSON.stringify(tareas))
+ },[tareas])
+ const HandleSudmit = (e) => {
+ e.preventDefault()
+ if([nombre, nombrePropietario, descripcion].includes('')){
+ setAlerta(true)
+ return;
+ }
+ const generadoraID = () => {
+ let random = Math.random().toString(36).substring(2);
+ let fecha = Date.now().toString(36)
+ return random + fecha;
+ }
+ const objeto_carta = {
+ usuarioCreador: cliente.id,
+ nombre,
+ nombrePropietario,
+ descripcion,
+ }
+
+ if(tareaEditar.id){
+ objeto_carta.id = tareaEditar.id
+ const nuevoArreglo = tareas.map(viejoArreglo => viejoArreglo.id === tareaEditar.id ? objeto_carta : viejoArreglo)
+ setTareas(nuevoArreglo)
+ tareaEditar = ""
+ } else {
+ objeto_carta.id = generadoraID();
+ setTareas([...tareas, objeto_carta])
+ }
+
+ setAlerta(false)
+ setNombre("")
+ setNombrePropietario("")
+ setdescripcion("")
+
+ }
+ useEffect(() => {
+ if(Object.keys(tareaEditar).length > 0){
+ setNombre(tareaEditar.nombre)
+ setNombrePropietario(tareaEditar.nombrePropietario)
+ setdescripcion(tareaEditar.descripcion)
+ }
+ },[tareaEditar])
+ return (
+
+
Seguimiento Tareas
+
+ Añade tareas y {""}
+ Administralas
+
+ {Alerta &&
Todos los Campos son obligatorios} />}
+
+
+ )
+}
+export default FormularioTareas
\ No newline at end of file
diff --git a/components/ListadoTareas.jsx b/components/ListadoTareas.jsx
new file mode 100644
index 0000000..9a17e01
--- /dev/null
+++ b/components/ListadoTareas.jsx
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react"
+import FormularioTareas from "./FormularioTareas"
+import Tarea from "./Tarea"
+
+const ListadoTareas = ({ cliente }) => {
+ const [trayendoTareas, setTrayendoTareas] = useState(JSON.parse(localStorage.getItem('tareas')) ?? [])
+ const [tareasFiltradas, setTareasFiltradas] = useState([])
+ const [tareaEditar, setTareaEditar] = useState({})
+
+ useEffect(() => {
+ let filtro = trayendoTareas.filter(element => element.usuarioCreador == cliente.id)
+ setTareasFiltradas(filtro)
+ localStorage.setItem('tareas', JSON.stringify(trayendoTareas))
+ }, [trayendoTareas])
+
+ const eliminarAlgoDelArreglo = id => {
+ let eliminandoDelArreglo = tareasFiltradas.filter(element => element.id !== id)
+ setTareasFiltradas(eliminandoDelArreglo)
+ let eliminandoGlobal = trayendoTareas.filter(element => element.id !== id)
+ setTrayendoTareas(eliminandoGlobal)
+ }
+
+ return (
+ <>
+
+
+
+
+ {tareasFiltradas.length > 0 ?
+ <>
+
Listado de tareas
+
Administra tus {""} Tareas y agenda
+ {tareasFiltradas.map(tarea => (
+
+ ))}
+ :
+ <>
+
No hay tareas
+
Comienza agregando tareas {""}
+ aparecerán en este lugar
+
+
+
+ }
+
+
+
+
+
+
+
+ )
+}
+export default ListadoTareas
\ No newline at end of file
diff --git a/components/Tarea.jsx b/components/Tarea.jsx
new file mode 100644
index 0000000..fc469a0
--- /dev/null
+++ b/components/Tarea.jsx
@@ -0,0 +1,30 @@
+const Tarea = ({tarea,setTareaEditar, eliminarAlgoDelArreglo}) => {
+ const { nombre,
+ nombrePropietario,
+ descripcion} = tarea
+
+ const HandleSubmitEliminar = () => {
+ const res = confirm('Are you sure you want')
+ if(res == true){
+ eliminarAlgoDelArreglo(tarea.id)
+ }
+ }
+ return (
+
+
Nombre: {""}
+ {nombre}
+
+
Propietario: {""}
+ {nombrePropietario}
+
+
Descripcion: {""}
+ {descripcion}
+
+
+
+
+
+
+ )
+ }
+ export default Tarea
\ No newline at end of file
diff --git a/pages/verCliente/[id].jsx b/pages/verCliente/[id].jsx
index 699bfa1..5dd893d 100644
--- a/pages/verCliente/[id].jsx
+++ b/pages/verCliente/[id].jsx
@@ -2,6 +2,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { useEffect } from 'react'
+import FormularioTareas from '../../components/FormularioTareas'
+import ListadoTareas from '../../components/ListadoTareas'
export default () => {
@@ -30,11 +32,11 @@ export default () => {
{cargando ?
cargando....
: (
<>
-
-
- Atras
-
-
+
+
+ Atras
+
+
+
+
)}