added viewer for pdf type document
This commit is contained in:
parent
991e1a263a
commit
71d230be32
@ -1,5 +1,9 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import { useActionOnExpense, useExpense, useHasAnyPermission } from "../../hooks/useExpense";
|
||||
import {
|
||||
useActionOnExpense,
|
||||
useExpense,
|
||||
useHasAnyPermission,
|
||||
} from "../../hooks/useExpense";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
@ -11,12 +15,14 @@ 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,
|
||||
@ -30,27 +36,24 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
selectedStatus: "",
|
||||
},
|
||||
});
|
||||
|
||||
const userPermissions = useSelector(
|
||||
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
||||
);
|
||||
|
||||
const userPermissions = useSelector(
|
||||
(state) => state?.globalVariables?.loginUser?.featurePermissions || []
|
||||
);
|
||||
|
||||
const nextStatusWithPermission = useMemo(() => {
|
||||
if (!Array.isArray(data?.nextStatus)) return [];
|
||||
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]);
|
||||
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());
|
||||
|
||||
@ -189,12 +192,27 @@ const nextStatusWithPermission = useMemo(() => {
|
||||
<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}
|
||||
@ -202,91 +220,75 @@ const nextStatusWithPermission = useMemo(() => {
|
||||
<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 && (
|
||||
<div className="col-12 mb-3 text-start">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
|
||||
{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")}
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">{errors.comment.message}</small>
|
||||
)}
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">{errors.comment.message}</small>
|
||||
)}
|
||||
|
||||
<input type="hidden" {...register("selectedStatus")} />
|
||||
|
||||
{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>
|
||||
)}
|
||||
<input type="hidden" {...register("selectedStatus")} />
|
||||
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user