Skip to content

Commit b06ac0f

Browse files
walter-bdwalter-bd
authored
Fixed bug on non expression mode and add some improvements (#63)
* Fixed add new plugin template error * Changes to add filter on template search * Changes in the display to avoid errors * Added template filter on non-expression and fixed bug for rendering non expression * Added again loading progress bar
1 parent e5b5a1a commit b06ac0f

9 files changed

+158
-42
lines changed

‎src/app/components/dialog-new-plugin/dialog-new-plugin.component.html

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,28 @@ <h2 class="margin-bottom-5-i" mat-dialog-title>
1010
</h2>
1111

1212
<mat-divider class="margin-bottom-20-i"></mat-divider>
13+
<div [fxShow]="loading" fxFlex fxLayoutAlign="center center">
14+
<p fxFlex="50">
15+
<mat-progress-bar color="accent" mode="indeterminate"></mat-progress-bar>
16+
</p>
17+
</div>
1318

14-
<div [fxShow]="loading" fxFlex fxLayoutAlign="center center">
15-
<p fxFlex="50">
16-
<mat-progress-bar color="accent" mode="indeterminate"></mat-progress-bar>
17-
</p>
18-
</div>
19-
20-
<mat-dialog-content class="mat-typography" fxLayout="row" fxLayoutAlign="center start" *ngIf="!loading">
21-
<div fxFlex="90">
19+
<mat-dialog-content class="mat-typography" fxLayout="row" fxLayoutAlign="center start" *ngIf="!loading">
20+
<div fxFlex="90">
2221
<form [formGroup]="form">
23-
<!-- Dropdown for Plugin names -->
24-
<div class="margin-bottom-10" fxLayout="row" fxLayoutAlign="center center" *ngIf="!editMode">
25-
<mat-form-field appearance="fill" class="margin-bottom-10" color="accent" fxFlex="80">
26-
<mat-label>{{'text.templates' | translate}}</mat-label>
27-
<mat-select (selectionChange)="onPluginChange($event)">
28-
<mat-option *ngFor="let plugin of plugins" [value]="plugin.id">
22+
<!-- Dropdown for Plugin names -->
23+
<div class="margin-bottom-10" fxLayout="row" fxLayoutAlign="center center" *ngIf="!editMode">
24+
<mat-form-field appearance="fill" class="margin-bottom-10" color="accent" fxFlex="80">
25+
<mat-label>{{'text.templates' | translate}}</mat-label>
26+
<input matInput [formControl]="searchControl" [matAutocomplete]="auto" />
27+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onPluginChange($event)" [displayWith]="displayFn">
28+
<mat-option *ngFor="let plugin of filteredPlugins" [value]="plugin.id">
2929
({{ plugin.name }}) {{ plugin.instance_name }}
3030
</mat-option>
31-
</mat-select>
32-
<mat-hint>{{'text.templates_hint' | translate}}</mat-hint>
33-
</mat-form-field>
34-
</div>
35-
31+
</mat-autocomplete>
32+
<mat-hint>{{'text.templates_hint' | translate}}</mat-hint>
33+
</mat-form-field>
34+
</div>
3635
<mat-divider class="margin-bottom-20-i" *ngIf="!editMode"></mat-divider>
3736

3837
<!--Nombre-->

‎src/app/components/dialog-new-plugin/dialog-new-plugin.component.ts

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {COMMA, ENTER} from '@angular/cdk/keycodes';
22
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
3-
import {FormBuilder, Validators} from '@angular/forms';
3+
import {FormBuilder, Validators, FormControl} from '@angular/forms';
44
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
55
import {MatChipInputEvent} from '@angular/material/chips';
66
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
@@ -34,6 +34,7 @@ export class DialogNewPluginComponent implements OnInit, OnDestroy {
3434
formValid = false;
3535
defaultProtocols = ['http', 'https', 'tcp', 'tls', 'udp', 'grpc', 'grpcs'];
3636
validProtocols = this.defaultProtocols;
37+
searchControl = new FormControl('');
3738
currentTags = [];
3839
allTags = [];
3940
editMode = false;
@@ -48,6 +49,7 @@ export class DialogNewPluginComponent implements OnInit, OnDestroy {
4849
fieldTypes = {};
4950
plugins = [];
5051
loading = false;
52+
filteredPlugins: any[] = [];
5153

5254
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
5355

@@ -129,6 +131,7 @@ export class DialogNewPluginComponent implements OnInit, OnDestroy {
129131
this.consumersList = value.consumers;
130132
this.pluginsEnabled = value.pluginsEnabled.sort();
131133
this.plugins = value.plugins;
134+
this.filteredPlugins = this.plugins;
132135

133136
// ¿vienen datos extra con el service, route o consumer ya elegido?
134137
if (this.pluginData !== null && this.pluginData.extras !== null) {
@@ -169,6 +172,10 @@ export class DialogNewPluginComponent implements OnInit, OnDestroy {
169172
}
170173
});
171174

175+
this.searchControl.valueChanges.subscribe(value => {
176+
this.filterPlugins(value);
177+
});
178+
172179
// Lista de tags
173180
this.api.getTags()
174181
.subscribe((res) => {
@@ -184,9 +191,33 @@ export class DialogNewPluginComponent implements OnInit, OnDestroy {
184191
ngOnDestroy(): void {
185192
}
186193

194+
// In your component's TypeScript file
195+
displayFn = (pluginId: any): string => {
196+
const plugin = this.plugins.find(r => r.id === pluginId);
197+
return plugin ? ((plugin.name && plugin.instance_name) ? `(${plugin.name}) ${plugin.instance_name}` : plugin.id) : '';
198+
}
199+
200+
filterPlugins(searchTerm: string): void {
201+
if (!searchTerm) {
202+
this.filteredPlugins = this.plugins;
203+
} else {
204+
this.filteredPlugins = this.plugins.filter(plugin => {
205+
let instanceName = plugin.instance_name ?? plugin.name; // Use empty string if instance_name is null or undefined
206+
return instanceName.toLowerCase().includes(searchTerm.toLowerCase());
207+
});
208+
}
209+
}
210+
211+
187212
onPluginChange(event) {
188213
// Find the selected route in the routes array
189-
const selectedPlugin = this.plugins.find(plugin => plugin.id === event.value);
214+
let event_value = '';
215+
if (event instanceof MatAutocompleteSelectedEvent) {
216+
event_value = event.option.value;
217+
} else {
218+
event_value = event.value;
219+
}
220+
const selectedPlugin = this.plugins.find(plugin => plugin.id === event_value);
190221
const selectedPluginCopy = {...selectedPlugin};
191222

192223
if (selectedPlugin) {
@@ -432,7 +463,6 @@ export class DialogNewPluginComponent implements OnInit, OnDestroy {
432463
this.mapFields = [];
433464
this.fieldTypes = {};
434465
this.form.get('config').reset();
435-
436466
const data = this.generateFormFields(pluginSchemaFields, 'config');
437467

438468
this.form.setControl('config', data.dConfig);

‎src/app/components/dialog-new-route-noexpressions/dialog-new-route-noexpressions.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ <h2 class="margin-bottom-5-i" mat-dialog-title>
1717
<!-- Dropdown for Route names -->
1818
<mat-form-field appearance="fill" class="margin-bottom-10" color="accent" fxFlex="80">
1919
<mat-label>{{'text.templates' | translate}}</mat-label>
20-
<mat-select (selectionChange)="onRouteChange($event)">
21-
<mat-option *ngFor="let route of routes" [value]="route.id">
22-
{{route.name}}
20+
<input matInput [formControl]="searchControl" [matAutocomplete]="auto" />
21+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onRouteChange($event)" [displayWith]="displayFn">
22+
<mat-option *ngFor="let route of filteredRoutes" [value]="route.id">
23+
{{ route.name }}
2324
</mat-option>
24-
</mat-select>
25+
</mat-autocomplete>
2526
<mat-hint>{{'text.templates_hint' | translate}}</mat-hint>
2627
</mat-form-field>
2728
</div>

‎src/app/components/dialog-new-route-noexpressions/dialog-new-route-noexpressions.component.ts

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {COMMA, ENTER} from '@angular/cdk/keycodes';
22
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
3-
import {AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
3+
import {AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators, FormControl} from '@angular/forms';
44
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
55
import {MatChipInputEvent} from '@angular/material/chips';
66
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
@@ -26,6 +26,8 @@ export class DialogNewRouteNoexpressionsComponent implements OnInit, OnDestroy {
2626
validRedirectCodes = [426, 301, 302, 307, 308];
2727
allTags = [];
2828
routes = [];
29+
filteredRoutes: any[] = [];
30+
searchControl = new FormControl('');
2931
currentTags = [];
3032
currentHosts = [];
3133
currentPaths = [];
@@ -89,14 +91,39 @@ export class DialogNewRouteNoexpressionsComponent implements OnInit, OnDestroy {
8991

9092
ngOnInit(): void {
9193
this.loadData();
94+
this.searchControl.valueChanges.subscribe(value => {
95+
this.filterRoutes(value);
96+
});
97+
}
98+
99+
filterRoutes(searchTerm: string): void {
100+
if (!searchTerm) {
101+
this.filteredRoutes = this.routes;
102+
} else {
103+
this.filteredRoutes = this.routes.filter(route => {
104+
let instanceName = route.name ?? ''; // Use empty string if instance_name is null or undefined
105+
return instanceName.toLowerCase().includes(searchTerm.toLowerCase());
106+
});
107+
}
108+
}
109+
110+
displayFn = (routeId: any): string => {
111+
const route = this.routes.find(r => r.id === routeId);
112+
return route ? (route.name ? route.name : route.id) : '';
92113
}
93114

94115
ngOnDestroy(): void {
95116
}
96117

97118
onRouteChange(event) {
98119
// Find the selected route in the routes array
99-
const selectedRoute = this.routes.find(route => route.id === event.value);
120+
let event_value = '';
121+
if (event instanceof MatAutocompleteSelectedEvent) {
122+
event_value = event.option.value;
123+
} else {
124+
event_value = event.value;
125+
}
126+
const selectedRoute = this.routes.find(route => route.id === event_value);
100127
const selectedRouteCopy = {...selectedRoute};
101128

102129
if (selectedRoute) {

‎src/app/components/dialog-new-route/dialog-new-route.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ <h2 class="margin-bottom-5-i" mat-dialog-title>
1717
<!-- Dropdown for Route names -->
1818
<mat-form-field appearance="fill" class="margin-bottom-10" color="accent" fxFlex="80">
1919
<mat-label>{{'text.templates' | translate}}</mat-label>
20-
<mat-select (selectionChange)="onRouteChange($event)">
21-
<mat-option *ngFor="let route of routes" [value]="route.id">
22-
{{route.name}}
20+
<input matInput [formControl]="searchControl" [matAutocomplete]="auto" />
21+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onRouteChange($event)" [displayWith]="displayFn">
22+
<mat-option *ngFor="let route of filteredRoutes" [value]="route.id">
23+
{{ route.name }}
2324
</mat-option>
24-
</mat-select>
25+
</mat-autocomplete>
2526
<mat-hint>{{'text.templates_hint' | translate}}</mat-hint>
2627
</mat-form-field>
2728
</div>

‎src/app/components/dialog-new-route/dialog-new-route.component.ts

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {COMMA, ENTER} from '@angular/cdk/keycodes';
22
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
3-
import {AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
3+
import {AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators, FormControl} from '@angular/forms';
44
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
55
import {MatChipInputEvent} from '@angular/material/chips';
66
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
@@ -30,6 +30,8 @@ export class DialogNewRouteComponent implements OnInit, OnDestroy {
3030
eType = 'string';
3131
allTags = [];
3232
routes = [];
33+
filteredRoutes: any[] = [];
34+
searchControl = new FormControl('');
3335
currentTags = [];
3436
servicesAvailable = [];
3537
editMode = false;
@@ -78,16 +80,41 @@ export class DialogNewRouteComponent implements OnInit, OnDestroy {
7880

7981
ngOnInit(): void {
8082
this.loadData();
83+
this.searchControl.valueChanges.subscribe(value => {
84+
this.filterRoutes(value);
85+
});
8186
}
8287

88+
filterRoutes(searchTerm: string): void {
89+
if (!searchTerm) {
90+
this.filteredRoutes = this.routes;
91+
} else {
92+
this.filteredRoutes = this.routes.filter(route => {
93+
let instanceName = route.name ?? ''; // Use empty string if instance_name is null or undefined
94+
return instanceName.toLowerCase().includes(searchTerm.toLowerCase());
95+
});
96+
}
97+
}
98+
99+
displayFn = (routeId: any): string => {
100+
const route = this.routes.find(r => r.id === routeId);
101+
return route ? (route.name ? route.name : route.id) : '';
102+
}
103+
104+
83105
ngOnDestroy(): void {
84106
}
85107

86108
onRouteChange(event) {
87109
// Find the selected route in the routes array
88-
const selectedRoute = this.routes.find(route => route.id === event.value);
110+
let event_value = '';
111+
if (event instanceof MatAutocompleteSelectedEvent) {
112+
event_value = event.option.value;
113+
} else {
114+
event_value = event.value;
115+
}
116+
const selectedRoute = this.routes.find(route => route.id === event_value);
89117
const selectedRouteCopy = {...selectedRoute};
90-
91118
if (selectedRoute) {
92119
// Prepare the data for the form based on the selected route
93120
const formData = this.prepareDataForForm(selectedRouteCopy);
@@ -142,6 +169,7 @@ export class DialogNewRouteComponent implements OnInit, OnDestroy {
142169
this.api.getAllRoutes()
143170
.then((routes) => {
144171
this.routes = routes['data'];
172+
this.filteredRoutes = this.routes;
145173
})
146174
.catch(error => {
147175
this.toast.error_general(error);

‎src/app/components/dialog-new-service/dialog-new-service.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,12 @@ <h2 class="margin-bottom-5-i" mat-dialog-title>
1717
<div class="margin-bottom-10" fxLayout="row" fxLayoutAlign="center center" *ngIf="!editMode">
1818
<mat-form-field appearance="fill" class="margin-bottom-10" color="accent" fxFlex="80">
1919
<mat-label>{{'text.templates' | translate}}</mat-label>
20-
<mat-select (selectionChange)="onServiceChange($event)">
21-
<mat-option *ngFor="let svc of services" [value]="svc.id">
22-
{{svc.name}}
20+
<input matInput [formControl]="searchControl" [matAutocomplete]="auto" />
21+
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onServiceChange($event)" [displayWith]="displayFn">
22+
<mat-option *ngFor="let svc of filteredServices" [value]="svc.id">
23+
{{ svc.name }}
2324
</mat-option>
24-
</mat-select>
25+
</mat-autocomplete>
2526
<mat-hint>{{'text.templates_hint' | translate}}</mat-hint>
2627
</mat-form-field>
2728
</div>

‎src/app/components/dialog-new-service/dialog-new-service.component.ts

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {COMMA, ENTER} from '@angular/cdk/keycodes';
22
import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
3-
import {AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
3+
import {AbstractControl, FormBuilder, ValidationErrors, ValidatorFn, Validators, FormControl} from '@angular/forms';
44
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
55
import {MatChipInputEvent} from '@angular/material/chips';
66
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
@@ -21,13 +21,15 @@ export class DialogNewServiceComponent implements OnInit, OnDestroy {
2121
// Uso la variable para el estado del formulario
2222
formValid = false;
2323
validProtocols = ['http', 'https', 'grpc', 'grpcs', 'tcp', 'tls', 'udp'];
24+
searchControl = new FormControl('');
2425
currentTags = [];
2526
certificatesAvailable = [];
2627
caCertificatesAvailable = [];
2728
allTags = [];
2829
editMode = false;
2930
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
3031
services = [];
32+
filteredServices: any[] = [];
3133

3234
form = this.fb.group({
3335
name: ['', [Validators.required, CustomValidators.isAlphaNum()]],
@@ -171,18 +173,45 @@ export class DialogNewServiceComponent implements OnInit, OnDestroy {
171173
this.api.getAllServices()
172174
.then((services) => {
173175
this.services = services['data'];
176+
this.filteredServices = this.services;
174177
})
175178
.catch(error=>{
176179
this.toast.error_general(error);
177180
});
181+
this.searchControl.valueChanges.subscribe((value: string) => {
182+
this.filterServices(value);
183+
});
178184
}
179185

180186
ngOnDestroy(): void {
181187
}
182188

189+
// In your component's TypeScript file
190+
displayFn = (svcId: any): string => {
191+
const svc = this.services.find(s => s.id === svcId);
192+
return svc ? (svc.name ? svc.name : svc.id) : '';
193+
}
194+
195+
filterServices(searchTerm: string): void {
196+
if (!searchTerm) {
197+
this.filteredServices = this.services;
198+
} else {
199+
this.filteredServices = this.services.filter(svc => {
200+
let instanceName = svc.name ?? ''; // Use empty string if instance_name is null or undefined
201+
return instanceName.toLowerCase().includes(searchTerm.toLowerCase());
202+
});
203+
}
204+
}
205+
183206
onServiceChange(event) {
207+
let event_value = '';
208+
if (event instanceof MatAutocompleteSelectedEvent) {
209+
event_value = event.option.value;
210+
} else {
211+
event_value = event.value;
212+
}
184213
// Find the selected route in the routes array
185-
const selectedService = this.services.find(svc => svc.id === event.value);
214+
const selectedService = this.services.find(svc => svc.id === event_value);
186215
const selectedServiceCopy = {...selectedService};
187216

188217
if (selectedService) {

‎src/app/services/dialog-helper.service.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export class DialogHelperService {
5656
component = DialogNewServiceComponent;
5757
break;
5858
case 'route':
59-
if (this.globals.ROUTER_MODE) {
59+
if (this.globals.ROUTER_MODE === 'expressions') {
6060
// Expressions
6161
component = DialogNewRouteComponent;
6262
} else {

0 commit comments

Comments
 (0)