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

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>