From 14766e7cfa7f4efa66a3f1292d969658ba1052db Mon Sep 17 00:00:00 2001 From: Baligh ZOGHLAMI Date: Tue, 25 Jun 2024 10:01:06 +0100 Subject: [PATCH 1/3] update user UI --- src/app/(dashboard)/layout.jsx | 6 +- src/app/(dashboard)/user/UserTableRow.jsx | 41 +++---- src/app/(dashboard)/user/UsersFilter.jsx | 40 +++++++ src/app/(dashboard)/user/page.jsx | 130 +++++++++++----------- src/app/globals.css | 4 + src/app/ui/Footer.jsx | 15 +++ src/app/ui/SubSideBar.jsx | 23 ++++ src/static/image/svg/edit-bold.svg | 1 + src/static/image/svg/search.svg | 1 + src/static/image/svg/trash-bold.svg | 1 + 10 files changed, 177 insertions(+), 85 deletions(-) create mode 100644 src/app/(dashboard)/user/UsersFilter.jsx create mode 100644 src/app/ui/Footer.jsx create mode 100644 src/app/ui/SubSideBar.jsx create mode 100644 src/static/image/svg/edit-bold.svg create mode 100644 src/static/image/svg/search.svg create mode 100644 src/static/image/svg/trash-bold.svg diff --git a/src/app/(dashboard)/layout.jsx b/src/app/(dashboard)/layout.jsx index a4cd337..a0a0e46 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 da0b5aa..279a0a7 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 0000000..a2f65f9 --- /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 d58b7af..8f5795f 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 771e450..d341d36 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 0000000..d5e368e --- /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 0000000..49a3794 --- /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 0000000..aa8e6cc --- /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 0000000..4d2ba26 --- /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 0000000..fa85ed2 --- /dev/null +++ b/src/static/image/svg/trash-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file -- GitLab From 679e472caaec523f0fdd22f3cc4270ca7552de5e Mon Sep 17 00:00:00 2001 From: Oussama El Benney Date: Tue, 25 Jun 2024 10:17:31 +0100 Subject: [PATCH 2/3] fixed header side bar responsive --- src/app/ui/Header.jsx | 2 +- src/app/ui/SideBar.jsx | 30 +++++++++++++++--------------- src/app/ui/SideBarLink.jsx | 4 ++-- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/app/ui/Header.jsx b/src/app/ui/Header.jsx index 79c3de1..13bc022 100644 --- a/src/app/ui/Header.jsx +++ b/src/app/ui/Header.jsx @@ -30,7 +30,7 @@ const Header = async () => {
    • -
  • +
    • diff --git a/src/app/ui/SideBar.jsx b/src/app/ui/SideBar.jsx index 43288a3..62ace4a 100644 --- a/src/app/ui/SideBar.jsx +++ b/src/app/ui/SideBar.jsx @@ -34,20 +34,20 @@ const SideBar = () => { ); } const AdminLinks = [ - { label: "Utilisateurs", link: "/user", icon: , privilege: "user" }, - { label: "Habilitations", link: "/privilege", icon: , privilege: "privilege" }, - { label: "Rôles", link: "/role", icon: , privilege: "role" }, - { label: "Projets", link: "/projects", icon: , privilege: "projects" }, - { label: "Réservation", link: "/reservation", icon: , privilege: "reservation" }, - { label: "Type de Presence", link: "/planning/type-presence", icon: , privilege: "planning/type-presence" }, - { label: "Planning", link: "/planning", icon: , privilege: "planning" }, - { label: "Etage", link: "/etage", icon: , privilege: "etage" }, - { label: "Zone", link: "/zone", icon: , privilege: "zone" }, - { label: "Tables", link: "/table", icon: , privilege: "table" }, - { label: "Places", link: "/place", icon: , privilege: "place" }, - { label: "Gestion des zones", link: "/assign-zone-project", icon: , privilege: "assign-zone-project" }, - { label: "Consulter les réservations", link: "/consultation-reservations", icon: , privilege: "consultation-reservations" }, - { label: "Reporting", link: "/reporting", icon: , privilege: "reporting" }, + { label: "Utilisateurs", link: "/user", icon: , privilege: "user" }, + { label: "Habilitations", link: "/privilege", icon: , privilege: "privilege" }, + { label: "Rôles", link: "/role", icon: , privilege: "role" }, + { label: "Projets", link: "/projects", icon: , privilege: "projects" }, + { label: "Réservation", link: "/reservation", icon: , privilege: "reservation" }, + { label: "Type de Presence", link: "/planning/type-presence", icon: , privilege: "planning/type-presence" }, + { label: "Planning", link: "/planning", icon: , privilege: "planning" }, + { label: "Etage", link: "/etage", icon: , privilege: "etage" }, + { label: "Zone", link: "/zone", icon: , privilege: "zone" }, + { label: "Tables", link: "/table", icon: , privilege: "table" }, + { label: "Places", link: "/place", icon: , privilege: "place" }, + { label: "Gestion des zones", link: "/assign-zone-project", icon: , privilege: "assign-zone-project" }, + { label: "Consulter les réservations", link: "/consultation-reservations", icon: , privilege: "consultation-reservations" }, + { label: "Reporting", link: "/reporting", icon: , privilege: "reporting" }, ]; console.log('sessionDataSideBar', sessionData) @@ -58,7 +58,7 @@ const SideBar = () => { { label: "Consulter les réservations", link: "/consultation-reservations", - icon: + icon: } ] diff --git a/src/app/ui/SideBarLink.jsx b/src/app/ui/SideBarLink.jsx index 6ae7e48..387cd82 100644 --- a/src/app/ui/SideBarLink.jsx +++ b/src/app/ui/SideBarLink.jsx @@ -32,9 +32,9 @@ const SideBarLink = ({ link, label }) => { name="sidebar-link" checked={isActive} readOnly - className="mr-2 bg-white p-0.5" + className="bg-white p-0.5" /> - {label} + {label}
    -- GitLab From be6b062f507de2b1f02a0291d8ac0bec875196dd Mon Sep 17 00:00:00 2001 From: Oussama El Benney Date: Tue, 25 Jun 2024 10:26:14 +0100 Subject: [PATCH 3/3] merged users interface --- src/app/ui/LogoutButton.js | 2 +- src/app/ui/SideBar.jsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/ui/LogoutButton.js b/src/app/ui/LogoutButton.js index 35e621c..a2540b0 100644 --- a/src/app/ui/LogoutButton.js +++ b/src/app/ui/LogoutButton.js @@ -18,7 +18,7 @@ const LogoutButton = ({ isButton = false }) => { if (isButton) return
    + className="flex w-full cursor-pointer px-1 items-center md:hover:bg-white md:hover:text-sushi-400 justify-between text-sushi-500 rounded-lg">

    Se déconnecter

    diff --git a/src/app/ui/SideBar.jsx b/src/app/ui/SideBar.jsx index 62ace4a..ba45eac 100644 --- a/src/app/ui/SideBar.jsx +++ b/src/app/ui/SideBar.jsx @@ -67,7 +67,7 @@ const SideBar = () => { className="flex w-full md:w-1/5 md:max-w-screen max-w-[400px] z-20 fixed top-14 left-0 flex-col border-t border-sushi-100 items-center py-4 notActive h-full overflow-x-hidden bg-white text-chicago-700">
    • -
      element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden px-3"> +
      element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden pl-3"> @@ -91,7 +91,7 @@ const SideBar = () => { -
        +
          {filteredLinks.map((element, index) => ( ))} @@ -100,7 +100,7 @@ const SideBar = () => {
        • -
          element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden px-3"> +
          element.link === pathname)} className="group [&_summary::-webkit-details-marker]:hidden pl-3"> @@ -123,7 +123,7 @@ const SideBar = () => { -
            +
              {ConsultationLinks.map((element, index) => { return })} -- GitLab