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

dmp-frontend/src/app/core/core-service.module.ts

@@ -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,

dmp-frontend/src/app/core/query/default-user-locale.lookup.ts

@@ -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();
+	}
+}

dmp-frontend/src/app/core/services/default-user-locale/default-user-locale.service.ts

@@ -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}`;
+	}
+}

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

@@ -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">
+				<app-single-auto-complete [required]="true" [formControl]="formGroup.get('defaultUserLocale')?.get('timezone')" placeholder="{{'TENANT-CONFIGURATION-EDITOR.FIELDS.TIMEZONE' | translate}}" [configuration]="singleTimezoneAutocompleteConfiguration">
-					<mat-option *ngFor="let timezone of timezones" [value]="timezone">
+				</app-single-auto-complete>
-						{{ timezone | timezoneInfoDisplay }}
-					</mat-option>
-				</mat-select>
 				<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>

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

@@ -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);