From 8ab2c9cd20141742729d4b2f253ddf2cb78cf6c6 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 15 Oct 2024 13:10:46 +0300
Subject: [PATCH] Flex layout replacements. Switch to tailwind.css.

---
 ...ification-type-filter-panel.component.html |  6 +-
 .../cards/value-card-widget.component.html    |  2 +-
 .../date-range-navigator-panel.component.html |  6 +-
 .../date-range-navigator.component.html       | 12 ++-
 .../entities-hierarchy-widget.component.html  |  8 +-
 .../entities-table-widget.component.html      | 98 ++++++++++---------
 6 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
index 3637a502bd..4e39c80cd5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/notification-type-filter-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" fxFlex class="mat-content mat-padding" (ngSubmit)="update()">
+<form class="mat-content mat-padding flex-1 flex flex-col" (ngSubmit)="update()">
   <div class="tb-form-panel no-padding">
     <div class="tb-form-row column-xs">
       <div class="fixed-title-width" translate>widgets.notification.notification-types</div>
@@ -54,14 +54,14 @@
     </div>
   </div>
 
-  <div fxLayout="row" class="tb-panel-actions" fxLayoutAlign="end center">
+  <div class="tb-panel-actions flex flex-row justify-end items-center">
     <button type="button"
             mat-button
             (click)="reset()"
             color="primary">
       {{ 'action.reset' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button type="button"
             (click)="cancel()"
             mat-button>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
index 814f9f08d8..c97984c352 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
@@ -46,7 +46,7 @@
       <ng-template [ngSwitchCase]="layout === valueCardLayout.horizontal ||
                                    layout === valueCardLayout.horizontal_reversed ? layout : ''">
         <ng-container *ngTemplateOutlet="iconWithLabelTpl"></ng-container>
-        <div fxFlex></div>
+        <div class="flex-1"></div>
         <ng-container *ngTemplateOutlet="valueTpl"></ng-container>
       </ng-template>
     </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
index b559f8de6c..045165f0a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <mat-form-field *ngIf="settings.showTemplate" class="mat-block">
     <input readonly [ngModel]="model.chosenLabel" matInput type="text">
   </mat-form-field>
@@ -25,8 +25,8 @@
                                 [singleDatePicker]="settings.onePanel"
                                 [autoApply]="true" (choosedDate)="choosedDate($event)">
   </ngx-daterangepicker-material>
-  <div class="tb-panel-actions" fxLayout="row" *ngIf="!settings.autoConfirm">
-    <span fxFlex></span>
+  <div class="tb-panel-actions flex flex-row" *ngIf="!settings.autoConfirm">
+    <span class="flex-1"></span>
     <button mat-button mat-raised-button color="primary"
             type="button" (click)="apply()">
       {{ 'action.ok' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
index 0decaaf7ee..1dc4a46216 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
@@ -16,8 +16,10 @@
 
 -->
 <div class="date-range-navigator"
-     [ngClass]="{'short-mode':ctx.width < 400, 'labels-hidden': settings.hideLabels, 'long-mode': ctx.width >= 400}">
-  <mat-form-field class="mat-block" [fxHide]="settings.hidePicker" (click)="openNavigatorPanel($event)">
+     [class.short-mode]="ctx.width < 400"
+     [class.labels-hidden]="settings.hideLabels"
+     [class.long-mode]="ctx.width >= 400">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
     <mat-label *ngIf="!settings.hideLabels" translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
     <mat-select #datePicker [ngModel]="advancedModel.chosenLabel">
       <mat-option [value]="advancedModel.chosenLabel">
@@ -25,7 +27,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="mat-block" [fxHide]="settings.hideInterval">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
     <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Interval</mat-label>
     <mat-select [(ngModel)]="selectedDateInterval" (ngModelChange)="changeInterval()">
       <mat-option *ngIf="customInterval" [value]="customInterval.ts">
@@ -37,11 +39,11 @@
     </mat-select>
   </mat-form-field>
 
-  <div class="drn__element step" [fxHide]="settings.hideStepSize">
+  <div class="drn__element step" [class.!hidden]="settings.hideStepSize">
     <button mat-icon-button (click)="goBack()">
       <mat-icon>keyboard_arrow_left</mat-icon>
     </button>
-    <mat-form-field class="mat-block" fxFlex.gt-sm>
+    <mat-form-field class="mat-block gt-sm:flex-1">
       <mat-label translate *ngIf="!settings.hideLabels">widgets.date-range-navigator.localizationMap.Step size</mat-label>
       <mat-select [(ngModel)]="selectedStepSize">
         <mat-option *ngFor="let date of datesMap | keyvalue: originalOrder" [value]="date.value.ts">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
index 7f30329e07..8d9a83d289 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-hierarchy-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-entities-hierarchy tb-absolute-fill" tb-toast toastTarget="{{ toastTargetId }}">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,7 +37,7 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="tb-entities-nav-tree-panel">
+    <div class="tb-entities-nav-tree-panel flex-1">
       <tb-nav-tree
         [loadNodes]="loadNodes"
         [onNodeSelected]="onNodeSelected"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
index 36d58742a6..bcaf9d186d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entity/entities-table-widget.component.html
@@ -16,15 +16,15 @@
 
 -->
 <div class="tb-table-widget tb-absolute-fill">
-  <div fxFlex fxLayout="column" class="tb-absolute-fill">
-    <mat-toolbar class="mat-mdc-table-toolbar" [fxShow]="textSearchMode">
+  <div class="tb-absolute-fill flex-1 flex flex-col">
+    <mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
       <div class="mat-toolbar-tools">
         <button mat-icon-button
                 matTooltip="{{ 'action.search' | translate }}"
                 matTooltipPosition="above">
           <mat-icon>search</mat-icon>
         </button>
-        <mat-form-field fxFlex>
+        <mat-form-field class="flex-1">
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [formControl]="textSearch"
@@ -37,71 +37,75 @@
         </button>
       </div>
     </mat-toolbar>
-    <div fxFlex class="table-container">
+    <div class="table-container flex-1">
       <table mat-table [dataSource]="entityDatasource" [trackBy]="trackByEntityId"
                  matSort [matSortActive]="sortOrderProperty" [matSortDirection]="pageLinkSortDirection()" matSortDisableClear>
         <ng-container [matColumnDef]="column.def" *ngFor="let column of columns; let $index = index; trackBy: trackByColumnDef;">
-          <mat-header-cell [ngStyle]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
+          <mat-header-cell [style]="headerStyle(column)" *matHeaderCellDef mat-sort-header [disabled]="!column.sortable"> {{ column.title }} </mat-header-cell>
             <mat-cell *matCellDef="let entity; let row = index"
                       [innerHTML]="cellContent(entity, column, row)"
-                      [ngStyle]="cellStyle(entity, column, row)"
+                      [style]="cellStyle(entity, column, row)"
                       (click)="onCellClick($event, entity, column, $index)"
                       [class.tb-pointer]="columnHasCellClick($index)">
             </mat-cell>
         </ng-container>
         <ng-container matColumnDef="actions" [stickyEnd]="enableStickyAction">
-          <mat-header-cell *matHeaderCellDef [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
+          <mat-header-cell *matHeaderCellDef>
+            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+              <div class="gt-md:!hidden" style="min-width: 48px;">
+              </div>
+              <div class="lt-lg:!hidden"
+                   [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
+              </div>
+            </ng-container>
           </mat-header-cell>
-          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)" [ngStyle.gt-md]="{ minWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                maxWidth: (entityDatasource.countCellButtonAction * 48) + 'px',
-                                                                width: (entityDatasource.countCellButtonAction * 48) + 'px' }">
-            <div [fxHide]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
-              <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        *ngIf="actionDescriptor.icon"
-                        matTooltip="{{ actionDescriptor.displayName }}"
-                        matTooltipPosition="above"
-                        (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                  <tb-icon>{{actionDescriptor.icon}}</tb-icon>
-                </button>
-              </ng-container>
-            </div>
-            <div fxHide [fxShow.lt-lg]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" *ngIf="entity.hasActions">
-              <button mat-icon-button
-                      (click)="$event.stopPropagation(); ctx.detectChanges();"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+          <mat-cell *matCellDef="let entity; let row = index" [style]="rowStyle(entity, row)">
+            <ng-container *ngIf="entityDatasource.countCellButtonAction">
+              <div [class.lt-lg:!hidden]="showCellActionsMenu && entityDatasource.countCellButtonAction !== 1" class="flex flex-row justify-end items-stretch"
+                   [style.min-width]="(entityDatasource.countCellButtonAction * 48) + 'px'">
                 <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
-                  <button mat-menu-item *ngIf="actionDescriptor.icon"
-                          [disabled]="isLoading$ | async"
+                  <span *ngIf="!actionDescriptor.icon" style="width: 48px;"></span>
+                  <button mat-icon-button [disabled]="isLoading$ | async"
+                          *ngIf="actionDescriptor.icon"
+                          matTooltip="{{ actionDescriptor.displayName }}"
+                          matTooltipPosition="above"
                           (click)="onActionButtonClick($event, entity, actionDescriptor)">
-                    <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
-                    <span>{{ actionDescriptor.displayName }}</span>
+                    <tb-icon>{{actionDescriptor.icon}}</tb-icon>
                   </button>
                 </ng-container>
-              </mat-menu>
-            </div>
+              </div>
+              <div [class.!hidden]="!showCellActionsMenu || entityDatasource.countCellButtonAction === 1" class="gt-md:!hidden" *ngIf="entity.hasActions">
+                <button mat-icon-button
+                        (click)="$event.stopPropagation(); ctx.detectChanges();"
+                        [matMenuTriggerFor]="cellActionsMenu">
+                  <mat-icon class="material-icons">more_vert</mat-icon>
+                </button>
+                <mat-menu #cellActionsMenu="matMenu" xPosition="before">
+                  <ng-container *ngFor="let actionDescriptor of entity.actionCellButtons; trackBy: trackByActionCellDescriptionId">
+                    <button mat-menu-item *ngIf="actionDescriptor.icon"
+                            [disabled]="isLoading$ | async"
+                            (click)="onActionButtonClick($event, entity, actionDescriptor)">
+                      <tb-icon matMenuItemIcon>{{actionDescriptor.icon}}</tb-icon>
+                      <span>{{ actionDescriptor.displayName }}</span>
+                    </button>
+                  </ng-container>
+                </mat-menu>
+              </div>
+            </ng-container>
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: enableStickyHeader"></mat-header-row>
-        <mat-row [ngClass]="{'tb-current-entity': entityDatasource.isCurrentEntity(entity),
-                             'invisible': entityDatasource.dataLoading,
-                             'tb-pointer': hasRowAction}"
+        <mat-row [class.tb-current-entity]="entityDatasource.isCurrentEntity(entity)"
+                 [class.invisible]="entityDatasource.dataLoading"
+                 [class.tb-pointer]="hasRowAction"
                  *matRowDef="let entity; columns: displayedColumns; let row = index"
-                 [ngStyle]="rowStyle(entity, row)"
+                 [style]="rowStyle(entity, row)"
                  (click)="onRowClick($event, entity)" (dblclick)="onRowClick($event, entity, true)"></mat-row>
       </table>
-      <span [fxShow]="(entityDatasource.isEmpty() | async) && !entityDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ noDataDisplayMessageText }}</span>
-      <span [fxShow]="entityDatasource.dataLoading"
-            fxLayoutAlign="center center"
-            class="no-data-found">{{ 'common.loading' | translate }}</span>
+      <span [class.!hidden]="(entityDatasource.isEmpty() | async) === false || entityDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ noDataDisplayMessageText }}</span>
+      <span [class.!hidden]="!entityDatasource.dataLoading"
+            class="no-data-found flex justify-center items-center">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider *ngIf="displayPagination"></mat-divider>
     <mat-paginator *ngIf="displayPagination"