[ADF-1586] Added new Core doc files (#2383)

This commit is contained in:
Andy Stark
2017-09-27 20:21:06 +01:00
committed by Eugenio Romano
parent e1573ddbde
commit 2651f17a14
15 changed files with 568 additions and 49 deletions

View File

@@ -300,22 +300,17 @@ for more information about installing and using the source code.
### Components
- [Accordion group component](docs/accordion-group.component.md)
- [Accordion component](docs/accordion.component.md)
- [Data column component](docs/data-column.component.md)
- [Info drawer layout component](docs/info-drawer-layout.component.md)
- [Info drawer component](docs/info-drawer.component.md)
- [Pagination component](docs/pagination.component.md)
- [Toolbar divider component](docs/toolbar-divider.component.md)
- [Toolbar title component](docs/toolbar-title.component.md)
- [Toolbar component](docs/toolbar.component.md)
- [Card view component](docs/card-view.component.md)
- [*Accordion group component](ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts)
- [*Context menu holder component](ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu-holder.component.ts)
- [*Data column list component](ng2-components/ng2-alfresco-core/src/components/data-column/data-column-list.component.ts)
- [*Info drawer layout component](ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer-layout.component.ts)
- [*Info drawer component](ng2-components/ng2-alfresco-core/src/components/info-drawer/info-drawer.component.ts)
- [*Card view dateitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts)
- [*Card view item dispatcher component](ng2-components/ng2-alfresco-core/src/components/view/card-view-item-dispatcher.component.ts)
- [*Card view mapitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-mapitem.component.ts)
- [*Card view textitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-textitem.component.ts)
- [*Infinite pagination component](ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.ts)
### Directives
@@ -333,6 +328,7 @@ for more information about installing and using the source code.
- [Alfresco api service](docs/alfresco-api.service.md)
- [App config service](docs/app-config.service.md)
- [Authentication service](docs/authentication.service.md)
- [Card view update service](docs/card-view-update.service.md)
- [Notification service](docs/notification.service.md)
- [Renditions service](docs/renditions.service.md)
- [Translation service](docs/translation.service.md)
@@ -344,7 +340,6 @@ for more information about installing and using the source code.
- [*Auth guard bpm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.ts)
- [*Auth guard ecm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-ecm.service.ts)
- [*Auth guard service](ng2-components/ng2-alfresco-core/src/services/auth-guard.service.ts)
- [*Card view update service](ng2-components/ng2-alfresco-core/src/services/card-view-update.service.ts)
- [*Content service](ng2-components/ng2-alfresco-core/src/services/content.service.ts)
- [*Cookie service](ng2-components/ng2-alfresco-core/src/services/cookie.service.ts)
- [*Deleted nodes api service](ng2-components/ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
@@ -414,6 +409,7 @@ for more information about installing and using the source code.
### Services
- [*Content node selector service](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts)
- [*Document actions service](ng2-components/ng2-alfresco-documentlist/src/services/document-actions.service.ts)
- [*Document list service](ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts)
- [*Folder actions service](ng2-components/ng2-alfresco-documentlist/src/services/folder-actions.service.ts)

View File

@@ -0,0 +1,64 @@
# Accordion Group component
Adds a collapsible panel to an [accordion menu](accordion.component.md).
![Accordion menu screenshot](docassets/images/accordion-menu.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-accordion>
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
<my-list></my-list>
</adf-accordion-group>
</adf-accordion>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent implements OnInit {
titleHeading: string;
constructor() {
this.titleHeading = 'My Group';
}
}
```
### Properties
| Name | Type | Description |
| --- | --- | --- |
| heading | string | Title heading for the group. |
| isSelected | boolean | Is this group currently selected? |
| headingIcon | string | The material design icon. |
| hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true |
## Details
Place one or more accordion groups within an [Accordion component](accordion.component.md) to define
a menu.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Accordion component](accordion.component.md)
<!-- seealso end -->

View File

@@ -1,6 +1,8 @@
# Accordion Component
Creates an accordion menu, optionally with a custom header and icon.
Creates a collapsible accordion menu.
![Accordion menu screenshot](docassets/images/accordion-menu.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
@@ -8,6 +10,9 @@ Creates an accordion menu, optionally with a custom header and icon.
- [Basic Usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
* [Example](#example)
- [See also](#see-also)
<!-- tocstop -->
@@ -46,3 +51,41 @@ export class MyComponent implements OnInit {
| isSelected | boolean | Define if the accordion group is selected or not. |
| headingIcon | string | The material design icon. |
| hasAccordionIcon | boolean | Define if the accordion (expand) icon needs to be shown or not, the default value is true |
## Details
An accordion menu contains several panels of content, only one of which is visible at any time. The
hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion)
while the visible panel fills the remaining space in the menu.
Use one or more [Accordion Group](accordion-group.component.md) subcomponents to define the panels and set their
properties (title, selection status, etc).
### Example
You can use an accordion menu to wrap a [process filter](process-filters.component.md), as shown in
the following example:
```html
<adf-accordion>
<adf-accordion-group
[heading]="'Processes'"
[isSelected]="true"
[headingIcon]="'assessment'">
<adf-process-instance-filters
[appId]="appId"
(filterClick)="onProcessFilterClick($event)"
(onSuccess)="onSuccessProcessFilterList($event)">
</adf-process-instance-filters>
</adf-accordion-group>
</adf-accordion>
```
![how-create-accordion-menu](docassets/images/how-to-create-accordion-menu.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Accordion group component](accordion-group.component.md)
<!-- seealso end -->

View File

@@ -0,0 +1,141 @@
# Card View Update service
Reports edits and clicks within fields of a [Card View component](card-view.component.md).
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Details](#details)
* [Responding to updates](#responding-to-updates)
* [Responding to clicks](#responding-to-clicks)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Details
You can use the Card View Update service to respond to edits and clicks within items on
a card view. This might involve updating application data to reflect the changes made to
the view or could simply be a matter of highlighting a clicked item.
The service is injected into a component using a constructor parameter, which also
creates a corresponding property in the object:
```ts
properties: any;
constructor(private cardViewUpdateService: CardViewUpdateService) {
this.properties = [
new CardViewTextItemModel({
label: 'Name',
value: 'Kirk',
key: 'name',
default: 'No name entered',
multiline: false,
editable: true,
clickable: true
}),
new CardViewTextItemModel({
label: 'Rank',
value: 'Captain',
key: 'rank',
default: 'No rank entered',
multiline: false,
editable: true,
clickable: true
}),
new CardViewTextItemModel({
label: 'Ship',
value: 'Enterprise',
key: 'ship',
default: 'No ship entered',
multiline: false,
editable: true,
clickable: true
})
];
}
```
The constructor here also sets the `CardViewTextItemModel` instances that define the layout of the
card view (see the [Card View component](card-view.component.md) for further information
about this). The model objects and the `key` property are used to identify which item has been clicked
or updated when an event occurs.
You must "subscribe" to the service in order to be informed about clicks and updates. You can do this by
registering your own functions with the service's `itemUpdated$` and `itemClicked$` events
(place this code in the `ngOnInit`
[lifecycle hook](https://angular.io/guide/lifecycle-hooks#oninit) rather than the constructor):
```ts
ngOnInit() {
this.cardViewUpdateService.itemUpdated$.subscribe(this.respondToCardUpdate.bind(this));
this.cardViewUpdateService.itemClicked$.subscribe(this.respondToCardClick.bind(this));
}
```
With the subscriptions in place, `respondToCardUpdate` and `respondToCardClick` will now be
called after updates and clicks, respectively.
### Responding to updates
The update function is passed a parameter of type `UpdateNotification`:
```ts
export interface UpdateNotification {
target: any;
changed: any;
}
```
Here, `target` contains the `CardViewTextItemModel` that was used to initialize
the field in question (in practice, this might be a `CardViewDateItemModel` or `CardViewMapItemModel` if
the card layout includes these objects). The `changed` property contains an object with a single property:
```ts
{ keyValue: 'Value after editing' }
```
Here, `keyValue` is actually the value of the `key` field specified when the item was initialized. So
in our example, if the third item was edited from 'Enterprise' to 'Shuttle Craft', the object would be:
```ts
{ ship: 'Shuttle Craft' }
```
The complete code for `respondToCardUpdate` might look something like the following:
```ts
respondToCardUpdate(un: UpdateNotification) {
this.updateMessage = un.target.label + ' changed to ' + un.changed[un.target.key];
}
```
Note that the function will only be called if the `editable` property of the model object is set to true
for this item. Also, the `editable` value of all items will be overridden if `editable` is set to false
on the [Card View component](card-view.component.md) itself.
### Responding to clicks
The click function is passed a `ClickNotification` object, which is similar to `UpdateNotification` described above,
but without the `changed` property. Use the `target` property to identify the item that was clicked:
```ts
respondToCardClick(cn: ClickNotification) {
this.clickMessage = cn.target.label + ' was just clicked';
}
```
Note that this function will only be called if the `clickable` property of the model object is set to true
for this item.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Card view component](card-view.component.md)
<!-- seealso end -->

View File

@@ -20,6 +20,7 @@ Displays a configurable property list renderer.
+ [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
+ [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
+ [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
- [See also](#see-also)
<!-- tocstop -->
@@ -54,6 +55,10 @@ The card view can optionally allow its properties to be edited. You can control
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
See the [Card View Update service](card-view-update.service.md) page for details on how to use the service
to respond to clicks and edits in a card view. You can use this, for example, to save the edits within your
application or to highlight a clicked item.
### Defining properties
Properties is an array of models which one by one implements the CardViewItem interface.
@@ -236,3 +241,10 @@ For Angular to be able to load your custom component dynamically, you have to re
})
export class MyModule {}
```
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Card view update service](card-view-update.service.md)
<!-- seealso end -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@@ -0,0 +1,50 @@
# Info drawer layout component
Displays a sidebar-style information panel.
![Info drawer layout screenshot](docassets/images/infodrawerlayout.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
- [Details](#details)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
```html
<adf-info-drawer-layout>
<div info-drawer-title>File info</div>
<div info-drawer-buttons>
<md-icon>clear</md-icon>
</div>
<div info-drawer-content>
<md-card>
Lorem ipsum dolor sit amet...
</md-card>
</div>
</adf-info-drawer-layout>
```
## Details
As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Info drawer component](info-drawer.component.md)
<!-- seealso end -->

View File

@@ -0,0 +1,58 @@
# InfoDrawerComponent
Displays a sidebar-style information panel with tabs.
![Info drawer screenshot](docassets/images/activities-infodrawer.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
- [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
```html
<adf-info-drawer title="Activities" (currentTab)="getActiveTab($event)">
<div info-drawer-buttons>
<md-icon (click)="close()">clear</md-icon>
</div>
<adf-info-drawer-tab label="Activity">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</adf-info-drawer-tab>
<adf-info-drawer-tab label="Details">
<mycomponent3></mycomponent3>
</adf-info-drawer-tab>
</adf-info-drawer>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| title | string | null | The title of the info drawer |
| currentTab | any | null | The currently active tab |
## Details
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the `adf-info-drawer-tab` subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
You can also customize the three regions (title, buttons and content) as with the Info Drawer Layout component.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Info drawer layout component](info-drawer-layout.component.md)
<!-- seealso end -->

View File

@@ -81,22 +81,5 @@ You can use inside the filterParam one of the properties defined by [FilterParam
### How to create an accordion menu with the processes filter
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
The AccordionComponent is exposed by the alfresco-core.
```html
<adf-accordion>
<adf-accordion-group
[heading]="'Processes'"
[isSelected]="true"
[headingIcon]="'assessment'">
<adf-process-instance-filters
[appId]="appId"
(filterClick)="onProcessFilterClick($event)"
(onSuccess)="onSuccessProcessFilterList($event)">
</adf-process-instance-filters>
</adf-accordion-group>
</adf-accordion>
```
![how-create-accordion-menu](docassets/images/how-to-create-accordion-menu.png)
The process filter often works well as an item in an accordion menu. See the [Accordion component](accordion.component.md)
page for an example of how to do set this up.

86
docs/seeAlsoGraph.json Normal file
View File

@@ -0,0 +1,86 @@
{
"accordion.component": ["accordion-group.component"],
"accordion-group.component": [],
"alfresco-api.service": [],
"analytics-generator.component": [],
"analytics-report-list.component": [],
"analytics.component": [],
"app-config.service": [],
"apps-list.component": [],
"authentication.service": [],
"breadcrumb.component": ["document-list.component"],
"card-view.component": ["card-view-update.service"],
"card-view-update.service": [],
"checklist.component": [],
"comments.component": [],
"content.widget": [],
"context-menu.directive": [],
"create-process-attachment.component": [],
"create-task-attachment.component": [],
"data-column.component": ["document-list.component", "datatable.component"],
"datatable.component": [
"data-column.component",
"pagination.component"
],
"diagram.component": [],
"document-list.component": [
"datatable.component",
"data-column.component",
"pagination.component",
"metadata-indicators"
],
"extensibility": [],
"file-uploading-dialog.component": [],
"form-list.component": [],
"form.component": [],
"form.service": [],
"info-drawer.component": ["info-drawer-layout.component"],
"info-drawer-layout.component": [],
"like.component": ["rating.component"],
"login.component": [],
"metadata-indicators": [],
"node-permission.directive": [],
"notification.service": [],
"pagination.component": [],
"people-search.component": [],
"people.component": [],
"process-attachment-list.component": [],
"process-audit.directive": [],
"process-comments.component": [],
"process-filters.component": [],
"process-instance-details.component": [],
"process-instance-header.component": [],
"process-instance-tasks.component": [],
"processlist.component": [],
"rating.component": ["like.component"],
"renditions.service": [],
"search-control.component": ["search.component"],
"search.component": [],
"sites-dropdown.component": [],
"start-process.component": [],
"start-task.component": [],
"stencils": [],
"tag-actions.component": [],
"tag-list.component": [],
"tag-node-list.component": [],
"task-attachment-list.component": [],
"task-audit.directive": [],
"task-details.component": [],
"task-details.model": [],
"task-filters.component": [],
"task-header.component": [],
"tasklist.component": [],
"theming": [],
"toolbar-divider.component": [],
"toolbar-title.component": [],
"toolbar.component": ["toolbar-divider.component", "toolbar-title.component"],
"translation.service": [],
"upload-button.component": [],
"upload-drag-area.component": [],
"upload.directive": [],
"upload.service": [],
"user-info.component": [],
"user-preferences.service": [],
"viewer.component": [],
"webscript.component": []
}

View File

@@ -74,21 +74,5 @@ You can use inside the filterParam one of the properties from [FilterParamsModel
### How to create an accordion menu with the task filter
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
The AccordionComponent is exposed by the alfresco-core.
```html
<adf-accordion>
<adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [headingIcon]="'assignment'">
<adf-filters
[appId]="appId"
[hasIcon]="false"
(filterClick)="onTaskFilterClick($event)"
(onSuccess)="onSuccessTaskFilterList($event)"
#activitifilter>
</adf-filters>
</adf-accordion-group>
</adf-accordion>
```
![how-create-accordion-menu](docassets/images/how-to-create-accordion-menu.png)
The task filter often works well as an item in an accordion menu. See the [Accordion component](accordion.component.md)
page for an example of how to do set this up.

View File

@@ -1 +1,7 @@
[ "model" ]
[
"model",
"context-menu-holder",
"data-column-list",
"card-view-[a-z]+item",
"card-view-item-dispatcher"
]

View File

@@ -0,0 +1,96 @@
var fs = require('fs');
var path = require('path');
var docFolderPath = path.resolve("..", "docs");
var graphFileName = path.resolve(docFolderPath, "seeAlsoGraph.json");
// Get a list of all items that have a file in the docs folder.
function getDocFolderItems(docFolderPath) {
var result = {};
var items = fs.readdirSync(path.resolve(docFolderPath));
for (var i = 0; i < items.length; i++) {
if (items[i].endsWith('.md')) {
var nameNoSuffix = path.basename(items[i], '.md');
result[nameNoSuffix] = 1;
}
}
return result;
}
// Convert an Angular-style name (eg, "card-view") into one with correct spaces and uppercase (eg, "Card view").
function tidyName(name) {
var result = name.replace(/-/g, " ");
result = result.substr(0, 1).toUpperCase() + result.substr(1);
return result;
}
function buildSeeAlsoList(arcs) {
var listItems = [];
for (var i = 0; i < arcs.length; i++) {
var parts = arcs[i].split('.');
var itemName = tidyName(parts[0]);
if (parts[1]) {
itemName += ' ' + parts[1];
}
listItems.push('- [' + itemName + '](' + arcs[i] + '.md)');
}
return listItems.join('\n');
}
// If item is not in the arcs array then add it at
// the end.
function fixArcs(arcsArray, item) {
if (arcsArray.indexOf(item) == -1) {
arcsArray.push(item);
}
}
// Makes link symmetrical between items (ie, if A links to B but not the other way
// around then it adds the missing link).
function tidyGraph(graph) {
var nodeNames = Object.keys(graph);
for (var n = 0; n < nodeNames.length; n++) {
var currNodeName = nodeNames[n];
var currNodeArcs = graph[currNodeName];
for (var a = 0; a < currNodeArcs.length; a++) {
var linkedNode = graph[currNodeArcs[a]];
fixArcs(linkedNode, currNodeName);
}
}
}
var graphJson = fs.readFileSync(graphFileName, 'utf8');
var graph = JSON.parse(graphJson);
tidyGraph(graph);
var nodeNames = Object.keys(graph);
for (var i = 0; i < nodeNames.length; i++) {
var seeAlsoText = '## See also\n\n' + buildSeeAlsoList(graph[nodeNames[i]]);
var docFileName = path.resolve(docFolderPath, nodeNames[i] + '.md');
var docFileText = fs.readFileSync(docFileName, 'utf8');
var seeAlsoStartMarker = '<!-- seealso start -->';
var seeAlsoEndMarker = '<!-- seealso end -->';
var seeAlsoRegex = new RegExp('(?:' + seeAlsoStartMarker + ')([\\s\\S]*)(?:' + seeAlsoEndMarker + ')');
docFileText = docFileText.replace(seeAlsoRegex, seeAlsoStartMarker + '\n' + seeAlsoText + '\n' + seeAlsoEndMarker);
fs.writeFileSync(docFileName, docFileText, 'utf-8');
}