ViacheslavKlimov
4 years ago
21 changed files with 1028 additions and 9 deletions
@ -0,0 +1,41 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { NgModule } from '@angular/core'; |
||||
|
import { RouterModule, Routes } from '@angular/router'; |
||||
|
import { Authority } from '@shared/models/authority.enum'; |
||||
|
import { NotificationCenterComponent } from '@home/pages/notification-center/notification-center.component'; |
||||
|
|
||||
|
const routes: Routes = [ |
||||
|
{ |
||||
|
path: 'notification-center', |
||||
|
component: NotificationCenterComponent, |
||||
|
data: { |
||||
|
auth: [Authority.SYS_ADMIN, Authority.TENANT_ADMIN, Authority.CUSTOMER_USER], |
||||
|
title: 'notification.notification-center', |
||||
|
breadcrumb: { |
||||
|
label: 'notification.notification-center', |
||||
|
icon: 'notifications' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
@NgModule({ |
||||
|
imports: [RouterModule.forChild(routes)], |
||||
|
exports: [RouterModule] |
||||
|
}) |
||||
|
export class NotificationCenterRoutingModule { } |
||||
@ -0,0 +1,76 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-notification-center"> |
||||
|
<div class="tb-notification-center-content"> |
||||
|
<section fxLayout="row" fxLayoutAlign="space-between center" class="title-container"> |
||||
|
<h2 translate class="title">notification.notification-center</h2> |
||||
|
<section class="action-buttons" fxLayoutAlign="end center"> |
||||
|
<button mat-icon-button [disabled]="isLoading$ | async" (click)="openSetting()" |
||||
|
matTooltip="{{ 'notification.settings' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>settings</mat-icon> |
||||
|
</button> |
||||
|
<button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()" |
||||
|
matTooltip="{{ 'action.refresh' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>refresh</mat-icon> |
||||
|
</button> |
||||
|
</section> |
||||
|
</section> |
||||
|
<div class="tabs-container"> |
||||
|
<mat-tab-group #matTabGroup (selectedIndexChange)="updateData()"> |
||||
|
<mat-tab label="{{ 'notification.inbox' | translate }}" #inboxTab="matTab"> |
||||
|
<tb-notification-table |
||||
|
[notificationType]="entityType.NOTIFICATION"> |
||||
|
</tb-notification-table> |
||||
|
</mat-tab> |
||||
|
<mat-tab label="{{ 'notification.sent' | translate }}"> |
||||
|
<tb-notification-table |
||||
|
[notificationType]="entityType.NOTIFICATION_REQUEST"> |
||||
|
</tb-notification-table> |
||||
|
</mat-tab> |
||||
|
<mat-tab label="{{ 'notification.templates' | translate }}" #templateTab="matTab"> |
||||
|
<tb-notification-table |
||||
|
[notificationType]="entityType.NOTIFICATION_TEMPLATE"> |
||||
|
</tb-notification-table> |
||||
|
</mat-tab> |
||||
|
<mat-tab label="{{ 'notification.targets' | translate }}" #targetsTab="matTab"> |
||||
|
<tb-notification-table |
||||
|
[notificationType]="entityType.NOTIFICATION_TARGET"> |
||||
|
</tb-notification-table> |
||||
|
</mat-tab> |
||||
|
<mat-tab label="{{ 'notification.rules' | translate }}"> |
||||
|
<ng-template matTabContent> |
||||
|
Content 1 - Loaded |
||||
|
</ng-template> |
||||
|
</mat-tab> |
||||
|
<mat-tab disabled> |
||||
|
<ng-template mat-tab-label> |
||||
|
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"> |
||||
|
<button mat-flat-button color="primary" *ngIf="targetsTab.isActive" (click)="createTarget($event)"> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<mat-icon>add</mat-icon>{{ 'notification.create-target' | translate }} |
||||
|
</div> |
||||
|
</button> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-tab> |
||||
|
</mat-tab-group> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,177 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2022 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 '../../../../../scss/constants'; |
||||
|
|
||||
|
:host { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
.tb-notification-center { |
||||
|
padding: 8px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
|
||||
|
.tb-notification-center-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #fff; |
||||
|
border-radius: 4px; |
||||
|
box-shadow: 0 4px 10px rgba(23, 33, 90, 0.08); |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.title-container { |
||||
|
padding: 16px 16px 0; |
||||
|
|
||||
|
.title { |
||||
|
margin: 8px; |
||||
|
letter-spacing: 0.1px; |
||||
|
font-size: 24px; |
||||
|
line-height: 24px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
.action-buttons { |
||||
|
color: rgba(0,0,0,.54); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tabs-container { |
||||
|
position: relative; |
||||
|
flex-direction: column; |
||||
|
flex: 1 1 100%; |
||||
|
} |
||||
|
|
||||
|
//.mat-toolbar-tools{ |
||||
|
// min-height: auto; |
||||
|
//} |
||||
|
// |
||||
|
//.title-container{ |
||||
|
// overflow: hidden; |
||||
|
//} |
||||
|
// |
||||
|
//.tb-entity-table-title { |
||||
|
// padding-right: 20px; |
||||
|
// white-space: nowrap; |
||||
|
// overflow: hidden; |
||||
|
// text-overflow: ellipsis; |
||||
|
//} |
||||
|
// |
||||
|
//.table-container { |
||||
|
// overflow: auto; |
||||
|
//} |
||||
|
// |
||||
|
//.tb-entity-table-info{ |
||||
|
// white-space: nowrap; |
||||
|
// overflow: hidden; |
||||
|
// text-overflow: ellipsis; |
||||
|
//} |
||||
|
// |
||||
|
//.button-widget-action{ |
||||
|
// margin-left: auto; |
||||
|
// overflow: hidden; |
||||
|
// text-overflow: ellipsis; |
||||
|
//} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//@media #{$mat-xs} { |
||||
|
// .mat-toolbar { |
||||
|
// height: auto; |
||||
|
// min-height: 100px; |
||||
|
// |
||||
|
// .tb-entity-table-title{ |
||||
|
// padding-bottom: 5px; |
||||
|
// width: 100%; |
||||
|
// } |
||||
|
// } |
||||
|
//} |
||||
|
|
||||
|
@media #{$mat-xs} { |
||||
|
.tb-notification-center { |
||||
|
.tb-notification-center-content { |
||||
|
.title-container { |
||||
|
padding: 8px; |
||||
|
|
||||
|
.title { |
||||
|
margin: 4px 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.tabs-container { |
||||
|
.mat-tab-group { |
||||
|
> .mat-tab-body-wrapper { |
||||
|
position: absolute; |
||||
|
top: 49px; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
> .mat-tab-header { |
||||
|
.mat-tab-label { |
||||
|
min-width: 40px; |
||||
|
|
||||
|
&.mat-tab-disabled { |
||||
|
opacity: 1; |
||||
|
width: 100%; |
||||
|
|
||||
|
.mat-tab-label-content { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-entity-table { |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//:host ::ng-deep { |
||||
|
// .mat-sort-header-sorted .mat-sort-header-arrow { |
||||
|
// opacity: 1 !important; |
||||
|
// } |
||||
|
// tb-branch-autocomplete { |
||||
|
// mat-form-field { |
||||
|
// font-size: 16px; |
||||
|
// width: 250px; |
||||
|
// |
||||
|
// .mat-form-field-wrapper { |
||||
|
// padding-bottom: 0; |
||||
|
// } |
||||
|
// |
||||
|
// .mat-form-field-underline { |
||||
|
// bottom: 0; |
||||
|
// } |
||||
|
// |
||||
|
// @media #{$mat-xs} { |
||||
|
// width: 100%; |
||||
|
// |
||||
|
// .mat-form-field-infix { |
||||
|
// width: auto !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
//} |
||||
@ -0,0 +1,60 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, QueryList, ViewChild, ViewChildren } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { MatTabGroup } from '@angular/material/tabs'; |
||||
|
import { |
||||
|
NotificationTableComponent |
||||
|
} from '@home/pages/notification-center/notification-table/notification-table.component'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-notification-center', |
||||
|
templateUrl: './notification-center.component.html', |
||||
|
styleUrls: ['notification-center.component.scss'] |
||||
|
}) |
||||
|
export class NotificationCenterComponent extends PageComponent { |
||||
|
|
||||
|
entityType = EntityType; |
||||
|
|
||||
|
@ViewChild('matTabGroup', {static: true}) matTabs: MatTabGroup; |
||||
|
@ViewChildren(NotificationTableComponent) tableComponent: QueryList<NotificationTableComponent>; |
||||
|
|
||||
|
|
||||
|
constructor( |
||||
|
protected store: Store<AppState>) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
updateData() { |
||||
|
this.currentTableComponent?.updateData(); |
||||
|
} |
||||
|
|
||||
|
openSetting() { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
private get currentTableComponent(): NotificationTableComponent { |
||||
|
return this.tableComponent.get(this.matTabs.selectedIndex); |
||||
|
} |
||||
|
|
||||
|
createTarget($event: Event) { |
||||
|
this.currentTableComponent?.onEntityAction({event: $event, action: 'add', entity: null}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,41 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { NgModule } from '@angular/core'; |
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { SharedModule } from '@shared/shared.module'; |
||||
|
import { NotificationCenterRoutingModule } from './notification-center-routing.module'; |
||||
|
import { NotificationCenterComponent } from './notification-center.component'; |
||||
|
import { HomeComponentsModule } from '@home/components/home-components.module'; |
||||
|
import { |
||||
|
TargetNotificationDialogComponent |
||||
|
} from '@home/pages/notification-center/targets-table/target-notification-dialog.componet'; |
||||
|
import { NotificationTableComponent } from '@home/pages/notification-center/notification-table/notification-table.component'; |
||||
|
|
||||
|
@NgModule({ |
||||
|
declarations: [ |
||||
|
NotificationCenterComponent, |
||||
|
TargetNotificationDialogComponent, |
||||
|
NotificationTableComponent |
||||
|
], |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
SharedModule, |
||||
|
NotificationCenterRoutingModule, |
||||
|
HomeComponentsModule |
||||
|
] |
||||
|
}) |
||||
|
export class NotificationCenterModule { } |
||||
@ -0,0 +1,54 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { |
||||
|
DateEntityTableColumn, |
||||
|
EntityTableColumn, |
||||
|
EntityTableConfig |
||||
|
} from '@home/models/entity/entities-table-config.models'; |
||||
|
import { EntityTypeResource } from '@shared/models/entity-type.models'; |
||||
|
import { DatePipe } from '@angular/common'; |
||||
|
import { Direction } from '@shared/models/page/sort-order'; |
||||
|
import { Notification } from '@shared/models/notification.models'; |
||||
|
import { NotificationService } from '@core/http/notification.service'; |
||||
|
|
||||
|
export class InboxTableConfig extends EntityTableConfig<Notification> { |
||||
|
|
||||
|
constructor(private notificationService: NotificationService, |
||||
|
private datePipe: DatePipe, |
||||
|
updateOnInit = true) { |
||||
|
super(); |
||||
|
this.loadDataOnInit = true; |
||||
|
this.entitiesDeleteEnabled = false; |
||||
|
this.entityTranslations = { |
||||
|
noEntities: 'notification.no-inbox-notification' |
||||
|
}; |
||||
|
this.entityResources = {} as EntityTypeResource<Notification>; |
||||
|
|
||||
|
this.entitiesFetchFunction = pageLink => this.notificationService.getNotifications(pageLink); |
||||
|
|
||||
|
this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC}; |
||||
|
|
||||
|
this.columns.push( |
||||
|
new DateEntityTableColumn<Notification>('createdTime', 'notification.created-time', this.datePipe, '150px'), |
||||
|
new EntityTableColumn<Notification>('type', 'notification.type', '10%'), |
||||
|
new EntityTableColumn<Notification>('text', 'notification.text', '40%'), |
||||
|
new EntityTableColumn<Notification>('info.description', 'notification.description', '50%') |
||||
|
); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<tb-entities-table [entitiesTableConfig]="entityTableConfig"></tb-entities-table> |
||||
@ -0,0 +1,94 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, Input, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { EntitiesTableComponent } from '@home/components/entity/entities-table.component'; |
||||
|
import { NotificationService } from '@core/http/notification.service'; |
||||
|
import { TargetsTableConfig } from '@home/pages/notification-center/notification-table/targets-table-config'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { EntityTableConfig } from '@home/models/entity/entities-table-config.models'; |
||||
|
import { InboxTableConfig } from '@home/pages/notification-center/notification-table/inbox-table-config'; |
||||
|
import { DatePipe } from '@angular/common'; |
||||
|
import { TemplateTableConfig } from '@home/pages/notification-center/notification-table/template-table-config'; |
||||
|
import { EntityAction } from '@home/models/entity/entity-component.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-notification-table', |
||||
|
templateUrl: './notification-table.component.html' |
||||
|
}) |
||||
|
export class NotificationTableComponent implements OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
notificationType = EntityType.NOTIFICATION; |
||||
|
|
||||
|
@ViewChild(EntitiesTableComponent, {static: true}) entitiesTable: EntitiesTableComponent; |
||||
|
|
||||
|
entityTableConfig: EntityTableConfig<any>; |
||||
|
|
||||
|
constructor(private notificationService: NotificationService, |
||||
|
private translate: TranslateService, |
||||
|
private datePipe: DatePipe, |
||||
|
private dialog: MatDialog) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.entityTableConfig = this.getTableConfig(); |
||||
|
this.entityTableConfig.pageMode = false; |
||||
|
this.entityTableConfig.showTitle = false; |
||||
|
this.entityTableConfig.detailsPanelEnabled = false; |
||||
|
this.entityTableConfig.selectionEnabled = false; |
||||
|
this.entityTableConfig.searchEnabled = false; |
||||
|
this.entityTableConfig.addEnabled = false; |
||||
|
} |
||||
|
|
||||
|
updateData() { |
||||
|
this.entitiesTable.updateData(); |
||||
|
} |
||||
|
|
||||
|
onEntityAction(action: EntityAction<any>) { |
||||
|
if (this.entityTableConfig.onEntityAction) { |
||||
|
this.entityTableConfig.onEntityAction(action); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getTableConfig(): EntityTableConfig<any> { |
||||
|
switch (this.notificationType) { |
||||
|
case EntityType.NOTIFICATION_TARGET: |
||||
|
return new TargetsTableConfig( |
||||
|
this.notificationService, |
||||
|
this.translate, |
||||
|
this.dialog |
||||
|
); |
||||
|
case EntityType.NOTIFICATION: |
||||
|
return new InboxTableConfig( |
||||
|
this.notificationService, |
||||
|
this.datePipe |
||||
|
); |
||||
|
case EntityType.NOTIFICATION_TEMPLATE: |
||||
|
return new TemplateTableConfig( |
||||
|
this.notificationService, |
||||
|
this.datePipe |
||||
|
); |
||||
|
case EntityType.NOTIFICATION_REQUEST: |
||||
|
return new TemplateTableConfig( |
||||
|
this.notificationService, |
||||
|
this.datePipe |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,102 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { |
||||
|
CellActionDescriptor, |
||||
|
EntityTableColumn, |
||||
|
EntityTableConfig |
||||
|
} from '@home/models/entity/entities-table-config.models'; |
||||
|
import { EntityTypeResource } from '@shared/models/entity-type.models'; |
||||
|
import { Direction } from '@shared/models/page/sort-order'; |
||||
|
import { NotificationTarget, NotificationTargetConfigTypeTranslateMap } from '@shared/models/notification.models'; |
||||
|
import { NotificationService } from '@core/http/notification.service'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { |
||||
|
TargetNotificationDialogComponent, |
||||
|
TargetsNotificationDialogData |
||||
|
} from '@home/pages/notification-center/targets-table/target-notification-dialog.componet'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { EntityAction } from '@home/models/entity/entity-component.models'; |
||||
|
|
||||
|
export class TargetsTableConfig extends EntityTableConfig<NotificationTarget> { |
||||
|
|
||||
|
constructor(private notificationService: NotificationService, |
||||
|
private translate: TranslateService, |
||||
|
private dialog: MatDialog) { |
||||
|
super(); |
||||
|
this.loadDataOnInit = false; |
||||
|
this.entityTranslations = { |
||||
|
noEntities: 'notification.no-targets-notification' |
||||
|
}; |
||||
|
this.entityResources = {} as EntityTypeResource<NotificationTarget>; |
||||
|
|
||||
|
this.entitiesFetchFunction = pageLink => this.notificationService.getNotificationTargets(pageLink); |
||||
|
|
||||
|
this.deleteEntityTitle = target => this.translate.instant('notification.delete-target-title', {targetName: target.name}); |
||||
|
this.deleteEntityContent = () => this.translate.instant('notification.delete-target-text'); |
||||
|
this.deleteEntity = id => this.notificationService.deleteNotificationTarget(id.id); |
||||
|
|
||||
|
this.cellActionDescriptors = this.configureCellActions(); |
||||
|
this.onEntityAction = action => this.onTargetAction(action); |
||||
|
|
||||
|
this.defaultSortOrder = {property: 'name', direction: Direction.ASC}; |
||||
|
|
||||
|
this.columns.push( |
||||
|
new EntityTableColumn<NotificationTarget>('name', 'notification.notification-target', '30%'), |
||||
|
new EntityTableColumn<NotificationTarget>('configuration.type', 'notification.type', '40%', |
||||
|
(target) => this.translate.instant(NotificationTargetConfigTypeTranslateMap.get(target.configuration.type)), |
||||
|
() => ({}), false) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
private configureCellActions(): Array<CellActionDescriptor<NotificationTarget>> { |
||||
|
return [{ |
||||
|
name: this.translate.instant('device.make-public'), |
||||
|
icon: 'edit', |
||||
|
isEnabled: () => true, |
||||
|
onAction: ($event, entity) => this.editTarget($event, entity) |
||||
|
}]; |
||||
|
} |
||||
|
|
||||
|
private editTarget($event: Event, target: NotificationTarget, isAdd = false) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.dialog.open<TargetNotificationDialogComponent, TargetsNotificationDialogData, |
||||
|
NotificationTarget>(TargetNotificationDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
isAdd, |
||||
|
target |
||||
|
} |
||||
|
}).afterClosed() |
||||
|
.subscribe((res) => { |
||||
|
if (res) { |
||||
|
this.updateData(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private onTargetAction(action: EntityAction<NotificationTarget>): boolean { |
||||
|
switch (action.action) { |
||||
|
case 'add': |
||||
|
this.editTarget(action.event, action.entity, true); |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { |
||||
|
DateEntityTableColumn, |
||||
|
EntityTableColumn, |
||||
|
EntityTableConfig |
||||
|
} from '@home/models/entity/entities-table-config.models'; |
||||
|
import { EntityTypeResource } from '@shared/models/entity-type.models'; |
||||
|
import { DatePipe } from '@angular/common'; |
||||
|
import { Direction } from '@shared/models/page/sort-order'; |
||||
|
import { NotificationTemplate } from '@shared/models/notification.models'; |
||||
|
import { NotificationService } from '@core/http/notification.service'; |
||||
|
|
||||
|
export class TemplateTableConfig extends EntityTableConfig<NotificationTemplate> { |
||||
|
|
||||
|
constructor(private notificationService: NotificationService, |
||||
|
private datePipe: DatePipe) { |
||||
|
super(); |
||||
|
this.loadDataOnInit = false; |
||||
|
this.entitiesDeleteEnabled = false; |
||||
|
this.entityTranslations = { |
||||
|
noEntities: 'notification.no-inbox-notification' |
||||
|
}; |
||||
|
this.entityResources = {} as EntityTypeResource<NotificationTemplate>; |
||||
|
|
||||
|
this.entitiesFetchFunction = pageLink => this.notificationService.getNotificationTemplates(pageLink); |
||||
|
|
||||
|
this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC}; |
||||
|
|
||||
|
this.columns.push( |
||||
|
new DateEntityTableColumn<NotificationTemplate>('createdTime', 'notification.created-time', this.datePipe, '150px'), |
||||
|
new EntityTableColumn<NotificationTemplate>('type', 'notification.type', '10%'), |
||||
|
new EntityTableColumn<NotificationTemplate>('text', 'notification.text', '40%'), |
||||
|
new EntityTableColumn<NotificationTemplate>('info.description', 'notification.description', '50%') |
||||
|
); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,78 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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 [formGroup]="targetNotificationForm" style="min-width: 560px"> |
||||
|
<mat-toolbar color="primary"> |
||||
|
<h2>{{ (isAdd ? 'notification.add-notification-target' : 'notification.edit-notification-target') | translate }}</h2> |
||||
|
<span fxFlex></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 style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
||||
|
<div mat-dialog-content> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>notification.target-name</mat-label> |
||||
|
<input matInput formControlName="name" required> |
||||
|
<mat-error *ngIf="targetNotificationForm.get('name').hasError('required')"> |
||||
|
{{ 'notification.target-name-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<section formGroupName="configuration"> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>notification.target-type.type</mat-label> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option *ngFor="let type of notificationTargetConfigTypes" [value]="type"> |
||||
|
{{ notificationTargetConfigTypeTranslateMap.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<tb-entity-list |
||||
|
required |
||||
|
formControlName="usersIds" |
||||
|
[entityType]="entityType.USER" |
||||
|
*ngIf="targetNotificationForm.get('configuration.type').value === notificationTargetConfigType.USER_LIST"> |
||||
|
</tb-entity-list> |
||||
|
<section |
||||
|
*ngIf="targetNotificationForm.get('configuration.type').value === notificationTargetConfigType.CUSTOMER_USERS"> |
||||
|
<mat-slide-toggle formControlName="getCustomerIdFromOriginatorEntity"> |
||||
|
{{ 'notification.get-customer-id-from-originator' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<tb-entity-autocomplete |
||||
|
required |
||||
|
formControlName="customerId" |
||||
|
[entityType]="entityType.CUSTOMER" |
||||
|
*ngIf="!targetNotificationForm.get('configuration.getCustomerIdFromOriginatorEntity').value"> |
||||
|
</tb-entity-autocomplete> |
||||
|
</section> |
||||
|
</section> |
||||
|
</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
<div mat-dialog-actions fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="end"> |
||||
|
<button mat-button |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()">{{ 'action.cancel' | translate }}</button> |
||||
|
<button mat-raised-button |
||||
|
[disabled]="(isLoading$ | async) || targetNotificationForm.invalid || !targetNotificationForm.dirty" |
||||
|
color="primary" |
||||
|
(click)="save()">{{ (isAdd ? 'action.add' : 'action.save') | translate }}</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,129 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { |
||||
|
NotificationTarget, |
||||
|
NotificationTargetConfigType, |
||||
|
NotificationTargetConfigTypeTranslateMap |
||||
|
} from '@shared/models/notification.models'; |
||||
|
import { Component, Inject, OnDestroy } from '@angular/core'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { NotificationService } from '@core/http/notification.service'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { deepTrim, isDefined } from '@core/utils'; |
||||
|
import { Subject } from 'rxjs'; |
||||
|
import { takeUntil } from 'rxjs/operators'; |
||||
|
|
||||
|
export interface TargetsNotificationDialogData { |
||||
|
target?: NotificationTarget; |
||||
|
isAdd?: boolean; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-target-notification-dialog', |
||||
|
templateUrl: './target-notification-dialog.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class TargetNotificationDialogComponent extends |
||||
|
DialogComponent<TargetNotificationDialogComponent, NotificationTarget> implements OnDestroy { |
||||
|
|
||||
|
targetNotificationForm: FormGroup; |
||||
|
notificationTargetConfigType = NotificationTargetConfigType; |
||||
|
notificationTargetConfigTypes: NotificationTargetConfigType[] = Object.values(NotificationTargetConfigType); |
||||
|
notificationTargetConfigTypeTranslateMap = NotificationTargetConfigTypeTranslateMap; |
||||
|
entityType = EntityType; |
||||
|
isAdd = true; |
||||
|
|
||||
|
private readonly destroy$ = new Subject<void>(); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
protected dialogRef: MatDialogRef<TargetNotificationDialogComponent, NotificationTarget>, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: TargetsNotificationDialogData, |
||||
|
private fb: FormBuilder, |
||||
|
private notificationService: NotificationService) { |
||||
|
super(store, router, dialogRef); |
||||
|
|
||||
|
if (isDefined(data.isAdd)) { |
||||
|
this.isAdd = data.isAdd; |
||||
|
} |
||||
|
|
||||
|
this.targetNotificationForm = this.fb.group({ |
||||
|
name: [null, Validators.required], |
||||
|
configuration: this.fb.group({ |
||||
|
type: [NotificationTargetConfigType.ALL_USERS], |
||||
|
usersIds: [{value: null, disabled: true}, Validators.required], |
||||
|
customerId: [{value: null, disabled: true}, Validators.required], |
||||
|
getCustomerIdFromOriginatorEntity: [{value: false, disabled: true}], |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
this.targetNotificationForm.get('configuration.type').valueChanges.pipe( |
||||
|
takeUntil(this.destroy$) |
||||
|
).subscribe((type: NotificationTargetConfigType) => { |
||||
|
this.targetNotificationForm.get('configuration').disable({emitEvent: false}); |
||||
|
switch (type) { |
||||
|
case NotificationTargetConfigType.USER_LIST: |
||||
|
this.targetNotificationForm.get('configuration.usersIds').enable({emitEvent: false}); |
||||
|
break; |
||||
|
case NotificationTargetConfigType.CUSTOMER_USERS: |
||||
|
this.targetNotificationForm.get('configuration.getCustomerIdFromOriginatorEntity').enable({emitEvent: false}); |
||||
|
this.targetNotificationForm.get('configuration.getCustomerIdFromOriginatorEntity').updateValueAndValidity({onlySelf: true}); |
||||
|
break; |
||||
|
} |
||||
|
this.targetNotificationForm.get('configuration.type').enable({emitEvent: false}); |
||||
|
}); |
||||
|
this.targetNotificationForm.get('configuration.getCustomerIdFromOriginatorEntity').valueChanges.pipe( |
||||
|
takeUntil(this.destroy$) |
||||
|
).subscribe((value: boolean) => { |
||||
|
if (value) { |
||||
|
this.targetNotificationForm.get('configuration.customerId').disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.targetNotificationForm.get('configuration.customerId').enable({emitEvent: false}); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (isDefined(data.target)) { |
||||
|
this.targetNotificationForm.patchValue(data.target, {emitEvent: false}); |
||||
|
this.targetNotificationForm.get('configuration.type').updateValueAndValidity({onlySelf: true}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
ngOnDestroy() { |
||||
|
super.ngOnDestroy(); |
||||
|
this.destroy$.next(); |
||||
|
this.destroy$.complete(); |
||||
|
} |
||||
|
|
||||
|
cancel(): void { |
||||
|
this.dialogRef.close(null); |
||||
|
} |
||||
|
|
||||
|
save() { |
||||
|
let formValue = deepTrim(this.targetNotificationForm.value); |
||||
|
if (isDefined(this.data.target)) { |
||||
|
formValue = Object.assign({}, this.data.target, formValue); |
||||
|
} |
||||
|
this.notificationService.saveNotificationTarget(formValue).subscribe( |
||||
|
(target) => this.dialogRef.close(target) |
||||
|
); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue