agrega layout, menu, navegación, listado de clientes

2 years ago · d039d051e7
parent 50f1d5f3e1
commit d039d051e7
14 changed files with 342 additions and 2 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "tabnine.experimentalAutoImports": true,
+}
--- a/public/usuario.jpg
+++ b/public/usuario.jpg
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,5 +1,7 @@
+import Navbar from '@/components/Navbar'
 import './globals.css'
 import { Inter } from 'next/font/google'
+import Sidebar from '@/components/Sidebar'

 const inter = Inter({ subsets: ['latin'] })

@ -15,7 +17,15 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+  
+        <div className='flex'>
+
+          {children}
+        </div>
+        
+        
+      </body>
    </html>
  )
 }
--- a/src/app/login/LoginForm.tsx
+++ b/src/app/login/LoginForm.tsx
@ -15,7 +15,7 @@ export const LoginForm = () => {
        console.log("ingreso en el submit")
        const { bearerToken } = await useBasicAuth(getValues("user"), getValues("password"));
        Cookies.set("token",bearerToken);
-        router.push("/hola")
+        router.push("/pedidos/cliente")
  }

 return (
--- a/src/app/pedidos/cliente/form.tsx
+++ b/src/app/pedidos/cliente/form.tsx
@ -0,0 +1,21 @@
+import { NextPage } from 'next';
+import { useRouter } from 'next/router'
+import { FC } from 'react'
+
+interface Props {
+}
+
+const Form:NextPage = () => {
+
+    const router = useRouter();
+    const entidadId = router.query.id ? router.query.id as string : "0";
+
+
+ return (
+   <>
+   formulario
+   </>
+ )
+}
+
+export default Form
--- a/src/app/pedidos/cliente/page.tsx
+++ b/src/app/pedidos/cliente/page.tsx
@ -0,0 +1,26 @@
+import Head from '@/components/table/Head'
+import TBody from '@/components/table/TBody';
+import { FC } from 'react'
+
+interface Props {
+}
+
+const ListadoCliente:FC <Props> = () => {
+ return (
+   <>
+   
+   <div className='flex-col mx-auto'>
+     <p className='text-center text-primary'>Listado <span className='text-secondary'>de cliente</span></p>
+     <div className='overflow-x-auto'>
+      <table className='table table-xs table-pin-rows table-pin-cols'>
+          <Head columnas={["","Cédula","Nombre completo"]}/>
+          <TBody columnas={["cedula","nombreCompleto"]} endpoint='api/cliente'/>
+        </table>
+     </div>
+      
+   </div>
+   </>
+ )
+}
+
+export default ListadoCliente;
--- a/src/app/pedidos/layout.tsx
+++ b/src/app/pedidos/layout.tsx
@ -0,0 +1,31 @@
+import Navbar from '@/components/Navbar'
+import './../globals.css'
+import { Inter } from 'next/font/google'
+import Sidebar from '@/components/Sidebar'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Navbar/>
+        <div className='flex'>
+          <Sidebar />
+          {children}
+        </div>
+        
+        
+      </body>
+    </html>
+  )
+}
--- a/src/app/pedidos/producto/page.tsx
+++ b/src/app/pedidos/producto/page.tsx
@ -0,0 +1,26 @@
+import Navbar from '@/components/Navbar'
+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'/>
+        </table>
+     </div>
+      
+   </div>
+   </>
+ )
+}
+
+export default ListadoProducto
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -0,0 +1,23 @@
+
+'use client'
+
+import { FC } from 'react'
+
+interface Props {
+    label: string,
+    onClick: () => void
+
+}
+
+const Button:FC <Props> = ({label, onClick}) => {
+ return (
+   <>
+    <button
+        onClick={onClick}
+    >{label}
+    </button>   
+   </>
+ )
+}
+
+export default Button
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -0,0 +1,57 @@
+'use client'
+
+import { FC } from 'react'
+import Button from './Button'
+import Cookies from 'js-cookie'
+import { useRouter } from 'next/navigation';
+
+interface Props {
+}
+
+const name:FC <Props> = () => {
+
+    const router = useRouter();
+
+    const logout = () => {
+            console.log("Saliendo de sesion")
+            Cookies.remove("token")
+            router.push("/login")
+    }
+
+
+ return (
+   <>
+        <div className="navbar bg-base-100">
+        <div className="flex-1">
+            <a className="btn btn-ghost normal-case text-xl">daisyUI</a>
+        </div>
+        <div className="flex-none gap-2">
+            <div className="form-control">
+            <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
+            </div>
+            <div className="dropdown dropdown-end">
+            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
+                <div className="w-10 rounded-full">
+                <img src="/usuario.jpg" />
+                </div>
+            </label>
+            <ul tabIndex={0} className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
+                <li>
+                <a className="justify-between">
+                    Profile
+                    <span className="badge">New</span>
+                </a>
+                </li>
+                <li><a>Settings</a></li>
+                <li>
+                    <Button label='LogOut' onClick={()=>logout()}/>
+                </li>
+            </ul>
+            </div>
+        </div>
+        </div>
+   </>
+ )
+}
+
+export default name
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@ -0,0 +1,34 @@
+import Link from 'next/link'
+import { FC } from 'react'
+
+interface Props {
+}
+
+const Sidebar:FC <Props> = () => {
+ return (
+   <>
+    <ul className="menu bg-base-200 w-56 rounded-box mr-2" >
+        <li>
+            <Link href={"/pedidos/producto"}>
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+            Producto
+            </Link>
+        </li>
+        <li>
+            <Link href={"/pedidos/cliente"}>
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            Cliente
+            </Link>
+        </li>
+        <li>
+            <a>
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+            Pedido
+            </a>
+        </li>
+    </ul>
+   </>
+ )
+}
+
+export default Sidebar
--- a/src/components/table/Head.tsx
+++ b/src/components/table/Head.tsx
@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+interface Props {
+    columnas: string[]
+}
+
+const Head:FC <Props> = ({columnas}) => {
+ return (
+   <>
+          <thead>
+            <tr>
+              {columnas.map((columna)  =>(<th key={columna}>{columna}</th>))}
+            </tr>
+          </thead>   
+   </>
+ )
+}
+
+export default Head
--- a/src/components/table/TBody.tsx
+++ b/src/components/table/TBody.tsx
@ -0,0 +1,55 @@
+'use client'
+
+import useFetchWithAuth from '@/hooks/useFetchWithAuth';
+import Link from 'next/link';
+import { FC, useEffect, useState } from 'react'
+
+interface Props {
+    columnas: string[],
+    endpoint: string
+}
+
+const TBody:FC <Props> = ({columnas, endpoint}) => {
+
+    
+
+    const [ entidades, setEntidades ] = useState([])
+
+    const getInitData = async() => {
+          const {data } = await useFetchWithAuth(endpoint);
+          setEntidades(data);
+    }
+
+    useEffect(() => {
+        getInitData();
+    }, [])
+
+
+ return (
+   <>
+    <tbody>
+        {entidades && entidades.map((entidad) => (
+
+            <tr key={entidad['id']}>
+                <td>
+                    <Link href={{
+                        pathname: endpoint+"/form",
+                        query: {id: entidad['id']}
+                    }}>
+                        Editar
+                    </Link>
+                </td>
+               {columnas.map((columna)=> (
+                <td>{entidad[columna]}</td>
+               ))}
+            </tr>
+        ))}
+            <tr>
+              
+            </tr>
+        </tbody>   
+   </>
+ )
+}
+
+export default TBody
--- a/src/hooks/useFetchWithAuth.tsx
+++ b/src/hooks/useFetchWithAuth.tsx
@ -0,0 +1,35 @@
+import Cookies from "js-cookie";
+
+const fecher  = async (url:string, token: string) => {
+    return await fetch(url, {
+        method: 'GET',
+        headers:{
+            'Authorization': token
+        }
+    })
+}
+
+const useBasicAuth = async (endpoint:string) => {
+    let data = null;
+    try {
+        
+        const token = Cookies.get("token")|| "";
+        
+        const baseUrl = process.env.API_URL + "/"+ endpoint + "/";
+        
+        const response = await fecher(baseUrl, token);
+        
+        if (response.ok){
+            data = await response.json();
+    
+        }
+    } catch (error) {
+        console.log(error)
+    }
+
+    return{
+        data
+    }
+}
+
+export default useBasicAuth;