Improve queue name selector

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,

ui-ngx/src/app/shared/components/queue/queue-type-list.component.html

@@ -34,7 +34,12 @@
     #queueAutocomplete="matAutocomplete"
     [displayWith]="displayQueueFn">
     <mat-option *ngFor="let queue of filteredQueues | async" [value]="queue">
-      <span [innerHTML]="queue | highlight:searchText"></span>
+      <span [innerHTML]="queue.queueName | highlight:searchText"></span>
+    </mat-option>
+    <mat-option *ngIf="!(filteredQueues | async)?.length" [value]="null">
+      <span>
+        {{ translate.get('queue.no-queues-matching', {queue: searchText}) | async }}
+      </span>
     </mat-option>
   </mat-autocomplete>
   <mat-error *ngIf="queueFormGroup.get('queue').hasError('required')">

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<HTMLInputElement>;
 
-  filteredQueues: Observable<Array<string>>;
+  filteredQueues: Observable<Array<Queue>>;
 
-  queues: Observable<Array<string>>;
+  queues: Observable<Array<Queue>>;
 
   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.modelValue = value ? { queueName: value } : null;
-    this.queueFormGroup.get('queue').patchValue(value, {emitEvent: false});
+    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 {
+  displayQueueFn(queue?: Queue): string | undefined {
-    return queue ? queue : undefined;
+    return queue ? queue.queueName : undefined;
   }
 
-  fetchQueues(searchText?: string): Observable<Array<string>> {
+  fetchQueues(searchText?: string): Observable<Array<Queue>> {
     this.searchText = searchText;
     return this.getQueues().pipe(
-      catchError(() => of([])),
+      catchError(() => of([] as Array<Queue>)),
       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<Array<string>> {
+  getQueues(): Observable<Array<Queue>> {
     if (!this.queues) {
       this.queues = this.queueService.
       getTenantQueuesByServiceType(this.queueType, {ignoreLoading: true}).pipe(
+        map((queues) => {
+          return queues.map((queueName) => {
+            return { queueName };
+          });
+        }),
         publishReplay(1),
         refCount()
       );

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

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 {# 개 장치 프로파일} }?",

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} }?",