Local modifications to ClusterLabs/Anvil by Alteeve
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

179 lines
5.8 KiB

import { FC, useRef, useState } from 'react';
import API_BASE_URL from '../../lib/consts/API_BASE_URL';
import AddMailServerForm from './AddMailServerForm';
import api from '../../lib/api';
import { DialogWithHeader } from '../Dialog';
import EditMailServerForm from './EditMailServerForm';
import FormSummary from '../FormSummary';
import List from '../List';
import { ExpandablePanel } from '../Panels';
import periodicFetch from '../../lib/fetchers/periodicFetch';
import { BodyText } from '../Text';
import useActiveFetch from '../../hooks/useActiveFetch';
import useChecklist from '../../hooks/useChecklist';
import useConfirmDialog from '../../hooks/useConfirmDialog';
import useFetch from '../../hooks/useFetch';
const ManageMailServer: FC = () => {
const addDialogRef = useRef<DialogForwardedRefContent>(null);
const editDialogRef = useRef<DialogForwardedRefContent>(null);
const { confirmDialog, setConfirmDialogOpen, setConfirmDialogProps } =
useConfirmDialog({ initial: { closeOnProceed: true } });
const [edit, setEdit] = useState<boolean>(false);
const [mailServer, setMailServer] = useState<
APIMailServerDetail | undefined
>();
const [mailServers, setMailServers] = useState<
APIMailServerOverviewList | undefined
>();
const { isLoading: loadingMailServersPeriodic } =
periodicFetch<APIMailServerOverviewList>(`${API_BASE_URL}/mail-server`, {
onSuccess: (data) => setMailServers(data),
});
const { fetch: getMailServers, loading: loadingMailServersActive } =
useActiveFetch<APIMailServerOverviewList>({
onData: (data) => setMailServers(data),
url: '/mail-server',
});
const { fetch: getMailServer, loading: loadingMailServer } =
useActiveFetch<APIMailServerDetail>({
onData: (data) => setMailServer(data),
url: '/mail-server',
});
const { data: host, loading: loadingHost } =
useFetch<APIHostDetail>('/host/local');
const {
buildDeleteDialogProps,
checks,
getCheck,
hasAllChecks,
hasChecks,
multipleItems,
resetChecks,
setAllChecks,
setCheck,
} = useChecklist({ list: mailServers });
return (
<>
<ExpandablePanel expandInitially header="Manage mail servers">
<List
allowCheckAll={multipleItems}
allowEdit
allowItemButton={edit}
disableDelete={!hasChecks}
edit={edit}
getListCheckboxProps={() => ({
checked: hasAllChecks,
onChange: (event, checked) => setAllChecks(checked),
})}
getListItemCheckboxProps={(uuid) => ({
checked: getCheck(uuid),
onChange: (event, checked) => setCheck(uuid, checked),
})}
header
listEmpty="No mail server(s) found."
listItems={mailServers}
loading={loadingMailServersPeriodic || loadingMailServersActive}
onAdd={() => addDialogRef?.current?.setOpen(true)}
onDelete={() => {
setConfirmDialogProps({
...buildDeleteDialogProps({
onProceedAppend: () => {
Promise.all(
checks.map((uuid) => api.delete(`/mail-server/${uuid}`)),
).then(() => getMailServers());
resetChecks();
},
getConfirmDialogTitle: (count) =>
`Delete the following ${count} mail server(s)?`,
renderEntry: ({ key }) => {
const ms = mailServers?.[key];
return (
<BodyText>
{ms?.address}:{ms?.port}
</BodyText>
);
},
}),
});
setConfirmDialogOpen(true);
}}
onEdit={() => setEdit((previous) => !previous)}
onItemClick={(value, uuid) => {
editDialogRef?.current?.setOpen(true);
getMailServer(`/${uuid}`);
}}
renderListItem={(uuid, { address, port }) => (
<BodyText>
{address}:{port}
</BodyText>
)}
/>
</ExpandablePanel>
<DialogWithHeader
header="Add mail server"
loading={loadingMailServersPeriodic || loadingHost}
ref={addDialogRef}
showClose
>
{host && (
<AddMailServerForm
localhostDomain={host.domain}
onSubmit={(tools, ...args) => {
setConfirmDialogProps({
actionProceedText: 'Add',
content: <FormSummary entries={tools.mailServer} />,
onCancelAppend: () => tools.onConfirmCancel(...args),
onProceedAppend: () => tools.onConfirmProceed(...args),
titleText: 'Add mail server with the following?',
});
setConfirmDialogOpen(true);
}}
/>
)}
</DialogWithHeader>
<DialogWithHeader
header="Update mail server"
loading={loadingMailServersPeriodic || loadingMailServer}
ref={editDialogRef}
showClose
>
{mailServer && (
<EditMailServerForm
mailServerUuid={mailServer.uuid}
onSubmit={(tools, ...args) => {
setConfirmDialogProps({
actionProceedText: 'Update',
content: <FormSummary entries={tools.mailServer} />,
onCancelAppend: () => tools.onConfirmCancel(...args),
onProceedAppend: () => tools.onConfirmProceed(...args),
titleText: 'Update mail server with the following?',
});
setConfirmDialogOpen(true);
}}
previousFormikValues={{ [mailServer.uuid]: mailServer }}
/>
)}
</DialogWithHeader>
{confirmDialog}
</>
);
};
export default ManageMailServer;