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

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

@@ -54,18 +54,31 @@ const Assets: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
-
+  const [decalAsset, setDecalAsset] = useState<any>();
-  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
+  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[] | []>(
+    []
+  );
   const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
   const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
+  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
 
   const handleSearchChange = (value: string) => {
-    const searchTerm = value.toLowerCase();
+    const searchTerm = searchValue
+      ? searchValue.toLowerCase()
+      : value.toLowerCase();
     setSearchValue(value);
+
     if (searchTerm.trim() === "" && !selectedCategory) {
       setCategoryAssets([]);
+
       return;
     }
+    if (selectedCategory === "Decals" || selectedSubCategory) {
+      const filteredModels = decalAsset?.filter((model: any) =>
+        model.decalName?.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setCategoryAssets(filteredModels);
+    } else {
       const filteredModels = filtereredAssets?.filter((model) => {
         if (!model?.tags || !model?.filename || !model?.category) return false;
         if (searchTerm.startsWith(":") && searchTerm.length > 1) {
@@ -84,9 +97,11 @@ const Assets: React.FC = () => {
       });
 
       setCategoryAssets(filteredModels);
+    }
   };
 
   useEffect(() => {
+    if (selectedCategory === "Decals") return;
     const filteredAssets = async () => {
       try {
         const filt = await fetchAssets();
@@ -96,7 +111,18 @@ const Assets: React.FC = () => {
       }
     };
     filteredAssets();
-  }, [categoryAssets]);
+  }, [categoryAssets, selectedCategory]);
+  useEffect(() => {
+    if (
+      (searchValue.trim() === "" && selectedCategory === "Decals") ||
+      selectedSubCategory
+    ) {
+      const filteredModels = decalAsset?.filter((model: any) =>
+        model.decalName?.toLowerCase().includes(searchValue.toLowerCase())
+      );
+      setCategoryAssets(filteredModels);
+    }
+  }, [selectedSubCategory, decalAsset, searchValue]);
 
   useEffect(() => {
     setCategoryList([
@@ -136,8 +162,10 @@ const Assets: React.FC = () => {
     // setSelectedCategory(asset);
     try {
       const res = await getCategoryDecals(asset);
+
       setCategoryAssets(res);
       setFiltereredAssets(res);
+      setDecalAsset(res);
       setisLoading(false); // End loading
       // eslint-disable-next-line
     } catch (error) {
@@ -153,11 +181,9 @@ const Assets: React.FC = () => {
     { name: "Informational", icon: <DecalInfoIcon /> },
   ];
 
-  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
-
   return (
     <div className="assets-container-main">
-      <Search onChange={handleSearchChange} />
+      <Search onChange={handleSearchChange} value={searchValue} />
       <div className="assets-list-section">
         <section>
           {(() => {
@@ -175,7 +201,66 @@ const Assets: React.FC = () => {
                       </p>
                     </div>
                     <div className="assets-container">
+                      {selectedCategory == "Decals" ? (
+                        <>
+                          <div className="catogory-asset-filter">
+                            {activeSubcategories.map((cat, index) => (
+                              <div
+                                key={index}
+                                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>
+                              </div>
+                            ))}
+                          </div>
                           {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?.map((asset: any, index: number) => (
                           <div
                             key={`${index}-${asset.filename}`}
                             className="assets"
@@ -208,7 +293,8 @@ const Assets: React.FC = () => {
                                 .join(" ")}
                             </div>
                           </div>
-                      ))}
+                        ))
+                      )}
                     </div>
                   </div>
                 </div>