refactor: Modularize database page into components and composables
- Extract types to types/database.ts - Create composables: useDatabaseApi, useDataTable, useQueryExecutor - Create components: DatabaseSidebar, DataTable, FilterBar, SchemaInfo, QueryEditor, QueryColumnsBar, DatabaseStats, TablePagination - Add horizontal scroll to DataTable with sticky checkbox column - Configure @ path alias in vite and tsconfig - Reduce DatabasePage.vue from 1548 to 314 lines
This commit is contained in:
220
frontend/src/components/database/DataTable.vue
Normal file
220
frontend/src/components/database/DataTable.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
data: any[]
|
||||
visibleColumns: string[]
|
||||
selectedRows: Set<number>
|
||||
allSelected: boolean
|
||||
copiedCell: string | null
|
||||
cellIdPrefix?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleRow: [idx: number]
|
||||
toggleAll: []
|
||||
copyCell: [value: any, cellId: string]
|
||||
}>()
|
||||
|
||||
function formatValue(value: any): string {
|
||||
if (value === null) return 'NULL'
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
if (typeof value === 'string' && value.length > 100) {
|
||||
return value.substring(0, 100) + '...'
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
|
||||
function getCellId(idx: number, key: string): string {
|
||||
return `${props.cellIdPrefix || 'cell'}-${idx}-${key}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="data-table-container">
|
||||
<div v-if="data.length > 0 && visibleColumns.length > 0" class="data-table-scroll">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="checkbox-col">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="allSelected"
|
||||
@change="emit('toggleAll')"
|
||||
title="Select all"
|
||||
/>
|
||||
</th>
|
||||
<th v-for="key in visibleColumns" :key="key">{{ key }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(row, idx) in data"
|
||||
:key="idx"
|
||||
:class="{ 'row-selected': selectedRows.has(idx) }"
|
||||
>
|
||||
<td class="checkbox-col">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="selectedRows.has(idx)"
|
||||
@change="emit('toggleRow', idx)"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-for="key in visibleColumns"
|
||||
:key="key"
|
||||
class="copyable"
|
||||
:class="{ copied: copiedCell === getCellId(idx, key) }"
|
||||
@click="emit('copyCell', row[key], getCellId(idx, key))"
|
||||
title="Click to copy"
|
||||
>
|
||||
<span class="cell-content">{{ formatValue(row[key]) }}</span>
|
||||
<span v-if="copiedCell === getCellId(idx, key)" class="copied-badge">Copied!</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div v-else-if="visibleColumns.length === 0" class="no-data">All columns hidden</div>
|
||||
<div v-else class="no-data">
|
||||
<slot name="empty">No records found</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.data-table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data-table-scroll {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
min-width: max-content;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 0.625rem 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.checkbox-col {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
padding: 0.5rem !important;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.data-table td.checkbox-col {
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.data-table tr:hover td.checkbox-col {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.data-table tr.row-selected td.checkbox-col {
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
.checkbox-col input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.data-table tr.row-selected td {
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
.data-table tr.row-selected:hover td {
|
||||
background: var(--accent-muted);
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.data-table td.copyable {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.data-table td.copyable:hover {
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
.data-table td.copyable:active {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.data-table td.copied {
|
||||
background: var(--success-bg, #d4edda);
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.copied-badge {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
transform: translateY(-50%);
|
||||
padding: 0.125rem 0.375rem;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
border-radius: 4px;
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-50%) scale(0.9); }
|
||||
to { opacity: 1; transform: translateY(-50%) scale(1); }
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
213
frontend/src/components/database/DatabaseSidebar.vue
Normal file
213
frontend/src/components/database/DatabaseSidebar.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableInfo, DbStats } from '@/types/database'
|
||||
|
||||
defineProps<{
|
||||
tables: TableInfo[]
|
||||
selectedTable: string | null
|
||||
stats: DbStats | null
|
||||
loading: boolean
|
||||
error: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectTable: [tableName: string]
|
||||
refresh: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>Database</h2>
|
||||
<button class="btn-icon" @click="emit('refresh')" title="Refresh">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
|
||||
<path d="M21 3v5h-5"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="table-list">
|
||||
<div v-if="loading && tables.length === 0" class="loading">Loading tables...</div>
|
||||
<div v-else-if="error" class="error">{{ error }}</div>
|
||||
<div
|
||||
v-else
|
||||
v-for="table in tables"
|
||||
:key="table.name"
|
||||
class="table-item"
|
||||
:class="{ active: selectedTable === table.name }"
|
||||
@click="emit('selectTable', table.name)"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18"/>
|
||||
<path d="M3 15h18"/>
|
||||
<path d="M9 3v18"/>
|
||||
</svg>
|
||||
<span class="table-name">{{ table.name }}</span>
|
||||
<span class="table-count">{{ table.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="stats" class="sidebar-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Size</span>
|
||||
<span class="stat-value">{{ stats.size }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Tables</span>
|
||||
<span class="stat-value">{{ stats.tables }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Records</span>
|
||||
<span class="stat-value">{{ stats.totalRecords }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
background: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.375rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.table-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.table-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.table-item.active {
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.table-name {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-count {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 9999px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.table-item.active .table-count {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar-stats {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.table-list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
overflow-x: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.table-item {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.sidebar-stats {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
184
frontend/src/components/database/DatabaseStats.vue
Normal file
184
frontend/src/components/database/DatabaseStats.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<script setup lang="ts">
|
||||
import type { DbStats, TableInfo } from '@/types/database'
|
||||
|
||||
defineProps<{
|
||||
stats: DbStats | null
|
||||
tables: TableInfo[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stats-tab">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3"/>
|
||||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-title">Database Size</span>
|
||||
<span class="stat-value-lg">{{ stats?.size || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||
<path d="M3 9h18"/>
|
||||
<path d="M9 3v18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-title">Total Tables</span>
|
||||
<span class="stat-value-lg">{{ stats?.tables || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-title">Total Records</span>
|
||||
<span class="stat-value-lg">{{ stats?.totalRecords || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tables-breakdown">
|
||||
<h3>Tables Breakdown</h3>
|
||||
<div class="breakdown-list">
|
||||
<div v-for="table in tables" :key="table.name" class="breakdown-item">
|
||||
<span class="breakdown-name">{{ table.name }}</span>
|
||||
<div class="breakdown-bar">
|
||||
<div
|
||||
class="breakdown-fill"
|
||||
:style="{ width: `${(table.count / (stats?.totalRecords || 1)) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<span class="breakdown-count">{{ table.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stats-tab {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
padding: 0.75rem;
|
||||
background: var(--accent-muted);
|
||||
border-radius: 10px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-value-lg {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tables-breakdown {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.tables-breakdown h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.breakdown-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.breakdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.breakdown-name {
|
||||
width: 150px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.breakdown-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.breakdown-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 4px;
|
||||
min-width: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.breakdown-count {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
171
frontend/src/components/database/FilterBar.vue
Normal file
171
frontend/src/components/database/FilterBar.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
rowCount: number
|
||||
totalCount: number
|
||||
selectedCount: number
|
||||
visibleColCount: number
|
||||
totalColCount: number
|
||||
copied: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
copyAll: []
|
||||
}>()
|
||||
|
||||
function updateFilter(e: Event) {
|
||||
emit('update:modelValue', (e.target as HTMLInputElement).value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="filter-bar">
|
||||
<div class="filter-input-wrapper">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input
|
||||
:value="modelValue"
|
||||
@input="updateFilter"
|
||||
type="text"
|
||||
placeholder="Filter results..."
|
||||
class="filter-input"
|
||||
/>
|
||||
<button v-if="modelValue" class="clear-filter" @click="emit('update:modelValue', '')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<span class="filter-count">
|
||||
<template v-if="selectedCount > 0">
|
||||
{{ selectedCount }} selected
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ rowCount }} of {{ totalCount }} rows
|
||||
</template>
|
||||
<template v-if="visibleColCount < totalColCount">
|
||||
({{ visibleColCount }}/{{ totalColCount }} cols)
|
||||
</template>
|
||||
</span>
|
||||
<button
|
||||
class="btn-copy-all"
|
||||
:class="{ copied }"
|
||||
@click="emit('copyAll')"
|
||||
:disabled="rowCount === 0 || visibleColCount === 0"
|
||||
>
|
||||
<svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
{{ copied ? 'Copied!' : (selectedCount > 0 ? 'Copy Selected' : 'Copy All') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.filter-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.filter-input-wrapper:focus-within {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.filter-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.clear-filter {
|
||||
padding: 0.25rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.clear-filter:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filter-count {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-copy-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-copy-all:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-copy-all:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-copy-all.copied {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
83
frontend/src/components/database/QueryColumnsBar.vue
Normal file
83
frontend/src/components/database/QueryColumnsBar.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
columns: string[]
|
||||
hiddenColumns: Set<string>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleColumn: [column: string]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="columns.length > 0" class="query-columns-bar">
|
||||
<span class="columns-label">Columns:</span>
|
||||
<div class="query-columns-list">
|
||||
<span
|
||||
v-for="col in columns"
|
||||
:key="col"
|
||||
class="query-col-toggle"
|
||||
:class="{ hidden: hiddenColumns.has(col) }"
|
||||
@click="emit('toggleColumn', col)"
|
||||
:title="hiddenColumns.has(col) ? 'Click to show' : 'Click to hide'"
|
||||
>
|
||||
<svg v-if="!hiddenColumns.has(col)" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
{{ col }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.query-columns-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.columns-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.query-columns-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.query-col-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.query-col-toggle:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.query-col-toggle.hidden {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
96
frontend/src/components/database/QueryEditor.vue
Normal file
96
frontend/src/components/database/QueryEditor.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
modelValue: string
|
||||
loading: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
execute: []
|
||||
}>()
|
||||
|
||||
function onInput(e: Event) {
|
||||
emit('update:modelValue', (e.target as HTMLTextAreaElement).value)
|
||||
}
|
||||
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if (e.ctrlKey && e.key === 'Enter') {
|
||||
emit('execute')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="query-editor">
|
||||
<textarea
|
||||
:value="modelValue"
|
||||
@input="onInput"
|
||||
@keydown="onKeydown"
|
||||
placeholder="SELECT * FROM themes LIMIT 10;"
|
||||
></textarea>
|
||||
<div class="query-actions">
|
||||
<span class="hint">Ctrl+Enter to execute. Only SELECT queries allowed.</span>
|
||||
<button class="btn-primary" @click="emit('execute')" :disabled="loading">
|
||||
{{ loading ? 'Running...' : 'Execute' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.query-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.query-editor textarea {
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.query-editor textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.query-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
115
frontend/src/components/database/SchemaInfo.vue
Normal file
115
frontend/src/components/database/SchemaInfo.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableSchema } from '@/types/database'
|
||||
|
||||
defineProps<{
|
||||
tableName: string
|
||||
schema: TableSchema[]
|
||||
hiddenColumns: Set<string>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
toggleColumn: [column: string]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="schema-info">
|
||||
<div class="schema-header">
|
||||
<h3>{{ tableName }}</h3>
|
||||
<span class="schema-hint">Click columns to show/hide</span>
|
||||
</div>
|
||||
<div class="schema-columns">
|
||||
<span
|
||||
v-for="col in schema"
|
||||
:key="col.name"
|
||||
class="schema-col clickable"
|
||||
:class="{ pk: col.pk, hidden: hiddenColumns.has(col.name) }"
|
||||
@click="emit('toggleColumn', col.name)"
|
||||
:title="hiddenColumns.has(col.name) ? 'Click to show' : 'Click to hide'"
|
||||
>
|
||||
<svg v-if="!hiddenColumns.has(col.name)" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
{{ col.name }}
|
||||
<small>{{ col.type }}</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.schema-info {
|
||||
padding: 1rem 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.schema-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.schema-info h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.schema-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.schema-columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.schema-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.schema-col.clickable {
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.schema-col.clickable:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.schema-col.hidden {
|
||||
opacity: 0.5;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.schema-col.pk {
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.schema-col.pk.hidden {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.schema-col small {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
</style>
|
||||
76
frontend/src/components/database/TablePagination.vue
Normal file
76
frontend/src/components/database/TablePagination.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
changePage: [page: number]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="totalPages > 1" class="pagination">
|
||||
<button @click="emit('changePage', 1)" :disabled="currentPage === 1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="emit('changePage', currentPage - 1)" :disabled="currentPage === 1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
|
||||
<button @click="emit('changePage', currentPage + 1)" :disabled="currentPage === totalPages">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button @click="emit('changePage', totalPages)" :disabled="currentPage === totalPages">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
padding: 0.375rem;
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination button:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
padding: 0 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
8
frontend/src/components/database/index.ts
Normal file
8
frontend/src/components/database/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export { default as DatabaseSidebar } from './DatabaseSidebar.vue'
|
||||
export { default as DataTable } from './DataTable.vue'
|
||||
export { default as FilterBar } from './FilterBar.vue'
|
||||
export { default as SchemaInfo } from './SchemaInfo.vue'
|
||||
export { default as QueryEditor } from './QueryEditor.vue'
|
||||
export { default as QueryColumnsBar } from './QueryColumnsBar.vue'
|
||||
export { default as DatabaseStats } from './DatabaseStats.vue'
|
||||
export { default as TablePagination } from './TablePagination.vue'
|
||||
3
frontend/src/composables/database/index.ts
Normal file
3
frontend/src/composables/database/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { useDatabaseApi } from './useDatabaseApi'
|
||||
export { useDataTable, type UseDataTableOptions, type UseDataTableReturn } from './useDataTable'
|
||||
export { useQueryExecutor } from './useQueryExecutor'
|
||||
158
frontend/src/composables/database/useDataTable.ts
Normal file
158
frontend/src/composables/database/useDataTable.ts
Normal file
@@ -0,0 +1,158 @@
|
||||
import { ref, computed, type Ref, type ComputedRef } from 'vue'
|
||||
|
||||
export interface UseDataTableOptions {
|
||||
data: Ref<any[]>
|
||||
}
|
||||
|
||||
export interface UseDataTableReturn {
|
||||
filter: Ref<string>
|
||||
hiddenColumns: Ref<Set<string>>
|
||||
selectedRows: Ref<Set<number>>
|
||||
copiedCell: Ref<string | null>
|
||||
copiedAll: Ref<boolean>
|
||||
filteredData: ComputedRef<any[]>
|
||||
visibleColumns: ComputedRef<string[]>
|
||||
allColumns: ComputedRef<string[]>
|
||||
allRowsSelected: ComputedRef<boolean>
|
||||
toggleColumn: (column: string) => void
|
||||
toggleRow: (idx: number) => void
|
||||
toggleAllRows: () => void
|
||||
copyCell: (value: any, cellId: string) => Promise<void>
|
||||
copyAll: () => Promise<void>
|
||||
reset: () => void
|
||||
formatValue: (value: any) => string
|
||||
}
|
||||
|
||||
export function useDataTable(options: UseDataTableOptions): UseDataTableReturn {
|
||||
const { data } = options
|
||||
|
||||
const filter = ref('')
|
||||
const hiddenColumns = ref<Set<string>>(new Set())
|
||||
const selectedRows = ref<Set<number>>(new Set())
|
||||
const copiedCell = ref<string | null>(null)
|
||||
const copiedAll = ref(false)
|
||||
|
||||
const allColumns = computed(() => {
|
||||
if (data.value.length === 0) return []
|
||||
return Object.keys(data.value[0])
|
||||
})
|
||||
|
||||
const visibleColumns = computed(() => {
|
||||
return allColumns.value.filter(col => !hiddenColumns.value.has(col))
|
||||
})
|
||||
|
||||
const filteredData = computed(() => {
|
||||
if (!filter.value.trim()) return data.value
|
||||
const search = filter.value.toLowerCase()
|
||||
return data.value.filter(row =>
|
||||
Object.values(row).some(val =>
|
||||
String(val).toLowerCase().includes(search)
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
const allRowsSelected = computed(() => {
|
||||
if (filteredData.value.length === 0) return false
|
||||
return filteredData.value.every((_, idx) => selectedRows.value.has(idx))
|
||||
})
|
||||
|
||||
function toggleColumn(column: string) {
|
||||
if (hiddenColumns.value.has(column)) {
|
||||
hiddenColumns.value.delete(column)
|
||||
} else {
|
||||
hiddenColumns.value.add(column)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleRow(idx: number) {
|
||||
if (selectedRows.value.has(idx)) {
|
||||
selectedRows.value.delete(idx)
|
||||
} else {
|
||||
selectedRows.value.add(idx)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAllRows() {
|
||||
if (allRowsSelected.value) {
|
||||
selectedRows.value.clear()
|
||||
} else {
|
||||
filteredData.value.forEach((_, idx) => selectedRows.value.add(idx))
|
||||
}
|
||||
}
|
||||
|
||||
function formatValue(value: any): string {
|
||||
if (value === null) return 'NULL'
|
||||
if (typeof value === 'object') return JSON.stringify(value)
|
||||
if (typeof value === 'string' && value.length > 100) {
|
||||
return value.substring(0, 100) + '...'
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
|
||||
async function copyCell(value: any, cellId: string) {
|
||||
const textToCopy = value === null ? 'NULL' :
|
||||
typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(textToCopy)
|
||||
copiedCell.value = cellId
|
||||
setTimeout(() => {
|
||||
copiedCell.value = null
|
||||
}, 1500)
|
||||
} catch (e) {
|
||||
console.error('Failed to copy:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function copyAll() {
|
||||
const rowsToUse = selectedRows.value.size > 0
|
||||
? filteredData.value.filter((_, idx) => selectedRows.value.has(idx))
|
||||
: filteredData.value
|
||||
|
||||
const dataToCopy = rowsToUse.map(row => {
|
||||
const filtered: Record<string, any> = {}
|
||||
visibleColumns.value.forEach(col => {
|
||||
filtered[col] = row[col]
|
||||
})
|
||||
return filtered
|
||||
})
|
||||
|
||||
if (dataToCopy.length === 0) return
|
||||
|
||||
try {
|
||||
const jsonText = JSON.stringify(dataToCopy, null, 2)
|
||||
await navigator.clipboard.writeText(jsonText)
|
||||
copiedAll.value = true
|
||||
setTimeout(() => {
|
||||
copiedAll.value = false
|
||||
}, 2000)
|
||||
} catch (e) {
|
||||
console.error('Failed to copy:', e)
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
filter.value = ''
|
||||
hiddenColumns.value.clear()
|
||||
selectedRows.value.clear()
|
||||
}
|
||||
|
||||
return {
|
||||
filter,
|
||||
hiddenColumns,
|
||||
selectedRows,
|
||||
copiedCell,
|
||||
copiedAll,
|
||||
filteredData,
|
||||
visibleColumns,
|
||||
allColumns,
|
||||
allRowsSelected,
|
||||
toggleColumn,
|
||||
toggleRow,
|
||||
toggleAllRows,
|
||||
copyCell,
|
||||
copyAll,
|
||||
reset,
|
||||
formatValue
|
||||
}
|
||||
}
|
||||
80
frontend/src/composables/database/useDatabaseApi.ts
Normal file
80
frontend/src/composables/database/useDatabaseApi.ts
Normal file
@@ -0,0 +1,80 @@
|
||||
import { ref } from 'vue'
|
||||
import type { TableInfo, TableSchema, DbStats } from '@/types/database'
|
||||
|
||||
const API_BASE = 'http://localhost:4101/api/database'
|
||||
|
||||
export function useDatabaseApi() {
|
||||
const tables = ref<TableInfo[]>([])
|
||||
const tableSchema = ref<TableSchema[]>([])
|
||||
const tableData = ref<any[]>([])
|
||||
const dbStats = ref<DbStats | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const totalRecords = ref(0)
|
||||
|
||||
async function fetchTables() {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/tables`)
|
||||
if (!res.ok) throw new Error('Failed to fetch tables')
|
||||
tables.value = await res.json()
|
||||
} catch (e: any) {
|
||||
error.value = e.message
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDbStats() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/stats`)
|
||||
if (!res.ok) throw new Error('Failed to fetch stats')
|
||||
dbStats.value = await res.json()
|
||||
} catch (e: any) {
|
||||
console.error('Error fetching stats:', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchTableSchema(tableName: string) {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/tables/${tableName}/schema`)
|
||||
if (!res.ok) throw new Error('Failed to fetch schema')
|
||||
tableSchema.value = await res.json()
|
||||
} catch (e: any) {
|
||||
console.error('Error fetching schema:', e)
|
||||
tableSchema.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchTableData(tableName: string, page: number, pageSize: number) {
|
||||
loading.value = true
|
||||
try {
|
||||
const offset = (page - 1) * pageSize
|
||||
const res = await fetch(`${API_BASE}/tables/${tableName}/data?limit=${pageSize}&offset=${offset}`)
|
||||
if (!res.ok) throw new Error('Failed to fetch data')
|
||||
const result = await res.json()
|
||||
tableData.value = result.rows
|
||||
totalRecords.value = result.total
|
||||
} catch (e: any) {
|
||||
console.error('Error fetching data:', e)
|
||||
tableData.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
tables,
|
||||
tableSchema,
|
||||
tableData,
|
||||
dbStats,
|
||||
loading,
|
||||
error,
|
||||
totalRecords,
|
||||
fetchTables,
|
||||
fetchDbStats,
|
||||
fetchTableSchema,
|
||||
fetchTableData
|
||||
}
|
||||
}
|
||||
53
frontend/src/composables/database/useQueryExecutor.ts
Normal file
53
frontend/src/composables/database/useQueryExecutor.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
const API_BASE = 'http://localhost:4101/api/database'
|
||||
|
||||
export function useQueryExecutor() {
|
||||
const queryText = ref('')
|
||||
const queryResult = ref<any[] | null>(null)
|
||||
const queryError = ref<string | null>(null)
|
||||
const queryLoading = ref(false)
|
||||
|
||||
async function executeQuery() {
|
||||
if (!queryText.value.trim()) return
|
||||
|
||||
queryLoading.value = true
|
||||
queryError.value = null
|
||||
queryResult.value = null
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/query`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: queryText.value })
|
||||
})
|
||||
|
||||
const result = await res.json()
|
||||
|
||||
if (!res.ok) {
|
||||
queryError.value = result.error || 'Query failed'
|
||||
} else {
|
||||
queryResult.value = result.rows
|
||||
}
|
||||
} catch (e: any) {
|
||||
queryError.value = e.message
|
||||
} finally {
|
||||
queryLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
queryText.value = ''
|
||||
queryResult.value = null
|
||||
queryError.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
queryText,
|
||||
queryResult,
|
||||
queryError,
|
||||
queryLoading,
|
||||
executeQuery,
|
||||
reset
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
23
frontend/src/types/database.ts
Normal file
23
frontend/src/types/database.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
export interface TableInfo {
|
||||
name: string
|
||||
count: number
|
||||
}
|
||||
|
||||
export interface TableSchema {
|
||||
name: string
|
||||
type: string
|
||||
notnull: boolean
|
||||
pk: boolean
|
||||
}
|
||||
|
||||
export interface DbStats {
|
||||
size: string
|
||||
tables: number
|
||||
totalRecords: number
|
||||
}
|
||||
|
||||
export interface PaginationState {
|
||||
currentPage: number
|
||||
pageSize: number
|
||||
totalRecords: number
|
||||
}
|
||||
@@ -3,6 +3,10 @@
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
},
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import { fileURLToPath } from 'url'
|
||||
import path from 'path'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
// Habilitar compilación de templates en runtime para componentes dinámicos
|
||||
'vue': 'vue/dist/vue.esm-bundler.js'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user