e232d33c07
- Added `invalidName` and `setInvalidName` props to `EditFlowSettings` component to handle validation for duplicate flow names. - Added `nameLists` useRef to store the list of flow names fetched from the database. - Added `useEffect` to fetch the flow names from the database and populate `nameLists` useRef. - Modified `handleNameChange` function to check if the entered name already exists in `nameLists` useRef and set `invalidName` accordingly. - Added a new span element to display an error message if the name is already in use. fix(flowSettingsModal): disable save button when the flow name is invalid - Added `invalidName` and `setInvalidName` states to `FlowSettingsModal` component to handle the validation for invalid flow names. - Passed `invalidName` and `setInvalidName` props to `EditFlowSettings` component. - Disabled the save button when `invalidName` is true.
109 lines
3 KiB
TypeScript
109 lines
3 KiB
TypeScript
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
|
|
import { Input } from "../../components/ui/input";
|
|
import { Label } from "../../components/ui/label";
|
|
import { Textarea } from "../../components/ui/textarea";
|
|
import { readFlowsFromDatabase } from "../../controllers/API";
|
|
|
|
type InputProps = {
|
|
name: string | null;
|
|
description: string | null;
|
|
maxLength?: number;
|
|
flows: Array<{ id: string; name: string; description: string }>;
|
|
tabId: string;
|
|
invalidName: boolean;
|
|
setInvalidName: (invalidName: boolean) => void;
|
|
setName: (name: string) => void;
|
|
setDescription: (description: string) => void;
|
|
updateFlow: (flow: { id: string; name: string }) => void;
|
|
};
|
|
|
|
export const EditFlowSettings: React.FC<InputProps> = ({
|
|
name,
|
|
invalidName,
|
|
setInvalidName,
|
|
description,
|
|
maxLength = 50,
|
|
flows,
|
|
tabId,
|
|
setName,
|
|
setDescription,
|
|
updateFlow,
|
|
}) => {
|
|
const [isMaxLength, setIsMaxLength] = useState(false);
|
|
const nameLists = useRef([]);
|
|
useEffect(() => {
|
|
readFlowsFromDatabase().then((flows) => {
|
|
flows.forEach((flow) => {
|
|
nameLists.current.push(flow.name);
|
|
});
|
|
});
|
|
}, []);
|
|
|
|
const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = event.target;
|
|
if (value.length >= maxLength) {
|
|
setIsMaxLength(true);
|
|
} else {
|
|
setIsMaxLength(false);
|
|
}
|
|
if (!nameLists.current.includes(value)) {
|
|
setInvalidName(false);
|
|
} else {
|
|
setInvalidName(true);
|
|
}
|
|
setName(value);
|
|
};
|
|
|
|
const [desc, setDesc] = useState(
|
|
flows.find((f) => f.id === tabId).description
|
|
);
|
|
|
|
const handleDescriptionChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
|
|
flows.find((f) => f.id === tabId).description = event.target.value;
|
|
setDesc(flows.find((f) => f.id === tabId).description);
|
|
setDescription(event.target.value);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Label>
|
|
<div className="edit-flow-arrangement">
|
|
<span className="font-medium">Name</span>{" "}
|
|
{isMaxLength && (
|
|
<span className="edit-flow-span">Character limit reached</span>
|
|
)}
|
|
{invalidName && (
|
|
<span className="edit-flow-span">Name already in use</span>
|
|
)}
|
|
</div>
|
|
<Input
|
|
className="nopan nodrag noundo nocopy mt-2 font-normal"
|
|
onChange={handleNameChange}
|
|
type="text"
|
|
name="name"
|
|
value={name ?? ""}
|
|
placeholder="File name"
|
|
id="name"
|
|
maxLength={maxLength}
|
|
/>
|
|
</Label>
|
|
<Label>
|
|
<div className="edit-flow-arrangement mt-3">
|
|
<span className="font-medium ">Description (optional)</span>
|
|
</div>
|
|
|
|
<Textarea
|
|
name="description"
|
|
id="description"
|
|
onChange={handleDescriptionChange}
|
|
value={desc}
|
|
placeholder="Flow description"
|
|
className="mt-2 max-h-[100px] font-normal"
|
|
rows={3}
|
|
/>
|
|
</Label>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EditFlowSettings;
|