@olenbetong/synergi-react 2.2.3 → 2.3.1

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

@@ -5,20 +5,20 @@ export type AddElement = {
     scanTime?: number;
 };
 type InitialTabProps = "camera" | "scanner" | "manual";
-export type AddElementDialogSharedProps = {
+export type ElementLookupDialogSharedProps = {
     open: boolean;
     onClose: () => void;
     initialTab?: InitialTabProps | null;
     useSearch?: boolean;
 };
-export type AddElementDialogSingleModeProps = AddElementDialogSharedProps & {
+export type ElementLookupDialogSingleModeProps = ElementLookupDialogSharedProps & {
     mode: "single" | "search";
     onAdd: (element: AddElement) => Promise<void>;
 };
-export type AddElementDialogMultiModeProps = AddElementDialogSharedProps & {
+export type ElementLookupDialogMultiModeProps = ElementLookupDialogSharedProps & {
     mode: "multi";
     onAdd: (element: AddElement[]) => Promise<void>;
 };
-export type AddElementDialogProps = AddElementDialogSingleModeProps | AddElementDialogMultiModeProps;
-export declare function AddElementDialog(props: AddElementDialogProps): import("react/jsx-runtime").JSX.Element;
+export type ElementLookupDialogProps = ElementLookupDialogSingleModeProps | ElementLookupDialogMultiModeProps;
+export declare function ElementLookupDialog(props: ElementLookupDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,7 +15,7 @@ import { AddElementHIDScanner } from "./HIDScanner";
 import { AddElementManualForm } from "./Manual/ManualForm";
 import { useBeeper } from "./utils/beep";
 import Giai from "./utils/Giai";
-export function AddElementDialog(props) {
+export function ElementLookupDialog(props) {
     let { open, onClose, initialTab } = props;
     let [tab, setTab] = useState("camera");
     let [elements, setElements] = useState([]);
@@ -67,6 +67,9 @@ export function AddElementDialog(props) {
             alert(error.message);
         }
     }
+    if (tab === "manual" && props.mode === "search") {
+        tab = "camera";
+    }
     return (_jsx(ResponsiveDialog, { open: open, onClose: onClose, slotProps: {
             paper: { sx: { overflow: "hidden" } },
         }, children: _jsxs(Box, { display: "flex", flexDirection: "column", maxHeight: "100%", overflow: "hidden", flexGrow: 1, children: [_jsxs(Tabs, { value: tab, onChange: (_, newTab) => setTab(newTab), variant: "fullWidth", sx: { flexShrink: 0 }, children: [props.mode !== "search" && _jsx(Tab, { icon: _jsx(Edit, {}), label: getLocalizedString("Manual"), value: "manual" }), _jsx(Tab, { icon: _jsx(TapAndPlay, {}), label: getLocalizedString("Scanner"), value: "scanner" }), _jsx(Tab, { icon: _jsx(QrCodeScanner, {}), label: getLocalizedString("Camera"), value: "camera" })] }), tab === "camera" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(BarcodeScanner, { onRead: (element) => handleElementAdd(element, "camera-barcode") }) })), tab === "manual" && (_jsx(Box, { p: 2, children: _jsx(AddElementManualForm, { onAdd: (element) => handleElementAdd(element, "manual") }) })), tab === "scanner" && (_jsx(Box, { flexBasis: "12rem", flexGrow: 1, flexShrink: 2, children: _jsx(AddElementHIDScanner, { onScan: (element) => handleElementAdd(element, element.startsWith(Giai.BARCODE_PREFIX) ? "hid-barcode" : "hid-rfid") }) })), _jsxs(Box, { flex: "3 1 14rem", overflow: "auto", children: [props.mode === "multi" && (_jsx(Alert, { icon: false, severity: "info", sx: { justifyContent: "center", py: 0, position: "sticky", top: 0, zIndex: 1 }, slotProps: {

package/es/elements/ProjectSelect.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Autocomplete, ListItem, ListItemText, TextField } from "@mui/material";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useDataWithFilter, useDebounce } from "@olenbetong/appframe-react";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { dsProjects } from "./data/dsProjects";
 import { dsReportProjects } from "./data/dsReportProjects";
 export function ProjectSelect({ className, disabled, id, names, onChange, readOnly, required, defaultValue, value, label, sx, report, }) {
@@ -10,7 +10,9 @@ export function ProjectSelect({ className, disabled, id, names, onChange, readOn
     let [query, setQuery] = useState("");
     let search = useDebounce(query);
     let projects = useDataWithFilter(report ? dsReportProjects : dsProjects, search ? `[SearchColumn] LIKE '%${search}%'` : "");
+    let highlightRef = useRef(null);
     function handleSelect(value) {
+        highlightRef.current = null;
         if (!disabled && !readOnly) {
             if (onChange) {
                 onChange(value);
@@ -28,7 +30,12 @@ export function ProjectSelect({ className, disabled, id, names, onChange, readOn
         });
         return new Set([...nameCount.entries()].filter(([, count]) => count > 1).map(([name]) => name));
     }, [projects]);
-    return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: sx, autoHighlight: true, className: className, options: projects, disabled: disabled, getOptionLabel: (option) => option?.ProjectID !== undefined ? `${option.ProjectID}: ${option.ProjectName}` : "", isOptionEqualToValue: (option, value) => option.Domain === value.Domain && option.ProjectID === value.ProjectID, clearOnEscape: true, onChange: (_, value) => handleSelect(value), onClose: () => setQuery(""), value: value !== undefined ? value : selected, renderInput: (params) => (_jsx(TextField, { ...params, label: label ? label : getLocalizedString("Project ID"), id: id ?? "ProjectLookup", fullWidth: true, inputProps: { readOnly, ...params.inputProps }, autoComplete: "off", variant: "filled", required: required, onChange: (evt) => setQuery(evt.target.value), value: query })), renderOption: (props, option) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: sx, autoHighlight: true, autoSelect: true, clearOnEscape: true, className: className, options: projects, disabled: disabled, getOptionLabel: (option) => option?.ProjectID !== undefined ? `${option.ProjectID}: ${option.ProjectName}` : "", isOptionEqualToValue: (option, value) => option.Domain === value.Domain && option.ProjectID === value.ProjectID, onChange: (_, value) => handleSelect(value), onClose: () => setQuery(""), value: value !== undefined ? value : selected, renderInput: (params) => (_jsx(TextField, { ...params, label: label ? label : getLocalizedString("Project ID"), id: id ?? "ProjectLookup", fullWidth: true, slotProps: {
+                        htmlInput: {
+                            readOnly,
+                            ...params.inputProps,
+                        },
+                    }, autoComplete: "off", variant: "filled", required: required, onChange: (evt) => setQuery(evt.target.value), value: query })), renderOption: (props, option) => {
                     let isDuplicated = option.ProjectName && duplicatedNames.has(option.ProjectName);
                     return (_jsx(ListItem, { ...props, children: _jsx(ListItemText, { primary: isDuplicated ? `${option.ProjectName} (${option.Domain})` : option.ProjectName, secondary: option.ProjectID }) }));
                 } }), _jsx("input", { name: names?.domain ?? "Domain", type: "hidden", value: current?.Domain ?? "" }), _jsx("input", { name: names?.name ?? "ProjectName", type: "hidden", value: current?.ProjectName ?? "" }), _jsx("input", { name: names?.projectId ?? "ProjectID", type: "hidden", value: current?.ProjectID ?? "" })] }));

package/es/elements/data/dsDamages.d.ts

@@ -17,8 +17,8 @@ export type DamagesRecord = {
     Action: string | null;
     RegisteredFix: Date | null;
     RegisteredFixBy: string | null;
+    RegisteredFixFullName: string | null;
     Cause: string | null;
-    FullName: string | null;
     SearchColumn: string;
     ElementRef: string | null;
 };

package/es/elements/data/dsDamages.js

@@ -100,12 +100,12 @@ export const dsDamages = generateApiDataObject({
             nullable: true,
         },
         {
-            name: "Cause",
+            name: "RegisteredFixFullName",
             type: "string",
             nullable: true,
         },
         {
-            name: "FullName",
+            name: "Cause",
             type: "string",
             nullable: true,
         },

package/es/elements/data/dsElements.d.ts

@@ -1,6 +1,8 @@
 export type ElementsRecord = {
     PrimKey: string;
     ProjectID: string;
+    ProjectName: string;
     ElementID: string | null;
+    Name: string | null;
 };
 export declare const dsElements: import("@olenbetong/appframe-data").DataObject<ElementsRecord>;

package/es/elements/data/dsElements.js

@@ -4,7 +4,7 @@ af resources generate aviw_Production_Elements_All \
  --id dsElements \
  --types \
  --max-records 100 \
- --fields PrimKey,ProjectID,ElementID
+ --fields PrimKey,ProjectID,ElementID,ProjectName,Name
 */
 import { generateApiDataObject } from "@olenbetong/appframe-data";
 export const dsElements = generateApiDataObject({
@@ -25,11 +25,21 @@ export const dsElements = generateApiDataObject({
             type: "string",
             nullable: false,
         },
+        {
+            name: "ProjectName",
+            type: "string",
+            nullable: false,
+        },
         {
             name: "ElementID",
             type: "string",
             nullable: true,
         },
+        {
+            name: "Name",
+            type: "string",
+            nullable: true,
+        },
     ],
     parameters: {
         maxRecords: 100,

package/es/elements/data/dsTransportElements.d.ts

@@ -0,0 +1,10 @@
+export type TransportElementsRecord = {
+    PrimKey: string;
+    DeliveryTicketID: number;
+    Domain: string;
+    ProjectID: string;
+    ProjectName: string;
+    ElementID: string | null;
+    Name: string | null;
+};
+export declare const dsTransportElements: import("@olenbetong/appframe-data").DataObject<TransportElementsRecord>;

package/es/elements/data/dsTransportElements.js

@@ -0,0 +1,57 @@
+/*
+auto-generated by CLI:
+af resources generate aviw_Fleet_DeliveryTickets_Elements \
+ --id dsTransportElements \
+ --types \
+ --max-records 100 \
+ --fields PrimKey,DeliveryTicketID,ProjectID,ProjectName,ElementID,Name,Domain
+*/
+import { generateApiDataObject } from "@olenbetong/appframe-data";
+export const dsTransportElements = generateApiDataObject({
+    resource: "aviw_Fleet_DeliveryTickets_Elements",
+    id: "dsTransportElements",
+    allowUpdate: false,
+    allowInsert: false,
+    allowDelete: false,
+    dynamicLoading: false,
+    fields: [
+        {
+            name: "PrimKey",
+            type: "string",
+            nullable: false,
+        },
+        {
+            name: "DeliveryTicketID",
+            type: "number",
+            nullable: false,
+        },
+        {
+            name: "Domain",
+            type: "string",
+            nullable: false,
+        },
+        {
+            name: "ProjectID",
+            type: "string",
+            nullable: false,
+        },
+        {
+            name: "ProjectName",
+            type: "string",
+            nullable: false,
+        },
+        {
+            name: "ElementID",
+            type: "string",
+            nullable: true,
+        },
+        {
+            name: "Name",
+            type: "string",
+            nullable: true,
+        },
+    ],
+    parameters: {
+        maxRecords: 100,
+    },
+});

package/es/elements/data/index.d.ts

@@ -3,5 +3,9 @@ export * from "./dsCurrentAttachment.js";
 export * from "./dsDamages.js";
 export * from "./dsDamagesDuplicateCheck.js";
 export * from "./dsElements.js";
-export * from "./procApproveDamage.js";
 export * from "./dsProjects.js";
+export * from "./procApproveDamage.js";
+export * from "./procDeleteAttachment.js";
+export * from "./procDeleteDamage.js";
+export * from "./procRemoveDamageFix.js";
+export * from "./procRestoreAttachments.js";

package/es/elements/data/index.js

@@ -3,5 +3,9 @@ export * from "./dsCurrentAttachment.js";
 export * from "./dsDamages.js";
 export * from "./dsDamagesDuplicateCheck.js";
 export * from "./dsElements.js";
-export * from "./procApproveDamage.js";
 export * from "./dsProjects.js";
+export * from "./procApproveDamage.js";
+export * from "./procDeleteAttachment.js";
+export * from "./procDeleteDamage.js";
+export * from "./procRemoveDamageFix.js";
+export * from "./procRestoreAttachments.js";

package/es/elements/data/procDeleteAttachment.d.ts

@@ -0,0 +1,2 @@
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export declare const procDeleteAttachment: ProcedureAPI<unknown, unknown>;

package/es/elements/data/procDeleteAttachment.js

@@ -0,0 +1,18 @@
+/*
+auto-generated by CLI:
+af resources generate astp_Production_ElementsDamages_DeleteAttachments \
+ --id procDeleteAttachment
+*/
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export const procDeleteAttachment = new ProcedureAPI({
+    procedureId: "astp_Production_ElementsDamages_DeleteAttachments",
+    parameters: [
+        {
+            name: "PrimKeyList",
+            type: "string",
+            hasDefault: false,
+            required: false,
+        },
+    ],
+    timeout: 30000,
+});

package/es/elements/data/procDeleteDamage.d.ts

@@ -0,0 +1,2 @@
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export declare const procDeleteDamage: ProcedureAPI<unknown, unknown>;

package/es/elements/data/procDeleteDamage.js

@@ -0,0 +1,18 @@
+/*
+auto-generated by CLI:
+af resources generate astp_Production_ElementsDamages_Delete \
+ --id procDeleteDamage
+*/
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export const procDeleteDamage = new ProcedureAPI({
+    procedureId: "astp_Production_ElementsDamages_Delete",
+    parameters: [
+        {
+            name: "ID",
+            type: "number",
+            hasDefault: false,
+            required: false,
+        },
+    ],
+    timeout: 30000,
+});

package/es/elements/data/procRemoveDamageFix.d.ts

@@ -0,0 +1,2 @@
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export declare const procRemoveDamageFix: ProcedureAPI<unknown, unknown>;

package/es/elements/data/procRemoveDamageFix.js

@@ -0,0 +1,18 @@
+/*
+auto-generated by CLI:
+af resources generate astp_Production_ElementsDamages_RemoveFix \
+ --id procRemoveDamageFix
+*/
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export const procRemoveDamageFix = new ProcedureAPI({
+    procedureId: "astp_Production_ElementsDamages_RemoveFix",
+    parameters: [
+        {
+            name: "ID",
+            type: "number",
+            hasDefault: false,
+            required: false,
+        },
+    ],
+    timeout: 30000,
+});

package/es/elements/data/procRestoreAttachments.d.ts

@@ -0,0 +1,2 @@
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export declare const procRestoreAttachments: ProcedureAPI<unknown, unknown>;

package/es/elements/data/procRestoreAttachments.js

@@ -0,0 +1,18 @@
+/*
+auto-generated by CLI:
+af resources generate astp_Production_ElementsDamages_RestoreAttachments \
+ --id procRestoreAttachments
+*/
+import { ProcedureAPI } from "@olenbetong/appframe-data";
+export const procRestoreAttachments = new ProcedureAPI({
+    procedureId: "astp_Production_ElementsDamages_RestoreAttachments",
+    parameters: [
+        {
+            name: "PrimKeyList",
+            type: "string",
+            hasDefault: false,
+            required: false,
+        },
+    ],
+    timeout: 30000,
+});

package/es/elements/index.d.ts

@@ -1,3 +1,9 @@
 export * from "./data/index.js";
-export * from "./AddElementDialog/index.js";
-export * from "./ElementDamageForm/index.js";
+export * from "./ElementDamage/DescriptionInput.js";
+export * from "./ElementDamage/DuplicateDamage/index.js";
+export * from "./ElementDamage/ElementNumberTextField.js";
+export * from "./ElementDamage/HiddenDamageFields.js";
+export * from "./ElementDamage/RegisterFix.js";
+export * from "./ElementDamage/SubmitButtons.js";
+export * from "./ElementLookup.js";
+export * from "./ElementLookupDialog/index.js";

package/es/elements/index.js

@@ -1,3 +1,9 @@
 export * from "./data/index.js";
-export * from "./AddElementDialog/index.js";
-export * from "./ElementDamageForm/index.js";
+export * from "./ElementDamage/DescriptionInput.js";
+export * from "./ElementDamage/DuplicateDamage/index.js";
+export * from "./ElementDamage/ElementNumberTextField.js";
+export * from "./ElementDamage/HiddenDamageFields.js";
+export * from "./ElementDamage/RegisterFix.js";
+export * from "./ElementDamage/SubmitButtons.js";
+export * from "./ElementLookup.js";
+export * from "./ElementLookupDialog/index.js";

package/es/index.d.ts

@@ -1,6 +1,7 @@
 export { Checkbox, type CheckboxProps } from "./components/Checkbox/index.js";
 export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
 export { DateNavigator } from "./components/DateNavigator/index.js";
+export * from "./components/FilePond.js";
 export { Card, LinkedList, LinkedListItem } from "./components/LinkedCardList/index.js";
 export { BannerImage as PageBannerImage, type BannerImageProps, PageBanner, type PageBannerProps, Tab as PageBannerTab, TabList as PageBannerTabList, type TabListProps as PageBannerTabListProps, type TabProps as PageBannerTabProps, Title as PageBannerTitle, type TitleProps as PageBannerTitleProps, } from "./components/PageBanner/index.js";
 export { Portal } from "./components/Portal/index.js";
@@ -9,5 +10,4 @@ export { Sidebar, type SidebarProps } from "./components/Sidebar/index.js";
 export { Spinner, type SpinnerProps } from "./components/Spinner/index.js";
 export { SplitContainer, type SplitContainerProps } from "./components/SplitContainer/index.js";
 export { ValueToggleGroup, type ValueToggleGroupProps } from "./components/ValueToggleGroup/index.js";
-export { ElementDamageForm } from "./elements/ElementDamageForm/index.js";
 export { useTranslation } from "./useTranslation/index.js";

package/es/index.js

@@ -1,6 +1,7 @@
 export { Checkbox } from "./components/Checkbox/index.js";
 export { CardColumn, CardDetail, CardLabel, CardStep, CardStepList, ColorCard } from "./components/ColorCard/index.js";
 export { DateNavigator } from "./components/DateNavigator/index.js";
+export * from "./components/FilePond.js";
 export { Card, LinkedList, LinkedListItem } from "./components/LinkedCardList/index.js";
 export { BannerImage as PageBannerImage, PageBanner, Tab as PageBannerTab, TabList as PageBannerTabList, Title as PageBannerTitle, } from "./components/PageBanner/index.js";
 export { Portal } from "./components/Portal/index.js";
@@ -9,5 +10,4 @@ export { Sidebar } from "./components/Sidebar/index.js";
 export { Spinner } from "./components/Spinner/index.js";
 export { SplitContainer } from "./components/SplitContainer/index.js";
 export { ValueToggleGroup } from "./components/ValueToggleGroup/index.js";
-export { ElementDamageForm } from "./elements/ElementDamageForm/index.js";
 export { useTranslation } from "./useTranslation/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/synergi-react",
-  "version": "2.2.3",
+  "version": "2.3.1",
   "description": "Standalone React component for SynergiWeb and Partner Portal",
   "type": "module",
   "exports": {
@@ -9,8 +9,8 @@
       "import": "./es/index.js"
     },
     "./elements": {
-      "types": "./es/features/elements/index.d.ts",
-      "import": "./es/features/elements/index.js"
+      "types": "./es/elements/index.d.ts",
+      "import": "./es/elements/index.js"
     }
   },
   "files": [
@@ -38,7 +38,7 @@
     "filepond-plugin-image-transform": "^3.8.7",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
-    "@olenbetong/appframe-core": "2.11.9"
+    "@olenbetong/appframe-core": "2.11.10"
   },
   "repository": {
     "type": "git",

package/src/components/FilePond.tsx

@@ -4,7 +4,7 @@ import "filepond/dist/filepond.css";
 
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
-import { useData } from "@olenbetong/appframe-react";
+import { useData, useFetchData } from "@olenbetong/appframe-react";
 
 import {
 	create,
@@ -20,7 +20,7 @@ import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orien
 import FilePondPluginImagePreview from "filepond-plugin-image-preview";
 import FilePondPluginImageResize from "filepond-plugin-image-resize";
 import FilePondPluginImageTransform from "filepond-plugin-image-transform";
-import { type RefObject, useEffect, useRef } from "react";
+import { type RefObject, useEffect, useMemo, useRef } from "react";
 
 export { registerPlugin, FileStatus };
 
@@ -82,10 +82,11 @@ const labels = {
 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
 	 */
@@ -102,8 +103,28 @@ type FilePondProps<T extends Record<string, unknown>> = React.HTMLProps<HTMLInpu
 	 * Options to pass to FilePond
 	 */
 	filePondOptions?: Partial<FilePondOptions>;
+	attachmentPrimKeys?: string[];
+	whereClause?: string;
 };
 
+function getFileUrl<T extends Record<string, unknown>>(
+	dataObject: DataObject<T>,
+	fieldName?: string,
+	primKey?: string,
+	action = "upload",
+) {
+	let url =
+		action === "upload"
+			? dataObject.dataHandler.getUploadUrl()
+			: dataObject.dataHandler.getFileStoreURL(primKey ?? "", fieldName ?? "");
+
+	if (action === "upload") {
+		url += "/";
+	}
+
+	return url?.replaceAll("//", "/") ?? "";
+}
+
 type FileStoreDataObjectRecord = {
 	PrimKey: string;
 	FileName: string | null;
@@ -117,19 +138,29 @@ type FileStoreDataObjectRecord = {
 export function FilePond<T extends FileStoreDataObjectRecord>({
 	dataObject,
 	fields,
-	onFileStart,
-	onFileProcessed,
-	onFilesProcessed,
+	onUploadStart,
+	onFileUploaded,
+	onFinishedUploads,
+	onFileRemoved,
 	onError,
 	fieldName,
 	filePondOptions,
 	primKey,
+	attachmentPrimKeys,
+	whereClause,
 	inputRef: inputRefProp,
 	...props
 }: FilePondProps<T>) {
 	let inputRef = useRef<HTMLInputElement>(null);
 	let pondRef = useRef<FilePondInstance | null>(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(() => {
@@ -154,6 +185,7 @@ export function FilePond<T extends FileStoreDataObjectRecord>({
 				} as Partial<T>);
 
 				if (result) {
+					onFileRemoved?.(source);
 					load();
 				} else {
 					error("Failed to delete file on server. Delete request returned false");
@@ -168,12 +200,6 @@ export function FilePond<T extends FileStoreDataObjectRecord>({
 			}
 		}
 
-		let uploadUrl = dataObject.dataHandler.getUploadUrl({ fieldName, primKey });
-
-		if (!uploadUrl) {
-			throw new Error("DataHandler does not support file uploads.");
-		}
-
 		let options: FilePondOptions = {
 			allowMultiple: Boolean(props.multiple),
 			allowImageResize: true,
@@ -182,11 +208,26 @@ export function FilePond<T extends FileStoreDataObjectRecord>({
 			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;
 				}
@@ -194,11 +235,14 @@ export function FilePond<T extends FileStoreDataObjectRecord>({
 				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 };
@@ -227,13 +271,14 @@ export function FilePond<T extends FileStoreDataObjectRecord>({
 		props.multiple,
 		fields,
 		fieldName,
+		primKey,
 		inputRefProp,
 		filePondOptions,
 		onError,
-		onFileProcessed,
-		onFileStart,
-		onFilesProcessed,
-		primKey,
+		onFileUploaded,
+		onUploadStart,
+		onFinishedUploads,
+		onFileRemoved,
 	]);
 
 	useEffect(() => {
@@ -259,6 +304,8 @@ export function FilePond<T extends FileStoreDataObjectRecord>({
 
 	return (
 		<div className="filepond--wrapper">
+			{attachmentPrimKeys && <input type="hidden" name="AttachmentPrimkeys" value={attachmentPrimKeys} />}
+
 			<input type="file" {...props} name="File" ref={inputRefProp ?? inputRef} />
 		</div>
 	);

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