Add new attached-file widget for linking to external files

Refs #621
2025-07-31 17:38:48 +00:00 · 2016-08-25 18:10:59 -04:00
parent 696f9c3619
commit 3d345da616
14 changed files with 381 additions and 6 deletions
--- a/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts
@@ -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;
+    }
+
+}