UI: Refactoring dashboard managment
This commit is contained in:
Vladyslav_Prykhodko
parent
99b4c0fbda
commit
50e0272d34
@ -58,7 +58,7 @@ import {
|
||||
} from '@app/shared/models/dashboard.models';
|
||||
import { WINDOW } from '@core/services/window.service';
|
||||
import { WindowMessage } from '@shared/models/window-message.model';
|
||||
import { deepClone, guid, isDefined, isDefinedAndNotNull, isEqual, isNotEmptyStr } from '@app/core/utils';
|
||||
import { deepClone, guid, isDefined, isDefinedAndNotNull, isNotEmptyStr } from '@app/core/utils';
|
||||
import {
|
||||
DashboardContext,
|
||||
DashboardPageInitData,
|
||||
@ -119,7 +119,8 @@ import {
|
||||
} from '@home/components/dashboard-page/dashboard-settings-dialog.component';
|
||||
import {
|
||||
ManageDashboardStatesDialogComponent,
|
||||
ManageDashboardStatesDialogData
|
||||
ManageDashboardStatesDialogData,
|
||||
ManageDashboardStatesDialogResult
|
||||
} from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component';
|
||||
import { ImportExportService } from '@shared/import-export/import-export.service';
|
||||
import { AuthState } from '@app/core/auth/auth.models';
|
||||
@ -964,17 +965,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
|
||||
$event.stopPropagation();
|
||||
}
|
||||
this.dialog.open<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogData,
|
||||
{states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>(ManageDashboardStatesDialogComponent, {
|
||||
ManageDashboardStatesDialogResult>(ManageDashboardStatesDialogComponent, {
|
||||
disableClose: true,
|
||||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
|
||||
data: {
|
||||
states: deepClone(this.dashboard.configuration.states),
|
||||
widgets: deepClone(this.dashboard.configuration.widgets) as {[id: string]: Widget}
|
||||
widgets: this.dashboard.configuration.widgets as {[id: string]: Widget}
|
||||
}
|
||||
}).afterClosed().subscribe((result) => {
|
||||
if (result) {
|
||||
if (!isEqual(result.widgets, this.dashboard.configuration.widgets)) {
|
||||
this.dashboard.configuration.widgets = result.widgets;
|
||||
if (result.addWidgets) {
|
||||
Object.assign(this.dashboard.configuration.widgets, result.addWidgets);
|
||||
}
|
||||
if (result.states) {
|
||||
this.updateStates(result.states);
|
||||
|
||||
@ -15,143 +15,134 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<form [formGroup]="statesFormGroup" (ngSubmit)="save()" style="width: 750px;">
|
||||
<mat-toolbar color="primary">
|
||||
<h2 translate>dashboard.manage-states</h2>
|
||||
<span class="flex-1"></span>
|
||||
<button mat-icon-button
|
||||
(click)="cancel()"
|
||||
type="button">
|
||||
<mat-icon class="material-icons">close</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
|
||||
</mat-progress-bar>
|
||||
<div mat-dialog-content>
|
||||
<fieldset [disabled]="isLoading$ | async">
|
||||
<div class="manage-dashboard-states">
|
||||
<div class="tb-entity-table">
|
||||
<div class="tb-entity-table-content flex flex-col">
|
||||
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
|
||||
<div class="mat-toolbar-tools">
|
||||
<span class="tb-entity-table-title" translate>dashboard.states</span>
|
||||
<span class="flex-1"></span>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
(click)="addState($event)"
|
||||
matTooltip="{{ 'dashboard.add-state' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
|
||||
type="button"
|
||||
matTooltip="{{ 'action.search' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
|
||||
<div class="mat-toolbar-tools">
|
||||
<button mat-icon-button
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.search-states' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="flex-1">
|
||||
<mat-label> </mat-label>
|
||||
<input #searchInput matInput
|
||||
[(ngModel)]="pageLink.textSearch"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
placeholder="{{ 'dashboard.search-states' | translate }}"/>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="exitFilterMode()"
|
||||
type="button"
|
||||
matTooltip="{{ 'action.close' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource"
|
||||
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
{{ state.name }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
{{ state.id }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="root">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 80px"> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
<mat-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
<div class="flex flex-1 flex-row">
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.edit-state' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="editState($event, state)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.duplicate-state-action' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="duplicateState($event, state)">
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
</button>
|
||||
<button [class.!hidden]="state.root" mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.delete-state' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="deleteState($event, state)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row class="mat-row-select"
|
||||
*matRowDef="let state; columns: displayedColumns;"></mat-row>
|
||||
</table>
|
||||
<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
|
||||
class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-paginator [length]="dataSource.total() | async"
|
||||
[pageIndex]="pageLink.page"
|
||||
[pageSize]="pageLink.pageSize"
|
||||
[pageSizeOptions]="[5, 10, 15]"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
<mat-toolbar color="primary">
|
||||
<h2 translate>dashboard.manage-states</h2>
|
||||
<span class="flex-1"></span>
|
||||
<button mat-icon-button
|
||||
(click)="cancel()"
|
||||
type="button">
|
||||
<mat-icon class="material-icons">close</mat-icon>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<div mat-dialog-content class="manage-dashboard-states">
|
||||
<div class="tb-entity-table-content flex flex-col">
|
||||
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="textSearchMode">
|
||||
<div class="mat-toolbar-tools">
|
||||
<span class="tb-entity-table-title" translate>dashboard.states</span>
|
||||
<span class="flex-1"></span>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
(click)="addState($event)"
|
||||
matTooltip="{{ 'dashboard.add-state' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
|
||||
type="button"
|
||||
matTooltip="{{ 'action.search' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</mat-toolbar>
|
||||
<mat-toolbar class="mat-mdc-table-toolbar" [class.!hidden]="!textSearchMode">
|
||||
<div class="mat-toolbar-tools">
|
||||
<button mat-icon-button
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.search-states' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="flex-1">
|
||||
<mat-label> </mat-label>
|
||||
<input #searchInput matInput
|
||||
[(ngModel)]="pageLink.textSearch"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
placeholder="{{ 'dashboard.search-states' | translate }}"/>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="exitFilterMode()"
|
||||
type="button"
|
||||
matTooltip="{{ 'action.close' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource"
|
||||
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()" matSortDisableClear>
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 60%"> {{ 'dashboard.state-name' | translate }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
{{ state.name }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%"> {{ 'dashboard.state-id' | translate }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
{{ state.id }}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="root">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header style="width: 80px"> {{ 'dashboard.is-root-state' | translate }} </mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
<mat-icon class="material-icons mat-icon">{{state.root ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="actions" stickyEnd>
|
||||
<mat-header-cell *matHeaderCellDef style="min-width: 120px; max-width: 120px; width: 120px">
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let state">
|
||||
<div class="flex flex-1 flex-row">
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.edit-state' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="editState($event, state)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.duplicate-state-action' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="duplicateState($event, state)">
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
</button>
|
||||
<button [class.!hidden]="state.root" mat-icon-button [disabled]="isLoading$ | async"
|
||||
type="button"
|
||||
matTooltip="{{ 'dashboard.delete-state' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="deleteState($event, state)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
|
||||
<mat-row class="mat-row-select"
|
||||
*matRowDef="let state; columns: displayedColumns;"></mat-row>
|
||||
</table>
|
||||
<span [class.!hidden]="(dataSource.isEmpty() | async) === false"
|
||||
class="no-data-found flex items-center justify-center" translate>{{ 'dashboard.no-states-text' }}</span>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-paginator [length]="dataSource.total() | async"
|
||||
[pageIndex]="pageLink.page"
|
||||
[pageSize]="pageLink.pageSize"
|
||||
[pageSizeOptions]="[5, 10, 15]"></mat-paginator>
|
||||
</div>
|
||||
<div mat-dialog-actions class="flex items-center justify-end">
|
||||
<button mat-button color="primary"
|
||||
type="button"
|
||||
[disabled]="(isLoading$ | async)"
|
||||
(click)="cancel()" cdkFocusInitial>
|
||||
{{ 'action.cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary"
|
||||
type="submit"
|
||||
[disabled]="(isLoading$ | async) || statesFormGroup.invalid || !statesFormGroup.dirty">
|
||||
{{ 'action.save' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions class="flex items-center justify-end">
|
||||
<button mat-button color="primary"
|
||||
type="button"
|
||||
[disabled]="(isLoading$ | async)"
|
||||
(click)="cancel()" cdkFocusInitial>
|
||||
{{ 'action.cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary"
|
||||
type="submit"
|
||||
(click)="save()"
|
||||
[disabled]="(isLoading$ | async) || !isDirty">
|
||||
{{ 'action.save' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -13,27 +13,39 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
@import "../scss/constants";
|
||||
|
||||
:host {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: min-content auto min-content;
|
||||
|
||||
.manage-dashboard-states {
|
||||
.tb-entity-table {
|
||||
.tb-entity-table-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
.tb-entity-table-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.tb-entity-table-title {
|
||||
padding-right: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tb-entity-table-title {
|
||||
padding-right: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow: auto;
|
||||
}
|
||||
.table-container {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$mat-sm} {
|
||||
min-width: 470px;
|
||||
}
|
||||
|
||||
@media #{$mat-gt-sm} {
|
||||
min-width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
|
||||
@ -14,21 +14,10 @@
|
||||
/// limitations under the License.
|
||||
///
|
||||
|
||||
import {
|
||||
AfterViewInit,
|
||||
Component,
|
||||
ElementRef,
|
||||
Inject,
|
||||
OnInit,
|
||||
SecurityContext,
|
||||
SkipSelf,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
import { AfterViewInit, Component, ElementRef, Inject, OnInit, SecurityContext, ViewChild } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { AppState } from '@core/core.state';
|
||||
import { FormGroupDirective, NgForm, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { DialogComponent } from '@app/shared/components/dialog.component';
|
||||
import { DashboardState } from '@app/shared/models/dashboard.models';
|
||||
@ -44,7 +33,7 @@ import { fromEvent, merge } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { DialogService } from '@core/services/dialog.service';
|
||||
import { deepClone, isDefined } from '@core/utils';
|
||||
import { deepClone, isDefined, isEqual } from '@core/utils';
|
||||
import {
|
||||
DashboardStateDialogComponent,
|
||||
DashboardStateDialogData
|
||||
@ -58,42 +47,42 @@ export interface ManageDashboardStatesDialogData {
|
||||
widgets: {[id: string]: Widget };
|
||||
}
|
||||
|
||||
export interface ManageDashboardStatesDialogResult {
|
||||
states: {[id: string]: DashboardState };
|
||||
addWidgets?: {[id: string]: Widget };
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'tb-manage-dashboard-states-dialog',
|
||||
templateUrl: './manage-dashboard-states-dialog.component.html',
|
||||
providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardStatesDialogComponent}],
|
||||
styleUrls: ['./manage-dashboard-states-dialog.component.scss']
|
||||
})
|
||||
export class ManageDashboardStatesDialogComponent
|
||||
extends DialogComponent<ManageDashboardStatesDialogComponent, {states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>
|
||||
implements OnInit, ErrorStateMatcher, AfterViewInit {
|
||||
extends DialogComponent<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogResult>
|
||||
implements OnInit, AfterViewInit {
|
||||
|
||||
statesFormGroup: UntypedFormGroup;
|
||||
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef;
|
||||
|
||||
states: {[id: string]: DashboardState };
|
||||
widgets: {[id: string]: Widget};
|
||||
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
|
||||
@ViewChild(MatSort, {static: false}) sort: MatSort;
|
||||
|
||||
isDirty = false;
|
||||
|
||||
displayedColumns: string[];
|
||||
pageLink: PageLink;
|
||||
textSearchMode = false;
|
||||
dataSource: DashboardStatesDatasource;
|
||||
|
||||
submitted = false;
|
||||
private states: {[id: string]: DashboardState };
|
||||
private widgets: {[id: string]: Widget};
|
||||
|
||||
stateNames: Set<string> = new Set<string>();
|
||||
|
||||
@ViewChild('searchInput') searchInputField: ElementRef;
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
private stateNames: Set<string> = new Set<string>();
|
||||
private addWidgets: {[id: string]: Widget} = {};
|
||||
|
||||
constructor(protected store: Store<AppState>,
|
||||
protected router: Router,
|
||||
@Inject(MAT_DIALOG_DATA) public data: ManageDashboardStatesDialogData,
|
||||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher,
|
||||
public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent,
|
||||
{states: {[id: string]: DashboardState}; widgets: {[id: string]: Widget}}>,
|
||||
private fb: UntypedFormBuilder,
|
||||
public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent, ManageDashboardStatesDialogResult>,
|
||||
private translate: TranslateService,
|
||||
private dialogs: DialogService,
|
||||
private utils: UtilsService,
|
||||
@ -103,7 +92,6 @@ export class ManageDashboardStatesDialogComponent
|
||||
|
||||
this.states = this.data.states;
|
||||
this.widgets = this.data.widgets;
|
||||
this.statesFormGroup = this.fb.group({});
|
||||
Object.values(this.states).forEach(value => this.stateNames.add(value.name));
|
||||
|
||||
const sortOrder: SortOrder = { property: 'name', direction: Direction.ASC };
|
||||
@ -271,9 +259,7 @@ export class ManageDashboardStatesDialogComponent
|
||||
continue;
|
||||
}
|
||||
|
||||
const originalState = state;
|
||||
const duplicatedState = deepClone(originalState);
|
||||
const duplicatedWidgets = deepClone(this.widgets);
|
||||
const duplicatedState = deepClone(state);
|
||||
const mainWidgets = {};
|
||||
const rightWidgets = {};
|
||||
duplicatedState.id = candidateId;
|
||||
@ -284,8 +270,8 @@ export class ManageDashboardStatesDialogComponent
|
||||
for (const [key, value] of Object.entries(duplicatedState.layouts.main.widgets)) {
|
||||
const guid = this.utils.guid();
|
||||
mainWidgets[guid] = value;
|
||||
duplicatedWidgets[guid] = this.widgets[key];
|
||||
duplicatedWidgets[guid].id = guid;
|
||||
this.addWidgets[guid] = deepClone(this.widgets[key] ?? this.addWidgets[key]);
|
||||
this.addWidgets[guid].id = guid;
|
||||
}
|
||||
duplicatedState.layouts.main.widgets = mainWidgets;
|
||||
|
||||
@ -293,36 +279,32 @@ export class ManageDashboardStatesDialogComponent
|
||||
for (const [key, value] of Object.entries(duplicatedState.layouts.right.widgets)) {
|
||||
const guid = this.utils.guid();
|
||||
rightWidgets[guid] = value;
|
||||
duplicatedWidgets[guid] = this.widgets[key];
|
||||
duplicatedWidgets[guid].id = guid;
|
||||
this.addWidgets[guid] = deepClone(this.widgets[key] ?? this.addWidgets[key]);
|
||||
this.addWidgets[guid].id = guid;
|
||||
}
|
||||
duplicatedState.layouts.right.widgets = rightWidgets;
|
||||
}
|
||||
|
||||
this.states[duplicatedState.id] = duplicatedState;
|
||||
this.widgets = duplicatedWidgets;
|
||||
this.onStatesUpdated();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
private onStatesUpdated() {
|
||||
this.statesFormGroup.markAsDirty();
|
||||
this.isDirty = true;
|
||||
this.updateData(true);
|
||||
}
|
||||
|
||||
isErrorState(control: UntypedFormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
||||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
|
||||
const customErrorState = !!(control && control.invalid && this.submitted);
|
||||
return originalErrorState || customErrorState;
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.dialogRef.close(null);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
this.submitted = true;
|
||||
this.dialogRef.close({ states: this.states, widgets: this.widgets });
|
||||
const result: ManageDashboardStatesDialogResult = {states: this.states};
|
||||
if (!isEqual(this.addWidgets, {})) {
|
||||
result.addWidgets = this.addWidgets;
|
||||
}
|
||||
this.dialogRef.close(result);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user