Мультиязночность + причесывание css
This commit is contained in:
@@ -14,6 +14,8 @@
|
||||
import { onMount, createEventDispatcher } from 'svelte';
|
||||
import { gitService } from '../../services/gitService';
|
||||
import { addToast as toast } from '../../lib/toasts.js';
|
||||
import { t } from '../../lib/i18n';
|
||||
import { Button, Select, Input } from '../../lib/ui';
|
||||
// [/SECTION]
|
||||
|
||||
// [SECTION: PROPS]
|
||||
@@ -107,61 +109,55 @@
|
||||
</script>
|
||||
|
||||
<!-- [SECTION: TEMPLATE] -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="relative">
|
||||
<select
|
||||
value={currentBranch}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-grow">
|
||||
<Select
|
||||
bind:value={currentBranch}
|
||||
on:change={handleSelect}
|
||||
disabled={loading}
|
||||
class="bg-white border rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{#each branches as branch}
|
||||
<option value={branch.name}>{branch.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if loading}
|
||||
<span class="absolute -right-6 top-1">
|
||||
<svg class="animate-spin h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
{/if}
|
||||
options={branches.map(b => ({ value: b.name, label: b.name }))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
on:click={() => showCreate = !showCreate}
|
||||
disabled={loading}
|
||||
class="text-blue-600 hover:text-blue-800 text-sm font-medium disabled:opacity-50"
|
||||
class="text-blue-600"
|
||||
>
|
||||
+ New Branch
|
||||
</button>
|
||||
+ {$t.git.new_branch}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{#if showCreate}
|
||||
<div class="flex items-center space-x-1 bg-gray-50 p-2 rounded border border-dashed">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={newBranchName}
|
||||
placeholder="branch-name"
|
||||
disabled={loading}
|
||||
class="border rounded px-2 py-1 text-sm w-full max-w-[150px]"
|
||||
/>
|
||||
<button
|
||||
<div class="flex items-end gap-2 bg-gray-50 p-3 rounded-lg border border-dashed border-gray-200">
|
||||
<div class="flex-grow">
|
||||
<Input
|
||||
bind:value={newBranchName}
|
||||
placeholder="branch-name"
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
on:click={handleCreate}
|
||||
disabled={loading || !newBranchName}
|
||||
class="bg-green-600 text-white px-3 py-1 rounded text-xs font-medium hover:bg-green-700 disabled:opacity-50"
|
||||
isLoading={loading}
|
||||
class="bg-green-600 hover:bg-green-700"
|
||||
>
|
||||
{loading ? '...' : 'Create'}
|
||||
</button>
|
||||
<button
|
||||
{$t.git.create}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
on:click={() => showCreate = false}
|
||||
disabled={loading}
|
||||
class="text-gray-500 hover:text-gray-700 text-xs px-2 py-1 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
{$t.common.cancel}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { gitService } from '../../services/gitService';
|
||||
import { addToast as toast } from '../../lib/toasts.js';
|
||||
import { t } from '../../lib/i18n';
|
||||
import { Button } from '../../lib/ui';
|
||||
// [/SECTION]
|
||||
|
||||
// [SECTION: PROPS]
|
||||
@@ -53,22 +55,22 @@
|
||||
</script>
|
||||
|
||||
<!-- [SECTION: TEMPLATE] -->
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-semibold mb-4 flex justify-between items-center">
|
||||
Commit History
|
||||
<button on:click={loadHistory} class="text-sm text-blue-600 hover:underline">Refresh</button>
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">
|
||||
{$t.git.history}
|
||||
</h3>
|
||||
<Button variant="ghost" size="sm" on:click={loadHistory} class="text-blue-600">
|
||||
{$t.git.refresh}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center space-x-2 text-gray-500">
|
||||
<svg class="animate-spin h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>Loading history...</span>
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
|
||||
</div>
|
||||
{:else if history.length === 0}
|
||||
<p class="text-gray-500 italic">No commits yet.</p>
|
||||
<p class="text-gray-500 italic text-center py-12">{$t.git.no_commits}</p>
|
||||
{:else}
|
||||
<div class="space-y-3 max-h-96 overflow-y-auto pr-2">
|
||||
{#each history as commit}
|
||||
|
||||
@@ -16,6 +16,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { gitService } from '../../services/gitService';
|
||||
import { addToast as toast } from '../../lib/toasts.js';
|
||||
import { t } from '../../lib/i18n';
|
||||
import { Button, Card, PageHeader, Select, Input } from '../../lib/ui';
|
||||
import BranchSelector from './BranchSelector.svelte';
|
||||
import CommitModal from './CommitModal.svelte';
|
||||
import CommitHistory from './CommitHistory.svelte';
|
||||
@@ -143,17 +145,16 @@
|
||||
{#if show}
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div class="bg-white p-6 rounded-lg shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-6 border-b pb-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold">Git Management: {dashboardTitle}</h2>
|
||||
<p class="text-sm text-gray-500">ID: {dashboardId}</p>
|
||||
<PageHeader title="{$t.git.management}: {dashboardTitle}">
|
||||
<div slot="subtitle" class="text-sm text-gray-500">ID: {dashboardId}</div>
|
||||
<div slot="actions">
|
||||
<button on:click={() => show = false} class="text-gray-400 hover:text-gray-600 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button on:click={() => show = false} class="text-gray-500 hover:text-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
{#if checkingStatus}
|
||||
<div class="flex justify-center py-12">
|
||||
@@ -161,95 +162,94 @@
|
||||
</div>
|
||||
{:else if !initialized}
|
||||
<div class="max-w-md mx-auto py-8">
|
||||
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
|
||||
<p class="text-sm text-blue-700">
|
||||
This dashboard is not yet linked to a Git repository.
|
||||
Please configure the repository details below.
|
||||
<Card>
|
||||
<p class="text-sm text-gray-600 mb-6">
|
||||
{$t.git.not_linked}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Git Server</label>
|
||||
<select bind:value={selectedConfigId} class="mt-1 block w-full border rounded p-2">
|
||||
{#each configs as config}
|
||||
<option value={config.id}>{config.name} ({config.provider})</option>
|
||||
{/each}
|
||||
</select>
|
||||
{#if configs.length === 0}
|
||||
<p class="text-xs text-red-500 mt-1">No Git servers configured. Go to Settings -> Git to add one.</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Remote Repository URL</label>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={remoteUrl}
|
||||
placeholder="https://github.com/org/repo.git"
|
||||
class="mt-1 block w-full border rounded p-2"
|
||||
|
||||
<div class="space-y-6">
|
||||
<Select
|
||||
label={$t.git.server}
|
||||
bind:value={selectedConfigId}
|
||||
options={configs.map(c => ({ value: c.id, label: `${c.name} (${c.provider})` }))}
|
||||
/>
|
||||
{#if configs.length === 0}
|
||||
<p class="text-xs text-red-500 -mt-4">No Git servers configured. Go to Settings -> Git to add one.</p>
|
||||
{/if}
|
||||
|
||||
<Input
|
||||
label={$t.git.remote_url}
|
||||
bind:value={remoteUrl}
|
||||
placeholder="https://github.com/org/repo.git"
|
||||
/>
|
||||
|
||||
<Button
|
||||
on:click={handleInit}
|
||||
disabled={loading || configs.length === 0}
|
||||
isLoading={loading}
|
||||
class="w-full"
|
||||
>
|
||||
{$t.git.init_repo}
|
||||
</Button>
|
||||
</div>
|
||||
<button
|
||||
on:click={handleInit}
|
||||
disabled={loading || configs.length === 0}
|
||||
class="w-full bg-blue-600 text-white py-2 rounded font-medium hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Initializing...' : 'Initialize Repository'}
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Left Column: Controls -->
|
||||
<div class="md:col-span-1 space-y-6">
|
||||
<section>
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Branch</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">{$t.git.branch}</h3>
|
||||
<BranchSelector {dashboardId} bind:currentBranch />
|
||||
</section>
|
||||
|
||||
<section class="space-y-2">
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Actions</h3>
|
||||
<button
|
||||
<section class="space-y-3">
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">{$t.git.actions}</h3>
|
||||
<Button
|
||||
variant="secondary"
|
||||
on:click={handleSync}
|
||||
disabled={loading}
|
||||
class="w-full flex items-center justify-center px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition"
|
||||
class="w-full"
|
||||
>
|
||||
Sync from Superset
|
||||
</button>
|
||||
<button
|
||||
{$t.git.sync}
|
||||
</Button>
|
||||
<Button
|
||||
on:click={() => showCommitModal = true}
|
||||
disabled={loading}
|
||||
class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-medium transition"
|
||||
class="w-full"
|
||||
>
|
||||
Commit Changes
|
||||
</button>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
{$t.git.commit}
|
||||
</Button>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
on:click={handlePull}
|
||||
disabled={loading}
|
||||
class="flex items-center justify-center px-4 py-2 border hover:bg-gray-50 rounded text-sm font-medium transition"
|
||||
class="border border-gray-200"
|
||||
>
|
||||
Pull
|
||||
</button>
|
||||
<button
|
||||
{$t.git.pull}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
on:click={handlePush}
|
||||
disabled={loading}
|
||||
class="flex items-center justify-center px-4 py-2 border hover:bg-gray-50 rounded text-sm font-medium transition"
|
||||
class="border border-gray-200"
|
||||
>
|
||||
Push
|
||||
</button>
|
||||
{$t.git.push}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Deployment</h3>
|
||||
<button
|
||||
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">{$t.git.deployment}</h3>
|
||||
<Button
|
||||
variant="primary"
|
||||
on:click={() => showDeployModal = true}
|
||||
disabled={loading}
|
||||
class="w-full flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm font-medium transition"
|
||||
class="w-full bg-green-600 hover:bg-green-700 focus-visible:ring-green-500"
|
||||
>
|
||||
Deploy to Environment
|
||||
</button>
|
||||
{$t.git.deploy}
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user