alfresco-ng2-components/docs/task-attachment-list.component.md
madhukar23 aa8b2a28f3 [ADF-1711] The <adf-task-attachment-list component displays drag-and-drop area that is not working (#2658)
* [ADF-1711] The <adf-task-attachment-list component displays drag-and-drop area that is not working

* Made the drag and drop area working in demo shell for task attachment

* Provided a way to pass custom no content template for drag and drop to the user

* Updated the task-attachment README file for the user to know how to use drag and drop component with task-attachment component

* [ADF-1711] The <adf-task-attachment-list component displays drag-and-drop area that is not working

* Made the drag and drop area working in demo shell for task attachment

* Provided a way to pass custom no content template for drag and drop to the user

* Updated the task-attachment README file for the user to know how to use drag and drop component with task-attachment component
2017-11-21 10:33:56 +00:00

2.6 KiB

Task Attachment List Component

Displays attached documents on a specified task.

task-attachment-list-sample

Basic Usage

<adf-task-attachment-list 
    [taskId]="YOUR_TASK_ID" 
    (attachmentClick)="YOUR_HANDLER">
</adf-task-attachment-list>

If the List is empty, a default no content template is displayed.

default-no-content-template-sample

How to Add Drag and Drop Functionality

If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom no content template as shown below with our component urging the user to drag files to upload whenever the list is empty.

<adf-upload-drag-area
    [parentId]="YOUR_TASK_ID"
    [showNotificationBar]="BOOLEAN">
    <adf-task-attachment-list  
        [taskId]="YOUR_TASK_ID"
        (attachmentClick)="YOUR_HANDLER">
            <div adf-empty-list> //no content template
                <adf-empty-list>
                    <div adf-empty-list-header>{{This List is empty}}</div>
                    <div adf-empty-list-body>{{Drag and drop to upload}}</div>
                    <div adf-empty-list-footer>
                        <img [src]="Your custom image URL"></div> 
                </adf-empty-list>
            </div>
    </adf-task-attachment-list>
</adf-upload-drag-area>

Upload Drag Area Component

If the List is empty, the custom no-content template we passed is displayed.

custom-no-content-drag-drop-template-sample

Properties

Name Type Description
taskId string (required): The ID of the task to display
disabled boolean false

Events

Name Description
attachmentClick Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker
success Raised when the attachment list fetch all the attach and return a list of attachments
error Raised when the attachment list is not able to fetch the attachments for example network error