admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Handled Global and Project level permissions' (#403) from hotchanges_projectPermission into Refactor_Directory

Browse Source 
Reviewed-on: #403
Merged
This commit is contained in:
pramod.mahajan 2025-09-16 10:43:30 +00:00
commit 7ef10e3e5b
6 changed files with 147 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Project/ProjectNav.jsx
View File

@ -7,6 +7,10 @@ import {
DIRECTORY_USER,
MANAGE_PROJECT_INFRA,
MANAGE_TASK,
MANAGE_TEAM,
MODIFY_DOCUMENT,
UPLOAD_DOCUMENT,
VIEW_DOCUMENT,
VIEW_PROJECT_INFRA,
} from "../../utils/constants";
@ -17,6 +21,10 @@ const ProjectNav = ({ onPillClick, activePill }) => {
const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
const DireManager = useHasUserPermission(DIRECTORY_MANAGER);
const DirUser = useHasUserPermission(DIRECTORY_USER);
const isManageTeam = useHasUserPermission(MANAGE_TEAM)
const isViewDocuments = hasUserPermission(VIEW_DOCUMENT);
const isUploadDocument = useHasUserPermission(UPLOAD_DOCUMENT)
const isModifyDocument = useHasUserPermission(MODIFY_DOCUMENT)
const ProjectTab = [
{ key: "profile", icon: "bx bx-user", label: "Profile" },
@ -33,8 +41,8 @@ const ProjectNav = ({ onPillClick, activePill }) => {
label: "Directory",
hidden: !(DirAdmin || DireManager || DirUser),
},
{ key: "documents", icon: "bx bx-folder-open", label: "Documents" },
{ key: "setting", icon: "bx bxs-cog", label: "Setting" },
{ key: "documents", icon: "bx bx-folder-open", label: "Documents",hidden:!(isViewDocuments || isModifyDocument || isUploadDocument) },
{ key: "setting", icon: "bx bxs-cog", label: "Setting",hidden:!isManageTeam },
];
return (
<div className="nav-align-top">

174
src/components/Project/ProjectPermission.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useCallback, useEffect } from "react";
import {
useProjectLevelEmployeePermission,
useProjectLevelModules,
@ -27,7 +27,7 @@ const ProjectPermission = () => {
watch,
handleSubmit,
reset,
formState: { errors },
formState: { errors, isDirty },
} = useForm({
resolver: zodResolver(ProjectPermissionSchema),
defaultValues: {
@ -43,82 +43,82 @@ const ProjectPermission = () => {
selectedProject
);
useEffect(() => {
if (!selectedEmployee) return;
useEffect(() => {
if (!selectedEmployee) return;
const enabledPerms =
selectedEmpPermissions?.permissions
?.filter((perm) => perm.isEnabled)
?.map((perm) => perm.id) || [];
reset((prev) => ({
...prev,
selectedPermissions: enabledPerms,
}));
}, [selectedEmpPermissions, reset, selectedEmployee]);
const enabledPerms =
selectedEmpPermissions?.permissions
?.filter((perm) => perm.isEnabled)
?.map((perm) => perm.id) || [];
reset((prev) => ({
...prev,
selectedPermissions: enabledPerms,
}));
}, [selectedEmpPermissions, reset, selectedEmployee]);
const { mutate: updatePermission, isPending } =
useUpdateProjectLevelEmployeePermission();
const onSubmit = (formData) => {
if (!formData.employeeId) {
showToast("Please select an employee", "warn");
return;
}
const onSubmit = (formData) => {
if (!formData.employeeId) {
showToast("Please select an employee", "warn");
return;
}
const existingPermissions = selectedEmpPermissions?.permissions || [];
const existingEnabledIds = existingPermissions
.filter((p) => p.isEnabled)
.map((p) => p.id);
const existingPermissions = selectedEmpPermissions?.permissions || [];
const existingEnabledIds = existingPermissions
.filter((p) => p.isEnabled)
.map((p) => p.id);
const newSelectedIds = formData.selectedPermissions || [];
const newSelectedIds = formData.selectedPermissions || [];
const removed = existingEnabledIds
.filter((id) => !newSelectedIds.includes(id))
.map((id) => ({ id, isEnabled: false }));
const removed = existingEnabledIds
.filter((id) => !newSelectedIds.includes(id))
.map((id) => ({ id, isEnabled: false }));
const added = newSelectedIds
.filter((id) => !existingEnabledIds.includes(id))
.map((id) => ({ id, isEnabled: true }));
const added = newSelectedIds
.filter((id) => !existingEnabledIds.includes(id))
.map((id) => ({ id, isEnabled: true }));
const payloadPermissions = [...removed, ...added];
const payloadPermissions = [...removed, ...added];
if (payloadPermissions.length === 0) {
showToast("No changes detected", "info");
return;
}
if (payloadPermissions.length === 0) {
showToast("No changes detected", "info");
return;
}
const payload = {
employeeId: formData.employeeId,
projectId: selectedProject,
permission: payloadPermissions,
const payload = {
employeeId: formData.employeeId,
projectId: selectedProject,
permission: payloadPermissions,
};
updatePermission(payload);
};
updatePermission(payload);
};
const useOnClick = useCallback((event) => {}, []);
return (
<div className="row px-2 py-1">
<div className="w-100 p py-1 ">
<form className="row" onSubmit={handleSubmit(onSubmit)}>
{/* Employee Dropdown */}
<div className="d-flex align-items-end gap-2">
<div className="text-start">
<label className="form-label">Select Employee</label>
<select
<div className="d-flex justify-content-between align-items-end gap-2 mb-3">
<div className="text-start d-flex align-items-center gap-2">
<div className="d-block"><label className="form-label">Select Employee</label></div>
<div className="d-block"> <select
className="form-select form-select-sm"
{...register("employeeId")}
disabled={isPending}
dd
>
{loading ? (
<option value="">Loading...</option>
) : (
<>
<option value="">-- Select Employee --</option>
{[...employees]?.sort((a, b) =>
`${a.firstName} ${a.firstName}`?.localeCompare(
`${b.firstName} ${b.lastName}`
{[...employees]
?.sort((a, b) =>
`${a?.firstName} ${a?.firstName}`?.localeCompare(
`${b?.firstName} ${b?.lastName}`
)
)
?.map((emp) => (
@ -128,7 +128,7 @@ useEffect(() => {
))}
</>
)}
</select>
</select></div>
{errors.employeeId && (
<div className="text-danger small">
@ -136,42 +136,48 @@ useEffect(() => {
</div>
)}
</div>
<button
className="btn btn-sm btn-primary"
disabled={isPending || loading}
>
{isPending ? "Please Wait..." : "Update Permission"}
</button>
{isDirty && (
<div className="mt-3 text-end">
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending || loading}
>
{isPending ? "Please Wait..." : "Save Permission"}
</button>
</div>
)}
</div>
{/* Permissions */}
{ProjectModules.map((feature) => (
<div key={feature.id} className="row my-2 px-3 ">
<div className="col-12 text-start fw-semibold mb-2">
{feature.name}
</div>
<div className="col-12">
<div className="row">
{feature.featurePermissions?.map((perm) => (
<div className="col-12 col-sm-6 col-md-4 mb-2" key={perm.id}>
<label
className="form-check-label d-flex align-items-center"
htmlFor={perm.id}
>
<input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
value={perm.id}
{...register("selectedPermissions")}
/>
{perm.name}
</label>
</div>
))}
<div
key={feature.id}
className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
>
<div className="card text-start border-1 p-1">
<p className="card-title fs-6 fw-semibold">{feature.name}</p>
<div className="px-2">
<ul class="list-unstyled">
{feature.featurePermissions?.map((perm) => (
<div className="d-flex my-2" key={perm.id}>
<label
className="form-check-label d-flex align-items-center"
htmlFor={perm.id}
>
<input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
value={perm.id}
{...register("selectedPermissions")}
/>
{perm.name}
</label>
</div>
))}
</ul>
</div>
</div>
<hr className="my-2" />
</div>
))}
</form>

17
src/hooks/useHasUserPermission.js
View File

@ -1,11 +1,16 @@
import { useProfile } from "./useProfile"
import { useSelectedProject } from "../slices/apiDataManager";
import { useAllProjectLevelPermissions, useProfile } from "./useProfile";
export const useHasUserPermission = (permission) => {
const selectedProject = useSelectedProject();
const { profile } = useProfile();
const { data: projectPermissions = [], isLoading, isError } = useAllProjectLevelPermissions(selectedProject);
if (profile && permission && typeof permission === "string") {
return profile?.featurePermissions.includes(permission);
}
return false;
if (isLoading || !permission) return false;
const globalPerms = profile?.featurePermissions ?? [];
const projectPerms = projectPermissions ?? [];
return globalPerms.includes(permission) || projectPerms.includes(permission);
};

99
src/hooks/useProfile.js
View File

@ -1,67 +1,20 @@
import {useState,useEffect, useCallback} from "react";
import { useState, useEffect, useCallback } from "react";
import AuthRepository from "../repositories/AuthRepository";
import {cacheData, cacheProfileData, getCachedData, getCachedProfileData} from "../slices/apiDataManager";
import {useSelector} from "react-redux";
import {
cacheData,
cacheProfileData,
getCachedData,
getCachedProfileData,
useSelectedProject,
} from "../slices/apiDataManager";
import { useSelector } from "react-redux";
import eventBus from "../services/eventBus";
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import ProjectRepository from "../repositories/ProjectRepository";
let hasFetched = false;
let hasReceived = false;
// export const useProfile = () => {
// const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
// const [profile, setProfile] = useState(null);
// const [loading, setLoading] = useState(false);
// const [error, setError] = useState("");
// const fetchData = async () => {
// try {
// setLoading(true);
// let response = await AuthRepository.profile();
// setProfile(response.data);
// cacheProfileData(response.data);
// } catch (error) {
// setError("Failed to fetch data.");
// } finally {
// setLoading(false);
// }
// };
// const validation = () => {
// if (!hasFetched) {
// hasFetched = true;
// if (!loggedUser) {
// fetchData();
// } else {
// setProfile(loggedUser);
// }
// }
// setProfile(loggedUser);
// }
// useEffect(() => {
// validation();
// }, [loggedUser]);
// const handler = useCallback(
// (data) => {
// if(!getCachedData("hasReceived")){
// cacheData("hasReceived", true);
// hasFetched = false;
// validation();
// }
// },[]
// );
// useEffect(() => {
// eventBus.on("assign_project_one", handler);
// return () => eventBus.off("assign_project_one", handler);
// }, [handler]);
// return { profile, loading, error };
// };
export const useProfile = () => {
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
const queryClient = useQueryClient();
@ -100,12 +53,26 @@ export const useProfile = () => {
};
};
export const useSidBarMenu = ()=>{
const userLogged = useSelector((store)=>store.globalVariables.loginUser);
export const useSidBarMenu = () => {
const userLogged = useSelector((store) => store.globalVariables.loginUser);
return useQuery({
queryKey:["AppMenu"],
queryFn:async()=> await AuthRepository.appmenu(),
enabled: !!userLogged
})
}
queryKey: ["AppMenu"],
queryFn: async () => await AuthRepository.appmenu(),
enabled: !!userLogged,
});
};
export const useAllProjectLevelPermissions = (projectId) => {
return useQuery({
queryKey: ["AllProjectLevelPermission", projectId],
queryFn: async () => {
const resp = await ProjectRepository.getAllProjectLevelPermission(
projectId
);
return resp.data;
},
enabled: !!projectId,
});
};

3
src/repositories/ProjectRepository.jsx
View File

@ -44,7 +44,8 @@ const ProjectRepository = {
getProjectLevelEmployeeList:(projectId)=>api.get(`/api/Project/get/proejct-level/employees/${projectId}`),
getProjectLevelModules:()=>api.get(`/api/Project/get/proejct-level/modules`),
getProjectLevelEmployeePermissions:(employeeId,projectId)=>api.get(`/api/Project/get/project-level-permission/employee/${employeeId}/project/${projectId}`),
updateProjectLevelEmployeePermission:(data)=>api.post(`/api/Project/assign/project-level-permission`,data)
updateProjectLevelEmployeePermission:(data)=>api.post(`/api/Project/assign/project-level-permission`,data),
getAllProjectLevelPermission:(projectId)=>api.get(`/api/Project/get/all/project-level-permission/${projectId}`)
};
export const TasksRepository = {

1
src/utils/constants.jsx
View File

@ -17,6 +17,7 @@ export const VIEW_ALL_EMPLOYEES = "60611762-7f8a-4fb5-b53f-b1139918796b"
export const VIEW_TEAM_MEMBERS = "b82d2b7e-0d52-45f3-997b-c008ea460e7f"
export const MANAGE_TEAM = "b94802ce-0689-4643-9e1d-11c86950c35b"
export const MANAGE_PROJECT_INFRA = "cf2825ad-453b-46aa-91d9-27c124d63373"