@olenbetong/synergi-react 2.2.3 → 2.3.0

package/src/elements/ElementDamageForm/DamageFormFields.tsx

@@ -1,149 +0,0 @@
-import AddAPhotoIcon from "@mui/icons-material/AddAPhoto";
-import { Autocomplete, Box, Button, TextField } from "@mui/material";
-import { getLocalizedString } from "@olenbetong/appframe-core";
-
-import { useState } from "react";
-import type { DamagesRecord, ElementsRecord, ProjectsRecord } from "../data";
-
-type DamageFormFieldsProps = {
-	editRecord: DamagesRecord | null;
-	project: Partial<ProjectsRecord> | null;
-	elementRecord: ElementsRecord[];
-	elementID: string;
-	attachmentPrimKeys: string[];
-	handleAddElement: () => void;
-	formName: string;
-};
-
-export function DamageFormFields({
-	editRecord,
-	project,
-	elementRecord,
-	elementID,
-	attachmentPrimKeys,
-	handleAddElement,
-	formName,
-}: DamageFormFieldsProps) {
-	let [description, setDescription] = useState<string | undefined>();
-
-	function handleCopyPreviousDamage() {
-		const form = document.forms.namedItem(formName);
-		if (form) {
-			form["Cause"].value = localStorage.getItem("ElementDamage_Cause")?.toString();
-			form["Action"].value = localStorage.getItem("ElementDamage_Action")?.toString();
-		}
-		setDescription(localStorage.getItem("ElementDamage_Description")?.toString());
-	}
-
-	return (
-		<>
-			<input type="hidden" name="ID" value={editRecord?.ID ?? ""} />
-			<input type="hidden" name="PrimKey" value={editRecord?.PrimKey ?? ""} />
-			<input type="hidden" name="ProjectID" value={project?.ProjectID ?? ""} />
-			<input type="hidden" name="Domain" value={project?.Domain ?? ""} />
-			<input type="hidden" name="ElementRef" value={elementRecord[0]?.PrimKey ?? ""} />
-			<input type="hidden" name="AttachmentPrimkeys" value={attachmentPrimKeys} />
-
-			<TextField
-				name="Date"
-				type="date"
-				defaultValue={(editRecord?.Date ?? new Date()).toISOString().split("T")[0]}
-				id="NewElementDamage_Date"
-				label={getLocalizedString("Date")}
-				fullWidth
-				required
-				slotProps={{ inputLabel: { shrink: true } }}
-			/>
-
-			<Box display="flex" gap={2} justifyContent="flex-end">
-				<Button
-					variant="contained"
-					onClick={() => handleCopyPreviousDamage()}
-					disabled={!localStorage.getItem("ElementDamage_Description")}
-				>
-					{getLocalizedString("Copy previous damage")}
-				</Button>
-				<Button onClick={handleAddElement} endIcon={<AddAPhotoIcon />} variant="contained">
-					{getLocalizedString("Add element")}
-				</Button>
-			</Box>
-
-			<TextField
-				id="NewElementDamage_Project"
-				value={project ? `${project?.ProjectID}: ${project?.ProjectName}` : ""}
-				label={getLocalizedString("Project")}
-				fullWidth
-				required
-				autoComplete="off"
-				slotProps={{
-					htmlInput: { readOnly: true },
-				}}
-			/>
-
-			<TextField
-				name="ElementID"
-				id="NewElementDamage_ElementID"
-				value={elementID}
-				label={getLocalizedString("Element ID")}
-				fullWidth
-				autoComplete="off"
-				slotProps={{
-					htmlInput: { readOnly: true },
-				}}
-			/>
-
-			<TextField
-				name="ElementNumber"
-				id="NewElementDamage_ElementNr"
-				defaultValue={editRecord?.ElementNumber ?? ""}
-				label={getLocalizedString("Element number")}
-				fullWidth
-				autoComplete="off"
-				disabled={!!elementID}
-			/>
-
-			<Autocomplete
-				value={description ?? editRecord?.Description ?? ""}
-				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"
-				defaultValue={editRecord?.Cause ?? ""}
-				label={getLocalizedString("Cause")}
-				fullWidth
-				slotProps={{
-					inputLabel: {
-						shrink: (() => {
-							const form = document.forms.namedItem(formName);
-							return form?.["Cause"]?.value ? true : undefined;
-						})(),
-					},
-				}}
-			/>
-			<TextField
-				name="Action"
-				id="NewElementDamage_Action"
-				defaultValue={editRecord?.Action ?? ""}
-				label={getLocalizedString("Action")}
-				fullWidth
-				slotProps={{
-					inputLabel: {
-						shrink: (() => {
-							const form = document.forms.namedItem(formName);
-							return form?.["Action"]?.value ? true : undefined;
-						})(),
-					},
-				}}
-			/>
-		</>
-	);
-}

package/src/elements/ElementDamageForm/index.tsx

@@ -1,397 +0,0 @@
-import "./index.css";
-
-import Add from "@mui/icons-material/Add";
-import CheckIcon from "@mui/icons-material/Check";
-
-import { Box, Button, Checkbox, FormControlLabel, Typography } from "@mui/material";
-import Alert from "@mui/material/Alert";
-import { getLocalizedString, localize } from "@olenbetong/appframe-core";
-import { type DataObject, formDataToDataObjectRecord } from "@olenbetong/appframe-data";
-import { PageContainer, PageTitle } from "@olenbetong/appframe-mui";
-import { useDataWithFilter } from "@olenbetong/appframe-react";
-
-import { type FormEvent, useId, useRef, useState } from "react";
-import { FilePond } from "../../components/FilePond";
-import { type AddElement, AddElementDialog } from "../AddElementDialog";
-import {
-	type AttachmentsRecord,
-	type CurrentAttachmentRecord,
-	type DamagesRecord,
-	dsDamagesDuplicateCheck,
-	type ElementsRecord,
-	type ProjectsRecord,
-	procApproveDamage,
-} from "../data";
-import { DamageFormFields } from "./DamageFormFields";
-import { DuplicateElementDamageDialog } from "./DuplicateDamage/DuplicateElementDamageDialog";
-
-const formatter = new Intl.DateTimeFormat(af.userSession.culture, {
-	day: "numeric",
-	month: "long",
-	year: "numeric",
-	hour: "2-digit",
-	minute: "2-digit",
-	timeZone: "UTC",
-});
-
-function deleteAttachments(
-	dataObject: DataObject<AttachmentsRecord> | DataObject<CurrentAttachmentRecord>,
-	primKeyArray: string[],
-) {
-	for (const primKey of primKeyArray) {
-		const index = dataObject.findIndex((record) => record.PrimKey === primKey);
-
-		if (index > -1) {
-			dataObject.deleteRow(index);
-		}
-	}
-}
-
-type RegisterFixProps = {
-	editRecord: DamagesRecord | null;
-	damageDataObject: DataObject<DamagesRecord>;
-	fixedThisSession: boolean;
-	setFixedThisSession: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-function RegisterFix({ editRecord, damageDataObject, fixedThisSession, setFixedThisSession }: RegisterFixProps) {
-	const [loading, setLoading] = useState<boolean>(false);
-
-	async function handleRegisterFix() {
-		try {
-			if (confirm(getLocalizedString("Are you sure you want to register a fix for this damage?"))) {
-				setLoading(true);
-				await procApproveDamage.execute({ ID: editRecord?.ID });
-				await damageDataObject.refreshCurrentRow();
-
-				setLoading(false);
-				setFixedThisSession(true);
-			}
-		} catch (error) {
-			alert((error as Error).message);
-		}
-	}
-
-	return (
-		<>
-			{editRecord ? (
-				<Box display="flex" justifyContent="flex-end">
-					<Button
-						loading={loading}
-						loadingPosition="end"
-						endIcon={<CheckIcon />}
-						onClick={handleRegisterFix}
-						disabled={!!editRecord.RegisteredFix || fixedThisSession}
-						variant="contained"
-					>
-						{getLocalizedString("Register fix")}
-					</Button>
-				</Box>
-			) : (
-				<FormControlLabel
-					control={<Checkbox />}
-					label={getLocalizedString("Register fixed")}
-					name="RegisteredFix"
-					id="NewElementDamage_RegisteredFix"
-				/>
-			)}
-
-			{editRecord?.RegisteredFix && (
-				<Typography mb={1.5} color="text.secondary">
-					{localize`Registered fix by ${editRecord.FullName ?? editRecord.RegisteredFixBy} on the ${formatter.format(editRecord.RegisteredFix)}`}
-				</Typography>
-			)}
-		</>
-	);
-}
-
-type ElementDamageFormProps = {
-	editRecord: DamagesRecord | null;
-	elementsDataObject: DataObject<ElementsRecord>;
-	damagesDataObject: DataObject<DamagesRecord>;
-	attachmentsDataObject: DataObject<AttachmentsRecord>;
-	currentAttachmentDataObject: DataObject<CurrentAttachmentRecord>;
-	fallBack: () => void;
-};
-
-export function ElementDamageForm({
-	editRecord,
-	elementsDataObject,
-	damagesDataObject,
-	attachmentsDataObject,
-	currentAttachmentDataObject,
-	fallBack,
-}: ElementDamageFormProps) {
-	let formName = useId();
-	let formRef = useRef<HTMLFormElement | null>(null);
-
-	// Data object values
-	let [project, setProject] = useState<Partial<ProjectsRecord> | null>(
-		editRecord
-			? { ProjectID: editRecord.ProjectID, ProjectName: editRecord.ProjectName, Domain: editRecord.Domain }
-			: null,
-	);
-	let [elementID, setElementID] = useState<string>(editRecord?.ElementID ?? "");
-	let [attachmentPrimKeys, setAttachmentPrimKeys] = useState<string[]>([]);
-	let [duplicateRecords, setDuplicateRecords] = useState<DamagesRecord[]>([]);
-	let damagesDuplicateRecord = useDataWithFilter(dsDamagesDuplicateCheck, "1=1", "whereClause");
-	let elementRecord = useDataWithFilter(
-		elementsDataObject,
-		`ProjectID = '${project?.ProjectID}' AND ElementID = '${elementID}'`,
-		"whereClause",
-	);
-
-	// Event values
-	let [addElementOpen, setAddElementOpen] = useState<boolean>(!editRecord); // Opens by default when form is new
-	let [loading, setLoading] = useState<boolean>(false);
-	let [uploadingFile, setUploadingFile] = useState<boolean>(false);
-	let [fixedThisSession, setFixedThisSession] = useState(false); // Element is registered fixed during this editing session
-	let [duplicateDialog, setDuplicateDialog] = useState(false);
-
-	// Error values
-	let [error, setError] = useState<string | null>(null);
-
-	async function handleAddElement(addElement: AddElement) {
-		setProject({
-			ProjectID: addElement.element.ProjectID,
-			ProjectName: addElement.element.ProjectName,
-			Domain: addElement.element.ProjectDomain,
-		});
-		setElementID(addElement.element.ElementID);
-	}
-
-	async function handleDelete(row: DamagesRecord) {
-		try {
-			let index = damagesDataObject.findIndex((r) => r.PrimKey === row.PrimKey);
-
-			if (index >= 0 && confirm(getLocalizedString("Are you sure you want to delete this item?"))) {
-				let primKeyArray = currentAttachmentDataObject.map((record) => record.PrimKey);
-				deleteAttachments(currentAttachmentDataObject, primKeyArray);
-
-				await damagesDataObject.deleteRow(index);
-			}
-
-			fallBack();
-		} catch (error: any) {
-			setError(error.message);
-		}
-	}
-
-	async function handleCancel() {
-		// Remove the registered fix if it was registered this session
-		if (editRecord && fixedThisSession) {
-			damagesDataObject.setCurrentIndex(damagesDataObject.findIndex((record) => record.ID === editRecord.ID));
-			await damagesDataObject.refreshCurrentRow();
-			await damagesDataObject.save({
-				RegisteredFix: null,
-				RegisteredFixBy: null,
-			});
-		}
-
-		// Remove attachments if they are not saved
-		if (attachmentPrimKeys) {
-			await attachmentsDataObject.refreshDataSource();
-			const primKeyArray = attachmentPrimKeys.toString().split(",");
-			deleteAttachments(attachmentsDataObject, primKeyArray);
-		}
-
-		fallBack();
-	}
-
-	// Returning true means a duplicate is found and confirmation dialog will open
-	function isDuplicate(): boolean {
-		// If we are editing a record, we don't need to check for duplicates
-		if (editRecord) {
-			return false;
-		}
-
-		const filteredRecord = damagesDuplicateRecord.filter(
-			(record) => record.ElementID === elementID && record.ProjectID === project?.ProjectID && !record.RegisteredFix,
-		);
-
-		if (filteredRecord.length > 0) {
-			setDuplicateRecords(filteredRecord);
-			setDuplicateDialog(true);
-
-			return true;
-		}
-
-		return false;
-	}
-
-	async function handleSubmit(event: FormEvent<HTMLFormElement>) {
-		event.preventDefault();
-		setLoading(true);
-		if (duplicateRecords.length <= 0) {
-			if (isDuplicate()) {
-				return;
-			}
-		}
-
-		try {
-			let formData = new FormData(event.currentTarget);
-			let attachmentPrimKeys = formData.get("AttachmentPrimkeys") as string | null;
-			let elementID = formData.get("ElementID") as string | null;
-			let elementNumber = formData.get("ElementNumber") as string | null;
-			formData.delete("File");
-			formData.delete("AttachmentPrimkeys");
-
-			if (!elementID && !elementNumber) {
-				setError(getLocalizedString("Please fill in either Element ID or Element Number"));
-				return;
-			}
-
-			localStorage.setItem("ElementDamage_Description", formData.get("Description")?.toString() ?? "");
-			localStorage.setItem("ElementDamage_Cause", formData.get("Cause")?.toString() ?? "");
-			localStorage.setItem("ElementDamage_Action", formData.get("Action")?.toString() ?? "");
-
-			let record = Object.assign({ ...formDataToDataObjectRecord(formData, damagesDataObject) });
-
-			if (formData.get("ID")) {
-				record.ID = undefined;
-				await damagesDataObject.dataHandler.update(record);
-				submitReturn();
-				return;
-			} else {
-				damagesDataObject.setCurrentIndex(-1);
-
-				// If the RegisteredFix Control Label is checked then it will exist in the record object
-				let newJob: DamagesRecord | false;
-				if ("RegisteredFix" in record) {
-					newJob = await damagesDataObject.save({
-						...record,
-						RegisteredFix: new Date(),
-						RegisteredFixBy: af.userSession.login,
-					});
-				} else {
-					newJob = await damagesDataObject.save(record);
-				}
-
-				await new Promise((res) => setTimeout(res, 1500));
-
-				if (newJob) {
-					// Update ElementDamageID in attachments table
-					if (attachmentPrimKeys) {
-						await attachmentsDataObject.refreshDataSource();
-						const primKeyArray: string[] = attachmentPrimKeys.toString().split(",");
-
-						for (const primKey of primKeyArray) {
-							attachmentsDataObject.setCurrentIndex(
-								attachmentsDataObject.findIndex((record) => record.PrimKey === primKey),
-							);
-
-							if (attachmentsDataObject.getCurrentIndex() > -1) {
-								await attachmentsDataObject.save({
-									DamageID: newJob.ID,
-									ElementRef: newJob.ElementRef,
-									ProjectID: newJob.ProjectID,
-									ElementID: newJob.ElementID,
-									ElementNumber: newJob.ElementNumber,
-									Domain: formData.get("Domain")?.toString() ?? af.userSession.domain,
-									Damage: true,
-								});
-							}
-						}
-					}
-
-					submitReturn();
-					return;
-				} else {
-					setError(getLocalizedString("No job returned when creating new job."));
-					return;
-				}
-			}
-		} catch (error) {
-			submitReturn((error as Error).message);
-			return;
-		}
-	}
-
-	function submitReturn(error?: string) {
-		if (!error) {
-			fallBack();
-		} else {
-			setError(error);
-		}
-		setLoading(false);
-	}
-
-	return (
-		<PageContainer maxWidth="sm">
-			<PageTitle variant="h1" gutterBottom>
-				{getLocalizedString("New element damage")}
-			</PageTitle>
-
-			<AddElementDialog
-				open={addElementOpen}
-				mode="single"
-				onClose={() => setAddElementOpen(false)}
-				onAdd={handleAddElement}
-			/>
-			<form name={formName} ref={formRef} method="POST" onSubmit={handleSubmit} className="flow">
-				<DuplicateElementDamageDialog
-					open={duplicateDialog}
-					onClose={setDuplicateDialog}
-					record={duplicateRecords}
-					fallBack={fallBack}
-				/>
-
-				{error && (
-					<Alert severity="error" variant="filled">
-						{error}
-					</Alert>
-				)}
-
-				<DamageFormFields
-					editRecord={editRecord}
-					project={project}
-					elementRecord={elementRecord}
-					attachmentPrimKeys={[]}
-					elementID={elementID}
-					formName={formName}
-					handleAddElement={() => setAddElementOpen(true)}
-				/>
-
-				<Box display="flex" flexDirection="column">
-					<Typography variant="h3">{getLocalizedString("Pictures")}</Typography>
-					<FilePond
-						multiple
-						dataObject={currentAttachmentDataObject}
-						fields={{
-							DamageID: editRecord?.ID,
-							ElementID: editRecord?.ElementID,
-							ProjectID: editRecord?.ProjectID,
-							ElementRef: editRecord?.ElementRef,
-							Damage: true,
-						}}
-						onFileStart={() => editRecord ?? setUploadingFile(true)}
-						onFileProcessed={(_error, file) => setAttachmentPrimKeys([...attachmentPrimKeys, file.serverId])}
-						onFilesProcessed={() => setUploadingFile(false)}
-						onError={() => setUploadingFile(false)}
-					/>
-				</Box>
-
-				<RegisterFix
-					editRecord={editRecord}
-					damageDataObject={damagesDataObject}
-					fixedThisSession={fixedThisSession}
-					setFixedThisSession={setFixedThisSession}
-				/>
-
-				<Box display="flex" flexWrap={"wrap"} gap={2} justifyContent="flex-end">
-					{editRecord && <Button onClick={() => handleDelete(editRecord)}>{getLocalizedString("Delete")}</Button>}
-					<Button onClick={handleCancel}>{getLocalizedString("Cancel")}</Button>
-					<Button
-						loading={loading || uploadingFile}
-						loadingPosition="start"
-						startIcon={<Add />}
-						type="submit"
-						variant="contained"
-					>
-						{editRecord ? getLocalizedString("Save changes") : getLocalizedString("Register damage")}
-					</Button>
-				</Box>
-			</form>
-		</PageContainer>
-	);
-}