Skip to content

Commit 41fa00b

Browse files
s00ds00d
committed
feat(config): refactor ConfigView to use ConfigCard and LocaleTable components
1 parent d536508 commit 41fa00b

File tree

1 file changed

+66
-194
lines changed

1 file changed

+66
-194
lines changed

‎client/views/ConfigView.vue‎

Lines changed: 66 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,192 +1,108 @@
11
<template>
2-
<div
3-
class="h-screen overflow-auto p-6"
4-
style="padding-top: 70px"
5-
>
2+
<div class="config-view">
63
<Loader v-if="isLoading" />
74

85
<div
96
v-else
107
class="space-y-6"
118
>
129
<!-- General Settings Card -->
13-
<NCard>
14-
<div class="settings-group p-6">
15-
<div class="group-header">
16-
<span class="icon">⚙️</span>
17-
<h3 class="group-title">
18-
General Configuration
19-
</h3>
10+
<ConfigCard
11+
title="General Configuration"
12+
icon="⚙️"
13+
>
14+
<div class="settings-grid">
15+
<div class="config-row">
16+
<span class="config-label">Default Locale</span>
17+
<span class="config-value">{{ configs.defaultLocale || '—' }}</span>
2018
</div>
21-
<div class="settings-grid">
22-
<div class="config-row">
23-
<span class="config-label">Default Locale</span>
24-
<span class="config-value">{{ configs.defaultLocale || '—' }}</span>
25-
</div>
26-
<div class="config-row">
27-
<span class="config-label">Routing Strategy</span>
28-
<span class="config-value capitalize">{{ configs.strategy || '—' }}</span>
29-
</div>
30-
<div class="config-row">
31-
<span class="config-label">Fallback Locale</span>
32-
<span class="config-value">{{ configs.fallbackLocale || '—' }}</span>
33-
</div>
34-
<div class="config-row">
35-
<span class="config-label">Debug Mode</span>
36-
<span
37-
class="config-value"
38-
:class="configs.debug ? 'text-green-600' : 'text-red-600'"
39-
>
40-
{{ configs.debug ? 'Active' : 'Inactive' }}
41-
</span>
42-
</div>
19+
<div class="config-row">
20+
<span class="config-label">Routing Strategy</span>
21+
<span class="config-value capitalize">{{ configs.strategy || '—' }}</span>
4322
</div>
44-
</div>
45-
</NCard>
46-
47-
<!-- Locales Table Card -->
48-
<NCard class="!rounded-xl shadow-lg !border-0">
49-
<div class="settings-group p-6">
50-
<div class="group-header">
51-
<span class="icon">🌍</span>
52-
<h3 class="group-title">
53-
Configured Locales
54-
</h3>
23+
<div class="config-row">
24+
<span class="config-label">Fallback Locale</span>
25+
<span class="config-value">{{ configs.fallbackLocale || '—' }}</span>
5526
</div>
56-
<div class="locale-table-container">
57-
<table class="modern-table">
58-
<thead>
59-
<tr>
60-
<th
61-
v-for="header in localeHeaders"
62-
:key="header.key"
63-
>
64-
{{ header.label }}
65-
</th>
66-
</tr>
67-
</thead>
68-
<tbody>
69-
<tr
70-
v-for="locale in configs.locales"
71-
:key="locale.code"
72-
class="hover-highlight"
73-
>
74-
<td>
75-
<span class="locale-code">{{ locale.code }}</span>
76-
</td>
77-
<td>{{ locale.displayName || '—' }}</td>
78-
<td>{{ locale.iso || '—' }}</td>
79-
<td>
80-
<span
81-
class="dir-indicator"
82-
:data-dir="locale.dir || 'ltr'"
83-
>
84-
{{ locale.dir?.toUpperCase() || 'LTR' }}
85-
</span>
86-
</td>
87-
<td>{{ locale.baseUrl || '—' }}</td>
88-
<td>
89-
<span
90-
class="status-pill"
91-
:class="locale.disabled ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'"
92-
>
93-
{{ locale.disabled ? 'Disabled' : 'Active' }}
94-
</span>
95-
</td>
96-
</tr>
97-
</tbody>
98-
</table>
27+
<div class="config-row">
28+
<span class="config-label">Debug Mode</span>
29+
<StatusIndicator
30+
:status="configs.debug ? 'enabled' : 'disabled'"
31+
:label="configs.debug ? 'Active' : 'Inactive'"
32+
/>
9933
</div>
10034
</div>
101-
</NCard>
35+
</ConfigCard>
36+
37+
<!-- Locales Table Card -->
38+
<ConfigCard
39+
title="Configured Locales"
40+
icon="🌍"
41+
>
42+
<LocaleTable :locales="configs.locales || []" />
43+
</ConfigCard>
10244

10345
<!-- Advanced Settings Card -->
104-
<NCard class="!rounded-xl shadow-lg !border-0">
105-
<div class="settings-group p-6">
106-
<div class="group-header">
107-
<span class="icon">🔧</span>
108-
<h3 class="group-title">
109-
Advanced Configuration
110-
</h3>
46+
<ConfigCard
47+
title="Advanced Configuration"
48+
icon="🔧"
49+
>
50+
<div class="settings-grid">
51+
<div class="config-row">
52+
<span class="config-label">Auto Language Detection</span>
53+
<StatusIndicator
54+
:status="configs.autoDetectLanguage ? 'enabled' : 'disabled'"
55+
:label="configs.autoDetectLanguage ? 'Enabled' : 'Disabled'"
56+
/>
11157
</div>
112-
<div class="settings-grid">
113-
<div class="config-row">
114-
<span class="config-label">Auto Language Detection</span>
115-
<span class="config-value">
116-
<span
117-
class="status-dot"
118-
:class="configs.autoDetectLanguage ? 'bg-green-500' : 'bg-red-500'"
119-
/>
120-
{{ configs.autoDetectLanguage ? 'Enabled' : 'Disabled' }}
121-
</span>
122-
</div>
123-
<div class="config-row">
124-
<span class="config-label">Translation Directory</span>
125-
<span class="config-value font-mono text-sm">
126-
{{ configs.translationDir || '—' }}
127-
</span>
128-
</div>
129-
<div class="config-row">
130-
<span class="config-label">API Base URL</span>
131-
<span class="config-value font-mono text-sm text-blue-600">
132-
{{ configs.apiBaseUrl || '—' }}
133-
</span>
134-
</div>
135-
<div class="config-row">
136-
<span class="config-label">Locale Cookie</span>
137-
<span class="config-value font-mono text-sm">
138-
{{ configs.localeCookie || '—' }}
139-
</span>
140-
</div>
58+
<div class="config-row">
59+
<span class="config-label">Translation Directory</span>
60+
<span class="config-value font-mono text-sm">
61+
{{ configs.translationDir || '—' }}
62+
</span>
63+
</div>
64+
<div class="config-row">
65+
<span class="config-label">API Base URL</span>
66+
<span class="config-value font-mono text-sm text-blue-600">
67+
{{ configs.apiBaseUrl || '—' }}
68+
</span>
69+
</div>
70+
<div class="config-row">
71+
<span class="config-label">Locale Cookie</span>
72+
<span class="config-value font-mono text-sm">
73+
{{ configs.localeCookie || '—' }}
74+
</span>
14175
</div>
14276
</div>
143-
</NCard>
77+
</ConfigCard>
14478
</div>
14579
</div>
14680
</template>
14781

14882
<script setup lang="ts">
14983
import { useI18nStore } from '../stores/useI18nStore'
15084
import Loader from '../components/Loader.vue'
85+
import ConfigCard from '../components/ConfigCard.vue'
86+
import LocaleTable from '../components/LocaleTable.vue'
87+
import StatusIndicator from '../components/StatusIndicator.vue'
15188
15289
const {
15390
isLoading,
15491
configs,
15592
} = useI18nStore()
156-
157-
const localeHeaders = [
158-
{ key: 'code', label: 'Code' },
159-
{ key: 'name', label: 'Display Name' },
160-
{ key: 'iso', label: 'ISO Code' },
161-
{ key: 'dir', label: 'Direction' },
162-
{ key: 'baseUrl', label: 'Base URL' },
163-
{ key: 'status', label: 'Status' },
164-
]
16593
</script>
16694

16795
<style scoped>
168-
.settings-group {
169-
@apply space-y-4;
170-
}
171-
172-
.group-header {
173-
@apply flex items-center mb-4 pb-4 border-b border-gray-100;
174-
}
175-
176-
.icon {
177-
@apply text-2xl mr-3;
178-
}
179-
180-
.group-title {
181-
@apply text-xl font-semibold text-gray-800;
96+
.config-view {
97+
@apply h-full overflow-auto p-4;
18298
}
18399
184100
.settings-grid {
185-
@apply grid gap-4;
101+
@apply grid gap-3;
186102
}
187103
188104
.config-row {
189-
@apply flex items-center justify-between py-3 px-4 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors;
105+
@apply flex items-center justify-between py-2 px-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors;
190106
}
191107
192108
.config-label {
@@ -196,48 +112,4 @@ const localeHeaders = [
196112
.config-value {
197113
@apply text-sm text-gray-800;
198114
}
199-
200-
.modern-table {
201-
@apply w-full border-collapse;
202-
}
203-
204-
.modern-table th {
205-
@apply px-4 py-3 text-left text-sm font-semibold text-gray-700 bg-gray-50;
206-
}
207-
208-
.modern-table td {
209-
@apply px-4 py-3 text-sm text-gray-600 border-t border-gray-100;
210-
}
211-
212-
.hover-highlight:hover {
213-
@apply bg-gray-50;
214-
}
215-
216-
.locale-code {
217-
@apply font-mono text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded;
218-
}
219-
220-
.dir-indicator {
221-
@apply inline-block px-2 py-1 rounded-full text-xs font-medium;
222-
}
223-
224-
.dir-indicator[data-dir="ltr"] {
225-
@apply bg-purple-100 text-purple-800;
226-
}
227-
228-
.dir-indicator[data-dir="rtl"] {
229-
@apply bg-orange-100 text-orange-800;
230-
}
231-
232-
.status-pill {
233-
@apply px-2.5 py-0.5 rounded-full text-xs font-medium;
234-
}
235-
236-
.status-dot {
237-
@apply inline-block w-2 h-2 rounded-full mr-2;
238-
}
239-
240-
.locale-table-container {
241-
@apply border rounded-lg overflow-hidden shadow-sm;
242-
}
243115
</style>

0 commit comments

Comments
 (0)