packages/components/containers/vpn/gateways/GatewayUsersModal.tsx

   1 import { useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import Form from '@proton/components/components/form/Form';
   7 import type { ModalProps } from '@proton/components/components/modalTwo/Modal';
   8 import ModalTwo from '@proton/components/components/modalTwo/Modal';
   9 import ModalTwoContent from '@proton/components/components/modalTwo/ModalContent';
  10 import ModalTwoFooter from '@proton/components/components/modalTwo/ModalFooter';
  11 import ModalTwoHeader from '@proton/components/components/modalTwo/ModalHeader';
  12
  13 import type { GatewayDto } from './GatewayDto';
  14 import type { GatewayModel } from './GatewayModel';
  15 import type { GatewayUser } from './GatewayUser';
  16 import { GatewayUserSelection } from './GatewayUserSelection';
  17
  18 type PartialGateway = Pick<GatewayDto, 'features' | 'userIds'>;
  19
  20 interface Props extends ModalProps<typeof Form> {
  21     model: PartialGateway;
  22     users: readonly GatewayUser[];
  23     showCancelButton?: boolean;
  24     onSubmitDone: (gateway: Pick<GatewayModel, 'Features' | 'UserIds'>) => Promise<void>;
  25 }
  26
  27 const GatewayUsersModal = ({ model: initialModel, users, showCancelButton = false, onSubmitDone, ...rest }: Props) => {
  28     const [model, setModel] = useState<PartialGateway>({ ...initialModel });
  29     const [loading, setLoading] = useState(false);
  30
  31     const changeModel = (diff: Partial<PartialGateway>) => setModel((model) => ({ ...model, ...diff }));
  32
  33     const handleSubmit = async () => {
  34         const dtoBody = {
  35             Features: model.features,
  36             UserIds: model.userIds,
  37         };
  38
  39         try {
  40             setLoading(true);
  41             await onSubmitDone(dtoBody);
  42             rest.onClose?.();
  43         } finally {
  44             setLoading(false);
  45         }
  46     };
  47
  48     return (
  49         <ModalTwo size="xlarge" {...rest} as={Form} onSubmit={handleSubmit}>
  50             <ModalTwoHeader title={c('Title').t`Edit users`} />
  51             <ModalTwoContent>
  52                 <GatewayUserSelection loading={loading} users={users} model={model} changeModel={changeModel} />
  53             </ModalTwoContent>
  54             <ModalTwoFooter>
  55                 {showCancelButton ? (
  56                     <Button color="weak" onClick={rest.onClose}>
  57                         {c('Action').t`Cancel`}
  58                     </Button>
  59                 ) : (
  60                     <div />
  61                 )}
  62                 <Button color="norm" type="submit" loading={loading}>
  63                     {c('Action').t`Save`}
  64                 </Button>
  65             </ModalTwoFooter>
  66         </ModalTwo>
  67     );
  68 };
  69
  70 export default GatewayUsersModal;