From 858b2eab0cbc16af23b378007f50b6c18bb57731 Mon Sep 17 00:00:00 2001
From: mpetrov <mpetrov@thingsboard.io>
Date: Mon, 17 Jun 2024 11:09:47 +0300
Subject: [PATCH] [PROD-3656] [FIX] refactoring

---
 ...ice-rpc-connector-templates.component.html |  2 +-
 .../widget/widget-components.module.ts        | 16 ++---
 .../shared/pipe/key-value-not-empty.pipe.ts   | 58 +++++++++++++------
 ui-ngx/src/app/shared/shared.module.ts        |  3 -
 4 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
index dc9da182ef..4c5e9b68ba 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc-connector-templates.component.html
@@ -32,7 +32,7 @@
   </mat-expansion-panel-header>
 
   <ng-container
-    *ngFor="let config of template.config | keyValueIsNotEmpty : originalOrder"
+    *ngFor="let config of template.config | keyValueIsNotEmpty"
     [ngTemplateOutlet]="RPCTemplateRef"
     [ngTemplateOutletContext]="{ $implicit: config, innerValue: false }">
   </ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
index d345f5954f..81fbf0aa68 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@@ -100,6 +100,7 @@ import { BarChartWidgetComponent } from '@home/components/widget/lib/chart/bar-c
 import { PolarAreaWidgetComponent } from '@home/components/widget/lib/chart/polar-area-widget.component';
 import { RadarChartWidgetComponent } from '@home/components/widget/lib/chart/radar-chart-widget.component';
 import { MobileAppQrcodeWidgetComponent } from '@home/components/widget/lib/mobile-app-qrcode-widget.component';
+import { KeyValueIsNotEmptyPipe } from "@shared/pipe/key-value-not-empty.pipe";
 
 @NgModule({
   declarations:
@@ -168,13 +169,14 @@ import { MobileAppQrcodeWidgetComponent } from '@home/components/widget/lib/mobi
       PolarAreaWidgetComponent,
       RadarChartWidgetComponent
     ],
-  imports: [
-    CommonModule,
-    SharedModule,
-    RpcWidgetsModule,
-    HomePageWidgetsModule,
-    SharedHomeComponentsModule
-  ],
+    imports: [
+        CommonModule,
+        SharedModule,
+        RpcWidgetsModule,
+        HomePageWidgetsModule,
+        SharedHomeComponentsModule,
+        KeyValueIsNotEmptyPipe
+    ],
     exports: [
         EntitiesTableWidgetComponent,
         AlarmsTableWidgetComponent,
diff --git a/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts b/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts
index 16c5ad29b0..60b09bab0b 100644
--- a/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts
+++ b/ui-ngx/src/app/shared/pipe/key-value-not-empty.pipe.ts
@@ -14,31 +14,53 @@
 /// limitations under the License.
 ///
 
-import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers, Pipe, PipeTransform } from '@angular/core';
-import { KeyValue, KeyValuePipe } from "@angular/common";
+import {
+  inject,
+  KeyValueChangeRecord,
+  KeyValueChanges,
+  KeyValueDiffer,
+  KeyValueDiffers,
+  Pipe,
+  PipeTransform
+} from '@angular/core';
+import { KeyValue } from "@angular/common";
 
 @Pipe({
   name: 'keyValueIsNotEmpty',
+  pure: false,
+  standalone: true,
 })
-export class KeyValueIsNotEmptyPipe extends KeyValuePipe implements PipeTransform {
-  private difference!: KeyValueDiffer<any, any>;
+export class KeyValueIsNotEmptyPipe implements PipeTransform {
+  private differs: KeyValueDiffers = inject(KeyValueDiffers);
+  private differ!: KeyValueDiffer<string, unknown>;
+  private keyValues: Array<KeyValue<string, unknown>> = [];
 
-  constructor(private readonly keyValueDiffers: KeyValueDiffers) {
-    super(keyValueDiffers);
-  }
+  // This is a custom implementation of angular keyvalue pipe
+  // https://github.com/angular/angular/blob/main/packages/common/src/pipes/keyvalue_pipe.ts
+  transform(
+    input: Record<string, unknown>,
+  ): Array<KeyValue<string, unknown>> {
+    if (!input || (!(input instanceof Map) && typeof input !== 'object')) {
+      return null;
+    }
+
+    this.differ ??= this.differs.find(input).create();
+
+    const differChanges: KeyValueChanges<string, unknown> | null = this.differ.diff(input);
 
-  transform<ValueType>(
-    input: Record<string, ValueType>,
-    compareFn?: (a: KeyValue<string, ValueType>, b: KeyValue<string, ValueType>) => number
-  ): KeyValue<string, ValueType>[] & null {
-    super.transform(input, compareFn);
-    this.difference ??= this.keyValueDiffers.find(input).create();
-    const differChanges: KeyValueChanges<string, ValueType> | null = this.difference.diff(input as any);
     if (differChanges) {
-      console.log(differChanges)
-      const filteredEntries = [...Object.entries(input)]
-        .filter(([_, value]) => value !== null && value !== undefined);
-      return super.transform(new Map<string, ValueType>(filteredEntries), compareFn) as KeyValue<string, ValueType>[] & null;
+      this.keyValues = [];
+      differChanges.forEachItem((r: KeyValueChangeRecord<string, unknown>) => {
+        if (r.currentValue !== null && r.currentValue !== undefined) {
+          this.keyValues.push(this.makeKeyValuePair(r.key, r.currentValue!));
+        }
+      });
     }
+
+    return this.keyValues;
+  }
+
+  private makeKeyValuePair(key: string, value: unknown): KeyValue<string, unknown> {
+    return {key: key, value: value};
   }
 }
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 25bcd56b47..567b80ed83 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -219,7 +219,6 @@ import { ImageGalleryDialogComponent } from '@shared/components/image/image-gall
 import { RuleChainSelectPanelComponent } from '@shared/components/rule-chain/rule-chain-select-panel.component';
 import { WidgetButtonComponent } from '@shared/components/button/widget-button.component';
 import { HexInputComponent } from '@shared/components/color-picker/hex-input.component';
-import { KeyValueIsNotEmptyPipe } from "@shared/pipe/key-value-not-empty.pipe";
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -367,7 +366,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     ShortNumberPipe,
     SelectableColumnsPipe,
     KeyboardShortcutPipe,
-    KeyValueIsNotEmptyPipe,
     TbJsonToStringDirective,
     JsonObjectEditDialogComponent,
     HistorySelectorComponent,
@@ -621,7 +619,6 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     SafePipe,
     ShortNumberPipe,
     SelectableColumnsPipe,
-    KeyValueIsNotEmptyPipe,
     RouterModule,
     TranslateModule,
     JsonObjectEditDialogComponent,