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

added zones drop down in builder ouline and adjust width of displayZones

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-03 18:02:28 +05:30
parent 1dc04d19bb
commit 70807d4ec4
17 changed files with 545 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,14 +32,22 @@ const DropDownList: React.FC<DropDownListProps> = ({
listType = "default",
remove,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
const { zones, setZones } = useZones()
const { zones, setZones } = useZones();
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
interface Asset {
id: string;
name: string;
}
const [zoneDataList, setZoneDataList] = useState<
{ id: string; name: string; assets: Asset[] }[]
>([]);
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
useEffect(() => {
@@ -53,12 +61,64 @@ const DropDownList: React.FC<DropDownListProps> = ({
// { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" },
// ])
const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
id: val.zoneId,
name: val.zoneName
}));
setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
const value = (zones || []).map(
(val: { zoneId: string; zoneName: string }) => ({
id: val.zoneId,
name: val.zoneName,
})
);
setZoneDataList([
{
id: "zone1",
name: "Zone 1",
assets: [
{
id: "asset1",
name: "Asset 1",
},
{
id: "asset2",
name: "Asset 2",
},
{
id: "asset3",
name: "Asset 3",
},
],
},
{
id: "zone2",
name: "Zone 2",
assets: [
{
id: "asset4",
name: "Asset 4",
},
{
id: "asset5",
name: "Asset 5",
},
{
id: "asset6",
name: "Asset 6",
},
],
},
{
id: "zone3",
name: "Zone 3",
assets: [
{
id: "asset7",
name: "Asset 7",
},
{
id: "asset8",
name: "Asset 8",
},
],
},
]);
}, [zones]);
return (
@@ -101,6 +161,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
value="Buildings"
showKebabMenu={false}
showAddIcon={false}
items={zoneDataList}
/>
<DropDownList
value="Zones"

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

@@ -1,20 +1,44 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import RenameInput from "../inputs/RenameInput";
import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
import useModuleStore, {
useSubModuleStore,
} from "../../../store/useModuleStore";
import {
ArrowIcon,
EyeIcon,
LockIcon,
RmoveIcon,
} from "../../icons/ExportCommonIcons";
interface Asset {
id: string;
name: string;
}
interface ZoneItem {
id: string;
name: string;
assets?: Asset[];
}
interface ListProps {
items?: { id: string; name: string }[]; // Optional array of items to render
placeholder?: string; // Optional placeholder text
items?: ZoneItem[];
placeholder?: string;
remove?: boolean;
}
const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log("items: ", items);
const { activeModule, setActiveModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@@ -27,11 +51,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
widgets: [],
});
}, [activeModule]);
const toggleZoneExpansion = (zoneId: string) => {
setExpandedZones((prev) => ({
...prev,
[zoneId]: !prev[zoneId],
}));
};
async function handleSelectZone(id: string) {
try {
// Avoid re-fetching if the same zone is already selected
if (selectedZone?.zoneId === id) {
console.log("Zone is already selected:", selectedZone.zoneName);
return;
@@ -65,27 +94,74 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
<>
{items.length > 0 ? (
<ul className="list-wrapper">
{items.map((item, index) => (
<li key={index} className="list-container">
<div className="list-item">
<div className="value" onClick={() => handleSelectZone(item.id)}>
<RenameInput value={item.name} />
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
{items.map((item) => (
<React.Fragment key={`zone-${item.id}`}>
<li className="list-container">
<div className="list-item">
<div className="zone-header">
<div
className="value"
onClick={() => handleSelectZone(item.id)}
>
<RenameInput value={item.name} />
</div>
)}
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
{item.assets && item.assets.length > 0 && (
<div
className="expand-icon option"
onClick={() => toggleZoneExpansion(item.id)}
>
<ArrowIcon />
</div>
)}
</div>
</div>
</div>
</li>
</li>
{/* Nested assets list - only shown when expanded */}
{item.assets &&
item.assets.length > 0 &&
expandedZones[item.id] && (
<ul className="asset-list">
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className="list-container asset-item"
>
<div className="list-item">
<div className="value">
<RenameInput value={asset.name} />
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
</div>
</div>
</li>
))}
</ul>
)}
</React.Fragment>
))}
</ul>
) : (