searching filtered assets

2025-04-01 08:58:56 +05:30
parent cacb23ea5a
commit 21d96a31bc
14 changed files with 342 additions and 104 deletions
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -9,12 +9,13 @@ import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets
 import arch from "../../../assets/gltf-glb/arch.glb";
 import door from "../../../assets/gltf-glb/door.glb";
 import window from "../../../assets/gltf-glb/window.glb";
+import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 interface AssetProp {
  filename: string;
  thumbnail?: string;
  category: string;
  description?: string;
-  tags?: string;
+  tags: string;
  url?: String;
  uploadDate?: number;
  isArchieve?: boolean;
@@ -25,12 +26,27 @@ interface AssetProp {
 const Assets: React.FC = () => {
  const [searchValue, setSearchValue] = useState<string>("");
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-  const [filteredAsset, setFilteredAsset] = useState<AssetProp[]>([]);
+  const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
+  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);

  const handleSearchChange = (value: string) => {
    setSearchValue(value);
-    setSelectedCategory(null); // Reset selected category when search changes
+    setSelectedCategory(null);
+    const filteredModels = filtereredAssets?.filter((model) =>
+      model.filename.toLowerCase().includes(value.toLowerCase())
+    );
+
+    setCategoryAssets(filteredModels);
  };
+  useEffect(() => {
+    const filteredAssets = async () => {
+      try {
+        const filt = await fetchAssets();
+        setFiltereredAssets(filt);
+      } catch {}
+    };
+    filteredAssets();
+  }, []);

  const categoryList = useMemo(
    () => [
@@ -68,56 +84,53 @@ const Assets: React.FC = () => {
          filename: "arch",
          category: "Feneration",
          url: arch,
+          tags: "arch",
        },
        {
          filename: "door",
          category: "Feneration",
          url: door,
+          thumbnail: feneration,
+          tags: "door",
        },
        {
          filename: "window",
          category: "Feneration",
          url: window,
+          tags: "window",
        },
      ];
-      setFilteredAsset(localAssets);
+      setCategoryAssets(localAssets);
+      setFiltereredAssets(localAssets);
    } else {
      try {
        const res = await getCategoryAsset(asset);
-        setFilteredAsset(res || []); // Ensure it's always an array
+        setCategoryAssets(res || []); // Ensure it's always an array
+        setFiltereredAssets(res || []);
      } catch (error) {}
    }
  };

-  useEffect(() => {}, [filteredAsset]);
  return (
    <div className="assets-container">
      <Search onChange={handleSearchChange} />
      {searchValue ? (
-        <div className="searched-content">
-          <p>Results for "{searchValue}"</p>
-        </div>
-      ) : selectedCategory ? (
-        <div className="assets-wrapper">
-          {/* Back Button */}
-          <div
-            className="back-button"
-            onClick={() => setSelectedCategory(null)}
-          >
-            ← Back
+        <div className="assets-result">
+          <div className="assets-wrapper">
+            <div className="searched-content">
+              <p>Results for "{searchValue}"</p>
+            </div>
          </div>
-          <h2>{selectedCategory}</h2>
          <div className="assets-container">
-            {filteredAsset &&
-              filteredAsset?.map((asset: any, index: number) => (
+            {categoryAssets &&
+              categoryAssets?.map((asset: any, index: number) => (
                <div key={index} className="assets">
-                  {asset?.thumbnail && (
-                    <img
-                      src={asset?.thumbnail}
-                      alt={asset.filename}
-                      className="asset-image"
-                    />
-                  )}
+                  <img
+                    src={asset?.thumbnail}
+                    alt={asset.filename}
+                    className="asset-image"
+                  />
+
                  <div className="asset-name">
                    {asset.filename
                      .split("_")
@@ -131,6 +144,43 @@ const Assets: React.FC = () => {
              ))}
          </div>
        </div>
+      ) : selectedCategory ? (
+        <div className="assets-wrapper">
+          {/* Back Button */}
+          <div
+            className="back-button"
+            onClick={() => {
+              setSelectedCategory(null);
+              setCategoryAssets([]);
+            }}
+          >
+            ← Back
+          </div>
+          <h2>{selectedCategory}</h2>
+          <div className="assets-container">
+            {searchValue ||
+              (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>
+        </div>
      ) : (
        <div className="assets-wrapper">
          <h2>Categories</h2>
--- a/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
+++ b/app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx
@@ -33,6 +33,7 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({
              label={preset.inputs.label}
              min={0}
              max={0}
+              value={5}
            />
          );
        }
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { AI_Icon } from "../../../icons/ExportCommonIcons";
@@ -6,6 +6,7 @@ import LabeledButton from "../../../ui/inputs/LabledButton";
 import {
  useAzimuth,
  useElevation,
+  useLimitDistance,
  useRenderDistance,
  useResetCamera,
  useRoofVisibility,
@@ -17,6 +18,7 @@ import {
 } from "../../../../store/store";
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
+import { validateBBox } from "@turf/helpers";
 const GlobalProperties: React.FC = () => {
  const { toggleView, setToggleView } = useToggleView();
  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -27,27 +29,83 @@ const GlobalProperties: React.FC = () => {
  const { elevation, setElevation } = useElevation();
  const { azimuth, setAzimuth } = useAzimuth();
  const { renderDistance, setRenderDistance } = useRenderDistance();
+
  const { socket } = useSocketStore();
-  const [limitDistance, setLimitDistance] = useState(false);
-  const [distance, setDistance] = useState<number>(30);
+  const { limitDistance, setLimitDistance } = useLimitDistance();
+  const [distance, setDistance] = useState<number>(40);
+  useEffect(() => {}, [limitDistance]);

  const [limitGridDistance, setLimitGridDistance] = useState(false);
  const [gridDistance, setGridDistance] = useState<number>(5);

-  function optimizeScene() {
+  const optimizeScene = async (value: any) => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      shadows,
+      30,
+      true
+    );
+    setRenderDistance(30);
    setLimitDistance(true);
-    setDistance(30);
-  }
+  };
+  const limitRenderDistance = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+
+    if (limitDistance) {
+      let data = await setEnvironment(
+        organization,
+        localStorage.getItem("userId")!,
+        wallVisibility,
+        roofVisibility,
+        shadows,
+        75,
+        !limitDistance
+      );
+      setRenderDistance(75);
+    } else {
+      let data = await setEnvironment(
+        organization,
+        localStorage.getItem("userId")!,
+        wallVisibility,
+        roofVisibility,
+        shadows,
+        renderDistance,
+        !limitDistance
+      );
+    }
+    setLimitDistance(!limitDistance);
+  };

  function updateDistance(value: number) {
-    console.log("value: ", value);
    setDistance(value);
    setRenderDistance(value);
  }
-
  function updateGridDistance(value: number) {
    setGridDistance(value);
  }
+  const updatedDist = async (value: number) => {
+    const email = localStorage.getItem("email");
+    const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
+    setRenderDistance(value);
+    // setDistance(value);
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      shadows,
+      value,
+      limitDistance
+    );
+  };
+
  // Function to toggle roof visibility
  const changeRoofVisibility = async () => {
    const email = localStorage.getItem("email");
@@ -59,9 +117,11 @@ const GlobalProperties: React.FC = () => {
      localStorage.getItem("userId")!,
      wallVisibility,
      !roofVisibility,
-      shadows
+      shadows,
+      renderDistance,
+      limitDistance
    );
-    // console.log('data: ', data);
+    //

    //using Socket
    // const visData = {
@@ -86,9 +146,11 @@ const GlobalProperties: React.FC = () => {
      localStorage.getItem("userId")!,
      !wallVisibility,
      roofVisibility,
-      shadows
+      shadows,
+      renderDistance,
+      limitDistance
    );
-    // console.log('data: ', data);
+    //

    //using Socket
    // const visData = {
@@ -113,9 +175,11 @@ const GlobalProperties: React.FC = () => {
      localStorage.getItem("userId")!,
      wallVisibility,
      roofVisibility,
-      !shadows
+      !shadows,
+      renderDistance,
+      limitDistance
    );
-    // console.log('data: ', data);
+    //

    //using Socket
    // const visData = {
@@ -185,18 +249,23 @@ const GlobalProperties: React.FC = () => {
        inputKey="4"
        label="Limit Render Distance"
        value={limitDistance}
-        onClick={() => {
-          setLimitDistance(!limitDistance);
+        // onClick={() => {
+        //   setLimitDistance(!limitDistance);
+        //   // setDistance(75);
+        //   // setRenderDistance(75);
+        // }}
+        onClick={async () => {
+          await limitRenderDistance(); // Call the function here
        }}
      />
      <InputRange
        label="Distance"
        disabled={!limitDistance}
-        value={distance}
-        key={"5"}
+        value={renderDistance}
        min={CONSTANTS.distanceConfig.minDistance}
        max={CONSTANTS.distanceConfig.maxDistance}
        onChange={(value: number) => updateDistance(value)}
+        onPointerUp={updatedDist}
      />

      <div className="split"></div>
--- a/app/src/components/ui/inputs/InputRange.tsx
+++ b/app/src/components/ui/inputs/InputRange.tsx
@@ -8,6 +8,7 @@ interface InputToggleProps {
  onChange?: (value: number) => void; // Function to handle toggle clicks
  disabled?: boolean;
  value?: number;
+  onPointerUp?: (value: number) => void;
 }

 const InputRange: React.FC<InputToggleProps> = ({
@@ -17,9 +18,10 @@ const InputRange: React.FC<InputToggleProps> = ({
  min,
  max,
  disabled,
-  value = 5,
+  value,
+  onPointerUp,
 }) => {
-  const [rangeValue, setRangeValue] = useState<number>(value);
+  const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newValue = parseInt(e.target.value); // Parse the value to an integer
@@ -31,8 +33,22 @@ const InputRange: React.FC<InputToggleProps> = ({
    }
  }
  useEffect(() => {
-    setRangeValue(value);
+    value && setRangeValue(value);
  }, [value]);
+  function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
+    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
+
+    if (onPointerUp) {
+      onPointerUp(newValue); // Call the callback function if it exists
+    }
+  }
+  function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
+    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
+
+    if (onPointerUp) {
+      onPointerUp(newValue); // Call the callback function if it exists
+    }
+  }

  return (
    <div className="input-range-container">
@@ -52,6 +68,7 @@ const InputRange: React.FC<InputToggleProps> = ({
          onChange={handleChange}
          disabled={disabled}
          value={rangeValue}
+          onPointerUp={handlePointerUp}
        />
        <input
          type="number"
@@ -61,6 +78,12 @@ const InputRange: React.FC<InputToggleProps> = ({
          value={rangeValue}
          onChange={handleChange}
          disabled={disabled}
+          onKeyUp={(e) => {
+            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+              console.log("e.key: ", e.key);
+              handlekey(e);
+            }
+          }}
        />
      </div>
    </div>