2025-03-31 06:37:25 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
2025-03-25 06:17:41 +00:00
|
|
|
import Search from "../../ui/inputs/Search";
|
2025-03-29 12:26:50 +00:00
|
|
|
import vehicle from "../../../assets/image/vehicles.png";
|
|
|
|
import workStation from "../../../assets/image/workStation.png";
|
|
|
|
import machines from "../../../assets/image/machines.png";
|
|
|
|
import feneration from "../../../assets/image/feneration.png";
|
|
|
|
import worker from "../../../assets/image/worker.png";
|
2025-03-31 06:37:25 +00:00
|
|
|
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
|
|
|
|
|
|
|
|
interface AssetProp {
|
|
|
|
filename: string;
|
|
|
|
thumbnail: string;
|
|
|
|
category: string;
|
|
|
|
description: string;
|
|
|
|
tags: string;
|
|
|
|
url: String;
|
|
|
|
uploadDate: number;
|
|
|
|
isArchieve: boolean;
|
|
|
|
animated: boolean;
|
|
|
|
price: number;
|
|
|
|
CreatedBy: String;
|
|
|
|
}
|
2025-03-25 06:17:41 +00:00
|
|
|
const Assets: React.FC = () => {
|
|
|
|
const [searchValue, setSearchValue] = useState<string>("");
|
2025-03-29 12:26:50 +00:00
|
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
2025-03-31 06:37:25 +00:00
|
|
|
const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
|
|
setSearchValue(value);
|
2025-03-29 12:26:50 +00:00
|
|
|
setSelectedCategory(null); // Reset selected category when search changes
|
2025-03-25 06:17:41 +00:00
|
|
|
};
|
2025-03-29 12:26:50 +00:00
|
|
|
|
|
|
|
const categoryList = [
|
|
|
|
{
|
|
|
|
assetName: "Doors",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Feneration",
|
|
|
|
categoryImage: feneration,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Windows",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Feneration",
|
|
|
|
categoryImage: feneration,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Pillars",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Feneration",
|
|
|
|
categoryImage: feneration,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
category: "Vehicles",
|
|
|
|
categoryImage: vehicle,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
category: "Workstation",
|
|
|
|
categoryImage: workStation,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
category: "Machines",
|
|
|
|
categoryImage: machines,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
category: "Workers",
|
|
|
|
categoryImage: worker,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
// Get unique categories
|
|
|
|
const uniqueCategories = Array.from(
|
|
|
|
new Set(categoryList.map((asset) => asset.category))
|
|
|
|
);
|
|
|
|
|
2025-03-31 06:37:25 +00:00
|
|
|
const fetchCategoryAssets = async (asset: any) => {
|
|
|
|
try {
|
|
|
|
setSelectedCategory(asset);
|
|
|
|
const res = await getCategoryAsset(asset);
|
|
|
|
setFilteredAsset(res);
|
|
|
|
} catch (error) {}
|
|
|
|
};
|
2025-03-25 06:17:41 +00:00
|
|
|
return (
|
|
|
|
<div className="assets-container">
|
|
|
|
<Search onChange={handleSearchChange} />
|
|
|
|
{searchValue ? (
|
|
|
|
<div className="searched-content">
|
|
|
|
<p>Results for "{searchValue}"</p>
|
|
|
|
</div>
|
2025-03-29 12:26:50 +00:00
|
|
|
) : selectedCategory ? (
|
|
|
|
<div className="assets-wrapper">
|
|
|
|
{/* Back Button */}
|
|
|
|
<div
|
|
|
|
className="back-button"
|
|
|
|
onClick={() => setSelectedCategory(null)}
|
|
|
|
>
|
|
|
|
← Back
|
|
|
|
</div>
|
|
|
|
<h2>{selectedCategory}</h2>
|
|
|
|
<div className="assets-container">
|
2025-03-31 06:37:25 +00:00
|
|
|
{filteredAsset &&
|
|
|
|
filteredAsset?.map((asset: any, index: number) => (
|
|
|
|
<div key={index} className="assets">
|
|
|
|
<img
|
|
|
|
src={asset.thumbnail}
|
|
|
|
alt={asset.filename}
|
|
|
|
className="asset-image"
|
|
|
|
/>
|
|
|
|
<div className="asset-name">{asset.filename}</div>
|
|
|
|
</div>
|
|
|
|
))}
|
2025-03-29 12:26:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2025-03-25 06:17:41 +00:00
|
|
|
) : (
|
2025-03-29 12:26:50 +00:00
|
|
|
<div className="assets-wrapper">
|
|
|
|
<h2>Categories</h2>
|
|
|
|
<div className="categories-container">
|
|
|
|
{uniqueCategories.map((category, index) => {
|
|
|
|
const categoryInfo = categoryList.find(
|
|
|
|
(asset) => asset.category === category
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
key={index}
|
|
|
|
className="category"
|
2025-03-31 06:37:25 +00:00
|
|
|
onClick={() => fetchCategoryAssets(category)}
|
2025-03-29 12:26:50 +00:00
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={categoryInfo?.categoryImage || ""}
|
|
|
|
alt={category}
|
|
|
|
className="category-image"
|
|
|
|
/>
|
|
|
|
<div className="category-name">{category}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
2025-03-25 06:17:41 +00:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Assets;
|