96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useImperativeHandle, useRef } from "react";
|
|
import { Alert, Button, Center, Loader, Stack, Text } 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: () => Promise<boolean>;
|
|
}
|
|
|
|
interface EmbeddedAppEditFormProps {
|
|
appId: string;
|
|
handleRef: React.Ref<EmbeddedAppEditFormHandle>;
|
|
}
|
|
|
|
export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormProps) => {
|
|
const t = useI18n();
|
|
const utils = clientApi.useUtils();
|
|
const appFormRef = useRef<AppFormHandle>(null);
|
|
const { data: app, isPending: isLoadingApp, isError, refetch } = clientApi.app.byId.useQuery({ id: appId });
|
|
|
|
const { mutateAsync, isPending: isMutating } = clientApi.app.update.useMutation({
|
|
onSuccess: async () => {
|
|
await utils.app.invalidate();
|
|
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: async () => {
|
|
if (!appFormRef.current?.isDirty()) {
|
|
return true;
|
|
}
|
|
|
|
return appFormRef.current.submit();
|
|
},
|
|
}),
|
|
[],
|
|
);
|
|
|
|
if (isLoadingApp) {
|
|
return (
|
|
<Center py="xl">
|
|
<Loader />
|
|
</Center>
|
|
);
|
|
}
|
|
|
|
if (isError || !app) {
|
|
return (
|
|
<Stack align="center" gap="md" py="xl">
|
|
<Text c="dimmed">{t("app.action.select.notFound")}</Text>
|
|
<Button variant="light" onClick={() => void refetch()}>
|
|
{t("common.action.tryAgain")}
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack>
|
|
<Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
|
|
{t("item.edit.app.propagationNotice")}
|
|
</Alert>
|
|
<AppForm
|
|
formRef={appFormRef}
|
|
hideButtons
|
|
showBackToOverview={false}
|
|
buttonLabels={{ submit: "" }}
|
|
initialValues={app}
|
|
handleSubmit={async (values) => {
|
|
await mutateAsync({ id: appId, ...values });
|
|
}}
|
|
isPending={isMutating}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|