mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
9 years ago
45 changed files with 448 additions and 205 deletions
@ -0,0 +1,53 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; |
||||
|
|
||||
|
import { DialogService } from './../services/dialog.service'; |
||||
|
|
||||
|
@Directive({ |
||||
|
selector: '[sqxConfirmClick]' |
||||
|
}) |
||||
|
export class ConfirmClickDirective { |
||||
|
@Input() |
||||
|
public confirmTitle: string; |
||||
|
|
||||
|
@Input() |
||||
|
public confirmText: string; |
||||
|
|
||||
|
@Output('sqxConfirmClick') |
||||
|
public click = new EventEmitter(); |
||||
|
|
||||
|
constructor( |
||||
|
private readonly dialogService: DialogService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
@HostListener('click', ['$event']) |
||||
|
public onClick(event: Event) { |
||||
|
if (this.confirmTitle && |
||||
|
this.confirmTitle.length > 0 && |
||||
|
this.confirmText && |
||||
|
this.confirmText.length > 0) { |
||||
|
|
||||
|
let subscription = |
||||
|
this.dialogService.confirm(this.confirmTitle, this.confirmText) |
||||
|
.subscribe(result => { |
||||
|
if (result) { |
||||
|
this.click.emit(); |
||||
|
} |
||||
|
|
||||
|
subscription.unsubscribe(); |
||||
|
}); |
||||
|
} else { |
||||
|
this.click.emit(); |
||||
|
} |
||||
|
|
||||
|
event.stopPropagation(); |
||||
|
event.preventDefault(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
<div class="modal" *sqxModalView="dialogView;onRoot:true" [@fade]> |
||||
|
<div class="modal-backdrop"></div> |
||||
|
<div class="modal-dialog"> |
||||
|
<div class="modal-content"> |
||||
|
<div class="modal-header"> |
||||
|
<h4 class="modal-title">{{dialogRequest.title}}</h4> |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-body"> |
||||
|
{{dialogRequest.text}} |
||||
|
</div> |
||||
|
|
||||
|
<div class="modal-footer"> |
||||
|
<button type="button" class="btn btn-danger" (click)="confirm()">Yes</button> |
||||
|
<button type="button" class="btn btn-secondary" (click)="cancel()">No</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="notification-container notification-container-{{position}}"> |
||||
|
<div class="alert alert-dismissible alert-{{notification.messageType}}" *ngFor="let notification of notifications" (click)="close(notification)" [@fade]> |
||||
|
<button type="button" class="close" data-dismiss="alert" (close)="close(notification)">×</button> |
||||
|
|
||||
|
{{notification.message}} |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,28 @@ |
|||||
|
@import '_mixins'; |
||||
|
@import '_vars'; |
||||
|
|
||||
|
.notification-container { |
||||
|
& { |
||||
|
margin: .625rem; |
||||
|
max-width: 20rem; |
||||
|
min-width: 20rem; |
||||
|
position: fixed; |
||||
|
z-index: 100000; |
||||
|
} |
||||
|
|
||||
|
&-righttop { |
||||
|
@include fixed(0, 0, auto, auto); |
||||
|
} |
||||
|
|
||||
|
&-rightbottom { |
||||
|
@include fixed(auto, 0, 0, auto); |
||||
|
} |
||||
|
|
||||
|
&-lefttop { |
||||
|
@include fixed(0, auto, auto, 0); |
||||
|
} |
||||
|
|
||||
|
&-leftbottom { |
||||
|
@include fixed(auto, auto, 0, 0); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,92 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights r vbeserved |
||||
|
*/ |
||||
|
|
||||
|
import { Component, Input, OnDestroy, OnInit } from '@angular/core'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
|
||||
|
import { fadeAnimation } from './animations'; |
||||
|
|
||||
|
import { |
||||
|
DialogRequest, |
||||
|
DialogService, |
||||
|
Notification |
||||
|
} from './../services/dialog.service'; |
||||
|
|
||||
|
import { ModalView } from './../utils/modal-view'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-dialog-renderer', |
||||
|
styleUrls: ['./dialog-renderer.component.scss'], |
||||
|
templateUrl: './dialog-renderer.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class DialogRendererComponent implements OnDestroy, OnInit { |
||||
|
private dialogsSubscription: Subscription; |
||||
|
private notificationsSubscription: Subscription; |
||||
|
|
||||
|
public dialogView = new ModalView(false, true); |
||||
|
public dialogRequest: DialogRequest; |
||||
|
|
||||
|
public notifications: Notification[] = []; |
||||
|
|
||||
|
@Input() |
||||
|
public position = 'bottomright'; |
||||
|
|
||||
|
constructor( |
||||
|
private readonly dialogService: DialogService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnDestroy() { |
||||
|
this.notificationsSubscription.unsubscribe(); |
||||
|
this.dialogsSubscription.unsubscribe(); |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.notificationsSubscription = |
||||
|
this.dialogService.notifications.subscribe(notification => { |
||||
|
this.notifications.push(notification); |
||||
|
|
||||
|
if (notification.displayTime > 0) { |
||||
|
setTimeout(() => { |
||||
|
this.close(notification); |
||||
|
}, notification.displayTime); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
this.dialogsSubscription = |
||||
|
this.dialogService.dialogs |
||||
|
.subscribe(request => { |
||||
|
this.cancel(); |
||||
|
|
||||
|
this.dialogRequest = request; |
||||
|
this.dialogView.show(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public cancel() { |
||||
|
if (this.dialogRequest) { |
||||
|
this.dialogRequest.complete(false); |
||||
|
this.dialogRequest = null; |
||||
|
this.dialogView.hide(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public confirm() { |
||||
|
if (this.dialogRequest) { |
||||
|
this.dialogRequest.complete(true); |
||||
|
this.dialogRequest = null; |
||||
|
this.dialogView.hide(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public close(notification: Notification) { |
||||
|
this.notifications.splice(this.notifications.indexOf(notification), 1); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,94 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Sebastian Stehle. All rights reserved |
||||
|
*/ |
||||
|
|
||||
|
import { |
||||
|
Notification, |
||||
|
DialogRequest, |
||||
|
DialogService, |
||||
|
DialogServiceFactory |
||||
|
} from './../'; |
||||
|
|
||||
|
describe('DialogService', () => { |
||||
|
it('should instantiate from factory', () => { |
||||
|
const dialogService = DialogServiceFactory(); |
||||
|
|
||||
|
expect(dialogService).toBeDefined(); |
||||
|
}); |
||||
|
|
||||
|
it('should instantiate', () => { |
||||
|
const dialogService = new DialogService(); |
||||
|
|
||||
|
expect(dialogService).toBeDefined(); |
||||
|
}); |
||||
|
|
||||
|
it('should create error notification', () => { |
||||
|
const notification = Notification.error('MyError'); |
||||
|
|
||||
|
expect(notification.displayTime).toBe(5000); |
||||
|
expect(notification.message).toBe('MyError'); |
||||
|
expect(notification.messageType).toBe('danger'); |
||||
|
}); |
||||
|
|
||||
|
it('should create info notification', () => { |
||||
|
const notification = Notification.info('MyInfo'); |
||||
|
|
||||
|
expect(notification.displayTime).toBe(5000); |
||||
|
expect(notification.message).toBe('MyInfo'); |
||||
|
expect(notification.messageType).toBe('info'); |
||||
|
}); |
||||
|
|
||||
|
it('should create dialog request', () => { |
||||
|
const dialog = new DialogRequest('MyTitle', 'MyText'); |
||||
|
|
||||
|
expect(dialog.title).toBe('MyTitle'); |
||||
|
expect(dialog.text).toBe('MyText'); |
||||
|
}); |
||||
|
|
||||
|
it('should confirm dialog', () => { |
||||
|
const dialog = new DialogRequest('MyTitle', 'MyText'); |
||||
|
|
||||
|
let isCompleted = false; |
||||
|
let isNext = false; |
||||
|
|
||||
|
dialog.closed.subscribe(result => { |
||||
|
isNext = result; |
||||
|
}, undefined, () => { |
||||
|
isCompleted = true; |
||||
|
}) |
||||
|
expect(isCompleted).toBeTruthy(); |
||||
|
expect(isNext).toBeTruthy(); |
||||
|
}); |
||||
|
|
||||
|
it('should publish notification', () => { |
||||
|
const dialogService = new DialogService(); |
||||
|
const notification = Notification.error('Message'); |
||||
|
|
||||
|
let publishedNotification: Notification | null = null; |
||||
|
|
||||
|
dialogService.notifications.subscribe(result => { |
||||
|
publishedNotification = result; |
||||
|
}); |
||||
|
|
||||
|
dialogService.notify(notification); |
||||
|
|
||||
|
expect(publishedNotification).toBe(notification); |
||||
|
}); |
||||
|
|
||||
|
it('should publish dialog request', () => { |
||||
|
const dialogService = new DialogService(); |
||||
|
|
||||
|
let pushedDialog: DialogRequest | null = null; |
||||
|
|
||||
|
dialogService.dialogs.subscribe(result => { |
||||
|
pushedDialog = result; |
||||
|
}); |
||||
|
|
||||
|
dialogService.confirm('MyTitle', 'MyText'); |
||||
|
|
||||
|
expect(pushedDialog).toEqual(new DialogRequest('MyTitle', 'MyText')); |
||||
|
}); |
||||
|
}); |
||||
@ -1,57 +0,0 @@ |
|||||
/* |
|
||||
* Squidex Headless CMS |
|
||||
* |
|
||||
* @license |
|
||||
* Copyright (c) Sebastian Stehle. All rights reserved |
|
||||
*/ |
|
||||
|
|
||||
import { |
|
||||
Notification, |
|
||||
NotificationService, |
|
||||
NotificationServiceFactory |
|
||||
} from './../'; |
|
||||
|
|
||||
describe('NotificationService', () => { |
|
||||
it('should instantiate from factory', () => { |
|
||||
const notificationService = NotificationServiceFactory(); |
|
||||
|
|
||||
expect(notificationService).toBeDefined(); |
|
||||
}); |
|
||||
|
|
||||
it('should instantiate', () => { |
|
||||
const notificationService = new NotificationService(); |
|
||||
|
|
||||
expect(notificationService).toBeDefined(); |
|
||||
}); |
|
||||
|
|
||||
it('should create error', () => { |
|
||||
const notification = Notification.error('MyError'); |
|
||||
|
|
||||
expect(notification.displayTime).toBe(5000); |
|
||||
expect(notification.message).toBe('MyError'); |
|
||||
expect(notification.messageType).toBe('danger'); |
|
||||
}); |
|
||||
|
|
||||
it('should create info', () => { |
|
||||
const notification = Notification.info('MyInfo'); |
|
||||
|
|
||||
expect(notification.displayTime).toBe(5000); |
|
||||
expect(notification.message).toBe('MyInfo'); |
|
||||
expect(notification.messageType).toBe('info'); |
|
||||
}); |
|
||||
|
|
||||
it('should publish notification', () => { |
|
||||
const notificationService = new NotificationService(); |
|
||||
const notification = Notification.error('Message'); |
|
||||
|
|
||||
let publishedNotification: Notification | null = null; |
|
||||
|
|
||||
notificationService.notifications.subscribe(result => { |
|
||||
publishedNotification = result; |
|
||||
}); |
|
||||
|
|
||||
notificationService.notify(notification); |
|
||||
|
|
||||
expect(publishedNotification).toBe(notification); |
|
||||
}); |
|
||||
}); |
|
||||
Loading…
Reference in new issue