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

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

@@ -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));
   }
 

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

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

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

@@ -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;
 }

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

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

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

@@ -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 [];
   }
 

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

@@ -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>

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

@@ -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} {

ui-ngx/src/app/shared/models/notification.models.ts

@@ -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 };