From feb618554aad0d55238d102bf129342af1017dfb Mon Sep 17 00:00:00 2001 From: Baligh ZOGHLAMI Date: Tue, 25 Jun 2024 17:31:03 +0100 Subject: [PATCH 1/2] update role & privilege UIs --- .../privilege/CreatePrivilegeForm.jsx | 71 +++++++++++---- .../privilege/PrivilegeTableRow.jsx | 36 ++++---- .../privilege/PrivilegesFilter.jsx | 31 +++++++ src/app/(dashboard)/privilege/page.jsx | 56 +++++++----- src/app/(dashboard)/reporting/page.jsx | 26 +++--- src/app/(dashboard)/role/RoleTableRows.jsx | 32 +++---- src/app/(dashboard)/role/RolesFilter.jsx | 89 +++++++++++++++++++ src/app/(dashboard)/role/page.jsx | 64 +++++++------ src/app/(dashboard)/user/UserTableRow.jsx | 8 +- src/app/(dashboard)/user/UsersFilter.jsx | 29 +++--- src/app/(dashboard)/user/page.jsx | 2 +- src/app/ui/SideBar.jsx | 38 ++++---- src/middleware.js | 2 +- src/static/image/svg/reset.svg | 1 + tailwind.config.js | 2 +- 15 files changed, 336 insertions(+), 151 deletions(-) create mode 100644 src/app/(dashboard)/privilege/PrivilegesFilter.jsx create mode 100644 src/app/(dashboard)/role/RolesFilter.jsx create mode 100644 src/static/image/svg/reset.svg diff --git a/src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx b/src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx index 861c65b..a156ab5 100644 --- a/src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx +++ b/src/app/(dashboard)/privilege/CreatePrivilegeForm.jsx @@ -1,16 +1,17 @@ 'use client' import Loader from '@/components/Loader/Loader' -import React, { useRef, useState } from 'react' +import React, { useRef, useState, useEffect } from 'react' import fetchRequest from '../../lib/fetchRequest' import { useNotification } from "@/context/NotificationContext"; +import CancelIcon from "@/static/image/svg/cancel.svg" +import CheckIcon from "@/static/image/svg/check.svg" -const CreatePrivilegeForm = ({ appendPrivilege }) => { + +const CreatePrivilegeForm = ({ appendPrivilege, cancelCreate }) => { const [isLoading, setIsLoading] = useState(false) - const [error, setError] = useState(null) const [privilegeName, setPrivilegeName] = useState(""); const { toggleNotification } = useNotification() const handlePrivilegeNameChange = (event) => { - setError("") setPrivilegeName(event.target.value) } const inputRef = useRef(null) @@ -31,6 +32,7 @@ const CreatePrivilegeForm = ({ appendPrivilege }) => { message: "L'habilitation a été créé avec succès", type: "success" }) + cancelCreate(); } else { setIsLoading(false) if (errors.type === "ValidationError") { @@ -58,21 +60,56 @@ const CreatePrivilegeForm = ({ appendPrivilege }) => { console.log(errors) } } - return ( -
-

Ajout d'habilitation

-
- - -
-

{error}

-
- +
-
- ) + + } export default CreatePrivilegeForm \ No newline at end of file diff --git a/src/app/(dashboard)/privilege/PrivilegeTableRow.jsx b/src/app/(dashboard)/privilege/PrivilegeTableRow.jsx index d0527ec..0735035 100644 --- a/src/app/(dashboard)/privilege/PrivilegeTableRow.jsx +++ b/src/app/(dashboard)/privilege/PrivilegeTableRow.jsx @@ -2,8 +2,8 @@ import React, { useEffect, useRef, useState } from 'react' import fetchRequest from '../../lib/fetchRequest' import Loader from '@/components/Loader/Loader' -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 CancelIcon from "@/static/image/svg/cancel.svg" import CheckIcon from "@/static/image/svg/check.svg" import { useNotification } from '@/context/NotificationContext' @@ -133,33 +133,33 @@ const PrivilegeTableRow = ({ id, name, setPrivileges }) => { }, [isUpdating]) return ( <> - - - setPrivilegeName(event.target.value)} defaultValue={name} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 duration-100 h-10 outline-none' /> + + + setPrivilegeName(event.target.value)} defaultValue={name} type='text' className='disabled:bg-white w-full border-0 rounded-md px-2 enabled:drop-shadow border-none enabled:bg-gray-100 disabled:bg-transparent duration-100 h-10 outline-none' /> - + {!isUpdating - ?
- -
- :
- -
} - + setModalOpen(false)} diff --git a/src/app/(dashboard)/privilege/PrivilegesFilter.jsx b/src/app/(dashboard)/privilege/PrivilegesFilter.jsx new file mode 100644 index 0000000..306083f --- /dev/null +++ b/src/app/(dashboard)/privilege/PrivilegesFilter.jsx @@ -0,0 +1,31 @@ +import React, { memo } from 'react' +import ResetIcon from "@/static/image/svg/reset.svg" +const PrivilegesFilter = memo(function page({ setFilter, filter }) { + const handleChangeFilter = (event) => { + const name = event.target.name + const value = event.target.value + setFilter((filter) => ({ ...filter, [name]: value })) + } + const handleResetFilters = () => { + setFilter({ privilege: "" }) + } + return ( +
+

Recherche

+
+
+ + +
+
+
+ +
+
+ ) +}) + +export default PrivilegesFilter \ No newline at end of file diff --git a/src/app/(dashboard)/privilege/page.jsx b/src/app/(dashboard)/privilege/page.jsx index f10039b..309ef1e 100644 --- a/src/app/(dashboard)/privilege/page.jsx +++ b/src/app/(dashboard)/privilege/page.jsx @@ -5,9 +5,14 @@ import fetchRequest from '../../lib/fetchRequest' import { isArray } from '../../lib/TypesHelper' import PrivilegeTableRows from './PrivilegeTableRow' import Loader from '@/components/Loader/Loader' +import PrivilegesFilter from "./PrivilegesFilter" +import SubSideBar from '@/app/ui/SubSideBar' +import AddIcon from "@/static/image/svg/add.svg" const Privilege = () => { const [privileges, setPrivileges] = useState([]) const [isLoading, setIsLoading] = useState(true) + const [filter, setFilter] = useState({ privilege: "" }); + const [isCreating, setIsCreating] = useState(false) useEffect(() => { const getPrivileges = async () => { const { data, errors, isSuccess } = await fetchRequest("/privileges") @@ -23,28 +28,39 @@ const Privilege = () => { const appendPrivilege = (privilege) => { setPrivileges((data) => [privilege, ...data]) } + const subLinks = [{ label: "Utilisateurs", link: "/user" }, { label: "Rôles", link: "/role" }, { label: "Habilitations", link: "/privilege" }, { label: "Projets", link: "/projects" }] return ( -
- -

Liste des habilitations

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

Pas encore des habilitations

+ <> + + +
+
+

Liste des habilitations

+
- :
- - - - - - {privileges.map((element) => { - return - })} -
HabilitationAction
-
- }} -
+ {isLoading &&
} + {!isLoading && <> {(!isArray(privileges) || privileges?.length === 0) + ?
+

Pas encore des habilitations

+
+ :
+ + + + + + {(isCreating) && setIsCreating(false)} appendPrivilege={appendPrivilege} />} + {privileges?.map((element) => { + return + })} +
HabilitationActions
+
+ }} +
+ ) } diff --git a/src/app/(dashboard)/reporting/page.jsx b/src/app/(dashboard)/reporting/page.jsx index 47058e4..22ca155 100644 --- a/src/app/(dashboard)/reporting/page.jsx +++ b/src/app/(dashboard)/reporting/page.jsx @@ -18,14 +18,14 @@ const Reporting = () => { const [chartDataProject, setChartDataProject] = useState(null) const [isLoadingZone, setIsLoadingZone] = useState(false) const [isLoadingProject, setIsLoadingProject] = useState(false) - const [ countUsers, setCountUsers ] = useState(0) - const [ countProjects, setCountProjects ] = useState(0) - const [ countPlaces, setCountPlaces ] = useState(0) + const [countUsers, setCountUsers] = useState(0) + const [countProjects, setCountProjects] = useState(0) + const [countPlaces, setCountPlaces] = useState(0) const { toggleNotification } = useNotification() const [dates, setDates] = useState({ fromDate: extractDate(subtractDays(new Date(), 4)), toDate: extractDate(new Date()) }) useEffect(() => { - const getStats= async () => { + const getStats = async () => { const { data, errors, isSuccess } = await fetchRequest(`/statistics/`, { method: "GET", }) @@ -146,15 +146,15 @@ const Reporting = () => { })) }, [chartDataZone, axisX]) return ( -
-
+
+

Collaborateurs

{countUsers}
- - + +
@@ -163,8 +163,8 @@ const Reporting = () => {
{countProjects}
- - + +
@@ -173,8 +173,8 @@ const Reporting = () => {
{countPlaces}
- - + +
@@ -192,7 +192,7 @@ const Reporting = () => {
{(isLoadingZone || isLoadingProject) ?
-
:
+
:
} diff --git a/src/app/(dashboard)/role/RoleTableRows.jsx b/src/app/(dashboard)/role/RoleTableRows.jsx index ccdcad9..a834a61 100644 --- a/src/app/(dashboard)/role/RoleTableRows.jsx +++ b/src/app/(dashboard)/role/RoleTableRows.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import fetchRequest from '@/app/lib/fetchRequest' -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 { useNotification } from '@/context/NotificationContext' import ConfirmationModal from '@/app/ui/ConfirmationModal' @@ -48,29 +48,29 @@ const RoleTableRows = ({ name, setRoles, id, privileges, setRoleToUpdate }) => { return ( <> - - -

{name}

+ + +

{name}

- -
+ +
{privileges?.map((element, index) => { - return
{element.name}
+ return
{element.name}
})} - {!privileges || privileges.length == 0 &&

-

} + {!privileges || privileges.length == 0 &&

Habilitations non accordées à ce rôle

}
- -
- -
- + setModalOpen(false)} diff --git a/src/app/(dashboard)/role/RolesFilter.jsx b/src/app/(dashboard)/role/RolesFilter.jsx new file mode 100644 index 0000000..ac547b7 --- /dev/null +++ b/src/app/(dashboard)/role/RolesFilter.jsx @@ -0,0 +1,89 @@ +import React, { memo, useEffect, useState } from 'react' +import ResetIcon from "@/static/image/svg/reset.svg" +import Select from "react-select"; +import fetchRequest from '@/app/lib/fetchRequest'; +const RolesFilter = memo(function Page({ setFilter, filter }) { + const [privileges, setPrivileges] = useState([]) + const handleChangeRoleName = (event) => { + const value = event.target.value + setFilter({ ...filter, "role": value }) + } + const handleResetFilters = () => { + setFilter({ "role": "", "privileges": [] }) + } + + const handlePrivilegesChange = (selectedOptions) => { + setFilter({ ...filter, privileges: selectedOptions }) + } + useEffect(() => { + const getPrivileges = async () => { + const { data, errors, isSuccess } = await fetchRequest("/privileges") + if (isSuccess) { + setPrivileges(data) + } else { + console.log(errors) + } + } + getPrivileges() + }, []) + 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 8f5795f..c35f545 100644 --- a/src/app/(dashboard)/user/page.jsx +++ b/src/app/(dashboard)/user/page.jsx @@ -56,7 +56,7 @@ const UserPage = () => { return ( <> - +
{openCreatePopup && } {userToUpdate && } diff --git a/src/app/ui/SideBar.jsx b/src/app/ui/SideBar.jsx index ba45eac..9534806 100644 --- a/src/app/ui/SideBar.jsx +++ b/src/app/ui/SideBar.jsx @@ -4,7 +4,7 @@ import RoleIcon from "@/static/image/svg/role.svg" import UserIcon from "@/static/image/svg/user.svg" import LogoutButton from "./LogoutButton"; import isAuthenticated from "@/app/lib/isAuthenticated"; -import {useEffect, useState} from "react"; +import { useEffect, useState } from "react"; import { usePathname } from "next/navigation"; import './SideBar.css'; @@ -26,7 +26,7 @@ const SideBar = () => { if (!isAuth || !sessionData) { return (