Merge pull request #4966 from vvlladd28/improvement/qr-code/load

UI: Add lazy load qrcode library; added validation qr code text

ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.html

@@ -16,6 +16,7 @@
 
 -->
 <div fxLayout="column" fxLayoutAlign="center center" style="width: 100%; height: 100%;">
-  <canvas fxFlex #canvas [ngStyle]="{display: qrCodeText ? 'block' : 'none'}"></canvas>
-  <div *ngIf="!qrCodeText" translate>entity.no-data</div>
+  <canvas fxFlex #canvas [ngStyle]="{display: qrCodeText && !invalidQrCodeText ? 'block' : 'none'}"></canvas>
+  <div *ngIf="!qrCodeText && !invalidQrCodeText" translate>entity.no-data</div>
+  <div *ngIf="invalidQrCodeText" translate>widgets.invalid-qr-code-text</div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/qrcode-widget.component.ts

@@ -19,7 +19,6 @@ import { PageComponent } from '@shared/components/page.component';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import QRCode from 'qrcode';
 import {
   fillPattern,
   parseData,
@@ -30,6 +29,7 @@ import {
 import { FormattedData } from '@home/components/widget/lib/maps/map-models';
 import { DatasourceData } from '@shared/models/widget.models';
 import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { isNumber, isObject } from '@core/utils';
 
 interface QrCodeWidgetSettings {
   qrCodeTextPattern: string;
@@ -53,6 +53,7 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
   ctx: WidgetContext;
 
   qrCodeText: string;
+  invalidQrCodeText = false;
 
   private viewInited: boolean;
   private scheduleUpdateCanvas: boolean;
@@ -109,8 +110,13 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
   private updateQrCodeText(newQrCodeText: string): void {
     if (this.qrCodeText !== newQrCodeText) {
       this.qrCodeText = newQrCodeText;
-      if (this.qrCodeText) {
-        this.updateCanvas();
+      if (!(isObject(newQrCodeText) || isNumber(newQrCodeText))) {
+        this.invalidQrCodeText = false;
+        if (this.qrCodeText) {
+          this.updateCanvas();
+        }
+      } else {
+        this.invalidQrCodeText = true;
       }
       this.cd.detectChanges();
     }
@@ -118,9 +124,11 @@ export class QrCodeWidgetComponent extends PageComponent implements OnInit, Afte
 
   private updateCanvas() {
     if (this.viewInited) {
-      QRCode.toCanvas(this.canvasRef.nativeElement, this.qrCodeText);
-      this.canvasRef.nativeElement.style.width = 'auto';
-      this.canvasRef.nativeElement.style.height = 'auto';
+      import('qrcode').then((QRCode) => {
+        QRCode.toCanvas(this.canvasRef.nativeElement, this.qrCodeText);
+        this.canvasRef.nativeElement.style.width = 'auto';
+        this.canvasRef.nativeElement.style.height = 'auto';
+      });
     } else {
       this.scheduleUpdateCanvas = true;
     }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3123,7 +3123,8 @@
             "update-attribute": "Update attribute",
             "update-timeseries": "Update timeseries",
             "value": "Value"
-        }
+        },
+        "invalid-qr-code-text": "Invalid input text for QR code. Input should have a string type"
     },
     "icon": {
         "icon": "Icon",