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

Add new attached-file widget for linking to external files

Browse Source 
Refs #621
This commit is contained in:
Will Abson 2016-08-25 18:10:59 -04:00
parent 696f9c3619
commit 3d345da616
14 changed files with 381 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-activiti-form/src/components/activiti-form.component.spec.ts
View File

@ -40,7 +40,7 @@ describe('ActivitiForm', () => {
]);
window['componentHandler'] = componentHandler;
formService = new FormService(null, null);
formService = new FormService(null, null, null, null);
formComponent = new ActivitiForm(formService, visibilityService, null, null);
});

17
ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.css Normal file
View File

@ -0,0 +1,17 @@
.attach-widget {
width:100%
}
.attach-widget__icon {
float: left;
}
.attach-widget__file {
/*float: left;*/
margin-top: 4px;
}
.attach-widget__reset {
/*float: left;*/
margin-top: 4px;
}

33
ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.html Normal file
View File

@ -0,0 +1,33 @@
<div class="attach-widget">
<label [attr.for]="field.id">{{field.name}}</label>
<div>
<span *ngIf="hasFile" class="attach-widget__file">{{getLinkedFileName()}}</span>
<button #browseFile (click)="showDialog();" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__browser">
<i class="material-icons">image</i>
Browse {{selectedFolderSiteName}}
</button>
<button *ngIf="hasFile" (click)="reset(file);" class="mdl-button mdl-js-button mdl-js-ripple-effect attach-widget__reset">Clear</button>
</div>
</div>
<dialog class="mdl-dialog" #dialog>
<h4 class="mdl-dialog__title">Select content</h4>
<div class="mdl-dialog__content">
<ul class='mdl-list'>
<li class="mdl-list__item" *ngFor="let node of selectedFolderNodes">
<span class="mdl-list__item-primary-content" *ngIf="node.folder">
<i class="material-icons mdl-list__item-icon">folder</i>
<a (click)="selectFolder(node, $event)">{{node.title}}</a>
</span>
<span class="mdl-list__item-primary-content" *ngIf="!node.folder">
<i class="material-icons mdl-list__item-icon">description</i>
<a (click)="selectFile(node, $event)">{{node.title}}</a>
</span>
</li>
</ul>
</div>
<div class="mdl-dialog__actions">
<button type="button" (click)="cancel()" class="mdl-button close">Cancel</button>
</div>
</dialog>

147
ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts Normal file
View File

@ -0,0 +1,147 @@
/*!
* @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 { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { FormService } from '../../../services/form.service';
import { ExternalContent } from '../core/external-content';
import { ExternalContentLink } from '../core/external-content-link';
import { FormFieldModel } from '../core/form-field.model';
declare let __moduleName: string;
declare var componentHandler;
@Component({
moduleId: __moduleName,
selector: 'attach-widget',
templateUrl: './attach.widget.html',
styleUrls: ['./attach.widget.css']
})
export class AttachWidget extends WidgetComponent implements OnInit {
selectedFolderPathId: string;
selectedFolderSiteId: string;
selectedFolderSiteName: string;
selectedFolderAccountId: string;
fileName: string;
hasFile: boolean;
selectedFolderNodes: [ExternalContent];
selectedFile: ExternalContent;
@Input()
field: FormFieldModel;
@Output()
fieldChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
@ViewChild('dialog')
dialog: any;
constructor(private formService: FormService) {
super();
}
ngOnInit() {
console.log('init', this.field);
if (this.field &&
this.field.value) {
this.hasFile = true;
}
if (this.field &&
this.field.params &&
this.field.params.fileSource &&
this.field.params.fileSource.selectedFolder) {
this.selectedFolderSiteId = this.field.params.fileSource.selectedFolder.siteId;
this.selectedFolderSiteName = this.field.params.fileSource.selectedFolder.site;
this.setupFileBrowser();
this.getExternalContentNodes();
}
}
private setupFileBrowser() {
this.selectedFolderPathId = this.field.params.fileSource.selectedFolder.pathId;
this.selectedFolderAccountId = this.field.params.fileSource.selectedFolder.accountId;
}
getLinkedFileName(): string {
let result = this.fileName;
if (this.selectedFile &&
this.selectedFile.title) {
result = this.selectedFile.title;
}
if (this.field.value &&
this.field.value.length > 0 &&
this.field.value[0].name) {
result = this.field.value[0].name;
}
return result;
}
private getExternalContentNodes() {
this.formService.getAlfrescoNodes(this.selectedFolderAccountId, this.selectedFolderPathId)
.subscribe(
(nodes) => {
this.selectedFolderNodes = nodes;
},
error => console.error(error));
}
selectFile(node: ExternalContent, $event: any) {
this.formService.linkAlfrescoNode(this.selectedFolderAccountId, node, this.selectedFolderSiteId).subscribe(
(link: ExternalContentLink) => {
this.selectedFile = node;
this.field.value = [link];
this.field.json.value = [link];
this.closeDialog();
this.fieldChanged.emit(this.field);
}
);
}
selectFolder(node: ExternalContent, $event: any) {
this.selectedFolderPathId = node.id;
this.getExternalContentNodes();
}
public showDialog() {
this.setupFileBrowser();
this.getExternalContentNodes();
if (this.dialog) {
this.dialog.nativeElement.showModal();
}
}
private closeDialog() {
if (this.dialog) {
this.dialog.nativeElement.close();
}
}
public cancel() {
this.closeDialog();
}
reset() {
this.field.value = null;
this.field.json.value = null;
this.hasFile = false;
}
}

3
ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html
View File

@ -44,7 +44,8 @@
<display-text-widget [field]="field" (fieldChanged)="fieldChanged($event);"></display-text-widget>
</div>
<div *ngSwitchCase="'upload'">
<upload-widget [field]="field" (fieldChanged)="fieldChanged($event);"></upload-widget>
<upload-widget *ngIf="!field.params.link" [field]="field" (fieldChanged)="fieldChanged($event);"></upload-widget>
<attach-widget *ngIf="field.params.link" [field]="field" (fieldChanged)="fieldChanged($event);"></attach-widget>
</div>
<div *ngSwitchCase="'typeahead'">
<typeahead-widget [field]="field" (fieldChanged)="fieldChanged($event);"></typeahead-widget>

32
ng2-components/ng2-activiti-form/src/components/widgets/core/external-content-link.ts Normal file
View File

@ -0,0 +1,32 @@
/*!
* @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 interface ExternalContentLink {
contentAvailable: boolean;
created: string;
createdBy: any;
id: number;
link: boolean;
mimeType: string;
name: string;
previewStatus: string;
relatedContent: boolean;
simpleType: string;
source: string;
sourceId: string;
thumbnailStatus: string;
}

23
ng2-components/ng2-activiti-form/src/components/widgets/core/external-content.ts Normal file
View File

@ -0,0 +1,23 @@
/*!
* @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 interface ExternalContent {
folder: boolean;
id: string;
simpleType: string;
title: string;
}

25
ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-file-source.ts Normal file
View File

@ -0,0 +1,25 @@
/*!
* @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 {FormFieldSelectedFolder} from './form-field-selected-folder';
export interface FormFieldFileSource {
metadataAllowed: boolean;
name: string;
selectedFolder: FormFieldSelectedFolder;
serviceId: string;
}

4
ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-metadata.ts
View File

@ -15,6 +15,10 @@
* limitations under the License.
*/
import {FormFieldFileSource} from './form-field-file-source';
export interface FormFieldMetadata {
[key: string]: any;
fileSource?: FormFieldFileSource;
link?: boolean;
}

25
ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-selected-folder.ts Normal file
View File

@ -0,0 +1,25 @@
/*!
* @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 interface FormFieldSelectedFolder {
accountId: string;
folderTree: [any];
path: string;
pathId: string;
site: string;
siteId: string;
}

2
ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.spec.ts
View File

@ -28,7 +28,7 @@ describe('DropdownWidget', () => {
let widget: DropdownWidget;
beforeEach(() => {
formService = new FormService(null, null);
formService = new FormService(null, null, null, null);
widget = new DropdownWidget(formService);
widget.field = new FormFieldModel(new FormModel());
});

3
ng2-components/ng2-activiti-form/src/components/widgets/index.ts
View File

@ -28,6 +28,7 @@ import { RadioButtonsWidget } from './radio-buttons/radio-buttons.widget';
import { DisplayValueWidget } from './display-value/display-value.widget';
import { DisplayTextWidget } from './display-text/display-text.widget';
import { UploadWidget } from './upload/upload.widget';
import { AttachWidget } from './attach/attach.widget';
import { TypeaheadWidget } from './typeahead/typeahead.widget';
import { FunctionalGroupWidget } from './functional-group/functional-group.widget';
import { PeopleWidget } from './people/people.widget';
@ -51,6 +52,7 @@ export * from './radio-buttons/radio-buttons.widget';
export * from './display-value/display-value.widget';
export * from './display-text/display-text.widget';
export * from './upload/upload.widget';
export * from './attach/attach.widget';
export * from './typeahead/typeahead.widget';
export * from './functional-group/functional-group.widget';
export * from './people/people.widget';
@ -71,6 +73,7 @@ export const PRIMITIVE_WIDGET_DIRECTIVES: [any] = [
DisplayValueWidget,
DisplayTextWidget,
UploadWidget,
AttachWidget,
TypeaheadWidget,
FunctionalGroupWidget,
PeopleWidget

2
ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts
View File

@ -29,7 +29,7 @@ describe('TypeaheadWidget', () => {
let widget: TypeaheadWidget;
beforeEach(() => {
formService = new FormService(null, null);
formService = new FormService(null, null, null, null);
widget = new TypeaheadWidget(formService);
widget.field = new FormFieldModel(new FormModel());
});

69
ng2-components/ng2-activiti-form/src/services/form.service.ts
View File

@ -17,13 +17,17 @@
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { AlfrescoApiService } from 'ng2-alfresco-core';
import 'rxjs/add/operator/map';
import { AlfrescoApiService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { FormValues } from './../components/widgets/core/index';
import { FormDefinitionModel } from '../models/form-definition.model';
import { EcmModelService } from './ecm-model.service';
import { GroupModel } from './../components/widgets/core/group.model';
import { GroupUserModel } from './../components/widgets/core/group-user.model';
import { ExternalContent } from '../components/widgets/core/external-content';
import { ExternalContentLink } from '../components/widgets/core/external-content-link';
import {Http, Response, RequestOptions, Headers} from '@angular/http';
@Injectable()
export class FormService {
@ -31,7 +35,8 @@ export class FormService {
static GENERIC_ERROR_MESSAGE: string = 'Server error';
constructor(private ecmModelService: EcmModelService,
private apiService: AlfrescoApiService) {
private apiService: AlfrescoApiService,
private alfrescoSettingsService: AlfrescoSettingsService, private http: Http) {
}
/**
@ -273,6 +278,66 @@ export class FormService {
});
}
/**
* Returns a list of child nodes below the specified folder
*
* @param accountId
* @param nodeId
* @returns {null}
*/
getAlfrescoNodes(accountId: string, nodeId: string): Observable<[ExternalContent]> {
let accountPath = accountId.replace('-', '/');
let headers = new Headers();
headers.append('Authorization', this.authService.getTicketBpm());
return this.http.get(
`${this.alfrescoSettingsService.bpmHost}/activiti-app/` +
`app/rest/integration/${accountPath}/folders/${nodeId}/content`,
new RequestOptions({
headers: headers,
withCredentials: true
}))
.map(this.extractData)
.catch(this.handleError);
}
/**
* Returns a list of child nodes below the specified folder
*
* @param accountId
* @param node
* @param siteId
* @returns {null}
*/
linkAlfrescoNode(accountId: string, node: ExternalContent, siteId: string): Observable<ExternalContentLink> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', this.authService.getTicketBpm());
return this.http.post(
`${this.alfrescoSettingsService.bpmHost}/activiti-app/app/rest/content`,
JSON.stringify({
link: true,
name: node.title,
simpleType: node.simpleType,
source: accountId,
sourceId: node.id + '@' + siteId
}),
new RequestOptions({
headers: headers,
withCredentials: true
}))
.map(this.extractBody)
.catch(this.handleError);
}
private extractBody(res: Response) {
let body = res.json();
return body || { };
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
getFormId(res: any) {
let result = null;