added ability to add exchanges and a custom delete exchange dialog
This commit is contained in:
parent
0bec1eca83
commit
1d299e52d4
8 changed files with 550 additions and 16 deletions
|
|
@ -0,0 +1,233 @@
|
|||
import { Dialog, DialogContent, DialogHeader, DialogTitle, Button } from '@/components/ui';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { CreateExchangeRequest } from '../types';
|
||||
|
||||
interface AddExchangeDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreateExchange: (request: CreateExchangeRequest) => Promise<any>;
|
||||
}
|
||||
|
||||
export function AddExchangeDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreateExchange,
|
||||
}: AddExchangeDialogProps) {
|
||||
const [formData, setFormData] = useState<CreateExchangeRequest>({
|
||||
code: '',
|
||||
name: '',
|
||||
country: '',
|
||||
currency: '',
|
||||
active: true,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const validateForm = useCallback((): boolean => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.code.trim()) {
|
||||
newErrors.code = 'Exchange code is required';
|
||||
} else if (formData.code.length > 10) {
|
||||
newErrors.code = 'Exchange code must be 10 characters or less';
|
||||
}
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
newErrors.name = 'Exchange name is required';
|
||||
}
|
||||
|
||||
if (!formData.country.trim()) {
|
||||
newErrors.country = 'Country is required';
|
||||
} else if (formData.country.length !== 2) {
|
||||
newErrors.country = 'Country must be exactly 2 characters (e.g., US, CA, GB)';
|
||||
}
|
||||
|
||||
if (!formData.currency.trim()) {
|
||||
newErrors.currency = 'Currency is required';
|
||||
} else if (formData.currency.length !== 3) {
|
||||
newErrors.currency = 'Currency must be exactly 3 characters (e.g., USD, EUR, CAD)';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
}, [formData]);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await onCreateExchange({
|
||||
...formData,
|
||||
code: formData.code.toUpperCase(),
|
||||
country: formData.country.toUpperCase(),
|
||||
currency: formData.currency.toUpperCase(),
|
||||
});
|
||||
|
||||
// Reset form on success
|
||||
setFormData({
|
||||
code: '',
|
||||
name: '',
|
||||
country: '',
|
||||
currency: '',
|
||||
active: true,
|
||||
});
|
||||
setErrors({});
|
||||
} catch (error) {
|
||||
console.error('Error creating exchange:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
},
|
||||
[formData, validateForm, onCreateExchange]
|
||||
);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setFormData({
|
||||
code: '',
|
||||
name: '',
|
||||
country: '',
|
||||
currency: '',
|
||||
active: true,
|
||||
});
|
||||
setErrors({});
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
const handleInputChange = useCallback(
|
||||
(field: keyof CreateExchangeRequest, value: string | boolean) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
// Clear error when user starts typing
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
},
|
||||
[errors]
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add New Exchange</DialogTitle>
|
||||
<p className="text-sm text-text-muted">
|
||||
Create a new master exchange with no provider mappings
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Exchange Code */}
|
||||
<div>
|
||||
<label htmlFor="code" className="block text-sm font-medium text-text-primary mb-1">
|
||||
Exchange Code *
|
||||
</label>
|
||||
<input
|
||||
id="code"
|
||||
type="text"
|
||||
value={formData.code}
|
||||
onChange={e => handleInputChange('code', e.target.value)}
|
||||
placeholder="e.g., NASDAQ, NYSE, TSX"
|
||||
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono ${
|
||||
errors.code ? 'border-danger' : 'border-border'
|
||||
}`}
|
||||
maxLength={10}
|
||||
required
|
||||
/>
|
||||
{errors.code && <p className="text-xs text-danger mt-1">{errors.code}</p>}
|
||||
</div>
|
||||
|
||||
{/* Exchange Name */}
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-text-primary mb-1">
|
||||
Exchange Name *
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={e => handleInputChange('name', e.target.value)}
|
||||
placeholder="e.g., NASDAQ Stock Market, New York Stock Exchange"
|
||||
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 ${
|
||||
errors.name ? 'border-danger' : 'border-border'
|
||||
}`}
|
||||
maxLength={255}
|
||||
required
|
||||
/>
|
||||
{errors.name && <p className="text-xs text-danger mt-1">{errors.name}</p>}
|
||||
</div>
|
||||
|
||||
{/* Country */}
|
||||
<div>
|
||||
<label htmlFor="country" className="block text-sm font-medium text-text-primary mb-1">
|
||||
Country Code *
|
||||
</label>
|
||||
<input
|
||||
id="country"
|
||||
type="text"
|
||||
value={formData.country}
|
||||
onChange={e => handleInputChange('country', e.target.value)}
|
||||
placeholder="e.g., US, CA, GB"
|
||||
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono ${
|
||||
errors.country ? 'border-danger' : 'border-border'
|
||||
}`}
|
||||
maxLength={2}
|
||||
required
|
||||
/>
|
||||
{errors.country && <p className="text-xs text-danger mt-1">{errors.country}</p>}
|
||||
</div>
|
||||
|
||||
{/* Currency */}
|
||||
<div>
|
||||
<label htmlFor="currency" className="block text-sm font-medium text-text-primary mb-1">
|
||||
Currency Code *
|
||||
</label>
|
||||
<input
|
||||
id="currency"
|
||||
type="text"
|
||||
value={formData.currency}
|
||||
onChange={e => handleInputChange('currency', e.target.value)}
|
||||
placeholder="e.g., USD, EUR, CAD"
|
||||
className={`w-full px-3 py-2 border rounded-md bg-surface text-text-primary focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono ${
|
||||
errors.currency ? 'border-danger' : 'border-border'
|
||||
}`}
|
||||
maxLength={3}
|
||||
required
|
||||
/>
|
||||
{errors.currency && <p className="text-xs text-danger mt-1">{errors.currency}</p>}
|
||||
</div>
|
||||
|
||||
{/* Active Toggle */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.active}
|
||||
onChange={e => handleInputChange('active', e.target.checked)}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm text-text-primary">Active exchange</span>
|
||||
</label>
|
||||
<p className="text-xs text-text-muted mt-1">
|
||||
Inactive exchanges won't be used for new symbol mappings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-2 pt-4">
|
||||
<Button type="button" variant="outline" onClick={handleClose} disabled={loading}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create Exchange'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue