included decal-list
This commit is contained in:
@@ -21,6 +21,8 @@ import {
|
|||||||
HangTagIcon,
|
HangTagIcon,
|
||||||
NavigationIcon,
|
NavigationIcon,
|
||||||
} from "../../icons/ExportCommonIcons";
|
} from "../../icons/ExportCommonIcons";
|
||||||
|
import { assert } from "console";
|
||||||
|
import { getCategoryDecals } from "../../../services/factoryBuilder/asset/decals/getCategoryDecals";
|
||||||
// -------------------------------------
|
// -------------------------------------
|
||||||
|
|
||||||
interface AssetProp {
|
interface AssetProp {
|
||||||
@@ -47,6 +49,7 @@ const Assets: React.FC = () => {
|
|||||||
const [searchValue, setSearchValue] = useState<string>("");
|
const [searchValue, setSearchValue] = useState<string>("");
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||||
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
|
const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
|
||||||
|
|
||||||
const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
|
const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
|
||||||
const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
|
const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
|
||||||
const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
|
const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
|
||||||
@@ -118,6 +121,20 @@ const Assets: React.FC = () => {
|
|||||||
setisLoading(false);
|
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 = [
|
const activeSubcategories = [
|
||||||
{ name: "Safety", icon: <AlertIcon /> },
|
{ name: "Safety", icon: <AlertIcon /> },
|
||||||
@@ -127,6 +144,7 @@ const Assets: React.FC = () => {
|
|||||||
];
|
];
|
||||||
|
|
||||||
const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
|
const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="assets-container-main">
|
<div className="assets-container-main">
|
||||||
<Search onChange={handleSearchChange} />
|
<Search onChange={handleSearchChange} />
|
||||||
@@ -211,7 +229,10 @@ const Assets: React.FC = () => {
|
|||||||
className={`catogory-asset-filter-wrapper ${
|
className={`catogory-asset-filter-wrapper ${
|
||||||
selectedSubCategory === cat.name ? "active" : ""
|
selectedSubCategory === cat.name ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() => setSelectedSubCategory(cat.name)}
|
onClick={() => {
|
||||||
|
fetchCategoryDecals(cat.name);
|
||||||
|
setSelectedSubCategory(cat.name);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div className="sub-catagory">{cat.icon}</div>
|
<div className="sub-catagory">{cat.icon}</div>
|
||||||
<div className="sub-catagory">{cat.name}</div>
|
<div className="sub-catagory">{cat.name}</div>
|
||||||
@@ -220,49 +241,96 @@ const Assets: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div className="assets-container">
|
|
||||||
{categoryAssets?.map((asset: any, index: number) => (
|
{selectedCategory !== "Decals" && !selectedSubCategory ? (
|
||||||
<div
|
<div className="assets-container">
|
||||||
key={`${index}-${asset}`}
|
{categoryAssets?.map((asset: any, index: number) => (
|
||||||
className="assets"
|
<div
|
||||||
id={asset.filename}
|
key={`${index}-${asset}`}
|
||||||
title={asset.filename}
|
className="assets"
|
||||||
>
|
id={asset.filename}
|
||||||
<img
|
title={asset.filename}
|
||||||
src={asset?.thumbnail}
|
>
|
||||||
alt={asset.filename}
|
<img
|
||||||
className="asset-image"
|
src={asset?.thumbnail}
|
||||||
onPointerDown={() => {
|
alt={asset.filename}
|
||||||
setSelectedItem({
|
className="asset-image"
|
||||||
name: asset.filename,
|
onPointerDown={() => {
|
||||||
id: asset.AssetID,
|
setSelectedItem({
|
||||||
type:
|
name: asset.filename,
|
||||||
asset.type === "undefined"
|
id: asset.AssetID,
|
||||||
? undefined
|
type:
|
||||||
: asset.type,
|
asset.type === "undefined"
|
||||||
category: asset.category,
|
? undefined
|
||||||
subType: asset.subType,
|
: asset.type,
|
||||||
});
|
category: asset.category,
|
||||||
}}
|
subType: asset.subType,
|
||||||
/>
|
});
|
||||||
<div className="asset-name">
|
}}
|
||||||
{asset.filename
|
/>
|
||||||
.split("_")
|
<div className="asset-name">
|
||||||
.map(
|
{asset.filename
|
||||||
(word: any) =>
|
.split("_")
|
||||||
word.charAt(0).toUpperCase() + word.slice(1)
|
.map(
|
||||||
)
|
(word: any) =>
|
||||||
.join(" ")}
|
word.charAt(0).toUpperCase() + word.slice(1)
|
||||||
|
)
|
||||||
|
.join(" ")}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
{categoryAssets.length === 0 && (
|
||||||
{categoryAssets.length === 0 && (
|
<div className="no-asset">
|
||||||
<div className="no-asset">
|
🚧 The asset shelf is empty. We're working on filling
|
||||||
🚧 The asset shelf is empty. We're working on filling it
|
it up!
|
||||||
up!
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -282,7 +350,9 @@ const Assets: React.FC = () => {
|
|||||||
key={`${index}-${category}`}
|
key={`${index}-${category}`}
|
||||||
className="category"
|
className="category"
|
||||||
id={category}
|
id={category}
|
||||||
onClick={() => fetchCategoryAssets(category)}
|
onClick={() => {
|
||||||
|
fetchCategoryAssets(category);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={categoryInfo?.categoryImage ?? ""}
|
src={categoryInfo?.categoryImage ?? ""}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user