From 0ee4907567f18768912982cf64f2fffbedbda62a Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 26 Aug 2021 16:22:35 +0300 Subject: [PATCH] Improve queue name selector --- .../wizard/device-wizard-dialog.component.ts | 1 + .../queue/queue-type-list.component.html | 7 ++- .../queue/queue-type-list.component.ts | 47 ++++++++++++------- .../assets/locale/locale.constant-en_US.json | 5 +- .../assets/locale/locale.constant-ko_KR.json | 2 +- .../assets/locale/locale.constant-sl_SI.json | 2 +- 6 files changed, 43 insertions(+), 21 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts index fd7391dacc..09bd38d999 100644 --- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts @@ -289,6 +289,7 @@ export class DeviceWizardDialogComponent extends const deviceProfile: DeviceProfile = { name: this.deviceWizardFormGroup.get('newDeviceProfileTitle').value, type: DeviceProfileType.DEFAULT, + defaultQueueName: this.deviceWizardFormGroup.get('defaultQueueName').value, transportType: this.transportConfigFormGroup.get('transportType').value, provisionType: deviceProvisionConfiguration.type, provisionDeviceKey, diff --git a/ui-ngx/src/app/shared/components/queue/queue-type-list.component.html b/ui-ngx/src/app/shared/components/queue/queue-type-list.component.html index b8902d0964..c05e0acdc2 100644 --- a/ui-ngx/src/app/shared/components/queue/queue-type-list.component.html +++ b/ui-ngx/src/app/shared/components/queue/queue-type-list.component.html @@ -34,7 +34,12 @@ #queueAutocomplete="matAutocomplete" [displayWith]="displayQueueFn"> - + + + + + {{ translate.get('queue.no-queues-matching', {queue: searchText}) | async }} + diff --git a/ui-ngx/src/app/shared/components/queue/queue-type-list.component.ts b/ui-ngx/src/app/shared/components/queue/queue-type-list.component.ts index bc5d40a9b0..11fe16731b 100644 --- a/ui-ngx/src/app/shared/components/queue/queue-type-list.component.ts +++ b/ui-ngx/src/app/shared/components/queue/queue-type-list.component.ts @@ -34,6 +34,10 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { QueueService } from '@core/http/queue.service'; import { ServiceType } from '@shared/models/queue.models'; +interface Queue { + queueName: string; +} + @Component({ selector: 'tb-queue-type-list', templateUrl: './queue-type-list.component.html', @@ -48,7 +52,7 @@ export class QueueTypeListComponent implements ControlValueAccessor, OnInit, Aft queueFormGroup: FormGroup; - modelValue: string | null; + modelValue: Queue | null; private requiredValue: boolean; get required(): boolean { @@ -67,9 +71,9 @@ export class QueueTypeListComponent implements ControlValueAccessor, OnInit, Aft @ViewChild('queueInput', {static: true}) queueInput: ElementRef; - filteredQueues: Observable>; + filteredQueues: Observable>; - queues: Observable>; + queues: Observable>; searchText = ''; @@ -99,9 +103,15 @@ export class QueueTypeListComponent implements ControlValueAccessor, OnInit, Aft debounceTime(150), distinctUntilChanged(), tap(value => { - this.updateView(value); + let modelValue; + if (typeof value === 'string' || !value) { + modelValue = null; + } else { + modelValue = value; + } + this.updateView(modelValue); }), - map(value => value ? value : ''), + map(value => value ? (typeof value === 'string' ? value : value.queueName) : ''), switchMap(queue => this.fetchQueues(queue) ) ); } @@ -123,8 +133,8 @@ export class QueueTypeListComponent implements ControlValueAccessor, OnInit, Aft writeValue(value: string | null): void { this.searchText = ''; - this.modelValue = value; - this.queueFormGroup.get('queue').patchValue(value, {emitEvent: false}); + this.modelValue = value ? { queueName: value } : null; + this.queueFormGroup.get('queue').patchValue(this.modelValue, {emitEvent: false}); this.dirty = true; } @@ -135,37 +145,42 @@ export class QueueTypeListComponent implements ControlValueAccessor, OnInit, Aft } } - updateView(value: string | null) { + updateView(value: Queue | null) { if (this.modelValue !== value) { this.modelValue = value; - this.propagateChange(this.modelValue); + this.propagateChange(this.modelValue ? this.modelValue.queueName : null); } } - displayQueueFn(queue?: string): string | undefined { - return queue ? queue : undefined; + displayQueueFn(queue?: Queue): string | undefined { + return queue ? queue.queueName : undefined; } - fetchQueues(searchText?: string): Observable> { + fetchQueues(searchText?: string): Observable> { this.searchText = searchText; return this.getQueues().pipe( - catchError(() => of([])), + catchError(() => of([] as Array)), map(queues => { const result = queues.filter( queue => { - return searchText ? queue.toUpperCase().startsWith(searchText.toUpperCase()) : true; + return searchText ? queue.queueName.toUpperCase().startsWith(searchText.toUpperCase()) : true; }); if (result.length) { - result.sort(); + result.sort((q1, q2) => q1.queueName.localeCompare(q2.queueName)); } return result; }) ); } - getQueues(): Observable> { + getQueues(): Observable> { if (!this.queues) { this.queues = this.queueService. getTenantQueuesByServiceType(this.queueType, {ignoreLoading: true}).pipe( + map((queues) => { + return queues.map((queueName) => { + return { queueName }; + }); + }), publishReplay(1), refCount() ); diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index e23d5508df..58d11487dc 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -1082,7 +1082,7 @@ "default-rule-chain": "Default rule chain", "mobile-dashboard": "Mobile dashboard", "mobile-dashboard-hint": "Used by mobile application as a device details dashboard", - "select-queue-hint": "Select from a drop-down list or add a custom name.", + "select-queue-hint": "Select from a drop-down list.", "delete-device-profile-title": "Are you sure you want to delete the device profile '{{deviceProfileName}}'?", "delete-device-profile-text": "Be careful, after the confirmation the device profile and all related data will become unrecoverable.", "delete-device-profiles-title": "Are you sure you want to delete { count, plural, 1 {1 device profile} other {# device profiles} }?", @@ -2570,7 +2570,8 @@ "queue": { "select_name": "Select queue name", "name": "Queue Name", - "name_required": "Queue name is required!" + "name_required": "Queue name is required!", + "no-queues-matching": "No queues matching '{{queue}}' were found." }, "tenant": { "tenant": "Tenant", diff --git a/ui-ngx/src/assets/locale/locale.constant-ko_KR.json b/ui-ngx/src/assets/locale/locale.constant-ko_KR.json index 56ae7d0fc3..35a291931d 100644 --- a/ui-ngx/src/assets/locale/locale.constant-ko_KR.json +++ b/ui-ngx/src/assets/locale/locale.constant-ko_KR.json @@ -959,7 +959,7 @@ "profile-configuration": "프로파일 설정", "transport-configuration": "전송 설정", "default-rule-chain": "기본 규칙 사슬", - "select-queue-hint": "Select from a drop-down list or add a custom name.", + "select-queue-hint": "Select from a drop-down list.", "delete-device-profile-title": "Are you sure you want to delete the device profile '{{deviceProfileName}}'?", "delete-device-profile-text": "Be careful, after the confirmation the device profile and all related data will become unrecoverable.", "delete-device-profiles-title": "Are you sure you want to delete { count, plural, 1 {1 개 장치 프로파일} other {# 개 장치 프로파일} }?", diff --git a/ui-ngx/src/assets/locale/locale.constant-sl_SI.json b/ui-ngx/src/assets/locale/locale.constant-sl_SI.json index 8016988f8d..3e3b252bf6 100644 --- a/ui-ngx/src/assets/locale/locale.constant-sl_SI.json +++ b/ui-ngx/src/assets/locale/locale.constant-sl_SI.json @@ -959,7 +959,7 @@ "profile-configuration": "Profile configuration", "transport-configuration": "Transport configuration", "default-rule-chain": "Default rule chain", - "select-queue-hint": "Select from a drop-down list or add a custom name.", + "select-queue-hint": "Select from a drop-down list.", "delete-device-profile-title": "Are you sure you want to delete the device profile '{{deviceProfileName}}'?", "delete-device-profile-text": "Be careful, after the confirmation the device profile and all related data will become unrecoverable.", "delete-device-profiles-title": "Are you sure you want to delete { count, plural, 1 {1 device profile} other {# device profiles} }?",