125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { GenericModal } from "../atoms/GenericModal";
|
|
import { MenuItem, TextField, Typography, CircularProgress } from "@mui/material";
|
|
import Button from "@mui/material/Button";
|
|
import axios from 'axios';
|
|
import { modalStyle } from "./AddWhereCondModal";
|
|
|
|
interface IntegrationProps {
|
|
isOpen: boolean;
|
|
handleStart: (data: IntegrationSettings) => void;
|
|
handleClose: () => void;
|
|
}
|
|
|
|
export interface IntegrationSettings {
|
|
credentials: string;
|
|
spreadsheetId: string;
|
|
range: string;
|
|
data: string;
|
|
}
|
|
|
|
export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: IntegrationProps) => {
|
|
const [settings, setSettings] = useState<IntegrationSettings>({
|
|
credentials: '',
|
|
spreadsheetId: '',
|
|
range: '',
|
|
data: '',
|
|
});
|
|
const [spreadsheets, setSpreadsheets] = useState<{ id: string, name: string }[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
// Fetch Google Sheets from backend when modal is opened
|
|
setLoading(true);
|
|
axios.get('http://localhost:8080/auth/google/callback')
|
|
.then(response => {
|
|
setSpreadsheets(response.data.files);
|
|
setLoading(false);
|
|
})
|
|
.catch(error => {
|
|
setError(`Error fetching spreadsheets: ${error}`);
|
|
setLoading(false);
|
|
});
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const handleChange = (field: keyof IntegrationSettings) => (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSettings({ ...settings, [field]: e.target.value });
|
|
};
|
|
|
|
const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSettings({ ...settings, spreadsheetId: e.target.value });
|
|
};
|
|
|
|
return (
|
|
<GenericModal
|
|
isOpen={isOpen}
|
|
onClose={handleClose}
|
|
modalStyle={modalStyle}
|
|
>
|
|
<div style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
marginLeft: '65px',
|
|
}}>
|
|
<Typography sx={{ margin: '20px 0px' }}>Google Sheets Integration</Typography>
|
|
|
|
<TextField
|
|
sx={{ marginBottom: '15px' }}
|
|
label="Service Account JSON"
|
|
multiline
|
|
rows={10}
|
|
required
|
|
value={settings.credentials}
|
|
onChange={handleChange('credentials')}
|
|
fullWidth
|
|
/>
|
|
|
|
{loading ? (
|
|
<CircularProgress sx={{ marginBottom: '15px' }} />
|
|
) : error ? (
|
|
<Typography color="error">{error}</Typography>
|
|
) : (
|
|
<TextField
|
|
sx={{ marginBottom: '15px' }}
|
|
select
|
|
label="Select Google Spreadsheet"
|
|
required
|
|
value={settings.spreadsheetId}
|
|
onChange={handleSpreadsheetSelect}
|
|
fullWidth
|
|
>
|
|
{spreadsheets.map(sheet => (
|
|
<MenuItem key={sheet.id} value={sheet.id}>
|
|
{sheet.name}
|
|
</MenuItem>
|
|
))}
|
|
</TextField>
|
|
)}
|
|
|
|
<TextField
|
|
sx={{ marginBottom: '15px' }}
|
|
label="Range (e.g., Sheet1!A1:B2)"
|
|
required
|
|
value={settings.range}
|
|
onChange={handleChange('range')}
|
|
fullWidth
|
|
/>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={() => handleStart(settings)}
|
|
style={{ marginTop: '10px' }}
|
|
disabled={loading}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
</GenericModal>
|
|
);
|
|
};
|