[ADF-2054] Created a new widget to handle uploading file from Share (#2810)

* [ADF-2054] start creating custom upload widget for share integration

* [ADF-2054] changed content node selector service to allow different opening approach

* [ADF-2054] addedd support for multi resource files

* [ADF-2054] fixed base case for upload when only local files are selected

* [ADF-2054] start adding and fixing tests for new share attach button widget

* [ADF-2054] changed test to perfrom a correct check

* [ADF-2054] removed fdescribe

* [ADF-2054] added test for share-widget component

* [ADF-2054] added peer reviews changes

* [ADF-2054] created a module folder for content widgets

* [ADF-2054] fixed wrong import

* [ADF-2054] fixed rebase errors

* [ADF-2054] restored some files changed by rebase

* [ADF-2054] added link to content services to fix packaging issue

* [ADF-2054] renamed widget
This commit is contained in:
Vito
2018-01-12 14:28:18 +01:00
committed by Eugenio Romano
parent 69e40ea1c0
commit 46ad98cd8b
37 changed files with 886 additions and 597 deletions

View File

@@ -0,0 +1,83 @@
<div class="adf-attach-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name}}
<span *ngIf="isRequired()">*</span>
</label>
<div class="adf-attach-widget-container">
<div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">
<a mat-raised-button color="primary">
{{ 'FORM.FIELD.UPLOAD' | translate }}
<mat-icon>file_upload</mat-icon>
<input #uploadFiles
[multiple]="multipleOption"
type="file"
[id]="field.id"
(change)="onFileChanged($event)" />
</a>
</div>
<div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
{{ 'FORM.FIELD.UPLOAD' | translate }}
<mat-icon>attach_file</mat-icon>
</button>
<mat-menu #menu="matMenu" class="adf-attach-widget__menu-content">
<button mat-menu-item (click)="uploadFile.click()"
id="attach-local-file"
*ngIf="isAllFileSourceSelected()">
From HD
<mat-icon>file_upload</mat-icon>
<input #uploadFile
class="adf-attach-widget__input-type"
[multiple]="multipleOption"
type="file"
[id]="field.id"
(change)="onFileChanged($event)" />
</button>
<button mat-menu-item
*ngIf="isDefinedSourceFolder()"
id="attach-{{field.params?.fileSource?.name}}"
(click)="openSelectDialogFromFileSource()">
From {{field.params?.fileSource?.name}}
<mat-icon>
<img class="adf-attach-widget__image-logo" [src]="alfrescoLogoUrl">
</mat-icon>
</button>
<div *ngIf="!isDefinedSourceFolder()">
<button mat-menu-item *ngFor="let repo of repositoryList"
id="attach-{{repo?.name}}"
(click)="openSelectDialog(repo.id, repo.name)">
From {{repo.name}}
<mat-icon>
<img class="adf-attach-widget__image-logo" [src]="alfrescoLogoUrl">
</mat-icon>
</button>
</div>
</mat-menu>
</div>
</div>
</div>
<div id="adf-attach-widget-readonly-list">
<mat-list *ngIf="hasFile">
<mat-list-item class="adf-attach-files-row" *ngFor="let file of field.value">
<img mat-list-icon class="adf-attach-widget__icon"
[id]="'file-'+file.id+'-icon'"
[src]="getIcon(file.mimeType)"
[alt]="mimeTypeIcon"
(click)="fileClicked(file)"
(keyup.enter)="fileClicked(file)"
role="button"
tabindex="0"/>
<span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
role="button" tabindex="0" class="adf-file">{{file.name}}</span>
<button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
(click)="removeFile(file);" (keyup.enter)="removeFile(file);">
<mat-icon class="mat-24">highlight_off</mat-icon>
</button>
</mat-list-item>
</mat-list>
</div>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

View File

@@ -0,0 +1,73 @@
.adf {
&-attach-widget-container {
margin-bottom: 15px;
display: flex;
align-items: center;
input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
}
&-attach-widget__menu-upload {
display: flex;
align-items: center;
}
&-attach-widget__input-type {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
&-attach-widget__image-logo{
padding-left: 5px;
}
&-attach-widget-repo-button{
padding-left: 10px;
.mat-button-wrapper {
display: inline;
}
.mat-mini-fab.mat-accent {
background-color: inherit;
}
}
&-attach-widget {
width: 100%;
word-break: break-all;
padding: 0.4375em 0;
border-top: 0.84375em solid transparent;
}
&-attach-widget__icon {
padding: 6px;
float: left;
cursor: pointer;
}
&-attach-widget__reset {
margin-top: -2px;
}
&-attach-files-row {
.mat-line {
margin-bottom: 0px;
}
}
}

View File

@@ -0,0 +1,142 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* tslint:disable:component-selector */
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import {
baseHost,
UploadWidgetComponent,
FormService,
LogService,
ThumbnailService,
ProcessContentService,
ActivitiContentService
} from '@alfresco/adf-core';
import { ContentNodeDialogService } from '@alfresco/adf-content-services';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'attach-widget',
templateUrl: './attach-file-widget.component.html',
styleUrls: ['./attach-file-widget.component.scss'],
host: baseHost,
encapsulation: ViewEncapsulation.None
})
export class AttachFileWidgetComponent extends UploadWidgetComponent implements OnInit {
alfrescoLogoUrl: string = '../assets/images/alfresco-flower.svg';
repositoryList = [];
constructor(
public formService: FormService,
private logger: LogService,
public thumbnails: ThumbnailService,
public processContentService: ProcessContentService,
private activitiContentService: ActivitiContentService,
private contentDialog: ContentNodeDialogService) {
super(formService, logger, thumbnails, processContentService);
}
ngOnInit() {
if (this.field &&
this.field.value &&
this.field.value.length > 0) {
this.hasFile = true;
}
this.getMultipleFileParam();
this.activitiContentService.getAlfrescoRepositories(null, true).subscribe((repoList) => {
this.repositoryList = repoList;
});
}
isFileSourceConfigured(): boolean {
return !!this.field.params && !!this.field.params.fileSource;
}
isMultipleSourceUpload() {
return !this.field.readOnly && this.isFileSourceConfigured() && !this.isOnlyLocalSourceSelected();
}
isAllFileSourceSelected() {
return this.field.params &&
this.field.params.fileSource &&
this.field.params.fileSource.serviceId === 'all-file-sources';
}
isOnlyLocalSourceSelected() {
return this.field.params &&
this.field.params.fileSource &&
this.field.params.fileSource.serviceId === 'local-file';
}
isSimpleUploadButton() {
return this.isUploadButtonVisible() &&
!this.isFileSourceConfigured() ||
this.isOnlyLocalSourceSelected();
}
isUploadButtonVisible() {
return (!this.hasFile || this.multipleOption) && !this.field.readOnly;
}
isDefinedSourceFolder() {
return !!this.field.params &&
!!this.field.params.fileSource &&
!!this.field.params.fileSource.selectedFolder;
}
openSelectDialogFromFileSource() {
let params = this.field.params;
if (this.isDefinedSourceFolder()) {
this.contentDialog.openFileBrowseDialogByFolderId(params.fileSource.selectedFolder.pathId).subscribe(
(selections: MinimalNodeEntryEntity[]) => {
this.uploadFileFromShare(selections,
this.field.params.fileSource.selectedFolder.accountId,
this.field.params.fileSource.selectedFolder.siteId);
});
}
}
openSelectDialog(repoId: string, repoName: string) {
const accountIdentifier = 'alfresco-' + repoId + repoName;
this.contentDialog.openFileBrowseDialogBySite().subscribe(
(selections: MinimalNodeEntryEntity[]) => {
this.uploadFileFromShare(selections, accountIdentifier);
});
}
private uploadFileFromShare(fileNodeList: MinimalNodeEntryEntity[], accountId: string, siteId?: string) {
let filesSaved = [];
Observable.from(fileNodeList)
.mergeMap(node =>
this.activitiContentService.applyAlfrescoNode(node,
siteId,
accountId)
).subscribe((res) => {
filesSaved.push(res);
},
(error) => { this.logger.error(error); },
() => {
this.field.value = filesSaved;
this.field.json.value = filesSaved;
});
this.hasFile = true;
}
}

View File

@@ -0,0 +1,243 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { AttachFileWidgetComponent } from './attach-file-widget.component';
import {
FormFieldModel,
FormModel,
FormFieldTypes,
FormService,
ProcessContentService,
ActivitiContentService,
AlfrescoApiService,
LogService,
ThumbnailService,
SitesService,
FormFieldMetadata
} from '@alfresco/adf-core';
import { ContentNodeDialogService, DocumentListService } from '@alfresco/adf-content-services';
import { MaterialModule } from '../material.module';
import { Observable } from 'rxjs/Observable';
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
const fakeRepositoryListAnswer = [
{
'authorized': true,
'serviceId': 'alfresco-9999-SHAREME',
'metaDataAllowed': true,
'name': 'SHAREME'
},
{
'authorized': true,
'serviceId': 'alfresco-0000-GOKUSHARE',
'metaDataAllowed': true,
'name': 'GOKUSHARE'
}];
const onlyLocalParams = {
fileSource : {
serviceId: 'local-file'
}
};
const allSourceParams = {
fileSource : {
serviceId: 'all-file-sources'
}
};
const definedSourceParams = {
fileSource : {
serviceId: 'goku-sources',
name: 'pippo-baudo',
selectedFolder: {
accountId: 'goku-share-account-id'
}
}
};
const fakeMinimalNode: MinimalNodeEntryEntity = <MinimalNodeEntryEntity> {
id: 'fake',
name: 'fake-name'
};
const fakePngAnswer = {
'id': 1155,
'name': 'a_png_file.png',
'created': '2017-07-25T17:17:37.099Z',
'createdBy': {'id': 1001, 'firstName': 'Admin', 'lastName': 'admin', 'email': 'admin'},
'relatedContent': false,
'contentAvailable': true,
'link': false,
'mimeType': 'image/png',
'simpleType': 'image',
'previewStatus': 'queued',
'thumbnailStatus': 'queued'
};
describe('AttachFileWidgetComponent', () => {
let widget: AttachFileWidgetComponent;
let fixture: ComponentFixture<AttachFileWidgetComponent>;
let element: HTMLInputElement;
let activitiContentService: ActivitiContentService;
let contentNodeDialogService: ContentNodeDialogService;
let processContentService: ProcessContentService;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [MaterialModule],
declarations: [AttachFileWidgetComponent],
providers: [
FormService,
ProcessContentService,
ThumbnailService,
ActivitiContentService,
AlfrescoApiService,
LogService,
SitesService,
DocumentListService,
ContentNodeDialogService
]
}).compileComponents().then(() => {
fixture = TestBed.createComponent(AttachFileWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
activitiContentService = TestBed.get(ActivitiContentService);
contentNodeDialogService = TestBed.get(ContentNodeDialogService);
processContentService = TestBed.get(ProcessContentService);
});
}));
afterEach(() => {
fixture.destroy();
});
it('should be able to create the widget', () => {
expect(widget).not.toBeNull();
});
it('should show up as simple upload when is configured for only local files', () => {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'simple-upload-button';
widget.field.params = <FormFieldMetadata> onlyLocalParams;
fixture.detectChanges();
expect(element.querySelector('#simple-upload-button')).not.toBeNull();
});
it('should show up all the repository option on menu list', () => {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'attach-file-attach';
widget.field.params = <FormFieldMetadata> allSourceParams;
spyOn(activitiContentService, 'getAlfrescoRepositories').and.returnValue(Observable.of(fakeRepositoryListAnswer));
fixture.detectChanges();
let attachButton: HTMLButtonElement = element.querySelector('#attach-file-attach');
expect(attachButton).not.toBeNull();
attachButton.click();
fixture.detectChanges();
expect(fixture.debugElement.queryAll(By.css('#attach-local-file'))).not.toBeNull();
expect(fixture.debugElement.queryAll(By.css('#attach-local-file'))).not.toBeUndefined();
expect(fixture.debugElement.queryAll(By.css('#attach-SHAREME'))).not.toBeNull();
expect(fixture.debugElement.queryAll(By.css('#attach-SHAREME'))).not.toBeUndefined();
expect(fixture.debugElement.queryAll(By.css('#attach-GOKUSHARE'))).not.toBeNull();
expect(fixture.debugElement.queryAll(By.css('#attach-GOKUSHARE'))).not.toBeUndefined();
});
it('should be able to upload files coming from content node selector', () => {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'attach-file-attach';
widget.field.params = <FormFieldMetadata> allSourceParams;
spyOn(activitiContentService, 'getAlfrescoRepositories').and.returnValue(Observable.of(fakeRepositoryListAnswer));
spyOn(activitiContentService, 'applyAlfrescoNode').and.returnValue(Observable.of(fakePngAnswer));
spyOn(contentNodeDialogService, 'openFileBrowseDialogBySite').and.returnValue(Observable.of([fakeMinimalNode]));
fixture.detectChanges();
let attachButton: HTMLButtonElement = element.querySelector('#attach-file-attach');
expect(attachButton).not.toBeNull();
attachButton.click();
fixture.detectChanges();
fixture.debugElement.query(By.css('#attach-SHAREME')).nativeElement.click();
fixture.detectChanges();
expect(element.querySelector('#file-1155-icon')).not.toBeNull();
});
it('should be able to upload files when a defined folder is selected', () => {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'attach-file-attach';
widget.field.params = <FormFieldMetadata> definedSourceParams;
spyOn(activitiContentService, 'getAlfrescoRepositories').and.returnValue(Observable.of(fakeRepositoryListAnswer));
spyOn(activitiContentService, 'applyAlfrescoNode').and.returnValue(Observable.of(fakePngAnswer));
spyOn(contentNodeDialogService, 'openFileBrowseDialogByFolderId').and.returnValue(Observable.of([fakeMinimalNode]));
fixture.detectChanges();
let attachButton: HTMLButtonElement = element.querySelector('#attach-file-attach');
expect(attachButton).not.toBeNull();
attachButton.click();
fixture.detectChanges();
fixture.debugElement.query(By.css('#attach-pippo-baudo')).nativeElement.click();
fixture.detectChanges();
expect(element.querySelector('#file-1155-icon')).not.toBeNull();
});
it('should be able to upload files from local source', () => {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: []
});
widget.field.id = 'attach-file-attach';
widget.field.params = <FormFieldMetadata> onlyLocalParams;
spyOn(processContentService, 'createTemporaryRawRelatedContent').and.returnValue(Observable.of(fakePngAnswer));
fixture.detectChanges();
let inputDebugElement = fixture.debugElement.query(By.css('#attach-file-attach'));
inputDebugElement.triggerEventHandler('change', {target: {files: [fakePngAnswer]}});
fixture.detectChanges();
expect(element.querySelector('#file-1155-icon')).not.toBeNull();
});
it('should display file list when field has value', () => {
widget.field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.UPLOAD,
value: [fakePngAnswer]
});
widget.field.id = 'attach-file-attach';
widget.field.params = <FormFieldMetadata> onlyLocalParams;
fixture.detectChanges();
expect(element.querySelector('#file-1155-icon')).not.toBeNull();
});
});

View File

@@ -0,0 +1,48 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { MaterialModule } from '../material.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataColumnModule, DataTableModule, FormModule } from '@alfresco/adf-core';
import { AttachFileWidgetComponent } from './attach-file-widget.component';
@NgModule({
imports: [
DataColumnModule,
DataTableModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
CommonModule,
TranslateModule,
FormModule
],
entryComponents: [
AttachFileWidgetComponent
],
declarations: [
AttachFileWidgetComponent
],
exports: [
AttachFileWidgetComponent
]
})
export class ContentWidgetModule {}

View File

@@ -0,0 +1,18 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './public-api';

View File

@@ -0,0 +1,18 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export * from './attach-file-widget.component';