inteligr8/alfresco-ng2-components

Fork 0

mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00

History

Denys Vuika 1eed604cfe #393 readme updates

2016-07-11 13:17:26 +01:00

assets

lint login and upload

2016-05-12 19:35:41 +01:00

demo

#393 readme update

2016-07-11 12:23:36 +01:00

docs/assets

#393 readme update

2016-07-11 12:23:36 +01:00

src

Fix tslint issues

2016-07-08 12:43:43 +01:00

.editorconfig

karma.conf.js indent cof

2016-06-14 18:36:46 +01:00

.gitignore

Improve 'ng2-alfresco-documentlist' imports

2016-06-15 14:07:26 +01:00

.npmignore

add demo folder to npm

2016-06-03 11:03:23 +01:00

index.ts

#340 Rename 'AlfrescoService' to 'DocumentListService'

2016-07-05 20:30:11 +01:00

karma-test-shim.js

Code cleanup and fixes

2016-07-05 16:19:39 +01:00

karma.conf.js

Code cleanup and fixes

2016-07-05 16:19:39 +01:00

LICENSE

Updated license and package info

2016-04-22 22:48:14 +01:00

package.json

remap also coverage json file

2016-07-08 13:08:16 +01:00

README.md

#393 readme updates

2016-07-11 13:17:26 +01:00

tsconfig.json

fix dependencies and core

2016-05-21 04:25:44 +01:00

tslint.json

add tslint in demo folders

2016-05-24 16:45:57 +01:00

typings.json

Fix typings configuration

2016-06-14 12:36:15 +01:00

README.md

DocumentList Component for Angular 2

Install

npm install --save ng2-alfresco-documentlist

To correctly use this component check that on your machine is running Node version 5.0.0 or higher.

node -v

Dependencies

Add the following dependency to your index.html:

<script src="node_modules/alfresco-js-api/bundle.js"></script>

The following component needs to be added to your systemjs.config.js file:

You can get more details in the example implementation.

Material Design Lite

The style of this component is based on material design, so if you want to visualize it correctly you have to add the material design dependency to your project:

npm install --save material-design-icons material-design-lite

Also make sure you include these dependencies in your index.html file:

<!-- Google Material Design Lite -->
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

Basic usage

<alfresco-document-list
    #documentList
    [currentFolderPath]="currentPath"
    [contextMenuActions]="true"
    [contentActions]="true"
    [multiselect]="true"
    (folderChange)="onFolderChanged($event)">
</alfresco-document-list>

Properties

Name	Type	Default	Description
navigate	boolean	true	Toggle navigation to folder content or file preview
navigationMode	string (click\|dblclick)	dblclick	User interaction for folder navigation or file preview
thumbnails	boolean	false	Show document thumbnails rather than icons
multiselect	boolean	false	Toggle multiselect mode
contentActions	boolean	false	Toggle content actions for each row
contextMenuActions	boolean	false	Toggle context menus for each row

Events

Name	Description
nodeClick	Triggered when user clicks the node
nodeDblClick	Triggered when user double-clicks the node
folderChange	Triggered upon display folder changed
preview	Triggered when document preview is requested either with single or double click

For a complete example source code please refer to DocumentList Demo repository.

DocumentList provides simple breadcrumb element to indicate the current position within a navigation hierarchy.

<alfresco-document-list-breadcrumb
    [target]="documentList">
</alfresco-document-list-breadcrumb>

Parent folder button is not displayed when breadcrumb is enabled.

Custom columns

It is possible to reorder, extend or completely redefine data columns displayed by the component. By default special $thumbnail and displayName columns are rendered.

A custom set of columns can look like the following:

<alfresco-document-list ...>
    <content-columns>
        <content-column key="$thumbnail" type="image"></content-column>
        <content-column 
            title="Name" 
            key="name" 
            sortable="true"
            class="full-width ellipsis-cell">
        </content-column>
        <content-column 
            title="Created By" 
            key="createdByUser.displayName"
            sortable="true"
            class="desktop-only">
        </content-column>
        <content-column 
            title="Created On" 
            key="createdAt" 
            type="date" 
            format="medium"
            sortable="true"
            class="desktop-only">
        </content-column>
    </content-columns>
</alfresco-document-list>

Binding to nested properties is also supported. Assuming you have the node structure similar to following:

{
    "nodeRef": "workspace://SpacesStore/8bb36efb-c26d-4d2b-9199-ab6922f53c28",
    "nodeType": "cm:folder",
    "type": "folder",
    "location": {
        "repositoryId": "552ca13e-458b-4566-9f3e-d0f9c92facff",
        "site": "swsdp",
        "siteTitle": "Sample: Web Site Design Project"
    }
}

the binding value for the Site column to display location site will be location.site:

<alfresco-document-list ...>
    <content-columns>
        <content-column key="$thumbnail" type="image"></content-column>
        <content-column title="Name" key="displayName" class="full-width ellipsis-cell"></content-column>
        <content-column title="Site" key="location.site"></content-column>
    </content-columns>
</alfresco-document-list>

Column definition

HTML attributes:

Name	Type	Default	Description
title	string		Column title
sr-title	string		Screen reader title, used only when `title` is empty
key	string		Column source key, example: `createdByUser.displayName`
sortable	boolean	false	Toggle sorting ability via column header clicks
class	string		CSS class list, example: `full-width ellipsis-cell`
type	string	text	Column type, text\|date\|number
format	string		Value format pattern

For date column type the DatePipe formatting is used. For a full list of available format values please refer to DatePipe documentation.

Actions

DocumentList supports declarative actions for Documents and Folders. Each action can be bound to either default out-of-box handler or a custom behavior. You can define both folder and document actions at the same time.

<alfresco-document-list ...>
    <content-actions>

        <content-action
            target="document"
            title="System action"
            handler="system2">
        </content-action>

        <content-action
            target="document"
            title="Custom action"
            (execute)="myCustomAction1($event)">
        </content-action>

    </content-actions>
</alfresco-document-list>

export class MyView {
    // ...

    myCustomAction1(event) {
        let entry = event.value.entry;
        alert(`Custom document action for ${entry.name}`);
    }
}

All document actions are rendered as a dropdown menu as on the picture below:

Default action handlers

The following action handlers are provided out-of-box:

Download (document)
Delete (document, folder)

All system handler names are case-insensitive, handler="download" and handler="DOWNLOAD" will trigger the same download action.

Download

Initiates download of the corresponding document file.

<alfresco-document-list ...>
    <content-actions>

        <content-action
            target="document"
            title="Download"
            handler="download">
        </content-action>

    </content-actions>
</alfresco-document-list>

Folder actions

Folder actions have the same declaration as document actions except taget="folder" attribute value.

<alfresco-document-list ...>
    <content-actions>

        <content-action
            target="folder"
            title="Default folder action 1"
            handler="system1">
        </content-action>

        <content-action
            target="folder"
            title="Custom folder action"
            (execute)="myFolderAction1($event)">
        </content-action>

    </content-actions>
</alfresco-document-list>

export class MyView {
    // ...

    myFolderAction1(event) {
        let entry = event.value.entry;
        alert(`Custom folder action for ${entry.name}`);
    }
}

DocumentList also provide integration for 'Context Menu Service' from the ng2-alfresco-core library.

You can automatically turn all menu actions (for the files and folders) into context menu items like shown below:

Enabling context menu is very simple:

import {
    CONTEXT_MENU_DIRECTIVES,
    CONTEXT_MENU_PROVIDERS
} from 'ng2-alfresco-core';

import {
    DOCUMENT_LIST_DIRECTIVES,
    DOCUMENT_LIST_PROVIDERS
} from 'ng2-alfresco-documentlist';

@Component({
    selector: 'my-view',
    template: `
        <alfresco-document-list>...</alfresco-document-list>
        <context-menu-holder></context-menu-holder>
    `,
    directives: [DOCUMENT_LIST_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
    providers: [DOCUMENT_LIST_PROVIDERS, CONTEXT_MENU_PROVIDERS]
})
export class MyView {
}

This enables context menu items for documents and folders.

By default DocumentList component uses 'double-click' mode for navigation. That means user will see the contents of the folder by double-clicking its name or icon (similar to Google Drive behaviour). However it is possible switching to other modes, like single-click navigation for example.

The following navigation modes are supported:

click
dblclick

The following example switches navigation to single clicks:

<alfresco-document-list [navigationMode]="'click'">
</alfresco-document-list>

Events

DocumentList emits the following events:

Name	Description
nodeClick	emitted when user clicks a list node
nodeDblClick	emitted when user double-clicks list node
folderChange	emitted once current display folder has changed
preview	emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration

Advanced usage and customization

Hiding columns on small screens

You can hide columns on small screens by means of custom CSS rules:

@media all and (max-width: 768px) {

    alfresco-document-list >>> th.desktop-only .cell-value {
        display: none;
    }

    alfresco-document-list >>> td.desktop-only .cell-value {
        display: none;
    }
}

Now you can declare columns and assign desktop-only class where needed:

<alfresco-document-list ...>
    <content-columns>
        
        <!-- always visible columns -->
        
        <content-column key="$thumbnail" type="image"></content-column>
        <content-column 
                title="Name" 
                key="name" 
                class="full-width ellipsis-cell">
        </content-column>
        
        <!-- desktop-only columns -->
        
        <content-column
                title="Created by"
                key="createdByUser.displayName"
                class="desktop-only">
        </content-column>
        <content-column
                title="Created on"
                key="createdAt"
                type="date"
                format="medium"
                class="desktop-only">
        </content-column>
    </content-columns>
</alfresco-document-list>

Desktop View

Mobile View

Custom 'empty folder' template

By default DocumentList provides the following content for the empty folder:

This can be changed by means of the custom html template:

<alfresco-document-list ...>
    <empty-folder-content>
        <template>
            <h1>Sorry, no content here</h1>
        </template>
    </empty-folder-content>
</alfresco-document-list>

That will give the following output:

Customizing default actions

It is possible extending or replacing the list of available system actions for documents and folders. Actions for the documents and folders can be accessed via the following services:

DocumentActionsService, document action menu and quick document actions
FolderActionsService, folder action menu and quick folder actions

Example below demonstrates how a new action handler can be registered with the DocumentActionsService.

<alfresco-document-list ...>
    <content-actions>

        <content-action
            target="document"
            title="My action"
            handler="my-handler">
        </content-action>

    </content-actions>
</alfresco-document-list>

You register custom handler called my-handler that will be executing myDocumentActionHandler function each time upon being invoked.

import {
    DocumentActionsService
} from 'ng2-alfresco-documentlist';

export class MyView {

    constructor(documentActions: DocumentActionsService) {
        documentActions.setHandler(
            'my-handler',
            this.myDocumentActionHandler.bind(this)
        );
    }

    myDocumentActionHandler(obj: any) {
        window.alert('my custom action handler');
    }
}

The same approach allows changing the way out-of-box action handlers behave. Registering custom action with the name download replaces default one:

export class MyView {

    constructor(documentActions: DocumentActionsService) {
        documentActions.setHandler(
            'download',
            this.customDownloadBehavior.bind(this)
        );
    }

    customDownloadBehavior(obj: any) {
        window.alert('my custom download behavior');
    }
}

Typically you may want populating all your custom actions at the application root level or by means of custom application service.

Build from sources

You can build component from sources with the following commands:

npm install
npm run build

Build the files and keep watching for changes

$ npm run build:w

Running unit tests

npm test

Running unit tests in browser

npm test-browser

This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

Code coverage

npm run coverage

README.md

DocumentList Component for Angular 2

Install

Dependencies

Material Design Lite

Basic usage

Properties

Events

Custom columns

Column definition

Actions

Menu actions

Default action handlers

Download

Folder actions

Context Menu

Navigation mode

Events

Advanced usage and customization

Hiding columns on small screens

Custom 'empty folder' template

Customizing default actions

Build from sources

Build the files and keep watching for changes

Running unit tests

Running unit tests in browser

Code coverage

README.md

DocumentList Component for Angular 2

Install

Dependencies

Material Design Lite

Basic usage

Properties

Events

Breadcrumb

Custom columns

Column definition

Actions

Menu actions

Default action handlers

Download

Folder actions

Context Menu

Navigation mode

Events

Advanced usage and customization

Hiding columns on small screens

Custom 'empty folder' template

Customizing default actions

Build from sources

Build the files and keep watching for changes

Running unit tests

Running unit tests in browser

Code coverage