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

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
app/src
components
layout/sidebarLeft
ui/list
styles
abstracts
components
layout

View File

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

View File

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

View File

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

View File

@ -16,7 +16,7 @@ $text-button-color: #f3f3fd;
$text-color-dark: #f3f3fd; $text-color-dark: #f3f3fd;
$text-disabled-dark: #6f6f7a; $text-disabled-dark: #6f6f7a;
$input-text-color-dark: #b5b5c8; $input-text-color-dark: #b5b5c8;
$highlight-text-color-dark: #b392f0; $highlight-text-color-dark: #d2baff;
$text-button-color-dark: #f3f3fd; $text-button-color-dark: #f3f3fd;
// background colors // background colors
@ -105,8 +105,8 @@ $color5: #c7a8ff;
// old variables // old variables
$accent-color: #6f42c1; $accent-color: #6f42c1;
$accent-color-dark: #c4abf1; $accent-color-dark: #c4abf1;
$highlight-accent-color: #e0dfff; // $highlight-accent-color: #e0dfff;
$highlight-accent-color-dark: #403e6a; // $highlight-accent-color-dark: #403e6a;
// $background-color: #fcfdfd; // $background-color: #fcfdfd;
// $background-color-dark: #19191d; // $background-color-dark: #19191d;

View File

@ -34,9 +34,8 @@
padding: 12px; padding: 12px;
} }
.list-container { li.list-container {
padding: 2px; padding: 2px;
// margin-left: 10px;
overflow: hidden; overflow: hidden;
.list-item { .list-item {
@ -45,11 +44,13 @@
text-align: center; text-align: center;
padding: 4px 8px; padding: 4px 8px;
border-radius: #{$border-radius-large}; border-radius: #{$border-radius-large};
.zone-header{
.value { @include flex-center;
width: 100%; .value {
text-align: start; width: 100%;
max-width: 180px; text-align: start;
max-width: 180px;
}
} }
.options-container { .options-container {
@ -61,11 +62,18 @@
cursor: pointer; cursor: pointer;
} }
} }
&:first-child{
background: var(--highlight-accent-color);
.input-value{
color: var(--highlight-text-color);
}
}
} }
.active { .active {
background: var(--highlight-accent-color); background: var(--highlight-accent-color);
color: var(--primary-color); .input-value{
color: var(--highlight-text-color);
}
} }
} }

View File

@ -434,7 +434,7 @@
button { button {
path { path {
stroke: var(--accent-color); stroke: var(--accent-color);
strokeWidth: 1.5px; stroke-width: 1.5px;
} }
color: var(--accent-color); color: var(--accent-color);
&:before { &:before {
@ -456,6 +456,9 @@
.sidebar-right-content-container { .sidebar-right-content-container {
.dataSideBar { .dataSideBar {
.inputs-wrapper { .inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
.datas { .datas {
.input-value { .input-value {
padding: 5px 10px; padding: 5px 10px;
@ -487,6 +490,7 @@
.datas__class { .datas__class {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px;
.multi-level-dropdown { .multi-level-dropdown {
width: 170px; width: 170px;
@ -496,22 +500,13 @@
justify-content: space-between; justify-content: space-between;
gap: 6px; gap: 6px;
} }
} .disable {
} cursor: not-allowed;
pointer-events: none;
.datas__class { /* Disables all mouse interactions */
display: flex; opacity: 0.5;
gap: 12px; /* Optional: Makes the button look visually disabled */
}
// .datas__separator {
// }
.disable {
cursor: not-allowed;
pointer-events: none;
/* Disables all mouse interactions */
opacity: 0.5;
/* Optional: Makes the button look visually disabled */
} }
} }
} }
@ -522,12 +517,6 @@
padding-bottom: 6px; padding-bottom: 6px;
} }
.inputs-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
}
.selectedMain-container { .selectedMain-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -627,10 +616,8 @@
width: 100%; width: 100%;
height: 150px; height: 150px;
background: #f0f0f0; background: #f0f0f0;
// border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
// justify-content: center;
} }
.optionsContainer { .optionsContainer {
@ -713,7 +700,7 @@
path { path {
stroke: var(--accent-color); stroke: var(--accent-color);
strokeWidth: 1.5px; stroke-width: 1.5px;
} }
&:hover { &:hover {
@ -742,14 +729,14 @@
.add-button { .add-button {
@include flex-center; @include flex-center;
padding: 2px 4px; padding: 2px 4px;
background: var(--accent-color); background: var(--background-color-button);
color: var(--primary-color); color: var(--text-button-color);
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-small};
cursor: pointer; cursor: pointer;
outline: none; outline: none;
border: none; border: none;
path { path {
stroke: var(--primary-color); stroke: var(--text-button-color);
} }
&:disabled { &:disabled {
background: var(--text-disabled); background: var(--text-disabled);
@ -804,11 +791,10 @@
} }
.lists-main-container { .lists-main-container {
margin: 2px 8px; margin: 2px;
width: calc(100% - 12px); width: calc(100% - 4px);
margin-right: 4px;
background: var(--background-color-gray); background: var(--background-color-gray);
border-radius: #{$border-radius-small}; border-radius: 8px;
min-height: 120px; min-height: 120px;
.list-container { .list-container {
@ -818,10 +804,10 @@
.list-item { .list-item {
@include flex-space-between; @include flex-space-between;
padding: 2px 12px; padding: 4px 12px;
width: 100%; width: 100%;
margin: 2px 0; margin: 2px 0;
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-medium};
.value { .value {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -1156,7 +1142,13 @@
} }
.assets-container { .assets-container {
padding: 0 6px; width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.assets-wrapper { .assets-wrapper {
width: 100%; width: 100%;
@ -1175,14 +1167,16 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%; height: 100%;
gap: 8px; gap: 0px 4px;
padding: 10px 0; padding: 10px 0;
.category { .category {
width: 121px; width: 123px;
height: 95px; height: 95px;
border-radius: 3.59px; border-radius: #{$border-radius-large};
background: var(--background-color-gray); background: var(--background-color);
outline: 1px solid var(--border-color);
outline-offset: -1px;
padding: 8px; padding: 8px;
padding-top: 12px; padding-top: 12px;
font-weight: $bold-weight; font-weight: $bold-weight;
@ -1193,8 +1187,6 @@
position: relative; position: relative;
z-index: 3; z-index: 3;
font-size: var(--font-size-regular); font-size: var(--font-size-regular);
// -webkit-text-fill-color: transparent;
// -webkit-text-stroke: 1px black;
} }
&::after { &::after {
@ -1260,7 +1252,6 @@
.category-image { .category-image {
position: absolute; position: absolute;
// top: 50%;
bottom: 0; bottom: 0;
right: -10px; right: -10px;
transform: translate(0, 0%) scale(0.8); transform: translate(0, 0%) scale(0.8);
@ -1276,14 +1267,15 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%; height: 100%;
gap: 3px; gap: 0px 4px;
padding: 10px 0; padding: 10px 0;
.assets { .assets {
width: 117px; width: 123px;
height: 95px; height: 95px;
border-radius: #{$border-radius-small}; border-radius: #{$border-radius-large};
background: var(--background-color-gray); background: var(--background-color);
outline: 1px solid var(--border-color);
font-weight: $medium-weight; font-weight: $medium-weight;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1301,18 +1293,16 @@
z-index: 3; z-index: 3;
padding: 8px; padding: 8px;
width: 100%; width: 100%;
max-height: 38px; height: 100%;
font-size: var(--font-size-regular); font-size: var(--font-size-regular);
background: color-mix( background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
in srgb, pointer-events: none;
var(--background-color) 40%, backdrop-filter: blur(8px);
transparent
);
backdrop-filter: blur(5px);
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -1337,46 +1327,6 @@
} }
} }
.assets-container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
gap: 3px;
padding: 10px 0;
.assets {
width: 117px;
height: 95px;
border-radius: 3.59px;
background: var(--background-color-gray);
padding: 8px;
padding-top: 12px;
font-weight: $medium-weight;
position: relative;
overflow: hidden;
.asset-name {
position: relative;
z-index: 3;
font-size: var(--font-size-regular);
}
.asset-image {
height: 100%;
width: 100%;
position: absolute;
// top: 50%;
// right: 5px;
// transform: translate(0, -50%);
top: 0;
left: 0;
z-index: 2;
}
}
}
.assets-result { .assets-result {
width: 100%; width: 100%;
height: 100%; height: 100%;