added zones drop down in builder ouline and adjust width of displayZones
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user