@olenbetong/synergi-react 2.3.0 → 2.3.2

package/src/elements/ElementLookup.tsx

@@ -1,7 +1,7 @@
 import SearchIcon from "@mui/icons-material/Search";
 import { IconButton, TextField } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import { type RefObject, useEffect, useImperativeHandle, useState } from "react";
+import { type RefObject, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { type AddElement, ElementLookupDialog } from "./ElementLookupDialog";
 
 export type Element = {
@@ -21,20 +21,38 @@ export type ElementLookupProps = {
 	value?: Element | null;
 	defaultValue?: Element | null;
 	ref?: RefObject<ElementLookupHandle | null>;
+	elementIDRequired?: boolean;
 	openLookupDialogIcon?: boolean;
 	onChange?: (value: Element | null) => void;
+	onDialogChange?: (open: boolean) => void;
 };
 
-export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps) {
+export function ElementLookup({
+	value,
+	defaultValue,
+	ref,
+	elementIDRequired = false,
+	openLookupDialogIcon,
+	onChange,
+	onDialogChange,
+}: ElementLookupProps) {
+	let initializedRef = useRef<boolean>(false);
+
 	let [openElementLookupDialog, setOpenElementLookupDialog] = useState<boolean>(false);
 	let [element, setElement] = useState<Element | null>(defaultValue ?? null);
 	let elementValue = value === undefined ? element : value;
 
+	// biome-ignore lint: intentionally skipping "value" dependency as this shouldn't run when "value" changes
 	useEffect(() => {
+		if (initializedRef.current) {
+			return;
+		}
+
 		if (value === undefined && defaultValue) {
 			setElement(defaultValue);
+			initializedRef.current = true;
 		}
-	}, [defaultValue, value]);
+	}, [defaultValue]);
 
 	useImperativeHandle(ref, () => ({
 		openDialog: () => setOpenElementLookupDialog(true),
@@ -46,6 +64,11 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 		setElement(addElement.element);
 	}
 
+	// biome-ignore lint: only run when openElementLookupDialog changes
+	useEffect(() => {
+		onDialogChange?.(openElementLookupDialog);
+	}, [openElementLookupDialog]);
+
 	return (
 		<>
 			<ElementLookupDialog
@@ -53,6 +76,7 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 				mode="single"
 				onClose={() => setOpenElementLookupDialog(false)}
 				onAdd={handleAddElement}
+				allowEmptyElement={true}
 			/>
 
 			<input type="hidden" name="ProjectID" value={elementValue?.ProjectID ?? ""} />
@@ -73,6 +97,7 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 				value={elementValue ? elementValue.ElementID : ""}
 				label={getLocalizedString("Element ID")}
 				fullWidth
+				required={elementIDRequired}
 				autoComplete="off"
 				slotProps={{
 					htmlInput: { readOnly: true },
@@ -83,6 +108,7 @@ export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon,
 							</IconButton>
 						) : undefined,
 					},
+					inputLabel: { shrink: !!elementValue?.ElementID },
 				}}
 			/>
 		</>

package/src/elements/ElementLookupDialog/Manual/ManualForm.tsx

@@ -6,7 +6,7 @@ import type { ProjectsRecord } from "../../data/dsProjects";
 import { ProjectSelect } from "../../ProjectSelect";
 import { type ElementDetails, getElement } from "../getElement";
 
-const isElementsOnly = /^([a-z]{2,4}[\s]*[0-9]{4,8}[\s,]*)+$/i;
+// const isElementsOnly = /^([a-z]{2,4}[\s]*[0-9]{4,8}[\s,]*)+$/i;
 const matchElements = /([a-z]{2,4}[\s]*[0-9]{4,8})/gi;
 
 export type ProjectRecordBase = {
@@ -19,9 +19,15 @@ export type AddElementManualFormProps = {
 	onAdd: (element: string | ElementDetails) => Promise<void>;
 	mode?: "single" | "multi";
 	defaultProject?: ProjectRecordBase;
+	allowEmptyElement?: boolean;
 };
 
-export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElementManualFormProps) {
+export function AddElementManualForm({
+	onAdd,
+	mode,
+	defaultProject,
+	allowEmptyElement = false,
+}: AddElementManualFormProps) {
 	let id = useId();
 	let buttonRef = useRef<HTMLButtonElement>(null);
 	let [working, setWorking] = useState(false);
@@ -35,30 +41,53 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 			let formData = new FormData(evt.target as HTMLFormElement);
 			let elements = formData.get("ElementID");
 			let domain = formData.get("Domain");
-			let projectId = formData.get("ProjectID");
+			let project: ProjectsRecord = JSON.parse(formData.get("Project") as string);
 
-			if (!projectId || !domain || !elements) {
-				let warning = getLocalizedString(
-					mode === "multi" ? "Project and elements are required" : "Project and element are required",
-				);
-				alert(warning);
-				return;
+			if (allowEmptyElement) {
+				if (!project.ProjectID) {
+					alert(getLocalizedString("Project is required"));
+					return;
+				}
+			} else {
+				if (!project.ProjectID || !domain || !elements) {
+					let warning = getLocalizedString(
+						mode === "multi" ? "Project and elements are required" : "Project and element are required",
+					);
+					alert(warning);
+					return;
+				}
 			}
 
-			setWorking(true);
-			let record = (elements as string)
-				.match(matchElements)
-				?.map((elementId) => elementId.replace(/\s+/g, ""))
-				.map((elementId) => getElement({ projectId: projectId as string, elementId: elementId }, { mode: "manual" }));
+			if (elements) {
+				setWorking(true);
+				let record = (elements as string)
+					.match(matchElements)
+					?.map((elementId) => elementId.replace(/\s+/g, ""))
+					.map((elementId) =>
+						getElement({ projectId: project.ProjectID as string, elementId: elementId }, { mode: "manual" }),
+					);
 
-			if (!record) {
-				alert(getLocalizedString("Invalid elements"));
-				return;
-			}
+				if (!record) {
+					alert(getLocalizedString("Invalid elements"));
+					return;
+				}
 
-			let loaded = (await Promise.all(record)).map((record) => onAdd(record));
-			await Promise.all(loaded);
-			setWorking(false);
+				let loaded = (await Promise.all(record)).map((record) => onAdd(record));
+				await Promise.all(loaded);
+				setWorking(false);
+			} else {
+				onAdd({
+					PrimKey: "",
+					Domain: domain?.toString() ?? "",
+					Created: project?.Created,
+					ProjectID: project.ProjectID,
+					ProjectName: project.ProjectName,
+					ProjectDomain: project.Domain,
+					ElementID: "",
+					DisplayName: "",
+					GiaiUri: "",
+				});
+			}
 		} catch (error) {
 			setWorking(false);
 			alert((error as Error).message);
@@ -73,6 +102,8 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 				)}
 			</Alert>
 
+			<input type="hidden" name="Project" value={project ? JSON.stringify(project) : ""} />
+
 			<ProjectSelect
 				onChange={(project) => (project ? setProject(project) : setProject(null))}
 				value={project}
@@ -98,7 +129,8 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 				variant="contained"
 				size="large"
 				type="submit"
-				disabled={!isElementsOnly.test(elementId) || working}
+				// disabled={!isElementsOnly.test(elementId) || working}
+				disabled={working}
 				loading={working}
 				loadingPosition="end"
 				endIcon={<Add />}

package/src/elements/ElementLookupDialog/index.tsx

@@ -28,6 +28,7 @@ export type ElementLookupDialogSharedProps = {
 	onClose: () => void;
 	initialTab?: InitialTabProps | null;
 	useSearch?: boolean;
+	allowEmptyElement?: boolean;
 };
 
 export type ElementLookupDialogSingleModeProps = ElementLookupDialogSharedProps & {
@@ -128,7 +129,10 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 				)}
 				{tab === "manual" && (
 					<Box p={2}>
-						<AddElementManualForm onAdd={(element) => handleElementAdd(element, "manual")} />
+						<AddElementManualForm
+							onAdd={(element) => handleElementAdd(element, "manual")}
+							allowEmptyElement={props.allowEmptyElement}
+						/>
 					</Box>
 				)}
 				{tab === "scanner" && (
@@ -171,7 +175,10 @@ export function ElementLookupDialog(props: ElementLookupDialogProps) {
 									</Button>
 								}
 							>
-								<ListItemText primary={element.DisplayName} secondary={element.ElementID} />
+								<ListItemText
+									primary={element.DisplayName || element.ProjectName}
+									secondary={element.ElementID || element.ProjectID}
+								/>
 							</ListItem>
 						))}
 					</List>