122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
import { Button, Group, Select, Stack, Text, TextInput, Title } from '@mantine/core';
|
|
import { useForm } from '@mantine/form';
|
|
import { ContextModalProps, modals } from '@mantine/modals';
|
|
import { showNotification } from '@mantine/notifications';
|
|
import { IconCheck, IconX } from '@tabler/icons-react';
|
|
import { ContainerInfo } from 'dockerode';
|
|
import { Trans, useTranslation } from 'next-i18next';
|
|
import { z } from 'zod';
|
|
import { api } from '~/utils/api';
|
|
import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
|
|
|
|
const dockerSelectBoardSchema = z.object({
|
|
board: z.string().nonempty(),
|
|
});
|
|
|
|
type InnerProps = {
|
|
containers: ContainerInfo[];
|
|
};
|
|
type FormType = z.infer<typeof dockerSelectBoardSchema>;
|
|
|
|
export const DockerSelectBoardModal = ({ id, innerProps }: ContextModalProps<InnerProps>) => {
|
|
const { t } = useTranslation('tools/docker');
|
|
const { mutateAsync, isLoading } = api.boards.addAppsForContainers.useMutation();
|
|
const { i18nZodResolver } = useI18nZodResolver();
|
|
const handleSubmit = async (values: FormType) => {
|
|
await mutateAsync(
|
|
{
|
|
apps: innerProps.containers.map((container) => ({
|
|
name: (container.Names.at(0) ?? 'App').replace('/', ''),
|
|
port: container.Ports.at(0)?.PublicPort,
|
|
})),
|
|
boardName: values.board,
|
|
},
|
|
{
|
|
onSuccess: () => {
|
|
showNotification({
|
|
title: t('notifications.selectBoard.success.title'),
|
|
message: t('notifications.selectBoard.success.message'),
|
|
icon: <IconCheck />,
|
|
color: 'green',
|
|
});
|
|
|
|
modals.close(id);
|
|
},
|
|
onError: () => {
|
|
showNotification({
|
|
title: t('notifications.selectBoard.error.title'),
|
|
message: t('notifications.selectBoard.error.message'),
|
|
icon: <IconX />,
|
|
color: 'red',
|
|
});
|
|
},
|
|
}
|
|
);
|
|
};
|
|
|
|
const form = useForm<FormType>({
|
|
initialValues: {
|
|
board: '',
|
|
},
|
|
validate: i18nZodResolver(dockerSelectBoardSchema),
|
|
});
|
|
|
|
const { data: boards } = api.boards.all.useQuery();
|
|
|
|
return (
|
|
<form onSubmit={form.onSubmit(handleSubmit)}>
|
|
<Stack>
|
|
<Text>{t('modals.selectBoard.text')}</Text>
|
|
|
|
<Select
|
|
label={t('modals.selectBoard.form.board.label')}
|
|
withAsterisk
|
|
withinPortal
|
|
data={
|
|
boards?.map((board) => ({
|
|
value: board.name,
|
|
label: board.name,
|
|
})) ?? []
|
|
}
|
|
{...form.getInputProps('board')}
|
|
/>
|
|
|
|
<Group grow>
|
|
<Button
|
|
onClick={() => {
|
|
modals.close(id);
|
|
}}
|
|
variant="light"
|
|
color="gray"
|
|
type="button"
|
|
>
|
|
{t('common:cancel')}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
onClick={async () => {}}
|
|
disabled={isLoading}
|
|
variant="light"
|
|
color="green"
|
|
>
|
|
{t('modals.selectBoard.form.submit')}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export const openDockerSelectBoardModal = (innerProps: InnerProps) => {
|
|
modals.openContextModal({
|
|
modal: 'dockerSelectBoardModal',
|
|
title: (
|
|
<Title order={4}>
|
|
<Trans i18nKey="tools/docker:modals.selectBoard.title" />
|
|
</Title>
|
|
),
|
|
innerProps,
|
|
});
|
|
umami.track('Add to homarr modal')
|
|
};
|