Skip to content

Commit 078c732

Browse files
mjabascal10mjabascal10
committed
feat(app-config): enhance configuration handling with version type support
Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>
1 parent 6f60b06 commit 078c732

3 files changed

Lines changed: 141 additions & 129 deletions

File tree

‎frontend/src/app/shared/components/utm/config/app-config-sections/app-config-sections.component.html‎

Lines changed: 130 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,11 @@ <h6 class="font-weight-semibold mb-2">{{section.section | titlecase}}</h6>
4646
</div>
4747
<p *ngIf="section.description" class="mb-3 mt-3">{{section.description}}</p>
4848
<div *ngIf="configs.length >0 && !loading" class="d-flex gap-3 flex-wrap w-100">
49-
<div *ngFor="let conf of getConfigs()" [ngClass]="conf.confParamDatatype === configDataTypeEnum.List || conf.confParamDatatype === configDataTypeEnum.EmailList || conf.confParamDatatype === ConfigDataTypeEnum.Cron ? 'w-100 order-8':'w-30'"
50-
class="form-group mb-4">
51-
<label [for]="'sectionParam'+conf.id"
52-
class="pb-1 span-small-icon d-flex justify-content-between align-items-center">
49+
<ng-container *ngFor="let conf of getConfigs()">
50+
<div [ngClass]="conf.confParamDatatype === configDataTypeEnum.List || conf.confParamDatatype === configDataTypeEnum.EmailList || conf.confParamDatatype === ConfigDataTypeEnum.Cron ? 'w-100 order-8':'w-30'"
51+
class="form-group mb-4" *ngIf="(conf.confParamShort !== 'utmstack.tw.enable') || (conf.confParamShort === 'utmstack.tw.enable' && versionType === VERSION_TYPE.ENTERPRISE)">
52+
<label [for]="'sectionParam'+conf.id"
53+
class="pb-1 span-small-icon d-flex justify-content-between align-items-center">
5354
<span>
5455
<i *ngIf="conf.confParamRequired"
5556
[ngClass]="!(conf.confParamRequired &&
@@ -60,7 +61,7 @@ <h6 class="font-weight-semibold mb-2">{{section.section | titlecase}}</h6>
6061
placement="auto"></i>
6162
{{conf.confParamLarge}}
6263
</span>
63-
<span>
64+
<span>
6465
<i *ngIf="conf.confParamDescription"
6566
[ngbTooltip]="conf.confParamDescription"
6667
class="ml-2 text-primary icon-question3" placement="auto"></i>
@@ -69,143 +70,145 @@ <h6 class="font-weight-semibold mb-2">{{section.section | titlecase}}</h6>
6970
ngbTooltip="If you change this config an application reload will be necessary,
7071
when we ready to reload a notice show up" placement="auto"></i>
7172
</span>
72-
</label>
73-
<div class="position-relative w-100">
74-
<input (input)="save(conf.confParamValue,conf)"
75-
*ngIf="conf.confParamDatatype === configDataTypeEnum.Text ||
73+
</label>
74+
<div class="position-relative w-100">
75+
<input (input)="save(conf.confParamValue,conf)"
76+
*ngIf="conf.confParamDatatype === configDataTypeEnum.Text ||
7677
conf.confParamDatatype === configDataTypeEnum.Tel ||
7778
conf.confParamDatatype === configDataTypeEnum.Number ||
7879
conf.confParamDatatype === configDataTypeEnum.Email ||
7980
conf.confParamDatatype === configDataTypeEnum.Password"
80-
[(ngModel)]="conf.confParamValue"
81-
[id]="'sectionParam'+conf.id"
82-
[required]="conf.confParamRequired"
83-
[disabled]="checkDisable(conf)"
84-
[type]="conf.confParamDatatype" class="form-control pr-5">
85-
86-
<i *ngIf="allowCopy(conf)"
87-
(click)="copyCode(conf)"
88-
class="icon-copy position-absolute top-25 end-0 translate-middle-y me-2 cursor-pointer"
89-
ngbTooltip="Copy"
90-
style="z-index: 1;"
91-
></i>
92-
</div>
93-
94-
<small *ngIf="conf.confParamRegexp && conf.confParamValue != '' && !isValid(conf) && conf.confParamDatatype !== configDataTypeEnum.EmailList" class="form-text text-danger">
95-
{{ conf.confParamLarge }} is invalid
96-
</small>
97-
98-
<app-utm-toggle (toggleChange)="save($event === true?'true':'false',conf)"
99-
*ngIf="conf.confParamDatatype === configDataTypeEnum.Bool"
100-
[active]="conf.confParamValue ==='true'"
101-
[label]="'Enable/Disable param configuration'"></app-utm-toggle>
102-
103-
<textarea (input)="save(conf.confParamValue,conf)"
104-
*ngIf="conf.confParamDatatype === configDataTypeEnum.List || conf.confParamDatatype === configDataTypeEnum.EmailList"
105-
[(ngModel)]="conf.confParamValue"
106-
[id]="'sectionParam'+conf.id"
107-
[required]="conf.confParamRequired"
108-
class="form-control"
109-
rows="4"></textarea>
110-
<small *ngIf="conf.confParamDatatype === configDataTypeEnum.EmailList && !isValid(conf)" class="form-text text-danger">
111-
Please enter valid email addresses separated by commas.
112-
</small>
113-
114-
<ng-select [clearable]="false"
115-
[searchable]="true"
116-
(change)="save(conf.confParamValue,conf)"
117-
*ngIf="conf.confParamDatatype === configDataTypeEnum.TimezoneList"
118-
[items]="timezones"
119-
[loadingText]="'Loading Timezones...'"
120-
[loading]="!timezones"
121-
groupBy="zone"
122-
bindValue="timezone"
12381
[(ngModel)]="conf.confParamValue"
124-
id="timezoneSetting">
125-
<ng-template ng-option-tmp ng-label-tmp let-item="item">
126-
({{ item.timezone | timezoneOffset }}) {{ item.label }}
127-
</ng-template>
128-
129-
</ng-select>
130-
131-
<ng-select [clearable]="false"
132-
[searchable]="true"
133-
(change)="save(conf.confParamValue,conf)"
134-
*ngIf="conf.confParamDatatype === configDataTypeEnum.DateFormatList"
135-
[items]="dateFormats"
136-
[loadingText]="'Loading Dates formats...'"
137-
[loading]="!dateFormats"
138-
bindValue="format"
139-
[(ngModel)]="conf.confParamValue"
140-
id="dateFormatSetting">
141-
<ng-template let-item="item" ng-option-tmp>
142-
<span class="span-small-icon">{{item.label + ' (' + item.equivalentTo + ')'}}</span>
143-
</ng-template>
144-
</ng-select>
145-
146-
<ng-container *ngIf="conf.confParamDatatype === configDataTypeEnum.Radio && conf.confParamOption">
147-
<div class="d-flex justify-content-start align-items-center">
148-
<div *ngFor="let option of conf.confParamOption.split(',');let i = index">
149-
<div
150-
class="d-flex justify-content-start align-items-center alert-radio-container"
151-
[ngClass]="{'ml-3':i !== 0}">
152-
<span (click)="save(option, conf)"
153-
[ngClass]="{'text-blue-800':option==conf.confParamValue}" class="mb-0 cursor-pointer medium-icon">
154-
<i [ngClass]="option==conf.confParamValue?'icon-radio-checked':'icon-circle'"></i>&nbsp;
155-
<span class="">{{option}}</span>
156-
</span>
157-
</div>
158-
</div>
82+
[id]="'sectionParam'+conf.id"
83+
[required]="conf.confParamRequired"
84+
[disabled]="checkDisable(conf)"
85+
[type]="conf.confParamDatatype" class="form-control pr-5">
86+
87+
<i *ngIf="allowCopy(conf)"
88+
(click)="copyCode(conf)"
89+
class="icon-copy position-absolute top-25 end-0 translate-middle-y me-2 cursor-pointer"
90+
ngbTooltip="Copy"
91+
style="z-index: 1;"
92+
></i>
15993
</div>
160-
</ng-container>
161-
162-
<ng-container *ngIf="conf.confParamDatatype === configDataTypeEnum.CountryList">
163-
<ng-select #countryList="ngModel"
164-
[items]="getSelectOptions(getName(conf.confParamShort))"
165-
bindLabel="name"
166-
bindValue="code"
167-
[disabled]="conf.section.id === sectionType.INSTANCE_REGISTRATION"
94+
95+
<small *ngIf="conf.confParamRegexp && conf.confParamValue != '' && !isValid(conf) && conf.confParamDatatype !== configDataTypeEnum.EmailList" class="form-text text-danger">
96+
{{ conf.confParamLarge }} is invalid
97+
</small>
98+
99+
<app-utm-toggle *ngIf="conf.confParamDatatype === configDataTypeEnum.Bool"
100+
(toggleChange)="save($event === true?'true':'false',conf)"
101+
[active]="conf.confParamValue ==='true'"
102+
[label]="'Enable/Disable param configuration'">
103+
</app-utm-toggle>
104+
105+
<textarea (input)="save(conf.confParamValue,conf)"
106+
*ngIf="conf.confParamDatatype === configDataTypeEnum.List || conf.confParamDatatype === configDataTypeEnum.EmailList"
107+
[(ngModel)]="conf.confParamValue"
108+
[id]="'sectionParam'+conf.id"
109+
[required]="conf.confParamRequired"
110+
class="form-control"
111+
rows="4"></textarea>
112+
<small *ngIf="conf.confParamDatatype === configDataTypeEnum.EmailList && !isValid(conf)" class="form-text text-danger">
113+
Please enter valid email addresses separated by commas.
114+
</small>
115+
116+
<ng-select [clearable]="false"
168117
[searchable]="true"
169-
[multiple]="false"
170-
[clearable]="false"
171-
[loading]="isLoading[getName(conf.confParamShort)]"
172-
[virtualScroll]="true"
118+
(change)="save(conf.confParamValue,conf)"
119+
*ngIf="conf.confParamDatatype === configDataTypeEnum.TimezoneList"
120+
[items]="timezones"
121+
[loadingText]="'Loading Timezones...'"
122+
[loading]="!timezones"
123+
groupBy="zone"
124+
bindValue="timezone"
173125
[(ngModel)]="conf.confParamValue"
174-
[ngClass]="{'is-invalid': countryList.invalid,
175-
'is-valid': countryList.valid}">
176-
177-
<ng-template ng-option-tmp let-item="item">
178-
<app-utm-country-flag
179-
[showCountry]="true"
180-
[country]="item.name"
181-
[countryCode]="item.code.toLowerCase()">
182-
</app-utm-country-flag>
183-
</ng-template>
184-
185-
<ng-template ng-label-tmp let-item="item">
186-
<app-utm-country-flag
187-
[showCountry]="true"
188-
[country]="item.name"
189-
[countryCode]="item.code.toLowerCase()">
190-
</app-utm-country-flag>
126+
id="timezoneSetting">
127+
<ng-template ng-option-tmp ng-label-tmp let-item="item">
128+
({{ item.timezone | timezoneOffset }}) {{ item.label }}
191129
</ng-template>
192130

193131
</ng-select>
194-
</ng-container>
195132

196-
<ng-container *ngIf="conf.confParamDatatype === ConfigDataTypeEnum.Cron">
197-
<app-utm-schedule-config [(ngModel)]="conf.confParamValue"
198-
(ngModelChange)="save(conf.confParamValue, conf)">
199-
</app-utm-schedule-config>
200-
</ng-container>
133+
<ng-select [clearable]="false"
134+
[searchable]="true"
135+
(change)="save(conf.confParamValue,conf)"
136+
*ngIf="conf.confParamDatatype === configDataTypeEnum.DateFormatList"
137+
[items]="dateFormats"
138+
[loadingText]="'Loading Dates formats...'"
139+
[loading]="!dateFormats"
140+
bindValue="format"
141+
[(ngModel)]="conf.confParamValue"
142+
id="dateFormatSetting">
143+
<ng-template let-item="item" ng-option-tmp>
144+
<span class="span-small-icon">{{item.label + ' (' + item.equivalentTo + ')'}}</span>
145+
</ng-template>
146+
</ng-select>
201147

148+
<ng-container *ngIf="conf.confParamDatatype === configDataTypeEnum.Radio && conf.confParamOption">
149+
<div class="d-flex justify-content-start align-items-center">
150+
<div *ngFor="let option of conf.confParamOption.split(',');let i = index">
151+
<div
152+
class="d-flex justify-content-start align-items-center alert-radio-container"
153+
[ngClass]="{'ml-3':i !== 0}">
154+
<span (click)="save(option, conf)"
155+
[ngClass]="{'text-blue-800':option==conf.confParamValue}" class="mb-0 cursor-pointer medium-icon">
156+
<i [ngClass]="option==conf.confParamValue?'icon-radio-checked':'icon-circle'"></i>&nbsp;
157+
<span class="">{{option}}</span>
158+
</span>
159+
</div>
160+
</div>
161+
</div>
162+
</ng-container>
163+
164+
<ng-container *ngIf="conf.confParamDatatype === configDataTypeEnum.CountryList">
165+
<ng-select #countryList="ngModel"
166+
[items]="getSelectOptions(getName(conf.confParamShort))"
167+
bindLabel="name"
168+
bindValue="code"
169+
[disabled]="conf.section.id === sectionType.INSTANCE_REGISTRATION"
170+
[searchable]="true"
171+
[multiple]="false"
172+
[clearable]="false"
173+
[loading]="isLoading[getName(conf.confParamShort)]"
174+
[virtualScroll]="true"
175+
[(ngModel)]="conf.confParamValue"
176+
[ngClass]="{'is-invalid': countryList.invalid,
177+
'is-valid': countryList.valid}">
202178

203-
<small *ngIf="conf.confParamRequired &&
179+
<ng-template ng-option-tmp let-item="item">
180+
<app-utm-country-flag
181+
[showCountry]="true"
182+
[country]="item.name"
183+
[countryCode]="item.code.toLowerCase()">
184+
</app-utm-country-flag>
185+
</ng-template>
186+
187+
<ng-template ng-label-tmp let-item="item">
188+
<app-utm-country-flag
189+
[showCountry]="true"
190+
[country]="item.name"
191+
[countryCode]="item.code.toLowerCase()">
192+
</app-utm-country-flag>
193+
</ng-template>
194+
195+
</ng-select>
196+
</ng-container>
197+
198+
<ng-container *ngIf="conf.confParamDatatype === ConfigDataTypeEnum.Cron">
199+
<app-utm-schedule-config [(ngModel)]="conf.confParamValue"
200+
(ngModelChange)="save(conf.confParamValue, conf)">
201+
</app-utm-schedule-config>
202+
</ng-container>
203+
204+
205+
<small *ngIf="conf.confParamRequired &&
204206
(conf.confParamValue === '' || conf.confParamValue === null || conf.confParamValue === undefined)"
205-
class="text-danger">
206-
Param {{conf.confParamLarge}} is required
207-
</small>
208-
</div>
207+
class="text-danger">
208+
Param {{conf.confParamLarge}} is required
209+
</small>
210+
</div>
211+
</ng-container>
209212
<ng-container *ngIf="configs.length<3">
210213
<div class="dummy-div w-30"></div>
211214
</ng-container>

‎frontend/src/app/shared/components/utm/config/app-config-sections/app-config-sections.component.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {UtmConfigParamsService} from '../../../../services/config/utm-config-par
1414
import {LocationService, SelectOption} from '../../../../services/location.service';
1515
import {NetworkService} from '../../../../services/network.service';
1616
import {TimezoneFormatService} from '../../../../services/utm-timezone.service';
17+
import {VersionInfoService, VersionType} from '../../../../services/version/version-info.service';
1718
import {ConfigDataTypeEnum, SectionConfigParamType} from '../../../../types/configuration/section-config-param.type';
1819
import {ApplicationConfigSectionEnum, SectionConfigType} from '../../../../types/configuration/section-config.type';
1920
import {ScheduleConfigValidator} from '../../../schedule-config/schedule-config.validator';
@@ -49,6 +50,8 @@ export class AppConfigSectionsComponent implements OnInit, OnDestroy {
4950
destroy$ = new Subject<void>();
5051
isOnline = false;
5152
ConfigDataTypeEnum = ConfigDataTypeEnum;
53+
versionType = VersionType.COMMUNITY;
54+
VERSION_TYPE = VersionType;
5255

5356

5457
constructor(private utmConfigParamsService: UtmConfigParamsService,
@@ -57,7 +60,8 @@ export class AppConfigSectionsComponent implements OnInit, OnDestroy {
5760
private toastService: UtmToastService,
5861
private timezoneFormatService: TimezoneFormatService,
5962
private locationService: LocationService,
60-
private networkService: NetworkService) {
63+
private networkService: NetworkService,
64+
private versionInfoService: VersionInfoService) {
6165
}
6266

6367

@@ -68,6 +72,11 @@ export class AppConfigSectionsComponent implements OnInit, OnDestroy {
6872
this.networkService.isOnline$
6973
.pipe(takeUntil(this.destroy$))
7074
.subscribe( isOnline => this.isOnline = isOnline);
75+
76+
this.versionInfoService.versionType$
77+
.pipe(takeUntil(this.destroy$))
78+
.subscribe( versionType => this.versionType = versionType);
79+
7180
}
7281

7382
getConfigurations() {

‎frontend/src/environments/environment.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
export const environment = {
66
production: false,
77
SERVER_API_URL: 'https://192.168.1.18/',
8-
// SERVER_API_URL: 'http://localhost:8080/',
8+
//SERVER_API_URL: 'http://localhost:8080/',
99
SERVER_API_CONTEXT: '',
1010
SESSION_AUTH_TOKEN: window.location.host.split(':')[0].toLocaleUpperCase(),
1111
WEBSOCKET_URL: '//localhost:8080',

0 commit comments

Comments
 (0)