vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ui enhancements and translations

Browse Source
This commit is contained in:
Rohit
2025-02-26 14:06:19 +05:30
parent d4bb7082da
commit a4603735c5
1 changed files with 47 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/integration/IntegrationSettings.tsx
View File

@@ -17,8 +17,6 @@ import { apiUrl } from "../../apiConfig.js";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { SignalCellularConnectedNoInternet0BarSharp } from "@mui/icons-material";
import { table } from "console";
interface IntegrationProps { interface IntegrationProps {
isOpen: boolean; isOpen: boolean;
@@ -103,7 +101,7 @@ export const IntegrationSettingsModal = ({
setSpreadsheets(response.data); setSpreadsheets(response.data);
} catch (error: any) { } catch (error: any) {
console.error("Error fetching spreadsheet files:", error); console.error("Error fetching spreadsheet files:", error);
notify("error", t("integration_settings.errors.fetch_error", { notify("error", t("integration_settings.google.errors.fetch_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -119,7 +117,7 @@ export const IntegrationSettingsModal = ({
setAirtableBases(response.data); setAirtableBases(response.data);
} catch (error: any) { } catch (error: any) {
console.error("Error fetching Airtable bases:", error); console.error("Error fetching Airtable bases:", error);
notify("error", t("integration_settings.errors.fetch_error", { notify("error", t("integration_settings.airtable.errors.fetch_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -136,7 +134,7 @@ export const IntegrationSettingsModal = ({
} }
catch (error: any) { catch (error: any) {
console.error("Error fetching Airtable tables:", error); console.error("Error fetching Airtable tables:", error);
notify("error", t("integration_settings.errors.fetch_error", { notify("error", t("integration_settings.airtable.errors.fetch_tables_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -173,37 +171,6 @@ export const IntegrationSettingsModal = ({
} else { } else {
console.error("Recording ID is null"); console.error("Recording ID is null");
} }
// try {
// // Ensure recordingId is available
// if (!recordingId) {
// throw new Error("Recording ID is missing");
// }
// // Make API call to update the base in the database
// const response = await axios.post(
// `${apiUrl}/auth/airtable/update`,
// {
// baseId: selectedBase.id,
// baseName: selectedBase.name,
// robotId: recordingId, // Use recordingId from the global context
// },
// { withCredentials: true }
// );
// if (response.status !== 200) {
// throw new Error("Failed to update Airtable base in the database");
// }
// console.log("Airtable base updated successfully:", response.data);
// } catch (error) {
// console.error("Error updating Airtable base:", error);
// notify("error", t("integration_settings.errors.update_error", {
// message: error instanceof Error ? error.message : "Unknown error",
// }));
// }
} }
}; };
@@ -214,9 +181,7 @@ export const IntegrationSettingsModal = ({
setSettings((prevSettings) => ({ setSettings((prevSettings) => ({
...prevSettings, ...prevSettings,
airtableTableId: e.target.value, airtableTableId: e.target.value,
airtableTableName: selectedTable?.name||"", airtableTableName: selectedTable?.name||"",
})); }));
} }
}; };
@@ -235,10 +200,10 @@ export const IntegrationSettingsModal = ({
}, },
{ withCredentials: true } { withCredentials: true }
); );
notify("success", t("integration_settings.notifications.sheet_selected")); notify("success", t("integration_settings.google.notifications.sheet_selected"));
} catch (error: any) { } catch (error: any) {
console.error("Error updating Google Sheet ID:", error); console.error("Error updating Google Sheet ID:", error);
notify("error", t("integration_settings.errors.update_error", { notify("error", t("integration_settings.google.errors.update_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -246,10 +211,6 @@ export const IntegrationSettingsModal = ({
// Update Airtable integration // Update Airtable integration
const updateAirtableBase = async () => { const updateAirtableBase = async () => {
console.log(settings.airtableBaseId);
console.log(settings.airtableTableName);
console.log(recordingId);
console.log(settings.airtableBaseName);
try { try {
await axios.post( await axios.post(
`${apiUrl}/auth/airtable/update`, `${apiUrl}/auth/airtable/update`,
@@ -262,10 +223,10 @@ export const IntegrationSettingsModal = ({
}, },
{ withCredentials: true } { withCredentials: true }
); );
notify("success", t("integration_settings.notifications.base_selected")); notify("success", t("integration_settings.airtable.notifications.base_selected"));
} catch (error: any) { } catch (error: any) {
console.error("Error updating Airtable base:", error); console.error("Error updating Airtable base:", error);
notify("error", t("integration_settings.errors.update_error", { notify("error", t("integration_settings.airtable.errors.update_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -281,10 +242,10 @@ export const IntegrationSettingsModal = ({
); );
setSpreadsheets([]); setSpreadsheets([]);
setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" }); setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" });
notify("success", t("integration_settings.notifications.integration_removed")); notify("success", t("integration_settings.google.notifications.integration_removed"));
} catch (error: any) { } catch (error: any) {
console.error("Error removing Google Sheets integration:", error); console.error("Error removing Google Sheets integration:", error);
notify("error", t("integration_settings.errors.remove_error", { notify("error", t("integration_settings.google.errors.remove_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -301,10 +262,10 @@ export const IntegrationSettingsModal = ({
); );
setAirtableBases([]); setAirtableBases([]);
setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName:"" }); setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName:"" });
notify("success", t("integration_settings.notifications.integration_removed")); notify("success", t("integration_settings.airtable.notifications.integration_removed"));
} catch (error: any) { } catch (error: any) {
console.error("Error removing Airtable integration:", error); console.error("Error removing Airtable integration:", error);
notify("error", t("integration_settings.errors.remove_error", { notify("error", t("integration_settings.airtable.errors.remove_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
})); }));
} }
@@ -319,8 +280,7 @@ export const IntegrationSettingsModal = ({
fetchAirtableBases(); // Fetch bases after successful authentication fetchAirtableBases(); // Fetch bases after successful authentication
} }
} catch (error) { } catch (error) {
setError("Error authenticating with Airtable"); setError(t("integration_settings.airtable.errors.auth_error"));
} }
}; };
@@ -407,7 +367,7 @@ if (!selectedIntegrationType) {
{/* Airtable Button */} {/* Airtable Button */}
<Button <Button
variant="contained" variant="contained"
color="secondary" color="primary"
onClick={() => { onClick={() => {
setSelectedIntegrationType("airtable"); setSelectedIntegrationType("airtable");
setSettings({ ...settings, integrationType: "airtable" }); setSettings({ ...settings, integrationType: "airtable" });
@@ -431,18 +391,19 @@ if (!selectedIntegrationType) {
alignItems: "flex-start", alignItems: "flex-start",
marginLeft: "65px", marginLeft: "65px",
}}> }}>
<Typography variant="h6">
{t("integration_settings.title")}
</Typography>
{/* Google Sheets Integration */} {/* Google Sheets Integration */}
{settings.integrationType === "googleSheets" && ( {settings.integrationType === "googleSheets" && (
<> <>
<Typography variant="h6">
{t("integration_settings.google.title")}
</Typography>
{recording?.google_sheet_id ? ( {recording?.google_sheet_id ? (
<> <>
<Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}> <Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
<AlertTitle>{t("integration_settings.alerts.success.title")}</AlertTitle> <AlertTitle>{t("integration_settings.google.alerts.success.title")}</AlertTitle>
{t("integration_settings.alerts.success.content", { {t("integration_settings.google.alerts.success.content", {
sheetName: recording.google_sheet_name, sheetName: recording.google_sheet_name,
})} })}
<a <a
@@ -450,7 +411,7 @@ if (!selectedIntegrationType) {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
{t("integration_settings.alerts.success.here")} {t("integration_settings.google.alerts.success.here")}
</a> </a>
</Alert> </Alert>
<Button <Button
@@ -459,26 +420,26 @@ if (!selectedIntegrationType) {
onClick={removeGoogleSheetsIntegration} onClick={removeGoogleSheetsIntegration}
style={{ marginTop: "15px" }} style={{ marginTop: "15px" }}
> >
{t("integration_settings.buttons.remove_integration")} {t("integration_settings.google.buttons.remove_integration")}
</Button> </Button>
</> </>
) : ( ) : (
<> <>
{!recording?.google_sheet_email ? ( {!recording?.google_sheet_email ? (
<> <>
<p>{t("integration_settings.descriptions.sync_info")}</p> <p>{t("integration_settings.google.descriptions.sync_info")}</p>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={authenticateWithGoogle} onClick={authenticateWithGoogle}
> >
{t("integration_settings.buttons.authenticate")} {t("integration_settings.google.buttons.authenticate")}
</Button> </Button>
</> </>
) : ( ) : (
<> <>
<Typography sx={{ margin: "20px 0px 30px 0px" }}> <Typography sx={{ margin: "20px 0px 30px 0px" }}>
{t("integration_settings.descriptions.authenticated_as", { {t("integration_settings.google.descriptions.authenticated_as", {
email: recording.google_sheet_email, email: recording.google_sheet_email,
})} })}
</Typography> </Typography>
@@ -492,14 +453,14 @@ if (!selectedIntegrationType) {
color="primary" color="primary"
onClick={fetchSpreadsheetFiles} onClick={fetchSpreadsheetFiles}
> >
{t("integration_settings.buttons.fetch_sheets")} {t("integration_settings.google.buttons.fetch_sheets")}
</Button> </Button>
) : ( ) : (
<> <>
<TextField <TextField
sx={{ marginBottom: "15px" }} sx={{ marginBottom: "15px" }}
select select
label={t("integration_settings.fields.select_sheet")} label={t("integration_settings.google.fields.select_sheet")}
required required
value={settings.spreadsheetId} value={settings.spreadsheetId}
onChange={handleSpreadsheetSelect} onChange={handleSpreadsheetSelect}
@@ -521,7 +482,7 @@ if (!selectedIntegrationType) {
style={{ marginTop: "10px" }} style={{ marginTop: "10px" }}
disabled={!settings.spreadsheetId || loading} disabled={!settings.spreadsheetId || loading}
> >
{t("integration_settings.buttons.submit")} {t("integration_settings.google.buttons.submit")}
</Button> </Button>
</> </>
)} )}
@@ -535,19 +496,24 @@ if (!selectedIntegrationType) {
{/* Airtable Integration */} {/* Airtable Integration */}
{settings.integrationType === "airtable" && ( {settings.integrationType === "airtable" && (
<> <>
<Typography variant="h6">
{t("integration_settings.airtable.title")}
</Typography>
{recording?.airtable_base_id ? ( {recording?.airtable_base_id ? (
<> <>
<Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #00c3ff" }}> <Alert severity="info" sx={{ marginTop: "10px", border: "1px solid #ff00c3" }}>
<AlertTitle>{t("integration_settings.alerts.airtable_success.title")}</AlertTitle> <AlertTitle>{t("integration_settings.airtable.alerts.success.title")}</AlertTitle>
{t("integration_settings.alerts.airtable_success.content", { {t("integration_settings.airtable.alerts.success.content", {
baseName: recording.airtable_base_name, baseName: recording.airtable_base_name,
tableName: recording.airtable_table_name
})} })}
<a <a
href={`https://airtable.com/${recording.airtable_base_id}`} href={`https://airtable.com/${recording.airtable_base_id}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
{t("integration_settings.alerts.airtable_success.here")} {t("integration_settings.airtable.alerts.success.here")}
</a> </a>
</Alert> </Alert>
<Button <Button
@@ -556,28 +522,26 @@ if (!selectedIntegrationType) {
onClick={removeAirtableIntegration} onClick={removeAirtableIntegration}
style={{ marginTop: "15px" }} style={{ marginTop: "15px" }}
> >
{t("integration_settings.buttons.remove_integration")} {t("integration_settings.airtable.buttons.remove_integration")}
</Button> </Button>
</> </>
) : ( ) : (
<> <>
{!recording?.airtable_access_token ? ( {!recording?.airtable_access_token ? (
<> <>
<p>{t("integration_settings.descriptions.airtable_sync_info")}</p> <p>{t("integration_settings.airtable.descriptions.sync_info")}</p>
<Button <Button
variant="contained" variant="contained"
color="secondary" color="primary"
onClick={authenticateWithAirtable} onClick={authenticateWithAirtable}
> >
{t("integration_settings.buttons.authenticate_airtable")} {t("integration_settings.airtable.buttons.authenticate")}
</Button> </Button>
</> </>
) : ( ) : (
<> <>
<Typography sx={{ margin: "20px 0px 30px 0px" }}> <Typography sx={{ margin: "20px 0px 30px 0px" }}>
{t("integration_settings.descriptions.authenticated_as", { {t("integration_settings.airtable.descriptions.authenticated_as")}
email: "",
})}
</Typography> </Typography>
{loading ? ( {loading ? (
<CircularProgress sx={{ marginBottom: "15px" }} /> <CircularProgress sx={{ marginBottom: "15px" }} />
@@ -586,17 +550,17 @@ if (!selectedIntegrationType) {
) : airtableBases.length === 0 ? ( ) : airtableBases.length === 0 ? (
<Button <Button
variant="outlined" variant="outlined"
color="secondary" color="primary"
onClick={fetchAirtableBases} onClick={fetchAirtableBases}
> >
{t("integration_settings.buttons.fetch_airtable_bases")} {t("integration_settings.airtable.buttons.fetch_bases")}
</Button> </Button>
) : ( ) : (
<> <>
<TextField <TextField
sx={{ marginBottom: "15px" }} sx={{ marginBottom: "15px" }}
select select
label={t("integration_settings.fields.select_airtable_base")} label={t("integration_settings.airtable.fields.select_base")}
required required
value={settings.airtableBaseId} value={settings.airtableBaseId}
onChange={handleAirtableBaseSelect} onChange={handleAirtableBaseSelect}
@@ -611,7 +575,7 @@ if (!selectedIntegrationType) {
<TextField <TextField
sx={{ marginBottom: "15px" }} sx={{ marginBottom: "15px" }}
select select
label={t("integration_settings.fields.select_airtable_table")} label={t("integration_settings.airtable.fields.select_table")}
required required
value={settings.airtableTableId} value={settings.airtableTableId}
onChange={handleAirtabletableSelect} onChange={handleAirtabletableSelect}
@@ -625,7 +589,7 @@ if (!selectedIntegrationType) {
</TextField> </TextField>
<Button <Button
variant="contained" variant="contained"
color="secondary" color="primary"
onClick={() => { onClick={() => {
updateAirtableBase(); updateAirtableBase();
handleStart(settings); handleStart(settings);
@@ -633,7 +597,7 @@ if (!selectedIntegrationType) {
style={{ marginTop: "10px" }} style={{ marginTop: "10px" }}
disabled={!settings.airtableBaseId || loading} disabled={!settings.airtableBaseId || loading}
> >
{t("integration_settings.buttons.submit_airtable")} {t("integration_settings.airtable.buttons.submit")}
</Button> </Button>
</> </>
)} )}