hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-12 20:43:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

starting with redux

Browse Source
This commit is contained in:
Andrea Chiapparelli - 4Science
2018-03-05 15:15:40 +01:00
parent add8c7cec9
commit f61f246f23
7 changed files with 217 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/+home-page/home-page.component.ts
View File

@@ -1,6 +1,7 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { NotificationsService } from '../shared/notifications/notifications.service'; import { NotificationsService } from '../shared/notifications/notifications.service';
import { Options } from '../shared/notifications/interfaces/options.type'; import { Options } from '../shared/notifications/interfaces/options.type';
import { NotificationOptions } from '../shared/notifications/models/notification-options.model';
@Component({ @Component({
selector: 'ds-home-page', selector: 'ds-home-page',
@@ -24,11 +25,9 @@ export class HomePageComponent {
createNotification() { createNotification() {
const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!', const n1 = this.notificationsService.success('Welcome in DSpace', 'Good choice!',
{ new NotificationOptions(2000, false, 'fromLeft'));
animate: 'rotate',
timeout: 2000});
const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!'); const n2 = this.notificationsService.info('Info in DSpace', 'For your info...!');
const n3 = this.notificationsService.warn('Warning in DSpace', 'This is a fake alert!'); const n3 = this.notificationsService.warning('Warning in DSpace', 'This is a fake alert!');
const n4 = this.notificationsService.danger(this.example); const n4 = this.notificationsService.danger(this.example);
console.log('Notifications pushed'); console.log('Notifications pushed');
console.log(n1); console.log(n1);

2
src/app/shared/notifications/models/notification.model.ts
View File

@@ -23,7 +23,7 @@ export class Notification implements INotification {
type: NotificationType, type: NotificationType,
title?: any, title?: any,
content?: any, content?: any,
options?: INotificationOptions) { options?: NotificationOptions) {
this.id = id; this.id = id;
this.type = type; this.type = type;

8
src/app/shared/notifications/notification/notification.component.scss
View File

@@ -109,19 +109,15 @@
.close { .close {
//position: absolute;
//top: 5px;
//right: 5px;
float: right; float: right;
padding-right: 5px; padding-right: 5px;
color: darkslategray;
} }
.icon { .icon {
//position: absolute;
//top: 5px;
//left: 5px;
float: left; float: left;
padding: 5px; padding: 5px;
color: darkslategray;
} }
// //
//.icon > fa-times-circle { //.icon > fa-times-circle {

3
src/app/shared/notifications/notification/notification.component.ts
View File

@@ -246,7 +246,8 @@ export class NotificationComponent implements OnInit, OnDestroy {
// this.notificationService.set(this.item, false); // this.notificationService.set(this.item, false);
// } // }
this.notificationService.set(this.item, false); // this.notificationService.set(this.item, false);
this.notificationService.remove(this.item);
} }
private contentType(item: any, key: string) { private contentType(item: any, key: string) {

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

@@ -6,6 +6,10 @@ import {Subscription} from 'rxjs/Subscription';
import { Options } from '../interfaces/options.type'; import { Options } from '../interfaces/options.type';
import { Notification } from '../interfaces/notification.type'; import { Notification } from '../interfaces/notification.type';
import { NotificationsService } from '../notifications.service'; 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';
@Component({ @Component({
selector: 'ds-notifications-board', selector: 'ds-notifications-board',
@@ -30,10 +34,10 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
private listener: Subscription; private listener: Subscription;
// Received values // Received values
private lastOnBottom = true; private lastOnBottom = false;
private maxStack = 8; private maxStack = 8;
private preventLastDuplicates: any = false; // private preventLastDuplicates: any = true;
private preventDuplicates = false; // private preventDuplicates = true;
// Sent values // Sent values
public timeOut = 0; public timeOut = 0;
@@ -46,39 +50,59 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
public rtl = false; public rtl = false;
public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight'; public animate: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale' = 'fromRight';
constructor( constructor(private service: NotificationsService,
private service: NotificationsService, private store: Store<AppState>,
private cdr: ChangeDetectorRef private cdr: ChangeDetectorRef) {
) {} }
ngOnInit(): void { ngOnInit(): void {
// Listen for changes in the service this.listener = this.store.select()
this.listener = this.service.emitter (action: NotificationsActions) => {
.subscribe((item) => { // Subscribe a stato di redux notificationsReducer(this.notifications, action);
switch (item.command) {
case 'cleanAll':
this.notifications = [];
break;
case 'clean': // switch (action.type) {
this.cleanSingle(item.id!); // case NotificationsActionTypes.NEW_NOTIFICATION:
break; //
// break;
case 'set': // case NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER:
if (item.add) { //
this.add(item.notification!); // break;
} else { // case NotificationsActionTypes.REMOVE_NOTIFICATION:
this.defaultBehavior(item); //
} // break;
break; // case NotificationsActionTypes.REMOVE_ALL_NOTIFICATIONS:
//
default: // break;
this.defaultBehavior(item); // }
break;
}
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 // Default behavior on event
@@ -91,7 +115,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
add(item: Notification): void { add(item: Notification): void {
item.createdOn = new Date(); item.createdOn = new Date();
const toBlock: boolean = this.preventLastDuplicates || this.preventDuplicates ? this.block(item) : false; // const toBlock: boolean = this.preventLastDuplicates || this.preventDuplicates ? this.block(item) : false;
// Save this as the last created notification // Save this as the last created notification
this.lastNotificationCreated = item; this.lastNotificationCreated = item;
@@ -100,24 +124,24 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
item.icon = item.override.icons[item.type]; item.icon = item.override.icons[item.type];
} }
if (!toBlock) { // if (!toBlock) {
// Check if the notification should be added at the start or the end of the array // // Check if the notification should be added at the start or the end of the array
if (this.lastOnBottom) { // if (this.lastOnBottom) {
if (this.notifications.length >= this.maxStack) { // if (this.notifications.length >= this.maxStack) {
this.notifications.splice(0, 1); // this.notifications.splice(0, 1);
} // }
//
this.notifications.push(item); // this.notifications.push(item);
} else { // } else {
if (this.notifications.length >= this.maxStack) { // if (this.notifications.length >= this.maxStack) {
this.notifications.splice(this.notifications.length - 1, 1); // this.notifications.splice(this.notifications.length - 1, 1);
} // }
//
this.notifications.splice(0, 0, item); // this.notifications.splice(0, 0, item);
} // }
//
this.onCreate.emit(this.buildEmit(item, true)); // this.onCreate.emit(this.buildEmit(item, true));
} // }
} }
// Check if notifications should be prevented // Check if notifications should be prevented
@@ -125,31 +149,37 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
const toCheck = item.html ? this.checkHtml : this.checkStandard; const toCheck = item.html ? this.checkHtml : this.checkStandard;
if (this.preventDuplicates && this.notifications.length > 0) { this.notifications.forEach((notification) => {
for (let i = 0; i < this.notifications.length; i++) { if (toCheck(notification, item)) {
if (toCheck(this.notifications[i], item)) {
return true; return true;
} }
} });
}
if (this.preventLastDuplicates) { // if (this.notifications.length > 0) {
// for (let i = 0; i < this.notifications.length; i++) {
let comp: Notification; // if (toCheck(this.notifications[i], item)) {
// return true;
if (this.preventLastDuplicates === 'visible' && this.notifications.length > 0) { // }
if (this.lastOnBottom) { // }
comp = this.notifications[this.notifications.length - 1]; // }
} else { //
comp = this.notifications[0]; // if (this.preventLastDuplicates) {
} //
} else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) { // let comp: Notification;
comp = this.lastNotificationCreated; //
} else { // if (this.preventLastDuplicates === 'visible' && this.notifications.length > 0) {
return false; // if (this.lastOnBottom) {
} // comp = this.notifications[this.notifications.length - 1];
return toCheck(comp, item); // } else {
} // comp = this.notifications[0];
// }
// } else if (this.preventLastDuplicates === 'all' && this.lastNotificationCreated) {
// comp = this.lastNotificationCreated;
// } else {
// return false;
// }
// return toCheck(comp, item);
// }
return false; return false;
} }
@@ -168,7 +198,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
if (this.hasOwnProperty(a)) { if (this.hasOwnProperty(a)) {
(this as any)[a] = options[a]; (this as any)[a] = options[a];
} else if (a === 'icons') { } else if (a === 'icons') {
this.service.icons = options[a]; // this.service.icons = options[a];
} }
}); });
} }

2
src/app/shared/notifications/notifications.effects.ts
View File

@@ -24,7 +24,7 @@ export class NotificationsEffects {
* Authenticate user. * Authenticate user.
* @method authenticate * @method authenticate
*/ */
@Effect() /* @Effect()
public timer: Observable<Action> = this.actions$ public timer: Observable<Action> = this.actions$
.ofType(NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER) .ofType(NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER)
// .debounceTime((action: any) => action.payload.options.timeOut) // .debounceTime((action: any) => action.payload.options.timeOut)

109
src/app/shared/notifications/notifications.service.ts
View File

@@ -1,43 +1,71 @@
import { Injectable, EventEmitter } from '@angular/core'; import { Injectable, EventEmitter } from '@angular/core';
import { Subject } from 'rxjs/Subject'; import { Subject } from 'rxjs/Subject';
import { NotificationEvent } from './interfaces/notification-event.type'; import { NotificationEvent } from './interfaces/notification-event.type';
import {Notification} from './interfaces/notification.type'; import { INotification, Notification } from './models/notification.model';
import {Icons, defaultIcons} from './interfaces/icons'; // import {Icons, defaultIcons} from './interfaces/icons';
import { NotificationType } from './models/notification-type'; import { NotificationType } from './models/notification-type';
import { NotificationOptions } from './models/notification-options.model';
import * as _ from 'lodash';
import { Store } from '@ngrx/store';
import {
NewNotificationAction, NewNotificationWithTimerAction, RemoveAllNotificationsAction,
RemoveNotificationAction
} from './notifications.actions';
@Injectable() @Injectable()
export class NotificationsService { export class NotificationsService {
public emitter = new Subject<NotificationEvent>(); // public emitter = new Subject<NotificationEvent>();
public icons: Icons = defaultIcons; // public icons: Icons = defaultIcons;
constructor(private store: Store<Notification>) {
set(notification: Notification, to: boolean): Notification { }
notification.id = notification.override && notification.override.id ? notification.override.id : Math.random().toString(36).substring(3);
notification.click = new EventEmitter<{}>();
notification.timeoutEnd = new EventEmitter<{}>();
this.emitter.next({command: 'set', notification: notification, add: to}); // private set(notification: Notification, to: boolean): Notification {
// notification.id = notification.override && notification.override.id ? notification.override.id : Math.random().toString(36).substring(3);
// notification.click = new EventEmitter<{}>();
// notification.timeoutEnd = new EventEmitter<{}>();
//
// this.emitter.next({command: 'set', notification: notification, add: to});
// return notification;
// };
private add(notification: Notification) {
let notificationAction;
if (notification.options.timeOut > 0) {
notificationAction = new NewNotificationWithTimerAction(notification);
} else {
notificationAction = new NewNotificationAction(notification);
}
this.store.dispatch(notificationAction);
}
success(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), NotificationType.Success, title, content, options);
this.add(notification);
return notification; return notification;
};
success(title: any = '', content: any = '', override?: any): Notification {
return this.set({title: title, content: content || '', type: NotificationType.Success, override: override}, true);
} }
// error(title: any = '', content: any = '', override?: any): Notification { // error(title: any = '', content: any = '', override?: any): Notification {
// return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true); // return this.set({title: title, content: content || '', type: NotificationType.Error, override: override}, true);
// } // }
danger(title: any = '', content: any = '', override?: any): Notification { danger(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
return this.set({title: title, content: content || '', type: NotificationType.Danger, override: override}, true); const notification = new Notification(_.uniqueId(), NotificationType.Danger, title, content, options);
this.add(notification);
return notification;
} }
info(title: any = '', content: any = '', override?: any): Notification { info(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
return this.set({title: title, content: content || '', type: NotificationType.Info, override: override}, true); const notification = new Notification(_.uniqueId(), NotificationType.Info, title, content, options);
this.add(notification);
return notification;
} }
warn(title: any = '', content: any = '', override?: any): Notification { warning(title: any = '', content: any = '', options = new NotificationOptions()): Notification {
return this.set({title: title, content: content || '', type: NotificationType.Warning, override: override}, true); const notification = new Notification(_.uniqueId(), NotificationType.Warning, title, content, options);
this.add(notification);
return notification;
} }
// bare(title: any = '', content: any = '', override?: any): Notification { // bare(title: any = '', content: any = '', override?: any): Notification {
@@ -45,21 +73,44 @@ export class NotificationsService {
// } // }
// With type method // With type method
create(title: any = '', content: any = '', type = 'success', override?: any): Notification { // create(title: any = '', content: any = '', type = 'success'): Notification {
return this.set({title: title, content: content, type: type, icon: (this.icons as any)[type], override: override}, true); // return this.set({
} // title: title,
// content: content,
// type: type,
// icon: (this.icons as any)[type],
// override: override
// }, true);
// }
// HTML Notification method // HTML Notification method
html(html: any, type = 'success', override?: any, icon = 'bare'): Notification { // html(html: any, type = 'success', override?: any, icon = 'bare'): Notification {
return this.set({html: html, type: type, icon: (this.icons as any)[icon], override: override}, true); // return this.set({html: html, type: type, icon: (this.icons as any)[icon], override: override}, true);
// }
html(html: any, type = NotificationType.Success, options = new NotificationOptions()): Notification {
const notification = new Notification(_.uniqueId(), type, null, null, options);
notification.html = html;
this.add(notification);
return notification;
} }
// Remove all notifications method // Remove all notifications method
remove(id?: string): void { // remove(id?: string): void {
if (id) { // if (id) {
this.emitter.next({command: 'clean', id: id}); // this.emitter.next({command: 'clean', id: id});
} else { // } else {
this.emitter.next({command: 'cleanAll'}); // this.emitter.next({command: 'cleanAll'});
// }
// }
remove(notification: INotification) {
const actionRemove = new RemoveNotificationAction(notification.id);
this.store.dispatch(actionRemove);
} }
removeAll() {
const actionRemoveAll = new RemoveAllNotificationsAction();
this.store.dispatch(actionRemoveAll);
} }
} }