@olenbetong/synergi-react 2.2.3 → 2.3.1

package/es/components/FilePond.d.ts

@@ -8,10 +8,11 @@ export { registerPlugin, FileStatus };
 type FilePondProps<T extends Record<string, unknown>> = React.HTMLProps<HTMLInputElement> & {
     dataObject: DataObject<T>;
     fields: Partial<T>;
-    onFileStart: () => void;
-    onFileProcessed: (error: FilePondErrorDescription | null, file: FilePondFile) => void;
-    onFilesProcessed: () => void;
-    onError: () => void;
+    onUploadStart: () => void;
+    onFileUploaded: (error: FilePondErrorDescription | null, file: FilePondFile) => void;
+    onFinishedUploads: () => void;
+    onError: (error: string) => void;
+    onFileRemoved?: (primKey: string) => void;
     /**
      * If the file should be uploaded to a blob field, set the field name here
      */
@@ -28,6 +29,8 @@ type FilePondProps<T extends Record<string, unknown>> = React.HTMLProps<HTMLInpu
      * Options to pass to FilePond
      */
     filePondOptions?: Partial<FilePondOptions>;
+    attachmentPrimKeys?: string[];
+    whereClause?: string;
 };
 type FileStoreDataObjectRecord = {
     PrimKey: string;
@@ -38,4 +41,4 @@ type FileStoreDataObjectRecord = {
     Damage: boolean;
     DamageID: number | null;
 };
-export declare function FilePond<T extends FileStoreDataObjectRecord>({ dataObject, fields, onFileStart, onFileProcessed, onFilesProcessed, onError, fieldName, filePondOptions, primKey, inputRef: inputRefProp, ...props }: FilePondProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function FilePond<T extends FileStoreDataObjectRecord>({ dataObject, fields, onUploadStart, onFileUploaded, onFinishedUploads, onFileRemoved, onError, fieldName, filePondOptions, primKey, attachmentPrimKeys, whereClause, inputRef: inputRefProp, ...props }: FilePondProps<T>): import("react/jsx-runtime").JSX.Element;

package/es/components/FilePond.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css";
 import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
 import "filepond/dist/filepond.css";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import { useData } from "@olenbetong/appframe-react";
+import { useData, useFetchData } from "@olenbetong/appframe-react";
 import { create, FileStatus, registerPlugin, } from "filepond";
 import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
 import FilePondPluginImagePreview from "filepond-plugin-image-preview";
 import FilePondPluginImageResize from "filepond-plugin-image-resize";
 import FilePondPluginImageTransform from "filepond-plugin-image-transform";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 export { registerPlugin, FileStatus };
 registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImageResize, FilePondPluginImagePreview, FilePondPluginImageTransform);
 let isMostLikelyMobile = navigator.userAgent.match(/Android/i) ||
@@ -57,10 +57,26 @@ const labels = {
     imageValidateSizeLabelExpectedMinResolution: getLocalizedString("Minimum resolution is {minResolution}"),
     imageValidateSizeLabelExpectedMaxResolution: getLocalizedString("Maximum resolution is {maxResolution}"),
 };
-export function FilePond({ dataObject, fields, onFileStart, onFileProcessed, onFilesProcessed, onError, fieldName, filePondOptions, primKey, inputRef: inputRefProp, ...props }) {
+function getFileUrl(dataObject, fieldName, primKey, action = "upload") {
+    let url = action === "upload"
+        ? dataObject.dataHandler.getUploadUrl()
+        : dataObject.dataHandler.getFileStoreURL(primKey ?? "", fieldName ?? "");
+    if (action === "upload") {
+        url += "/";
+    }
+    return url?.replaceAll("//", "/") ?? "";
+}
+export function FilePond({ dataObject, fields, onUploadStart, onFileUploaded, onFinishedUploads, onFileRemoved, onError, fieldName, filePondOptions, primKey, attachmentPrimKeys, whereClause, inputRef: inputRefProp, ...props }) {
     let inputRef = useRef(null);
     let pondRef = useRef(null);
-    let files = useData(dataObject);
+    let filesData = useData(dataObject);
+    let { data: filesFetched } = useFetchData(dataObject, whereClause ?? "1=2");
+    let files = useMemo(() => {
+        if (whereClause) {
+            return filesFetched;
+        }
+        return filesData;
+    }, [whereClause, filesFetched, filesData]);
     let clearFilesRef = useRef(false);
     useEffect(() => {
         return () => {
@@ -82,6 +98,7 @@ export function FilePond({ dataObject, fields, onFileStart, onFileProcessed, onF
                     PrimKey: source,
                 });
                 if (result) {
+                    onFileRemoved?.(source);
                     load();
                 }
                 else {
@@ -95,10 +112,6 @@ export function FilePond({ dataObject, fields, onFileStart, onFileProcessed, onF
                     "Failed to delete file on server but no error was returned.");
             }
         }
-        let uploadUrl = dataObject.dataHandler.getUploadUrl({ fieldName, primKey });
-        if (!uploadUrl) {
-            throw new Error("DataHandler does not support file uploads.");
-        }
         let options = {
             allowMultiple: Boolean(props.multiple),
             allowImageResize: true,
@@ -107,21 +120,34 @@ export function FilePond({ dataObject, fields, onFileStart, onFileProcessed, onF
             imageResizeTargetHeight: 2400,
             imageResizeUpscale: false,
             ...labels,
-            onaddfilestart: () => onFileStart(),
-            onprocessfile: (error, file) => onFileProcessed(error, file),
-            onprocessfiles: () => onFilesProcessed(),
-            onerror: () => onError(),
-            beforeRemoveFile: (_file) => {
+            onaddfilestart: (file) => {
+                if (file.status !== 5 && file.status !== 6 && file.status !== 10) {
+                    onUploadStart();
+                }
+            },
+            onprocessfile: (error, file) => {
+                onFileUploaded(error, file);
+                let refFiles = pondRef.current?.getFiles();
+                let found = refFiles?.find((file) => file.status !== 2 && file.status !== 5 && file.status !== 6 && file.status !== 10);
+                if (found === undefined) {
+                    onFinishedUploads();
+                }
+            },
+            onprocessfiles: () => onFinishedUploads(),
+            onerror: (error) => onError(error.body),
+            beforeRemoveFile: () => {
                 if (confirm(getLocalizedString("Are you sure you want to remove this file?"))) {
                     return true;
                 }
                 return false;
             },
             server: {
+                load: getFileUrl(dataObject, fieldName, primKey, "view"),
+                restore: getFileUrl(dataObject, fieldName, primKey, "view"),
                 revert: removeUploadedFile,
                 remove: removeUploadedFile,
                 process: {
-                    url: uploadUrl,
+                    url: getFileUrl(dataObject, fieldName),
                     ondata: (formData) => {
                         let masterChildCriteria = dataObject.getParameter("masterChildCriteria");
                         let allFields = { ...masterChildCriteria, ...fields };
@@ -148,13 +174,14 @@ export function FilePond({ dataObject, fields, onFileStart, onFileProcessed, onF
         props.multiple,
         fields,
         fieldName,
+        primKey,
         inputRefProp,
         filePondOptions,
         onError,
-        onFileProcessed,
-        onFileStart,
-        onFilesProcessed,
-        primKey,
+        onFileUploaded,
+        onUploadStart,
+        onFinishedUploads,
+        onFileRemoved,
     ]);
     useEffect(() => {
         if (pondRef.current) {
@@ -174,5 +201,5 @@ export function FilePond({ dataObject, fields, onFileStart, onFileProcessed, onF
             clearFilesRef.current = false;
         };
     }, [files]);
-    return (_jsx("div", { className: "filepond--wrapper", children: _jsx("input", { type: "file", ...props, name: "File", ref: inputRefProp ?? inputRef }) }));
+    return (_jsxs("div", { className: "filepond--wrapper", children: [attachmentPrimKeys && _jsx("input", { type: "hidden", name: "AttachmentPrimkeys", value: attachmentPrimKeys }), _jsx("input", { type: "file", ...props, name: "File", ref: inputRefProp ?? inputRef })] }));
 }

package/es/elements/ElementDamage/DamageFormButtons.d.ts

@@ -0,0 +1,9 @@
+type DamageFormButtonsProps = {
+    isEdit: boolean;
+    loading: boolean;
+    uploadingFile: boolean;
+    handleDelete: () => void;
+    handleCancel: () => void;
+};
+export declare function DamageFormButtonsProps({ isEdit, loading, uploadingFile, handleDelete, handleCancel, }: DamageFormButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/DamageFormButtons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Add from "@mui/icons-material/Add";
+import { Button } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+export function DamageFormButtonsProps({ isEdit, loading, uploadingFile, handleDelete, handleCancel, }) {
+    return (_jsxs(_Fragment, { children: [isEdit && _jsx(Button, { onClick: handleDelete, children: getLocalizedString("Delete") }), _jsx(Button, { onClick: handleCancel, children: getLocalizedString("Cancel") }), _jsx(Button, { loading: loading || uploadingFile, loadingPosition: "start", startIcon: _jsx(Add, {}), type: "submit", variant: "contained", children: isEdit ? getLocalizedString("Save changes") : getLocalizedString("Register damage") })] }));
+}

package/es/elements/ElementDamage/DescriptionInput.d.ts

@@ -0,0 +1,14 @@
+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 declare function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChange }: DescriptionInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/DescriptionInput.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useRef, useState } from "react";
+export function DescriptionInput({ value, defaultValue, onCopyPrevDamage, onChange }) {
+    let initializedRef = useRef(false);
+    let [input, setInput] = useState(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) {
+        onChange?.(value);
+        setInput(value);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(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: true, required: true, slotProps: { inputLabel: { shrink: true } } }), _jsx(Button, { variant: "contained", onClick: handleCopyPrevDamage, children: getLocalizedString("Copy previous damage") }), _jsx(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: true, renderInput: (params) => (_jsx(TextField, { name: "Description", required: true, ...params, label: getLocalizedString("Description") })) }), _jsx(TextField, { name: "Cause", id: "NewElementDamage_Cause", value: inputValue?.Cause ?? "", onChange: (event) => handleOnChange({ ...inputValue, Cause: event.currentTarget.value }), label: getLocalizedString("Cause"), fullWidth: true }), _jsx(TextField, { name: "Action", id: "NewElementDamage_Action", value: inputValue?.Action ?? "", onChange: (event) => handleOnChange({ ...inputValue, Action: event.currentTarget.value }), label: getLocalizedString("Action"), fullWidth: true })] }));
+}

package/es/elements/{ElementDamageForm/DuplicateDamage/DuplicateElementDamageDialog.d.ts → ElementDamage/DuplicateDamage/DublicateElementDamageDialog.d.ts}

@@ -1,9 +1,10 @@
 import type { DamagesRecord } from "../../data";
 type DuplicateElementDamageDialogProps = {
     open: boolean;
-    onClose: (value: boolean) => void;
+    onClose: () => void;
     record: DamagesRecord[];
-    fallBack: () => void;
+    onRegisterAnyway: () => void;
+    loading: boolean;
 };
-export declare function DuplicateElementDamageDialog({ open, onClose, record, fallBack }: DuplicateElementDamageDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function DuplicateElementDamageDialog({ open, onClose, record, onRegisterAnyway, loading, }: DuplicateElementDamageDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/elements/ElementDamage/DuplicateDamage/DublicateElementDamageDialog.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { ElementDamagesHeader, ElementDamagesItem } from "./DesktopView";
+import { DuplicatePhoneViewItem } from "./PhoneView";
+export function DuplicateElementDamageDialog({ open, onClose, record, onRegisterAnyway, loading, }) {
+    let matches = useMediaQuery(theme.breakpoints.up("lg"));
+    let backgroundColor = "#e9ebee";
+    return (_jsxs(Dialog, { open: open, onClose: onClose, fullWidth: true, fullScreen: !matches, children: [_jsx(DialogTitle, { sx: { backgroundColor: backgroundColor }, children: getLocalizedString("This element has one or more unfixed registered damage") }), _jsx(DialogContent, { sx: { backgroundColor: backgroundColor }, children: _jsx(Grid, { container: true, children: matches ? (_jsxs(_Fragment, { children: [_jsx(ElementDamagesHeader, {}), record.map((record) => (_jsx(ElementDamagesItem, { record: record }, record.PrimKey)))] })) : (_jsx("div", { className: "flow", style: { width: "100%" }, children: record.map((record) => (_jsx(DuplicatePhoneViewItem, { record: record }, record.PrimKey))) })) }) }), _jsxs(DialogActions, { sx: { backgroundColor: backgroundColor }, children: [_jsx(Button, { onClick: onClose, children: getLocalizedString("Cancel") }), _jsx(Button, { startIcon: _jsx(Add, {}), variant: "contained", type: "submit", onClick: onRegisterAnyway, loading: loading, loadingPosition: "start", children: getLocalizedString("Register damage anyway") })] })] }));
+}

package/es/elements/ElementDamage/DuplicateDamage/index.d.ts

@@ -0,0 +1,36 @@
+import { type DamagesRecord } from "../../data";
+import type { Element } from "../../ElementLookup";
+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 declare const DuplicateElementDamage: import("react").ForwardRefExoticComponent<DuplicateElementDamageProps & import("react").RefAttributes<DuplicateElementDamageHandle>>;

package/es/elements/ElementDamage/DuplicateDamage/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDataWithFilter } from "@olenbetong/appframe-react";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import { dsDamagesDuplicateCheck } from "../../data";
+import { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+export { DuplicateElementDamageDialog } from "./DublicateElementDamageDialog";
+export const DuplicateElementDamage = forwardRef(function DuplicateElementDamage({ element, open: controlledOpen, onOpenChange, disableCheck = false, loading = false, onRegisterAnyway, }, ref) {
+    let [record, setRecord] = useState([]);
+    let [uncontrolledOpen, setUncontrolledOpen] = useState(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() {
+        // 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) {
+        setUncontrolledOpen(value);
+        onOpenChange?.(value);
+    }
+    useImperativeHandle(ref, () => ({
+        onClose: () => setUncontrolledOpen(false),
+        checkDuplicate: () => runDuplicateCheck(),
+        record: record,
+    }));
+    return (_jsx(DuplicateElementDamageDialog, { open: open, onClose: () => handleOpenChange(false), record: record, onRegisterAnyway: onRegisterAnyway ?? (() => { }), loading: loading ?? false }));
+});

package/es/elements/ElementDamage/ElementNumberTextField.d.ts

@@ -0,0 +1,10 @@
+import { type SxProps, type Theme } from "@mui/material";
+type ElementNumberTextFieldProps = {
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    sx?: SxProps<Theme>;
+};
+export declare function ElementNumberTextField({ value, defaultValue, onChange, disabled, sx }: ElementNumberTextFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/ElementNumberTextField.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useState } from "react";
+export function ElementNumberTextField({ value, defaultValue, onChange, disabled, sx }) {
+    let [elementNumber, setElementNumber] = useState(defaultValue ?? "");
+    let elementNumberValue = value === undefined ? elementNumber : value;
+    useEffect(() => {
+        if (value === undefined && defaultValue) {
+            setElementNumber(defaultValue);
+        }
+    }, [defaultValue, value]);
+    function handleChange(value) {
+        onChange?.(value);
+        setElementNumber(value);
+    }
+    return (_jsx(TextField, { name: "ElementNumber", id: "NewElementDamage_ElementNr", value: elementNumberValue, onChange: (event) => handleChange(event.currentTarget.value), label: getLocalizedString("Element number"), fullWidth: true, autoComplete: "off", disabled: disabled ?? false, sx: { ...sx } }));
+}

package/es/elements/ElementDamage/HiddenDamageFields.d.ts

@@ -0,0 +1,6 @@
+type HiddenDamageFieldsProps = {
+    primKey: string;
+    ID: number;
+};
+export declare function HiddenDamageFields({ primKey, ID }: HiddenDamageFieldsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/HiddenDamageFields.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function HiddenDamageFields({ primKey, ID }) {
+    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: "PrimKey", value: primKey }), _jsx("input", { type: "hidden", name: "ID", value: ID })] }));
+}

package/es/elements/ElementDamage/RegisterFix.d.ts

@@ -0,0 +1,14 @@
+type RegisterFixType = {
+    ID: number;
+    RegisteredFixFullName: string | null;
+    RegisteredFix: Date | null;
+    RegisteredFixBy: string | null;
+};
+type RegisterFixProps = {
+    value?: RegisterFixType | null;
+    defaultValue?: RegisterFixType | null;
+    onFix?: (ID: number) => void;
+    edit?: boolean;
+};
+export declare function RegisterFix({ value, defaultValue, onFix, edit }: RegisterFixProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/RegisterFix.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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",
+});
+export function RegisterFix({ value, defaultValue, onFix, edit }) {
+    let [loading, setLoading] = useState(false);
+    let initializedRef = useRef(false);
+    let [fix, setFix] = useState(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 }));
+                setFix({ ...record.Table[0] });
+                setLoading(false);
+                onFix?.(fixValue?.ID ?? -1);
+            }
+        }
+        catch (error) {
+            alert(error.message);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [edit ? (_jsx(Button, { loading: loading, loadingPosition: "end", endIcon: _jsx(CheckIcon, {}), onClick: handleRegisterFix, disabled: !!fixValue?.RegisteredFix, variant: "contained", children: getLocalizedString("Register fix") })) : (_jsx(FormControlLabel, { control: _jsx(Checkbox, {}), label: getLocalizedString("Register fixed"), name: "RegisteredFix", id: "NewElementDamage_RegisteredFix" })), fixValue?.RegisteredFix && (_jsx(Typography, { mb: 1.5, color: "text.secondary", children: localize `Registered fix by ${fixValue.RegisteredFixFullName ?? fixValue.RegisteredFixBy} on the ${formatter.format(fixValue.RegisteredFix)}` }))] }));
+}

package/es/elements/ElementDamage/SubmitButtons.d.ts

@@ -0,0 +1,20 @@
+import { type SxProps, type Theme } from "@mui/material";
+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 declare function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }: SubmitButtonsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/SubmitButtons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add from "@mui/icons-material/Add";
+import { Box, Button } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+export function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }) {
+    return (_jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 2, justifyContent: "flex-end", ...sx }, children: [edit && _jsx(Button, { onClick: onDelete, children: getLocalizedString("Delete") }), _jsx(Button, { onClick: onCancel, children: getLocalizedString("Cancel") }), _jsx(Button, { loading: loading, loadingPosition: "start", startIcon: _jsx(Add, {}), type: "submit", variant: "contained", onClick: onSubmit, children: edit ? getLocalizedString("Save changes") : getLocalizedString("Register damage") })] }));
+}

package/es/elements/ElementDamage/TransportElementSelect.d.ts

@@ -0,0 +1,7 @@
+import type { TransportElementsRecord } from "../data/dsTransportElements.js";
+type TransportElementSelectProps = {
+    elements: TransportElementsRecord[];
+    onSelect: (element: TransportElementsRecord) => void;
+};
+export declare function TransportElementSelect({ elements, onSelect }: TransportElementSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/elements/ElementDamage/TransportElementSelect.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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";
+export function TransportElementSelect({ elements, onSelect }) {
+    let [anchorEl, setAnchorEl] = useState(null);
+    let open = !!anchorEl;
+    let [selected, setSelected] = useState(null);
+    function handleChange(element) {
+        setAnchorEl(null);
+        onSelect(element);
+        setSelected(element);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { id: "select_element", variant: "contained", endIcon: _jsx(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), children: selected ? `${selected.ElementID} - ${selected.Name}` : getLocalizedString("Select element") }), _jsx(Menu, { id: "menu_element", anchorEl: anchorEl, open: open, onClose: () => setAnchorEl(null), children: elements.map((element) => (_jsx(MenuItem, { onClick: () => handleChange(element), children: _jsxs(ListItemText, { children: [element.ElementID, " - ", element.Name] }) }, element.PrimKey))) })] }));
+}

package/es/elements/ElementLookup.d.ts

@@ -0,0 +1,20 @@
+import { type RefObject } from "react";
+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 declare function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }: ElementLookupProps): import("react/jsx-runtime").JSX.Element;

package/es/elements/ElementLookup.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from "@mui/icons-material/Search";
+import { IconButton, TextField } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useEffect, useImperativeHandle, useState } from "react";
+import { ElementLookupDialog } from "./ElementLookupDialog";
+export function ElementLookup({ value, defaultValue, ref, openLookupDialogIcon, onChange }) {
+    let [openElementLookupDialog, setOpenElementLookupDialog] = useState(false);
+    let [element, setElement] = useState(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) {
+        onChange?.(addElement.element);
+        setElement(addElement.element);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ElementLookupDialog, { open: openElementLookupDialog, mode: "single", onClose: () => setOpenElementLookupDialog(false), onAdd: handleAddElement }), _jsx("input", { type: "hidden", name: "ProjectID", value: elementValue?.ProjectID ?? "" }), _jsx("input", { type: "hidden", name: "ElementRef", value: elementValue?.PrimKey ?? "" }), _jsx(TextField, { id: "NewElementDamge_Project", value: elementValue ? `${elementValue.ProjectID}: ${elementValue.ProjectName}` : "", label: getLocalizedString("Project"), fullWidth: true, required: true, autoComplete: "off", slotProps: { htmlInput: { readOnly: true } } }), _jsx(TextField, { name: "ElementID", id: "NewElementDamage_ElementID", value: elementValue ? elementValue.ElementID : "", label: getLocalizedString("Element ID"), fullWidth: true, autoComplete: "off", slotProps: {
+                    htmlInput: { readOnly: true },
+                    input: {
+                        endAdornment: openLookupDialogIcon ? (_jsx(IconButton, { onClick: () => setOpenElementLookupDialog(true), children: _jsx(SearchIcon, {}) })) : undefined,
+                    },
+                } })] }));
+}

package/es/elements/{AddElementDialog → ElementLookupDialog}/Manual/ManualForm.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { ProjectSelect } from "../../ProjectSelect";
 import { getElement } from "../getElement";
 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 function AddElementManualForm({ onAdd, mode, defaultProject }) {
+    let id = useId();
     let buttonRef = useRef(null);
     let [working, setWorking] = useState(false);
     let [elementId, setElementId] = useState("");
@@ -15,6 +16,7 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }) {
     async function handleSubmit(evt) {
         try {
             evt.preventDefault();
+            evt.stopPropagation();
             let formData = new FormData(evt.target);
             let elements = formData.get("ElementID");
             let domain = formData.get("Domain");
@@ -42,5 +44,5 @@ export function AddElementManualForm({ onAdd, mode, defaultProject }) {
             alert(error.message);
         }
     }
-    return (_jsxs("form", { onSubmit: handleSubmit, method: "post", children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: 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.") }), _jsx(ProjectSelect, { onChange: (project) => (project ? setProject(project) : setProject(null)), value: project, id: "AddElement_Project" }), _jsx(TextField, { variant: "filled", fullWidth: true, autoComplete: "off", margin: "normal", name: "ElementID", id: "AddElement_ElementID", label: getLocalizedString("Element ID"), value: elementId, onChange: (evt) => setElementId(evt.target.value) }), _jsx(Button, { ref: buttonRef, color: "primary", variant: "contained", size: "large", type: "submit", disabled: !isElementsOnly.test(elementId) || working, loading: working, loadingPosition: "end", endIcon: _jsx(Add, {}), children: getLocalizedString("Add") })] }));
+    return (_jsxs("form", { id: id, onSubmit: handleSubmit, method: "post", children: [_jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: 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.") }), _jsx(ProjectSelect, { onChange: (project) => (project ? setProject(project) : setProject(null)), value: project, id: "AddElement_Project" }), _jsx(TextField, { variant: "filled", fullWidth: true, autoComplete: "off", margin: "normal", name: "ElementID", id: "AddElement_ElementID", label: getLocalizedString("Element ID"), value: elementId, onChange: (evt) => setElementId(evt.target.value) }), _jsx(Button, { form: id, ref: buttonRef, color: "primary", variant: "contained", size: "large", type: "submit", disabled: !isElementsOnly.test(elementId) || working, loading: working, loadingPosition: "end", endIcon: _jsx(Add, {}), children: getLocalizedString("Add") })] }));
 }

package/es/elements/{AddElementDialog → ElementLookupDialog}/getElement.d.ts

@@ -1,5 +1,6 @@
 export type AddElementSource = "manual" | "camera-barcode" | "loading-list" | "hid-barcode" | "hid-rfid";
 export type ElementDetails = {
+    Domain: string;
     PrimKey: string;
     Created: Date;
     ProjectID: string;

package/es/elements/{AddElementDialog → ElementLookupDialog}/getElement.js

@@ -6,6 +6,7 @@ const elementsDataHandler = new DataProviderHandlerAPI({
     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" },