Version 4.15.9

package.json

@@ -3,7 +3,7 @@
   "displayName": "Cyclos 4 UI",
   "description": "The new Cyclos 4 frontend",
   "icon": "cyclos.png",
-  "version": "4.15.8",
+  "version": "4.15.9",
   "license": "MIT",
   "author": {
     "name": "Cyclos development team",

src/app/shared/base-selection-field.component.ts

@@ -154,6 +154,10 @@ export abstract class BaseSelectionFieldComponent<T> extends BaseFormFieldWithOp
     }
   }
 
+  resolveStyle(option: FieldOption, hasCategory: boolean) {
+    return option.style + ' level' + (hasCategory ? option.level || 0 : 0);
+  }
+
   /**
    * Must be implemented to indicate whether the field has an empty option in the beginning.
    */

src/app/shared/multi-selection-field.component.html

@@ -30,8 +30,8 @@
         <div #check
           *ngFor="let option of category.options | async; let firstOpt = first"
           class="custom-control custom-checkbox d-flex align-content-center"
-          [class]="resolveStyle(option)" [ngClass]="{
-            'mt-1': !(firstCat &&  !category.name && firstOpt)
+          [class]="resolveStyle(option, category.name)" [ngClass]="{
+            'mt-1': !(firstCat &&  !category.name )
           }" (click)="toggle(option.value)"
           (keydown.space)="$event.preventDefault(); $event.stopPropagation()"
           (keyup.enter)="toggle(option.value)" (keyup.esc)="close()">

src/app/shared/multi-selection-field.component.ts

@@ -1,10 +1,9 @@
 import {
-  ChangeDetectionStrategy, Component, ElementRef, Host, Injector, Input, Optional, SkipSelf, ViewChild,
+  ChangeDetectionStrategy, Component, ElementRef, Host, Injector, Input, Optional, SkipSelf, ViewChild
 } from '@angular/core';
 import { ControlContainer, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FIELD_OPTIONS_SORTER, FORM_FIELD_WITH_OPTIONS } from 'app/shared/base-form-field-with-options.component';
 import { BaseSelectionFieldComponent } from 'app/shared/base-selection-field.component';
-import { FieldOption } from 'app/shared/field-option';
 import { blank, empty, getValueAsArray, preprocessValueWithSeparator } from 'app/shared/helper';
 
 /**
@@ -103,10 +102,6 @@ export class MultiSelectionFieldComponent extends BaseSelectionFieldComponent<st
     });
   }
 
-  resolveStyle(option: FieldOption) {
-    return option.style + ' level' + (option.level || 0);
-  }
-
   hasEmptyOption() {
     return false;
   }

src/app/shared/single-selection-field.component.html

@@ -34,8 +34,8 @@
         </div>
         <a *ngFor="let option of category.options | async; let firstOpt = first"
           tabindex="0" href="#" class="select-option"
-          [class]="resolveStyle(option)" [id]="id + '_' + option.value"
-          [ngClass]="{
+          [class]="resolveStyle(option, category.name)"
+          [id]="id + '_' + option.value" [ngClass]="{
             'mt-1': emptyLabel != null || !(firstCat && firstOpt),
             'pl-3': category.name,
             selected: isSelected(option)

src/app/shared/single-selection-field.component.ts

@@ -64,8 +64,4 @@ export class SingleSelectionFieldComponent extends BaseSelectionFieldComponent<s
   hasEmptyOption() {
     return !(this.emptyOption == null || this.emptyOption === false);
   }
-
-  resolveStyle(option: FieldOption) {
-    return option.style + ' level' + option.level;
-  }
 }

src/app/ui/banking/accounts/account-history.component.html

@@ -29,7 +29,7 @@
           </single-selection-field>
         </div>
         <div
-          *ngIf="(layout.gtxxs$ | async) && data.transferFilters?.length > 1; else noTransferFilters"
+          *ngIf="(layout.gtxxs$ | async) && data.transferFilters?.length > 0; else noTransferFilters"
           class="col-12 col-md-6">
           <multi-selection-field formControlName="transferFilters"
             [label]="i18n.account.transferFilter">

src/app/ui/operations/run-operation.component.html

@@ -10,11 +10,11 @@
 <ng-template #content>
   <ng-container *ngIf="isSearch; else regular">
     <!-- When a result page, render a filters section -->
-    <page-content [mode]="hasSearchFields ? 'filters' : 'emptyFilters'"
+    <page-content
+      [mode]="hasSearchFields || data.informationText ? 'filters' : 'emptyFilters'"
       [heading]="data.name" [mobileHeading]="data.label"
       [headingActions]="headingActions$ | async">
-      <alert type="info" *ngIf="data.informationText"
-        [ngClass]="{'mt-3': hasSearchFields}">
+      <alert type="info" *ngIf="data.informationText" class="mt-3">
         <div [innerHTML]="data.informationText | trust"></div>
       </alert>
       <ng-container *ngTemplateOutlet="theForm"></ng-container>

src/app/ui/users/tokens/create-token.component.html

@@ -14,9 +14,19 @@ <h1>{{ i18n.token.title['new'](type.name) }}</h1>
       [value]="operator.id" [text]="operator.name">
     </field-option>
   </single-selection-field>
-  <input-field required formControlName="value" [mask]="type.mask"
-    [label]="i18n.token.value" [placeholder]="type.mask? type.mask : ''">
-  </input-field>
+  <label-value kind="field" [label]="i18n.token.value">
+    <input-field #inputField required formControlName="value"
+      [mask]="type.mask" [placeholder]="type.mask? type.mask : ''">
+    </input-field>
+    <div *extraCell>
+      <button *ngIf="type.physicalType === physicalType.QR_CODE" type="button"
+        class="btn btn-icon" #scanQrCodeButton
+        [tooltip]="i18n.field.user.scanQrCodeTooltip"
+        (click)="showScanQrCode()">
+        <icon [icon]="SvgIcon.QrCodeScan"></icon>
+      </button>
+    </div>
+  </label-value>
   <boolean-field *ngIf="canActivate$ | async" formControlName="activateNow"
     [label]="i18n.token.action.activate">
   </boolean-field>

src/app/ui/users/tokens/create-token.component.ts

@@ -1,13 +1,16 @@
-import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, Input, OnInit, ViewChild } from '@angular/core';
 import { FormGroup, Validators } from '@angular/forms';
-import { OperatorResult, TokenType, User } from 'app/api/models';
+import { OperatorResult, PhysicalTokenTypeEnum, TokenType, User } from 'app/api/models';
 import { OperatorsService } from 'app/api/services/operators.service';
 import { TokensService } from 'app/api/services/tokens.service';
 import { BaseComponent } from 'app/shared/base.component';
-import { validateBeforeSubmit } from 'app/shared/helper';
+import { focus, validateBeforeSubmit } from 'app/shared/helper';
+import { InputFieldComponent } from 'app/shared/input-field.component';
+import { ScanQrCodeComponent } from 'app/shared/scan-qrcode.component';
 import { cloneDeep } from 'lodash-es';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { BehaviorSubject } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 /**
  * Used in a popup to create a token
@@ -19,11 +22,15 @@ import { BehaviorSubject } from 'rxjs';
 })
 export class CreateTokenComponent extends BaseComponent implements OnInit {
 
+  physicalType = PhysicalTokenTypeEnum;
+
   @Input() type: TokenType;
   @Input() user: User;
   @Input() required: boolean;
   @Input() updateAction: () => void;
 
+  @ViewChild('inputField') inputField: ElementRef<InputFieldComponent>;
+
   form: FormGroup;
   operators$ = new BehaviorSubject<OperatorResult[]>(null);
   canActivate$ = new BehaviorSubject<boolean>(null);
@@ -32,7 +39,8 @@ export class CreateTokenComponent extends BaseComponent implements OnInit {
     injector: Injector,
     public modalRef: BsModalRef,
     private tokensService: TokensService,
-    private operatorsService: OperatorsService) {
+    private operatorsService: OperatorsService,
+    private modal: BsModalService) {
     super(injector);
   }
 
@@ -67,6 +75,13 @@ export class CreateTokenComponent extends BaseComponent implements OnInit {
     }
   }
 
+  showScanQrCode() {
+    const ref = this.modal.show(ScanQrCodeComponent, { class: 'modal-form' });
+    const component = ref.content as ScanQrCodeComponent;
+    component.select.pipe(first()).subscribe(value => this.form.controls['value'].setValue(value));
+    this.modal.onHide.pipe(first()).subscribe(() => focus(this.inputField, true));
+  }
+
   submit() {
     validateBeforeSubmit(this.form);
     if (!this.form.valid) {