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

refactor: Update dropdown items to include active state, enhance List and DropDownList components, and improve sidebar styles for better layout and accessibility

Browse Source
This commit is contained in:
Vishnu
2025-04-30 10:10:39 +05:30
parent 5297717123
commit 4152e611a9
6 changed files with 139 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/layout/sidebarLeft/Outline.tsx
View File

@@ -11,7 +11,7 @@ const Outline: React.FC = () => {
};
const dropdownItems = [
{ id: "1", name: "Ground Floor" },
{ id: "1", name: "Ground Floor", active: true },
// { id: "2", name: "Floor 1" },
]; // Example dropdown items

63
app/src/components/ui/list/DropDownList.tsx
View File

@@ -3,7 +3,6 @@ import List from "./List";
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
import { useFloorItems, useZones } from "../../../store/store";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
interface DropDownListProps {
value?: string; // Value to display in the DropDownList
@@ -17,6 +16,17 @@ interface DropDownListProps {
remove?: boolean;
}
interface Zone {
zoneId: string;
zoneName: string;
points: [number, number, number][]; // polygon vertices
}
interface ZoneData {
id: string;
name: string;
assets: { id: string; name: string; position?: []; rotation?: {} }[];
}
const DropDownList: React.FC<DropDownListProps> = ({
value = "Dropdown",
items = [],
@@ -33,38 +43,30 @@ const DropDownList: React.FC<DropDownListProps> = ({
remove,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
const { zones, setZones } = useZones();
const { zones } = useZones();
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
interface Asset {
id: string;
name: string;
position: [number, number, number]; // x, y, z
}
interface Zone {
zoneId: string;
zoneName: string;
points: [number, number, number][]; // polygon vertices
}
interface ZoneData {
id: string;
name: string;
assets: { id: string; name: string; position?: []; rotation?: {} }[];
}
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
const { floorItems } = useFloorItems();
const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
const isPointInsidePolygon = (
point: [number, number],
polygon: [number, number][]
) => {
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
const xi = polygon[i][0], zi = polygon[i][1];
const xj = polygon[j][0], zj = polygon[j][1];
const xi = polygon[i][0],
zi = polygon[i][1];
const xj = polygon[j][0],
zj = polygon[j][1];
const intersect = ((zi > point[1]) !== (zj > point[1])) &&
(point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi);
const intersect =
// eslint-disable-next-line no-mixed-operators
zi > point[1] !== zj > point[1] &&
point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;
if (intersect) inside = !inside;
}
@@ -73,18 +75,21 @@ const DropDownList: React.FC<DropDownListProps> = ({
useEffect(() => {
const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
const polygon2D = zone.points.map((p: [number, number, number]) => [
p[0],
p[2],
]);
const assetsInZone = floorItems
.filter((item: any) => {
const [x, , z] = item.position;
return isPointInsidePolygon([x, z], polygon2D);
return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
})
.map((item: any) => ({
id: item.modeluuid,
name: item.modelname,
position: item.position,
rotation: item.rotation
rotation: item.rotation,
}));
return {
@@ -99,9 +104,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
return (
<div className="dropdown-list-container">
<div className="head">
<div className="value" onClick={handleToggle}>
<button className="value" onClick={handleToggle}>
{value}
</div>
</button>
<div className="options">
{showFocusIcon && (
<div className="focus option">
@@ -118,13 +123,13 @@ const DropDownList: React.FC<DropDownListProps> = ({
<KebabMenuListMultiSelect items={kebabMenuItems} />
</div>
)}
<div
<button
className="collapse-icon option"
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
onClick={handleToggle}
>
<ArrowIcon />
</div>
</button>
</div>
</div>
{isOpen && (

74
app/src/components/ui/list/List.tsx
View File

@@ -12,7 +12,6 @@ import {
LockIcon,
RemoveIcon,
} from "../../icons/ExportCommonIcons";
import { useThree } from "@react-three/fiber";
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
@@ -32,20 +31,19 @@ interface ZoneItem {
interface ListProps {
items?: ZoneItem[];
placeholder?: string;
remove?: boolean;
}
const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { activeModule, setActiveModule } = useModuleStore();
const { activeModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { zones, setZones } = useZones();
const { zones } = useZones();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
const { floorItems, setFloorItems } = useFloorItems();
const { setFloorItems } = useFloorItems();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
@@ -70,39 +68,36 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
async function handleSelectZone(id: string) {
try {
if (selectedZone?.zoneId === id) {
return;
}
setSubModule("zoneProperties");
const email = localStorage.getItem("email");
const organization = email?.split("@")[1]?.split(".")[0] || "";
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
let response = await getZoneData(id, organization);
setSelectedZone({
zoneName: response?.zoneName,
activeSides: response?.activeSides || [],
panelOrder: response?.panelOrder || [],
lockedPanels: response?.lockedPanels || [],
widgets: response?.widgets || [],
activeSides: response?.activeSides ?? [],
panelOrder: response?.panelOrder ?? [],
lockedPanels: response?.lockedPanels ?? [],
widgets: response?.widgets ?? [],
zoneId: response?.zoneId,
zoneViewPortTarget: response?.viewPortCenter || [],
zoneViewPortPosition: response?.viewPortposition || [],
zoneViewPortTarget: response?.viewPortCenter ?? [],
zoneViewPortPosition: response?.viewPortposition ?? [],
});
} catch (error) {
console.log(error);
}
}
function handleAssetClick(asset: Asset) {
setZoneAssetId(asset)
setZoneAssetId(asset);
}
async function handleZoneNameChange(newName: string) {
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const isDuplicate = zones.some(
@@ -128,12 +123,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}
async function handleZoneAssetName(newName: string) {
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
if (zoneAssetId?.id) {
let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
console.log('response: ', response);
let response = await setFloorItemApi(
organization,
zoneAssetId.id,
newName
);
console.log("response: ", response);
setFloorItems((prevFloorItems: any[]) =>
prevFloorItems.map((floorItems) =>
floorItems.modeluuid === zoneAssetId.id
@@ -160,7 +159,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
<li className="list-container">
<div className="list-item">
<div className="zone-header">
<div
<button
className="value"
onClick={() => handleSelectZone(item.id)}
>
@@ -169,8 +168,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
onRename={handleZoneNameChange}
checkDuplicate={checkZoneNameDuplicate}
/>
</div>
</button>
</div>
<div className="options-container">
<div className="lock option">
@@ -185,12 +183,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
</div>
)}
{item.assets && item.assets.length > 0 && (
<div
<button
className="expand-icon option"
onClick={() => toggleZoneExpansion(item.id)}
>
<ArrowIcon />
</div>
</button>
)}
</div>
</div>
@@ -206,20 +204,26 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
className="list-container asset-item"
>
<div className="list-item">
<div className="value" onClick={() => handleAssetClick(asset)} >
<RenameInput value={asset.name} onRename={handleZoneAssetName} />
</div>
<button
className="value"
onClick={() => handleAssetClick(asset)}
>
<RenameInput
value={asset.name}
onRename={handleZoneAssetName}
/>
</button>
<div className="options-container">
<div className="lock option">
<button className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
</button>
<button className="visibe option">
<EyeIcon isClosed />
</div>
</button>
{remove && (
<div className="remove option">
<button className="remove option">
<RemoveIcon />
</div>
</button>
)}
</div>
</div>