feat: initialize backend database service architecture and implement frontend schema explorer components

2026-04-24 07:31:24 +03:00
parent ce67df1067
commit bf3d05ea97
13 changed files with 366 additions and 71 deletions
@@ -7,9 +7,19 @@ const Header: React.FC = () => {
  const { darkMode, toggleDarkMode } = useAppStore();

  return (
-    <AppBar position="static" color="transparent" elevation={0} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+    <AppBar 
+      position="static" 
+      elevation={0} 
+      sx={{ 
+        borderBottom: 1, 
+        borderColor: 'divider',
+        bgcolor: darkMode ? 'rgba(16, 24, 48, 0.95)' : 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(10px)',
+        zIndex: (theme) => theme.zIndex.drawer + 1
+      }}
+    >
      <Toolbar>
-        <Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 700, color: 'primary.main' }}>
+        <Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 800, color: 'primary.main', letterSpacing: -1 }}>
          MARIAVEL
        </Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { Box, Paper, Typography, CircularProgress } from '@mui/material';
 import DataGrid, { 
  Column, 
@@ -10,40 +10,65 @@ import DataGrid, {
  Export
 } from 'devextreme-react/data-grid';
 import { useAppStore } from '../store/useAppStore';
-import { SchemaService } from '../services/api';
+import api, { SchemaService } from '../services/api';
+
+import CustomStore from 'devextreme/data/custom_store';

 const MainContent: React.FC = () => {
  const { activeTable, activeDatabase } = useAppStore();
-  const [data, setData] = useState<any[]>([]);
  const [columns, setColumns] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loadingSchema, setLoadingSchema] = useState(false);
+
+  // Define data source with CustomStore for Remote Operations
+  const dataSource = useMemo(() => {
+    if (!activeTable || !activeDatabase) return null;
+
+    return new CustomStore({
+      key: 'id', // Ideally this should be the primary key from schema
+      load: async (loadOptions: any) => {
+        try {
+          const params = {
+            skip: loadOptions.skip || 0,
+            take: loadOptions.take || 100,
+            requireTotalCount: loadOptions.requireTotalCount,
+            database: activeDatabase,
+          };
+
+          const response = await SchemaService.getTableData(activeTable, params);
+
+          return {
+            data: response.data.data,
+            totalCount: response.data.totalCount,
+          };
+        } catch (error) {
+          console.error('Data loading error', error);
+          throw 'Data Loading Error';
+        }
+      }
+    });
+  }, [activeTable, activeDatabase]);

  useEffect(() => {
-    const fetchTableData = async () => {
+    const fetchSchema = async () => {
      if (!activeTable || !activeDatabase) return;
      
-      setLoading(true);
+      setLoadingSchema(true);
      try {
-        // Fetch schema for columns
-        const schemaRes = await SchemaService.getTableSchema(activeTable);
+        const schemaRes = await SchemaService.getTableSchema(activeTable, activeDatabase);
        const cols = schemaRes.data.map((col: any) => ({
          dataField: col.Field,
          caption: col.Field,
          dataType: mapSqlTypeToDxType(col.Type)
        }));
        setColumns(cols);
-
-        // Fetch actual data
-        const dataRes = await SchemaService.getTableData(activeTable, activeDatabase);
-        setData(dataRes.data);
      } catch (error) {
-        console.error('Failed to fetch table data', error);
+        console.error('Failed to fetch table schema', error);
      } finally {
-        setLoading(false);
+        setLoadingSchema(false);
      }
    };

-    fetchTableData();
+    fetchSchema();
  }, [activeTable, activeDatabase]);

  // Helper to map SQL types to DevExtreme types
@@ -72,13 +97,14 @@ const MainContent: React.FC = () => {
      </Box>
      
      <Paper sx={{ height: 'calc(100vh - 180px)', borderRadius: 2, overflow: 'hidden' }}>
-        {loading ? (
+        {loadingSchema ? (
          <Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
            <CircularProgress />
          </Box>
        ) : (
          <DataGrid
-            dataSource={data}
+            dataSource={dataSource}
+            remoteOperations={true}
            showBorders={true}
            focusedRowEnabled={true}
            columnAutoWidth={true}
@@ -86,7 +112,7 @@ const MainContent: React.FC = () => {
            rowAlternationEnabled={true}
            height="100%"
          >
-            <Scrolling mode="virtual" />
+            <Scrolling mode="virtual" rowRenderingMode="virtual" />
            <FilterRow visible={true} />
            <HeaderFilter visible={true} />
            <SearchPanel visible={true} width={240} placeholder="Search..." />
@@ -0,0 +1,65 @@
+import React from 'react';
+import { Box, Tooltip, IconButton, Stack } from '@mui/material';
+import { 
+  Storage, 
+  Terminal, 
+  FileUpload, 
+  Settings, 
+  History 
+} from '@mui/icons-material';
+
+interface NavigationRailProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+}
+
+const NavigationRail: React.FC<NavigationRailProps> = ({ activeTab, onTabChange }) => {
+  const tabs = [
+    { id: 'explorer', icon: <Storage />, label: 'Explorer' },
+    { id: 'sql', icon: <Terminal />, label: 'SQL Editor' },
+    { id: 'transfer', icon: <FileUpload />, label: 'Import/Export' },
+    { id: 'history', icon: <History />, label: 'Query History' },
+  ];
+
+  return (
+    <Box sx={{ 
+      width: 60, 
+      height: '100vh', 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center', 
+      py: 2, 
+      bgcolor: 'rgba(0,0,0,0.1)',
+      borderRight: 1, 
+      borderColor: 'divider' 
+    }}>
+      <Stack spacing={2}>
+        {tabs.map((tab) => (
+          <Tooltip key={tab.id} title={tab.label} placement="right">
+            <IconButton 
+              onClick={() => onTabChange(tab.id)}
+              sx={{ 
+                color: activeTab === tab.id ? 'primary.main' : 'text.secondary',
+                bgcolor: activeTab === tab.id ? 'rgba(0, 97, 255, 0.1)' : 'transparent',
+                borderRadius: 2,
+                '&:hover': { bgcolor: 'rgba(0, 97, 255, 0.05)' }
+              }}
+            >
+              {tab.icon}
+            </IconButton>
+          </Tooltip>
+        ))}
+      </Stack>
+      
+      <Box sx={{ mt: 'auto' }}>
+        <Tooltip title="Settings" placement="right">
+          <IconButton sx={{ color: 'text.secondary' }}>
+            <Settings />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Box>
+  );
+};
+
+export default NavigationRail;
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress } from '@mui/material';
-import { Storage } from '@mui/icons-material';
+import React, { useEffect, useState, useMemo } from 'react';
+import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress, Stack, TextField, InputAdornment } from '@mui/material';
+import { Storage, Search, FilterList, ChevronRight, ExpandMore, TableChart, Folder } from '@mui/icons-material';
 import { useAppStore } from '../store/useAppStore';
 import { SchemaService } from '../services/api';

@@ -10,6 +10,9 @@ const Sidebar: React.FC = () => {
  const [tables, setTables] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [tablesLoading, setTablesLoading] = useState(false);
+  
+  const [dbSearch, setDbSearch] = useState('');
+  const [tableSearch, setTableSearch] = useState('');

  useEffect(() => {
    const fetchDatabases = async () => {
@@ -29,10 +32,12 @@ const Sidebar: React.FC = () => {
    if (activeDatabase === db) {
      setActiveDatabase(null);
      setTables([]);
+      setTableSearch('');
      return;
    }
    
    setActiveDatabase(db);
+    setTableSearch('');
    setTablesLoading(true);
    try {
      const response = await SchemaService.getTables(db);
@@ -44,12 +49,43 @@ const Sidebar: React.FC = () => {
    }
  };

+  const filteredDatabases = useMemo(() => {
+    return databases.filter(db => db.toLowerCase().includes(dbSearch.toLowerCase()));
+  }, [databases, dbSearch]);
+
+  const filteredTables = useMemo(() => {
+    return tables.filter(table => table.toLowerCase().includes(tableSearch.toLowerCase()));
+  }, [tables, tableSearch]);
+
  return (
-    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
-      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
-        <Storage color="primary" />
-        <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>Explorer</Typography>
+    <Box sx={{ width: 280, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper', zIndex: 10 }}>
+      <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1.5 }}>
+        <Storage color="primary" sx={{ fontSize: 24 }} />
+        <Typography variant="h6" sx={{ fontWeight: 800, fontSize: '1.1rem' }}>Explorer</Typography>
      </Box>
+      
+      <Box sx={{ px: 2, pb: 1 }}>
+        <TextField
+          placeholder="Search Databases..."
+          size="small"
+          fullWidth
+          value={dbSearch}
+          onChange={(e) => setDbSearch(e.target.value)}
+          sx={{ 
+            '& .MuiOutlinedInput-root': {
+              borderRadius: 2,
+              bgcolor: 'rgba(0,0,0,0.03)',
+              fontSize: '0.8rem'
+            }
+          }}
+          slotProps={{
+            input: {
+              startAdornment: <InputAdornment position="start"><Search sx={{ fontSize: 18, color: 'text.secondary' }} /></InputAdornment>,
+            }
+          }}
+        />
+      </Box>
+      
      <Divider />
      
      <Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
@@ -57,43 +93,98 @@ const Sidebar: React.FC = () => {
          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={24} /></Box>
        ) : (
          <List dense sx={{ p: 0 }}>
-            {databases.map((db) => (
+            {filteredDatabases.map((db) => (
              <React.Fragment key={db}>
                <ListItem disablePadding>
                  <ListItemButton 
                    onClick={() => handleDatabaseClick(db)}
                    selected={activeDatabase === db}
-                    sx={{ py: 1 }}
+                    sx={{ py: 0.5, px: 1 }}
                  >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                      <Storage fontSize="small" color={activeDatabase === db ? 'primary' : 'inherit'} />
+                    <ListItemIcon sx={{ minWidth: 24 }}>
+                      {activeDatabase === db ? <ExpandMore fontSize="small" /> : <ChevronRight fontSize="small" />}
+                    </ListItemIcon>
+                    <ListItemIcon sx={{ minWidth: 32 }}>
+                      <Folder fontSize="small" sx={{ color: activeDatabase === db ? 'primary.main' : 'text.secondary' }} />
                    </ListItemIcon>
                    <ListItemText 
-                      primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}>{db}</Typography>} 
+                      primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400, fontSize: '0.85rem' }}>{db}</Typography>} 
                    />
                  </ListItemButton>
                </ListItem>
                
                {activeDatabase === db && (
-                  <List dense sx={{ pl: 4, bgcolor: 'rgba(0,0,0,0.02)' }}>
-                    {tablesLoading ? (
-                      <ListItem><CircularProgress size={16} /></ListItem>
-                    ) : tables.length === 0 ? (
-                      <ListItem><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
-                    ) : tables.map((table) => (
-                      <ListItem key={table} disablePadding>
-                        <ListItemButton 
-                          selected={activeTable === table}
-                          onClick={() => setActiveTable(table)}
-                          sx={{ py: 0.5 }}
-                        >
-                          <ListItemText 
-                            primary={<Typography variant="caption" sx={{ fontWeight: activeTable === table ? 600 : 400 }}>{table}</Typography>} 
-                          />
-                        </ListItemButton>
-                      </ListItem>
-                    ))}
-                  </List>
+                  <Box sx={{ 
+                    position: 'relative',
+                    ml: 2.5,
+                    borderLeft: '1px solid rgba(255,255,255,0.05)',
+                    bgcolor: 'rgba(0,0,0,0.02)', 
+                    pb: 1 
+                  }}>
+                    <Box sx={{ px: 2, py: 1 }}>
+                      <TextField
+                        placeholder="Filter Tables..."
+                        size="small"
+                        fullWidth
+                        autoFocus
+                        value={tableSearch}
+                        onChange={(e) => setTableSearch(e.target.value)}
+                        sx={{
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: 1,
+                            bgcolor: 'background.paper',
+                            fontSize: '0.7rem',
+                            height: 28
+                          }
+                        }}
+                        slotProps={{
+                          input: {
+                            startAdornment: <InputAdornment position="start"><FilterList sx={{ fontSize: 14, color: 'text.secondary' }} /></InputAdornment>,
+                          }
+                        }}
+                      />
+                    </Box>
+                    <List dense sx={{ p: 0 }}>
+                      {tablesLoading ? (
+                        <ListItem sx={{ pl: 4 }}><CircularProgress size={14} /></ListItem>
+                      ) : filteredTables.length === 0 ? (
+                        <ListItem sx={{ pl: 4 }}><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
+                      ) : filteredTables.map((table) => (
+                        <ListItem key={table} disablePadding>
+                          <ListItemButton 
+                            selected={activeTable === table}
+                            onClick={() => setActiveTable(table)}
+                            sx={{ 
+                              py: 0.4,
+                              px: 2,
+                              borderRadius: '4px',
+                              mx: 0.5,
+                              mb: 0.1,
+                              '&.Mui-selected': {
+                                bgcolor: 'primary.main',
+                                color: 'white',
+                                '&:hover': { bgcolor: 'primary.dark' }
+                              }
+                            }}
+                          >
+                            <ListItemIcon sx={{ minWidth: 28 }}>
+                              <TableChart sx={{ fontSize: 16, opacity: 0.7 }} />
+                            </ListItemIcon>
+                            <ListItemText 
+                              primary={
+                                <Typography variant="body2" sx={{ 
+                                  fontWeight: activeTable === table ? 600 : 400,
+                                  fontSize: '0.8rem' 
+                                }}>
+                                  {table}
+                                </Typography>
+                              } 
+                            />
+                          </ListItemButton>
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Box>
                )}
              </React.Fragment>
            ))}
@@ -101,10 +192,13 @@ const Sidebar: React.FC = () => {
        )}
      </Box>
      <Divider />
-      <Box sx={{ p: 2 }}>
-        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
-          Connected to: 127.0.0.1
-        </Typography>
+      <Box sx={{ p: 1.5, bgcolor: 'rgba(0,0,0,0.03)' }}>
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <Box sx={{ width: 8, height: 8, borderRadius: '50%', bgcolor: 'success.main' }} />
+          <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, fontSize: '0.7rem' }}>
+            Connected: 127.0.0.1
+          </Typography>
+        </Stack>
      </Box>
    </Box>
  );