added get icon for file by use uploaded
This commit is contained in:
parent
dc75121d31
commit
ec04426e52
53
src/components/Expenses/Filelist.jsx
Normal file
53
src/components/Expenses/Filelist.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
|
||||
|
||||
const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
return (
|
||||
<div className="d-block">
|
||||
{files
|
||||
.filter((file) => {
|
||||
if (expenseToEdit) {
|
||||
return file.isActive;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((file, idx) => (
|
||||
<div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2">
|
||||
<div className="row align-items-center">
|
||||
{/* File icon and info */}
|
||||
<div className="col-10 d-flex align-items-center gap-2">
|
||||
<i
|
||||
className={`bx ${getIconByFileType(
|
||||
file?.contentType
|
||||
)} fs-3`}
|
||||
style={{ minWidth: "30px" }}
|
||||
></i>
|
||||
|
||||
<div className="d-flex flex-column text-truncate">
|
||||
<span className="fw-medium small text-truncate">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small">
|
||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-2 text-end">
|
||||
<i
|
||||
className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm "
|
||||
role="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Filelist;
|
||||
@ -29,6 +29,7 @@ import DatePicker from "../common/DatePicker";
|
||||
import ErrorPage from "../../pages/ErrorPage";
|
||||
import Label from "../common/Label";
|
||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
||||
import Filelist from "./Filelist";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
@ -330,7 +331,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
control={control}
|
||||
name="paidById"
|
||||
projectId={null}
|
||||
forAll={expenseToEdit ? true :false}
|
||||
forAll={expenseToEdit ? true : false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -342,6 +343,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</Label>
|
||||
<DatePicker
|
||||
name="transactionDate"
|
||||
className="w-100"
|
||||
control={control}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
@ -512,42 +514,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
{errors.billAttachments.message}
|
||||
</small>
|
||||
)}
|
||||
{files.length > 0 && (
|
||||
<div className="d-block">
|
||||
{files
|
||||
.filter((file) => {
|
||||
if (expenseToEdit) {
|
||||
return file.isActive;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((file, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
className="d-flex justify-content-between text-start p-1"
|
||||
href={file.preSignedUrl || "#"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div>
|
||||
<span className="mb-0 text-secondary small d-block">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small d-block">
|
||||
{file.fileSize ? formatFileSize(file.fileSize) : ""}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
className="bx bx-trash bx-sm cursor-pointer text-danger"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{files.length > 0 && <Filelist files={files} removeFile={removeFile} expenseToEdit={expenseToEdit}/>}
|
||||
|
||||
{Array.isArray(errors.billAttachments) &&
|
||||
errors.billAttachments.map((fileError, index) => (
|
||||
|
||||
@ -51,17 +51,29 @@ export const useDebounce = (value, delay = 500) => {
|
||||
export const getIconByFileType = (type = "") => {
|
||||
const lower = type.toLowerCase();
|
||||
|
||||
if (lower === "application/pdf") return "bxs-file-pdf";
|
||||
if (lower.includes("word")) return "bxs-file-doc";
|
||||
if (lower.includes("excel") || lower.includes("spreadsheet"))
|
||||
return "bxs-file-xls";
|
||||
if (lower === "image/png") return "bxs-file-png";
|
||||
if (lower === "image/jpeg" || lower === "image/jpg") return "bxs-file-jpg";
|
||||
if (lower.includes("zip") || lower.includes("rar")) return "bxs-file-archive";
|
||||
const map = [
|
||||
{ match: "pdf", icon: "bxs-file-pdf", color: "text-danger" },
|
||||
{ match: "word", icon: "bxs-file-doc", color: "text-primary" },
|
||||
{ match: "excel", icon: "bxs-file-xls", color: "text-success" },
|
||||
{ match: "spreadsheet", icon: "bxs-file-xls", color: "text-success" },
|
||||
{ match: "zip", icon: "bxs-file-archive", color: "text-warning" },
|
||||
{ match: "rar", icon: "bxs-file-archive", color: "text-warning" },
|
||||
{ match: "png", icon: "bxs-file-png", color: "text-info" },
|
||||
{ match: "jpg", icon: "bxs-file-jpg", color: "text-info" },
|
||||
{ match: "jpeg", icon: "bxs-file-jpg", color: "text-info" },
|
||||
{ match: "image", icon: "bxs-file-image", color: "text-info" },
|
||||
];
|
||||
|
||||
return "bx bx-file";
|
||||
// Find first match
|
||||
const found = map.find((m) => lower.includes(m.match));
|
||||
|
||||
// Default if nothing matched
|
||||
return found
|
||||
? `bx ${found.icon} ${found.color}`
|
||||
: "bx bx-file text-secondary";
|
||||
};
|
||||
|
||||
|
||||
export const normalizeAllowedContentTypes = (allowedContentType) => {
|
||||
if (!allowedContentType) return [];
|
||||
if (Array.isArray(allowedContentType)) return allowedContentType;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user