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";
|
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";
|
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";
|
2025-03-31 06:37:25 +00:00
|
|
|
interface AssetProp {
|
|
|
|
filename: string;
|
2025-03-31 07:29:12 +00:00
|
|
|
thumbnail?: string;
|
2025-03-31 06:37:25 +00:00
|
|
|
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-31 06:37:25 +00:00
|
|
|
}
|
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-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-29 12:26:50 +00:00
|
|
|
|
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 },
|
|
|
|
],
|
|
|
|
[]
|
2025-03-29 12:26:50 +00:00
|
|
|
);
|
|
|
|
|
2025-03-31 06:37:25 +00:00
|
|
|
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 06:37:25 +00:00
|
|
|
};
|
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>
|
2025-03-29 12:26:50 +00:00
|
|
|
) : selectedCategory ? (
|
|
|
|
<div className="assets-wrapper">
|
|
|
|
{/* Back Button */}
|
|
|
|
<div
|
|
|
|
className="back-button"
|
2025-04-01 03:28:56 +00:00
|
|
|
onClick={() => {
|
|
|
|
setSelectedCategory(null);
|
|
|
|
setCategoryAssets([]);
|
|
|
|
}}
|
2025-03-29 12:26:50 +00:00
|
|
|
>
|
|
|
|
← 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
|
|
|
)))}
|
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">
|
2025-03-31 07:29:12 +00:00
|
|
|
{Array.from(
|
|
|
|
new Set(categoryList.map((asset) => asset.category))
|
|
|
|
).map((category, index) => {
|
2025-03-29 12:26:50 +00:00
|
|
|
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;
|