Added preview image widget bundles; Refactoring back state button

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -246,12 +246,13 @@
                           headerHeightPx="120"
                           [isReadOnly]="true"
                           [isEdit]="false"
-                          (closeDetails)="onAddWidgetClosed()">
+                          [showBackStateIcon]="!!widgetsBundle?.title"
+                          (closeDetails)="onAddWidgetClosed()"
+                          (backStateDetails)="widgetBundleSelected(null)">
           <div class="header-pane" *ngIf="isAddingWidget">
             <div fxLayout="row">
-              <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>
+<!--              <span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span>-->
-              <tb-widgets-bundle-select fxFlexOffset="5"
+              <tb-widgets-bundle-select fxFlex
-                                        fxFlex
                                         required
                                         [selectFirstBundle]="false"
                                         [(ngModel)]="widgetsBundle"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.html

@@ -17,15 +17,11 @@
 -->
 <div class="widget-select">
   <div *ngIf="hasWidgetTypes()">
-    <button mat-raised-button (click)="backToSelectWidgetsBundle()" style="margin-bottom: 12px">
-      <mat-icon class="material-icons">undo</mat-icon>
-      {{ 'widget.all-bundles' | translate }}
-    </button>
     <div fxFlexFill fxLayoutGap="12px grid" fxLayout="row wrap">
       <div *ngFor="let widget of widgets" class="mat-card-container">
         <mat-card fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="onWidgetClicked($event, widget)">
-          <div fxFlex="45">
+          <div class="preview-container" fxFlex="45">
-            <img class="preview" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="{{ widget.title }}">
+            <img class="preview" [src]="getPreviewImage(widget.image)" alt="{{ widget.title }}">
           </div>
           <div fxFlex fxLayout="column">
             <mat-card-title>{{widget.title}}</mat-card-title>
@@ -45,8 +41,8 @@
   <div *ngIf="!widgetsBundle" fxFlexFill fxLayoutGap="12px grid" fxLayout="row wrap">
     <div *ngFor="let widgetsBundle of widgetsBundles$ | async" class="mat-card-container">
       <mat-card fxFlexFill fxLayout="row" fxLayoutGap="16px" (click)="selectBundle($event, widgetsBundle)">
-        <div fxFlex="45" *ngIf="isSystem(widgetsBundle)">
+        <div class="preview-container" fxFlex="45">
-          <img class="preview" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="{{ widgetsBundle.title }}">
+          <img class="preview" [src]=getPreviewImage(widgetsBundle.image) alt="{{ widgetsBundle.title }}">
         </div>
         <div fxFlex fxLayout="column">
           <mat-card-title>{{ widgetsBundle.title }}</mat-card-title>

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.scss

@@ -28,6 +28,11 @@
       .mat-card {
         cursor: pointer;
 
+        .preview-container {
+          text-align: center;
+          margin: auto 0;
+        }
+
         .preview {
           max-width: 100%;
           max-height: 100%;

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts

@@ -23,6 +23,8 @@ import { Widget } from '@shared/models/widget.models';
 import { toWidgetInfo } from '@home/models/widget-component.models';
 import { share } from 'rxjs/operators';
 import { Observable } from 'rxjs';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { isDefinedAndNotNull } from '@core/utils';
 
 @Component({
   selector: 'tb-dashboard-widget-select',
@@ -47,7 +49,8 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges {
 
   widgetsBundles$: Observable<Array<WidgetsBundle>>;
 
-  constructor(private widgetsService: WidgetService) {
+  constructor(private widgetsService: WidgetService,
+              private sanitizer: DomSanitizer) {
   }
 
   ngOnInit(): void {
@@ -59,7 +62,7 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     for (const propName of Object.keys(changes)) {
       const change = changes[propName];
-      if (change.currentValue !== change.previousValue && change.currentValue) {
+      if (change.currentValue !== change.previousValue && (change.currentValue || change.currentValue === null)) {
         if (propName === 'widgetsBundle') {
           this.loadLibrary();
         }
@@ -69,36 +72,38 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges {
 
   private loadLibrary() {
     this.widgets.length = 0;
-    const bundleAlias = this.widgetsBundle.alias;
+    if (this.widgetsBundle !== null) {
-    const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID;
+      const bundleAlias = this.widgetsBundle.alias;
-    this.widgetsService.getBundleWidgetTypes(bundleAlias,
+      const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID;
-      isSystem).subscribe(
+      this.widgetsService.getBundleWidgetTypes(bundleAlias,
-      (types) => {
+        isSystem).subscribe(
-        types = types.sort((a, b) => b.createdTime - a.createdTime);
+        (types) => {
-        let top = 0;
+          types = types.sort((a, b) => b.createdTime - a.createdTime);
-        types.forEach((type) => {
+          let top = 0;
-          const widgetTypeInfo = toWidgetInfo(type);
+          types.forEach((type) => {
-          const widget: Widget = {
+            const widgetTypeInfo = toWidgetInfo(type);
-            typeId: type.id,
+            const widget: Widget = {
-            isSystemType: isSystem,
+              typeId: type.id,
-            bundleAlias,
+              isSystemType: isSystem,
-            typeAlias: widgetTypeInfo.alias,
+              bundleAlias,
-            type: widgetTypeInfo.type,
+              typeAlias: widgetTypeInfo.alias,
-            title: widgetTypeInfo.widgetName,
+              type: widgetTypeInfo.type,
-            image: widgetTypeInfo.image,
+              title: widgetTypeInfo.widgetName,
-            description: widgetTypeInfo.description,
+              image: widgetTypeInfo.image,
-            sizeX: widgetTypeInfo.sizeX,
+              description: widgetTypeInfo.description,
-            sizeY: widgetTypeInfo.sizeY,
+              sizeX: widgetTypeInfo.sizeX,
-            row: top,
+              sizeY: widgetTypeInfo.sizeY,
-            col: 0,
+              row: top,
-            config: JSON.parse(widgetTypeInfo.defaultConfig)
+              col: 0,
-          };
+              config: JSON.parse(widgetTypeInfo.defaultConfig)
-          widget.config.title = widgetTypeInfo.widgetName;
+            };
-          this.widgets.push(widget);
+            widget.config.title = widgetTypeInfo.widgetName;
-          top += widget.sizeY;
+            this.widgets.push(widget);
-        });
+            top += widget.sizeY;
-      }
+          });
-    );
+        }
+      );
+    }
   }
 
   hasWidgetTypes(): boolean {
@@ -119,10 +124,11 @@ export class DashboardWidgetSelectComponent implements OnInit, OnChanges {
     this.widgetsBundleSelected.emit(bundle);
   }
 
-  backToSelectWidgetsBundle() {
+  getPreviewImage(imageUrl: string | null): SafeUrl | string {
-    this.widgetsBundle = null;
+    if (isDefinedAndNotNull(imageUrl)) {
-    this.widgets.length = 0;
+      return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
-    this.widgetsBundleSelected.emit(null);
+    }
+    return '/assets/widget-preview-empty.svg';
   }
 
 }

ui-ngx/src/app/modules/home/components/details-panel.component.html

@@ -19,7 +19,12 @@
   <mat-toolbar class="details-toolbar" color="primary" [ngStyle]="{height: headerHeightPx+'px'}">
     <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" style="height: 100%;">
       <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start">
-        <span class="tb-details-title">{{ headerTitle }}</span>
+        <div class="tb-details-title" fxLayout="row" fxLayoutGap="16px">
+          <button class="tb-mat-20" mat-icon-button type="button" [fxHide]="!showBackStateIcon" (click)="onBackStateDetails()">
+            <mat-icon>arrow_back</mat-icon>
+          </button>
+          <span>{{ headerTitle }}</span>
+        </div>
         <span class="tb-details-subtitle">{{ headerSubtitle }}</span>
         <span style="width: 100%;">
           <ng-content select=".header-pane"></ng-content>

ui-ngx/src/app/modules/home/components/details-panel.component.ts

@@ -32,6 +32,7 @@ export class DetailsPanelComponent extends PageComponent {
   @Input() headerSubtitle = '';
   @Input() isReadOnly = false;
   @Input() isAlwaysEdit = false;
+  @Input() showBackStateIcon = false;
 
   theFormValue: FormGroup;
 
@@ -50,6 +51,8 @@ export class DetailsPanelComponent extends PageComponent {
   toggleDetailsEditMode = new EventEmitter<boolean>();
   @Output()
   applyDetails = new EventEmitter<void>();
+  @Output()
+  backStateDetails = new EventEmitter<void>();
 
   isEditValue = false;
 
@@ -75,6 +78,10 @@ export class DetailsPanelComponent extends PageComponent {
     this.closeDetails.emit();
   }
 
+  onBackStateDetails() {
+    this.backStateDetails.emit();
+  }
+
   onToggleDetailsEditMode() {
     if (!this.isAlwaysEdit) {
       this.isEdit = !this.isEdit;

ui-ngx/src/styles.scss

@@ -762,6 +762,9 @@ mat-label {
   }
 
   .mat-icon-button {
+    &.tb-mat-20 {
+      @include tb-mat-icon-button-size(20);
+    }
     &.tb-mat-32 {
       @include tb-mat-icon-button-size(32);
     }