mine in app notification listing changes

dmp-frontend/src/app/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.html

@@ -16,6 +16,13 @@
 					</button>
 				</div>
 
+				<div>
+					<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.NOTIFICATION-TYPE' | translate}}
+						<mat-select multiple [(ngModel)]="internalFilters.type">
+							<mat-option *ngFor="let type of notificationTypeEnumValues" [value]="type">{{enumUtils.toNotificationTypeString(type)}}</mat-option>
+						</mat-select>
+					</mat-label>
+				</div>
 				<div>
 					<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}}
 						<mat-select multiple [(ngModel)]="internalFilters.trackingState">

dmp-frontend/src/app/ui/inapp-notification/listing/filters/mine-inapp-notification-listing-filters.component.ts

@@ -5,6 +5,7 @@ import { NotificationInAppTracking } from '@app/core/common/enum/notification-in
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { InAppNotificationFilter } from '@app/core/query/inapp-notification.lookup';
 import { nameof } from 'ts-simple-nameof';
+import { NotificationType } from '@app/core/common/enum/notification-type';
 @Component({
 	selector: 'app-mine-inapp-notification-listing-filters',
 	templateUrl: './mine-inapp-notification-listing-filters.component.html',
@@ -16,6 +17,7 @@ export class MineInAppNotificationListingFiltersComponent extends BaseComponent
 	@Output() filterChange = new EventEmitter<InAppNotificationFilter>();
 
 	notificationInAppTrackingEnumValues = this.enumUtils.getEnumValues<NotificationInAppTracking>(NotificationInAppTracking);
+	notificationTypeEnumValues = this.enumUtils.getEnumValues<NotificationType>(NotificationType);
 
 	// * State
 	internalFilters: InAppNotificationListingFilters = this._getEmptyFilters();
@@ -47,11 +49,12 @@ export class MineInAppNotificationListingFiltersComponent extends BaseComponent
 	}
 
 	protected applyFilters(): void {
-		const { like, trackingState } = this.internalFilters ?? {}
+		const { like, trackingState, type } = this.internalFilters ?? {}
 		this.filterChange.emit({
 			...this.filter,
 			like,
-			trackingState
+			trackingState,
+			type
 		})
 	}
 
@@ -61,11 +64,12 @@ export class MineInAppNotificationListingFiltersComponent extends BaseComponent
 			return this._getEmptyFilters();
 		}
 
-		let { like, trackingState } = inputFilter;
+		let { like, trackingState, type } = inputFilter;
 
 		return {
 			like: like,
-			trackingState: trackingState
+			trackingState: trackingState,
+			type: type
 		}
 
 	}
@@ -73,7 +77,8 @@ export class MineInAppNotificationListingFiltersComponent extends BaseComponent
 	private _getEmptyFilters(): InAppNotificationListingFilters {
 		return {
 			like: null,
-			trackingState: null
+			trackingState: null,
+			type: null
 		}
 	}
 
@@ -90,4 +95,5 @@ export class MineInAppNotificationListingFiltersComponent extends BaseComponent
 interface InAppNotificationListingFilters {
 	like: string;
 	trackingState: NotificationInAppTracking[];
+	type: NotificationType[];
 }

dmp-frontend/src/app/ui/inapp-notification/listing/mine-inapp-notification-listing.component.html

@@ -32,9 +32,33 @@
 	<div class="d-flex align-items-center p-3 gap-1-rem">
 		<div class="row">
 			<ng-container *ngIf="isColumnSelected('trackingState')">
-				<a class="buttonLinkClass" [routerLink]="'./' + item?.id" class="col-12"
+				<span class="col-12">
-					(click)="$event.stopPropagation()">{{item?.trackingState | nullifyValue}}</a>
+					<small>
-				<br />
+						<mat-icon *ngIf="item?.trackingState == notificationInAppTracking.Delivered" mat-list-icon>drafts</mat-icon>
+						<mat-icon *ngIf="item?.trackingState == notificationInAppTracking.Stored" mat-list-icon>mail</mat-icon>
+					</small>
+				</span>
+				<br>
+			</ng-container>
+
+			<ng-container *ngIf="isColumnSelected('subject')">
+				<span class="col-12">
+					{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FIELDS.SUBJECT' | translate}}:
+					<small>
+						{{item?.subject | nullifyValue}}
+					</small>
+				</span>
+				<br>
+			</ng-container>
+
+			<ng-container *ngIf="isColumnSelected('type')">
+				<span class="col-12">
+					{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FIELDS.NOTIFICATION-TYPE' | translate}}:
+					<small>
+						{{enumUtils.toNotificationTypeString(item.type) | nullifyValue}}
+					</small>
+				</span>
+				<br>
 			</ng-container>
 
 			<ng-container *ngIf="isColumnSelected('createdAt')">
@@ -64,4 +88,13 @@
 			</mat-menu>
 		</div>
 	</div>
+</ng-template>
+
+<ng-template #state let-row="row" let-item>
+	<div class="row">
+		<div class="col-auto">
+			<mat-icon *ngIf="row.trackingState === notificationInAppTracking.Delivered" mat-list-icon>drafts</mat-icon>
+			<mat-icon *ngIf="row.trackingState === notificationInAppTracking.Stored" mat-list-icon>mail</mat-icon>		
+		</div>
+	</div>
 </ng-template>

dmp-frontend/src/app/ui/inapp-notification/listing/mine-inapp-notification-listing.component.ts

@@ -13,7 +13,6 @@ import { InAppNotificationLookup } from '@app/core/query/inapp-notification.look
 import { InAppNotificationService } from '@app/core/services/inapp-notification/inapp-notification.service';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
 import { nameof } from 'ts-simple-nameof';
-import { NotificationInAppTrackingTypePipe } from '@common/formatting/pipes/notification-inapp-tracking-type.pipe';
 import { Observable } from 'rxjs';
 import { QueryResult } from '@common/model/query-result';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
@@ -22,6 +21,8 @@ import { MatDialog } from '@angular/material/dialog';
 import { Guid } from '@common/types/guid';
 import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
 import { takeUntil } from 'rxjs/operators';
+import { NotificationInAppTracking } from '@app/core/common/enum/notification-inapp-tracking.enum';
+import { NotificationTypePipe } from '@common/formatting/pipes/notification-type.pipe';
 
 @Component({
 	selector: 'app-mine-inapp-notification-listing',
@@ -32,13 +33,16 @@ export class MineInAppNotificationListingComponent extends BaseListingComponent<
 	publish = false;
 	userSettingsKey = { key: 'InAppNotificationListingUserSettings' };
 	propertiesAvailableForOrder: ColumnDefinition[];
+	notificationInAppTracking= NotificationInAppTracking;
 
 	@ViewChild('actions', { static: true }) actions?: TemplateRef<any>;
+	@ViewChild('state', { static: true }) state?: TemplateRef<any>;
 	@ViewChild(HybridListingComponent, { static: true }) hybridListingComponent: HybridListingComponent;
 
 	private readonly lookupFields: string[] = [
 		nameof<InAppNotification>(x => x.id),
 		nameof<InAppNotification>(x => x.subject),
+		nameof<InAppNotification>(x => x.type),
 		nameof<InAppNotification>(x => x.trackingState),
 		nameof<InAppNotification>(x => x.createdAt),
 		nameof<InAppNotification>(x => x.isActive)
@@ -86,15 +90,22 @@ export class MineInAppNotificationListingComponent extends BaseListingComponent<
 
 	protected setupColumns() {
 		this.gridColumns.push(...[{
-			prop: nameof<InAppNotification>(x => x.subject),
-			sortable: true,
-			languageName: 'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FIELDS.SUBJECT'
-		}, 
-		{
 			prop: nameof<InAppNotification>(x => x.trackingState),
 			sortable: true,
 			languageName: 'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FIELDS.TRACKING-STATE',
-			pipe: this.pipeService.getPipe<NotificationInAppTrackingTypePipe>(NotificationInAppTrackingTypePipe)
+			cellTemplate: this.state,
+			maxWidth: 100
+		},
+		{
+			prop: nameof<InAppNotification>(x => x.subject),
+			sortable: true,
+			languageName: 'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FIELDS.SUBJECT'
+		},
+		{
+			prop: nameof<InAppNotification>(x => x.type),
+			sortable: true,
+			languageName: 'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FIELDS.NOTIFICATION-TYPE',
+			pipe: this.pipeService.getPipe<NotificationTypePipe>(NotificationTypePipe)
 		},
 		{
 			prop: nameof<InAppNotification>(x => x.createdAt),

dmp-frontend/src/assets/i18n/en.json

@@ -1336,11 +1336,13 @@
 			"FIELDS": {
 				"SUBJECT": "Subject",
 				"TRACKING-STATE": "State",
+				"NOTIFICATION-TYPE":"Type",
 				"CREATED-AT": "Created"
 			},
 			"FILTER": {
 				"TITLE": "Filters",
 				"TRACKING-STATE":"State",
+				"NOTIFICATION-TYPE":"Type",
 				"IS-ACTIVE": "Is Active",
 				"CANCEL": "Cancel",
 				"APPLY-FILTERS": "Apply filters"

dmp-frontend/src/common/formatting/common-formatting.module.ts

@@ -9,7 +9,7 @@ import { ReferenceTypePipe } from './pipes/reference-type.pipe';
 import { ReferenceSourceTypePipe } from './pipes/reference-source-type.pipe';
 import { NotificationTemplateChannelPipe } from './pipes/notification-template-channel.pipe';
 import { NotificationTemplateKindPipe } from './pipes/notification-template-kind.pipe';
-import { NotificationInAppTrackingTypePipe } from './pipes/notification-inapp-tracking-type.pipe';
+import { NotificationTypePipe } from './pipes/notification-type.pipe';
 
 //
 //
@@ -31,7 +31,7 @@ import { NotificationInAppTrackingTypePipe } from './pipes/notification-inapp-tr
 		ReferenceSourceTypePipe,
 		NotificationTemplateChannelPipe,
 		NotificationTemplateKindPipe,
-		NotificationInAppTrackingTypePipe
+		NotificationTypePipe
 	],
 	exports: [
 		DateFormatPipe,
@@ -47,7 +47,7 @@ import { NotificationInAppTrackingTypePipe } from './pipes/notification-inapp-tr
 		ReferenceSourceTypePipe,
 		NotificationTemplateChannelPipe,
 		NotificationTemplateKindPipe,
-		NotificationInAppTrackingTypePipe
+		NotificationTypePipe
 	],
 	providers: [
 		DateFormatPipe,
@@ -63,7 +63,7 @@ import { NotificationInAppTrackingTypePipe } from './pipes/notification-inapp-tr
 		ReferenceSourceTypePipe,
 		NotificationTemplateChannelPipe,
 		NotificationTemplateKindPipe,
-		NotificationInAppTrackingTypePipe
+		NotificationTypePipe
 	]
 })
 export class CommonFormattingModule { }

dmp-frontend/src/common/formatting/pipes/notification-type.pipe.ts

@@ -1,11 +1,11 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 
-@Pipe({ name: 'NotificationInAppTrackingTypeFormat' })
+@Pipe({ name: 'NotificationTypeFormat' })
-export class NotificationInAppTrackingTypePipe implements PipeTransform {
+export class NotificationTypePipe implements PipeTransform {
 	constructor(private enumUtils: EnumUtils) { }
 
 	public transform(value): any {
-		return this.enumUtils.toNotificationInAppTrackingString(value);
+		return this.enumUtils.toNotificationTypeString(value);
 	}
-}
+}