parent
2a2dd4f4e3
commit
7ee82313d5
|
After Width: | Height: | Size: 9.6 KiB |
@ -1,3 +1,87 @@
|
||||
export default function Page({ params }: { params: { id: string } }) {
|
||||
return <div>My Post: {params.id}</div>
|
||||
}
|
||||
'use client'
|
||||
import { Input } from '@/components/Input';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import Button from '@/components/Button';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Toolbar } from '@/components/Toolbar';
|
||||
import useFetchWithAuth from '@/hooks/useFetchWithAuth';
|
||||
import saveWithAuth from '@/hooks/saveWithAuth';
|
||||
|
||||
const ClientePage = ({ params }: { params: { id: string } }) => {
|
||||
|
||||
const router = useRouter();
|
||||
const entityId =params.id;
|
||||
const [cliente, setCliente] = useState({
|
||||
id: 0,
|
||||
cedula: '',
|
||||
nombreCompleto: '',
|
||||
});
|
||||
const { register, setValue,getValues,handleSubmit, formState: { errors } } = useForm(
|
||||
{
|
||||
defaultValues: {
|
||||
...cliente
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const getInitData = async () => {
|
||||
if (!entityId || entityId=="0")
|
||||
return;
|
||||
const { data, error } = await useFetchWithAuth("cliente/" + entityId);
|
||||
|
||||
if (!error) {
|
||||
|
||||
if (data.id!=0){
|
||||
setValue("id", data['id'])
|
||||
setValue("cedula", data['cedula'])
|
||||
setValue("nombreCompleto", data['nombreCompleto'])
|
||||
setCliente(data)
|
||||
}
|
||||
|
||||
} else {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async (entity: any) => {
|
||||
try {
|
||||
let endpoint = "cliente";
|
||||
|
||||
const { data, error } = await saveWithAuth(endpoint, entityId, entity);
|
||||
if (error) {
|
||||
console.log(error);
|
||||
} else {
|
||||
router.push("pedidos/"+endpoint+"/"+ data.id)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("Post error:");
|
||||
console.table(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
getInitData();
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='grow '>
|
||||
<Toolbar pathForm='pedidos/cliente/0' pathList='pedidos/cliente/' currentEntity={getValues("nombreCompleto")} entityName='cliente'/>
|
||||
<div className='h-96 w-4/6 mx-auto p-4 border-solid border-gray-300 border-2 rounded-xl '>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Input id='id' label='' register={register} type='hidden'/>
|
||||
<Input id='cedula' label='Cédula' register={register} />
|
||||
<Input id='nombreCompleto' label='Nombre completo' register={register} />
|
||||
<Button className="btn-sm my-2" type='submit' label='Guardar' />
|
||||
{errors?.root?.server && <p>Form submit failed.</p>}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ClientePage;
|
||||
|
||||
@ -1,26 +1,22 @@
|
||||
import Navbar from '@/components/Navbar'
|
||||
import { Toolbar } from '@/components/Toolbar'
|
||||
import Head from '@/components/table/Head'
|
||||
import TBody from '@/components/table/TBody'
|
||||
import { FC } from 'react'
|
||||
|
||||
interface Props {
|
||||
}
|
||||
|
||||
const ListadoProducto:FC <Props> = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='flex-col mx-auto'>
|
||||
<p className='text-center text-primary'>Listado <span className='text-secondary'>de producto</span></p>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table table-xs table-pin-rows table-pin-cols'>
|
||||
<Head columnas={["","Nombre","Precio"]}/>
|
||||
<TBody columnas={["nombre","precio"]} endpoint='api/producto'/>
|
||||
const Listadoproducto = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='grow '>
|
||||
<Toolbar pathForm='pedidos/producto/0' pathList='pedidos/producto/' currentEntity={""} entityName='producto'/>
|
||||
<p className='text-center text-black'>Listado <span className='text-primary'>de productos</span></p>
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table table-xs table-pin-rows table-pin-cols w-5/6 mx-auto'>
|
||||
<Head columnas={["","Nombre","Precio"]}/>
|
||||
<TBody columnas={["nombre","precio"]} endpoint='producto'/>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ListadoProducto
|
||||
export default Listadoproducto
|
||||
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import { FC } from 'react'
|
||||
import { UseFormRegister,FieldValues } from 'react-hook-form';
|
||||
|
||||
interface Props {
|
||||
id: string,
|
||||
label: string,
|
||||
type?:"text"|"password"|"checkbox"|"hidden"|"number"|"date"|"datetime-local",
|
||||
register: UseFormRegister<any>
|
||||
}
|
||||
|
||||
export const Input:FC <Props> = ({id,label,type="text", register}) => {
|
||||
return (
|
||||
<>
|
||||
<div className='flex flex-col'>
|
||||
<label htmlFor={id}>{label}</label>
|
||||
<input
|
||||
type={type}
|
||||
className='input input-primary'
|
||||
id={id}
|
||||
{...register(id)}/>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import React, { FC, useEffect, useState } from 'react'
|
||||
import { Controller, Control } from 'react-hook-form';
|
||||
import useFetchWithAuth from '@/hooks/useFetchWithAuth';
|
||||
|
||||
interface Props {
|
||||
|
||||
entity: string,
|
||||
control: Control<any, any>
|
||||
}
|
||||
|
||||
export const Manytoone: FC<Props> = ({entity, control }) => {
|
||||
|
||||
|
||||
|
||||
const [data, setData] = useState([{id:0,nombre:'Select one'}]);
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const { data, error } = await useFetchWithAuth(entity.toLowerCase());
|
||||
setData(data);
|
||||
|
||||
} catch (trace) {
|
||||
console.error(trace);
|
||||
}
|
||||
}
|
||||
fetchData();
|
||||
}, [entity]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label htmlFor={entity}>{entity}</label>
|
||||
<Controller key={entity}
|
||||
render={({ field }) => (
|
||||
<select key={entity+"select"} {...field} className={' p-2 border-2 border-sky-300 outline-sky-300 bg-white rounded-xl w-full'}>
|
||||
<option key={entity+0} value={0}>
|
||||
Seleccione un valor
|
||||
</option>
|
||||
{data.map((item) => (
|
||||
<option key={entity+item.id} value={item.id}>
|
||||
{item['nombre']}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
name={entity}
|
||||
control={control}
|
||||
/>
|
||||
</>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
import { FC } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
|
||||
interface Props {
|
||||
pathForm: string
|
||||
pathList: string
|
||||
entityName: string
|
||||
currentEntity: string
|
||||
}
|
||||
|
||||
export const Toolbar: FC<Props> = ({
|
||||
pathForm,
|
||||
pathList,
|
||||
entityName,
|
||||
currentEntity,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="flex flex-row items-start sm:items-center">
|
||||
<Link href={pathForm} >
|
||||
<button className="my-2 mr-3 font-bold rounded btn btn-outline btn-sm group">
|
||||
<svg className="w-3 h-3 mr-1 group-hover:animate-bounce group-hover:fill-white"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1"
|
||||
viewBox="0 0 512 512" xmlSpace="preserve">
|
||||
<g>
|
||||
<path
|
||||
d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192 c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span className="hidden md:inline">
|
||||
|
||||
Nuevo
|
||||
|
||||
</span>
|
||||
</button>
|
||||
</Link>
|
||||
<h1 className="flex-1 my-2 text-lg text-left">
|
||||
<div className="flex-1 text-sm font-bold text-gray-600 breadcrumbs breadflex-1">
|
||||
<ul>
|
||||
<li>
|
||||
<Link href={pathList}>{entityName}</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a>{currentEntity}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
const fecher = async (url: string, id:string, token: string, data:any) => {
|
||||
return await fetch(url, {
|
||||
method: id==="0" ? 'POST': 'PATCH',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Authorization' :token,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept':'application/json'
|
||||
},
|
||||
body: data,
|
||||
});
|
||||
}
|
||||
|
||||
const saveWithAuth = async (url: string, id:string, body:any) => {
|
||||
url= process.env.API_URL+"/api/"+url+"/";
|
||||
if ( Number(id)>0){
|
||||
url = url + id +"/"
|
||||
}
|
||||
const token = Cookies.get('token') || "";
|
||||
let data;
|
||||
let error;
|
||||
try{
|
||||
data = JSON.stringify(body);
|
||||
console.log(url)
|
||||
const response = await fecher(url, id, token, data)
|
||||
if (response.ok){
|
||||
data = await response.json();
|
||||
}else {
|
||||
error = "Servidor: "+ ((await response.json()).trace).substring(1,300);
|
||||
}
|
||||
}catch (e){
|
||||
error = "Cliente: "+e;
|
||||
}
|
||||
return {
|
||||
data,
|
||||
error
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default saveWithAuth;
|
||||
Loading…
Reference in new issue