mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1586] Added new Core doc files (#2383)
This commit is contained in:
committed by
Eugenio Romano
parent
e1573ddbde
commit
2651f17a14
16
docIndex.md
16
docIndex.md
@@ -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)
|
||||
|
64
docs/accordion-group.component.md
Normal file
64
docs/accordion-group.component.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# Accordion Group component
|
||||
|
||||
Adds a collapsible panel to an [accordion menu](accordion.component.md).
|
||||
|
||||

|
||||
|
||||
<!-- 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 -->
|
@@ -1,6 +1,8 @@
|
||||
# Accordion Component
|
||||
|
||||
Creates an accordion menu, optionally with a custom header and icon.
|
||||
Creates a collapsible accordion menu.
|
||||
|
||||

|
||||
|
||||
<!-- 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>
|
||||
```
|
||||
|
||||

|
||||
|
||||
<!-- 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 -->
|
141
docs/card-view-update.service.md
Normal file
141
docs/card-view-update.service.md
Normal 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 -->
|
@@ -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 -->
|
BIN
docs/docassets/images/accordion-menu.png
Normal file
BIN
docs/docassets/images/accordion-menu.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
BIN
docs/docassets/images/activities-infodrawer.png
Normal file
BIN
docs/docassets/images/activities-infodrawer.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 95 KiB |
BIN
docs/docassets/images/infodrawerlayout.png
Normal file
BIN
docs/docassets/images/infodrawerlayout.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 86 KiB |
50
docs/info-drawer-layout.component.md
Normal file
50
docs/info-drawer-layout.component.md
Normal file
@@ -0,0 +1,50 @@
|
||||
# Info drawer layout component
|
||||
|
||||
Displays a sidebar-style information panel.
|
||||
|
||||

|
||||
|
||||
<!-- 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 -->
|
58
docs/info-drawer.component.md
Normal file
58
docs/info-drawer.component.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# InfoDrawerComponent
|
||||
|
||||
Displays a sidebar-style information panel with tabs.
|
||||
|
||||

|
||||
|
||||
<!-- 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 -->
|
@@ -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>
|
||||
```
|
||||
|
||||

|
||||
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
86
docs/seeAlsoGraph.json
Normal 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": []
|
||||
}
|
@@ -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>
|
||||
```
|
||||
|
||||

|
||||
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.
|
||||
|
@@ -1 +1,7 @@
|
||||
[ "model" ]
|
||||
[
|
||||
"model",
|
||||
"context-menu-holder",
|
||||
"data-column-list",
|
||||
"card-view-[a-z]+item",
|
||||
"card-view-item-dispatcher"
|
||||
]
|
96
ng2-components/config/generateSeeAlso.js
Normal file
96
ng2-components/config/generateSeeAlso.js
Normal 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');
|
||||
}
|
Reference in New Issue
Block a user