#9 document list demo, bug fixes

2026-09-09 18:03:21 +00:00 · 2016-05-24 14:28:09 +01:00
parent b50922787a
commit b59cfab405
9 changed files with 222 additions and 124 deletions
@@ -0,0 +1,20 @@
+{
+    "DOCUMENT_LIST": {
+        "COLUMNS": {
+            "DISPLAY_NAME": "Display name",
+            "CREATED_BY": "Created by",
+            "CREATED_ON": "Created on"
+        },
+        "ACTIONS": {
+            "FOLDER": {
+                "SYSTEM_1": "System folder action 1",
+                "CUSTOM": "Custom folder action"
+            },
+            "DOCUMENT": {
+                "DOWNLOAD": "Download",
+                "SYSTEM_2": "System document action 2",
+                "CUSTOM": "Custom action"
+            }
+        }
+    }
+}
@@ -22,46 +22,41 @@
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

+    <!-- Additional Alfresco libraries -->
+    <script src="node_modules/alfresco-core-rest-api/bundle.js"></script>
+
+    <script>
+        localStorage.setItem('token', 'TICKET_c9c419c7b7f56be3e5ab5f05ae805cd62cb3800e');
+    </script>
+
    <script>
        System.config({
            defaultJSExtensions: true,
            map: {
-                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
-                'ng2-alfresco-upload': 'node_modules/ng2-alfresco-upload',
                'ng2-translate': 'node_modules/ng2-translate',
+                'ng2-alfresco-core': 'node_modules/ng2-alfresco-core',
+                'ng2-alfresco-documentlist': 'node_modules/ng2-alfresco-documentlist',
                'rxjs': 'node_modules/rxjs',
                'angular2' : 'node_modules/angular2',
-                'app': 'dist/src'
+                'app': 'dist'
            },
            packages: {
-                'app': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-core': {
-                    defaultExtension: 'js'
-                },
-                'ng2-alfresco-upload': {
-                    defaultExtension: 'js'
-                },
-                'ng2-translate': {
-                    defaultExtension: 'js'
-                },
-                'rxjs': {
-                    defaultExtension: 'js'
-                },
-                'angular2': {
-                    defaultExtension: 'js'
-                }
+                'app': { format: 'register', defaultExtension: 'js' },
+                'ng2-translate': { defaultExtension: 'js' },
+                'ng2-alfresco-core': { defaultExtension: 'js' },
+                'ng2-alfresco-documentlist': { defaultExtension: 'js' },
+                'rxjs': { defaultExtension: 'js' },
+                'angular2': { defaultExtension: 'js' }
            }
        });

-        System.import('dist/src/my-app').catch(console.log.bind(console));
+        System.import('app/main').catch(console.log.bind(console));
    </script>

 </head>
 <body>

-<my-app></my-app>
+<alfresco-documentlist-demo></alfresco-documentlist-demo>

 </body>
 </html>
@@ -5,28 +5,33 @@
    "author": "Alfresco Software, Ltd.",
    "main": "index.js",
    "scripts": {
-        "postinstall": "npm run build && npm run typings && npm link ng2-alfresco-upload && npm link ng2-alfresco-core",
+        "postinstall": "npm run typings && npm run build",
        "typings": "typings install",
-        "start": "rm -rf dist && npm install && http-server -c-1 -o -p 8875 .",
+        "start": "rm -rf dist && npm install && npm run server",
+        "server": "lite-server",
        "build": "rm -rf dist && tsc"
    },
    "license": "Apache-2.0",
    "dependencies": {
-        "angular2": "2.0.0-beta.13",
+        "angular2": "2.0.0-beta.15",
        "es6-promise": "3.0.2",
        "es6-shim": "0.35.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
-        "zone.js": "0.6.6",
-        "ng2-translate": "^1.11.2",
        "material-design-icons": "^2.2.3",
-        "material-design-lite": "^1.1.3"
+        "material-design-lite": "^1.1.3",
+        "zone.js": "0.6.10",
+        "ng2-translate": "^1.11.3",
+        "alfresco-core-rest-api": "^0.1.0",
+        "ng2-alfresco-core": "^0.1.0",
+        "ng2-alfresco-documentlist": "^0.1.0"
    },
    "devDependencies": {
-        "http-server": "0.8.5",
-        "systemjs": "0.19.17",
-        "typescript": "1.7.5",
-        "typings": "0.6.8"
+        "browser-sync": "^2.10.0",
+        "concurrently": "^2.0.0",
+        "lite-server": "^2.2.0",
+        "typescript": "^1.8.10",
+        "typings": "^0.7.12"
    },
    "keywords": [
        "angular2",
@@ -1,34 +0,0 @@
-///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
-
-/**
- * @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 } from 'angular2/core';
-import { ALFRESCO_ULPOAD_COMPONENT } from 'ng2-alfresco-upload/dist/ng2-alfresco-upload';
-
-@Component({
-    selector: 'my-demo',
-    template: `<alfresco-upload-button [showDialogUpload]="true"
-                                       [showUdoNotificationBar]="true"
-                                       [uploadFolders]="false"
-                                       [multipleFiles]="false">
-               </alfresco-upload-button>`,
-    directives: [ALFRESCO_ULPOAD_COMPONENT]
-})
-export class MyDemoComponent {
-
-}
@@ -0,0 +1,144 @@
+/*!
+ * @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 } from 'angular2/core';
+import { bootstrap } from 'angular2/platform/browser';
+import { HTTP_PROVIDERS } from 'angular2/http';
+
+import {
+    ALFRESCO_CORE_PROVIDERS,
+    AlfrescoSettingsService
+} from 'ng2-alfresco-core/dist/ng2-alfresco-core';
+
+import {
+    DOCUMENT_LIST_DIRECTIVES,
+    DOCUMENT_LIST_PROVIDERS,
+    DocumentActionsService
+} from 'ng2-alfresco-documentlist/dist/ng2-alfresco-documentlist';
+import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';
+
+
+@Component({
+    selector: 'alfresco-documentlist-demo',
+    template: `
+        <div class="container">
+            <alfresco-document-list>
+                <content-columns>
+                    <content-column source="$thumbnail"></content-column>
+                    <content-column
+                            title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+                            source="name"
+                            class="full-width name-column">
+                    </content-column>
+                    <content-column
+                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
+                            source="createdByUser.displayName">
+                    </content-column>
+                    <content-column
+                            title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
+                            source="createdAt">
+                    </content-column>
+                </content-columns>
+                <content-actions>
+                    <!-- folder actions -->
+                    <content-action
+                            target="folder"
+                            type="button"
+                            icon="delete"
+                            handler="system1">
+                    </content-action>
+                    <content-action
+                            target="folder"
+                            type="menu"
+                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
+                            handler="system1">
+                    </content-action>
+                    <content-action
+                            target="folder"
+                            type="menu"
+                            title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
+                            (execute)="myFolderAction1($event)">
+                    </content-action>
+        
+                    <!-- document actions -->
+                    <content-action
+                            target="document"
+                            type="button"
+                            icon="account_circle"
+                            handler="my-handler">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            type="button"
+                            icon="cloud_download"
+                            handler="download">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            type="menu"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
+                            handler="download">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            type="menu"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
+                            handler="system2">
+                    </content-action>
+                    <content-action
+                            target="document"
+                            type="menu"
+                            title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
+                            (execute)="myCustomAction1($event)">
+                    </content-action>
+                </content-actions>
+            </alfresco-document-list>
+        </div>
+    `,
+    styles: [':host > .container {padding: 10px}'],
+    directives: [DOCUMENT_LIST_DIRECTIVES],
+    providers: [DOCUMENT_LIST_PROVIDERS],
+    pipes: [AlfrescoPipeTranslate]
+})
+class DocumentListDemo {
+    constructor(
+        settings: AlfrescoSettingsService,
+        translation: AlfrescoTranslationService,
+        documentActions: DocumentActionsService) {
+
+        settings.host = 'http://192.168.99.100:8080';
+        translation.translationInit();
+        documentActions.setHandler('my-handler', this.myDocumentActionHandler.bind(this));
+    }
+
+    myDocumentActionHandler(obj: any) {
+        window.alert('my custom action handler');
+    }
+
+    myCustomAction1(event) {
+        alert('Custom document action for ' + event.value.displayName);
+    }
+
+    myFolderAction1(event) {
+        alert('Custom folder action for ' + event.value.displayName);
+    }
+}
+
+bootstrap(DocumentListDemo, [
+    HTTP_PROVIDERS,
+    ALFRESCO_CORE_PROVIDERS
+]);
@@ -1,40 +0,0 @@
-/**
- * @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, provide } from 'angular2/core';
-import { bootstrap } from 'angular2/platform/browser';
-import { HTTP_PROVIDERS } from 'angular2/http';
-import { MyDemoComponent } from "./components/my-demo.component";
-import { TranslateLoader, TranslateService } from 'ng2-translate/ng2-translate';
-import { AlfrescoTranslationLoader } from 'ng2-alfresco-core/services';
-
-@Component({
-    selector: 'my-app',
-    template: '<my-demo></my-demo>',
-    directives: [MyDemoComponent]
-})
-class VgDemo {
-    constructor() {
-
-    }
-}
-
-bootstrap(VgDemo, [
-    HTTP_PROVIDERS,
-    provide(TranslateLoader, {useClass: AlfrescoTranslationLoader}),
-    TranslateService
-]);
@@ -1,7 +1,7 @@
 {
    "compilerOptions": {
        "target": "ES5",
-        "module": "commonjs",
+        "module": "system",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
@@ -11,7 +11,9 @@
        "outDir": "dist"
    },
    "exclude": [
+        "dist",
        "node_modules",
-        "typings"
+        "typings/main",
+        "typings/main.d.ts"
    ]
 }
@@ -63,3 +63,16 @@
 :host .breadcrumb > .active {
    color: #777;
 }
+
+/* Utils */
+
+:host .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}
@@ -17,7 +17,7 @@

 import { Injectable } from 'angular2/core';
 import { Http, Response } from 'angular2/http';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs/Rx';
 import { NodePaging, MinimalNodeEntity } from './../models/document-library.model';
 import { AlfrescoSettingsService } from 'ng2-alfresco-core/dist/ng2-alfresco-core';

@@ -29,26 +29,19 @@ declare let AlfrescoApi: any;
@Injectable()
 export class AlfrescoService {

-    private _host: string = 'http://127.0.0.1:8080';
    private _baseUrlPath: string = '/alfresco/api/-default-/public/alfresco/versions/1';

-    constructor(private http: Http,
-                private settings: AlfrescoSettingsService) {
-        if (settings) {
-            this._host = settings.host;
-        }
+    constructor(
+        private http: Http,
+        private settings: AlfrescoSettingsService) {
    }

-    public get host(): string {
-        return this._host;
-    }
-
-    public set host(value: string) {
-        this._host = value;
+    public getHost(): string {
+        return this.settings.host;
    }

    private getBaseUrl(): string {
-        return this.host + this._baseUrlPath;
+        return this.getHost() + this._baseUrlPath;
    }

    private getAlfrescoTicket() {
@@ -105,7 +98,7 @@ export class AlfrescoService {
     * @returns {string} URL address.
     */
    getContentUrl(document: MinimalNodeEntity) {
-        return this._host +
+        return this.getHost() +
            '/alfresco/service/api/node/workspace/SpacesStore/' +
            document.entry.id + '/content';
    }