Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/decal-list' into main-dev

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-26 16:39:18 +05:30
parent c0e040fb3a 98be35bf5f
commit 243fd6452c
2 changed files with 136 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@@ -21,6 +21,8 @@ import {
HangTagIcon,
NavigationIcon,
} from "../../icons/ExportCommonIcons";
import { assert } from "console";
import { getCategoryDecals } from "../../../services/factoryBuilder/asset/decals/getCategoryDecals";
// -------------------------------------
interface AssetProp {
@@ -47,6 +49,7 @@ const Assets: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>("");
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
@@ -118,6 +121,20 @@ const Assets: React.FC = () => {
setisLoading(false);
}
};
const fetchCategoryDecals = async (asset: any) => {
setisLoading(true);
// setSelectedCategory(asset);
try {
const res = await getCategoryDecals(asset);
setCategoryAssets(res);
setFiltereredAssets(res);
setisLoading(false); // End loading
// eslint-disable-next-line
} catch (error) {
echo.error("failed to fetch assets");
setisLoading(false);
}
};
const activeSubcategories = [
{ name: "Safety", icon: <AlertIcon /> },
@@ -209,9 +226,13 @@ const Assets: React.FC = () => {
{activeSubcategories.map((cat, index) => (
<div
key={index}
className={`catogory-asset-filter-wrapper ${selectedSubCategory === cat.name ? "active" : ""
}`}
onClick={() => setSelectedSubCategory(cat.name)}
className={`catogory-asset-filter-wrapper ${
selectedSubCategory === cat.name ? "active" : ""
}`}
onClick={() => {
fetchCategoryDecals(cat.name);
setSelectedSubCategory(cat.name);
}}
>
<div className="sub-catagory">{cat.icon}</div>
<div className="sub-catagory">{cat.name}</div>
@@ -220,49 +241,96 @@ const Assets: React.FC = () => {
</div>
</>
)}
<div className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<div
key={`${index}-${asset}`}
className="assets"
id={asset.filename}
title={asset.filename}
>
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
category: asset.category,
subType: asset.subType,
});
}}
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
{selectedCategory !== "Decals" && !selectedSubCategory ? (
<div className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<div
key={`${index}-${asset}`}
className="assets"
id={asset.filename}
title={asset.filename}
>
<img
src={asset?.thumbnail}
alt={asset.filename}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.filename,
id: asset.AssetID,
type:
asset.type === "undefined"
? undefined
: asset.type,
category: asset.category,
subType: asset.subType,
});
}}
/>
<div className="asset-name">
{asset.filename
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
</div>
))}
{categoryAssets.length === 0 && (
<div className="no-asset">
🚧 The asset shelf is empty. We're working on filling it
up!
</div>
)}
</div>
))}
{categoryAssets.length === 0 && (
<div className="no-asset">
🚧 The asset shelf is empty. We're working on filling
it up!
</div>
)}
</div>
) : (
<div className="assets-container">
{categoryAssets?.map((asset: any, index: number) => (
<div
key={`${index}-${asset}`}
className="assets"
id={asset.decalName}
title={asset.decalName}
>
<img
src={asset?.decalImage}
alt={asset.decalName}
className="asset-image"
onPointerDown={() => {
setSelectedItem({
name: asset.decalName,
id: asset.id,
type:
asset.type === "undefined"
? undefined
: asset.type,
category: asset.category,
// subType: asset.subType,
});
}}
/>
<div className="asset-name">
{asset.decalName
.split("_")
.map(
(word: any) =>
word.charAt(0).toUpperCase() + word.slice(1)
)
.join(" ")}
</div>
</div>
))}
{categoryAssets.length === 0 && (
<div className="no-asset">
🚧 The asset shelf is empty. We're working on filling
it up!
</div>
)}
</div>
)}
</div>
);
}
@@ -282,7 +350,9 @@ const Assets: React.FC = () => {
key={`${index}-${category}`}
className="category"
id={category}
onClick={() => fetchCategoryAssets(category)}
onClick={() => {
fetchCategoryAssets(category);
}}
>
<img
src={categoryInfo?.categoryImage ?? ""}

20
app/src/services/factoryBuilder/asset/decals/getCategoryDecals.ts Normal file
View File

@@ -0,0 +1,20 @@
let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
export const getCategoryDecals = async (category: any) => {
try {
const response = await fetch(
`${BackEnd_url}/api/v1/categoryDecalDatas/${category}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
return result;
} catch (error: any) {
echo.error("Failed to get category asset");
console.log(error.message);
}
};