notifications
This commit is contained in:
insanity
parent
931daa3cda
commit
3eafb4dbc5
|
|
@ -2,7 +2,7 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<h1>Notification page</h1>
|
||||
<of-notification></of-notification>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
|
|||
|
||||
import { NotificationPageComponent } from './notification-page.component';
|
||||
import { NotificationPageRoutingModule } from './notification-page-routing.module';
|
||||
import { NotificationModule } from 'packages/notification/notification.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -11,6 +12,7 @@ import { NotificationPageRoutingModule } from './notification-page-routing.modul
|
|||
CommonModule,
|
||||
FormsModule,
|
||||
NotificationPageRoutingModule,
|
||||
NotificationModule
|
||||
],
|
||||
declarations: [
|
||||
NotificationPageComponent,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="toolbar-notification-container">
|
||||
<!-- <div class="toolbar-notification-container">
|
||||
<button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
|
||||
<mat-icon>notifications_none</mat-icon>
|
||||
<span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span>
|
||||
|
|
@ -32,7 +32,6 @@
|
|||
<perfect-scrollbar class="content">
|
||||
<div *ngFor="let notification of notifications;">
|
||||
<div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" >
|
||||
<!-- [ngClass]="{'highlight': row.confirmDate === null}" -->
|
||||
<mat-icon class="icon">notifications</mat-icon>
|
||||
<div class="title" fxLayout="column">
|
||||
<div class="name">{{ notification.message }}</div>
|
||||
|
|
@ -48,6 +47,6 @@
|
|||
</perfect-scrollbar>
|
||||
</ng-template>
|
||||
|
||||
<!-- <ng-template #elseBlock> -->
|
||||
<!-- <div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div>
|
||||
<ng-template #elseBlock>
|
||||
<div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div>
|
||||
</ng-template> -->
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// import { NotificationComponent } from './notification/notification.component';
|
||||
// import { NotificationBadgeComponent } from './badge/notification.component';
|
||||
import { NotificationComponent } from './notification/notification.component';
|
||||
import { NotificationBadgeComponent } from './badge/notification.component';
|
||||
|
||||
// export const COMPONENTS = [
|
||||
// NotificationComponent,
|
||||
// NotificationBadgeComponent,
|
||||
// ];
|
||||
export const COMPONENTS = [
|
||||
NotificationComponent,
|
||||
NotificationBadgeComponent,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,29 +1,12 @@
|
|||
<div class="example-container mat-elevation-z8">
|
||||
<mat-table #table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="id">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="title">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Title </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="message">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Message </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.message}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="member">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Member </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.member.name}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="handleRowClick(row)" [ngClass]="{'highlight': row.confirmDate === null}"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #paginator [length]="totalLength" [pageIndex]="0" [pageSize]="PAGE_SIZE" (page)="handlePaging($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
<h1>Notifications</h1>
|
||||
<p-table [value]="notifications" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
|
||||
<ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
|
||||
<tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
|
||||
<td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
<td>{{notification.title}}</td>
|
||||
<td>{{notification.message}}</td>
|
||||
<td>{{notification.member.name}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.highlight {
|
||||
background: #039be5
|
||||
}
|
||||
|
|
@ -1,78 +1,98 @@
|
|||
// import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
|
||||
// import { MatTableDataSource, MatSort, PageEvent } from '@angular/material';
|
||||
// import { Router } from '@angular/router';
|
||||
// import { Store, select } from '@ngrx/store';
|
||||
// import { RPCClientError } from '@loafer/ng-rpc/protocol';
|
||||
// import { Notification } from '../../model';
|
||||
// import * as DetailStore from '../../store/detail';
|
||||
// import * as ListStore from '../../store/list';
|
||||
// import { ReadAllByMemberSelector } from '../../store';
|
||||
// import { AuthSelector } from 'packages/member/store';
|
||||
// import { Member } from '../../../member/model';
|
||||
// import { PageParams, Page } from 'app/commons/model';
|
||||
import { Component, OnInit, Input, ViewChild, AfterContentInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
import { RPCClientError } from '@loafer/ng-rpc/protocol';
|
||||
import { Notification } from '../../model';
|
||||
import * as DetailStore from '../../store/detail';
|
||||
import * as ListStore from '../../store/list';
|
||||
import { ReadAllByMemberSelector, ReadSelector } from '../../store';
|
||||
import { AuthSelector } from 'packages/member/store';
|
||||
import { Member } from '../../../member/model';
|
||||
import { PageParams, Page } from 'app/commons/model';
|
||||
|
||||
// @Component({
|
||||
// selector: 'of-notification',
|
||||
// templateUrl: './notification.component.html',
|
||||
// styleUrls: ['./notification.component.scss']
|
||||
// })
|
||||
// export class NotificationComponent implements OnInit, AfterContentInit {
|
||||
@Component({
|
||||
selector: 'of-notification',
|
||||
templateUrl: './notification.component.html',
|
||||
})
|
||||
export class NotificationComponent implements OnInit, AfterContentInit {
|
||||
|
||||
// notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
|
||||
notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));
|
||||
notifications: Notification[];
|
||||
readSuccess$ = this.detailStore.pipe(select(ReadSelector.select('notification')));
|
||||
|
||||
// displayedColumns = ['id', 'title', 'message', 'member'];
|
||||
// dataSource: MatTableDataSource<Notification>;
|
||||
// PAGE_SIZE = '10';
|
||||
// totalLength = 0;
|
||||
pageSize = '12';
|
||||
totalLength = 0;
|
||||
|
||||
// constructor(
|
||||
// private router: Router,
|
||||
// private listStore: Store<ListStore.State>,
|
||||
// private detailStore: Store<DetailStore.State>
|
||||
// ) { }
|
||||
constructor(
|
||||
private router: Router,
|
||||
private listStore: Store<ListStore.State>,
|
||||
private detailStore: Store<DetailStore.State>
|
||||
) { }
|
||||
|
||||
// ngOnInit() {
|
||||
// this.notification$.subscribe(
|
||||
// (page: Page) => {
|
||||
// if (page !== null) {
|
||||
// this.totalLength = page.totalElements;
|
||||
// this.dataSource = new MatTableDataSource(page.content);
|
||||
// }
|
||||
// },
|
||||
// (error: RPCClientError) => {
|
||||
// console.log(error.response.message);
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
ngOnInit() {
|
||||
this.notification$.subscribe(
|
||||
(page: Page) => {
|
||||
if (page !== null) {
|
||||
this.notifications = page.content;
|
||||
this.totalLength = page.totalElements;
|
||||
}
|
||||
},
|
||||
(error: RPCClientError) => {
|
||||
console.log(error.response.message);
|
||||
}
|
||||
);
|
||||
|
||||
// ngAfterContentInit() {
|
||||
// this.getNotifications(0);
|
||||
// }
|
||||
this.readSuccess$.subscribe(
|
||||
(noti: Notification) => {
|
||||
if (noti) {
|
||||
this.updateData(noti);
|
||||
}
|
||||
},
|
||||
(error: RPCClientError) => {
|
||||
console.log(error.response.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// getNotifications(pageIndex: number) {
|
||||
// this.listStore.select(AuthSelector.select('member')).subscribe(
|
||||
// (member: Member) => {
|
||||
// const pageParams: PageParams = {
|
||||
// pageNo: pageIndex + '',
|
||||
// countPerPage: this.PAGE_SIZE,
|
||||
// sortCol: 'id',
|
||||
// sortDirection: 'descending'
|
||||
// };
|
||||
// this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
|
||||
// },
|
||||
// (error) => {
|
||||
// console.log(error);
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
ngAfterContentInit() {
|
||||
this.getNotifications(0);
|
||||
}
|
||||
|
||||
// handleRowClick(notification: Notification) {
|
||||
// this.detailStore.dispatch(new DetailStore.MarkAsRead(notification));
|
||||
// alert('Will redirect to ' + notification.url);
|
||||
// // this.router.navigate([n.url]);
|
||||
// }
|
||||
updateData(noti: Notification) {
|
||||
for (let i = 0; i < this.notifications.length; i++) {
|
||||
const exist = this.notifications[i];
|
||||
if (exist.id === noti.id) {
|
||||
this.notifications[i] = noti;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// handlePaging(e: PageEvent) {
|
||||
// this.getNotifications(e.pageIndex);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
getNotifications(pageIndex: number) {
|
||||
this.listStore.select(AuthSelector.select('member')).subscribe(
|
||||
(member: Member) => {
|
||||
const pageParams: PageParams = {
|
||||
pageNo: pageIndex + '',
|
||||
countPerPage: this.pageSize,
|
||||
sortCol: 'id',
|
||||
sortDirection: 'descending'
|
||||
};
|
||||
this.listStore.dispatch(new ListStore.ReadAllByMember({ member, pageParams }));
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onRowSelect(event) {
|
||||
this.detailStore.dispatch(new DetailStore.MarkAsRead(event.data));
|
||||
alert('Will redirect to ' + event.data.url);
|
||||
// this.router.navigate([n.url]);
|
||||
}
|
||||
|
||||
onPaging(e) {
|
||||
this.getNotifications(e.page);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,26 @@
|
|||
// import { NgModule } from '@angular/core';
|
||||
// import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
// import { COMPONENTS } from './component';
|
||||
// import { SERVICES } from './service';
|
||||
import { COMPONENTS } from './component';
|
||||
import { SERVICES } from './service';
|
||||
|
||||
// import { NotificationStoreModule } from './notification-store.module';
|
||||
import { NotificationStoreModule } from './notification-store.module';
|
||||
import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
|
||||
|
||||
// @NgModule({
|
||||
// imports: [
|
||||
// CommonModule,
|
||||
// NotificationStoreModule
|
||||
// ],
|
||||
// declarations: [
|
||||
// COMPONENTS,
|
||||
// ],
|
||||
// exports: [
|
||||
// COMPONENTS,
|
||||
// ],
|
||||
// providers: [
|
||||
// SERVICES,
|
||||
// ],
|
||||
// })
|
||||
// export class NotificationModule { }
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
NotificationStoreModule,
|
||||
PrimeNGModules
|
||||
],
|
||||
declarations: [
|
||||
COMPONENTS,
|
||||
],
|
||||
exports: [
|
||||
COMPONENTS,
|
||||
],
|
||||
providers: [
|
||||
SERVICES,
|
||||
],
|
||||
})
|
||||
export class NotificationModule { }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user