UI: Refactoring

2 years ago · fd8d3fbf62
3 changed files with 89 additions and 84 deletions
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-import { Component, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@ -28,7 +28,6 @@ import {
  ValidatorFn,
  Validators
 } from '@angular/forms';
-import { Subject } from 'rxjs';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@ -48,12 +47,12 @@ import {
  widgetHeaderActionButtonTypeTranslationMap,
  widgetType
 } from '@shared/models/widget.models';
-import { takeUntil } from 'rxjs/operators';
 import { CustomActionEditorCompleter } from '@home/components/widget/lib/settings/common/action/custom-action.models';
 import { WidgetService } from '@core/http/widget.service';
 import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
 import { MatSelect } from '@angular/material/select';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

 export interface WidgetActionDialogData {
  isAdd: boolean;
@ -72,8 +71,6 @@ export interface WidgetActionDialogData {
 export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDialogComponent,
                                                 WidgetActionDescriptorInfo> implements OnInit, OnDestroy, ErrorStateMatcher {

-  private destroy$ = new Subject<void>();
-
  widgetActionFormGroup: FormGroup;

  isAdd: boolean;
@ -103,7 +100,8 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
              @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
              public dialogRef: MatDialogRef<WidgetActionDialogComponent, WidgetActionDescriptorInfo>,
              public fb: FormBuilder,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private destroyRef: DestroyRef) {
    super(store, router, dialogRef);
    this.isAdd = data.isAdd;
    if (this.isAdd) {
@ -141,7 +139,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
    this.updateShowWidgetActionForm();
    this.widgetHeaderButtonValidators();
    this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
    ).subscribe((value) => {
      this.widgetActionFormGroup.get('name').updateValueAndValidity();
      this.updateShowWidgetActionForm();
@ -153,12 +151,12 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
      }
    });
    this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
    ).subscribe(() => {
      this.updateShowWidgetActionForm();
    });
    this.widgetActionFormGroup.get('buttonType').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
    ).subscribe(() => this.widgetHeaderButtonValidators());
    setTimeout(() => {
      if (this.action?.actionSourceId === 'cellClick') {
@ -172,8 +170,6 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
  }

  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
    super.ngOnDestroy();
  }

--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@ -37,77 +37,10 @@
         class="tb-widget-actions"
         [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
         (mousedown)="$event.stopPropagation()">
-      <div class="flex items-center gap-2">
-        <ng-container *ngFor="let action of widget.customHeaderActions">
-          @switch (action.buttonType) {
-            @case (widgetHeaderActionButtonType.icon) {
-              <button mat-icon-button
-                      [style]="action.customButtonStyle"
-                      [class.!hidden]="isEdit"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.miniFab) {
-              <button mat-mini-fab
-                      [style]="action.customButtonStyle"
-                      [class.!hidden]="isEdit"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.basic) {
-              <button [class.!hidden]="isEdit" mat-button
-                      [style]="action.customButtonStyle"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.raised) {
-              <button [class.!hidden]="isEdit" mat-raised-button
-                      [style]="action.customButtonStyle"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.stroked) {
-              <button [class.!hidden]="isEdit" mat-stroked-button
-                      [style]="action.customButtonStyle"
-                      [style.border-color]="action.buttonBorderColor"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.flat) {
-              <button [class.!hidden]="isEdit" mat-flat-button
-                      [style]="action.customButtonStyle"
-                      [style.background-color]="action.buttonFillColor"
-                      [style.border-color]="action.buttonBorderColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-          }
-        </ng-container>
+      <div class="flex items-center">
+        @for (action of widget.customHeaderActions; track action.name; let last = $last) {
+          <ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container>
+        }
      </div>

      <button mat-icon-button *ngFor="let action of widget.widgetActions"
@ -168,3 +101,79 @@
    </tb-timewindow>
  </div>
 </ng-template>
+
+<ng-template #widgetHeaderActionButton let-action="action" let-last="last">
+@switch (action.buttonType) {
+  @case (widgetHeaderActionButtonType.icon) {
+    <button mat-icon-button
+            [style]="action.customButtonStyle"
+            [class.!hidden]="isEdit"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.miniFab) {
+    <button mat-mini-fab
+            [style]="action.customButtonStyle"
+            [class.!hidden]="isEdit"
+            [class.mr-2]="!last"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.basic) {
+    <button [class.!hidden]="isEdit" mat-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.raised) {
+    <button [class.!hidden]="isEdit" mat-raised-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.stroked) {
+    <button [class.!hidden]="isEdit" mat-stroked-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.border-color]="action.buttonBorderColor"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.flat) {
+    <button [class.!hidden]="isEdit" mat-flat-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.background-color]="action.buttonFillColor"
+            [style.border-color]="action.buttonBorderColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+}
+</ng-template>
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
@ -86,8 +86,8 @@ div.tb-widget {
    flex-direction: row;
    place-content: center flex-start;
    align-items: center;
-    z-index: 19;
-    margin: 5px 0 5px;
+    z-index: 101;
+    margin: 5px 0 0;

    &-absolute {
      position: absolute;