feat: gsheet ui

src/components/molecules/IntegrationSettings.tsx

@@ -1,33 +1,35 @@
 import React, { useState } from 'react';
 import { GenericModal } from "../atoms/GenericModal";
 import { MenuItem, TextField, Typography } from "@mui/material";
-import { Dropdown } from "../atoms/DropdownMui";
 import Button from "@mui/material/Button";
 import { modalStyle } from "./AddWhereCondModal";
 
-interface IntegrationSettingsProps {
+interface GoogleSheetsIntegrationProps {
   isOpen: boolean;
-  handleStart: (settings: IntegrationSettings) => void;
+  handleSubmit: (data: GoogleSheetsSettings) => void;
   handleClose: () => void;
-  isTask: boolean;
-  params?: string[];
 }
 
-export interface IntegrationSettings {
+export interface GoogleSheetsSettings {
-  maxConcurrency: number;
+  credentials: string;
-  maxRepeats: number;
+  spreadsheetId: string;
-  debug: boolean;
+  range: string;
-  params?: any;
+  data: string;
 }
 
-export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose, isTask, params }: IntegrationSettingsProps) => {
+export const GoogleSheetsIntegrationModal = ({ isOpen, handleSubmit, handleClose }: GoogleSheetsIntegrationProps) => {
 
-  const [settings, setSettings] = React.useState<IntegrationSettings>({
+  const [settings, setSettings] = useState<GoogleSheetsSettings>({
-    maxConcurrency: 1,
+    credentials: '',
-    maxRepeats: 1,
+    spreadsheetId: '',
-    debug: true,
+    range: '',
+    data: '',
   });
 
+  const handleChange = (field: keyof GoogleSheetsSettings) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSettings({ ...settings, [field]: e.target.value });
+  };
+
   return (
     <GenericModal
       isOpen={isOpen}
@@ -40,75 +42,51 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose, isT
         alignItems: 'flex-start',
         marginLeft: '65px',
       }}>
-        {isTask
+        <Typography sx={{ margin: '20px 0px' }}>Google Sheets Integration</Typography>
-          ?
+
-          (
-            <React.Fragment>
-              <Typography sx={{ margin: '20px 0px' }} >Recording parameters:</Typography>
-              {params?.map((item, index) => {
-                return <TextField
-                  sx={{ marginBottom: '15px' }}
-                  key={`param-${index}`}
-                  type="string"
-                  label={item}
-                  required
-                  onChange={(e) => setSettings(
-                    {
-                      ...settings,
-                      params: settings.params
-                        ? {
-                          ...settings.params,
-                          [item]: e.target.value,
-                        }
-                        : {
-                          [item]: e.target.value,
-                        },
-                    })}
-                />
-              })}
-            </React.Fragment>)
-          : null
-        }
-        <Typography sx={{ margin: '20px 0px' }} >Interpreter settings:</Typography>
         <TextField
           sx={{ marginBottom: '15px' }}
-          type="number"
+          label="Service Account JSON"
-          label="maxConcurrency"
+          multiline
+          rows={10}
           required
-          onChange={(e) => setSettings(
+          value={settings.credentials}
-            {
+          onChange={handleChange('credentials')}
-              ...settings,
+          fullWidth
-              maxConcurrency: parseInt(e.target.value),
-            })}
-          defaultValue={settings.maxConcurrency}
         />
+
         <TextField
           sx={{ marginBottom: '15px' }}
-          type="number"
+          label="Google Spreadsheet ID"
-          label="maxRepeats"
           required
-          onChange={(e) => setSettings(
+          value={settings.spreadsheetId}
-            {
+          onChange={handleChange('spreadsheetId')}
-              ...settings,
+          fullWidth
-              maxRepeats: parseInt(e.target.value),
-            })}
-          defaultValue={settings.maxRepeats}
         />
-        <Dropdown
+
-          id="debug"
+        <TextField
-          label="debug"
+          sx={{ marginBottom: '15px' }}
-          value={settings.debug?.toString()}
+          label="Range (e.g., Sheet1!A1:B2)"
-          handleSelect={(e) => setSettings(
+          required
-            {
+          value={settings.range}
-              ...settings,
+          onChange={handleChange('range')}
-              debug: e.target.value === "true",
+          fullWidth
-            })}
+        />
-        >
+
-          <MenuItem value="true">true</MenuItem>
+        <TextField
-          <MenuItem value="false">false</MenuItem>
+          sx={{ marginBottom: '15px' }}
-        </Dropdown>
+          label="Data (comma-separated, newline for rows)"
-        <Button onClick={() => handleStart(settings)}>Start</Button>
+          multiline
+          rows={4}
+          value={settings.data}
+          onChange={handleChange('data')}
+          fullWidth
+        />
+
+        <Button variant="contained" color="primary" onClick={() => handleSubmit(settings)} style={{ marginTop: '10px' }}>
+          Submit
+        </Button>
       </div>
     </GenericModal>
   );
-}
+};