diff --git a/packages/widgets/src/modals/embedded-app-edit-form.tsx b/packages/widgets/src/modals/embedded-app-edit-form.tsx new file mode 100644 index 000000000..20d0125af --- /dev/null +++ b/packages/widgets/src/modals/embedded-app-edit-form.tsx @@ -0,0 +1,80 @@ +"use client"; + +import { useImperativeHandle, useRef } from "react"; +import { Alert, Center, Loader, Stack } from "@mantine/core"; +import { IconInfoCircle } from "@tabler/icons-react"; + +import { clientApi } from "@homarr/api/client"; +import type { AppFormHandle } from "@homarr/forms-collection"; +import { AppForm } from "@homarr/forms-collection"; +import { showErrorNotification, showSuccessNotification } from "@homarr/notifications"; +import { useI18n } from "@homarr/translation/client"; + +export interface EmbeddedAppEditFormHandle { + submitIfDirty: () => void; +} + +interface EmbeddedAppEditFormProps { + appId: string; + handleRef: React.Ref; +} + +export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormProps) => { + const t = useI18n(); + const appFormRef = useRef(null); + const { data: app, isPending: isLoadingApp } = clientApi.app.byId.useQuery({ id: appId }); + + const { mutate, isPending: isMutating } = clientApi.app.update.useMutation({ + onSuccess: () => { + showSuccessNotification({ + title: t("app.page.edit.notification.success.title"), + message: t("app.page.edit.notification.success.message"), + }); + }, + onError: () => { + showErrorNotification({ + title: t("app.page.edit.notification.error.title"), + message: t("app.page.edit.notification.error.message"), + }); + }, + }); + + useImperativeHandle( + handleRef, + () => ({ + submitIfDirty: () => { + if (appFormRef.current?.isDirty()) { + appFormRef.current.submit(); + } + }, + }), + [], + ); + + if (isLoadingApp || !app) { + return ( +
+ +
+ ); + } + + return ( + + } color="blue" variant="light"> + {t("item.edit.app.propagationNotice")} + + { + mutate({ id: appId, ...values }); + }} + isPending={isMutating} + /> + + ); +};