alfresco/alfresco-ng2-components

Alfresco Angular Components

Alfresco Application Development Framework (ADF)

Introduction

See the introduction page in our documentation for an overview of ADF along with links to useful starting points.

Prerequisites

Node: 18.x
NPM: 9.x

Also, check out the tutorial Creating your first ADF Application for full details on what you may need to install before using ADF.

See also

• Node Version Manager
• CORS guide

Components

You can find the sources for all ADF components in the lib folder.

Libraries

ADF Libraries list:

• Content services
• Core
• Extensions
• Insights
• Process Service Cloud
• Process service
• Stories

Demo Application

A separate application showcasing integration of components can be found here. The app has examples of basic interaction for both APS and ACS components.

Application generator for Yeoman

To speed up the development, you can use the Generator for Yeoman.

Browser Support

All components are supported in the following browsers:

Browser	Version
Chrome	Latest
Safari	Latest
Firefox	Latest
Edge	Latest

alfresco-ng2-components's Issues

Investigate Web Components

Investigate ability creating web components and integrating them with Angular 2

• raise and bind events
• bind properties

Login component

Configurable login component that supports basic authentication and ticket authentication.

Acceptance criteria

• Must support multiple authentication mechanisms (basic auth and ticket initially)
• Login form and page must be themeable
• Logout

Investigate Appium for mobile testing

Spike automation testing framework

We want to investigate the best framework to test our components.

Add the definition of done to the Wiki

Login Component

• #17 Angular 2 Component

Document List component

A configurable component that renders a list of documents and folders.

Acceptance criteria

• Ability to add/remove action buttons and drop downs
• Configurable actions (what happens when you click a document?)
• Configurable columns (document title/name, thumbnail, creation date, modified date, creator, size)
• Support anchor/URL based navigation
• Serve as a drop zone for drag'n'drop upload
• Ability to sort the list

Requirements that may be separate components

• Support pagination (might be a separate component?)
• Breadcrumb (clickable navigation path showing path from top to current location)
• Ability to create a custom rendition of the list (simple list, table view, gallery view, filmstrip view)

test 4

test 4

Implement upload component

Implement separate Upload component

Accessibility Review

In the definition of done of the Kevin's document there is a point about Accessibility Review. We need to know what we want to cover of the AA guideline.

https://www.w3.org/WAI/WCAG20/quickref/

Quick actions for documents and folders

Provide ability to add/remove action buttons for document list entries (folders/documents)

Alfresco Javascript API for REST API's

A generic, general purpose Javascript SDK that wraps around the v1 Alfresco REST API's. This could potentially be done automatically via Swagger and related tools.

Acceptance criteria

• The SDK provides an interface that is easy to use
• The SDK can be used in other contexts such as node.js and vanilla browsers/javascript
• The SDK is autogenerated and/or requires minimal effort post generation to maintain
• The SDK can be used to make calls to custom web scripts in the repository

If the SDK can not be autogenerated from the OpenAPI definition we should discuss alternatives.

/* Note */
A strong requirement is that all components and services must use the v1 REST APIs. In essence this means that if you're calling a URL that doesn't start with: alfresco/api/-default-/public/... we are not to use it.

A list of the v1 REST APIs for 5.1 can be found here: https://api-explorer.alfresco.com/api-explorer

Configure dependencies for components

Use peer dependency on angular2 rather than direct/private one.

Test 2

test 2

Fix 'npm install' issue

Fix installation issue (automatic post install compilation of .ts files) for ng2-alfresco library.

Configurable columns

Configurable columns (document title/name, thumbnail, creation date, modified date, creator, size) for document list component.

Thumbnail

Base upload file Component

• Validation
• Internationalization
• XSS Tests
• Unit Tests
• Js Doc
• Pub/Sub Events

Automated build for the javascript client API

Documents List Component

• Validation
• Internationalization
• XSS Tests
• Unit Tests
• Js Doc
• Pub/Sub Events

Component yeoman boilerplate generator

The boilerplate should have:

Files / Folder:

• readme.md
• .gitignore
• .travis.yml
• package.json
• license
• tsconfig.json
• editorconfig
• /src (test and src in the same folder)
• /demo
• coverage plugin
• jasmine plugin
• xo plugin

Investigate Cucumber for automated tests

Login Component - Angular 2 Component

• Validation
• Internationalization
• XSS Tests
• Unit Tests
• Js Doc
• Pub/Sub Events
• Accessibility - W3C

Create seed web component generator

Investigate protractor for automated tests

Upload component

Uploader is initiated by file upload via button or drag and drop event

Acceptance criteria

• "Sticky" dialog that can be minimised
• Must not block the UI whilst on screen
• Lists all uploads from the current session
• Shows overall progress - visual progress indication + number of files complete
• Shows individual upload progress of each file
• Shows folder upload progress (number of files completed out of total)
• Cancel individual file/folder upload
• Cancel all remaining uploads
• Drag'n'drop into document list component

Make use of Javascript Alfresco API Binding

The objective of this API is to bind the Alfresco public REST API layer in a way that all the endpoint are transparent to the developer.
Part of this task is also Investigate if there is a tool to generate this API automatically from swagger. In case this is possible may we will include this tool in our build.

Docs Component Reference Website

The objective is to have a reference where to show all the Alfresco components. The style would be like https://elements.polymer-project.org/browse. Part of the task is to investigate if we can use the project https://github.com/Polymer/docs.

File List Web Component

• #18 BreadCrumbs
• #19 File Badge
• #20 Action Menu
• #21 Thumbnail

Login Component - Web Component

• CSS
• Template
• CoreJS
• Events
• Unit Tests
• Js Doc

Investigate Gauge for automated tests

test issue

Add plugin to the build to check the license

in progress issue

Investigate Geb for automated tests

[document list] Action Menu

Provide support for declarative action menus for document list component.

Setup unit tests

Configure unit testing as per article.

Declarative action buttons for document lists

Provide support for declarative action buttons for document lists.

BreadCrumbs

The breadcrumbs is part of the document view component

Core Component library

File Badge

Investigate Robot framework for automated tests

Components should only use v1 REST APIs

A strong requirement is that all components and services must use the v1 REST APIs. In essence this means that if you're calling a URL that doesn't start with: alfresco/api/-default-/public/... we are not to use it.

A list of the v1 REST APIs for 5.1 can be found here: https://api-explorer.alfresco.com/api-explorer

Using the artifacts from the FILEFOLDER or API-STRIKES-BACK branches includes all the new APIs.

no in the backlog

no in the backlog

Investigate Intern for automated tests

test 3

test 3

Setup Build system

First draft new build system based on gulp

Create CI chain

We need:

• Build system QA/DEV/PRODUCTION
• Execution of the Automation tests at prescheduled time.
• Execution of the unit tests on each PR (we could use Travis)
• Publish everything on a private endpoint
• Automation Test Monitor
• Build bot for skype & slack channel

Setup Testrail

Setup Testrail

Configure Material Design lib for demo shell

Add and configure Google MD Lite library for ng2 demo shell.