diff --git a/src/app/(dashboard)/layout.jsx b/src/app/(dashboard)/layout.jsx index a4cd33784062f425514c26b2bc9f53734e97e629..a0a0e46e3ddfef34b87ece119a33310a2241c8f6 100644 --- a/src/app/(dashboard)/layout.jsx +++ b/src/app/(dashboard)/layout.jsx @@ -1,15 +1,17 @@ import React from 'react' import SideBar from '../ui/SideBar' import Header from '../ui/Header' +import Footer from '../ui/Footer' const layout = ({ children }) => { return ( <>
-
+
-
+
{children} +
diff --git a/src/app/(dashboard)/user/UserTableRow.jsx b/src/app/(dashboard)/user/UserTableRow.jsx index da0b5aac685e30b5cba3d0312f81894ff6415e7b..279a0a794d103601b4eece9af34665ca4c70b7c4 100644 --- a/src/app/(dashboard)/user/UserTableRow.jsx +++ b/src/app/(dashboard)/user/UserTableRow.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import DeleteIcon from "@/static/image/svg/delete.svg" -import EditIcon from "@/static/image/svg/edit.svg" +import DeleteIcon from "@/static/image/svg/trash-bold.svg" +import EditIcon from "@/static/image/svg/edit-bold.svg" import ConfirmationModal from '../../ui/ConfirmationModal' import { useNotification } from '@/context/NotificationContext' import fetchRequest from '../../lib/fetchRequest' @@ -46,31 +46,34 @@ const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projec } return ( <> - - -

{first_name} {last_name}

+ + +

{first_name}

- -

{email}

+ +

{last_name}

- -

{role?.name || ""}

+ +

{email}

- -
    + +

    {role?.name || ""}

    + + +
    {(!projects || projects.length === 0) &&

    -

    } {projects?.map((project) => { - return
  • {project.nom}
    • + return

    {project.nom}

    })} -
+
- -
- -
diff --git a/src/app/(dashboard)/user/UsersFilter.jsx b/src/app/(dashboard)/user/UsersFilter.jsx new file mode 100644 index 0000000000000000000000000000000000000000..a2f65f9fdca609edac56658f3d957fb8a0502d80 --- /dev/null +++ b/src/app/(dashboard)/user/UsersFilter.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import SearchIcon from "@/static/image/svg/search.svg" +const UsersFilter = ({ setFilter }) => { + const handleChangeFilter = (event) => { + const name = event.target.name + const value = event.target.value + setFilter((filter) => ({ ...filter, [name]: value })) + } + return ( +
+

Recherche

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ {/*
+ +
*/} +
+ ) +} + +export default UsersFilter \ No newline at end of file diff --git a/src/app/(dashboard)/user/page.jsx b/src/app/(dashboard)/user/page.jsx index d58b7af418d2f118165a5eb005b2bccdc06c9934..8f5795faa0d9353e48647e70ade6da34957de4c2 100644 --- a/src/app/(dashboard)/user/page.jsx +++ b/src/app/(dashboard)/user/page.jsx @@ -11,6 +11,8 @@ import UserTableRow from './UserTableRow'; import { PAGINATION_SIZE } from '../../lib/constants'; import ArrowRightIcon from "@/static/image/svg/chevron-right.svg" import ArrowLeftIcon from "@/static/image/svg/chevron-left.svg" +import SubSideBar from '@/app/ui/SubSideBar'; +import UsersFilter from './UsersFilter'; const UserPage = () => { const [users, setUsers] = useState([]) const [paginationData, setPaginationData] = useState(null) @@ -18,14 +20,15 @@ const UserPage = () => { const [openCreatePopup, setOpenCreatePopup] = useState(null) const [userToUpdate, setUserToUpdate] = useState(null) const { toggleNotification } = useNotification() - const [query, setQuery] = useState(''); + const [filter, setFilter] = useState({ first_name: "", last_name: "", email: "", project: "" }); const getUsers = async (pageNumber = 1, signal) => { setIsLoading(true) - if (search) var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}&search=${query}`, { signal: signal }) - else var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}`) + const URLQuery = `?page=${pageNumber}&first_name=${(filter.first_name)}&last_name=${(filter.last_name)}&email=${(filter.email)}&project=${(filter.project)}` + var { data, errors, isSuccess } = await fetchRequest(`/users/${URLQuery}`, + { signal: signal }) + // else var { data, errors, isSuccess } = await fetchRequest(`/users/?page=${pageNumber}`) setIsLoading(false) if (isSuccess) { - console.log(data) setUsers(data.results) setPaginationData({ pagesNumber: Math.ceil((data.count || 0) / PAGINATION_SIZE), currentPage: pageNumber }) } else { @@ -43,74 +46,73 @@ const UserPage = () => { return () => { controller.abort("fetching another users") } - }, [query]) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [filter.first_name, filter.last_name, filter.project, filter.email]) const appendUser = (newUser) => { setUsers([newUser, ...users]) } - const handleSearchChange = (event) => { - setQuery(event.target.value) - } + const subLinks = [{ label: "Utilisateurs", link: "/user" }, { label: "Rôles", link: "/role" }, { label: "Habilitations", link: "/privilege" }, { label: "Projets", link: "/projects" }] return ( -
- {openCreatePopup && } - {userToUpdate && } -
- -
-
-

Liste des Utilisateurs

- -
- {(isLoading) &&
} - {(!isLoading) && <> {(!isArray(users) || users?.length === 0) - ?
-

Pas encore des utilisateurs

+ <> + + +
+ {openCreatePopup && } + {userToUpdate && } +
+

Liste des utilisateurs

+
- : -
- - - - - - - - - {users?.map((element) => { - return - })} - -
NomEmailRôleProjetsAction
-
} - - } -
- {(paginationData) &&
- {(paginationData.currentPage > 1) &&
getUsers(paginationData.currentPage - 1)} className='flex cursor-pointer hover:bg-neutral-200 duration-150 delay-75 h-8 w-9 items-center justify-center'> - + {(isLoading) &&
} + {(!isLoading) && <> {(!isArray(users) || users?.length === 0) + ?
+

Pas encore des utilisateurs

+
+ : +
+ + + + + + + + + + {users?.map((element) => { + return + })} +
PrénomNomE-mailRôleProjetsActions
} - {paginationData && Array.from({ length: paginationData.pagesNumber }, (_, index) => index).map((element, index) => { - if (element + 1 === paginationData.currentPage + 3) return

- ... -

- else if (paginationData.currentPage === element + 1) return

- {element + 1} -

- else if (paginationData.currentPage < element + 3 && element - paginationData.currentPage < 3) return

getUsers(element + 1)} key={element} className='h-8 w-9 hover:bg-neutral-200 cursor-pointer duration-150 delay-75 font-bold text-neutral-700 text-sm flex items-center justify-center' > - {element + 1} -

- else return <> - })} - {(paginationData.currentPage !== paginationData.pagesNumber) &&
getUsers(paginationData.currentPage + 1)} className='flex h-8 w-9 items-center hover:bg-neutral-200 duration-150 delay-75 cursor-pointer justify-center'> - + } +
+ {(paginationData) &&
+ {(paginationData.currentPage > 1) &&
getUsers(paginationData.currentPage - 1)} className='flex cursor-pointer hover:bg-neutral-200 duration-150 delay-75 h-8 w-9 items-center justify-center'> + +
} + {paginationData && Array.from({ length: paginationData.pagesNumber }, (_, index) => index).map((element, index) => { + if (element + 1 === paginationData.currentPage + 3) return

+ ... +

+ else if (paginationData.currentPage === element + 1) return

+ {element + 1} +

+ else if (paginationData.currentPage < element + 3 && element - paginationData.currentPage < 3) return

getUsers(element + 1)} key={element} className='h-8 w-9 hover:bg-neutral-200 cursor-pointer duration-150 delay-75 font-bold text-neutral-700 text-sm flex items-center justify-center' > + {element + 1} +

+ else return <> + })} + {(paginationData.currentPage !== paginationData.pagesNumber) &&
getUsers(paginationData.currentPage + 1)} className='flex h-8 w-9 items-center hover:bg-neutral-200 duration-150 delay-75 cursor-pointer justify-center'> + +
}
} -
} -
-
+
+
+ ) } diff --git a/src/app/globals.css b/src/app/globals.css index 771e450dc11a6f30e40dc71e7777819d498bae59..d341d363379d5559c9d6780fb5d6e4e83e3b8275 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -15,6 +15,10 @@ /* Set the width of the scrollbar */ } +.hideScroll::-webkit-scrollbar { + display: none; +} + ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); /* Color of the thumb */ diff --git a/src/app/ui/Footer.jsx b/src/app/ui/Footer.jsx new file mode 100644 index 0000000000000000000000000000000000000000..d5e368e1d9d9c6c7c9f098c43ab65c8a54eeae20 --- /dev/null +++ b/src/app/ui/Footer.jsx @@ -0,0 +1,15 @@ +import Link from 'next/link' +import React from 'react' + +const Footer = () => { + return ( +
+

2024 © Teamwill

+ About Teamwill + Terms and conditions + Contact us +
+ ) +} + +export default Footer \ No newline at end of file diff --git a/src/app/ui/SubSideBar.jsx b/src/app/ui/SubSideBar.jsx new file mode 100644 index 0000000000000000000000000000000000000000..49a3794d7c109b1deb779701b9aef868fd595054 --- /dev/null +++ b/src/app/ui/SubSideBar.jsx @@ -0,0 +1,23 @@ +"use client" +import Link from 'next/link' +import { usePathname } from 'next/navigation'; +import React from 'react' + +const SubSideBar = ({ items }) => { + const pathname = usePathname(); + return ( +
+ {items.map((element, index) => { + if (pathname !== element.link) + return +

{element.label}

+ + return +

{element.label}

+ + })} +
+ ) +} + +export default SubSideBar \ No newline at end of file diff --git a/src/static/image/svg/edit-bold.svg b/src/static/image/svg/edit-bold.svg new file mode 100644 index 0000000000000000000000000000000000000000..aa8e6cc26a0805a5c431c65944d9613b119103c4 --- /dev/null +++ b/src/static/image/svg/edit-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/image/svg/search.svg b/src/static/image/svg/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..4d2ba26385535669f7f9586798a415acf0cf0d8a --- /dev/null +++ b/src/static/image/svg/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/image/svg/trash-bold.svg b/src/static/image/svg/trash-bold.svg new file mode 100644 index 0000000000000000000000000000000000000000..fa85ed2bc7718ab906d360d8fe598b0eab389267 --- /dev/null +++ b/src/static/image/svg/trash-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file