132 lines
4.2 KiB
JavaScript
132 lines
4.2 KiB
JavaScript
import React from "react";
|
|
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
|
import Tooltip from "../common/Tooltip";
|
|
|
|
const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
|
|
return (
|
|
<div className="d-flex flex-wrap gap-2 my-1">
|
|
{files
|
|
.filter((file) => {
|
|
if (expenseToEdit) {
|
|
return file.isActive;
|
|
}
|
|
return true;
|
|
})
|
|
.map((file, idx) => (
|
|
<div className={`col-12 col-sm-${sm} col-md-${md} mb-2`} key={idx}>
|
|
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
|
|
{/* File icon and info */}
|
|
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
|
<i
|
|
className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
|
|
style={{ minWidth: "30px" }}
|
|
></i>
|
|
|
|
<div className="d-flex flex-column text-truncate">
|
|
<span className="fw-semibold small text-truncate">
|
|
{file.fileName}
|
|
</span>
|
|
<span className="text-body-secondary small">
|
|
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete icon */}
|
|
<Tooltip text="Remove file">
|
|
<i
|
|
className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
|
|
role="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
removeFile(expenseToEdit ? file.documentId : idx);
|
|
}}
|
|
></i>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Filelist;
|
|
export const FilelistView = ({ files, viewFile }) => {
|
|
return (
|
|
<div className="d-flex flex-wrap gap-2 mt-2">
|
|
{files?.map((file, idx) => (
|
|
<div className=" bg-white " key={idx}>
|
|
<div className="row align-items-center">
|
|
{/* File icon and info */}
|
|
<div className="col-12 d-flex align-items-center gap-2">
|
|
<i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></i>
|
|
|
|
<div
|
|
className="d-flex flex-column text-truncate"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
viewFile({
|
|
IsOpen: true,
|
|
Image: file.preSignedUrl,
|
|
});
|
|
}}
|
|
>
|
|
<span className="fw-medium small text-truncate">
|
|
{file.fileName}
|
|
</span>
|
|
<span className="text-body-secondary small">
|
|
<Tooltip text={"Click on file"}>
|
|
{" "}
|
|
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
|
</Tooltip>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
export const FileView = ({ file, viewFile }) => {
|
|
if (!file) {
|
|
return (
|
|
<div className="d-flex justify-content-center align-items-center py-4">
|
|
<p className="mb-0 text-muted small">No file uploaded</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className=" bg-white ">
|
|
<div className="row align-items-center">
|
|
{/* File icon and info */}
|
|
<div className="col-12 d-flex align-items-center gap-2 ms-n1">
|
|
<i className={`bx ${getIconByFileType(file?.fileName)} fs-4`}></i>
|
|
|
|
<div
|
|
className="d-flex flex-column text-truncate"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
viewFile({
|
|
IsOpen: true,
|
|
Image: file.preSignedUrl,
|
|
});
|
|
}}
|
|
>
|
|
<span className="text-muted small text-truncate mb-n4">
|
|
{file.fileName}
|
|
</span>
|
|
<span className="text-body-secondary small">
|
|
<Tooltip text={"Click on file"}>
|
|
{" "}
|
|
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
|
</Tooltip>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|