@olenbetong/synergi-react 2.1.2 → 2.3.0

package/src/{SplitContainer → components/SplitContainer}/index.tsx

@@ -67,11 +67,11 @@ type DividerProps = {
 
 const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(props: DividerProps, ref) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: NO!
 		<div
 			className={clsx("ObSplitContainer-divider", props.className)}
 			tabIndex={0}
 			ref={ref}
-			// biome-ignore lint/a11y/useSemanticElements: this is allowed according to WAI-ARIA
 			role="separator"
 			aria-orientation={props.direction}
 			aria-valuemin={props.min}

package/src/{ValueToggleGroup → components/ValueToggleGroup}/index.css

@@ -1,3 +1,21 @@
+.ObValueToggleOption {
+	display: flex;
+	align-items: center;
+	margin: 0;
+	position: relative;
+}
+
+.ObValueToggleLabel {
+	font-size: 0.8em;
+	margin: 0 0.2em;
+	padding: 0.3em 0.5em;
+	text-transform: uppercase;
+	transition:
+		background 0.2s ease,
+		color 0.2s ease;
+	border-radius: 4px;
+}
+
 .ObValueToggleGroup {
 	padding: 0.25rem;
 	border: 2px solid rgb(0 0 0 / 0.2);
@@ -26,13 +44,6 @@
 	}
 }
 
-.ObValueToggleOption {
-	display: flex;
-	align-items: center;
-	margin: 0;
-	position: relative;
-}
-
 .ObValueToggleOption input {
 	position: absolute;
 	width: 1px;
@@ -44,15 +55,6 @@
 	border: 0;
 }
 
-.ObValueToggleLabel {
-	font-size: 0.8em;
-	margin: 0 0.2em;
-	padding: 0.3em 0.5em;
-	text-transform: uppercase;
-	transition: background 0.2s ease, color 0.2s ease;
-	border-radius: 4px;
-}
-
 .ObValueToggleOption:hover input:not(:disabled) + .ObValueToggleLabel {
 	cursor: pointer;
 	background: #ccc;

package/src/{ValueToggleGroup → components/ValueToggleGroup}/index.tsx

@@ -1,7 +1,7 @@
 import "./index.css";
 
-import { forwardRef, useId } from "react";
 import clsx from "clsx";
+import { forwardRef, useId } from "react";
 
 export type ValueToggleOption = {
 	value: string | number;
@@ -30,6 +30,7 @@ export const ValueToggleGroup = forwardRef<HTMLFieldSetElement, ValueToggleGroup
 	let isControlled = value !== undefined;
 
 	return (
+		// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: legacy component
 		<fieldset className={clsx("ObValueToggleGroup", orientation, className)} role="radiogroup" ref={ref} style={style}>
 			{options.map((opt) => {
 				return (

package/src/elements/ElementDamage/DamageFormButtons.tsx

@@ -0,0 +1,35 @@
+import Add from "@mui/icons-material/Add";
+import { Button } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+
+type DamageFormButtonsProps = {
+	isEdit: boolean;
+	loading: boolean;
+	uploadingFile: boolean;
+	handleDelete: () => void;
+	handleCancel: () => void;
+};
+
+export function DamageFormButtonsProps({
+	isEdit,
+	loading,
+	uploadingFile,
+	handleDelete,
+	handleCancel,
+}: DamageFormButtonsProps) {
+	return (
+		<>
+			{isEdit && <Button onClick={handleDelete}>{getLocalizedString("Delete")}</Button>}
+			<Button onClick={handleCancel}>{getLocalizedString("Cancel")}</Button>
+			<Button
+				loading={loading || uploadingFile}
+				loadingPosition="start"
+				startIcon={<Add />}
+				type="submit"
+				variant="contained"
+			>
+				{isEdit ? getLocalizedString("Save changes") : getLocalizedString("Register damage")}
+			</Button>
+		</>
+	);
+}

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/ElementDamage/DuplicateDamage/DesktopView.tsx

@@ -0,0 +1,75 @@
+import { Grid, type GridSize, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { Link } from "@olenbetong/appframe-mui";
+import type { DamagesRecord } from "../../data";
+
+type SummaryItemProps = {
+	col: GridSize;
+	label?: string;
+	children?: React.ReactNode;
+	em?: boolean;
+	align?: "center" | "left" | "right";
+	padding?: string | number;
+};
+
+function SummaryItem({ col, label, children, em, align, padding }: SummaryItemProps) {
+	return (
+		<Grid size={col} sx={{ p: padding ?? 2, borderBottom: (t) => `1px solid ${t.palette.divider}` }}>
+			{label && (
+				<Typography variant="body1" fontSize="0.9rem" fontWeight={500} mb={1} textAlign={align}>
+					{getLocalizedString(label)}
+				</Typography>
+			)}
+			{children && (
+				<Typography
+					fontSize={em ? "1.4rem" : "0.9rem"}
+					whiteSpace="pre-line"
+					fontWeight={em ? 600 : undefined}
+					textAlign={align}
+				>
+					{children}
+				</Typography>
+			)}
+		</Grid>
+	);
+}
+
+type ElementDamagesItemProps = {
+	record: DamagesRecord;
+};
+
+export function ElementDamagesItem({ record }: ElementDamagesItemProps) {
+	return (
+		<>
+			<SummaryItem col={1.5}>
+				<Link
+					href="#"
+					onClick={(e) => {
+						e.preventDefault();
+						window.location.href = `${record.ID}`;
+					}}
+				>
+					{record.ID}
+				</Link>
+			</SummaryItem>
+			<SummaryItem col={2.5} align="right">
+				{record.Date.toISOString().split("T")[0]}
+			</SummaryItem>
+			<SummaryItem col={3}>{record.Description}</SummaryItem>
+			<SummaryItem col={2.5}>{record.Cause}</SummaryItem>
+			<SummaryItem col={2.5}>{record.Action}</SummaryItem>
+		</>
+	);
+}
+
+export function ElementDamagesHeader() {
+	return (
+		<>
+			<SummaryItem col={1.5} label="ID" />
+			<SummaryItem col={2.5} label="Date" align="right" />
+			<SummaryItem col={3} label="Description" />
+			<SummaryItem col={2.5} label="Cause" />
+			<SummaryItem col={2.5} label="Action" />
+		</>
+	);
+}

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

@@ -0,0 +1,65 @@
+import Add from "@mui/icons-material/Add";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, useMediaQuery } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { theme } from "@olenbetong/appframe-mui";
+import type { DamagesRecord } from "../../data";
+import { ElementDamagesHeader, ElementDamagesItem } from "./DesktopView";
+import { DuplicatePhoneViewItem } from "./PhoneView";
+
+type DuplicateElementDamageDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	record: DamagesRecord[];
+	onRegisterAnyway: () => void;
+	loading: boolean;
+};
+
+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} fullWidth fullScreen={!matches}>
+			<DialogTitle sx={{ backgroundColor: backgroundColor }}>
+				{getLocalizedString("This element has one or more unfixed registered damage")}
+			</DialogTitle>
+			<DialogContent sx={{ backgroundColor: backgroundColor }}>
+				<Grid container>
+					{matches ? (
+						<>
+							<ElementDamagesHeader />
+							{record.map((record) => (
+								<ElementDamagesItem key={record.PrimKey} record={record} />
+							))}
+						</>
+					) : (
+						<div className="flow" style={{ width: "100%" }}>
+							{record.map((record) => (
+								<DuplicatePhoneViewItem key={record.PrimKey} record={record} />
+							))}
+						</div>
+					)}
+				</Grid>
+			</DialogContent>
+			<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>
+		</Dialog>
+	);
+}

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

@@ -0,0 +1,42 @@
+import { Card, CardContent, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DamagesRecord } from "../../data";
+
+type DuplicatePhoneViewItemProps = {
+	record: DamagesRecord;
+};
+
+export function DuplicatePhoneViewItem({ record }: DuplicatePhoneViewItemProps) {
+	return (
+		<Card
+			variant="outlined"
+			onClick={() => {
+				window.location.href = `${record.ID}`;
+			}}
+		>
+			<CardContent>
+				<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+					{record.Date.toLocaleDateString()}
+				</Typography>
+				<Typography variant="h5" mb={1.5}>
+					{record.ElementID} - {record.DisplayName}
+				</Typography>
+
+				<Typography>{getLocalizedString("Description")}:</Typography>
+				<Typography mb={1.5} color="text.secondary">
+					{record.Description}
+				</Typography>
+
+				<Typography>{getLocalizedString("Cause")}: </Typography>
+				<Typography mb={1.5} color="text.secondary">
+					{record.Cause}
+				</Typography>
+
+				<Typography>{getLocalizedString("Action")}: </Typography>
+				<Typography mb={1.5} color="text.secondary">
+					{record.Action}
+				</Typography>
+			</CardContent>
+		</Card>
+	);
+}

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>
+			)}
+		</>
+	);
+}