Skip to content

Commit

Permalink
feat: Dashboard addresses (#107)
Browse files Browse the repository at this point in the history 
* feat: addresses page

* feat: search param

* feat: add address

* feat: edit addresses
  • Loading branch information
@userMeh
userMeh committed May 2, 2024
1 parent 2920c36 commit 4687733
Show file tree
Hide file tree
Showing 16 changed files with 918 additions and 86 deletions.
188 changes: 188 additions & 0 deletions apps/admin/app/(dashboard)/dashboard/addresses/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
'use client';

import AddAddress from '@/app/ui/dashboard/addresses/AddAddress';
import AddressesList from '@/app/ui/dashboard/addresses/AddressesList';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@repo/ui/components/ui/card';
import { Input } from '@repo/ui/components/ui/input';
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from '@repo/ui/components/ui/pagination';
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@repo/ui/components/ui/table';
import { Tabs, TabsContent } from '@repo/ui/components/ui/tabs';
import { Toaster } from '@repo/ui/components/ui/toaster';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';
import { Suspense, useEffect, useState } from 'react';

type Address = {
id: number;
road: string;
postal_code: string;
complement: string;
city: string;
number: number;
name: string;
id_lease: number;
};

type AddressData = {
data: Address[];
count: number;
};

function ShowContent() {
const searchParams = useSearchParams();
const router = useRouter();
let page = searchParams.get('page') || 1;
if (typeof page === 'string') {
page = Number.parseInt(page);
}

const [maxPage, setMaxPage] = useState<number>(1);
const [addresses, setAddresses] = useState<Address[]>([]);
const [searchTerm, setSearchTerm] = useState<string>('');

useEffect(() => {
const urlApi = process.env.NEXT_PUBLIC_API_URL;

const timer = setTimeout(() => {
const queryParams = new URLSearchParams({
skip: `${page - 1}`,
take: '10',
search: searchTerm,
});

fetch(`${urlApi}/addresses?${queryParams}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('access_token')}`,
},
})
.then((response) => {
if (response.status === 403) {
router.push('/');
}
return response.json();
})
.then((data: AddressData) => {
setAddresses(data.data);
setMaxPage(Math.ceil(data.count / 10));
})
.catch((error: Error) => {
console.log(error);
});
}, 500);

return () => clearTimeout(timer);
}, [page, searchTerm, router]);

const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
};

return (
<TabsContent value="all">
<Card x-chunk="dashboard-06-chunk-0">
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Adresses</CardTitle>
<AddAddress addresses={addresses} />
</CardHeader>
<CardContent>
<div className="ml-auto flex items-center gap-2">
<Input
type="search"
placeholder="Rechercher..."
className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
onChange={handleSearch}
value={searchTerm}
/>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead>Alias</TableHead>
<TableHead>Adresse</TableHead>
<TableHead>Ville</TableHead>
<TableHead>Code postal</TableHead>
<TableHead>
<span className="sr-only">Actions</span>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<AddressesList addresses={addresses} />
</TableBody>
</Table>
</CardContent>
<CardFooter>
<Pagination>
<PaginationContent>
{page > 1 && (
<PaginationItem>
<PaginationPrevious href={`/dashboard/users?page=${page - 1}`} />
</PaginationItem>
)}
{page > 3 && (
<PaginationItem>
<PaginationLink href={`/dashboard/users?page=${page - 2}`}>{page - 2}</PaginationLink>
</PaginationItem>
)}
{page > 2 && (
<PaginationItem>
<PaginationLink href={`/dashboard/users?page=${page - 1}`}>{page - 1}</PaginationLink>
</PaginationItem>
)}
<PaginationItem>
<PaginationLink href={`/dashboard/users?page=${page}`} isActive>
{page}
</PaginationLink>
</PaginationItem>
{page < maxPage && (
<PaginationItem>
<PaginationLink href={`/dashboard/users?page=${page + 1}`}>{page + 1}</PaginationLink>
</PaginationItem>
)}
{page < maxPage - 1 && (
<PaginationItem>
<PaginationLink href={`/dashboard/users?page=${page + 2}`}>{page + 2}</PaginationLink>
</PaginationItem>
)}
{page < maxPage && (
<PaginationItem>
<PaginationNext href={`/dashboard/users?page=${page + 1}`} />
</PaginationItem>
)}
</PaginationContent>
</Pagination>
</CardFooter>
</Card>
</TabsContent>
);
}

export default function Page(): JSX.Element {
return (
<main>
<div className="flex flex-col h-full">
<div className="flex min-h-screen w-full flex-col bg-muted/40">
<div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
<main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
<Tabs defaultValue="all">
<Suspense>
<ShowContent />
</Suspense>
</Tabs>
</main>
</div>
</div>
</div>
<Toaster />
</main>
);
}
33 changes: 16 additions & 17 deletions apps/admin/app/(dashboard)/dashboard/users/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { Table, TableBody, TableHead, TableHeader, TableRow } from '@repo/ui/com
import { Tabs, TabsContent } from '@repo/ui/components/ui/tabs';
import { Toaster } from '@repo/ui/components/ui/toaster';
import { useSearchParams } from 'next/navigation';
import { useRouter } from 'next/navigation';
import { Suspense, useEffect, useState } from 'react';

type User = {
Expand All @@ -29,6 +30,11 @@ type User = {
roles: { id: number; name: string }[];
};

type UserData = {
data: User[];
count: number;
};

function ShowContent() {
const searchParams = useSearchParams();
let page = searchParams.get('page') || 1;
Expand All @@ -39,6 +45,7 @@ function ShowContent() {
const [maxPage, setMaxPage] = useState<number>(1);
const [users, setUsers] = useState<User[]>([]);
const [searchTerm, setSearchTerm] = useState<string>('');
const router = useRouter();

useEffect(() => {
const urlApi = process.env.NEXT_PUBLIC_API_URL;
Expand All @@ -57,23 +64,15 @@ function ShowContent() {
Authorization: `Bearer ${localStorage.getItem('access_token')}`,
},
})
.then((response) => response.json())
.then((data: User[]) => {
setUsers(data);
.then((response) => {
if (response.status === 403) {
router.push('/');
}
return response.json();
})
.catch((error: Error) => {
console.log(error);
});

fetch(`${urlApi}/users/count?search=${searchTerm}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('access_token')}`,
},
})
.then((response) => response.json())
.then((data: { count: number }) => {
.then((data: UserData) => {
console.log(data);
setUsers(data.data);
setMaxPage(Math.ceil(data.count / 10));
})
.catch((error: Error) => {
Expand All @@ -82,7 +81,7 @@ function ShowContent() {
}, 500);

return () => clearTimeout(timer);
}, [page, searchTerm]);
}, [page, searchTerm, router]);

const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(event.target.value);
Expand Down
7 changes: 7 additions & 0 deletions apps/admin/app/(dashboard)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,13 @@ export default function RootLayout({
<LineChart className="h-4 w-4" />
Statistique
</Link>
<Link
href="/dashboard/addresses"
className="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
>
<LineChart className="h-4 w-4" />
Gestion des adresses
</Link>
</nav>
</div>
</div>
Expand Down
23 changes: 19 additions & 4 deletions apps/admin/app/ui/LoginForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@ import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

type User = {
id: number;
email: string;
username: string;
first_name: string;
last_name: string;
id_referer: number | null;
date_validity: string | null;
roles: { id: number; name: string }[];
};

export function LoginForm(): JSX.Element {
const router = useRouter();
const urlApi = process.env.NEXT_PUBLIC_API_URL;
Expand Down Expand Up @@ -38,10 +49,14 @@ export function LoginForm(): JSX.Element {
}),
})
.then((response) => response.json())
.then((data: { user: Record<string, unknown>; token: string }) => {
localStorage.setItem('user', JSON.stringify(data.user));
localStorage.setItem('access_token', data.token);
router.push('/dashboard');
.then((data: { user: User; token: string }) => {
const roles = data.user.roles;

if (roles.some((role: { id: number }) => role.id === 5)) {
localStorage.setItem('user', JSON.stringify(data.user));
localStorage.setItem('access_token', data.token);
router.push('/dashboard');
}
})
.catch((error: Error) => {
console.log(error);
Expand Down
Loading

0 comments on commit 4687733

Please sign in to comment.