Igor Kulikov
7 years ago
26 changed files with 1077 additions and 195 deletions
@ -0,0 +1,69 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<form #stateForm="ngForm" [formGroup]="stateFormGroup" (ngSubmit)="save()" style="min-width: 600px;"> |
||||
|
<mat-toolbar fxLayout="row" color="primary"> |
||||
|
<h2 translate>{{ isAdd ? 'dashboard.add-state' : 'dashboard.edit-state' }}</h2> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-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" fxLayout="column"> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>dashboard.state-name</mat-label> |
||||
|
<input required matInput formControlName="name"> |
||||
|
<mat-error *ngIf="stateFormGroup.get('name').hasError('required')"> |
||||
|
{{ 'dashboard.state-name-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>dashboard.state-id</mat-label> |
||||
|
<input required matInput formControlName="id"> |
||||
|
<mat-error *ngIf="stateFormGroup.get('id').hasError('required')"> |
||||
|
{{ 'dashboard.state-id-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="stateFormGroup.get('id').hasError('stateExists')"> |
||||
|
{{ 'dashboard.state-id-exists' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-checkbox formControlName="root"> |
||||
|
{{ 'dashboard.is-root-state' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayout="row"> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
type="submit" |
||||
|
[disabled]="(isLoading$ | async) || stateFormGroup.invalid || !stateFormGroup.dirty"> |
||||
|
{{ (isAdd ? 'action.add' : 'action.save') | translate }} |
||||
|
</button> |
||||
|
<button mat-button color="primary" |
||||
|
style="margin-right: 20px;" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()" cdkFocusInitial> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,145 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; |
||||
|
import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
FormGroupDirective, |
||||
|
NgForm, |
||||
|
ValidatorFn, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { DialogComponent } from '@app/shared/components/dialog.component'; |
||||
|
import { DashboardState } from '@app/shared/models/dashboard.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { DashboardStateInfo } from '@home/pages/dashboard/states/manage-dashboard-states-dialog.component.models'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
||||
|
|
||||
|
export interface DashboardStateDialogData { |
||||
|
states: {[id: string]: DashboardState }; |
||||
|
state: DashboardStateInfo; |
||||
|
isAdd: boolean; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-dashboard-state-dialog', |
||||
|
templateUrl: './dashboard-state-dialog.component.html', |
||||
|
providers: [{provide: ErrorStateMatcher, useExisting: DashboardStateDialogComponent}], |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class DashboardStateDialogComponent extends |
||||
|
DialogComponent<DashboardStateDialogComponent, DashboardStateInfo> |
||||
|
implements OnInit, ErrorStateMatcher { |
||||
|
|
||||
|
stateFormGroup: FormGroup; |
||||
|
|
||||
|
states: {[id: string]: DashboardState }; |
||||
|
state: DashboardStateInfo; |
||||
|
prevStateId: string; |
||||
|
|
||||
|
stateIdTouched: boolean; |
||||
|
|
||||
|
isAdd: boolean; |
||||
|
|
||||
|
submitted = false; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: DashboardStateDialogData, |
||||
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
||||
|
public dialogRef: MatDialogRef<DashboardStateDialogComponent, DashboardStateInfo>, |
||||
|
private fb: FormBuilder, |
||||
|
private translate: TranslateService, |
||||
|
private dashboardUtils: DashboardUtilsService, |
||||
|
private dialog: MatDialog) { |
||||
|
super(store, router, dialogRef); |
||||
|
|
||||
|
this.states = this.data.states; |
||||
|
this.isAdd = this.data.isAdd; |
||||
|
if (this.isAdd) { |
||||
|
this.state = {id: '', ...this.dashboardUtils.createDefaultState('', false)}; |
||||
|
this.prevStateId = ''; |
||||
|
} else { |
||||
|
this.state = this.data.state; |
||||
|
this.prevStateId = this.state.id; |
||||
|
} |
||||
|
|
||||
|
this.stateFormGroup = this.fb.group({ |
||||
|
name: [this.state.name, [Validators.required]], |
||||
|
id: [this.state.id, [Validators.required, this.validateDuplicateStateId()]], |
||||
|
root: [this.state.root, []], |
||||
|
}); |
||||
|
|
||||
|
this.stateFormGroup.get('name').valueChanges.subscribe((name: string) => { |
||||
|
this.checkStateName(name); |
||||
|
}); |
||||
|
|
||||
|
this.stateFormGroup.get('id').valueChanges.subscribe((id: string) => { |
||||
|
this.stateIdTouched = true; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private checkStateName(name: string) { |
||||
|
if (name && !this.stateIdTouched && this.isAdd) { |
||||
|
this.stateFormGroup.get('id').setValue( |
||||
|
name.toLowerCase().replace(/\W/g, '_'), |
||||
|
{ emitEvent: false } |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private validateDuplicateStateId(): ValidatorFn { |
||||
|
return (c: FormControl) => { |
||||
|
const newStateId: string = c.value; |
||||
|
if (newStateId) { |
||||
|
const existing = this.states[newStateId]; |
||||
|
if (existing && newStateId !== this.prevStateId) { |
||||
|
return { |
||||
|
stateExists: true |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
return null; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
} |
||||
|
|
||||
|
isErrorState(control: FormControl | 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.state = {...this.state, ...this.stateFormGroup.value}; |
||||
|
this.state.id = this.state.id.trim(); |
||||
|
this.dialogRef.close(this.state); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,153 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<form #statesForm="ngForm" [formGroup]="statesFormGroup" (ngSubmit)="save()" style="min-width: 600px;"> |
||||
|
<mat-toolbar fxLayout="row" color="primary"> |
||||
|
<h2 translate>dashboard.manage-states</h2> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-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" fxLayout="column"> |
||||
|
<div class="manage-dashboard-states" fxLayout="column"> |
||||
|
<div class="tb-entity-table"> |
||||
|
<div fxLayout="column" class="tb-entity-table-content"> |
||||
|
<mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<span class="tb-entity-table-title" translate>dashboard.states</span> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-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-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-table-toolbar" [fxShow]="textSearchMode"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<button mat-button mat-icon-button |
||||
|
type="button" |
||||
|
matTooltip="{{ 'dashboard.search-states' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>search</mat-icon> |
||||
|
</button> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label> </mat-label> |
||||
|
<input #searchInput matInput |
||||
|
[(ngModel)]="pageLink.textSearch" |
||||
|
[ngModelOptions]="{standalone: true}" |
||||
|
placeholder="{{ 'dashboard.search-states' | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<button mat-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"> |
||||
|
<mat-table [dataSource]="dataSource" |
||||
|
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="(pageLink.sortOrder.direction + '').toLowerCase()" matSortDisableClear> |
||||
|
<ng-container matColumnDef="name"> |
||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ '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> {{ '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> {{ '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 [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let state" [ngStyle]="{ minWidth: '80px', maxWidth: '80px' }"> |
||||
|
<div fxFlex fxLayout="row"> |
||||
|
<button mat-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 [fxShow]="!state.root" mat-button 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> |
||||
|
</mat-table> |
||||
|
<span [fxShow]="dataSource.isEmpty() | async" |
||||
|
fxLayoutAlign="center center" |
||||
|
class="no-data-found" 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> |
||||
|
</div> |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayout="row"> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
type="submit" |
||||
|
[disabled]="(isLoading$ | async) || statesFormGroup.invalid || !statesFormGroup.dirty"> |
||||
|
{{ 'action.save' | translate }} |
||||
|
</button> |
||||
|
<button mat-button color="primary" |
||||
|
style="margin-right: 20px;" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()" cdkFocusInitial> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,100 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { DashboardState } from '@shared/models/dashboard.models'; |
||||
|
import { CollectionViewer, DataSource } from '@angular/cdk/typings/collections'; |
||||
|
import { WidgetActionDescriptorInfo } from '@home/components/widget/action/manage-widget-actions.component.models'; |
||||
|
import { BehaviorSubject, Observable, of, ReplaySubject } from 'rxjs'; |
||||
|
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { catchError, map, publishReplay, refCount } from 'rxjs/operators'; |
||||
|
|
||||
|
export interface DashboardStateInfo extends DashboardState { |
||||
|
id: string; |
||||
|
} |
||||
|
|
||||
|
export class DashboardStatesDatasource implements DataSource<DashboardStateInfo> { |
||||
|
|
||||
|
private statesSubject = new BehaviorSubject<DashboardStateInfo[]>([]); |
||||
|
private pageDataSubject = new BehaviorSubject<PageData<DashboardStateInfo>>(emptyPageData<DashboardStateInfo>()); |
||||
|
|
||||
|
public pageData$ = this.pageDataSubject.asObservable(); |
||||
|
|
||||
|
private allStates: Observable<Array<DashboardStateInfo>>; |
||||
|
|
||||
|
constructor(private states: {[id: string]: DashboardState }) { |
||||
|
} |
||||
|
|
||||
|
connect(collectionViewer: CollectionViewer): Observable<DashboardStateInfo[] | ReadonlyArray<DashboardStateInfo>> { |
||||
|
return this.statesSubject.asObservable(); |
||||
|
} |
||||
|
|
||||
|
disconnect(collectionViewer: CollectionViewer): void { |
||||
|
this.statesSubject.complete(); |
||||
|
this.pageDataSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
loadStates(pageLink: PageLink, reload: boolean = false): Observable<PageData<DashboardStateInfo>> { |
||||
|
if (reload) { |
||||
|
this.allStates = null; |
||||
|
} |
||||
|
const result = new ReplaySubject<PageData<DashboardStateInfo>>(); |
||||
|
this.fetchStates(pageLink).pipe( |
||||
|
catchError(() => of(emptyPageData<DashboardStateInfo>())), |
||||
|
).subscribe( |
||||
|
(pageData) => { |
||||
|
this.statesSubject.next(pageData.data); |
||||
|
this.pageDataSubject.next(pageData); |
||||
|
result.next(pageData); |
||||
|
} |
||||
|
); |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
fetchStates(pageLink: PageLink): Observable<PageData<DashboardStateInfo>> { |
||||
|
return this.getAllStates().pipe( |
||||
|
map((data) => pageLink.filterData(data)) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
getAllStates(): Observable<Array<DashboardStateInfo>> { |
||||
|
if (!this.allStates) { |
||||
|
const states: DashboardStateInfo[] = []; |
||||
|
for (const id of Object.keys(this.states)) { |
||||
|
const state = this.states[id]; |
||||
|
states.push({id, ...state}); |
||||
|
} |
||||
|
this.allStates = of(states).pipe( |
||||
|
publishReplay(1), |
||||
|
refCount() |
||||
|
); |
||||
|
} |
||||
|
return this.allStates; |
||||
|
} |
||||
|
|
||||
|
isEmpty(): Observable<boolean> { |
||||
|
return this.statesSubject.pipe( |
||||
|
map((states) => !states.length) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
total(): Observable<number> { |
||||
|
return this.pageDataSubject.pipe( |
||||
|
map((pageData) => pageData.totalElements) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,45 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
:host { |
||||
|
.manage-dashboard-states { |
||||
|
.tb-entity-table { |
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.table-container { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.manage-dashboard-states { |
||||
|
.mat-sort-header-sorted .mat-sort-header-arrow { |
||||
|
opacity: 1 !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,244 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { AfterViewInit, Component, ElementRef, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core'; |
||||
|
import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { DialogComponent } from '@app/shared/components/dialog.component'; |
||||
|
import { DashboardState } from '@app/shared/models/dashboard.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { |
||||
|
WidgetActionDescriptorInfo, |
||||
|
WidgetActionsDatasource |
||||
|
} from '@home/components/widget/action/manage-widget-actions.component.models'; |
||||
|
import { |
||||
|
DashboardStateInfo, |
||||
|
DashboardStatesDatasource |
||||
|
} from '@home/pages/dashboard/states/manage-dashboard-states-dialog.component.models'; |
||||
|
import { Direction, SortOrder } from '@shared/models/page/sort-order'; |
||||
|
import { MatPaginator } from '@angular/material/paginator'; |
||||
|
import { MatSort } from '@angular/material/sort'; |
||||
|
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 { |
||||
|
WidgetActionDialogComponent, |
||||
|
WidgetActionDialogData |
||||
|
} from '@home/components/widget/action/widget-action-dialog.component'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { |
||||
|
DashboardStateDialogComponent, |
||||
|
DashboardStateDialogData |
||||
|
} from '@home/pages/dashboard/states/dashboard-state-dialog.component'; |
||||
|
|
||||
|
export interface ManageDashboardStatesDialogData { |
||||
|
states: {[id: string]: DashboardState }; |
||||
|
} |
||||
|
|
||||
|
@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, {[id: string]: DashboardState }> |
||||
|
implements OnInit, ErrorStateMatcher, AfterViewInit { |
||||
|
|
||||
|
statesFormGroup: FormGroup; |
||||
|
|
||||
|
states: {[id: string]: DashboardState }; |
||||
|
|
||||
|
displayedColumns: string[]; |
||||
|
pageLink: PageLink; |
||||
|
textSearchMode = false; |
||||
|
dataSource: DashboardStatesDatasource; |
||||
|
|
||||
|
submitted = false; |
||||
|
|
||||
|
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef; |
||||
|
|
||||
|
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; |
||||
|
@ViewChild(MatSort, {static: false}) sort: MatSort; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: ManageDashboardStatesDialogData, |
||||
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
||||
|
public dialogRef: MatDialogRef<ManageDashboardStatesDialogComponent, {[id: string]: DashboardState }>, |
||||
|
private fb: FormBuilder, |
||||
|
private translate: TranslateService, |
||||
|
private dialogs: DialogService, |
||||
|
private dialog: MatDialog) { |
||||
|
super(store, router, dialogRef); |
||||
|
|
||||
|
this.states = this.data.states; |
||||
|
this.statesFormGroup = this.fb.group({}); |
||||
|
|
||||
|
const sortOrder: SortOrder = { property: 'name', direction: Direction.ASC }; |
||||
|
this.pageLink = new PageLink(5, 0, null, sortOrder); |
||||
|
this.displayedColumns = ['name', 'id', 'root', 'actions']; |
||||
|
this.dataSource = new DashboardStatesDatasource(this.states); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.dataSource.loadStates(this.pageLink); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit() { |
||||
|
fromEvent(this.searchInputField.nativeElement, 'keyup') |
||||
|
.pipe( |
||||
|
debounceTime(150), |
||||
|
distinctUntilChanged(), |
||||
|
tap(() => { |
||||
|
this.paginator.pageIndex = 0; |
||||
|
this.updateData(); |
||||
|
}) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
|
||||
|
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); |
||||
|
|
||||
|
merge(this.sort.sortChange, this.paginator.page) |
||||
|
.pipe( |
||||
|
tap(() => this.updateData()) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
} |
||||
|
|
||||
|
updateData(reload: boolean = false) { |
||||
|
this.pageLink.page = this.paginator.pageIndex; |
||||
|
this.pageLink.pageSize = this.paginator.pageSize; |
||||
|
this.pageLink.sortOrder.property = this.sort.active; |
||||
|
this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()]; |
||||
|
this.dataSource.loadStates(this.pageLink, reload); |
||||
|
} |
||||
|
|
||||
|
addState($event: Event) { |
||||
|
this.openStateDialog($event); |
||||
|
} |
||||
|
|
||||
|
editState($event: Event, state: DashboardStateInfo) { |
||||
|
this.openStateDialog($event, state); |
||||
|
} |
||||
|
|
||||
|
deleteState($event: Event, state: DashboardStateInfo) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const title = this.translate.instant('dashboard.delete-state-title'); |
||||
|
const content = this.translate.instant('dashboard.delete-state-text', {stateName: state.name}); |
||||
|
this.dialogs.confirm(title, content, this.translate.instant('action.no'), |
||||
|
this.translate.instant('action.yes')).subscribe( |
||||
|
(res) => { |
||||
|
if (res) { |
||||
|
delete this.states[state.id]; |
||||
|
this.onStatesUpdated(); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
enterFilterMode() { |
||||
|
this.textSearchMode = true; |
||||
|
this.pageLink.textSearch = ''; |
||||
|
setTimeout(() => { |
||||
|
this.searchInputField.nativeElement.focus(); |
||||
|
this.searchInputField.nativeElement.setSelectionRange(0, 0); |
||||
|
}, 10); |
||||
|
} |
||||
|
|
||||
|
exitFilterMode() { |
||||
|
this.textSearchMode = false; |
||||
|
this.pageLink.textSearch = null; |
||||
|
this.paginator.pageIndex = 0; |
||||
|
this.updateData(); |
||||
|
} |
||||
|
|
||||
|
openStateDialog($event: Event, state: DashboardStateInfo = null) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const isAdd = state === null; |
||||
|
let prevStateId = null; |
||||
|
if (!isAdd) { |
||||
|
prevStateId = state.id; |
||||
|
} |
||||
|
this.dialog.open<DashboardStateDialogComponent, DashboardStateDialogData, |
||||
|
DashboardStateInfo>(DashboardStateDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
isAdd, |
||||
|
states: this.states, |
||||
|
state: deepClone(state) |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(res) => { |
||||
|
if (res) { |
||||
|
this.saveState(res, prevStateId); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
saveState(state: DashboardStateInfo, prevStateId: string) { |
||||
|
const newState: DashboardState = { |
||||
|
name: state.name, |
||||
|
root: state.root, |
||||
|
layouts: state.layouts |
||||
|
}; |
||||
|
if (prevStateId) { |
||||
|
this.states[prevStateId] = newState; |
||||
|
} else { |
||||
|
this.states[state.id] = newState; |
||||
|
} |
||||
|
if (state.root) { |
||||
|
for (const id of Object.keys(this.states)) { |
||||
|
const otherState = this.states[id]; |
||||
|
if (id !== state.id) { |
||||
|
otherState.root = false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.onStatesUpdated(); |
||||
|
} |
||||
|
|
||||
|
private onStatesUpdated() { |
||||
|
this.statesFormGroup.markAsDirty(); |
||||
|
this.updateData(true); |
||||
|
} |
||||
|
|
||||
|
isErrorState(control: FormControl | 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(this.states); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue