frontend_nyla/src/components/Connections/ConnectionEditModal.tsx

50 lines
No EOL
1.4 KiB
TypeScript

import React from 'react';
import { Popup, EditForm } from '../Popup';
import styles from './ConnectionEditModal.module.css';
import { ConnectionEditModalProps } from './connectionsInterfaces';
import { useLanguage } from '../../contexts/LanguageContext';
export function ConnectionEditModal({
isOpen,
connection,
fields,
onSave,
onCancel
}: ConnectionEditModalProps) {
const { t, isLoading } = useLanguage();
if (!connection) {
return null;
}
const authorityName = connection.authority?.charAt(0).toUpperCase() + connection.authority?.slice(1);
// Simplified approach for the title
const baseTitle = t('connections.edit_connection_title', `Edit {authority} Connection`);
const modalTitle = baseTitle.includes('{authority}')
? baseTitle.replace('{authority}', authorityName || '')
: `Edit ${authorityName} Connection`;
return (
<Popup
isOpen={isOpen}
title={modalTitle}
onClose={onCancel}
size="medium"
className={styles.editModal}
>
<EditForm
data={connection}
fields={fields}
onSave={onSave}
onCancel={onCancel}
saveButtonText={t('connections.update_connection', 'Update Connection')}
cancelButtonText={t('common.cancel', 'Cancel')}
showButtons={true}
className={styles.editForm}
/>
</Popup>
);
}
export default ConnectionEditModal;