Skip to content

Commit 2d4e926

Browse files
milanmajchrakmilanmajchrak
committed
Small changes to make it prettier and mor intuitive
1 parent 55996ba commit 2d4e926

6 files changed

Lines changed: 349 additions & 80 deletions

File tree

‎src/app/admin/admin-update-config/admin-update-config-routing.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const routes: Routes = [
1010
component: AdminUpdateConfigComponent,
1111
resolve: { breadcrumb: I18nBreadcrumbResolver },
1212
canActivate: [SiteAdministratorGuard],
13-
data: { title: 'admin.update-config.title', breadcrumbKey: 'admin.update-config' }
13+
data: { title: 'admin.update-config.title', breadcrumbKey: 'admin.update-config.breadcrumbs' }
1414
}
1515
];
1616

‎src/app/admin/admin-update-config/admin-update-config.component.html‎

Lines changed: 17 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@ <h5 class="card-title">
5858
<div class="file-info mt-3 mt-md-0 p-3 bg-light rounded">
5959
<h6 class="mb-2">
6060
<i class="fas fa-info-circle text-info me-1"></i>
61-
File Information
61+
{{ 'admin.update-config.file-info.title' | translate }}
6262
</h6>
6363
<small class="text-muted">
64-
<strong>📁 File:</strong> {{ selectedFile.fileName }}<br>
65-
<strong>📊 Size:</strong> {{ selectedFile.size | number }} bytes<br>
66-
<strong>🕐 Modified:</strong> {{ selectedFile.lastModified | date:'short' }}<br>
67-
<strong>⚡ Status:</strong>
68-
<span class="badge bg-success">Ready for editing</span>
64+
<strong>{{ 'admin.update-config.file-info.name' | translate }}:</strong> {{ selectedFile.fileName }}<br>
65+
<strong>{{ 'admin.update-config.file-info.size' | translate }}:</strong> {{ selectedFile.size | number }} {{ 'admin.update-config.file-info.bytes' | translate }}<br>
66+
<strong>{{ 'admin.update-config.file-info.modified' | translate }}:</strong> {{ selectedFile.lastModified | date:'short' }}<br>
67+
<strong>{{ 'admin.update-config.file-info.status' | translate }}:</strong>
68+
<span class="badge bg-success">{{ 'admin.update-config.file-info.ready' | translate }}</span>
6969
</small>
7070
</div>
7171
</div>
@@ -81,7 +81,7 @@ <h6 class="mb-2">
8181
<p class="mt-2">{{ 'admin.update-config.loading-content' | translate }}</p>
8282
</div>
8383

84-
<!-- XML Editor Card -->
84+
<!-- Configuration Editor Card -->
8585
<div *ngIf="selectedFile && !loading" class="card">
8686
<div class="card-body">
8787
<div class="d-flex justify-content-between align-items-center mb-3">
@@ -96,26 +96,26 @@ <h5 class="card-title mb-0">
9696
class="btn btn-outline-secondary btn-lg"
9797
(click)="resetContent()"
9898
[disabled]="!hasUnsavedChanges() || loading || saving"
99-
title="Reset to last saved version">
99+
[title]="'admin.update-config.buttons.undo.tooltip' | translate">
100100
<i class="fas fa-undo me-2"></i>
101-
Undo Changes
101+
{{ 'admin.update-config.buttons.undo' | translate }}
102102
</button>
103103
<button
104104
class="btn btn-outline-warning btn-lg"
105105
(click)="resetToOriginalFile()"
106106
[disabled]="loading || saving"
107-
title="Reload file from config/config-be/ directory">
107+
[title]="'admin.update-config.buttons.reload.tooltip' | translate">
108108
<i class="fas fa-sync me-2"></i>
109-
Reload File
109+
{{ 'admin.update-config.buttons.reload' | translate }}
110110
</button>
111111
<button
112112
class="btn btn-success btn-lg px-4"
113113
(click)="saveFile()"
114114
[disabled]="!hasUnsavedChanges() || loading || saving"
115-
title="Save changes directly to config/config-be/ directory">
115+
[title]="'admin.update-config.buttons.save.tooltip' | translate">
116116
<i class="fas fa-save me-2" *ngIf="!saving"></i>
117117
<i class="fas fa-spinner fa-spin me-2" *ngIf="saving"></i>
118-
<strong>{{ saving ? 'Saving to File...' : 'Save to File' }}</strong>
118+
<strong>{{ saving ? ('admin.update-config.buttons.saving' | translate) : ('admin.update-config.buttons.save' | translate) }}</strong>
119119
</button>
120120
</div>
121121
</div>
@@ -124,8 +124,8 @@ <h5 class="card-title mb-0">
124124
<div class="alert alert-info mb-3 d-flex align-items-center">
125125
<i class="fas fa-cogs me-2 text-primary"></i>
126126
<div>
127-
<strong>Configuration Editor</strong><br>
128-
<small>Directly editing files in <code>config/config-be/{{ selectedFile?.fileName }}</code>. Changes are saved immediately to the configuration directory.</small>
127+
<strong>{{ 'admin.update-config.editor.notice.title' | translate }}</strong><br>
128+
<small>{{ 'admin.update-config.editor.notice.description' | translate:{ fileName: selectedFile?.fileName } }}</small>
129129
</div>
130130
</div>
131131

@@ -143,7 +143,7 @@ <h5 class="card-title mb-0">
143143
</label>
144144
<textarea
145145
id="xmlContent"
146-
class="form-control font-monospace xml-editor"
146+
class="form-control font-monospace config-editor"
147147
[(ngModel)]="fileContent"
148148
(ngModelChange)="onContentChange()"
149149
placeholder="{{ 'admin.update-config.editor.placeholder' | translate }}"
@@ -160,42 +160,7 @@ <h5 class="card-title mb-0">
160160
</div>
161161
</div>
162162

163-
<!-- Help Section -->
164-
<div class="card mt-4">
165-
<div class="card-body">
166-
<h5 class="card-title">
167-
<i class="fas fa-info-circle text-info me-2"></i>
168-
{{ 'admin.update-config.help.title' | translate }}
169-
</h5>
170-
171-
<div class="row">
172-
<div class="col-md-6">
173-
<h6>{{ 'admin.update-config.help.important.title' | translate }}</h6>
174-
<ul class="list-unstyled">
175-
<li class="mb-2">
176-
<i class="fas fa-exclamation-triangle text-warning me-1"></i>
177-
{{ 'admin.update-config.help.important.backup' | translate }}
178-
</li>
179-
<li class="mb-2">
180-
<i class="fas fa-server text-info me-1"></i>
181-
{{ 'admin.update-config.help.important.restart' | translate }}
182-
</li>
183-
<li class="mb-2">
184-
<i class="fas fa-shield-alt text-success me-1"></i>
185-
{{ 'admin.update-config.help.important.validation' | translate }}
186-
</li>
187-
</ul>
188-
</div>
189-
<div class="col-md-6">
190-
<h6>{{ 'admin.update-config.help.allowed-files.title' | translate }}</h6>
191-
<p class="text-muted small">
192-
{{ 'admin.update-config.help.allowed-files.description' | translate }}
193-
</p>
194-
<code class="small">/config/config-be/*.xml</code>
195-
</div>
196-
</div>
197-
</div>
198-
</div>
163+
199164
</div>
200165
</div>
201166
</div>

‎src/app/admin/admin-update-config/admin-update-config.component.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
font-weight: 600;
1414
}
1515

16-
.xml-editor {
16+
.config-editor {
1717
font-family: 'Courier New', Courier, monospace;
1818
font-size: 0.875rem;
1919
line-height: 1.5;
@@ -23,19 +23,19 @@
2323
min-height: 300px;
2424
}
2525

26-
.xml-editor:focus {
26+
.config-editor:focus {
2727
background-color: #ffffff;
2828
border-color: #80bdff;
2929
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
3030
outline: none;
3131
}
3232

33-
.xml-editor.is-invalid {
33+
.config-editor.is-invalid {
3434
border-color: #dc3545;
3535
background-color: #fff5f5;
3636
}
3737

38-
.xml-editor.is-invalid:focus {
38+
.config-editor.is-invalid:focus {
3939
border-color: #dc3545;
4040
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
4141
}

‎src/app/admin/admin-update-config/admin-update-config.component.ts‎

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
22
import { AdminUpdateConfigService, ConfigFile } from './admin-update-config.service';
33
import { Observable } from 'rxjs';
44
import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -46,30 +46,32 @@ export class AdminUpdateConfigComponent implements OnInit {
4646
constructor(
4747
private configService: AdminUpdateConfigService,
4848
private notificationsService: NotificationsService,
49-
private translateService: TranslateService
49+
private translateService: TranslateService,
50+
private cdr: ChangeDetectorRef
5051
) { }
5152

5253
ngOnInit(): void {
5354
this.loadConfigFiles();
5455
}
5556

5657
/**
57-
* Load available config files from /config/config-be/
58+
* Load available config files
5859
*/
5960
loadConfigFiles(): void {
6061
this.loading = true;
6162
this.configService.getConfigFiles().subscribe({
6263
next: (files) => {
6364
this.configFiles = files;
6465
this.loading = false;
66+
this.cdr.detectChanges(); // Force change detection
6567
},
6668
error: (error) => {
67-
6869
this.loading = false;
6970
this.notificationsService.error(
7071
this.translateService.instant('admin.update-config.error.load-files.title'),
7172
this.translateService.instant('admin.update-config.error.load-files.message')
7273
);
74+
this.cdr.detectChanges(); // Force change detection
7375
}
7476
});
7577
}
@@ -82,10 +84,12 @@ export class AdminUpdateConfigComponent implements OnInit {
8284
this.selectedFile = null;
8385
this.fileContent = '';
8486
this.originalContent = '';
87+
this.cdr.detectChanges(); // Force change detection when clearing selection
8588
return;
8689
}
8790

8891
this.selectedFile = file;
92+
this.cdr.detectChanges(); // Force change detection when file is selected
8993
this.loadFileContent(file.fileName);
9094
}
9195

@@ -94,17 +98,23 @@ export class AdminUpdateConfigComponent implements OnInit {
9498
*/
9599
loadFileContent(filename: string): void {
96100
this.loading = true;
101+
this.cdr.detectChanges(); // Force change detection to show loading spinner
97102

98103
// Instant subscription - no delays!
99104
this.configService.getConfigFileContent(filename).subscribe({
100105
next: (content) => {
101106
this.fileContent = content;
102107
this.originalContent = content;
103108
this.loading = false;
109+
this.cdr.detectChanges(); // Force change detection to hide loading spinner
104110
},
105111
error: (error) => {
106112
this.loading = false;
107-
this.notificationsService.error('Load Failed', `Could not load ${filename}`);
113+
this.notificationsService.error(
114+
this.translateService.instant('admin.update-config.error.load-content.title'),
115+
this.translateService.instant('admin.update-config.error.load-content.message', { fileName: filename })
116+
);
117+
this.cdr.detectChanges(); // Force change detection on error
108118
}
109119
});
110120
}
@@ -117,33 +127,36 @@ export class AdminUpdateConfigComponent implements OnInit {
117127
}
118128

119129
/**
120-
* Save the current config file to /config/config-be/
130+
* Save the current config file
121131
*/
122132
saveFile(): void {
123133
if (!this.selectedFile || this.saving) {
124134
return;
125135
}
126136

127137
this.saving = true;
138+
this.cdr.detectChanges(); // Force change detection to show saving state
128139

129140
this.configService.saveConfigFile(this.selectedFile.fileName, this.fileContent).subscribe({
130141
next: (result) => {
131142
this.saving = false;
132143
this.originalContent = this.fileContent;
133144

134145
this.notificationsService.success(
135-
'File Saved Successfully!',
136-
`${this.selectedFile?.fileName} has been updated successfully`
146+
this.translateService.instant('admin.update-config.success.save.title'),
147+
this.translateService.instant('admin.update-config.success.save.message', { fileName: this.selectedFile?.fileName })
137148
);
138149

139150
this.loadConfigFiles();
151+
this.cdr.detectChanges(); // Force change detection after save
140152
},
141153
error: (error) => {
142154
this.saving = false;
143155
this.notificationsService.error(
144-
'Save Failed',
145-
`Could not save ${this.selectedFile?.fileName}`
156+
this.translateService.instant('admin.update-config.error.save.title'),
157+
this.translateService.instant('admin.update-config.error.save.message', { fileName: this.selectedFile?.fileName })
146158
);
159+
this.cdr.detectChanges(); // Force change detection on error
147160
}
148161
});
149162
}
@@ -156,14 +169,15 @@ export class AdminUpdateConfigComponent implements OnInit {
156169
}
157170

158171
/**
159-
* Reset to original file (reload from config/config-be/)
172+
* Reset to original file
160173
*/
161174
resetToOriginalFile(): void {
162175
if (!this.selectedFile) {
163176
return;
164177
}
165178

166179
this.loading = true;
180+
this.cdr.detectChanges(); // Force change detection to show loading state
167181

168182
this.configService.reloadOriginalContent(this.selectedFile.fileName).subscribe({
169183
next: (originalContent) => {
@@ -172,13 +186,18 @@ export class AdminUpdateConfigComponent implements OnInit {
172186
this.loading = false;
173187

174188
this.notificationsService.success(
175-
'File Reloaded!',
176-
`Reloaded ${this.selectedFile?.fileName} from server`
189+
this.translateService.instant('admin.update-config.success.reload.title'),
190+
this.translateService.instant('admin.update-config.success.reload.message', { fileName: this.selectedFile?.fileName })
177191
);
192+
this.cdr.detectChanges(); // Force change detection after reload
178193
},
179194
error: (error) => {
180195
this.loading = false;
181-
this.notificationsService.error('Reload Failed', 'Could not reload original file');
196+
this.notificationsService.error(
197+
this.translateService.instant('admin.update-config.error.reload.title'),
198+
this.translateService.instant('admin.update-config.error.reload.message')
199+
);
200+
this.cdr.detectChanges(); // Force change detection on error
182201
}
183202
});
184203
}

0 commit comments

Comments
 (0)