@olenbetong/synergi-react 2.2.3 → 2.3.1

package/src/elements/ElementDamage/DescriptionInput.tsx

@@ -0,0 +1,111 @@
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useRef, useState } from "react";
+
+export type DescriptionInputType = {
+	Description?: string | null;
+	Cause?: string | null;
+	Action?: string | null;
+	Date?: Date;
+};
+
+type DescriptionInputProps = {
+	value?: DescriptionInputType | null;
+	defaultValue?: DescriptionInputType | null;
+	onCopyPrevDamage?: (value: DescriptionInputType) => void;
+	onChange?: (value: DescriptionInputType) => void;
+};
+
+export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChange }: DescriptionInputProps) {
+	let initializedRef = useRef<boolean>(false);
+
+	let [input, setInput] = useState<DescriptionInputType | null>(defaultValue ?? null);
+	let inputValue = value === undefined ? input : value;
+
+	// biome-ignore lint: intentionally skipping "value" dependency as this should never run when "value" changes
+	useEffect(() => {
+		if (initializedRef.current) {
+			return;
+		}
+
+		if (value === undefined && defaultValue) {
+			setInput(defaultValue);
+			initializedRef.current = true;
+		}
+	}, [defaultValue]);
+
+	function handleCopyPrevDamage() {
+		let description = localStorage.getItem("ElementDamage_Description") ?? "";
+		let cause = localStorage.getItem("ElementDamage_Cause") ?? "";
+		let action = localStorage.getItem("ElementDamage_Action") ?? "";
+
+		onCopyPrevDamage?.({
+			Description: description,
+			Cause: cause,
+			Action: action,
+		});
+		setInput({
+			...inputValue,
+			Description: description,
+			Cause: cause,
+			Action: action,
+		});
+	}
+
+	function handleOnChange(value: DescriptionInputType) {
+		onChange?.(value);
+		setInput(value);
+	}
+
+	return (
+		<>
+			<TextField
+				name="Date"
+				type="date"
+				value={(inputValue?.Date ?? new Date()).toISOString().split("T")[0]}
+				onChange={(event) => handleOnChange({ ...inputValue, Date: new Date(event.target.value) })}
+				id="NewElementDamage_Date"
+				label={getLocalizedString("Date")}
+				fullWidth
+				required
+				slotProps={{ inputLabel: { shrink: true } }}
+			/>
+
+			<Button variant="contained" onClick={handleCopyPrevDamage}>
+				{getLocalizedString("Copy previous damage")}
+			</Button>
+
+			<Autocomplete
+				value={inputValue?.Description ?? ""}
+				onChange={(_event, value) => handleOnChange({ ...inputValue, Description: value ?? "" })}
+				options={[
+					getLocalizedString("Tear in element"),
+					getLocalizedString("Damage around lifting anchor"),
+					getLocalizedString("Damage on underside"),
+				]}
+				freeSolo
+				renderInput={(params) => (
+					<TextField name="Description" required {...(params as any)} label={getLocalizedString("Description")} />
+				)}
+			/>
+
+			<TextField
+				name="Cause"
+				id="NewElementDamage_Cause"
+				value={inputValue?.Cause ?? ""}
+				onChange={(event) => handleOnChange({ ...inputValue, Cause: event.currentTarget.value })}
+				label={getLocalizedString("Cause")}
+				fullWidth
+			/>
+
+			<TextField
+				name="Action"
+				id="NewElementDamage_Action"
+				value={inputValue?.Action ?? ""}
+				onChange={(event) => handleOnChange({ ...inputValue, Action: event.currentTarget.value })}
+				label={getLocalizedString("Action")}
+				fullWidth
+			/>
+		</>
+	);
+}

package/src/elements/{ElementDamageForm/DuplicateDamage/DuplicateElementDamageDialog.tsx → ElementDamage/DuplicateDamage/DublicateElementDamageDialog.tsx}

@@ -8,20 +8,28 @@ import { DuplicatePhoneViewItem } from "./PhoneView";
 
 type DuplicateElementDamageDialogProps = {
 	open: boolean;
-	onClose: (value: boolean) => void;
+	onClose: () => void;
 	record: DamagesRecord[];
-	fallBack: () => void;
+	onRegisterAnyway: () => void;
+	loading: boolean;
 };
 
-export function DuplicateElementDamageDialog({ open, onClose, record, fallBack }: DuplicateElementDamageDialogProps) {
+export function DuplicateElementDamageDialog({
+	open,
+	onClose,
+	record,
+	onRegisterAnyway,
+	loading,
+}: DuplicateElementDamageDialogProps) {
 	let matches = useMediaQuery(theme.breakpoints.up("lg"));
+	let backgroundColor = "#e9ebee";
 
 	return (
-		<Dialog open={open} onClose={() => onClose(false)} fullWidth fullScreen={!matches}>
-			<DialogTitle sx={{ backgroundColor: "#e9ebee" }}>
+		<Dialog open={open} onClose={onClose} fullWidth fullScreen={!matches}>
+			<DialogTitle sx={{ backgroundColor: backgroundColor }}>
 				{getLocalizedString("This element has one or more unfixed registered damage")}
 			</DialogTitle>
-			<DialogContent sx={{ backgroundColor: "#e9ebee" }}>
+			<DialogContent sx={{ backgroundColor: backgroundColor }}>
 				<Grid container>
 					{matches ? (
 						<>
@@ -39,9 +47,16 @@ export function DuplicateElementDamageDialog({ open, onClose, record, fallBack }
 					)}
 				</Grid>
 			</DialogContent>
-			<DialogActions sx={{ backgroundColor: "#e9ebee" }}>
-				<Button onClick={fallBack}>{getLocalizedString("Cancel")}</Button>
-				<Button startIcon={<Add />} variant="contained" type="submit">
+			<DialogActions sx={{ backgroundColor: backgroundColor }}>
+				<Button onClick={onClose}>{getLocalizedString("Cancel")}</Button>
+				<Button
+					startIcon={<Add />}
+					variant="contained"
+					type="submit"
+					onClick={onRegisterAnyway}
+					loading={loading}
+					loadingPosition="start"
+				>
 					{getLocalizedString("Register damage anyway")}
 				</Button>
 			</DialogActions>

package/src/elements/ElementDamage/DuplicateDamage/index.tsx

@@ -0,0 +1,105 @@
+import { useDataWithFilter } from "@olenbetong/appframe-react";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import { type DamagesRecord, dsDamagesDuplicateCheck } from "../../data";
+import type { Element } from "../../ElementLookup";
+import { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+
+export { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+
+export type DuplicateElementDamageHandle = {
+	onClose: () => void;
+	checkDuplicate: () => Promise<DamagesRecord[] | null>;
+	record: DamagesRecord[];
+};
+
+type DuplicateElementDamageProps = {
+	element: Element | null;
+	/**
+	 * External control of dialog visibility
+	 */
+	open?: boolean;
+	onOpenChange?: (value: boolean) => void;
+	/**
+	 * Skip duplicate checking (used in edit mode)
+	 */
+	disableCheck?: boolean;
+	/**
+	 * Loading state for submit button
+	 */
+	loading?: boolean;
+	/**
+	 * Called when duplicate or duplicates are found
+	 * @param record Array with all of the duplicate damages
+	 * @returns void
+	 */
+	onDuplicateFound?: (record: DamagesRecord[]) => void;
+	/**
+	 * Called when user presses register anyway in dialog
+	 * @returns void
+	 */
+	onRegisterAnyway?: () => void;
+};
+
+export const DuplicateElementDamage = forwardRef<DuplicateElementDamageHandle, DuplicateElementDamageProps>(
+	function DuplicateElementDamage(
+		{
+			element,
+			open: controlledOpen,
+			onOpenChange,
+			disableCheck = false,
+			loading = false,
+			onRegisterAnyway,
+		}: DuplicateElementDamageProps,
+		ref,
+	) {
+		let [record, setRecord] = useState<DamagesRecord[]>([]);
+		let [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(false);
+		let open = controlledOpen === undefined ? uncontrolledOpen : controlledOpen;
+
+		let whereClause = useMemo(() => {
+			if (!element) {
+				return "1=0";
+			}
+			return `Domain = '${element.Domain}' AND ElementID = '${element.ElementID}' AND ProjectID = '${element.ProjectID}'`;
+		}, [element]);
+
+		let duplicateRecord = useDataWithFilter(dsDamagesDuplicateCheck, whereClause, "whereClause");
+
+		async function runDuplicateCheck(): Promise<DamagesRecord[] | null> {
+			// If we are editing a record, we don't need to check for duplicates
+			if (disableCheck) {
+				return null;
+			}
+
+			if (duplicateRecord.length > 0) {
+				setRecord(duplicateRecord);
+				setUncontrolledOpen(true);
+
+				return duplicateRecord;
+			}
+
+			return null;
+		}
+
+		function handleOpenChange(value: boolean) {
+			setUncontrolledOpen(value);
+			onOpenChange?.(value);
+		}
+
+		useImperativeHandle(ref, () => ({
+			onClose: () => setUncontrolledOpen(false),
+			checkDuplicate: () => runDuplicateCheck(),
+			record: record,
+		}));
+
+		return (
+			<DuplicateElementDamageDialog
+				open={open}
+				onClose={() => handleOpenChange(false)}
+				record={record}
+				onRegisterAnyway={onRegisterAnyway ?? (() => {})}
+				loading={loading ?? false}
+			/>
+		);
+	},
+);

package/src/elements/ElementDamage/ElementNumberTextField.tsx

@@ -0,0 +1,41 @@
+import { type SxProps, TextField, type Theme } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useState } from "react";
+
+type ElementNumberTextFieldProps = {
+	value?: string | null;
+	defaultValue?: string | null;
+	onChange?: (value: string) => void;
+	disabled?: boolean;
+	sx?: SxProps<Theme>;
+};
+
+export function ElementNumberTextField({ value, defaultValue, onChange, disabled, sx }: ElementNumberTextFieldProps) {
+	let [elementNumber, setElementNumber] = useState<string>(defaultValue ?? "");
+	let elementNumberValue = value === undefined ? elementNumber : value;
+
+	useEffect(() => {
+		if (value === undefined && defaultValue) {
+			setElementNumber(defaultValue);
+		}
+	}, [defaultValue, value]);
+
+	function handleChange(value: string) {
+		onChange?.(value);
+		setElementNumber(value);
+	}
+
+	return (
+		<TextField
+			name="ElementNumber"
+			id="NewElementDamage_ElementNr"
+			value={elementNumberValue}
+			onChange={(event) => handleChange(event.currentTarget.value)}
+			label={getLocalizedString("Element number")}
+			fullWidth
+			autoComplete="off"
+			disabled={disabled ?? false}
+			sx={{ ...sx }}
+		/>
+	);
+}

package/src/elements/ElementDamage/HiddenDamageFields.tsx

@@ -0,0 +1,13 @@
+type HiddenDamageFieldsProps = {
+	primKey: string;
+	ID: number;
+};
+
+export function HiddenDamageFields({ primKey, ID }: HiddenDamageFieldsProps) {
+	return (
+		<>
+			<input type="hidden" name="PrimKey" value={primKey} />
+			<input type="hidden" name="ID" value={ID} />
+		</>
+	);
+}

package/src/elements/ElementDamage/RegisterFix.tsx

@@ -0,0 +1,100 @@
+import CheckIcon from "@mui/icons-material/Check";
+import { Button, Checkbox, FormControlLabel, Typography } from "@mui/material";
+import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+
+import { useEffect, useRef, useState } from "react";
+
+import { procApproveDamage } from "../data";
+
+const formatter = new Intl.DateTimeFormat(af.userSession.culture, {
+	day: "numeric",
+	month: "long",
+	year: "numeric",
+	hour: "2-digit",
+	minute: "2-digit",
+	timeZone: "UTC",
+});
+
+type RegisterFixType = {
+	ID: number;
+	RegisteredFixFullName: string | null;
+	RegisteredFix: Date | null;
+	RegisteredFixBy: string | null;
+};
+
+type ApproveDamageProcedureRecord = {
+	Table: Array<Required<RegisterFixType>>;
+};
+
+type RegisterFixProps = {
+	value?: RegisterFixType | null;
+	defaultValue?: RegisterFixType | null;
+	onFix?: (ID: number) => void;
+	edit?: boolean;
+};
+
+export function RegisterFix({ value, defaultValue, onFix, edit }: RegisterFixProps) {
+	let [loading, setLoading] = useState<boolean>(false);
+	let initializedRef = useRef<boolean>(false);
+
+	let [fix, setFix] = useState<RegisterFixType | null>(defaultValue ?? null);
+	let fixValue = value === undefined ? fix : value;
+
+	// biome-ignore lint: intentionally skipping "value" dependency as this should never run when "value" changes
+	useEffect(() => {
+		if (initializedRef.current) {
+			return;
+		}
+
+		if (value === undefined && defaultValue) {
+			setFix(defaultValue);
+			initializedRef.current = true;
+		}
+	}, [defaultValue]);
+
+	async function handleRegisterFix() {
+		try {
+			if (confirm(getLocalizedString("Are you sure you want to register a fix for this damage?"))) {
+				setLoading(true);
+				let record = (await procApproveDamage.execute({ ID: fixValue?.ID })) as ApproveDamageProcedureRecord;
+
+				setFix({ ...record.Table[0] });
+
+				setLoading(false);
+				onFix?.(fixValue?.ID ?? -1);
+			}
+		} catch (error) {
+			alert((error as Error).message);
+		}
+	}
+
+	return (
+		<>
+			{edit ? (
+				<Button
+					loading={loading}
+					loadingPosition="end"
+					endIcon={<CheckIcon />}
+					onClick={handleRegisterFix}
+					disabled={!!fixValue?.RegisteredFix}
+					variant="contained"
+				>
+					{getLocalizedString("Register fix")}
+				</Button>
+			) : (
+				<FormControlLabel
+					control={<Checkbox />}
+					label={getLocalizedString("Register fixed")}
+					name="RegisteredFix"
+					id="NewElementDamage_RegisteredFix"
+				/>
+			)}
+
+			{fixValue?.RegisteredFix && (
+				<Typography mb={1.5} color="text.secondary">
+					{localize`Registered fix by ${fixValue.RegisteredFixFullName ?? fixValue.RegisteredFixBy} on the ${formatter.format(fixValue.RegisteredFix)}`}
+				</Typography>
+			)}
+		</>
+	);
+}

package/src/elements/ElementDamage/SubmitButtons.tsx

@@ -0,0 +1,40 @@
+import Add from "@mui/icons-material/Add";
+import { Box, Button, type SxProps, type Theme } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+type SubmitButtonsProps = {
+	/**
+	 * Whether the form is in edit mode. If true, delete button is visible and submit button's text changes.
+	 */
+	edit?: boolean;
+	/**
+	 * Set loading state for submit button
+	 */
+	loading?: boolean;
+	/**
+	 * Custom styles for Box wrapper around buttons
+	 */
+	sx?: SxProps<Theme>;
+	onDelete?: () => void;
+	onCancel?: () => void;
+	onSubmit?: () => void;
+};
+
+export function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }: SubmitButtonsProps) {
+	return (
+		<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, justifyContent: "flex-end", ...sx }}>
+			{edit && <Button onClick={onDelete}>{getLocalizedString("Delete")}</Button>}
+			<Button onClick={onCancel}>{getLocalizedString("Cancel")}</Button>
+			<Button
+				loading={loading}
+				loadingPosition="start"
+				startIcon={<Add />}
+				type="submit"
+				variant="contained"
+				onClick={onSubmit}
+			>
+				{edit ? getLocalizedString("Save changes") : getLocalizedString("Register damage")}
+			</Button>
+		</Box>
+	);
+}

package/src/elements/ElementDamage/TransportElementSelect.tsx

@@ -0,0 +1,52 @@
+import DropDownArrowIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Button, ListItemText, Menu, MenuItem } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+import type { TransportElementsRecord } from "../data/dsTransportElements.js";
+
+type TransportElementSelectProps = {
+	elements: TransportElementsRecord[];
+	onSelect: (element: TransportElementsRecord) => void;
+};
+
+export function TransportElementSelect({ elements, onSelect }: TransportElementSelectProps) {
+	let [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	let open = !!anchorEl;
+	let [selected, setSelected] = useState<TransportElementsRecord | null>(null);
+
+	function handleChange(element: TransportElementsRecord) {
+		setAnchorEl(null);
+		onSelect(element);
+		setSelected(element);
+	}
+
+	return (
+		<>
+			<Button
+				id="select_element"
+				variant="contained"
+				endIcon={
+					<DropDownArrowIcon
+						style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }}
+					/>
+				}
+				sx={{ width: "165px" }}
+				aria-controls={open ? "basic-menu" : undefined}
+				aria-haspopup="true"
+				aria-expanded={open ? "true" : undefined}
+				onClick={(event) => setAnchorEl(event.currentTarget)}
+			>
+				{selected ? `${selected.ElementID} - ${selected.Name}` : getLocalizedString("Select element")}
+			</Button>
+			<Menu id="menu_element" anchorEl={anchorEl} open={open} onClose={() => setAnchorEl(null)}>
+				{elements.map((element) => (
+					<MenuItem key={element.PrimKey} onClick={() => handleChange(element)}>
+						<ListItemText>
+							{element.ElementID} - {element.Name}
+						</ListItemText>
+					</MenuItem>
+				))}
+			</Menu>
+		</>
+	);
+}

package/src/elements/ElementLookup.tsx

@@ -0,0 +1,90 @@
+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 AddElement, ElementLookupDialog } from "./ElementLookupDialog";
+
+export type Element = {
+	Domain: string;
+	PrimKey: string;
+	ProjectID: string;
+	ProjectName: string;
+	ElementID: string | null;
+};
+
+export type ElementLookupHandle = {
+	openDialog: () => void;
+	closeDialog: () => void;
+};
+
+export type ElementLookupProps = {
+	value?: Element | null;
+	defaultValue?: Element | null;
+	ref?: RefObject<ElementLookupHandle | null>;
+	openLookupDialogIcon?: boolean;
+	onChange?: (value: Element | null) => void;
+};
+
+export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps) {
+	let [openElementLookupDialog, setOpenElementLookupDialog] = useState<boolean>(false);
+	let [element, setElement] = useState<Element | null>(defaultValue ?? null);
+	let elementValue = value === undefined ? element : value;
+
+	useEffect(() => {
+		if (value === undefined && defaultValue) {
+			setElement(defaultValue);
+		}
+	}, [defaultValue, value]);
+
+	useImperativeHandle(ref, () => ({
+		openDialog: () => setOpenElementLookupDialog(true),
+		closeDialog: () => setOpenElementLookupDialog(false),
+	}));
+
+	async function handleAddElement(addElement: AddElement) {
+		onChange?.(addElement.element);
+		setElement(addElement.element);
+	}
+
+	return (
+		<>
+			<ElementLookupDialog
+				open={openElementLookupDialog}
+				mode="single"
+				onClose={() => setOpenElementLookupDialog(false)}
+				onAdd={handleAddElement}
+			/>
+
+			<input type="hidden" name="ProjectID" value={elementValue?.ProjectID ?? ""} />
+			<input type="hidden" name="ElementRef" value={elementValue?.PrimKey ?? ""} />
+
+			<TextField
+				id="NewElementDamge_Project"
+				value={elementValue ? `${elementValue.ProjectID}: ${elementValue.ProjectName}` : ""}
+				label={getLocalizedString("Project")}
+				fullWidth
+				required
+				autoComplete="off"
+				slotProps={{ htmlInput: { readOnly: true } }}
+			/>
+			<TextField
+				name="ElementID"
+				id="NewElementDamage_ElementID"
+				value={elementValue ? elementValue.ElementID : ""}
+				label={getLocalizedString("Element ID")}
+				fullWidth
+				autoComplete="off"
+				slotProps={{
+					htmlInput: { readOnly: true },
+					input: {
+						endAdornment: openLookupDialogIcon ? (
+							<IconButton onClick={() => setOpenElementLookupDialog(true)}>
+								<SearchIcon />
+							</IconButton>
+						) : undefined,
+					},
+				}}
+			/>
+		</>
+	);
+}

package/src/elements/{AddElementDialog → ElementLookupDialog}/Manual/ManualForm.tsx

@@ -1,7 +1,7 @@
 import Add from "@mui/icons-material/Add";
 import { Alert, Button, TextField } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import type { ProjectsRecord } from "../../data/dsProjects";
 import { ProjectSelect } from "../../ProjectSelect";
 import { type ElementDetails, getElement } from "../getElement";
@@ -22,6 +22,7 @@ export type AddElementManualFormProps = {
 };
 
 export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElementManualFormProps) {
+	let id = useId();
 	let buttonRef = useRef<HTMLButtonElement>(null);
 	let [working, setWorking] = useState(false);
 	let [elementId, setElementId] = useState<string>("");
@@ -30,6 +31,7 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 	async function handleSubmit(evt: React.FormEvent<HTMLFormElement>) {
 		try {
 			evt.preventDefault();
+			evt.stopPropagation();
 			let formData = new FormData(evt.target as HTMLFormElement);
 			let elements = formData.get("ElementID");
 			let domain = formData.get("Domain");
@@ -64,7 +66,7 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 	}
 
 	return (
-		<form onSubmit={handleSubmit} method="post">
+		<form id={id} onSubmit={handleSubmit} method="post">
 			<Alert severity="warning" sx={{ mb: 2 }}>
 				{getLocalizedString(
 					"Manually entering elements is a major source of errors. Only use this as a last resort. If the camera or scanner is not working, please contact the IT department.",
@@ -90,6 +92,7 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }: AddElement
 			/>
 
 			<Button
+				form={id}
 				ref={buttonRef}
 				color="primary"
 				variant="contained"

package/src/elements/{AddElementDialog → ElementLookupDialog}/getElement.ts

@@ -5,6 +5,7 @@ import Giai from "./utils/Giai";
 export type AddElementSource = "manual" | "camera-barcode" | "loading-list" | "hid-barcode" | "hid-rfid";
 
 export type ElementDetails = {
+	Domain: string;
 	PrimKey: string;
 	Created: Date;
 	ProjectID: string;
@@ -20,6 +21,7 @@ const elementsDataHandler = new DataProviderHandlerAPI<ElementDetails>({
 	fields: [
 		{ name: "PrimKey", type: "string" },
 		{ name: "Created", type: "datetime" },
+		{ name: "Domain", type: "string" },
 		{ name: "ProjectID", type: "string" },
 		{ name: "ProjectName", type: "string" },
 		{ name: "ProjectDomain", type: "string" },