73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import React 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 { useSubModuleStore } from "../../../store/useModuleStore";
|
|
|
|
interface ListProps {
|
|
items?: { id: string; name: string }[]; // Optional array of items to render
|
|
placeholder?: string; // Optional placeholder text
|
|
remove?: boolean;
|
|
}
|
|
|
|
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|
const { setSelectedZone } = useSelectedZoneStore();
|
|
const { setSubModule } = useSubModuleStore();
|
|
|
|
async function handleSelectZone(id: string) {
|
|
setSubModule("zoneProperties")
|
|
const email = localStorage.getItem('email')
|
|
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 || [],
|
|
zoneId: response?.zoneId,
|
|
zoneViewPortTarget: response?.viewPortCenter || [],
|
|
zoneViewPortPosition:
|
|
response?.viewPortposition || [],
|
|
});
|
|
|
|
}
|
|
return (
|
|
<>
|
|
{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 />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<div className="list-wrapper">
|
|
<div className="no-item">No items to display</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default List;
|