MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

replaced select input (timezone and culture) with single-autoselect on default-tenant-locale

This commit is contained in:
Sofia Papacharalampous 2024-05-20 13:22:34 +03:00
parent 1f86b2ef9f
commit f587f34eda
5 changed files with 142 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/core/core-service.module.ts
View File

@ -47,6 +47,7 @@ import { PrefillingSourceService } from './services/prefilling-source/prefilling
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { StorageFileService } from './services/storage-file/storage-file.service';
import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service';
import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service';
//
//
// This is shared module that provides all the services. Its imported only once on the AppModule.
@ -89,6 +90,7 @@ export class CoreServiceModule {
SupportiveMaterialService,
LanguageInfoService,
DescriptionTemplateTypeService,
DefaultUserLocaleService,
HttpErrorHandlingService,
QueryParamsService,
UserSettingsService,

20
dmp-frontend/src/app/core/query/default-user-locale.lookup.ts Normal file
View File

@ -0,0 +1,20 @@
import { Lookup } from "@common/model/lookup";
import { CultureInfo } from "../model/culture-info";
export class DefaultUserLocaleTimezoneLookup extends Lookup {
like: string;
selectedItem: string;
constructor() {
super();
}
}
export class DefaultUserLocaleCultureLookup extends Lookup {
like: string;
selectedItem: CultureInfo;
constructor() {
super();
}
}

100
dmp-frontend/src/app/core/services/default-user-locale/default-user-locale.service.ts Normal file
View File

@ -0,0 +1,100 @@
import { Injectable } from '@angular/core';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import * as moment from 'moment';
import { DefaultUserLocaleCultureLookup, DefaultUserLocaleTimezoneLookup } from '@app/core/query/default-user-locale.lookup';
import { TimezoneInfoDisplayPipe } from '@app/core/pipes/timezone-info-display.pipe';
import { CultureInfo } from '@app/core/model/culture-info';
import { CultureService } from '../culture/culture-service';
@Injectable()
export class DefaultUserLocaleService {
constructor(
private timezoneInfoDisplayPipe: TimezoneInfoDisplayPipe,
private cultureService: CultureService
) { }
queryTimezone(q: DefaultUserLocaleTimezoneLookup): Observable<string[]> {
let timezones = of(moment.tz.names().sort((x, y) => x.localeCompare(y)));
if (q.like) {
let likeValue = q.like.toLowerCase();
timezones = timezones.pipe(map((items: string[]) => {
let filteredItems: string[] = items.filter(i => this.timezoneInfoDisplayPipe.transform(i).toLowerCase().includes(likeValue));
if (filteredItems != null && filteredItems?.length > 0) return filteredItems;
else return null;
}));
}
if (q.selectedItem) {
timezones = timezones.pipe(map((items: string[]) => {
let filteredItem: string = items.find(i => i === q.selectedItem);
if (filteredItem != null) return [filteredItem];
else return null;
}));
}
return timezones;
}
queryCulture(q: DefaultUserLocaleCultureLookup): Observable<CultureInfo[]> {
let cultures = of(this.cultureService.getCultureValues().sort((x, y) => x.displayName.localeCompare(y.displayName)));
if (q.like) {
let likeValue = q.like.toLowerCase();
cultures = cultures.pipe(map((items: CultureInfo[]) => {
let filteredItems = items.filter(i => this.getCultureDisplayFn(i).toLowerCase().includes(likeValue));
if (filteredItems != null && filteredItems?.length > 0) return filteredItems;
else return null;
}));
}
return cultures;
}
//
// Autocomplete Commons
//
singleTimezoneAutocompleteConfiguration: SingleAutoCompleteConfiguration = {
initialItems: (data?: any) => this.queryTimezone(this.buildTimezoneAutocompleteLookup(null)),
filterFn: (searchQuery: string, data?: any) => this.queryTimezone(this.buildTimezoneAutocompleteLookup(searchQuery)),
getSelectedItem: (selectedItem: string) => this.queryTimezone(this.buildTimezoneAutocompleteLookup(null, selectedItem)),
displayFn: (item: string) => this.timezoneInfoDisplayPipe.transform(item),
titleFn: (item: string) => this.timezoneInfoDisplayPipe.transform(item),
valueAssign: (item: string) => item,
};
private buildTimezoneAutocompleteLookup(like?: string, selectedItem?: string): DefaultUserLocaleTimezoneLookup {
const lookup: DefaultUserLocaleTimezoneLookup = new DefaultUserLocaleTimezoneLookup();
lookup.page = { size: 100, offset: 0 };
if (like) { lookup.like = like; }
if (selectedItem) { lookup.selectedItem = selectedItem }
return lookup;
}
singleCultureAutocompleteConfiguration: SingleAutoCompleteConfiguration = {
initialItems: (data?: any) => this.queryCulture(this.buildCultureAutocompleteLookup(null)),
filterFn: (searchQuery: string, data?: any) => this.queryCulture(this.buildCultureAutocompleteLookup(searchQuery)),
getSelectedItem: (selectedItem: CultureInfo) => this.queryCulture(this.buildCultureAutocompleteLookup(null, selectedItem)),
displayFn: (item: CultureInfo) => this.getCultureDisplayFn(item),
titleFn: (item: CultureInfo) => this.getCultureDisplayFn(item),
valueAssign: (item: CultureInfo) => item.name,
};
private buildCultureAutocompleteLookup(like?: string, selectedItem?: CultureInfo): DefaultUserLocaleCultureLookup {
const lookup: DefaultUserLocaleCultureLookup = new DefaultUserLocaleCultureLookup();
lookup.page = { size: 100, offset: 0 };
if (like) { lookup.like = like; }
if (selectedItem) { lookup.selectedItem = selectedItem }
return lookup;
}
private getCultureDisplayFn(culture: CultureInfo): string {
return `${culture?.displayName} - ${culture?.nativeName}`;
}
}

18
dmp-frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.html
View File

@ -3,11 +3,8 @@
<div class="col-12 col-md-4">
<mat-form-field class="w-100">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.TIMEZONE' | translate}}</mat-label>
<mat-select [formControl]="this.formGroup.get('defaultUserLocale')?.get('timezone')" name="culture">
<mat-option *ngFor="let timezone of timezones" [value]="timezone">
{{ timezone | timezoneInfoDisplay }}
</mat-option>
</mat-select>
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('defaultUserLocale')?.get('timezone')" placeholder="{{'TENANT-CONFIGURATION-EDITOR.FIELDS.TIMEZONE' | translate}}" [configuration]="singleTimezoneAutocompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('defaultUserLocale')?.get('timezone').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('defaultUserLocale')?.get('timezone')?.hasError('backendError')">{{formGroup.get('defaultUserLocale')?.get('timezone')?.getError('backendError').message}}</mat-error>
</mat-form-field>
@ -15,11 +12,18 @@
<div class="col-12 col-md-4">
<mat-form-field class="w-100">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.CULTURE' | translate}}</mat-label>
<mat-select [formControl]="this.formGroup.get('defaultUserLocale')?.get('culture')" name="culture">
<app-single-auto-complete [required]="true" [formControl]="formGroup.get('defaultUserLocale')?.get('culture')"
placeholder="{{'TENANT-CONFIGURATION-EDITOR.FIELDS.CULTURE' | translate}}"
[configuration]="singleCultureAutocompleteConfiguration">
</app-single-auto-complete>
<!-- <mat-select [formControl]="this.formGroup.get('defaultUserLocale')?.get('culture')" name="culture">
<mat-option *ngFor="let culture of cultures" [value]="culture.name">
{{ culture.displayName }} - {{ culture.nativeName }}
</mat-option>
</mat-select>
</mat-select> -->
<mat-error *ngIf="formGroup.get('defaultUserLocale')?.get('culture').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('defaultUserLocale')?.get('culture')?.hasError('backendError')">{{formGroup.get('defaultUserLocale')?.get('culture')?.getError('backendError').message}}</mat-error>
</mat-form-field>

9
dmp-frontend/src/app/ui/admin/tenant-configuration/editor/default-user-locale/default-user-locale-editor.component.ts
View File

@ -27,6 +27,8 @@ import { CultureInfo } from '@app/core/model/culture-info';
import * as moment from 'moment';
import { CultureService } from '@app/core/services/culture/culture-service';
import { LanguageService } from '@app/core/services/language/language.service';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { DefaultUserLocaleService } from '@app/core/services/default-user-locale/default-user-locale.service';
@Component({
@ -47,6 +49,10 @@ export class DefaultUserLocaleEditorComponent extends BasePendingChangesComponen
timezones: any[];
cultures: CultureInfo[];
languages = [];
singleTimezoneAutocompleteConfiguration: SingleAutoCompleteConfiguration;
singleCultureAutocompleteConfiguration: SingleAutoCompleteConfiguration;
protected get canDelete(): boolean {
return !this.isNew && this.hasPermission(this.authService.permissionEnum.DeleteTenantConfiguration);
}
@ -71,6 +77,7 @@ export class DefaultUserLocaleEditorComponent extends BasePendingChangesComponen
private tenantConfigurationService: TenantConfigurationService,
private languageService: LanguageService,
private defaultUserLocaleEditorService: DefaultUserLocaleEditorService,
private defaultUserLocaleService: DefaultUserLocaleService,
private matomoService: MatomoService
) {
super();
@ -84,6 +91,8 @@ export class DefaultUserLocaleEditorComponent extends BasePendingChangesComponen
}
ngOnInit(): void {
this.singleTimezoneAutocompleteConfiguration = this.defaultUserLocaleService.singleTimezoneAutocompleteConfiguration;
this.singleCultureAutocompleteConfiguration = this.defaultUserLocaleService.singleCultureAutocompleteConfiguration;
this.matomoService.trackPageView('Admin: TenantConfigurations');
this.getItem((entity) => {
this.prepareForm(entity);