Dwinzo_dev/app/src/components/layout/sidebarLeft/Assets.tsx

217 lines
6.8 KiB
TypeScript
Raw Normal View History

2025-03-31 07:29:12 +00:00
import React, { useEffect, useMemo, useState } from "react";
2025-03-25 06:17:41 +00:00
import Search from "../../ui/inputs/Search";
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";
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
2025-03-31 07:29:12 +00:00
import arch from "../../../assets/gltf-glb/arch.glb";
import door from "../../../assets/gltf-glb/door.glb";
import window from "../../../assets/gltf-glb/window.glb";
2025-04-01 03:28:56 +00:00
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
interface AssetProp {
filename: string;
2025-03-31 07:29:12 +00:00
thumbnail?: string;
category: string;
2025-03-31 07:29:12 +00:00
description?: string;
2025-04-01 03:28:56 +00:00
tags: string;
2025-03-31 07:29:12 +00:00
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>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
2025-04-01 03:28:56 +00:00
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
2025-03-25 06:17:41 +00:00
const handleSearchChange = (value: string) => {
setSearchValue(value);
2025-04-01 03:28:56 +00:00
setSelectedCategory(null);
const filteredModels = filtereredAssets?.filter((model) =>
model.filename.toLowerCase().includes(value.toLowerCase())
);
setCategoryAssets(filteredModels);
2025-03-25 06:17:41 +00:00
};
2025-04-01 03:28:56 +00:00
useEffect(() => {
const filteredAssets = async () => {
try {
const filt = await fetchAssets();
setFiltereredAssets(filt);
} catch {}
};
filteredAssets();
}, []);
2025-03-31 07:29:12 +00:00
const categoryList = useMemo(
() => [
{
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 },
],
[]
);
const fetchCategoryAssets = async (asset: any) => {
2025-03-31 07:29:12 +00:00
setSelectedCategory(asset);
if (asset === "Feneration") {
const localAssets: AssetProp[] = [
{
filename: "arch",
category: "Feneration",
url: arch,
2025-04-01 03:28:56 +00:00
tags: "arch",
2025-03-31 07:29:12 +00:00
},
{
filename: "door",
category: "Feneration",
url: door,
2025-04-01 03:28:56 +00:00
thumbnail: feneration,
tags: "door",
2025-03-31 07:29:12 +00:00
},
{
filename: "window",
category: "Feneration",
url: window,
2025-04-01 03:28:56 +00:00
tags: "window",
2025-03-31 07:29:12 +00:00
},
];
2025-04-01 03:28:56 +00:00
setCategoryAssets(localAssets);
setFiltereredAssets(localAssets);
2025-03-31 07:29:12 +00:00
} else {
try {
const res = await getCategoryAsset(asset);
2025-04-01 03:28:56 +00:00
setCategoryAssets(res || []); // Ensure it's always an array
setFiltereredAssets(res || []);
2025-03-31 07:29:12 +00:00
} catch (error) {}
}
};
2025-03-31 07:29:12 +00:00
2025-03-25 06:17:41 +00:00
return (
<div className="assets-container">
<Search onChange={handleSearchChange} />
{searchValue ? (
2025-04-01 03:28:56 +00:00
<div className="assets-result">
<div className="assets-wrapper">
<div className="searched-content">
<p>Results for "{searchValue}"</p>
</div>
</div>
<div className="assets-container">
{categoryAssets &&
categoryAssets?.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
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
))}
</div>
2025-03-25 06:17:41 +00:00
</div>
) : selectedCategory ? (
<div className="assets-wrapper">
{/* Back Button */}
<div
className="back-button"
2025-04-01 03:28:56 +00:00
onClick={() => {
setSelectedCategory(null);
setCategoryAssets([]);
}}
>
Back
</div>
<h2>{selectedCategory}</h2>
<div className="assets-container">
2025-04-01 03:28:56 +00:00
{searchValue ||
(categoryAssets &&
categoryAssets?.map((asset: any, index: number) => (
<div key={index} className="assets">
2025-03-31 07:29:12 +00:00
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
/>
2025-04-01 03:28:56 +00:00
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
2025-03-31 07:29:12 +00:00
</div>
2025-04-01 03:28:56 +00:00
)))}
</div>
</div>
2025-03-25 06:17:41 +00:00
) : (
<div className="assets-wrapper">
<h2>Categories</h2>
<div className="categories-container">
2025-03-31 07:29:12 +00:00
{Array.from(
new Set(categoryList.map((asset) => asset.category))
).map((category, index) => {
const categoryInfo = categoryList.find(
(asset) => asset.category === category
);
return (
<div
key={index}
className="category"
onClick={() => fetchCategoryAssets(category)}
>
<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;