dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fixed incorrect update date in widgets action table when switching widgets; Refactoring

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-03-26 15:48:18 +02:00
parent 7ec462d121
commit 82db1ceaef
2 changed files with 28 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.models.ts
View File

@ -21,11 +21,11 @@ import {
widgetActionTypeTranslationMap widgetActionTypeTranslationMap
} from '@app/shared/models/widget.models'; } from '@app/shared/models/widget.models';
import { CollectionViewer, DataSource } from '@angular/cdk/collections'; import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, Observable, of, ReplaySubject } from 'rxjs'; import { BehaviorSubject, Observable, of, ReplaySubject, shareReplay } from 'rxjs';
import { emptyPageData, PageData } from '@shared/models/page/page-data'; import { emptyPageData, PageData } from '@shared/models/page/page-data';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { PageLink } from '@shared/models/page/page-link'; import { PageLink } from '@shared/models/page/page-link';
import { catchError, map, publishReplay, refCount } from 'rxjs/operators'; import { catchError, map } from 'rxjs/operators';
import { UtilsService } from '@core/services/utils.service'; import { UtilsService } from '@core/services/utils.service';
import { deepClone } from '@core/utils'; import { deepClone } from '@core/utils';
@ -68,11 +68,11 @@ export class WidgetActionsDatasource implements DataSource<WidgetActionDescripto
constructor(private translate: TranslateService, constructor(private translate: TranslateService,
private utils: UtilsService) {} private utils: UtilsService) {}
connect(collectionViewer: CollectionViewer): Observable<WidgetActionDescriptorInfo[] | ReadonlyArray<WidgetActionDescriptorInfo>> { connect(_collectionViewer: CollectionViewer): Observable<WidgetActionDescriptorInfo[] | ReadonlyArray<WidgetActionDescriptorInfo>> {
return this.actionsSubject.asObservable(); return this.actionsSubject.asObservable();
} }
disconnect(collectionViewer: CollectionViewer): void { disconnect(_collectionViewer: CollectionViewer): void {
this.actionsSubject.complete(); this.actionsSubject.complete();
this.pageDataSubject.complete(); this.pageDataSubject.complete();
} }
@ -115,8 +115,7 @@ export class WidgetActionsDatasource implements DataSource<WidgetActionDescripto
}); });
} }
this.allActions = of(actions).pipe( this.allActions = of(actions).pipe(
publishReplay(1), shareReplay(1)
refCount()
); );
} }
return this.allActions; return this.allActions;

51
ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts
View File

@ -20,7 +20,8 @@ import {
Component, Component,
ElementRef, ElementRef,
forwardRef, forwardRef,
Input, NgZone, Input,
NgZone,
OnDestroy, OnDestroy,
OnInit, OnInit,
ViewChild ViewChild
@ -28,8 +29,6 @@ import {
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { DialogService } from '@core/services/dialog.service'; import { DialogService } from '@core/services/dialog.service';
import { PageLink } from '@shared/models/page/page-link'; import { PageLink } from '@shared/models/page/page-link';
@ -79,18 +78,16 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
@Input() additionalWidgetActionTypes: WidgetActionType[]; @Input() additionalWidgetActionTypes: WidgetActionType[];
innerValue: WidgetActionsData;
displayedColumns: string[]; displayedColumns: string[];
pageLink: PageLink; pageLink: PageLink;
textSearchMode = false; textSearchMode = false;
hidePageSize = false; hidePageSize = false;
dataSource: WidgetActionsDatasource; dataSource: WidgetActionsDatasource;
viewsInited = false;
dirtyValue = false;
dragDisabled = true; dragDisabled = true;
private actionsMap: {[actionSourceId: string]: Array<WidgetActionDescriptor>};
private viewsInited = false;
private dirtyValue = false;
private widgetResize$: ResizeObserver; private widgetResize$: ResizeObserver;
private destroyed = false; private destroyed = false;
@ -101,15 +98,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
private propagateChange = (_: any) => {}; private propagateChange = (_: any) => {};
constructor(protected store: Store<AppState>, constructor(private translate: TranslateService,
private translate: TranslateService,
private utils: UtilsService, private utils: UtilsService,
private dialog: MatDialog, private dialog: MatDialog,
private dialogs: DialogService, private dialogs: DialogService,
private cd: ChangeDetectorRef, private cd: ChangeDetectorRef,
private elementRef: ElementRef, private elementRef: ElementRef,
private zone: NgZone) { private zone: NgZone) {
super(store); super();
const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC }; const sortOrder: SortOrder = { property: 'actionSourceName', direction: Direction.ASC };
this.pageLink = new PageLink(10, 0, null, sortOrder); this.pageLink = new PageLink(10, 0, null, sortOrder);
this.dataSource = new WidgetActionsDatasource(this.translate, this.utils); this.dataSource = new WidgetActionsDatasource(this.translate, this.utils);
@ -137,7 +133,6 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
} }
ngAfterViewInit() { ngAfterViewInit() {
fromEvent(this.searchInputField.nativeElement, 'keyup') fromEvent(this.searchInputField.nativeElement, 'keyup')
.pipe( .pipe(
debounceTime(150), debounceTime(150),
@ -162,10 +157,9 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
this.dirtyValue = false; this.dirtyValue = false;
this.updateData(true); this.updateData(true);
} }
} }
updateData(reload: boolean = false) { private updateData(reload: boolean = false) {
this.pageLink.page = this.paginator.pageIndex; this.pageLink.page = this.paginator.pageIndex;
this.pageLink.pageSize = this.paginator.pageSize; this.pageLink.pageSize = this.paginator.pageSize;
this.pageLink.sortOrder.property = this.sort.active; this.pageLink.sortOrder.property = this.sort.active;
@ -198,7 +192,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
this.openWidgetActionDialog($event, action); this.openWidgetActionDialog($event, action);
} }
openWidgetActionDialog($event: Event, action: WidgetActionDescriptorInfo = null) { private openWidgetActionDialog($event: Event, action: WidgetActionDescriptorInfo = null) {
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();
} }
@ -208,15 +202,15 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
prevActionSourceId = action.actionSourceId; prevActionSourceId = action.actionSourceId;
} }
const availableActionSources: {[actionSourceId: string]: WidgetActionSource} = {}; const availableActionSources: {[actionSourceId: string]: WidgetActionSource} = {};
for (const id of Object.keys(this.innerValue.actionSources)) { for (const id of Object.keys(this.actionSources)) {
const actionSource = this.innerValue.actionSources[id]; const actionSource = this.actionSources[id];
if (actionSource.multiple) { if (actionSource.multiple) {
availableActionSources[id] = actionSource; availableActionSources[id] = actionSource;
} else { } else {
if (!isAdd && action.actionSourceId === id) { if (!isAdd && action.actionSourceId === id) {
availableActionSources[id] = actionSource; availableActionSources[id] = actionSource;
} else { } else {
const existing = this.innerValue.actionsMap[id]; const existing = this.actionsMap[id];
if (!existing || !existing.length) { if (!existing || !existing.length) {
availableActionSources[id] = actionSource; availableActionSources[id] = actionSource;
} }
@ -225,7 +219,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
} }
const actionsData: WidgetActionsData = { const actionsData: WidgetActionsData = {
actionsMap: this.innerValue.actionsMap, actionsMap: this.actionsMap,
actionSources: availableActionSources actionSources: availableActionSources
}; };
@ -277,7 +271,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
} }
private getOrCreateTargetActions(actionSourceId: string): Array<WidgetActionDescriptor> { private getOrCreateTargetActions(actionSourceId: string): Array<WidgetActionDescriptor> {
const actionsMap = this.innerValue.actionsMap; const actionsMap = this.actionsMap;
let targetActions = actionsMap[actionSourceId]; let targetActions = actionsMap[actionSourceId];
if (!targetActions) { if (!targetActions) {
targetActions = []; targetActions = [];
@ -323,7 +317,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
this.updateData(); this.updateData();
} }
resetSortAndFilter(update: boolean = true) { private resetSortAndFilter(update: boolean = true) {
this.pageLink.textSearch = null; this.pageLink.textSearch = null;
this.paginator.pageIndex = 0; this.paginator.pageIndex = 0;
const sortable = this.sort.sortables.get('actionSourceName'); const sortable = this.sort.sortables.get('actionSourceName');
@ -338,7 +332,7 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
this.propagateChange = fn; this.propagateChange = fn;
} }
registerOnTouched(fn: any): void { registerOnTouched(_fn: any): void {
} }
setDisabledState(isDisabled: boolean): void { setDisabledState(isDisabled: boolean): void {
@ -346,13 +340,14 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
} }
writeValue(actions?: {[actionSourceId: string]: Array<WidgetActionDescriptor>}): void { writeValue(actions?: {[actionSourceId: string]: Array<WidgetActionDescriptor>}): void {
this.innerValue = { this.actionsMap = actions ?? {};
actionsMap: actions || {},
actionSources: this.actionSources || {}
};
setTimeout(() => { setTimeout(() => {
if (!this.destroyed) { if (!this.destroyed) {
this.dataSource.setActions(this.innerValue); const actionData: WidgetActionsData = {
actionsMap: this.actionsMap,
actionSources: this.actionSources
};
this.dataSource.setActions(actionData);
if (this.viewsInited) { if (this.viewsInited) {
this.resetSortAndFilter(true); this.resetSortAndFilter(true);
} else { } else {
@ -364,6 +359,6 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni
private onActionsUpdated() { private onActionsUpdated() {
this.updateData(true); this.updateData(true);
this.propagateChange(this.innerValue.actionsMap); this.propagateChange(this.actionsMap);
} }
} }