truncgit/mariavel
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-24 07:31:24 +03:00
parent ce67df1067
commit bf3d05ea97
13 changed files with 366 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Sidebar.tsx
+129 -35
View File
@@ -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>
);