Merge pull request 'integrated the api to fetch the refernce keys in the Add Table Modal in ER Diagram' (#17) from develop into main

Reviewed-on: #17

src/components/AddTableModal.jsx

@@ -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"