diff --git a/src/app/lib/constants.js b/src/app/lib/constants.js index f4da663555ffe54dfea91d044d2b58ec3c463486..9d34296b9316dac3c714bc0476dcfa97e05dda4d 100644 --- a/src/app/lib/constants.js +++ b/src/app/lib/constants.js @@ -1 +1,3 @@ -export const PASSWORD_REGEX = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z\d\s]).*$/; \ No newline at end of file +export const PASSWORD_REGEX = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z\d\s]).*$/; +export const EMAIL_REGEX = /^[a-zA-Z0-9._%+-]+@teamwillgroup\.com$/ +export const PAGINATION_SIZE = 3 \ No newline at end of file diff --git a/src/app/privilege/page.jsx b/src/app/privilege/page.jsx index 8d6a8b49d041487982c67ecda9fe3a589469427a..46c9515f8523b64d56f4b60cedc04afaffeaf2fb 100644 --- a/src/app/privilege/page.jsx +++ b/src/app/privilege/page.jsx @@ -29,7 +29,7 @@ const Privilege = () => {

List des habilitations

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

Pas encore des habilitations

diff --git a/src/app/projects/ProjectForm.jsx b/src/app/projects/ProjectForm.jsx index 425cb09badb9664502865be810eaf05a12cc5fe6..18005e6203bf2c0ae17d46755108a4dcc293d547 100644 --- a/src/app/projects/ProjectForm.jsx +++ b/src/app/projects/ProjectForm.jsx @@ -87,7 +87,7 @@ const ProjectForm = ({ onAddProject, onEditProject, editingProject, setEditingPr }; return ( -
+
{ const [isModalOpen, setModalOpen] = useState(false); @@ -18,90 +18,90 @@ const ProjectList = ({ projects, onEdit, onDelete, onHandlePageUrl }) => { <> - - - - - - + + + + + + - {projects - .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)) - .map((project, index) => ( - - - - - - - ))} + {projects + .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)) + .map((project, index) => ( + + + + + + + ))}
ProjetMembres de léquipeNom du clientActions
ProjetMembres de léquipeNom du clientActions
{project.nom}{project.users.length}{project.nomClient} - - -
{project.nom}{project.users.length}{project.nomClient} + + +
{/* Pagination */} {projects.count && -
-
    -
  1. - -
    2. -
  2. - 1 -
    3. -
  3. - +
    4. +
  4. + 1 +
    5. +
  5. + -
    6. -
-
+ Next Page + + + + + + +
} {/* Confirmation Modal */} { const [pageUrl, setPageUrl] = useState('/projects/'); const [projects, setProjects] = useState([]); const [editingProject, setEditingProject] = useState(null); - {/* errors from request*/} + {/* errors from request*/ } const [errors, setErrors] = useState(); const [loading, setLoading] = useState(false); const { toggleNotification } = useNotification() const fetchProjects = async () => { - const { isSuccess, errors , data } = await fetchRequest(pageUrl); + const { isSuccess, errors, data } = await fetchRequest(pageUrl); if (isSuccess) { setProjects(data); setErrors(null); @@ -26,9 +26,9 @@ const Projects = () => { setErrors(errors) } }; - useEffect( () => { + useEffect(() => { - fetchProjects(); + fetchProjects(); }, [pageUrl]); // pageURL @@ -38,7 +38,7 @@ const Projects = () => { console.log("proj strinjify",JSON.stringify(project)) setLoading(true); - const { isSuccess, errors , data } = await fetchRequest('/projects/', { + const { isSuccess, errors, data } = await fetchRequest('/projects/', { method: 'POST', body: JSON.stringify(project), }); @@ -53,6 +53,7 @@ const Projects = () => { setEditingProject(null); setErrors(null); } else { + console.log(errors); console.error("Failed to add project"); setErrors(errors) } @@ -61,7 +62,7 @@ const Projects = () => { const handleEditProject = async (id, updatedProject) => { setLoading(true); - const { isSuccess, errors , data } = await fetchRequest(`/projects/${id}/`, { + const { isSuccess, errors, data } = await fetchRequest(`/projects/${id}/`, { method: 'PUT', body: JSON.stringify(updatedProject), }); @@ -116,7 +117,7 @@ const Projects = () => { return (
- +
diff --git a/src/app/role/CreateRoleForm.jsx b/src/app/role/CreateRoleForm.jsx index 546c0c0a863e3f773d39a9c338bddcba18f559b1..d7c479d0ba974ae82aebbaddb6c4d8f8ae95cfa8 100644 --- a/src/app/role/CreateRoleForm.jsx +++ b/src/app/role/CreateRoleForm.jsx @@ -110,13 +110,13 @@ const CreateRoleForm = ({ appendRole, setIsOpen }) => {
setIsOpen(false)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" /> - + {(privileges) ?

Ajout de Rôle

- {(privileges) ?
+
{!isAllSelected ? "Sélectionner tout" : "désélectionner"}
@@ -129,13 +129,13 @@ const CreateRoleForm = ({ appendRole, setIsOpen }) => {

Pas encore des habilitations

}
-
:
} +
- + :
}
) diff --git a/src/app/role/RoleTableRows.jsx b/src/app/role/RoleTableRows.jsx index 5c44906d31bcc24da8220a392a1eb4b50e4dd520..c937dc003abaa06eb94bcdebe535b758c83843a7 100644 --- a/src/app/role/RoleTableRows.jsx +++ b/src/app/role/RoleTableRows.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from 'react' +import React, { useState } from 'react' import fetchRequest from '../lib/fetchRequest' import DeleteIcon from "@/static/image/svg/delete.svg" import EditIcon from "@/static/image/svg/edit.svg" @@ -50,7 +50,7 @@ const RoleTableRows = ({ name, setRoles, id, privileges, setRoleToUpdate }) => { <> -

{name}

+

{name}

diff --git a/src/app/role/UpdateRoleForm.jsx b/src/app/role/UpdateRoleForm.jsx index e980dbf25c93bfccfd131e934585909e7ee45a26..348ebfce5dc70d57d41f4157b2bb2579c29dafca 100644 --- a/src/app/role/UpdateRoleForm.jsx +++ b/src/app/role/UpdateRoleForm.jsx @@ -109,13 +109,13 @@ const UpdateRoleForm = ({ setRoleToUpdate, setRoles, roles, privileges: rolePriv
setRoleToUpdate(null)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" /> -
+ {(privileges) ?

Modification de Rôle

- {(privileges) ?
+
{!isAllSelected ? "Sélectionner tout" : "désélectionner"}
@@ -128,13 +128,13 @@ const UpdateRoleForm = ({ setRoleToUpdate, setRoles, roles, privileges: rolePriv

Pas encore des habilitations

}
-
:
} +
- + :
}
) diff --git a/src/app/user/CreateUserForm.jsx b/src/app/user/CreateUserForm.jsx index f06c5ca134640ced18395b607c20c204dee24ca6..1b4540dded96560ea804cbd0e84475a0e820fc27 100644 --- a/src/app/user/CreateUserForm.jsx +++ b/src/app/user/CreateUserForm.jsx @@ -3,6 +3,7 @@ import Loader from '@/components/Loader/Loader' import fetchRequest from '../lib/fetchRequest' import { useNotification } from '@/context/NotificationContext' import CancelIcon from "@/static/image/svg/cancel.svg" +import { EMAIL_REGEX } from '../lib/constants' @@ -35,7 +36,7 @@ const CreateUserForm = ({ setIsOpen, appendUser }) => { const [isLoading, setIsLoading] = useState(false) const [selectedRole, setSelectedRole] = useState(null) const { toggleNotification } = useNotification() - const [selectProjects, setSelectedProjects] = useState([]) + const [selectedProject, setSelectedProject] = useState([]) const [roles, setRoles] = useState(null) const [projects, setProjects] = useState(null) @@ -70,144 +71,163 @@ const CreateUserForm = ({ setIsOpen, appendUser }) => { getRoles() getProjects() }, []) - const handleFieldChange = (event) => setUserData({ ...userData, [event.target.name]: event.target.value }) - + const handleFieldChange = (event) => { + setUserData({ ...userData, [event.target.name]: event.target.value }) + setErrors({ ...errors, [event.target.name]: "" }) + } + const [errors, setErrors] = useState({ first_name: "", last_name: "", email: "", role: "" }) const [userData, setUserData] = useState({ email: "", password: generateRandomPassword(), first_name: "", last_name: "" }) + + const isValidFields = () => { + const localErrors = { first_name: "", last_name: "", email: "", role: "" } + if (userData.first_name === "") localErrors.first_name = "Le prénom doit être spécifier." + if (userData.last_name === "") localErrors.last_name = "Le nom doit être spécifier." + if (!selectedRole) localErrors.role = "Le rôle doit être spécifier." + if (!userData.email) localErrors.email = "L'email doit être spécifier." + else if (!EMAIL_REGEX.test(userData.email)) localErrors.email = "Votre adresse email n'est pas valide." + setErrors({ ...localErrors }) + return Object.values(localErrors).find((element) => element !== "") === undefined + } const handleSubmit = async (event) => { event.preventDefault() - setIsLoading(true) - const { data, errors, isSuccess, status } = await fetchRequest("/users/", { - method: "POST", - body: JSON.stringify({ ...userData, username: userData.email, role: selectedRole.id, project_ids: selectProjects.map((element) => element.id) }) - }) - if (isSuccess) { - setIsLoading(false) - setSelectedRole(null) - appendUser(data.data) - toggleNotification({ - visible: true, - message: "Le rôle a été créé avec succès", - type: "success" + if (isValidFields()) { + setIsLoading(true) + const { data, errors: requestErrors, isSuccess, status } = await fetchRequest("/users/", { + method: "POST", + body: JSON.stringify({ ...userData, username: userData.email, role: selectedRole, projects: selectedProject }) }) - setIsOpen(false) - } else { - setIsLoading(false) - if (errors.type === "ValidationError") { - if (errors.detail.name) { - toggleNotification({ - visible: true, - message: "Le rôle existe déjà", - type: "warning" - }) + if (isSuccess) { + setIsLoading(false) + setSelectedRole(null) + appendUser(data) + toggleNotification({ + visible: true, + message: "L'utilisateur a été créé avec succès", + type: "success" + }) + setIsOpen(false) + } else { + setIsLoading(false) + if (requestErrors.type === "ValidationError") { + if (requestErrors.detail.email) { + setErrors({ ...errors, email: "Cette adresse email est déjà utilisée." }) + } + else if (requestErrors.detail.role) { + toggleNotification({ + visible: true, + message: "Erreur de validation de rôle (le rôle peut être supprimé)", + type: "warning" + }) + } + else { + toggleNotification({ + visible: true, + message: "Erreur de validation de utilisateur", + type: "warning" + }) + setIsOpen(false) + } } else { toggleNotification({ visible: true, - message: "Erreur de validation de rôle", - type: "warning" + message: "Internal Server Error", + type: "error" }) setIsOpen(false) } + console.log(requestErrors) } - else if (status === 409) { - toggleNotification({ - visible: true, - message: "role created with 2 or more same privileges", - type: "error" - }) - setIsOpen(false) - } else if (errors.detail === "Privilege matching query does not exist.") { - toggleNotification({ - visible: true, - message: "Des privilèges que vous avez utilisés ont été supprimés.", - type: "warning" - }) - setIsOpen(false) - } else { - toggleNotification({ - visible: true, - message: "Internal Server Error", - type: "error" - }) - setIsOpen(false) - } - console.log(errors) } + } - const handleRoleClick = (newRole) => { - if (selectedRole?.id === newRole.id) { - setSelectedRole(null) - } else { - setSelectedRole(newRole) - } + const handleRoleChange = (event) => { + setErrors({ ...errors, role: "" }) + if (event.target.value) + setSelectedRole(event.target.value) + else setSelectedRole(null) } - const handleProjectClick = (project) => { - if (selectProjects.find((element) => element.id === project.id)) { - setSelectedProjects(selectProjects.filter((element) => element.id !== project.id)) - } else { - setSelectedProjects([...selectProjects, project]) - } + const handleProjectChange = (event) => { + if (event.target.value) + setSelectedProject([event.target.value]) + else setSelectedProject([]) } return (
setIsOpen(false)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" /> -
-

Ajout d utilisateur

+ {(roles && projects) ? +

Ajout d'utilisateur

- - + + +

{errors.last_name}

- - + + +

{errors.first_name}

- + +

{errors.email}

- {(roles) ?
+
-
- {roles.length !== 0 ? roles?.map((role) => { - const isSelected = selectedRole?.id === role.id - return
handleRoleClick(role)} key={role.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}> - {role.name} +
+ {roles.length !== 0 ? +
+ +

{errors.role}

- }) :
-

Pas encore des habilitations

-
} + :
+

Pas encore des rôles

+
}
-
:
} - {(projects) ?
+
+
- +
-
- {projects.length !== 0 ? projects?.map((project) => { - const isSelected = selectProjects.find((element) => element.id === project.id) !== undefined - return
handleProjectClick(project)} key={project.id} className={`${!isSelected ? 'text-neutral-400 hover:border-neutral-400 hover:text-neutral-500 border-neutral-300 bg-neutral-100' : 'text-indigo-500 hover:border-indigo-500 hover:text-indigo-500 border-indigo-400 bg-indigo-100'} will-change-contents h-6 text-sm flex items-center justify-center duration-150 delay-75 cursor-pointer text-semibold leading-[0] border-2 py-0.5 rounded-full w-fit px-2`}> - {project.nom} +
+ {projects.length !== 0 ? +
+
- }) :
-

Pas encore des projets

-
} + :
+

Pas encore des projets

+
}
-
:
} +
- + :
}
) diff --git a/src/app/user/UpdateUserForm.jsx b/src/app/user/UpdateUserForm.jsx index d214f1851c494a1c39ed8432decfdc39e102c944..1e62cce821677d104112efa6e1185d54b24774b0 100644 --- a/src/app/user/UpdateUserForm.jsx +++ b/src/app/user/UpdateUserForm.jsx @@ -1,8 +1,205 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' +import Loader from '@/components/Loader/Loader' +import fetchRequest from '../lib/fetchRequest' +import { useNotification } from '@/context/NotificationContext' +import CancelIcon from "@/static/image/svg/cancel.svg" +import { EMAIL_REGEX } from '../lib/constants' -const UpdateUserForm = () => { + +const UpdateUserForm = ({ setUserToUpdate, userToUpdate, setUsers }) => { + const [isLoading, setIsLoading] = useState(false) + const [selectedRole, setSelectedRole] = useState(userToUpdate.role?.id || null) + const { toggleNotification } = useNotification() + const [selectedProject, setSelectedProject] = useState(userToUpdate.projects?.length ? [userToUpdate.projects[0].id] : []) + + const [roles, setRoles] = useState(null) + const [projects, setProjects] = useState(null) + useEffect(() => { + const getRoles = async () => { + const { data, errors, isSuccess } = await fetchRequest("/roles/") + if (isSuccess) { + setRoles(data) + } else { + setRoles([]) + toggleNotification({ + visible: true, + message: "Internal Server Error", + type: "error" + }) + console.log(errors) + } + } + const getProjects = async () => { + const { isSuccess, errors, data } = await fetchRequest("/projects/"); + if (isSuccess) { + setProjects(data); + } else { + toggleNotification({ + visible: true, + message: "Internal Server Error", + type: "error" + }) + console.log(errors) + } + } + getRoles() + getProjects() + }, []) + const handleFieldChange = (event) => { + setUserData({ ...userData, [event.target.name]: event.target.value }) + setErrors({ ...errors, [event.target.name]: "" }) + } + const [errors, setErrors] = useState({ first_name: "", last_name: "", email: "", role: "" }) + const [userData, setUserData] = useState({ email: userToUpdate.email, first_name: userToUpdate.first_name, last_name: userToUpdate.last_name }) + + const isValidFields = () => { + const localErrors = { first_name: "", last_name: "", email: "", role: "" } + if (userData.first_name === "") localErrors.first_name = "Le prénom doit être spécifier." + if (userData.last_name === "") localErrors.last_name = "Le nom doit être spécifier." + if (!selectedRole) localErrors.role = "Le rôle doit être spécifier." + if (!userData.email) localErrors.email = "L'email doit être spécifier." + else if (!EMAIL_REGEX.test(userData.email)) localErrors.email = "Votre adresse email n'est pas valide." + setErrors({ ...localErrors }) + return Object.values(localErrors).find((element) => element !== "") === undefined + } + const handleSubmit = async (event) => { + event.preventDefault() + if (isValidFields()) { + setIsLoading(true) + const { data, errors: requestErrors, isSuccess, status } = await fetchRequest(`/users/${userToUpdate.id}/`, { + method: "PATCH", + body: JSON.stringify({ ...userData, username: userData.email, role: selectedRole, projects: selectedProject }) + }) + if (isSuccess) { + setUsers((users) => users.map((element) => element.id === userToUpdate.id ? data : element)) + setIsLoading(false) + setSelectedRole(null) + toggleNotification({ + visible: true, + message: "L'utilisateur a été modifié avec succès", + type: "success" + }) + setUserToUpdate(null) + } else { + setIsLoading(false) + if (requestErrors.type === "ValidationError") { + if (requestErrors.detail.email) { + setErrors({ ...errors, email: "Cette adresse email est déjà utilisée." }) + } + else if (requestErrors.detail.role) { + toggleNotification({ + visible: true, + message: "Erreur de validation de rôle (le rôle peut être supprimé)", + type: "warning" + }) + } + else { + toggleNotification({ + visible: true, + message: "Erreur de validation de utilisateur", + type: "warning" + }) + setUserToUpdate(null) + } + } + else { + toggleNotification({ + visible: true, + message: "Internal Server Error", + type: "error" + }) + setUserToUpdate(null) + } + console.log(requestErrors) + } + } + + } + const handleRoleChange = (event) => { + setErrors({ ...errors, role: "" }) + if (event.target.value) + setSelectedRole(event.target.value) + else setSelectedRole(null) + } + const handleProjectChange = (event) => { + if (event.target.value) + setSelectedProject([event.target.value]) + else setSelectedProject([]) + } return ( -
UpdateUserForm
+
+
+ setUserToUpdate(null)} className="h-8 w-8 cursor-pointer absolute top-2 right-2 fill-neutral-600" /> + {(roles && projects) ?
+

Modification d'utilisateur

+
+
+ + +

{errors.last_name}

+
+
+ + +

{errors.first_name}

+
+
+
+ + +

{errors.email}

+
+
+
+ +
+
+ {roles.length !== 0 ? +
+ +

{errors.role}

+
+ :
+

Pas encore des rôles

+
} +
+
+
+
+ +
+
+ {projects.length !== 0 ? +
+ +
+ :
+

Pas encore des projets

+
} +
+
+
+ +
+
:
} +
+
) } diff --git a/src/app/user/UserTableRow.jsx b/src/app/user/UserTableRow.jsx index 1860ee8ae70d4c6a07ffdcba015f733f2fb85490..e0575321e03509d921e81fa70d03b2846fa3073a 100644 --- a/src/app/user/UserTableRow.jsx +++ b/src/app/user/UserTableRow.jsx @@ -5,7 +5,7 @@ import ConfirmationModal from '../ui/ConfirmationModal' import { useNotification } from '@/context/NotificationContext' import fetchRequest from '../lib/fetchRequest' -const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projects }) => { +const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projects, setUserToUpdate }) => { const { toggleNotification } = useNotification() const [isModalOpen, setModalOpen] = useState(false); const showDeletePopup = () => { @@ -23,13 +23,13 @@ const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projec } else if (status == 404) { toggleNotification({ visible: true, - message: "L'utilisateur n'a pas été trouvé", + message: "L'utilisateur n'a pas été trouvé", type: "warning" }) - } else if (errors.detail?.indexOf("Cannot delete some instances of model 'Role'") !== -1) { + } else if (errors.detail?.indexOf("Cannot delete some instances of model") !== -1) { toggleNotification({ visible: true, - message: "Impossible de supprimer cet utilisateur car il est attribué à des utilisateurs", + message: "Impossible de supprimer cet utilisateur car il est attribué à d'autre objets", type: "warning" }) } @@ -66,7 +66,7 @@ const UserTableRow = ({ email, last_name, first_name, id, setUsers, role, projec
-
- {(isLoading) &&
} +
+ +
+ {(isLoading) &&
} {(!isLoading) && <> {(!isArray(users) || users?.length === 0) - ?
+ ?

Pas encore des utilisateurs

- :
+ : +
@@ -66,8 +85,31 @@ const UserPage = () => { return })}
Nom
-
- }} +
} + + } +
+ {(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/static/image/svg/chevron-left.svg b/src/static/image/svg/chevron-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..bfbeddaec4e6e4a0ae5f8210efcc1f2044fca927 --- /dev/null +++ b/src/static/image/svg/chevron-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/static/image/svg/chevron-right.svg b/src/static/image/svg/chevron-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..49c8a53fcd0352ccbec6886ee77927dd10244b18 --- /dev/null +++ b/src/static/image/svg/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file