hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-15 22:13:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

html hybrid store/static var

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-06 15:45:37 +01:00
parent f61f246f23
commit 74dc5f8067
17 changed files with 229 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
src/app/shared/notifications/notifications-board/notifications-board.component.ts
View File

@@ -1,15 +1,22 @@
import {
Component, EventEmitter, OnInit, OnDestroy, ViewEncapsulation, Input, Output,
ChangeDetectionStrategy, ChangeDetectorRef
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
ViewEncapsulation
} from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Options } from '../interfaces/options.type';
import { Notification } from '../interfaces/notification.type';
import { NotificationsService } from '../notifications.service';
import { Store } from '@ngrx/store';
import { NotificationsActions, NotificationsActionTypes } from '../notifications.actions';
import { notificationsReducer } from '../notifications.reducers';
import { AppState } from '../../../app.reducer';
import { notificationsStateSelector } from '../selectors';
import { difference } from 'lodash';
import { INotification } from '../models/notification.model';
import { NotificationsState } from '../notifications.reducers';
import { INotificationBoardOptions } from '../models/notification-options.model';
@Component({
selector: 'ds-notifications-board',
@@ -20,33 +27,22 @@ import { AppState } from '../../../app.reducer';
})
export class NotificationsBoardComponent implements OnInit, OnDestroy {
@Input() set options(opt: Options) {
@Input() set options(opt: INotificationBoardOptions) {
this.attachChanges(opt);
}
@Output() onCreate = new EventEmitter();
@Output() onDestroy = new EventEmitter();
public notifications: Notification[] = [];
public notifications: INotification[] = [];
public position: ['top' | 'bottom' | 'middle', 'right' | 'left' | 'center'] = ['bottom', 'right'];
private lastNotificationCreated: Notification;
private listener: Subscription;
// private listener: Subscription;
// Received values
private lastOnBottom = false;
private maxStack = 8;
// private preventLastDuplicates: any = true;
// private preventDuplicates = true;
// Sent values
public timeOut = 0;
// public maxLength = 0;
// public clickToClose = true;
// public clickIconToClose = false;
// public showProgressBar = true;
// public pauseOnHover = true;
// public theClass = '';
public rtl = false;
public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
@@ -56,105 +52,56 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.listener = this.store.select()
(action: NotificationsActions) => {
notificationsReducer(this.notifications, action);
// this.listener =
this.store.select(notificationsStateSelector)
.subscribe((state: NotificationsState) => {
if (state.length === 0) {
this.notifications = [];
} else if (state.length > this.notifications.length) {
// Add
const newElem = difference(state, this.notifications);
console.log('new Elements #', newElem.length);
// switch (action.type) {
// case NotificationsActionTypes.NEW_NOTIFICATION:
//
// break;
// case NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER:
//
// break;
// case NotificationsActionTypes.REMOVE_NOTIFICATION:
//
// break;
// case NotificationsActionTypes.REMOVE_ALL_NOTIFICATIONS:
//
// break;
// }
newElem.forEach((notification) => {
this.add(notification);
});
} else {
// Remove
const delElem = difference(this.notifications, state);
delElem.forEach((notification) => {
this.notifications = this.notifications.filter((item: INotification) => item.id !== notification.id);
});
}
console.log(this.notifications);
this.cdr.markForCheck();
});
// Listen for changes in the service
// this.listener = this.service.emitter
// .subscribe((item) => { // Subscribe a stato di redux
// switch (item.command) {
// case 'cleanAll':
// this.notifications = [];
// break;
//
// case 'clean':
// this.cleanSingle(item.id!);
// break;
//
// case 'set':
// if (item.add) {
// this.add(item.notification!);
// } else {
// this.defaultBehavior(item);
// }
// break;
//
// default:
// this.defaultBehavior(item);
// break;
// }
//
// this.cdr.markForCheck();
// });
}
// Default behavior on event
defaultBehavior(value: any): void {
this.notifications.splice(this.notifications.indexOf(value.notification), 1);
this.onDestroy.emit(this.buildEmit(value.notification, false));
}
// Add the new notification to the notification array
add(item: Notification): void {
item.createdOn = new Date();
// const toBlock: boolean = this.preventLastDuplicates || this.preventDuplicates ? this.block(item) : false;
// Save this as the last created notification
this.lastNotificationCreated = item;
// Override icon if set
if (item.override && item.override.icons && item.override.icons[item.type]) {
item.icon = item.override.icons[item.type];
add(item: INotification): void {
const toBlock: boolean = this.block(item);
if (!toBlock) {
if (this.notifications.length >= this.maxStack) {
this.notifications.splice(this.notifications.length - 1, 1);
}
this.notifications.splice(0, 0, item);
}
// if (!toBlock) {
// // Check if the notification should be added at the start or the end of the array
// if (this.lastOnBottom) {
// if (this.notifications.length >= this.maxStack) {
// this.notifications.splice(0, 1);
// }
//
// this.notifications.push(item);
// } else {
// if (this.notifications.length >= this.maxStack) {
// this.notifications.splice(this.notifications.length - 1, 1);
// }
//
// this.notifications.splice(0, 0, item);
// }
//
// this.onCreate.emit(this.buildEmit(item, true));
// }
}
// Check if notifications should be prevented
block(item: Notification): boolean {
const toCheck = item.html ? this.checkHtml : this.checkStandard;
this.notifications.forEach((notification) => {
if (toCheck(notification, item)) {
return true;
}
});
//
// // Check if notifications should be prevented
block(item: INotification): boolean {
// const toCheck = item.html ? this.checkHtml : this.checkStandard;
//
// this.notifications.forEach((notification) => {
// if (toCheck(notification, item)) {
// return true;
// }
// });
//
// if (this.notifications.length > 0) {
// for (let i = 0; i < this.notifications.length; i++) {
// if (toCheck(this.notifications[i], item)) {
@@ -163,32 +110,33 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
// }
// }
//
// if (this.preventLastDuplicates) {
// // if (this.preventLastDuplicates) {
//
// let comp: Notification;
//
// if (this.preventLastDuplicates === 'visible' && this.notifications.length > 0) {
// if (this.lastOnBottom) {
// comp = this.notifications[this.notifications.length - 1];
// } else {
// if ( this.notifications.length > 0) {
// // if (this.lastOnBottom) {
// // comp = this.notifications[this.notifications.length - 1];
// // }
// // else {
// comp = this.notifications[0];
// }
// } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
// comp = this.lastNotificationCreated;
// // }
// // } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
// // comp = this.lastNotificationCreated;
// } else {
// return false;
// }
// return toCheck(comp, item);
// }
// // }
//
return false;
}
checkStandard(checker: Notification, item: Notification): boolean {
checkStandard(checker: INotification, item: INotification): boolean {
return checker.type === item.type && checker.title === item.title && checker.content === item.content;
}
checkHtml(checker: Notification, item: Notification): boolean {
checkHtml(checker: INotification, item: INotification): boolean {
return checker.html ? checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html : false;
}
@@ -197,56 +145,13 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
Object.keys(options).forEach((a) => {
if (this.hasOwnProperty(a)) {
(this as any)[a] = options[a];
} else if (a === 'icons') {
// this.service.icons = options[a];
}
});
}
buildEmit(notification: Notification, to: boolean) {
const toEmit: Notification = {
createdOn: notification.createdOn,
type: notification.type,
icon: notification.icon,
id: notification.id
};
if (notification.html) {
toEmit.html = notification.html;
} else {
toEmit.title = notification.title;
toEmit.content = notification.content;
}
if (!to) {
toEmit.destroyedOn = new Date();
}
return toEmit;
}
cleanSingle(id: string): void {
let indexOfDelete = 0;
let doDelete = false;
let noti;
this.notifications.forEach((notification, idx) => {
if (notification.id === id) {
indexOfDelete = idx;
noti = notification;
doDelete = true;
}
});
if (doDelete) {
this.notifications.splice(indexOfDelete, 1);
this.onDestroy.emit(this.buildEmit(noti, false));
}
}
ngOnDestroy(): void {
if (this.listener) {
this.listener.unsubscribe();
}
// if (this.listener) {
// this.listener.unsubscribe();
// }
}
}