Merge pull request 'Feature#813_FeaturePermission : Added Permission at Expense Management' (#305) from Feature#813_FeaturePermission into Feature_Expense
Reviewed-on: #305 merged
This commit is contained in:
commit
9daecf7cfb
@ -1,5 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import { useActionOnExpense, useExpense } from "../../hooks/useExpense";
|
||||
import React, { useState, useMemo } from "react";
|
||||
import {
|
||||
useActionOnExpense,
|
||||
useExpense,
|
||||
useHasAnyPermission,
|
||||
} from "../../hooks/useExpense";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
@ -7,11 +11,18 @@ import { ActionSchema } from "./ExpenseSchema";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { REVIEW_EXPENSE } from "../../utils/constants";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const ViewExpense = ({ ExpenseId }) => {
|
||||
const { data, isLoading, isError, error } = useExpense(ExpenseId);
|
||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = useExpenseContext();
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -26,6 +37,24 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
},
|
||||
});
|
||||
|
||||
const userPermissions = useSelector(
|
||||
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
||||
);
|
||||
|
||||
const nextStatusWithPermission = useMemo(() => {
|
||||
if (!Array.isArray(data?.nextStatus)) return [];
|
||||
|
||||
return data.nextStatus.filter((status) => {
|
||||
const permissionIds = Array.isArray(status?.permissionIds)
|
||||
? status.permissionIds
|
||||
: [];
|
||||
|
||||
if (permissionIds.length === 0) return true;
|
||||
|
||||
return permissionIds.some((id) => userPermissions.includes(id));
|
||||
});
|
||||
}, [data, userPermissions]);
|
||||
|
||||
const { mutate: MakeAction } = useActionOnExpense(() => reset());
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
@ -163,12 +192,27 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Description:</label>
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
<div className="col-12 my-2 text-start ">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Attachement :
|
||||
</label>
|
||||
{data?.documents &&
|
||||
data?.documents?.map((doc) => (
|
||||
<div className="col-12 my-2 text-start">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Attachment:</label>
|
||||
|
||||
{data?.documents?.map((doc) => {
|
||||
const getIconByType = (type) => {
|
||||
if (!type) return "bx bx-file";
|
||||
|
||||
if (type.includes("pdf")) return "bxs-file-pdf";
|
||||
if (type.includes("word")) return "bxs-file-doc";
|
||||
if (type.includes("excel") || type.includes("spreadsheet"))
|
||||
return "bxs-file-xls";
|
||||
if (type.includes("image")) return "bxs-file-image";
|
||||
if (type.includes("zip") || type.includes("rar"))
|
||||
return "bxs-file-archive";
|
||||
|
||||
return "bx bx-file"; // Default
|
||||
};
|
||||
|
||||
const isImage = doc.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
className="list-group-item list-group-item-action d-flex align-items-center"
|
||||
key={doc.id}
|
||||
@ -176,59 +220,45 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
<div
|
||||
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
|
||||
style={{ height: "50px", width: "80px", position: "relative" }}
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
{doc.contentType === "application/pdf" ? (
|
||||
<div>
|
||||
<i
|
||||
className="bx bxs-file-pdf"
|
||||
style={{ fontSize: "45px" }}
|
||||
></i>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!imageLoaded[doc.id] && (
|
||||
<div className="position-absolute text-secondary">
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={doc.thumbPreSignedUrl}
|
||||
alt={doc.fileName}
|
||||
className="img-fluid rounded"
|
||||
style={{
|
||||
maxHeight: "100%",
|
||||
maxWidth: "100%",
|
||||
objectFit: "cover",
|
||||
opacity: imageLoaded[doc.id] ? 1 : 0,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
}}
|
||||
onLoad={() => handleImageLoad(doc.id)}
|
||||
onClick={() =>
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<i
|
||||
className={`bx ${getIconByType(
|
||||
doc.contentType
|
||||
)} text-primary`}
|
||||
style={{ fontSize: "45px" }}
|
||||
></i>
|
||||
</div>
|
||||
|
||||
<div className="w-100">
|
||||
<small className="mb-0 small">{doc.fileName}</small>
|
||||
<div className="d">
|
||||
<i className="bx bx-cloud-download cursor-pointer"></i>
|
||||
<a
|
||||
href={doc.preSignedUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bx bx-cloud-download cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<hr className="divider my-1" />
|
||||
|
||||
{Array.isArray(data.nextStatus) && data.nextStatus.length > 0 && (
|
||||
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
|
||||
<div className="col-12 mb-3 text-start">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
|
||||
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
@ -240,21 +270,23 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
|
||||
<input type="hidden" {...register("selectedStatus")} />
|
||||
|
||||
<div className="text-center flex-wrap gap-2 my-2">
|
||||
{data.nextStatus.map((status, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setValue("selectedStatus", status.id);
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
>
|
||||
{status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{nextStatusWithPermission?.length > 0 && (
|
||||
<div className="text-center flex-wrap gap-2 my-2">
|
||||
{nextStatusWithPermission?.map((status, index) => (
|
||||
<button
|
||||
key={status.id || index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setValue("selectedStatus", status.id);
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
>
|
||||
{status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
|
||||
@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import ExpenseRepository from "../repositories/ExpsenseRepository";
|
||||
import showToast from "../services/toastService";
|
||||
import { queryClient } from "../layouts/AuthLayout";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
// -------------------Query------------------------------------------------------
|
||||
export const useExpenseList = (pageSize, pageNumber, filter) => {
|
||||
@ -196,3 +197,21 @@ export const useDeleteExpense = () => {
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export const useHasAnyPermission = (permissionIdsInput) => {
|
||||
const permissions = useSelector(
|
||||
(state) => state?.profile?.permissions || []
|
||||
);
|
||||
|
||||
const permissionIds = Array.isArray(permissionIdsInput)
|
||||
? permissionIdsInput
|
||||
: [];
|
||||
|
||||
// No permission needed
|
||||
if (permissionIds.length === 0) return true;
|
||||
|
||||
return permissionIds.some((id) => permissions.includes(id));
|
||||
};
|
||||
@ -32,6 +32,8 @@ import {
|
||||
defaultFilter,
|
||||
SearchSchema,
|
||||
} from "../../components/Expenses/ExpenseSchema";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { CREATE_EXEPENSE } from "../../utils/constants";
|
||||
|
||||
const SelectDropdown = ({
|
||||
label,
|
||||
@ -97,6 +99,7 @@ export const useExpenseContext = () => useContext(ExpenseContext);
|
||||
const ExpensePage = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [filters,setFilter] = useState()
|
||||
const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE)
|
||||
const dropdownRef = useRef(null);
|
||||
const shouldCloseOnOutsideClick = useRef(false);
|
||||
const selectedProjectId = useSelector(
|
||||
@ -348,7 +351,8 @@ const setDateRange = ({ startDate, endDate }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-7 col-sm-8 text-end gap-2">
|
||||
<button
|
||||
{IsCreatedAble && (
|
||||
<button
|
||||
type="button"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
@ -365,6 +369,8 @@ const setDateRange = ({ startDate, endDate }) => {
|
||||
>
|
||||
<i className="bx bx-plus fs-4 text-white"></i>
|
||||
</button>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user