busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

ai base

Browse Source
This commit is contained in:
busya
2026-02-19 17:43:45 +03:00
parent c2a4c8062a
commit c8029ed309
28 changed files with 3369 additions and 1297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
frontend/src/lib/components/layout/TaskDrawer.svelte
View File

@@ -185,33 +185,32 @@
<!-- Drawer Overlay -->
{#if isOpen}
<div
class="drawer-overlay"
class="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
on:click={handleOverlayClick}
on:keydown={(e) => e.key === "Escape" && handleClose()}
on:keydown={(e) => e.key === 'Escape' && handleClose()}
role="button"
tabindex="0"
aria-label="Close drawer"
>
<!-- Drawer Panel -->
<div
class="drawer"
class="fixed right-0 top-0 h-full w-full max-w-[560px] bg-slate-900 shadow-[-8px_0_30px_rgba(0,0,0,0.3)] flex flex-col z-50 transition-transform duration-300 ease-out"
role="dialog"
aria-modal="true"
aria-label="Task drawer"
>
<!-- Header -->
<div class="drawer-header">
<div class="header-left">
<div class="flex items-center justify-between px-5 py-3.5 border-b border-slate-800 bg-slate-900">
<div class="flex items-center gap-2.5">
{#if !activeTaskId && recentTasks.length > 0}
<!-- Показываем индикатор что это режим списка -->
<span class="list-indicator">
<span class="flex items-center justify-center p-1.5 mr-1 text-cyan-400">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
</svg>
</span>
{:else if activeTaskId}
<button
class="back-btn"
class="flex items-center justify-center p-1.5 rounded-md text-slate-500 bg-transparent border-none cursor-pointer transition-all hover:text-slate-100 hover:bg-slate-800"
on:click={goBackToList}
aria-label="Back to task list"
>
@@ -228,20 +227,20 @@
</svg>
</button>
{/if}
<h2 class="drawer-title">
{activeTaskId ? ($t.tasks?.details_logs || "Task Details & Logs") : "Recent Tasks"}
<h2 class="text-sm font-semibold text-slate-100 tracking-tight">
{activeTaskId ? ($t.tasks?.details_logs || 'Task Details & Logs') : 'Recent Tasks'}
</h2>
{#if shortTaskId}
<span class="task-id-badge">{shortTaskId}…</span>
<span class="text-xs font-mono text-slate-500 bg-slate-800 px-2 py-0.5 rounded">{shortTaskId}…</span>
{/if}
{#if taskStatus}
<span class="status-badge {taskStatus.toLowerCase()}"
<span class="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-full {taskStatus.toLowerCase() === 'running' ? 'text-cyan-400 bg-cyan-400/10 border border-cyan-400/20' : taskStatus.toLowerCase() === 'success' ? 'text-green-400 bg-green-400/10 border border-green-400/20' : 'text-red-400 bg-red-400/10 border border-red-400/20'}"
>{taskStatus}</span
>
{/if}
</div>
<button
class="close-btn"
class="p-1.5 rounded-md text-slate-500 bg-transparent border-none cursor-pointer transition-all hover:text-slate-100 hover:bg-slate-800"
on:click={handleClose}
aria-label="Close drawer"
>
@@ -260,7 +259,7 @@
</div>
<!-- Content -->
<div class="drawer-content">
<div class="flex-1 overflow-hidden flex flex-col">
{#if activeTaskId}
<TaskLogViewer
inline={true}
@@ -269,31 +268,28 @@
{realTimeLogs}
/>
{:else if loadingTasks}
<!-- Loading State -->
<div class="loading-state">
<div class="spinner"></div>
<div class="flex flex-col items-center justify-center p-12 text-slate-500">
<div class="w-8 h-8 border-2 border-slate-200 border-t-blue-500 rounded-full animate-spin mb-4"></div>
<p>Loading tasks...</p>
</div>
{:else if recentTasks.length > 0}
<!-- Task List -->
<div class="task-list">
<h3 class="task-list-title">Recent Tasks</h3>
<div class="p-4">
<h3 class="text-sm font-semibold text-slate-100 mb-4 pb-2 border-b border-slate-800">Recent Tasks</h3>
{#each recentTasks as task}
<button
class="task-item"
class="flex items-center gap-3 w-full p-3 mb-2 bg-slate-800 border border-slate-700 rounded-lg cursor-pointer transition-all hover:bg-slate-700 hover:border-slate-600 text-left"
on:click={() => selectTask(task)}
>
<span class="task-item-id">{task.id?.substring(0, 8) || 'N/A'}...</span>
<span class="task-item-plugin">{task.plugin_id || 'Unknown'}</span>
<span class="task-item-status {task.status?.toLowerCase()}">{task.status || 'UNKNOWN'}</span>
<span class="font-mono text-xs text-slate-500">{task.id?.substring(0, 8) || 'N/A'}...</span>
<span class="flex-1 text-sm text-slate-100 font-medium">{task.plugin_id || 'Unknown'}</span>
<span class="text-xs font-semibold uppercase px-2 py-1 rounded-full {task.status?.toLowerCase() === 'running' || task.status?.toLowerCase() === 'pending' ? 'bg-cyan-500/15 text-cyan-400' : task.status?.toLowerCase() === 'completed' || task.status?.toLowerCase() === 'success' ? 'bg-green-500/15 text-green-400' : task.status?.toLowerCase() === 'failed' || task.status?.toLowerCase() === 'error' ? 'bg-red-500/15 text-red-400' : 'bg-slate-500/15 text-slate-400'}">{task.status || 'UNKNOWN'}</span>
</button>
{/each}
</div>
{:else}
<!-- Empty State -->
<div class="empty-state">
<div class="flex flex-col items-center justify-center h-full text-slate-500">
<svg
class="empty-icon"
class="w-12 h-12 mb-3 text-slate-700"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
@@ -304,16 +300,16 @@
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
/>
</svg>
<p>{$t.tasks?.select_task || "No recent tasks"}</p>
<p>{$t.tasks?.select_task || 'No recent tasks'}</p>
</div>
{/if}
</div>
<!-- Footer -->
<div class="drawer-footer">
<div class="footer-pulse"></div>
<p class="drawer-footer-text">
{$t.tasks?.footer_text || "Task continues running in background"}
<div class="flex items-center gap-2 justify-center px-4 py-2.5 border-t border-slate-800 bg-slate-900">
<div class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></div>
<p class="text-xs text-slate-500">
{$t.tasks?.footer_text || 'Task continues running in background'}
</p>
</div>
</div>
@@ -322,292 +318,4 @@
<!-- [/DEF:TaskDrawer:Component] -->
<style>
.drawer-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
z-index: 50;
}
.drawer {
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 560px;
background-color: #0f172a;
box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
z-index: 50;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.25rem;
border-bottom: 1px solid #1e293b;
background-color: #0f172a;
}
.header-left {
display: flex;
align-items: center;
gap: 0.625rem;
}
.drawer-title {
font-size: 0.875rem;
font-weight: 600;
color: #f1f5f9;
letter-spacing: -0.01em;
}
.task-id-badge {
font-size: 0.6875rem;
font-family: "JetBrains Mono", "Fira Code", monospace;
color: #64748b;
background-color: #1e293b;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
}
.status-badge {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
}
.status-badge.running {
color: #22d3ee;
background-color: rgba(34, 211, 238, 0.1);
border: 1px solid rgba(34, 211, 238, 0.2);
}
.status-badge.success {
color: #4ade80;
background-color: rgba(74, 222, 128, 0.1);
border: 1px solid rgba(74, 222, 128, 0.2);
}
.status-badge.failed,
.status-badge.error {
color: #f87171;
background-color: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.2);
}
.close-btn {
padding: 0.375rem;
border-radius: 0.375rem;
color: #64748b;
background: none;
border: none;
cursor: pointer;
transition: all 0.15s;
}
.close-btn:hover {
color: #f1f5f9;
background-color: #1e293b;
}
.back-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.375rem;
border-radius: 0.375rem;
color: #64748b;
background: none;
border: none;
cursor: pointer;
transition: all 0.15s;
margin-right: 0.25rem;
}
.back-btn:hover {
color: #f1f5f9;
background-color: #1e293b;
}
.list-indicator {
display: flex;
align-items: center;
justify-content: center;
padding: 0.375rem;
margin-right: 0.25rem;
color: #22d3ee;
}
.drawer-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.drawer-footer {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: center;
padding: 0.625rem 1rem;
border-top: 1px solid #1e293b;
background-color: #0f172a;
}
.footer-pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #22d3ee;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
.drawer-footer-text {
font-size: 0.75rem;
color: #64748b;
}
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
color: #6b7280;
}
.spinner {
width: 32px;
height: 32px;
border: 3px solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-bottom: 1rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.task-list {
padding: 1rem;
}
.task-list-title {
font-size: 0.875rem;
font-weight: 600;
color: #f1f5f9;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #1e293b;
}
.task-item {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem;
margin-bottom: 0.5rem;
background: #1e293b;
border: 1px solid #334155;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.task-item:hover {
background: #334155;
border-color: #475569;
}
.task-item-id {
font-family: monospace;
font-size: 0.75rem;
color: #64748b;
}
.task-item-plugin {
flex: 1;
font-size: 0.875rem;
color: #f1f5f9;
font-weight: 500;
}
.task-item-status {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
}
.task-item-status.running,
.task-item-status.pending {
background: rgba(34, 211, 238, 0.15);
color: #22d3ee;
}
.task-item-status.completed,
.task-item-status.success {
background: rgba(74, 222, 128, 0.15);
color: #4ade80;
}
.task-item-status.failed,
.task-item-status.error {
background: rgba(248, 113, 113, 0.15);
color: #f87171;
}
.task-item-status.cancelled {
background: rgba(100, 116, 139, 0.15);
color: #94a3b8;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #475569;
}
.empty-icon {
width: 3rem;
height: 3rem;
margin-bottom: 0.75rem;
color: #334155;
}
.empty-state p {
font-size: 0.875rem;
color: #475569;
}
</style>

325
frontend/src/routes/datasets/+page.svelte
View File

@@ -363,183 +363,19 @@
}
</script>
<style>
.container {
@apply max-w-7xl mx-auto px-4 py-6;
}
.header {
@apply flex items-center justify-between mb-6;
}
.title {
@apply text-2xl font-bold text-gray-900;
}
.env-selector {
@apply flex items-center space-x-4;
}
.env-dropdown {
@apply px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500;
}
.refresh-btn {
@apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors;
}
.search-input {
@apply px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500;
}
.error-banner {
@apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between;
}
.retry-btn {
@apply px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors;
}
.toolbar {
@apply flex items-center justify-between mb-4 gap-4;
}
.selection-buttons {
@apply flex items-center gap-2;
}
.dataset-grid {
@apply bg-white border border-gray-200 rounded-lg overflow-hidden;
}
.grid-header {
@apply grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 font-semibold text-sm text-gray-700;
}
.grid-row {
@apply grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 hover:bg-gray-50 transition-colors;
}
.grid-row:last-child {
@apply border-b-0;
}
.col-checkbox {
@apply col-span-1;
}
.col-table-name {
@apply col-span-3 font-medium text-gray-900;
}
.col-schema {
@apply col-span-2;
}
.col-mapping {
@apply col-span-2;
}
.col-task {
@apply col-span-3;
}
.col-actions {
@apply col-span-1;
}
.mapping-progress {
@apply w-24 h-2 rounded-full overflow-hidden;
}
.mapping-bar {
@apply h-full transition-all duration-300;
}
.task-status {
@apply inline-flex items-center space-x-2 cursor-pointer hover:text-blue-600 transition-colors;
}
.action-btn {
@apply px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors;
}
.action-btn.primary {
@apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
}
.empty-state {
@apply py-12 text-center text-gray-500;
}
.skeleton {
@apply animate-pulse bg-gray-200 rounded;
}
.floating-panel {
@apply fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4 transition-transform transform translate-y-full;
}
.floating-panel.visible {
@apply transform translate-y-0;
}
.modal-overlay {
@apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}
.modal {
@apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto;
}
.modal-header {
@apply px-6 py-4 border-b border-gray-200 flex items-center justify-between relative;
}
.close-modal-btn {
@apply absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all;
}
.modal-body {
@apply px-6 py-4;
}
.modal-footer {
@apply px-6 py-4 border-t border-gray-200 flex justify-end gap-3;
}
.pagination {
@apply flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200;
}
.pagination-info {
@apply text-sm text-gray-600;
}
.pagination-controls {
@apply flex items-center gap-2;
}
.page-btn {
@apply px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed;
}
.page-btn.active {
@apply bg-blue-600 text-white border-blue-600;
}
</style>
<div class="container">
<div class="max-w-[80rem] mx-auto px-4 pt-6 pb-6">
<!-- Header -->
<div class="header">
<h1 class="title">{$t.nav?.datasets || 'Datasets'}</h1>
<div class="env-selector">
<select class="env-dropdown" bind:value={selectedEnv} on:change={handleEnvChange}>
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">{$t.nav?.datasets || 'Datasets'}</h1>
<div class="flex items-center gap-4">
<select class="px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" bind:value={selectedEnv} on:change={handleEnvChange}>
{#each environments as env}
<option value={env.id}>{env.name}</option>
{/each}
</select>
<button class="refresh-btn" on:click={loadDatasets}>
<button class="px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700" on:click={loadDatasets}>
{$t.common?.refresh || 'Refresh'}
</button>
</div>
@@ -547,9 +383,9 @@
<!-- Error Banner -->
{#if error}
<div class="error-banner">
<div class="bg-red-100 border border-red-400 text-red-700 px-3 py-2 rounded mb-4 flex items-center justify-between">
<span>{error}</span>
<button class="retry-btn" on:click={loadDatasets}>
<button class="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700" on:click={loadDatasets}>
{$t.common?.retry || 'Retry'}
</button>
</div>
@@ -557,29 +393,29 @@
<!-- Loading State -->
{#if isLoading}
<div class="dataset-grid">
<div class="grid-header">
<div class="col-checkbox skeleton h-4"></div>
<div class="col-table-name skeleton h-4"></div>
<div class="col-schema skeleton h-4"></div>
<div class="col-mapping skeleton h-4"></div>
<div class="col-task skeleton h-4"></div>
<div class="col-actions skeleton h-4"></div>
<div class="bg-white border border-gray-200 rounded overflow-hidden">
<div class="grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 text-sm font-semibold text-gray-500">
<div class="col-span-1 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-3 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-2 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-2 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-3 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-1 animate-pulse bg-gray-200 rounded h-4"></div>
</div>
{#each Array(5) as _}
<div class="grid-row">
<div class="col-checkbox skeleton h-4"></div>
<div class="col-table-name skeleton h-4"></div>
<div class="col-schema skeleton h-4"></div>
<div class="col-mapping skeleton h-4"></div>
<div class="col-task skeleton h-4"></div>
<div class="col-actions skeleton h-4"></div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200">
<div class="col-span-1 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-3 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-2 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-2 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-3 animate-pulse bg-gray-200 rounded h-4"></div>
<div class="col-span-1 animate-pulse bg-gray-200 rounded h-4"></div>
</div>
{/each}
</div>
{:else if datasets.length === 0}
<!-- Empty State -->
<div class="empty-state">
<div class="py-12 text-center text-gray-500">
<svg class="w-16 h-16 mx-auto mb-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 3h18v18H3V3zm16 16V5H5v14h14z"/>
</svg>
@@ -587,17 +423,17 @@
</div>
{:else}
<!-- Toolbar -->
<div class="toolbar">
<div class="selection-buttons">
<div class="flex items-center justify-between mb-4 gap-4">
<div class="flex items-center gap-2">
<button
class="action-btn"
class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100"
on:click={handleSelectAll}
disabled={total === 0}
>
{isAllSelected ? 'Deselect All' : 'Select All'}
</button>
<button
class="action-btn"
class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100"
on:click={handleSelectVisible}
disabled={datasets.length === 0}
>
@@ -612,7 +448,7 @@
<div>
<input
type="text"
class="search-input"
class="px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Search datasets..."
on:input={handleSearch}
value={searchQuery}
@@ -621,22 +457,22 @@
</div>
<!-- Dataset Grid -->
<div class="dataset-grid">
<div class="bg-white border border-gray-200 rounded overflow-hidden">
<!-- Grid Header -->
<div class="grid-header">
<div class="col-checkbox"></div>
<div class="col-table-name">{$t.datasets?.table_name || 'Table Name'}</div>
<div class="col-schema">{$t.datasets?.schema || 'Schema'}</div>
<div class="col-mapping">{$t.datasets?.mapped_fields || 'Mapped Fields'}</div>
<div class="col-task">{$t.datasets?.last_task || 'Last Task'}</div>
<div class="col-actions">{$t.datasets?.actions || 'Actions'}</div>
<div class="grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 text-sm font-semibold text-gray-500">
<div class="col-span-1"></div>
<div class="col-span-3 font-medium text-gray-700">{$t.datasets?.table_name || 'Table Name'}</div>
<div class="col-span-2">{$t.datasets?.schema || 'Schema'}</div>
<div class="col-span-2">{$t.datasets?.mapped_fields || 'Mapped Fields'}</div>
<div class="col-span-3">{$t.datasets?.last_task || 'Last Task'}</div>
<div class="col-span-1">{$t.datasets?.actions || 'Actions'}</div>
</div>
<!-- Grid Rows -->
{#each datasets as dataset}
<div class="grid-row">
<div class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 hover:bg-gray-50 last:border-b-0">
<!-- Checkbox -->
<div class="col-checkbox">
<div class="col-span-1">
<input
type="checkbox"
checked={selectedIds.has(dataset.id)}
@@ -645,7 +481,7 @@
</div>
<!-- Table Name -->
<div class="col-table-name">
<div class="col-span-3 font-medium text-gray-900">
<a
href={`/datasets/${dataset.id}?env_id=${selectedEnv}`}
class="text-blue-600 hover:text-blue-800 hover:underline"
@@ -655,15 +491,15 @@
</div>
<!-- Schema -->
<div class="col-schema">
<div class="col-span-2">
{dataset.schema}
</div>
<!-- Mapping Progress -->
<div class="col-mapping">
<div class="col-span-2">
{#if dataset.mappedFields}
<div class="mapping-progress" title="{$t.datasets?.mapped_of_total || 'Mapped of total'}: {dataset.mappedFields.mapped} / {dataset.mappedFields.total}">
<div class="mapping-bar {getMappingProgressClass(dataset.mappedFields.mapped, dataset.mappedFields.total)}" style="width: {dataset.mappedFields.mapped / dataset.mappedFields.total * 100}%"></div>
<div class="w-24 h-2 rounded-full overflow-hidden" title="{$t.datasets?.mapped_of_total || 'Mapped of total'}: {dataset.mappedFields.mapped} / {dataset.mappedFields.total}">
<div class="h-full transition-all {getMappingProgressClass(dataset.mappedFields.mapped, dataset.mappedFields.total)}" style="width: {dataset.mappedFields.mapped / dataset.mappedFields.total * 100}%"></div>
</div>
{:else}
<span class="text-gray-400">-</span>
@@ -671,10 +507,10 @@
</div>
<!-- Last Task -->
<div class="col-task">
<div class="col-span-3">
{#if dataset.lastTask}
<div
class="task-status"
class="inline-flex items-center gap-2 cursor-pointer hover:text-blue-600"
on:click={() => handleTaskStatusClick(dataset)}
role="button"
tabindex="0"
@@ -699,10 +535,10 @@
</div>
<!-- Actions -->
<div class="col-actions">
<div class="col-span-1">
{#if dataset.actions.includes('map_columns')}
<button
class="action-btn primary"
class="px-1 py-0.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
on:click={() => handleAction(dataset, 'map_columns')}
aria-label={$t.datasets?.action_map_columns || 'Map Columns'}
>
@@ -716,20 +552,20 @@
<!-- Pagination -->
{#if totalPages > 1}
<div class="pagination">
<div class="pagination-info">
<div class="flex items-center justify-between px-3 py-3 bg-gray-50 border-t border-gray-200">
<div class="text-sm text-gray-500">
Showing {((currentPage - 1) * pageSize) + 1}-{Math.min(currentPage * pageSize, total)} of {total}
</div>
<div class="pagination-controls">
<div class="flex items-center gap-2">
<button
class="page-btn"
class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handlePageChange(1)}
disabled={currentPage === 1}
>
First
</button>
<button
class="page-btn"
class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
@@ -737,21 +573,21 @@
</button>
{#each Array.from({length: totalPages}, (_, i) => i + 1) as pageNum}
<button
class="page-btn {pageNum === currentPage ? 'active' : ''}"
class="px-2 py-1 text-sm border rounded {pageNum === currentPage ? 'bg-blue-600 text-white border-blue-600' : 'border-gray-300 hover:bg-gray-100'}"
on:click={() => handlePageChange(pageNum)}
>
{pageNum}
</button>
{/each}
<button
class="page-btn"
class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
Next
</button>
<button
class="page-btn"
class="px-2 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handlePageChange(totalPages)}
disabled={currentPage === totalPages}
>
@@ -760,7 +596,7 @@
</div>
<div>
<select
class="env-dropdown"
class="px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
value={pageSize}
on:change={handlePageSizeChange}
>
@@ -776,7 +612,7 @@
<!-- Floating Bulk Action Panel -->
{#if selectedIds.size > 0}
<div class="floating-panel visible">
<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg p-4 translate-y-0">
<div class="flex items-center justify-between max-w-7xl mx-auto">
<div class="flex items-center gap-4">
<span class="font-medium">
@@ -785,19 +621,19 @@
</div>
<div class="flex gap-3">
<button
class="action-btn primary"
class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
on:click={() => showMapColumnsModal = true}
>
Map Columns
</button>
<button
class="action-btn primary"
class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
on:click={() => showGenerateDocsModal = true}
>
Generate Docs
</button>
<button
class="action-btn"
class="px-3 py-1.5 border border-gray-300 rounded hover:bg-gray-100"
on:click={() => selectedIds.clear()}
>
Cancel
@@ -810,23 +646,23 @@
<!-- Map Columns Modal -->
{#if showMapColumnsModal}
<div class="modal-overlay" on:click={() => showMapColumnsModal = false}>
<div class="modal" on:click|stopPropagation>
<div class="modal-header">
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" on:click={() => showMapColumnsModal = false}>
<div class="bg-white rounded-lg shadow-2xl max-w-xl w-full m-4 max-h-[80vh] overflow-y-auto" on:click|stopPropagation>
<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between relative">
<h2 class="text-xl font-bold">Bulk Column Mapping</h2>
<button on:click={() => showMapColumnsModal = false} class="close-modal-btn" aria-label="Close modal">
<button on:click={() => showMapColumnsModal = false} class="absolute top-4 right-4 p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full" aria-label="Close modal">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="modal-body">
<div class="p-4">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">Source Type</label>
<select
class="env-dropdown w-full"
class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={mapSourceType}
>
<option value="postgresql">PostgreSQL Comments</option>
@@ -838,7 +674,7 @@
<label class="block text-sm font-medium mb-2">Connection ID</label>
<input
type="text"
class="search-input w-full"
class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter connection ID..."
bind:value={mapConnectionId}
/>
@@ -869,11 +705,11 @@
</div>
</div>
</div>
<div class="modal-footer">
<button class="action-btn" on:click={() => showMapColumnsModal = false}>Cancel</button>
<div class="px-4 py-3 border-t border-gray-200 flex justify-end gap-3">
<button class="px-3 py-1.5 border border-gray-300 rounded hover:bg-gray-100" on:click={() => showMapColumnsModal = false}>Cancel</button>
<button
type="button"
class="action-btn primary"
class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
on:click|preventDefault={handleBulkMapColumns}
disabled={selectedIds.size === 0 || (mapSourceType === 'postgresql' && !mapConnectionId) || (mapSourceType === 'xlsx' && (!mapFileData || mapFileData.length === 0))}
>
@@ -886,23 +722,23 @@
<!-- Generate Docs Modal -->
{#if showGenerateDocsModal}
<div class="modal-overlay" on:click={() => showGenerateDocsModal = false}>
<div class="modal" on:click|stopPropagation>
<div class="modal-header">
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" on:click={() => showGenerateDocsModal = false}>
<div class="bg-white rounded-lg shadow-2xl max-w-xl w-full m-4 max-h-[80vh] overflow-y-auto" on:click|stopPropagation>
<div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between relative">
<h2 class="text-xl font-bold">Bulk Documentation Generation</h2>
<button on:click={() => showGenerateDocsModal = false} class="close-modal-btn" aria-label="Close modal">
<button on:click={() => showGenerateDocsModal = false} class="absolute top-4 right-4 p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full" aria-label="Close modal">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="modal-body">
<div class="p-4">
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-2">LLM Provider</label>
<select
class="env-dropdown w-full"
class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={llmProvider}
>
<option value="">Select LLM provider...</option>
@@ -925,10 +761,10 @@
</div>
</div>
</div>
<div class="modal-footer">
<button class="action-btn" on:click={() => showGenerateDocsModal = false}>Cancel</button>
<div class="px-4 py-3 border-t border-gray-200 flex justify-end gap-3">
<button class="px-3 py-1.5 border border-gray-300 rounded hover:bg-gray-100" on:click={() => showGenerateDocsModal = false}>Cancel</button>
<button
class="action-btn primary"
class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
on:click={handleBulkGenerateDocs}
disabled={!llmProvider || selectedIds.size === 0}
>
@@ -940,4 +776,5 @@
{/if}
</div>
<!-- [/DEF:DatasetHub:Page] -->