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 @@
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;
+export class KeyValueIsNotEmptyPipe implements PipeTransform {
+ private differs: KeyValueDiffers = inject(KeyValueDiffers);
+ private differ!: KeyValueDiffer;
+ private keyValues: Array> = [];
- 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,
+ ): Array> {
+ if (!input || (!(input instanceof Map) && typeof input !== 'object')) {
+ return null;
+ }
+
+ this.differ ??= this.differs.find(input).create();
+
+ const differChanges: KeyValueChanges | null = this.differ.diff(input);
- transform(
- input: Record,
- compareFn?: (a: KeyValue, b: KeyValue) => number
- ): KeyValue[] & null {
- super.transform(input, compareFn);
- this.difference ??= this.keyValueDiffers.find(input).create();
- const differChanges: KeyValueChanges | 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(filteredEntries), compareFn) as KeyValue[] & null;
+ this.keyValues = [];
+ differChanges.forEachItem((r: KeyValueChangeRecord) => {
+ 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 {
+ 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,