duplicate zone rename bug resolved
This commit is contained in:
parent
ca3028985f
commit
db9c9fb8b5
|
@ -62,19 +62,25 @@ const ZoneProperties: React.FC = () => {
|
|||
: zone
|
||||
)
|
||||
);
|
||||
}else{
|
||||
} else {
|
||||
// console.log(response?.message);
|
||||
}
|
||||
}
|
||||
function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
|
||||
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
|
||||
}
|
||||
|
||||
const checkZoneNameDuplicate = (name: string) => {
|
||||
return zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
|
||||
zone.zoneId !== selectedZone.zoneId
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="zone-properties-container">
|
||||
<div className="header">
|
||||
<RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
|
||||
<RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} />
|
||||
<div className="button" onClick={handleEditView}>
|
||||
{Edit ? "Cancel" : "Edit"}
|
||||
</div>
|
||||
|
|
|
@ -1,26 +1,42 @@
|
|||
import React, { useState, useRef, useEffect } from "react";
|
||||
|
||||
// interface RenameInputProps {
|
||||
// value: string;
|
||||
// onRename?: (newText: string) => void;
|
||||
// }
|
||||
|
||||
interface RenameInputProps {
|
||||
value: string;
|
||||
onRename?: (newText: string) => void;
|
||||
checkDuplicate?: (name: string) => boolean;
|
||||
}
|
||||
|
||||
const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
|
||||
const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplicate }) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [text, setText] = useState(value);
|
||||
const [isDuplicate, setIsDuplicate] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setText(value); // Ensure state updates when parent value changes
|
||||
setText(value);
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
if (checkDuplicate) {
|
||||
setIsDuplicate(checkDuplicate(text));
|
||||
}
|
||||
}, [text, checkDuplicate]);
|
||||
|
||||
const handleDoubleClick = () => {
|
||||
setIsEditing(true);
|
||||
setTimeout(() => inputRef.current?.focus(), 0); // Focus the input after rendering
|
||||
setTimeout(() => inputRef.current?.focus(), 0);
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
|
||||
if(isDuplicate) return
|
||||
setIsEditing(false);
|
||||
if (onRename) {
|
||||
if (onRename && !isDuplicate) {
|
||||
onRename(text);
|
||||
}
|
||||
};
|
||||
|
@ -30,7 +46,7 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
|
|||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
if (e.key === "Enter" && !isDuplicate) {
|
||||
setIsEditing(false);
|
||||
if (onRename) {
|
||||
onRename(text);
|
||||
|
@ -41,15 +57,18 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
|
|||
return (
|
||||
<>
|
||||
{isEditing ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="rename-input"
|
||||
/>
|
||||
<>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={text}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
className={`rename-input ${isDuplicate ? "input-error" : ""}`}
|
||||
/>
|
||||
{/* {isDuplicate && <div className="error-msg">Name already exists!</div>} */}
|
||||
</>
|
||||
) : (
|
||||
<span onDoubleClick={handleDoubleClick} className="input-value">
|
||||
{text}
|
||||
|
@ -58,5 +77,4 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
|
|||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RenameInput;
|
||||
export default RenameInput
|
||||
|
|
|
@ -13,7 +13,7 @@ import {
|
|||
RmoveIcon,
|
||||
} from "../../icons/ExportCommonIcons";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { useFloorItems, useZoneAssetId } from "../../../store/store";
|
||||
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
||||
import { zoneCameraUpdate } from "../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
|
||||
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
|
||||
|
@ -40,7 +40,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
const { activeModule, setActiveModule } = useModuleStore();
|
||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||
|
||||
const { zones, setZones } = useZones();
|
||||
const { setSubModule } = useSubModuleStore();
|
||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
|
||||
{}
|
||||
|
@ -100,19 +100,33 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
function handleAssetClick(asset: Asset) {
|
||||
setZoneAssetId(asset)
|
||||
}
|
||||
|
||||
async function handleZoneNameChange(newName: string) {
|
||||
//zone apiiiiii
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
let zonesdata = {
|
||||
|
||||
const isDuplicate = zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName.trim().toLowerCase() === newName.trim().toLowerCase() &&
|
||||
zone.zoneId !== selectedZone.zoneId
|
||||
);
|
||||
|
||||
if (isDuplicate) {
|
||||
alert("Zone name already exists. Please choose a different name.");
|
||||
return; // DO NOT update state
|
||||
}
|
||||
|
||||
const zonesdata = {
|
||||
zoneId: selectedZone.zoneId,
|
||||
zoneName: newName
|
||||
zoneName: newName,
|
||||
};
|
||||
let response = await zoneCameraUpdate(zonesdata, organization);
|
||||
|
||||
const response = await zoneCameraUpdate(zonesdata, organization);
|
||||
if (response.message === "updated successfully") {
|
||||
setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleZoneAssetName(newName: string) {
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
|
@ -128,10 +142,17 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
console.log('newName: ', newName);
|
||||
|
||||
}
|
||||
const checkZoneNameDuplicate = (name: string) => {
|
||||
return zones.some(
|
||||
(zone: any) =>
|
||||
zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
|
||||
zone.zoneId !== selectedZone.zoneId
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -146,7 +167,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
|||
className="value"
|
||||
onClick={() => handleSelectZone(item.id)}
|
||||
>
|
||||
<RenameInput value={item.name} onRename={handleZoneNameChange} />
|
||||
<RenameInput
|
||||
value={item.name}
|
||||
onRename={handleZoneNameChange}
|
||||
checkDuplicate={checkZoneNameDuplicate}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="options-container">
|
||||
|
|
|
@ -19,7 +19,7 @@ function NavMeshCreator({ lines }: NavMeshCreatorProps) {
|
|||
<NavMeshDetails lines={lines} setNavMesh={setNavMesh} groupRef={groupRef} />
|
||||
|
||||
<group ref={groupRef} visible={false} name="Meshes">
|
||||
<mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} name="Plane" receiveShadow>
|
||||
<mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} receiveShadow>
|
||||
<planeGeometry args={[300, 300]} />
|
||||
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
|
||||
</mesh>
|
||||
|
|
|
@ -104,8 +104,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
|
|||
setShowLeftArrow(isOverflowing && canScrollLeft);
|
||||
setShowRightArrow(isOverflowing && canScrollRight);
|
||||
|
||||
console.log('canScrollRight: ', canScrollRight);
|
||||
console.log('isOverflowing: ', isOverflowing);
|
||||
// console.log('canScrollRight: ', canScrollRight);
|
||||
// console.log('isOverflowing: ', isOverflowing);
|
||||
|
||||
}
|
||||
}, []);
|
||||
|
|
|
@ -520,37 +520,37 @@ const DroppedObjects: React.FC = () => {
|
|||
onPointerUp={handlePointerUp}
|
||||
className="floating-wrapper"
|
||||
>
|
||||
{zone.objects.map((obj, index) => {
|
||||
{zone?.objects?.map((obj, index) => {
|
||||
const topPosition =
|
||||
typeof obj.position.top === "number"
|
||||
? `calc(${obj.position.top}px + ${
|
||||
isPlaying && selectedZone.activeSides.includes("top")
|
||||
typeof obj?.position?.top === "number"
|
||||
? `calc(${obj?.position?.top}px + ${
|
||||
isPlaying && selectedZone?.activeSides?.includes("top")
|
||||
? `${heightMultiplier - 55}px`
|
||||
: "0px"
|
||||
})`
|
||||
: "auto";
|
||||
|
||||
const leftPosition =
|
||||
typeof obj.position.left === "number"
|
||||
? `calc(${obj.position.left}px + ${
|
||||
isPlaying && selectedZone.activeSides.includes("left")
|
||||
typeof obj?.position?.left === "number"
|
||||
? `calc(${obj?.position?.left}px + ${
|
||||
isPlaying && selectedZone?.activeSides?.includes("left")
|
||||
? `${widthMultiplier - 150}px`
|
||||
: "0px"
|
||||
})`
|
||||
: "auto";
|
||||
|
||||
const rightPosition =
|
||||
typeof obj.position.right === "number"
|
||||
? `calc(${obj.position.right}px + ${
|
||||
isPlaying && selectedZone.activeSides.includes("right")
|
||||
typeof obj?.position?.right === "number"
|
||||
? `calc(${obj?.position?.right}px + ${
|
||||
isPlaying && selectedZone?.activeSides?.includes("right")
|
||||
? `${widthMultiplier - 150}px`
|
||||
: "0px"
|
||||
})`
|
||||
: "auto";
|
||||
const bottomPosition =
|
||||
typeof obj.position.bottom === "number"
|
||||
? `calc(${obj.position.bottom}px + ${
|
||||
isPlaying && selectedZone.activeSides.includes("bottom")
|
||||
typeof obj?.position?.bottom === "number"
|
||||
? `calc(${obj?.position?.bottom}px + ${
|
||||
isPlaying && selectedZone?.activeSides?.includes("bottom")
|
||||
? `${heightMultiplier - 55}px`
|
||||
: "0px"
|
||||
})`
|
||||
|
|
|
@ -56,6 +56,12 @@ input {
|
|||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border: 1px solid #f65648 !important;
|
||||
outline: none !important;
|
||||
color: #f65648;
|
||||
}
|
||||
|
||||
.toggle-header-container {
|
||||
@include flex-center;
|
||||
padding: 6px 12px;
|
||||
|
@ -344,7 +350,6 @@ input {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
@ -364,9 +369,7 @@ input {
|
|||
left: -50%;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background: linear-gradient(to right,
|
||||
var(--accent-color),
|
||||
transparent);
|
||||
background: linear-gradient(to right, var(--accent-color), transparent);
|
||||
animation: loadingAnimation 1.2s linear infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
@ -381,8 +384,6 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
|
@ -710,4 +711,4 @@ input {
|
|||
.multi-email-invite-input.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue