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

UI: Add new column in send notification table; improvement design send notification dialog

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-01-18 13:03:37 +02:00
parent 18f171f2c3
commit 25da40a1dc
8 changed files with 51 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/src/app/core/http/notification.service.ts
View File

@ -23,6 +23,7 @@ import { PageData } from '@shared/models/page/page-data';
import {
Notification,
NotificationRequest,
NotificationRequestInfo,
NotificationRequestPreview,
NotificationRule,
NotificationSettings,
@ -69,8 +70,8 @@ export class NotificationService {
notification, defaultHttpOptionsFromConfig(config));
}
public getNotificationRequests(pageLink: PageLink, config?: RequestConfig): Observable<PageData<NotificationRequest>> {
return this.http.get<PageData<NotificationRequest>>(`/api/notification/requests${pageLink.toQuery()}`,
public getNotificationRequests(pageLink: PageLink, config?: RequestConfig): Observable<PageData<NotificationRequestInfo>> {
return this.http.get<PageData<NotificationRequestInfo>>(`/api/notification/requests${pageLink.toQuery()}`,
defaultHttpOptionsFromConfig(config));
}

4
ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts
View File

@ -692,4 +692,8 @@ export class EntitiesTableComponent extends PageComponent implements IEntitiesTa
this.updateData();
}
}
detectChanges() {
this.cd.markForCheck();
}
}

1
ui-ngx/src/app/modules/home/models/entity/entity-table-component.models.ts
View File

@ -85,4 +85,5 @@ export interface IEntitiesTableComponent {
cellStyle(entity: BaseData<HasId>, column: EntityColumn<BaseData<HasId>>, row: number): any;
trackByColumnKey(index, column: EntityTableColumn<BaseData<HasId>>): string;
trackByEntityId(index: number, entity: BaseData<HasId>): string;
detectChanges(): void;
}

3
ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts
View File

@ -110,7 +110,8 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
}
);
} else {
this.updateData();
entity.status = NotificationStatus.READ;
this.getTable().detectChanges();
}
});
}

19
ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts
View File

@ -21,7 +21,9 @@ import {
EntityTableConfig
} from '@home/models/entity/entities-table-config.models';
import {
NotificationDeliveryMethodTranslateMap,
NotificationRequest,
NotificationRequestInfo,
NotificationRequestStatus,
NotificationRequestStatusTranslateMap,
NotificationTemplate
@ -37,8 +39,9 @@ import {
RequestNotificationDialogComponent,
RequestNotificationDialogData
} from '@home/pages/notification-center/request-table/request-notification-dialog.componet';
import { PageLink } from '@shared/models/page/page-link';
export class RequestTableConfig extends EntityTableConfig<NotificationRequest> {
export class RequestTableConfig extends EntityTableConfig<NotificationRequest, PageLink, NotificationRequestInfo> {
constructor(private notificationService: NotificationService,
private translate: TranslateService,
@ -66,16 +69,18 @@ export class RequestTableConfig extends EntityTableConfig<NotificationRequest> {
this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
this.columns.push(
new DateEntityTableColumn<NotificationRequest>('createdTime', 'notification.created-time', this.datePipe, '150px'),
new EntityTableColumn<NotificationRequest>('status', 'notification.status', '100%',
new DateEntityTableColumn<NotificationRequestInfo>('createdTime', 'notification.created-time', this.datePipe, '150px'),
new EntityTableColumn<NotificationRequestInfo>('status', 'notification.status', '15%',
request => this.requestStatus(request.status), request => this.requestStatusStyle(request.status)),
// new EntityTableColumn<NotificationRequest>('deliveryMethods', 'notification.delivery-method', '20%',
// (request) => request.deliveryMethods.toString(),
// () => ({}), false)
new EntityTableColumn<NotificationRequest>('deliveryMethods', 'notification.delivery-method', '35%',
(request) => request.deliveryMethods
.map((deliveryMethod) => this.translate.instant(NotificationDeliveryMethodTranslateMap.get(deliveryMethod))).join(', '),
() => ({}), false),
new EntityTableColumn<NotificationRequest>('templateName', 'notification.template', '50%')
);
}
private configureCellActions(): Array<CellActionDescriptor<NotificationRequest>> {
private configureCellActions(): Array<CellActionDescriptor<NotificationRequestInfo>> {
return [];
}

5
ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html
View File

@ -62,6 +62,11 @@
<mat-icon>supervisor_account</mat-icon>
<div class="total-recipients">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
</div>
<div class="details-recipients" *ngIf="notificationRequestForm.get('targets').value.length">
<div *ngFor="let detail of preview.recipientsCountByTarget | keyvalue" class="details-recipient">
<span class="number">{{ detail.value }}</span>{{ detail.key }}
</div>
</div>
</section>
</div>
</mat-step>

19
ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss
View File

@ -32,6 +32,25 @@
font-weight: 500;
letter-spacing: .25px;
}
&> div:not(:last-child) {
margin-bottom: 12px;
}
.details-recipient {
font-size: 14px;
line-height: 14px;
letter-spacing: .2px;
.number {
font-weight: 500;
margin-right: 4px;
}
&:not(:last-of-type) {
margin-bottom: 8px;
}
}
}
@media #{$mat-gt-xs} {

5
ui-ngx/src/app/shared/models/notification.models.ts
View File

@ -56,6 +56,11 @@ export interface NotificationRequest extends Omit<BaseData<NotificationRequestId
additionalConfig: NotificationRequestConfig;
}
export interface NotificationRequestInfo extends NotificationRequest {
templateName: string;
deliveryMethods: NotificationDeliveryMethod[];
}
export interface NotificationRequestPreview {
totalRecipientsCount: number;
recipientsCountByTarget: { [key in string]: number };