integrated the api to fetch the refernce keys in the Add Table Modal in ER Diagram
This commit is contained in:
parent
1065df6e1b
commit
e1b2743294
|
|
@ -87,6 +87,10 @@ const AddTableModal = ({
|
|||
const [columnTypesFromAPI, setColumnTypesFromAPI] = useState([]);
|
||||
const [loadingColumnTypes, setLoadingColumnTypes] = useState(false);
|
||||
|
||||
// Table keys from API
|
||||
const [tableKeysFromAPI, setTableKeysFromAPI] = useState([]);
|
||||
const [loadingTableKeys, setLoadingTableKeys] = useState(false);
|
||||
|
||||
// Validation and UI state
|
||||
const [errors, setErrors] = useState({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
|
@ -184,6 +188,44 @@ const AddTableModal = ({
|
|||
}
|
||||
};
|
||||
|
||||
// Fetch table keys from API for a specific table
|
||||
const fetchTableKeys = async (tableSlug) => {
|
||||
if (!tableSlug) {
|
||||
setTableKeysFromAPI([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingTableKeys(true);
|
||||
try {
|
||||
const response = await fetch('https://sandbox.kezel.io/api/qbt_table_key_list_get', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
token: "abdhsg",
|
||||
org: "sN05Pjv11qvH",
|
||||
tbl: tableSlug
|
||||
})
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 200 && data.items) {
|
||||
setTableKeysFromAPI(data.items);
|
||||
} else {
|
||||
console.error('Failed to fetch table keys:', data.message);
|
||||
// Fallback to empty array
|
||||
setTableKeysFromAPI([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching table keys:', error);
|
||||
// Fallback to empty array
|
||||
setTableKeysFromAPI([]);
|
||||
} finally {
|
||||
setLoadingTableKeys(false);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
name: '',
|
||||
|
|
@ -198,6 +240,8 @@ const AddTableModal = ({
|
|||
setLoadingKeyTypes(false);
|
||||
setColumnTypesFromAPI([]);
|
||||
setLoadingColumnTypes(false);
|
||||
setTableKeysFromAPI([]);
|
||||
setLoadingTableKeys(false);
|
||||
setErrors({});
|
||||
setIsSubmitting(false);
|
||||
setKeysViewMode('keys');
|
||||
|
|
@ -365,6 +409,7 @@ const AddTableModal = ({
|
|||
targetTable: '',
|
||||
sourceKey: '',
|
||||
targetKey: '',
|
||||
tableKey: '', // New field for table key from API
|
||||
relationType: '1:N' // 1:1, 1:N, N:M
|
||||
};
|
||||
setRelations(prev => [...prev, newRelation]);
|
||||
|
|
@ -376,6 +421,25 @@ const AddTableModal = ({
|
|||
));
|
||||
};
|
||||
|
||||
// Handle target table selection change
|
||||
const handleTargetTableChange = (relationId, tableId) => {
|
||||
// Update the relation with the new target table
|
||||
updateRelation(relationId, 'targetTable', tableId);
|
||||
|
||||
// Clear the table key selection when target table changes
|
||||
updateRelation(relationId, 'tableKey', '');
|
||||
|
||||
// Find the selected table to get its slug
|
||||
const selectedTable = existingTables.find(table => table.id === tableId);
|
||||
if (selectedTable && selectedTable.tbl) {
|
||||
// Fetch table keys for the selected table
|
||||
fetchTableKeys(selectedTable.tbl);
|
||||
} else {
|
||||
// Clear table keys if no table is selected
|
||||
setTableKeysFromAPI([]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeRelation = (id) => {
|
||||
setRelations(prev => prev.filter(rel => rel.id !== id));
|
||||
};
|
||||
|
|
@ -527,6 +591,7 @@ const AddTableModal = ({
|
|||
target_table: rel.targetTable,
|
||||
source_key: rel.sourceKey,
|
||||
target_key: rel.targetKey,
|
||||
table_key: rel.tableKey,
|
||||
relation_type: rel.relationType
|
||||
}))
|
||||
};
|
||||
|
|
@ -1025,12 +1090,12 @@ const AddTableModal = ({
|
|||
{relations.map((relation) => (
|
||||
<Paper key={relation.id} variant="outlined" sx={{ p: 2 }}>
|
||||
<Grid container spacing={2} alignItems="center">
|
||||
<Grid item xs={12} md={3}>
|
||||
<Grid item xs={12} md={2.5}>
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel>Target Table</InputLabel>
|
||||
<Select
|
||||
value={relation.targetTable}
|
||||
onChange={(e) => updateRelation(relation.id, 'targetTable', e.target.value)}
|
||||
onChange={(e) => handleTargetTableChange(relation.id, e.target.value)}
|
||||
label="Target Table"
|
||||
>
|
||||
{existingTables.map(table => (
|
||||
|
|
@ -1074,6 +1139,33 @@ const AddTableModal = ({
|
|||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2}>
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel>Table Key</InputLabel>
|
||||
<Select
|
||||
value={relation.tableKey}
|
||||
onChange={(e) => updateRelation(relation.id, 'tableKey', e.target.value)}
|
||||
label="Table Key"
|
||||
disabled={loadingTableKeys || !relation.targetTable}
|
||||
>
|
||||
{!relation.targetTable ? (
|
||||
<MenuItem disabled>
|
||||
Select a target table first
|
||||
</MenuItem>
|
||||
) : tableKeysFromAPI.length === 0 ? (
|
||||
<MenuItem disabled>
|
||||
{loadingTableKeys ? 'Loading...' : 'No keys available'}
|
||||
</MenuItem>
|
||||
) : (
|
||||
tableKeysFromAPI.map(key => (
|
||||
<MenuItem key={key.key} value={key.key}>
|
||||
{key.name}
|
||||
</MenuItem>
|
||||
))
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
{/* <Grid item xs={12} md={2}>
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel>Relation Type</InputLabel>
|
||||
|
|
@ -1088,7 +1180,7 @@ const AddTableModal = ({
|
|||
</Select>
|
||||
</FormControl>
|
||||
</Grid> */}
|
||||
<Grid item xs={12} md={1}>
|
||||
<Grid item xs={12} md={1.5}>
|
||||
<IconButton
|
||||
onClick={() => removeRelation(relation.id)}
|
||||
color="error"
|
||||
|
|
|
|||
Loading…
Reference in New Issue