mine in app notification listing changes

This commit is contained in:
amentis 2024-01-11 12:16:50 +02:00
parent cb7d5b342f
commit 46ba3dcb62
7 changed files with 82 additions and 23 deletions

View File

@ -16,6 +16,13 @@
</button> </button>
</div> </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> <div>
<mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}} <mat-label>{{'NOTIFICATION-SERVICE.INAPP-NOTIFICATION-LISTING.FILTER.TRACKING-STATE' | translate}}
<mat-select multiple [(ngModel)]="internalFilters.trackingState"> <mat-select multiple [(ngModel)]="internalFilters.trackingState">

View File

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

View File

@ -32,9 +32,33 @@
<div class="d-flex align-items-center p-3 gap-1-rem"> <div class="d-flex align-items-center p-3 gap-1-rem">
<div class="row"> <div class="row">
<ng-container *ngIf="isColumnSelected('trackingState')"> <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>
<ng-container *ngIf="isColumnSelected('createdAt')"> <ng-container *ngIf="isColumnSelected('createdAt')">
@ -65,3 +89,12 @@
</div> </div>
</div> </div>
</ng-template> </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>

View File

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

View File

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

View File

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

View File

@ -1,11 +1,11 @@
import { Pipe, PipeTransform } from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; 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) { } constructor(private enumUtils: EnumUtils) { }
public transform(value): any { public transform(value): any {
return this.enumUtils.toNotificationInAppTrackingString(value); return this.enumUtils.toNotificationTypeString(value);
} }
} }