inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

#537 snackbar notification system (#1527)

Browse Source 
* #537 snackbar notification system

* #537 add test dependencies

* #537 add export material module

* #537 fix demo project
This commit is contained in:
Mario Romano
2017-01-24 17:09:13 +00:00
committed by Maurizio Vitale
parent d8c433c055
commit 1c21875607
75 changed files with 256 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ng2-components/ng2-alfresco-upload/README.md
View File

@@ -58,6 +58,9 @@ Follow the 3 steps below:
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<!-- Polyfill(s) for Safari (pre-10.x) -->
<script src="node_modules/intl/dist/Intl.min.js"></script>
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>

3
ng2-components/ng2-alfresco-upload/demo/index.html
View File

@@ -31,6 +31,9 @@
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Load the Angular Material 2 stylesheet -->
<link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });

1
ng2-components/ng2-alfresco-upload/demo/package.json
View File

@@ -54,6 +54,7 @@
"@angular/http": "2.2.2",
"@angular/platform-browser": "2.2.2",
"@angular/platform-browser-dynamic": "2.2.2",
"@angular/material": "2.0.0-beta.1",
"@angular/router": "3.2.2",
"@angular/upgrade": "2.2.2",
"core-js": "^2.4.1",

2
ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
View File

@@ -21,6 +21,8 @@
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'ng2-translate': 'npm:ng2-translate',

2
ng2-components/ng2-alfresco-upload/karma-test-shim.js
View File

@@ -39,6 +39,8 @@ var map = {
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
// testing
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',

1
ng2-components/ng2-alfresco-upload/package.json
View File

@@ -63,6 +63,7 @@
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/material": "2.0.0-beta.1",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",

7
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.html
View File

@@ -35,10 +35,3 @@
multiple #uploadFolders>
</div>
</form>
<!--Notification bar-->
<div id="undo-notification-bar" class="mdl-js-snackbar mdl-snackbar"
#undoNotificationBar>
<div class="mdl-snackbar__text"></div>
<button data-automation-id="undo_upload_button" class="mdl-snackbar__action" type="button">{{'FILE_UPLOAD.ACTION.UNDO' | translate}}</button>
</div>

5
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
View File

@@ -18,7 +18,7 @@
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { UploadButtonComponent } from './upload-button.component';
import { DebugElement } from '@angular/core';
import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
import { CoreModule, AlfrescoTranslationService, NotificationService } from 'ng2-alfresco-core';
import { TranslationMock } from '../assets/translation.service.mock';
import { UploadService } from '../services/upload.service';
@@ -73,7 +73,8 @@ describe('UploadButtonComponent', () => {
],
providers: [
UploadService,
{ provide: AlfrescoTranslationService, useClass: TranslationMock }
NotificationService,
{provide: AlfrescoTranslationService, useClass: TranslationMock}
]
}).compileComponents();
}));

40
ng2-components/ng2-alfresco-upload/src/components/upload-button.component.ts
View File

@@ -15,9 +15,9 @@
* limitations under the License.
*/
import { Component, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { Component, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import 'rxjs/Rx';
import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2-alfresco-core';
import { UploadService } from '../services/upload.service';
import { FileModel } from '../models/file.model';
@@ -55,9 +55,6 @@ export class UploadButtonComponent {
private static DEFAULT_ROOT_ID: string = '-root-';
@ViewChild('undoNotificationBar')
undoNotificationBar: any;
@Input()
showUdoNotificationBar: boolean = true;
@@ -91,7 +88,8 @@ export class UploadButtonComponent {
constructor(private el: ElementRef,
private uploadService: UploadService,
private translateService: AlfrescoTranslationService,
private logService: LogService) {
private logService: LogService,
private notificationService: NotificationService) {
if (translateService) {
translateService.addTranslationFolder('ng2-alfresco-upload', 'node_modules/ng2-alfresco-upload/src');
}
@@ -217,26 +215,15 @@ export class UploadButtonComponent {
* @param {FileModel[]} latestFilesAdded - files in the upload queue enriched with status flag and xhr object.
*/
private _showUndoNotificationBar(latestFilesAdded: FileModel[]) {
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
let messageTranslate: any, actionTranslate: any;
messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');
if (this.undoNotificationBar.nativeElement.MaterialSnackbar) {
this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
message: messageTranslate.value,
timeout: 3000,
actionHandler: function () {
latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
uploadingFileModel.emitAbort();
});
},
actionText: actionTranslate.value
this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).afterDismissed().subscribe(() => {
latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
uploadingFileModel.emitAbort();
});
}
});
}
/**
@@ -258,16 +245,7 @@ export class UploadButtonComponent {
* @private
*/
private _showErrorNotificationBar(errorMessage: string) {
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
if (this.undoNotificationBar.nativeElement.MaterialSnackbar) {
this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
message: errorMessage,
timeout: 3000
});
}
this.notificationService.openSnackMessage(errorMessage, 3000);
}
/**

7
ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.html
View File

@@ -5,10 +5,3 @@
dropzone="" webkitdropzone="*" #droparea>
<ng-content></ng-content>
</div>
<!--Notification bar-->
<div id="undo-notification-bar" class="mdl-js-snackbar mdl-snackbar"
#undoNotificationBar>
<div class="mdl-snackbar__text"></div>
<button data-automation-id="undo_upload_button" class="mdl-snackbar__action" type="button">{{'FILE_UPLOAD.ACTION.UNDO' | translate}}</button>
</div>

3
ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.spec.ts
View File

@@ -17,7 +17,7 @@
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { EventEmitter, DebugElement } from '@angular/core';
import { AlfrescoTranslationService, CoreModule, LogService, LogServiceMock } from 'ng2-alfresco-core';
import { AlfrescoTranslationService, CoreModule, LogService, LogServiceMock, NotificationService } from 'ng2-alfresco-core';
import { UploadDragAreaComponent } from './upload-drag-area.component';
import { TranslationMock } from '../assets/translation.service.mock';
@@ -42,6 +42,7 @@ describe('UploadDragAreaComponent', () => {
],
providers: [
UploadService,
NotificationService,
{ provide: AlfrescoTranslationService, useClass: TranslationMock },
{ provide: LogService, useClass: LogServiceMock }
]

38
ng2-components/ng2-alfresco-upload/src/components/upload-drag-area.component.ts
View File

@@ -15,8 +15,8 @@
* limitations under the License.
*/
import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { AlfrescoTranslationService, LogService } from 'ng2-alfresco-core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { AlfrescoTranslationService, LogService, NotificationService } from 'ng2-alfresco-core';
import { UploadService } from '../services/upload.service';
import { FileModel } from '../models/file.model';
@@ -43,9 +43,6 @@ export class UploadDragAreaComponent {
private static DEFAULT_ROOT_ID: string = '-root-';
@ViewChild('undoNotificationBar')
undoNotificationBar: any;
@Input()
showUdoNotificationBar: boolean = true;
@@ -63,7 +60,8 @@ export class UploadDragAreaComponent {
constructor(private uploadService: UploadService,
private translateService: AlfrescoTranslationService,
private logService: LogService) {
private logService: LogService,
private notificationService: NotificationService) {
if (translateService) {
translateService.addTranslationFolder('ng2-alfresco-upload', 'node_modules/ng2-alfresco-upload/src');
}
@@ -117,7 +115,7 @@ export class UploadDragAreaComponent {
* @param item - FileEntity
*/
onFilesEntityDropped(item: any): void {
item.file( (file: any) => {
item.file((file: any) => {
this.uploadService.addToQueue([file]);
let path = item.fullPath.replace(item.name, '');
let filePath = this.currentFolderPath + path;
@@ -186,23 +184,14 @@ export class UploadDragAreaComponent {
* @param {FileModel[]} latestFilesAdded - files in the upload queue enriched with status flag and xhr object.
*/
showUndoNotificationBar(latestFilesAdded: FileModel[]) {
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
let messageTranslate: any, actionTranslate: any;
messageTranslate = this.translateService.get('FILE_UPLOAD.MESSAGES.PROGRESS');
actionTranslate = this.translateService.get('FILE_UPLOAD.ACTION.UNDO');
this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
message: messageTranslate.value,
timeout: 3000,
actionHandler: function () {
latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
uploadingFileModel.emitAbort();
});
},
actionText: actionTranslate.value
this.notificationService.openSnackMessageAction(messageTranslate.value, actionTranslate.value, 3000).afterDismissed().subscribe(() => {
latestFilesAdded.forEach((uploadingFileModel: FileModel) => {
uploadingFileModel.emitAbort();
});
});
}
@@ -212,14 +201,7 @@ export class UploadDragAreaComponent {
* @private
*/
showErrorNotificationBar(errorMessage: string) {
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
this.undoNotificationBar.nativeElement.MaterialSnackbar.showSnackbar({
message: errorMessage,
timeout: 3000
});
this.notificationService.openSnackMessage(errorMessage, 3000);
}
/**