Browse Source

UI: Fixed show add buttons in notification center

pull/12291/head
Vladyslav_Prykhodko 2 years ago
committed by Vladyslav Prykhodko
parent
commit
1b195bb24c
  1. 47
      ui-ngx/src/app/modules/home/components/entity/entities-table.component.html
  2. 1
      ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts
  3. 2
      ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts
  4. 13
      ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.html
  5. 2
      ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.scss
  6. 4
      ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.ts
  7. 62
      ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts
  8. 13
      ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.html
  9. 2
      ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.scss
  10. 4
      ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.ts
  11. 6
      ui-ngx/src/app/modules/home/pages/notification/notification.module.ts
  12. 42
      ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts
  13. 24
      ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html
  14. 18
      ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.scss
  15. 38
      ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.ts
  16. 41
      ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts
  17. 24
      ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html
  18. 18
      ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.scss
  19. 38
      ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.ts
  20. 43
      ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts
  21. 24
      ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html
  22. 18
      ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.scss
  23. 38
      ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.ts
  24. 9
      ui-ngx/src/app/shared/models/entity-type.models.ts

47
ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@ -46,22 +46,41 @@
</div>
<span class="flex-1"></span>
<div [class.!hidden]="!addEnabled()">
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
(click)="addEntity($event)"
matTooltip="{{ translations.add | translate }}"
matTooltipPosition="above">
<mat-icon>add</mat-icon>
</button>
<ng-template #addActions>
<button mat-icon-button [disabled]="isLoading$ | async"
*ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
[class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
<ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions">
<button *ngIf="!entitiesTableConfig.addAsTextButton"
mat-icon-button
[disabled]="isLoading$ | async"
(click)="addEntity($event)"
matTooltip="{{ translations.add | translate }}"
matTooltipPosition="above">
<tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
<mat-icon>add</mat-icon>
</button>
<button *ngIf="entitiesTableConfig.addAsTextButton"
mat-stroked-button color="primary"
[disabled]="isLoading$ | async"
(click)="addEntity($event)">
<mat-icon>add</mat-icon>
{{ translations.add | translate }}
</button>
</ng-container>
<ng-template #addActions>
<ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu">
<button *ngIf="!entitiesTableConfig.addAsTextButton && entitiesTableConfig.addActionDescriptors[0].isEnabled()"
mat-icon-button
[disabled]="isLoading$ | async"
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
matTooltipPosition="above">
<tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
</button>
<button *ngIf="entitiesTableConfig.addAsTextButton && entitiesTableConfig.addActionDescriptors[0].isEnabled()"
mat-stroked-button color="primary"
[disabled]="isLoading$ | async"
(click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)">
<tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
{{ entitiesTableConfig.addActionDescriptors[0].name }}
</button>
</ng-container>
<ng-template #addActionsMenu>
<button mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ translations.add | translate }}"

1
ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts

@ -170,6 +170,7 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
selectionEnabled = true;
searchEnabled = true;
addEnabled = true;
addAsTextButton = false;
entitiesDeleteEnabled = true;
detailsPanelEnabled = true;
hideDetailsTabsOnEdit = true;

2
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts

@ -57,7 +57,7 @@ export class MobileAppTableConfigResolver {
) {
this.config.selectionEnabled = false;
this.config.entityType = EntityType.MOBILE_APP;
this.config.addEnabled = false;
this.config.addAsTextButton = true;
this.config.entitiesDeleteEnabled = false;
this.config.rowPointer = true;
this.config.entityTranslations = entityTypeTranslations.get(EntityType.MOBILE_APP);

13
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.html

@ -15,12 +15,7 @@
limitations under the License.
-->
<div class="flex flex-full items-center justify-between">
<section class="flex items-center xs:!hidden">
<div tbTruncateWithTooltip translate>mobile.applications</div>
<div tb-help="mobileApplication"></div>
</section>
<button mat-stroked-button color="primary" (click)="createMobile($event)">
<mat-icon>add</mat-icon>{{ 'mobile.add-application' | translate }}
</button>
</div>
<section class="flex items-center">
<div tbTruncateWithTooltip translate>mobile.applications</div>
<div tb-help="mobileApplication"></div>
</section>

2
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.scss

@ -14,5 +14,5 @@
* limitations under the License.
*/
:host{
width: 100000px;
width: 100%;
}

4
ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.ts

@ -30,8 +30,4 @@ export class MobileAppTableHeaderComponent extends EntityTableHeaderComponent<Mo
constructor(protected store: Store<AppState>) {
super(store);
}
createMobile($event: Event) {
this.entitiesTableConfig.getTable().addEntity($event);
}
}

62
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts

@ -32,7 +32,6 @@ import { DatePipe } from '@angular/common';
import { MobileAppService } from '@core/http/mobile-app.service';
import { finalize, map, skip, take, takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { EntityAction } from '@home/models/entity/entity-component.models';
import { MatDialog } from '@angular/material/dialog';
import {
MobileBundleDialogComponent,
@ -45,7 +44,7 @@ import {
import { select, Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { selectUserSettingsProperty } from '@core/auth/auth.selectors';
import { forkJoin, of } from 'rxjs';
import { forkJoin, Observable, of, switchMap } from 'rxjs';
@Injectable()
export class MobileBundleTableConfigResolver {
@ -64,16 +63,17 @@ export class MobileBundleTableConfigResolver {
) {
this.config.selectionEnabled = false;
this.config.entityType = EntityType.MOBILE_APP_BUNDLE;
this.config.addEnabled = false;
this.config.addAsTextButton = true;
this.config.rowPointer = true;
this.config.detailsPanelEnabled = false;
this.config.entityTranslations = entityTypeTranslations.get(EntityType.MOBILE_APP_BUNDLE);
this.config.entityResources = entityTypeResources.get(EntityType.MOBILE_APP_BUNDLE);
this.config.headerComponent = MobileBundleTableHeaderComponent;
this.config.onEntityAction = action => this.onBundleAction(action);
this.config.addDialogStyle = {width: '850px', maxHeight: '100vh'};
this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
this.config.addEntity = () => this.editBundle(null, true);
this.config.columns.push(
new DateEntityTableColumn<MobileAppBundleInfo>('createdTime', 'common.created-time', this.datePipe, '170px'),
new EntityTableColumn<MobileAppBundleInfo>('title', 'mobile.title', '25%'),
@ -114,15 +114,28 @@ export class MobileBundleTableConfigResolver {
if (!this.openingEditDialog) {
this.openingEditDialog = true;
this.mobileAppService.getMobileAppBundleInfoById(bundle.id.id).pipe(
switchMap(appBundleInfo => this.editBundle(appBundleInfo)),
takeUntil(this.router.events.pipe(skip(1))),
finalize(() => {this.openingEditDialog = false;})
).subscribe(
appBundleInfo => this.editBundle($event, appBundleInfo)
);
).subscribe((res) => {
if (res) {
this.config.updateData();
}
});
}
return true;
};
this.config.entityAdded = (bundle) => {
this.store.pipe(select(selectUserSettingsProperty('notDisplayConfigurationAfterAddMobileBundle'))).pipe(
take(1)
).subscribe((settings: boolean) => {
if(!settings) {
this.configurationApp(null, bundle, true);
}
});
}
this.config.cellActionDescriptors = this.configureCellActions();
}
@ -141,11 +154,8 @@ export class MobileBundleTableConfigResolver {
];
}
private editBundle($event: Event, bundle: MobileAppBundleInfo, isAdd = false) {
if ($event) {
$event.stopPropagation();
}
this.dialog.open<MobileBundleDialogComponent, MobileBundleDialogData,
private editBundle(bundle: MobileAppBundleInfo, isAdd = false): Observable<MobileAppBundleInfo> {
return this.dialog.open<MobileBundleDialogComponent, MobileBundleDialogData,
MobileAppBundleInfo>(MobileBundleDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@ -153,33 +163,7 @@ export class MobileBundleTableConfigResolver {
isAdd,
bundle
}
}).afterClosed()
.subscribe((res) => {
if (res) {
if (!isAdd) {
this.config.updateData();
} else {
this.store.pipe(select(selectUserSettingsProperty('notDisplayConfigurationAfterAddMobileBundle'))).pipe(
take(1)
).subscribe((settings: boolean) => {
if (!settings) {
this.configurationApp(null, res, true);
} else {
this.config.updateData();
}
});
}
}
});
}
private onBundleAction(action: EntityAction<MobileAppBundleInfo>): boolean {
switch (action.action) {
case 'add':
this.editBundle(action.event, action.entity, true);
return true;
}
return false;
}).afterClosed();
}
private configurationApp($event: Event, entity: MobileAppBundleInfo, afterAdd = false) {

13
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.html

@ -15,12 +15,7 @@
limitations under the License.
-->
<div class="flex flex-full items-center justify-between">
<section class="flex items-center xs:!hidden">
<div tbTruncateWithTooltip translate>mobile.bundles</div>
<div tb-help="mobileBundle"></div>
</section>
<button mat-stroked-button color="primary" (click)="createBundle($event)">
<mat-icon>add</mat-icon>{{ 'mobile.add-bundle' | translate }}
</button>
</div>
<section class="flex items-center">
<div tbTruncateWithTooltip translate>mobile.bundles</div>
<div tb-help="mobileBundle"></div>
</section>

2
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.scss

@ -14,5 +14,5 @@
* limitations under the License.
*/
:host{
width: 100000px;
width: 100%;
}

4
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.ts

@ -30,8 +30,4 @@ export class MobileBundleTableHeaderComponent extends EntityTableHeaderComponent
constructor(protected store: Store<AppState>) {
super(store);
}
createBundle($event: Event) {
this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
}
}

6
ui-ngx/src/app/modules/home/pages/notification/notification.module.ts

@ -26,15 +26,12 @@ import { SentNotificationDialogComponent } from '@home/pages/notification/sent/s
import {
RecipientNotificationDialogComponent
} from '@home/pages/notification/recipient/recipient-notification-dialog.component';
import { RecipientTableHeaderComponent } from '@home/pages/notification/recipient/recipient-table-header.component';
import {
TemplateNotificationDialogComponent
} from '@home/pages/notification/template/template-notification-dialog.component';
import { TemplateTableHeaderComponent } from '@home/pages/notification/template/template-table-header.component';
import { EscalationFormComponent } from '@home/pages/notification/rule/escalation-form.component';
import { EscalationsComponent } from '@home/pages/notification/rule/escalations.component';
import { RuleNotificationDialogComponent } from '@home/pages/notification/rule/rule-notification-dialog.component';
import { RuleTableHeaderComponent } from '@home/pages/notification/rule/rule-table-header.component';
import { NotificationSettingsComponent } from '@home/pages/notification/settings/notification-settings.component';
import {
NotificationSettingFormComponent
@ -53,13 +50,10 @@ import {
SentErrorDialogComponent,
SentNotificationDialogComponent,
RecipientNotificationDialogComponent,
RecipientTableHeaderComponent,
TemplateNotificationDialogComponent,
TemplateTableHeaderComponent,
EscalationFormComponent,
EscalationsComponent,
RuleNotificationDialogComponent,
RuleTableHeaderComponent,
NotificationSettingsComponent,
NotificationSettingFormComponent,
NotificationTemplateConfigurationComponent,

42
ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts

@ -30,12 +30,11 @@ import {
RecipientNotificationDialogData
} from '@home/pages/notification/recipient/recipient-notification-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { EntityAction } from '@home/models/entity/entity-component.models';
import { RecipientTableHeaderComponent } from '@home/pages/notification/recipient/recipient-table-header.component';
import { ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { DatePipe } from '@angular/common';
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
import { Observable } from 'rxjs';
@Injectable()
export class RecipientTableConfigResolver {
@ -50,12 +49,14 @@ export class RecipientTableConfigResolver {
this.config.entityType = EntityType.NOTIFICATION_TARGET;
this.config.detailsPanelEnabled = false;
this.config.addEnabled = false;
this.config.addAsTextButton = true;
this.config.rowPointer = true;
this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_TARGET);
this.config.entityResources = {} as EntityTypeResource<NotificationTarget>;
this.config.addEntity = () => this.editTarget(null, true);
this.config.entitiesFetchFunction = pageLink => this.notificationService.getNotificationTargets(pageLink);
this.config.deleteEntityTitle = target => this.translate.instant('notification.delete-recipient-title', {recipientName: target.name});
@ -67,13 +68,15 @@ export class RecipientTableConfigResolver {
this.config.cellActionDescriptors = this.configureCellActions();
this.config.headerComponent = RecipientTableHeaderComponent;
this.config.onEntityAction = action => this.onTargetAction(action);
this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
this.config.handleRowClick = ($event, target) => {
this.editTarget($event, target);
$event?.stopPropagation();
this.editTarget(target).subscribe((res) => {
if (res) {
this.config.updateData();
}
});
return true;
};
@ -89,7 +92,7 @@ export class RecipientTableConfigResolver {
);
}
resolve(route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTarget> {
resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTarget> {
return this.config;
}
@ -97,11 +100,8 @@ export class RecipientTableConfigResolver {
return [];
}
private editTarget($event: Event, target: NotificationTarget, isAdd = false) {
if ($event) {
$event.stopPropagation();
}
this.dialog.open<RecipientNotificationDialogComponent, RecipientNotificationDialogData,
private editTarget(target: NotificationTarget, isAdd = false): Observable<NotificationTarget> {
return this.dialog.open<RecipientNotificationDialogComponent, RecipientNotificationDialogData,
NotificationTarget>(RecipientNotificationDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@ -109,20 +109,6 @@ export class RecipientTableConfigResolver {
isAdd,
target
}
}).afterClosed()
.subscribe((res) => {
if (res) {
this.config.updateData();
}
});
}
private onTargetAction(action: EntityAction<NotificationTarget>): boolean {
switch (action.action) {
case 'add':
this.editTarget(action.event, action.entity, true);
return true;
}
return false;
}).afterClosed();
}
}

24
ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html

@ -1,24 +0,0 @@
<!--
Copyright © 2016-2024 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="flex flex-full flex-row items-center justify-end">
<button mat-stroked-button color="primary" (click)="createTarget($event)">
<div class="flex flex-row items-center justify-start">
<mat-icon>add</mat-icon>{{ 'notification.add-recipients' | translate }}
</div>
</button>
</div>

18
ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.scss

@ -1,18 +0,0 @@
/**
* Copyright © 2016-2024 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{
width: 10000px;
}

38
ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.ts

@ -1,38 +0,0 @@
///
/// Copyright © 2016-2024 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 } from '@angular/core';
import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { NotificationTarget } from '@shared/models/notification.models';
@Component({
selector: 'tb-recipient-table-header',
templateUrl: './recipient-table-header.component.html',
styleUrls: ['recipient-table-header.component.scss']
})
export class RecipientTableHeaderComponent extends EntityTableHeaderComponent<NotificationTarget> {
constructor(protected store: Store<AppState>) {
super(store);
}
createTarget($event: Event) {
this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
}
}

41
ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts

@ -26,8 +26,6 @@ import { NotificationRule, TriggerTypeTranslationMap } from '@shared/models/noti
import { NotificationService } from '@core/http/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { MatDialog } from '@angular/material/dialog';
import { EntityAction } from '@home/models/entity/entity-component.models';
import { RuleTableHeaderComponent } from '@home/pages/notification/rule/rule-table-header.component';
import {
RuleNotificationDialogComponent,
RuleNotificationDialogData
@ -36,6 +34,7 @@ import { ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { DatePipe } from '@angular/common';
import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
import { Observable } from 'rxjs';
@Injectable()
export class RuleTableConfigResolver {
@ -50,12 +49,14 @@ export class RuleTableConfigResolver {
this.config.entityType = EntityType.NOTIFICATION_RULE;
this.config.detailsPanelEnabled = false;
this.config.addEnabled = false;
this.config.addAsTextButton = true;
this.config.rowPointer = true;
this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_RULE);
this.config.entityResources = {} as EntityTypeResource<NotificationRule>;
this.config.addEntity = () => this.editRule(null, null, true);
this.config.entitiesFetchFunction = pageLink => this.notificationService.getNotificationRules(pageLink);
this.config.deleteEntityTitle = rule => this.translate.instant('notification.delete-rule-title', {ruleName: rule.name});
@ -65,13 +66,15 @@ export class RuleTableConfigResolver {
this.config.deleteEntity = id => this.notificationService.deleteNotificationRule(id.id);
this.config.cellActionDescriptors = this.configureCellActions();
this.config.headerComponent = RuleTableHeaderComponent;
this.config.onEntityAction = action => this.onTargetAction(action);
this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
this.config.handleRowClick = ($event, rule) => {
this.editRule($event, rule);
this.editRule($event, rule).subscribe((res) => {
if (res) {
this.config.updateData();
}
});
return true;
};
@ -88,7 +91,7 @@ export class RuleTableConfigResolver {
);
}
resolve(route: ActivatedRouteSnapshot): EntityTableConfig<NotificationRule> {
resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<NotificationRule> {
return this.config;
}
@ -110,11 +113,9 @@ export class RuleTableConfigResolver {
}];
}
private editRule($event: Event, rule: NotificationRule, isAdd = false, isCopy = false) {
if ($event) {
$event.stopPropagation();
}
this.dialog.open<RuleNotificationDialogComponent, RuleNotificationDialogData,
private editRule($event: Event, rule: NotificationRule, isAdd = false, isCopy = false): Observable<NotificationRule> {
$event?.stopPropagation();
return this.dialog.open<RuleNotificationDialogComponent, RuleNotificationDialogData,
NotificationRule>(RuleNotificationDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@ -123,21 +124,7 @@ export class RuleTableConfigResolver {
isCopy,
rule
}
}).afterClosed()
.subscribe((res) => {
if (res) {
this.config.updateData();
}
});
}
private onTargetAction(action: EntityAction<NotificationRule>): boolean {
switch (action.action) {
case 'add':
this.editRule(action.event, action.entity, true);
return true;
}
return false;
}).afterClosed();
}
private toggleEnableMode($event: Event, rule: NotificationRule): void {

24
ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html

@ -1,24 +0,0 @@
<!--
Copyright © 2016-2024 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="flex flex-full flex-row items-center justify-end">
<button mat-stroked-button color="primary" (click)="createTarget($event)">
<div class="flex flex-row items-center justify-start">
<mat-icon>add</mat-icon>{{ 'notification.add-rule' | translate }}
</div>
</button>
</div>

18
ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.scss

@ -1,18 +0,0 @@
/**
* Copyright © 2016-2024 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{
width: 10000px;
}

38
ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.ts

@ -1,38 +0,0 @@
///
/// Copyright © 2016-2024 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 } from '@angular/core';
import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { NotificationRule } from '@shared/models/notification.models';
@Component({
selector: 'tb-rule-table-header',
templateUrl: './rule-table-header.component.html',
styleUrls: ['rule-table-header.component.scss']
})
export class RuleTableHeaderComponent extends EntityTableHeaderComponent<NotificationRule> {
constructor(protected store: Store<AppState>) {
super(store);
}
createTarget($event: Event) {
this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
}
}

43
ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts

@ -24,17 +24,16 @@ import { EntityType, EntityTypeResource, entityTypeTranslations } from '@shared/
import { Direction } from '@shared/models/page/sort-order';
import { NotificationTemplate, NotificationTemplateTypeTranslateMap } from '@shared/models/notification.models';
import { NotificationService } from '@core/http/notification.service';
import { EntityAction } from '@home/models/entity/entity-component.models';
import { MatDialog } from '@angular/material/dialog';
import {
TemplateNotificationDialogComponent,
TemplateNotificationDialogData
} from '@home/pages/notification/template/template-notification-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { TemplateTableHeaderComponent } from '@home/pages/notification/template/template-table-header.component';
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
import { DatePipe } from '@angular/common';
import { Observable } from 'rxjs';
@Injectable()
export class TemplateTableConfigResolver {
@ -48,12 +47,14 @@ export class TemplateTableConfigResolver {
this.config.entityType = EntityType.NOTIFICATION_TEMPLATE;
this.config.detailsPanelEnabled = false;
this.config.addEnabled = false;
this.config.addAsTextButton = true;
this.config.rowPointer = true;
this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_TEMPLATE);
this.config.entityResources = {} as EntityTypeResource<NotificationTemplate>;
this.config.addEntity = () => this.editTemplate(null, null, true);
this.config.entitiesFetchFunction = pageLink => this.notificationService.getNotificationTemplates(pageLink);
this.config.deleteEntityTitle = template => this.translate.instant('notification.delete-template-title', {templateName: template.name});
@ -64,13 +65,14 @@ export class TemplateTableConfigResolver {
this.config.cellActionDescriptors = this.configureCellActions();
this.config.headerComponent = TemplateTableHeaderComponent;
this.config.onEntityAction = action => this.onTemplateAction(action);
this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
this.config.handleRowClick = ($event, template) => {
this.editTemplate($event, template);
this.editTemplate($event, template).subscribe((res) => {
if (res) {
this.config.updateData();
}
});
return true;
};
@ -82,7 +84,7 @@ export class TemplateTableConfigResolver {
);
}
resolve(route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTemplate> {
resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTemplate> {
return this.config;
}
@ -97,11 +99,9 @@ export class TemplateTableConfigResolver {
];
}
private editTemplate($event: Event, template: NotificationTemplate, isAdd = false, isCopy = false) {
if ($event) {
$event.stopPropagation();
}
this.dialog.open<TemplateNotificationDialogComponent, TemplateNotificationDialogData,
private editTemplate($event: Event, template: NotificationTemplate, isAdd = false, isCopy = false): Observable<NotificationTemplate> {
$event?.stopPropagation();
return this.dialog.open<TemplateNotificationDialogComponent, TemplateNotificationDialogData,
NotificationTemplate>(TemplateNotificationDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@ -110,21 +110,6 @@ export class TemplateTableConfigResolver {
isCopy,
template
}
}).afterClosed()
.subscribe((res) => {
if (res) {
this.config.updateData();
}
});
}).afterClosed();
}
private onTemplateAction(action: EntityAction<NotificationTemplate>): boolean {
switch (action.action) {
case 'add':
this.editTemplate(action.event, action.entity, true);
return true;
}
return false;
}
}

24
ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html

@ -1,24 +0,0 @@
<!--
Copyright © 2016-2024 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="flex flex-full flex-row items-center justify-end">
<button mat-stroked-button color="primary" (click)="createTemplate($event)">
<div class="flex flex-row items-center justify-start">
<mat-icon>add</mat-icon>{{ 'notification.add-template' | translate }}
</div>
</button>
</div>

18
ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.scss

@ -1,18 +0,0 @@
/**
* Copyright © 2016-2024 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{
width: 10000px;
}

38
ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.ts

@ -1,38 +0,0 @@
///
/// Copyright © 2016-2024 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 } from '@angular/core';
import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { NotificationTemplate } from '@shared/models/notification.models';
@Component({
selector: 'tb-template-table-header',
templateUrl: './template-table-header.component.html',
styleUrls: ['template-table-header.component.scss']
})
export class TemplateTableHeaderComponent extends EntityTableHeaderComponent<NotificationTemplate> {
constructor(protected store: Store<AppState>) {
super(store);
}
createTemplate($event: Event) {
this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
}
}

9
ui-ngx/src/app/shared/models/entity-type.models.ts

@ -403,7 +403,8 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
list: 'entity.list-of-notification-rules',
noEntities: 'notification.no-rules-notification',
search: 'notification.search-rules',
selectedEntities: 'notification.selected-rules'
selectedEntities: 'notification.selected-rules',
add: 'notification.add-rule'
}
],
[
@ -414,7 +415,8 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
list: 'entity.list-of-notification-targets',
noEntities: 'notification.no-recipients-notification',
search: 'notification.search-recipients',
selectedEntities: 'notification.selected-recipients'
selectedEntities: 'notification.selected-recipients',
add: 'notification.add-recipients'
}
],
[
@ -425,7 +427,8 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
list: 'entity.list-of-notification-templates',
noEntities: 'notification.no-notification-templates',
search: 'notification.search-templates',
selectedEntities: 'notification.selected-template'
selectedEntities: 'notification.selected-template',
add: 'notification.add-template'
}
],
[

Loading…
Cancel
Save