mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
Merge pull request #1031 from Alfresco/dev-mromano-878
Demo, Documentation, packages and code improvements
This commit is contained in:
Will Abson
GitHub
+1
-2
@@ -39,13 +39,12 @@ ADF (demo shell) imports by default the following set of recommended polyfills:
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for pdf support -->
|
||||
<script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
|
||||
@@ -19,7 +19,6 @@ import { Component, AfterViewChecked, ViewChild, Input } from '@angular/core';
|
||||
import {
|
||||
AppDefinitionRepresentationModel,
|
||||
FilterRepresentationModel,
|
||||
UserTaskFilterRepresentationModel,
|
||||
ActivitiApps,
|
||||
ActivitiTaskList
|
||||
} from 'ng2-activiti-tasklist';
|
||||
@@ -153,7 +152,7 @@ export class ActivitiDemoComponent implements AfterViewChecked {
|
||||
this.activititasklist.reload();
|
||||
}
|
||||
|
||||
onSuccessTaskList(event: UserTaskFilterRepresentationModel) {
|
||||
onSuccessTaskList(event: FilterRepresentationModel) {
|
||||
this.currentTaskId = this.activititasklist.getCurrentTaskId();
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 345 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 B |
@@ -1,782 +0,0 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="110px"
|
||||
height="110px" viewBox="0 0 110 110" style="enable-background:new 0 0 110 110;" xml:space="preserve">
|
||||
<g id="Artboard" style="display:none;">
|
||||
<rect x="-443" y="-79" style="display:inline;fill:#8C8C8C;" width="1412" height="743"/>
|
||||
</g>
|
||||
<g id="R-Multicolor" style="display:none;">
|
||||
<circle style="display:inline;fill:#E04F5F;" cx="55" cy="55" r="55"/>
|
||||
<g style="display:inline;">
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
<path style="fill:#F0F1F1;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
<polygon style="fill:#F4D0A1;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
<polygon style="fill:#EDBC7C;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
<path style="fill:#F79392;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
<path style="fill:#E2E4E5;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15C61.55,44,62,44.45,62,45
|
||||
L62,45z"/>
|
||||
<path style="fill:#E2E4E5;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
<path style="fill:#E2E4E5;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15C61.55,57,62,57.45,62,58
|
||||
L62,58z"/>
|
||||
<path style="fill:#E2E4E5;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
<path style="fill:#E2E4E5;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15C61.55,70,62,70.45,62,71
|
||||
L62,71z"/>
|
||||
<path style="fill:#E2E4E5;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
<g>
|
||||
<path style="fill:#17B198;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.425,0.984-0.482,1.408-0.128c0.424,0.354,0.482,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#17B198;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.425,0.984-0.482,1.408-0.128c0.424,0.354,0.482,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#17B198;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.425,0.984-0.482,1.408-0.128c0.424,0.354,0.482,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
<rect x="77" y="79" style="fill:#FACB1B;" width="10" height="3"/>
|
||||
<rect x="77" y="80" style="fill:#FBE158;" width="5" height="2"/>
|
||||
<path style="fill:#3E3E3F;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.422,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
<path style="fill:#0484AB;" d="M84.5,43c-1.154,0-2.126-0.782-2.413-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.626,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.571C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.131-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
<path style="fill:#21B2D1;" d="M77,80V41.493c0-0.111,0.147-0.139,0.19-0.036C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.417-1.859C81.931,41.089,82,41.096,82,41.15V80H77z"/>
|
||||
<path style="fill:#F7B4B4;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Multicolor">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
<path style="fill:#F0F1F1;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
<polygon style="fill:#F4D0A1;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
<polygon style="fill:#EDBC7C;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
<path style="fill:#F79392;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
<path style="fill:#E2E4E5;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15C61.55,44,62,44.45,62,45
|
||||
L62,45z"/>
|
||||
<path style="fill:#E2E4E5;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
<path style="fill:#E2E4E5;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15C61.55,57,62,57.45,62,58
|
||||
L62,58z"/>
|
||||
<path style="fill:#E2E4E5;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
<path style="fill:#E2E4E5;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15C61.55,70,62,70.45,62,71
|
||||
L62,71z"/>
|
||||
<path style="fill:#E2E4E5;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
<g>
|
||||
<path style="fill:#17B198;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.425,0.984-0.482,1.408-0.128c0.424,0.354,0.482,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#17B198;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.425,0.984-0.482,1.408-0.128c0.424,0.354,0.482,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#17B198;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.024-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.425,0.984-0.482,1.408-0.128c0.424,0.354,0.482,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
<rect x="77" y="79" style="fill:#FACB1B;" width="10" height="3"/>
|
||||
<rect x="77" y="80" style="fill:#FBE158;" width="5" height="2"/>
|
||||
<path style="fill:#3E3E3F;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.422,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
<path style="fill:#0484AB;" d="M84.5,43c-1.154,0-2.126-0.782-2.413-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.626,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.571C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.131-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
<path style="fill:#21B2D1;" d="M77,80V41.493c0-0.111,0.147-0.139,0.19-0.036C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.417-1.859C81.931,41.089,82,41.096,82,41.15V80H77z"/>
|
||||
<path style="fill:#F7B4B4;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Blue" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#E1F5FA;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E1F5FA;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,44,62,44.45,62,45L62,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,57,62,57.45,62,58L62,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,70,62,70.45,62,71L62,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="79" style="fill:#0F6175;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="80" style="fill:#33899E;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0C333D;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0081A1;" d="M84.5,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.626,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.57C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M77,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858C81.931,41.089,82,41.096,82,41.149V80H77z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Blue" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#81D2EB;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#E1F5FA;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E1F5FA;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,44,62,44.45,62,45L62,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,57,62,57.45,62,58L62,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,70,62,70.45,62,71L62,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#BBE7F2;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="79" style="fill:#0F6175;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="80" style="fill:#33899E;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0C333D;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0081A1;" d="M84.5,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.626,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.57C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009FC7;" d="M77,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858C81.931,41.089,82,41.096,82,41.149V80H77z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Green" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#D7FCF9;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#D7FCF9;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,44,62,44.45,62,45L62,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,57,62,57.45,62,58L62,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,70,62,70.45,62,71L62,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="79" style="fill:#14635B;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="80" style="fill:#3E948B;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0A3631;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009687;" d="M84.5,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.625,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.57C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M77,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858C81.931,41.089,82,41.096,82,41.149V80H77z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Green" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#87E0C8;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72C71,85.281,69.28,87,67.16,87H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#D7FCF9;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#D7FCF9;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,44,62,44.45,62,45L62,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,57,62,57.45,62,58L62,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,70,62,70.45,62,71L62,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#AAF0E9;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="79" style="fill:#14635B;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="80" style="fill:#3E948B;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#0A3631;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101
|
||||
c0.705,0,1.345-0.423,1.857-1.101L82.013,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#009687;" d="M84.5,43c-1.154,0-2.125-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.625,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.57C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.452,42.35,85.552,43,84.5,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#00B8A5;" d="M77,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.417-1.858C81.93,41.089,82,41.096,82,41.149V80H77z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Red" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M22.896,26.84c0-2.121,1.719-3.84,3.84-3.84h28.16l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84
|
||||
h-40.32c-2.121,0-3.84-1.719-3.84-3.84V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M54.896,23v9.6c0,2.121,1.719,3.84,3.84,3.84h12.16L54.896,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="76.896,41.5 81.896,31 86.896,41.5 86.896,80 76.896,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFEFED;" points="86.896,47 86.896,41.5 81.896,31 81.896,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFEFED;" d="M86.896,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M61.896,45c0,0.55-0.45,1-1,1h-15c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.446,44,61.896,44.45,61.896,45L61.896,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M55.896,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9
|
||||
C55.446,49,55.896,49.45,55.896,50L55.896,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M61.896,58c0,0.55-0.45,1-1,1h-15c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.446,57,61.896,57.45,61.896,58L61.896,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M55.896,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9
|
||||
C55.446,62,55.896,62.45,55.896,63L55.896,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M61.896,71c0,0.55-0.45,1-1,1h-15c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.446,70,61.896,70.45,61.896,71L61.896,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M55.896,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9
|
||||
C55.446,75,55.896,75.45,55.896,76L55.896,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M34.963,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L34.963,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M34.963,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L34.963,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M34.963,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L34.963,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="76.896" y="79" style="fill:#7D261E;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="76.896" y="80" style="fill:#B84E44;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#4A1410;" d="M81.909,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L81.909,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#C23023;" d="M84.396,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.521,42.218,80.55,43,79.396,43c-1.052,0-1.953-0.65-2.322-1.57c-0.039-0.098-0.178-0.071-0.178,0.034V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.349,42.35,85.448,43,84.396,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M76.896,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.461,42.363,78.354,43,79.396,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858c0.014-0.052,0.084-0.046,0.084,0.008V80H76.896z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M76.896,82v2c0,1.657,1.343,3,3,3h2v-5H76.896z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Red" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#FABBAF;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFEFED;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFEFED;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,44,62,44.45,62,45L62,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,57,62,57.45,62,58L62,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,70,62,70.45,62,71L62,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFD7D4;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="79" style="fill:#7D261E;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="80" style="fill:#B84E44;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#4A1410;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#C23023;" d="M84.5,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.626,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.57C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E54B44;" d="M77,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858C81.931,41.089,82,41.096,82,41.149V80H77z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Yellow" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M22.896,26.84c0-2.121,1.719-3.84,3.84-3.84h28.16l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84
|
||||
h-40.32c-2.121,0-3.84-1.719-3.84-3.84V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M54.896,23v9.6c0,2.121,1.719,3.84,3.84,3.84h12.16L54.896,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="76.896,41.5 81.896,31 86.896,41.5 86.896,80 76.896,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFF5D9;" points="86.896,47 86.896,41.5 81.896,31 81.896,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFF5D9;" d="M86.896,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M61.896,45c0,0.55-0.45,1-1,1h-15c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.446,44,61.896,44.45,61.896,45L61.896,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M55.896,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9
|
||||
C55.446,49,55.896,49.45,55.896,50L55.896,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M61.896,58c0,0.55-0.45,1-1,1h-15c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.446,57,61.896,57.45,61.896,58L61.896,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M55.896,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9
|
||||
C55.446,62,55.896,62.45,55.896,63L55.896,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M61.896,71c0,0.55-0.45,1-1,1h-15c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.446,70,61.896,70.45,61.896,71L61.896,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M55.896,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9
|
||||
C55.446,75,55.896,75.45,55.896,76L55.896,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M34.963,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L34.963,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M34.963,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L34.963,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M34.963,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.481,0.984,0.128,1.408L34.963,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="76.896" y="79" style="fill:#66510D;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="76.896" y="80" style="fill:#947615;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#3D320C;" d="M81.909,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L81.909,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E07000;" d="M84.396,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.521,42.218,80.55,43,79.396,43c-1.052,0-1.953-0.65-2.322-1.57c-0.039-0.098-0.178-0.071-0.178,0.034V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.349,42.35,85.448,43,84.396,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M76.896,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.461,42.363,78.354,43,79.396,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858c0.014-0.052,0.084-0.046,0.084,0.008V80H76.896z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M76.896,82v2c0,1.657,1.343,3,3,3h2v-5H76.896z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="R-Yellow" style="display:none;">
|
||||
<g style="display:inline;">
|
||||
<circle style="fill:#FFD75E;" cx="55" cy="55" r="55"/>
|
||||
</g>
|
||||
<g style="display:inline;">
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M23,26.84c0-2.121,1.719-3.84,3.84-3.84H55l16,13.44v46.72c0,2.121-1.719,3.84-3.84,3.84H26.84
|
||||
C24.719,87,23,85.281,23,83.16V26.84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M55,23v9.6c0,2.121,1.719,3.84,3.84,3.84H71L55,23z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFFFFF;" points="77,41.5 82,31 87,41.5 87,80 77,80 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon style="fill:#FFF5D9;" points="87,47 87,41.5 82,31 82,47 "/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFF5D9;" d="M87,84c0,1.657-1.343,3-3,3h-4c-1.657,0-3-1.343-3-3v-2h10V84z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M62,45c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,44,62,44.45,62,45L62,45z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M56,50c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,49,56,49.45,56,50
|
||||
L56,50z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M62,58c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,57,62,57.45,62,58L62,58z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M56,63c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,62,56,62.45,56,63
|
||||
L56,63z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M62,71c0,0.55-0.45,1-1,1H46c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h15
|
||||
C61.55,70,62,70.45,62,71L62,71z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFE9A1;" d="M56,76c0,0.55-0.45,1-1,1h-9c-0.55,0-1-0.45-1-1l0,0c0-0.55,0.45-1,1-1h9C55.55,75,56,75.45,56,76
|
||||
L56,76z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M35.067,52l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,52z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M35.067,65l-3.774-3.774c-0.391-0.39-0.391-1.024,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,65z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M35.067,78l-3.774-3.774c-0.391-0.39-0.391-1.023,0-1.414c0.391-0.391,1.023-0.391,1.414,0
|
||||
l2.226,2.226l4.299-5.159c0.354-0.424,0.984-0.481,1.408-0.128c0.424,0.353,0.482,0.984,0.128,1.408L35.067,78z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="79" style="fill:#66510D;" width="10" height="3"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="77" y="80" style="fill:#947615;" width="5" height="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#3D320C;" d="M82.013,30.984l-1.857,3.899c0.512,0.678,1.152,1.101,1.857,1.101s1.345-0.423,1.857-1.101
|
||||
L82.013,30.984z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#E07000;" d="M84.5,43c-1.154,0-2.126-0.782-2.414-1.845c-0.026-0.097-0.147-0.097-0.173,0
|
||||
C81.626,42.218,80.654,43,79.5,43c-1.052,0-1.953-0.65-2.322-1.57C77.139,41.332,77,41.359,77,41.464V80h10V41.464
|
||||
c0-0.105-0.139-0.132-0.178-0.034C86.453,42.35,85.552,43,84.5,43z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FA9200;" d="M77,80V41.494c0-0.112,0.146-0.14,0.19-0.037C77.565,42.363,78.458,43,79.5,43
|
||||
c1.159,0,2.134-0.789,2.416-1.858C81.931,41.089,82,41.096,82,41.149V80H77z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#FFFFFF;" d="M77,82v2c0,1.657,1.343,3,3,3h2v-5H77z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 34 KiB |
@@ -1,20 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#4B4B4B;}
|
||||
</style>
|
||||
<g id="XMLID_52_">
|
||||
<path id="XMLID_1171_" class="st0" d="M46.5,78.9c-7.7,0-15.5,0-23.2,0c-5.5,0-9.2-3.7-9.2-9.2c0-15.5,0-31,0-46.5
|
||||
c0-5.5,3.7-9.2,9.1-9.2c15.6,0,31.2,0,46.7,0c5.2,0,9,3.8,9,9c0,15.5,0,31.1,0,46.6c0,5.5-3.7,9.2-9.2,9.2
|
||||
C62,78.9,54.2,78.9,46.5,78.9z M20.5,46.5c0,7.4,0,14.9,0,22.3c0,2.4,1.3,3.7,3.7,3.7c14.8,0,29.7,0,44.5,0c2.5,0,3.7-1.3,3.7-3.7
|
||||
c0-14.8,0-29.7,0-44.5c0-2.5-1.3-3.7-3.8-3.7c-14.8,0-29.7,0-44.5,0c-2.4,0-3.7,1.3-3.7,3.7C20.5,31.6,20.5,39.1,20.5,46.5z"/>
|
||||
<path id="XMLID_1170_" class="st0" d="M10.8,65.9c-5.6,0.4-9.7-3.5-9.7-8.9c0-15.6,0-31.3,0-46.9c0-5.2,3.8-8.9,9-8.9
|
||||
c15.7,0,31.4,0,47,0c5.3,0,9.2,4.2,8.8,9.7c-0.4,0-0.8,0-1.2,0c-15.1,0-30.3,0-45.4,0c-5.1,0-8.5,3.5-8.5,8.5c0,15.1,0,30.2,0,45.3
|
||||
C10.8,65,10.8,65.4,10.8,65.9z"/>
|
||||
<path id="XMLID_899_" class="st0" d="M37.9,50.5c4.7-4.7,9.3-9.3,13.8-13.9c1.8-1.8,3.5-3.5,5.3-5.3c2.1-2.1,4.8-2,6.9,0.1
|
||||
c2.3,2.3,2.5,5,0.4,7.1c-7.7,7.7-15.3,15.3-23,23c-2.1,2.1-4.8,2.1-6.8,0c-2.2-2.2-4.5-4.5-6.7-6.8c-1.9-2-1.9-4.6,0-6.6
|
||||
c1.4-1.5,2.9-2.5,5-1.9c0.8,0.2,1.6,0.7,2.2,1.3C36.1,48.5,36.9,49.5,37.9,50.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
@@ -57,7 +57,7 @@
|
||||
"LOGIN-SUCCESS": "Login successful"
|
||||
},
|
||||
"BUTTON": {
|
||||
"LOGIN": "MARIO"
|
||||
"LOGIN": "Login"
|
||||
},
|
||||
"ACTION": {
|
||||
"HELP": "NEED HELP?",
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-alfresco-documentlist": "0.3.2",
|
||||
"ng2-alfresco-login": "0.3.2",
|
||||
"ng2-alfresco-search": "0.3.2",
|
||||
"ng2-alfresco-search": "0.3.3",
|
||||
"ng2-alfresco-upload": "0.3.2",
|
||||
"ng2-alfresco-viewer": "0.3.2",
|
||||
"ng2-activiti-form": "0.3.3",
|
||||
|
||||
@@ -76,7 +76,7 @@ npm run build:w
|
||||
|
||||
```
|
||||
|
||||
3. Move inside the demo folder and link the component to the local node_modules folder.
|
||||
3. From another terminal move inside the demo sub folder and link the component to the local node_modules folder.
|
||||
```sh
|
||||
|
||||
cd demo
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -1,4 +1,35 @@
|
||||
# Activiti Analytics Component for Angular 2
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/package/ng2-activiti-analytics'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-activiti-analytics.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@@ -7,98 +38,228 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-analytics
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
#### Ng2-Charts
|
||||
1. Npm
|
||||
|
||||
```sh
|
||||
npm install ng2-charts chart.js --save
|
||||
```
|
||||
```sh
|
||||
npm install ng2-activiti-analytics --save
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
2. Html
|
||||
|
||||
```html
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
```html
|
||||
|
||||
<!-- Charts -->
|
||||
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
||||
```
|
||||
<script src="node_modules/raphael/raphael.min.js"></script>
|
||||
|
||||
#### Moment
|
||||
|
||||
```sh
|
||||
npm install moment --save
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
|
||||
```html
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
```
|
||||
|
||||
|
||||
#### Material Design Date picker
|
||||
|
||||
```sh
|
||||
npm install md-date-time-picker --save
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
|
||||
```html
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
```
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- 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">
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
```
|
||||
|
||||
3. SystemJs
|
||||
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- moment
|
||||
- ng2-charts
|
||||
- ng2-translate
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-core
|
||||
- ng2-activiti-diagrams
|
||||
- ng2-activiti-analytics
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage example Activiti Analytics List
|
||||
|
||||
The component shows the list of all the available reports
|
||||
|
||||
```html
|
||||
<analytics-report-list></analytics-report-list>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { AnalyticsModule } from 'ng2-activiti-analytics';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-analytics-demo',
|
||||
template: `
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
|
||||
<analytics-report-list></analytics-report-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
|
||||
export class AnalyticsDemoComponent {
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
AnalyticsModule
|
||||
],
|
||||
declarations: [ AnalyticsDemoComponent ],
|
||||
bootstrap: [ AnalyticsDemoComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
#### Events
|
||||
**onSuccess**: The event is emitted when the report list are loaded<br />
|
||||
**onError**: The event is emitted when an error occur during the loading<br />
|
||||
**reportClick**: The event is emitted when the report in the list is selected<br />
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`onSuccess`| The event is emitted when the report list are loaded |
|
||||
|`onError`| The event is emitted when an error occur during the loading |
|
||||
|`reportClick`| The event is emitted when the report in the list is selected |
|
||||
|
||||
#### Options
|
||||
|
||||
No options.
|
||||
|
||||
## Basic usage example Activiti Analytics
|
||||
|
||||
The component shows the charts related to the reportId passed as input
|
||||
|
||||
```html
|
||||
<activiti-analytics [appId]="appId" [reportId]="reportId"></activiti-analytics>
|
||||
```
|
||||
|
||||
Example of an App that use Activiti Analytics component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { AnalyticsModule } from 'ng2-activiti-analytics';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-analytics-demo',
|
||||
template: `
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
|
||||
<activiti-analytics [appId]="1001" [reportId]="2006"></activiti-analytics>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
|
||||
export class AnalyticsDemoComponent {
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
AnalyticsModule
|
||||
],
|
||||
declarations: [ AnalyticsDemoComponent ],
|
||||
bootstrap: [ AnalyticsDemoComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
#### Events
|
||||
**onSuccess**: The event is emitted when the report parameters are loaded<br />
|
||||
**onError**: The event is emitted when an error occur during the loading<br />
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`onSuccess` | The event is emitted when the report parameters are loaded |
|
||||
|`onError` | The event is emitted when an error occur during the loading |
|
||||
|
||||
#### Options
|
||||
**appId**: The application id<br />
|
||||
**reportId**: The report id<br />
|
||||
**debug**: Flag to enable or disable the Form values in the console log<br />
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`appId` | The application id |
|
||||
|`reportId` | The report id |
|
||||
|`debug` | Flag to enable or disable the Form values in the console log |
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -110,7 +271,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -130,3 +291,27 @@ before performing unit testing.
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
||||
@@ -6,40 +6,54 @@
|
||||
<title>Alfresco Angular 2 Activiti Analytics - Demo</title>
|
||||
<base href="./">
|
||||
|
||||
<!-- Charts -->
|
||||
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
||||
<script src="node_modules/raphael/raphael.min.js"></script>
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
<!-- 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">
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
<script src="node_modules/raphael/raphael.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<script src="assets/Polyline.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<style> .chart {display: block; width: 100%;} </style>
|
||||
<style> .chart {display: block; width: 100%;}</style>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<activiti-analytics-demo></activiti-analytics-demo>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -37,29 +37,32 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"raphael": "^2.2.6",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"chart.js": "^2.1.4",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"ng2-charts": "1.1.0",
|
||||
"moment": "2.15.1",
|
||||
"raphael": "^2.2.6",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-activiti-diagrams": "^0.3.0",
|
||||
"ng2-activiti-analytics": "^0.3.0",
|
||||
"chart.js": "^2.1.4",
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"ng2-charts": "1.1.0"
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-activiti-diagrams": "0.3.3",
|
||||
"ng2-activiti-analytics": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
@@ -68,4 +71,4 @@
|
||||
"typescript": "^2.0.3",
|
||||
"wsrv": "^0.1.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,16 +15,25 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { AnalyticsModule } from 'ng2-activiti-analytics';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-analytics-demo',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="page-content">
|
||||
<label for="appId"><b>Insert the appId:</b></label><br>
|
||||
<input id="appId" size="10" type="text" [(ngModel)]="appId">
|
||||
@@ -39,14 +48,56 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
|
||||
</div>`
|
||||
})
|
||||
|
||||
export class AnalyticsDemoComponent {
|
||||
export class AnalyticsDemoComponent implements OnInit {
|
||||
|
||||
appId: number;
|
||||
|
||||
report: any;
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://localhost:9999';
|
||||
|
||||
ticket: string;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = this.host;
|
||||
settingsService.setProviders('BPM');
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
}
|
||||
}
|
||||
|
||||
onReportClick(event: any) {
|
||||
this.report = event;
|
||||
}
|
||||
|
||||
public updateTicket(): void {
|
||||
localStorage.setItem('ticket-BPM', this.ticket);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.host;
|
||||
this.login();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
this.authenticated = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
@@ -55,9 +106,10 @@ export class AnalyticsDemoComponent {
|
||||
CoreModule.forRoot(),
|
||||
AnalyticsModule
|
||||
],
|
||||
declarations: [ AnalyticsDemoComponent ],
|
||||
bootstrap: [ AnalyticsDemoComponent ]
|
||||
declarations: [AnalyticsDemoComponent],
|
||||
bootstrap: [AnalyticsDemoComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
@@ -48,42 +48,48 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"moment": "2.15.1",
|
||||
"chart.js": "^2.1.4",
|
||||
"core-js": "^2.4.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-activiti-diagrams": "0.3.3",
|
||||
"ng2-charts": "1.1.0",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"chart.js": "^2.1.4",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"ng2-charts": "1.1.0",
|
||||
"moment": "2.15.1",
|
||||
"raphael": "^2.2.6",
|
||||
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-translate": "2.5.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-activiti-diagrams": "0.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
"cpx": "^1.3.1",
|
||||
"jasmine-ajax": "^3.2.0",
|
||||
"cpx": "1.3.1",
|
||||
"jasmine-core": "2.4.1",
|
||||
"karma": "~0.13.22",
|
||||
"karma-chrome-launcher": "~1.0.1",
|
||||
"karma-coverage": "^1.0.0",
|
||||
"karma-jasmine": "~1.0.2",
|
||||
"karma": "0.13.22",
|
||||
"karma-chrome-launcher": "1.0.1",
|
||||
"karma-coverage": "1.0.0",
|
||||
"karma-jasmine": "1.0.2",
|
||||
"karma-jasmine-ajax": "^0.1.13",
|
||||
"karma-jasmine-html-reporter": "^0.2.0",
|
||||
"karma-mocha-reporter": "^2.0.3",
|
||||
"license-check": "^1.0.4",
|
||||
"remap-istanbul": "^0.6.3",
|
||||
"karma-mocha-reporter": "2.0.3",
|
||||
"karma-jasmine-html-reporter": "0.2.0",
|
||||
"license-check": "1.1.5",
|
||||
"remap-istanbul": "0.6.3",
|
||||
"rimraf": "2.5.2",
|
||||
"traceur": "^0.0.91",
|
||||
"tslint": "^3.8.1",
|
||||
"traceur": "0.0.91",
|
||||
"tslint": "3.15.1",
|
||||
"typescript": "^2.0.3",
|
||||
"wsrv": "^0.1.5"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -1,4 +1,35 @@
|
||||
# Activiti Diagrams Component for Angular 2
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/package/ng2-activiti-diagrams'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-activiti-diagrams.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@@ -7,71 +38,137 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-diagrams
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
1. Npm
|
||||
|
||||
### Dependencies
|
||||
```sh
|
||||
npm install ng2-activiti-diagrams --save
|
||||
```
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
2. Html
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
The following component needs to be added to your `systemjs.config.js` file:
|
||||
```html
|
||||
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
|
||||
#### raphael
|
||||
|
||||
```sh
|
||||
npm install raphael --save
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
|
||||
```html
|
||||
<!-- Raphael -->
|
||||
<script src="node_modules/raphael/raphael.min.js"></script>
|
||||
```
|
||||
<!-- Diagrams -->
|
||||
<script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- 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">
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
```
|
||||
|
||||
3. SystemJs
|
||||
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- ng2-translat
|
||||
- ng2-alfresco-core
|
||||
- alfresco-js-api
|
||||
- ng2-activiti-diagrams
|
||||
- raphael
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage example Activiti Diagrams
|
||||
The component shows the diagram of the input process.
|
||||
|
||||
This component shows the diagram of a process.
|
||||
|
||||
```html
|
||||
<activiti-diagrams [processDefinitionId]="processDefinitionId"></activiti-diagrams>
|
||||
```
|
||||
|
||||
#### Events
|
||||
**onSuccess**: The event is emitted when the diagrams element are loaded
|
||||
Usage example of this component :
|
||||
|
||||
**onError**: The event is emitted when the an error occur during the loading
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { DiagramsModule } from 'ng2-activiti-diagrams';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-diagrams-demo',
|
||||
template: `<activiti-diagram [processDefinitionId]="'HealthCareExpressVisitationLog:10:27642'"></activiti-diagram>`
|
||||
})
|
||||
|
||||
export class DiagramDemoComponent {
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
DiagramsModule
|
||||
],
|
||||
declarations: [ DiagramDemoComponent ],
|
||||
bootstrap: [ DiagramDemoComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
```
|
||||
|
||||
#### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `onSuccess` | The event is emitted when the diagrams element are loaded |
|
||||
| `onError` | The event is emitted when the an error occur during the loading |
|
||||
|
||||
#### Options
|
||||
**metricPercentages** The array that contains the percentage of the time for each element
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `metricPercentage` | The array that contains the percentage of the time for each element |
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -83,7 +180,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -103,3 +200,27 @@ before performing unit testing.
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
@@ -6,23 +6,35 @@
|
||||
<title>Alfresco Angular 2 Activiti Diagrams - Demo</title>
|
||||
<base href="./">
|
||||
|
||||
<!-- Raphael -->
|
||||
<script src="node_modules/raphael/raphael.min.js"></script>
|
||||
<!-- Diagrams -->
|
||||
<script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
<script src="node_modules/raphael/raphael.min.js"></script>
|
||||
<script src="assets/Polyline.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
@@ -31,7 +43,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<activiti-diagrams-demo></activiti-diagrams-demo>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -37,24 +37,27 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"raphael": "^2.2.6",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"raphael": "^2.2.6",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-activiti-diagrams": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
@@ -63,4 +66,4 @@
|
||||
"typescript": "^2.0.3",
|
||||
"wsrv": "^0.1.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,12 +19,22 @@ import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { DiagramsModule } from 'ng2-activiti-diagrams';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-diagrams-demo',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<label for="processDefinitionId"><b>Insert the ProcessDefinitionId:</b></label><br>
|
||||
<input id="processDefinitionId" size="70" type="text" [(ngModel)]="processDefinitionId">
|
||||
<activiti-diagram [processDefinitionId]="processDefinitionId"></activiti-diagram>`
|
||||
@@ -32,10 +42,47 @@ import { DiagramsModule } from 'ng2-activiti-diagrams';
|
||||
|
||||
export class DiagramDemoComponent {
|
||||
|
||||
private processDefinitionId: string;
|
||||
processDefinitionId: string = 'ThirdProcess:1:15053';
|
||||
|
||||
ngOnInit() {
|
||||
this.processDefinitionId = 'ThirdProcess:1:15053';
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://localhost:9999';
|
||||
|
||||
ticket: string;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = this.host;
|
||||
settingsService.setProviders('BPM');
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
}
|
||||
}
|
||||
|
||||
public updateTicket(): void {
|
||||
localStorage.setItem('ticket-BPM', this.ticket);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.host;
|
||||
this.login();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
this.authenticated = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -44,38 +44,43 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-translate": "2.5.0",
|
||||
"raphael": "^2.2.6",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"raphael": "^2.2.6",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
"cpx": "^1.3.1",
|
||||
"jasmine-ajax": "^3.2.0",
|
||||
"cpx": "1.3.1",
|
||||
"jasmine-core": "2.4.1",
|
||||
"karma": "~0.13.22",
|
||||
"karma-chrome-launcher": "~1.0.1",
|
||||
"karma-coverage": "^1.0.0",
|
||||
"karma-jasmine": "~1.0.2",
|
||||
"karma": "0.13.22",
|
||||
"karma-chrome-launcher": "1.0.1",
|
||||
"karma-coverage": "1.0.0",
|
||||
"karma-jasmine": "1.0.2",
|
||||
"karma-jasmine-ajax": "^0.1.13",
|
||||
"karma-jasmine-html-reporter": "^0.2.0",
|
||||
"karma-mocha-reporter": "^2.0.3",
|
||||
"license-check": "^1.0.4",
|
||||
"remap-istanbul": "^0.6.3",
|
||||
"karma-mocha-reporter": "2.0.3",
|
||||
"karma-jasmine-html-reporter": "0.2.0",
|
||||
"license-check": "1.1.5",
|
||||
"remap-istanbul": "0.6.3",
|
||||
"rimraf": "2.5.2",
|
||||
"traceur": "^0.0.91",
|
||||
"tslint": "^3.8.1",
|
||||
"traceur": "0.0.91",
|
||||
"tslint": "3.15.1",
|
||||
"typescript": "^2.0.3",
|
||||
"wsrv": "^0.1.5"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -1,73 +1,159 @@
|
||||
# Alfresco Bpm Form component for Angular 2
|
||||
# Activiti Form Component for Angular 2
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/package/ng2-activiti-form'>
|
||||
<img src='https://img.shields.io/npm/dtng2-activiti-form.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-form
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
1. Npm
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
```sh
|
||||
npm install ng2-activiti-form --save
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
2. Html
|
||||
|
||||
You must separately install the following libraries for your application:
|
||||
|
||||
- [ng2-translate](https://github.com/ocombe/ng2-translate)
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
```sh
|
||||
npm install --save ng2-translate ng2-alfresco-core
|
||||
```
|
||||
```html
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- 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">
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
#### Dialogs Polyfill
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
To make the dialog working with all the browser you have to add the dialog polyfill to you project:
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
```sh
|
||||
npm install --save dialog-polyfill
|
||||
```
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
3. SystemJs
|
||||
|
||||
```html
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>
|
||||
._dialog_overlay {
|
||||
position: static !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- moment
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- alfresco-js-api
|
||||
- ng2-activiti-form
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage examples
|
||||
|
||||
The component shows a Form from Activiti
|
||||
|
||||
```html
|
||||
<activiti-form [taskId]="taskId"></activiti-form>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { ActivitiFormModule } from 'ng2-activiti-form';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-app-demo',
|
||||
template: `<activiti-form [taskId]="77501"></activiti-form>`
|
||||
})
|
||||
|
||||
export class FormDemoComponent {
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiFormModule.forRoot()
|
||||
],
|
||||
declarations: [FormDemoComponent],
|
||||
bootstrap: [FormDemoComponent]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
### Display form instance by task id
|
||||
|
||||
```html
|
||||
@@ -138,42 +224,38 @@ The recommended set of properties can be found in the following table:
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| taskId | string | | Task id to fetch corresponding form and values. |
|
||||
| formId | string | | The id of the form definition to load and display with custom values. |
|
||||
| formName | string | | Name of hte form definition to load and display with custom values. |
|
||||
| data | `FormValues` | | Custom form values map to be used with the rendered form. |
|
||||
| showTitle | boolean | true | Toggle rendering of the form title. |
|
||||
| showCompleteButton | boolean | true | Toggle rendering of the `Complete` outcome button. |
|
||||
| showSaveButton | boolean | true | Toggle rendering of the `Save` outcome button. |
|
||||
| showDebugButton | boolean | false | Toggle debug options. |
|
||||
| readOnly | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
||||
| showRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
|
||||
| saveMetadata | boolean | false | Store the value of the form as metadata. |
|
||||
| path | string | | Path of the folder where to store the metadata. |
|
||||
| nameNode (optional) | string | true | Name to assign to the new node where the metadata are stored. |
|
||||
| `taskId` | string | | Task id to fetch corresponding form and values. |
|
||||
| `formId` | string | | The id of the form definition to load and display with custom values. |
|
||||
| `formName` | string | | Name of hte form definition to load and display with custom values. |
|
||||
| `data` | FormValues | | Custom form values map to be used with the rendered form. |
|
||||
| `showTitle` | boolean | true | Toggle rendering of the form title. |
|
||||
| `showCompleteButton` | boolean | true | Toggle rendering of the `Complete` outcome button. |
|
||||
| `showSaveButton` | boolean | true | Toggle rendering of the `Save` outcome button. |
|
||||
| `showDebugButton` | boolean | false | Toggle debug options. |
|
||||
| `readOnly` | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
||||
| `showRefreshButton` | boolean | true | Toggle rendering of the `Refresh` button. |
|
||||
| `saveMetadata` | boolean | false | Store the value of the form as metadata. |
|
||||
| `path` | string | | Path of the folder where to store the metadata. |
|
||||
| `nameNode` (optional) | string | true | Name to assign to the new node where the metadata are stored. |
|
||||
|
||||
|
||||
* {path} string - path of the folder where the to store the metadata
|
||||
*
|
||||
* {nameNode} string (optional) - name of the node stored, if not defined the node will be sotred with an uuid as name
|
||||
#### Advanced properties
|
||||
|
||||
The following properties are for complex customisation purposes:
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| form | `FormModel` | | Underlying form model instance. |
|
||||
| debugMode | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
|
||||
| `form` | FormModel | | Underlying form model instance. |
|
||||
| `debugMode` | boolean | false | Toggle debug mode, allows displaying additional data for development and debugging purposes. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| formLoaded | Invoked when form is loaded or reloaded. |
|
||||
| formSaved | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||
| formCompleted | Invoked when form is submitted with `Complete` outcome. |
|
||||
| executeOutcome | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||
| onError | Invoked at any error |
|
||||
| `formLoaded` | Invoked when form is loaded or reloaded. |
|
||||
| `formSaved` | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||
| `formCompleted` | Invoked when form is submitted with `Complete` outcome. |
|
||||
| `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||
| `onError` | Invoked at any error |
|
||||
|
||||
All `form*` events receive an instance of the `FormModel` as event argument for ease of development:
|
||||
|
||||
@@ -242,46 +324,11 @@ There are two additional functions that can be of a great value when controlling
|
||||
**Please note that if `event.preventDefault()` is not called then default outcome behaviour
|
||||
will also be executed after your custom code.**
|
||||
|
||||
## Supported form widgets
|
||||
|
||||
Form renderer provides support for all basic widgets:
|
||||
|
||||
- [x] Tabs
|
||||
- [x] Text
|
||||
- [x] Multiline Text
|
||||
- [x] Number
|
||||
- [x] Checkbox
|
||||
- [x] Date
|
||||
- Dropdown
|
||||
* [x] Manual
|
||||
* [x] REST service
|
||||
- [x] Typeahead
|
||||
- [x] Amount
|
||||
- Radio buttons
|
||||
* [x] Manual
|
||||
* [x] REST service
|
||||
- [x] People
|
||||
- [x] Group of People
|
||||
- [x] Dynamic Table
|
||||
- [x] Hyperlink
|
||||
- Header
|
||||
* [x] Plain header
|
||||
* [x] Collapsible header
|
||||
- [x] Attach file **
|
||||
- [x] Display value
|
||||
- [x] Display text
|
||||
|
||||
** Files may be uploaded from a user's device if the file source selected is
|
||||
'Local file' or 'All sources' and 'link to files' is not selected. Alternatively
|
||||
you can link to files in a configured Alfresco repository by selecting this source
|
||||
explicitly from the list and making sure that 'link to files' is selected. Copying
|
||||
files from Alfresco into Activiti via the control (no linking) is not currently
|
||||
supported, nor is allowing the user to choose between more than one source.
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -293,7 +340,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -313,3 +360,27 @@ before performing unit testing.
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
.idea
|
||||
coverage
|
||||
dist
|
||||
typings
|
||||
!systemjs.config.js
|
||||
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
dist
|
||||
typings
|
||||
@@ -0,0 +1,13 @@
|
||||
# Activiti Form demo
|
||||
|
||||
Install:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Run the project:
|
||||
|
||||
```
|
||||
npm start
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Alfresco Angular 2 Activiti Form - Demo</title>
|
||||
<base href="./">
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<style> .chart {display: block; width: 100%;}</style>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "ng2-activiti-form-demo",
|
||||
"description": "Alfresco Activiti Form Component - Demo",
|
||||
"version": "0.1.0",
|
||||
"author": "Alfresco Software, Ltd.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"clean": "npm install rimraf && rimraf dist node_modules typings dist",
|
||||
"postinstall": "npm run build",
|
||||
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
|
||||
"server": "wsrv -o -s -l",
|
||||
"build": "npm run tslint && rimraf dist && tsc",
|
||||
"build:w": "npm run tslint && rimraf dist && tsc -w",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Mario Romano",
|
||||
"email": "mario.romano@alfresco.com"
|
||||
}
|
||||
],
|
||||
"keywords": [
|
||||
"ng2",
|
||||
"angular",
|
||||
"angular2",
|
||||
"activiti",
|
||||
"activiti-form"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
"@angular/forms": "2.0.0",
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-activiti-form": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
"rimraf": "2.5.2",
|
||||
"tslint": "^3.8.1",
|
||||
"typescript": "^2.0.3",
|
||||
"wsrv": "^0.1.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { ActivitiFormModule } from 'ng2-activiti-form';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<label for="taskId"><b>Insert the taskId:</b></label><br>
|
||||
<input id="taskId" size="10" type="text" [(ngModel)]="taskId">
|
||||
<activiti-form [taskId]="taskId"></activiti-form>`
|
||||
})
|
||||
|
||||
export class FormDemoComponent implements OnInit {
|
||||
|
||||
taskId: number;
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://localhost:9999';
|
||||
|
||||
ticket: string;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = this.host;
|
||||
settingsService.setProviders('BPM');
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
}
|
||||
}
|
||||
|
||||
public updateTicket(): void {
|
||||
localStorage.setItem('ticket-BPM', this.ticket);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.host;
|
||||
this.login();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
this.authenticated = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiFormModule.forRoot()
|
||||
],
|
||||
declarations: [FormDemoComponent],
|
||||
bootstrap: [FormDemoComponent]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* System configuration for Angular 2 samples
|
||||
* Adjust as necessary for your application needs.
|
||||
*/
|
||||
(function (global) {
|
||||
System.config({
|
||||
paths: {
|
||||
// paths serve as alias
|
||||
'npm:': 'node_modules/'
|
||||
},
|
||||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
app: 'dist',
|
||||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
// other libraries
|
||||
'rxjs': 'npm:rxjs',
|
||||
'moment': 'npm:moment/min/moment.min.js',
|
||||
'ng2-translate': 'npm:ng2-translate',
|
||||
'alfresco-js-api': 'npm:alfresco-js-api/dist',
|
||||
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
|
||||
'ng2-activiti-form': 'npm:ng2-activiti-form/dist'
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
app: {
|
||||
main: './main.js',
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
rxjs: {
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
'ng2-translate': { defaultExtension: 'js' },
|
||||
'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
|
||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'}
|
||||
}
|
||||
});
|
||||
})(this);
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"sourceMap": true,
|
||||
"removeComments": true,
|
||||
"declaration": true,
|
||||
"noLib": false,
|
||||
"allowUnreachableCode": false,
|
||||
"allowUnusedLabels": false,
|
||||
"noImplicitAny": false,
|
||||
"noImplicitReturns": false,
|
||||
"noImplicitUseStrict": false,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"outDir": "dist",
|
||||
"types": ["core-js", "jasmine", "node"]
|
||||
},
|
||||
"exclude": [
|
||||
"demo",
|
||||
"node_modules",
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
{
|
||||
"rules": {
|
||||
"align": [
|
||||
true,
|
||||
"parameters",
|
||||
"arguments",
|
||||
"statements"
|
||||
],
|
||||
"ban": false,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space",
|
||||
"check-lowercase"
|
||||
],
|
||||
"curly": true,
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"interface-name": false,
|
||||
"jsdoc-format": true,
|
||||
"label-position": true,
|
||||
"label-undefined": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
180
|
||||
],
|
||||
"member-ordering": [
|
||||
true,
|
||||
"public-before-private",
|
||||
"static-before-instance",
|
||||
"variables-before-functions"
|
||||
],
|
||||
"no-any": false,
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-conditional-assignment": true,
|
||||
"no-consecutive-blank-lines": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-constructor-vars": false,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-key": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-empty": true,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": false,
|
||||
"no-internal-module": true,
|
||||
"no-require-imports": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unreachable": true,
|
||||
"no-unused-expression": true,
|
||||
"no-unused-variable": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"no-var-requires": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": [
|
||||
true,
|
||||
"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"quotemark": [
|
||||
true,
|
||||
"single",
|
||||
"avoid-escape"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": true,
|
||||
"switch-default": true,
|
||||
"trailing-comma": [
|
||||
true,
|
||||
{
|
||||
"multiline": "never",
|
||||
"singleline": "never"
|
||||
}
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef": false,
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"use-strict": false,
|
||||
"variable-name": [
|
||||
true,
|
||||
"check-format",
|
||||
"allow-leading-underscore",
|
||||
"ban-keywords"
|
||||
],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type",
|
||||
"check-module",
|
||||
"check-decl"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -52,23 +52,27 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
fonts/
|
||||
|
||||
/.editorconfig
|
||||
/.travis.yml
|
||||
/*.js
|
||||
/*.json
|
||||
/*.ts
|
||||
/*.js.map
|
||||
/.npmignore
|
||||
@@ -1,4 +1,35 @@
|
||||
# Activiti Task List Component for Angular 2
|
||||
# Activiti Process List Component for Angular 2
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/package/ng2-activiti-processlist'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-activiti-processlist.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Displays lists of process instances both active and completed, using any defined process filter, and
|
||||
render details of any chosen instance.
|
||||
@@ -10,49 +41,70 @@ necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-processlist
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
1. Npm
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
```sh
|
||||
npm install ng2-activiti-processlist --save
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
2. Html
|
||||
|
||||
You must separately install the following libraries for your application:
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
- [ng2-translate](https://github.com/ocombe/ng2-translate)
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
|
||||
- [ng2-activiti-tasklist](https://www.npmjs.com/package/ng2-activiti-tasklist)
|
||||
```html
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-tasklist
|
||||
```
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- 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">
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
## Usage
|
||||
```
|
||||
|
||||
3. SystemJs
|
||||
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- ng2-translate
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-core
|
||||
- ng2-activiti-form
|
||||
- ng2-alfresco-datatable
|
||||
- ng2-activiti-tasklist
|
||||
- ng2-activiti-processlist
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage
|
||||
|
||||
### Activiti Process Instance List
|
||||
|
||||
@@ -62,33 +114,102 @@ This component renders a list containing all the process instances matched by th
|
||||
<activiti-process-instance-list [filter]="processFilterModel"></activiti-tasklist>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { FilterRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<activiti-process-instance-list [filter]="filterRepresentationModel" [data]="dataProcesses"
|
||||
#activitiprocesslist></activiti-process-instance-list>`
|
||||
})
|
||||
class MyDemoApp {
|
||||
|
||||
dataProcesses: ObjectDataTableAdapter;
|
||||
|
||||
filterRepresentationModel: FilterRepresentationModel;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
this.dataProcesses = new ObjectDataTableAdapter([], [
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
|
||||
]
|
||||
);
|
||||
this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
|
||||
|
||||
this.filterRepresentationModel = new FilterRepresentationModel({
|
||||
appId: '3003',
|
||||
filter: {
|
||||
processDefinitionKey: null,
|
||||
name: null,
|
||||
state: 'running',
|
||||
sort: 'created-desc'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiProcessListModule
|
||||
],
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
**filter**: { FilterModel } (required) FilterModel object that
|
||||
is passed to the process instance list API to filter the returned list.
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`filter`| { UserProcessInstanceFilterRepresentationModel } (required) UserProcessInstanceFilterRepresentationModel object that is passed to the process instance list API to filter the returned list. |
|
||||
|
||||
Example:
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Running Processes",
|
||||
"recent": false,
|
||||
"icon": "glyphicon-align-left",
|
||||
"filter": {
|
||||
"appDefinitionId": "1",
|
||||
"sort": "created-desc",
|
||||
"name": "",
|
||||
"state": "open",
|
||||
"page": "0",
|
||||
"size": "25"
|
||||
},
|
||||
"appId": 1001
|
||||
appId: '3003',
|
||||
filter:{
|
||||
processDefinitionKey: null,
|
||||
name:null,
|
||||
state:'running',
|
||||
sort: 'created-desc'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**schemaColumn**: {any} List of columns to display in the process instances datatable
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`schemaColumn`| {any} List of columns to display in the process instances datatable |
|
||||
|
||||
Example:
|
||||
|
||||
@@ -122,17 +243,20 @@ process instances are displayed in the list.
|
||||
|
||||
#### Options
|
||||
|
||||
- **`appId`**: Display filters available to the current user for the application with the specified ID
|
||||
- **`appName`**: Display filters available to the current user for the application with the specified name
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `appId` | Display filters available to the current user for the application with the specified ID |
|
||||
| `appName` | Display filters available to the current user for the application with the specified name |
|
||||
|
||||
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||
|
||||
#### Events
|
||||
|
||||
- **`onSuccess`**: Emitted when the list of filters hase been successfully loaded from the server
|
||||
- **`onError`**: Emitted when an error occurred fetching the list of process instance filters, or fetching the
|
||||
list of deployed applications when an app name was specified.
|
||||
- **`filterClick`**: Emitted when the user selects a filter from the list
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `onSuccess` | Emitted when the list of filters hase been successfully loaded from the server |
|
||||
| `onError` | Emitted when an error occurs |
|
||||
| `ilterClick` | Emitted when the user selects a filter from the list |
|
||||
|
||||
### Start Process Button component
|
||||
|
||||
@@ -145,7 +269,10 @@ to specify some basic details needed to start a new process instance.
|
||||
|
||||
#### Options
|
||||
|
||||
- **`appId`**: Limit the list of processes which can be started to those contained in the specified app
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `appId` | Limit the list of processes which can be started to those contained in the specified app |
|
||||
|
||||
#### Events
|
||||
|
||||
@@ -161,12 +288,18 @@ This component displays detailed information on a specified process instance
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstanceId` | (required): The numeric ID of the process instance to display |
|
||||
|
||||
#### Events
|
||||
|
||||
- **`processCancelledEmitter`**: Emitted when the current process is cancelled by the user from within the component
|
||||
- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processCancelledEmitter` | Emitted when the current process is cancelled by the user from within the component |
|
||||
| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
|
||||
|
||||
### Process Instance Details Header component
|
||||
|
||||
@@ -178,11 +311,17 @@ This is a sub-component of the process details component, which renders some gen
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstance`** (required): Full details of the process instance to display information about
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstance` | (required): Full details of the process instance to display information about |
|
||||
|
||||
#### Events
|
||||
|
||||
- **`processCancelled`**: Emitted when the Cancel Process button shown by the component is clicked
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processCancelled` | Emitted when the Cancel Process button shown by the component is clicked |
|
||||
|
||||
### Process Instance Tasks component
|
||||
|
||||
@@ -194,12 +333,17 @@ Lists both the active and completed tasks associated with a particular process i
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display tasks for
|
||||
- **`showRefreshButton`** (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstanceId` | (required): The numeric ID of the process instance to display tasks for |
|
||||
| `showRefreshButton` | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
|
||||
|
||||
#### Events
|
||||
|
||||
- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
|
||||
|
||||
### Process Instance Comments component
|
||||
|
||||
@@ -211,7 +355,10 @@ Displays comments associated with a particular process instances and allows the
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display comments for
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstanceId` | (required): The numeric ID of the process instance to display comments for |
|
||||
|
||||
#### Events
|
||||
|
||||
@@ -221,6 +368,7 @@ No events are emitted by this component
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -232,7 +380,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -251,4 +399,28 @@ before performing unit testing.
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
||||
@@ -1,34 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ng2-activiti-processlist Angular 2</title>
|
||||
<base href="/">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Alfresco Angular 2 Activiti Process - Demo</title>
|
||||
<base href="./">
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<style> .chart {display: block; width: 100%;}</style>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<body>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>
|
||||
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
|
||||
</my-app>
|
||||
</body>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"clean": "npm install rimraf && rimraf dist node_modules typings dist",
|
||||
"postinstall": "npm run typings && npm run build",
|
||||
"postinstall": "npm run build",
|
||||
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
|
||||
"server": "wsrv -o -s -l",
|
||||
"build": "npm run tslint && rimraf dist && npm run tsc",
|
||||
"build:w": "npm run tslint && rimraf dist && npm run tsc:w",
|
||||
"build": "npm run tslint && rimraf dist && tsc",
|
||||
"build:w": "npm run tslint && rimraf dist && tsc -w",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
|
||||
@@ -30,25 +30,30 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-activiti-tasklist": "0.3.3",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-activiti-processlist": "^0.3.0",
|
||||
"ng2-activiti-tasklist": "0.3.3"
|
||||
"ng2-activiti-processlist": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -12,94 +12,221 @@
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: `<label for="token"><b>Insert a valid access token / ticket:</b></label><br>
|
||||
<input id="token" type="text" size="48" (change)="updateToken();documentList.reload()" [(ngModel)]="token"><br>
|
||||
<label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
|
||||
<input id="token" type="text" size="48" (change)="updateHost();documentList.reload()" [(ngModel)]="bpmHost"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ bpmHost }} with user: admin, admin, you can still try to add a valid token to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
<label for="token"><b>Insert a scriptPath</b></label><br>
|
||||
<input id="token" type="text" size="48" [(ngModel)]="scriptPath"><br>
|
||||
<label for="token"><b>Insert a contextRoot</b></label><br>
|
||||
<input id="token" type="text" size="48" [(ngModel)]="contextRoot"><br>
|
||||
<label for="token"><b>Insert a servicePath</b></label><br>
|
||||
<input id="token" type="text" size="48" [(ngModel)]="servicePath"><br>
|
||||
<div class="container" *ngIf="authenticated">
|
||||
<activiti-process-instance-list></activiti-process-instance-list>
|
||||
</div>`
|
||||
})
|
||||
class MyDemoApp implements OnInit {
|
||||
|
||||
authenticated: boolean;
|
||||
bpmHost: string = 'http://127.0.0.1:9999';
|
||||
token: string;
|
||||
|
||||
constructor(
|
||||
private authService: AlfrescoAuthenticationService,
|
||||
private settingsService: AlfrescoSettingsService
|
||||
) {
|
||||
console.log('constructor');
|
||||
|
||||
settingsService.setProviders('BPM');
|
||||
settingsService.bpmHost = this.bpmHost;
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.token = this.authService.getTicketBpm();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.login();
|
||||
}
|
||||
|
||||
public updateToken(): void {
|
||||
localStorage.setItem('token', this.token);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.bpmHost;
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
token => {
|
||||
console.log(token);
|
||||
this.token = token;
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppDefinitionRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
|
||||
<header class="mdl-layout__header">
|
||||
|
||||
<!-- TABS -->
|
||||
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
|
||||
<a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
|
||||
<a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mdl-layout__content activiti" #tabmain>
|
||||
|
||||
<!-- APPPS COMPONENT -->
|
||||
|
||||
<section class="mdl-layout__tab-panel is-active" id="apps">
|
||||
<div class="page-content">
|
||||
<activiti-apps [layoutType]="'GRID'" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROCESS COMPONENT -->
|
||||
|
||||
<section class="mdl-layout__tab-panel" id="processes">
|
||||
<div class="page-content">
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col task-column">
|
||||
<span>Process Filters</span>
|
||||
<activiti-start-process-instance [appId]="appId"></activiti-start-process-instance>
|
||||
<activiti-process-instance-filters
|
||||
[appId]="appId"
|
||||
(filterClick)="onProcessFilterClick($event)"
|
||||
(onSuccess)="onSuccessProcessFilterList($event)"
|
||||
#activitiprocessfilter></activiti-process-instance-filters>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--3-col task-column">
|
||||
<span>Process List</span>
|
||||
<activiti-process-instance-list
|
||||
[filter]="processFilter"
|
||||
[data]="dataProcesses"
|
||||
(rowClick)="onProcessRowClick($event)"
|
||||
(onSuccess)="onSuccessProcessList($event)"
|
||||
#activitiprocesslist></activiti-process-instance-list>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--7-col task-column">
|
||||
<span>Process Details</span>
|
||||
<activiti-process-instance-details
|
||||
[processInstanceId]="currentProcessInstanceId"
|
||||
(taskFormCompleted)="taskFormCompleted()"
|
||||
(processCancelled)="processCancelled()"
|
||||
#activitiprocessdetails></activiti-process-instance-details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
class MyDemoApp implements OnInit {
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://localhost:9999';
|
||||
|
||||
ticket: string;
|
||||
|
||||
@ViewChild('tabmain')
|
||||
tabMain: any;
|
||||
|
||||
@ViewChild('tabheader')
|
||||
tabHeader: any;
|
||||
|
||||
@ViewChild('activitiprocessfilter')
|
||||
activitiprocessfilter: any;
|
||||
|
||||
@ViewChild('activitiprocesslist')
|
||||
activitiprocesslist: any;
|
||||
|
||||
@ViewChild('activitiprocessdetails')
|
||||
activitiprocessdetails: any;
|
||||
|
||||
@Input()
|
||||
appId: number;
|
||||
|
||||
processFilter: any;
|
||||
|
||||
currentProcessInstanceId: string;
|
||||
|
||||
dataProcesses: ObjectDataTableAdapter;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = this.host;
|
||||
settingsService.setProviders('BPM');
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
}
|
||||
|
||||
this.dataProcesses = new ObjectDataTableAdapter(
|
||||
[],
|
||||
[
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
|
||||
]
|
||||
);
|
||||
this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
|
||||
}
|
||||
|
||||
public updateTicket(): void {
|
||||
localStorage.setItem('ticket-BPM', this.ticket);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.host;
|
||||
this.login();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
this.authenticated = false;
|
||||
});
|
||||
}
|
||||
|
||||
onAppClick(app: AppDefinitionRepresentationModel) {
|
||||
this.appId = app.id;
|
||||
|
||||
this.processFilter = null;
|
||||
this.currentProcessInstanceId = null;
|
||||
|
||||
this.changeTab('apps', 'processes');
|
||||
}
|
||||
|
||||
onProcessFilterClick(event: any) {
|
||||
this.processFilter = event;
|
||||
}
|
||||
|
||||
onSuccessProcessFilterList(event: any) {
|
||||
this.processFilter = this.activitiprocessfilter.getCurrentFilter();
|
||||
}
|
||||
|
||||
onSuccessProcessList(event: any) {
|
||||
this.currentProcessInstanceId = this.activitiprocesslist.getCurrentProcessId();
|
||||
}
|
||||
|
||||
onProcessRowClick(processInstanceId) {
|
||||
this.currentProcessInstanceId = processInstanceId;
|
||||
}
|
||||
|
||||
processCancelled(data: any) {
|
||||
this.currentProcessInstanceId = null;
|
||||
this.activitiprocesslist.reload();
|
||||
}
|
||||
|
||||
changeTab(origin: string, destination: string) {
|
||||
this.tabMain.nativeElement.children[origin].classList.remove('is-active');
|
||||
this.tabMain.nativeElement.children[destination].classList.add('is-active');
|
||||
|
||||
this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
|
||||
this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiProcessListModule
|
||||
ActivitiProcessListModule,
|
||||
ActivitiTaskListModule.forRoot()
|
||||
],
|
||||
declarations: [ MyDemoApp ],
|
||||
bootstrap: [ MyDemoApp ]
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
@@ -27,7 +27,9 @@
|
||||
'alfresco-js-api': 'npm:alfresco-js-api/dist',
|
||||
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
|
||||
'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
|
||||
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist'
|
||||
'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
|
||||
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
|
||||
'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist'
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
@@ -42,7 +44,9 @@
|
||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'}
|
||||
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'}
|
||||
}
|
||||
});
|
||||
})(this);
|
||||
|
||||
@@ -51,21 +51,29 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-activiti-tasklist": "0.3.3",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-activiti-tasklist": "0.3.3",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { UserProcessInstanceFilterRepresentationModel } from '../models/filter.model';
|
||||
import { FilterRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
|
||||
export var fakeFilters = {
|
||||
size: 0, total: 0, start: 0,
|
||||
data: [new UserProcessInstanceFilterRepresentationModel({
|
||||
data: [new FilterRepresentationModel({
|
||||
'name': 'Running',
|
||||
'appId': '22',
|
||||
'recent': true,
|
||||
@@ -30,14 +30,14 @@ export var fakeFilters = {
|
||||
|
||||
export var fakeEmptyFilters = {
|
||||
size: 0, total: 0, start: 0,
|
||||
data: [ ]
|
||||
data: []
|
||||
};
|
||||
|
||||
export var fakeApi = {
|
||||
activiti: {
|
||||
userFiltersApi: {
|
||||
getUserProcessInstanceFilters: (filterOpts) => Promise.resolve({}),
|
||||
createUserProcessInstanceFilter: (filter: UserProcessInstanceFilterRepresentationModel) => Promise.resolve(filter)
|
||||
createUserProcessInstanceFilter: (filter: FilterRepresentationModel) => Promise.resolve(filter)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@
|
||||
import { Component, Input, OnInit, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessService } from './../services/activiti-process.service';
|
||||
import { Comment } from '../models/comment.model';
|
||||
import { Comment } from 'ng2-activiti-tasklist';
|
||||
import { Observer } from 'rxjs/Observer';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@
|
||||
import { Component, Output, EventEmitter, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessService } from './../services/activiti-process.service';
|
||||
import { FilterRepresentationModel } from '../models/filter.model';
|
||||
import { FilterRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
import { Observable, Observer } from 'rxjs/Rx';
|
||||
|
||||
declare let componentHandler: any;
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@
|
||||
import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessService } from './../services/activiti-process.service';
|
||||
import { TaskDetailsModel } from '../models/task-details.model';
|
||||
import { TaskDetailsModel } from 'ng2-activiti-tasklist';
|
||||
import { Observable, Observer } from 'rxjs/Rx';
|
||||
import { DatePipe } from '@angular/common';
|
||||
|
||||
|
||||
+10
-8
@@ -15,17 +15,17 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataRowEvent, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
|
||||
import { TaskQueryRequestRepresentationModel, FilterRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
import { ActivitiProcessService } from '../services/activiti-process.service';
|
||||
import { UserProcessInstanceFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'activiti-process-instance-list',
|
||||
styles: [
|
||||
`
|
||||
`
|
||||
:host h1 {
|
||||
font-size:22px
|
||||
}
|
||||
@@ -36,7 +36,7 @@ import { UserProcessInstanceFilterRepresentationModel, TaskQueryRequestRepresent
|
||||
export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input()
|
||||
filter: UserProcessInstanceFilterRepresentationModel;
|
||||
filter: FilterRepresentationModel;
|
||||
|
||||
@Input()
|
||||
data: DataTableAdapter;
|
||||
@@ -60,7 +60,7 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
||||
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
|
||||
];
|
||||
|
||||
constructor (private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) {
|
||||
constructor(private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) {
|
||||
if (translate !== null) {
|
||||
translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src');
|
||||
}
|
||||
@@ -192,12 +192,14 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
||||
return tasks;
|
||||
}
|
||||
|
||||
private convertProcessInstanceToTaskQuery(processFilter: UserProcessInstanceFilterRepresentationModel) {
|
||||
let requestNode = {appDefinitionId: processFilter.appId,
|
||||
private convertProcessInstanceToTaskQuery(processFilter: FilterRepresentationModel) {
|
||||
let requestNode = {
|
||||
appDefinitionId: processFilter.appId,
|
||||
processDefinitionKey: processFilter.filter.processDefinitionKey,
|
||||
text: processFilter.filter.name,
|
||||
state: processFilter.filter.state,
|
||||
sort: processFilter.filter.sort};
|
||||
sort: processFilter.filter.sort
|
||||
};
|
||||
return new TaskQueryRequestRepresentationModel(requestNode);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* Comment submitted against a process
|
||||
*
|
||||
* @returns {Comment} .
|
||||
*/
|
||||
import { User } from './user.model';
|
||||
|
||||
export class Comment {
|
||||
id: number;
|
||||
message: string;
|
||||
created: string;
|
||||
createdBy: User;
|
||||
|
||||
constructor(id: number, message: string, created: string, createdBy: User) {
|
||||
this.id = id;
|
||||
this.message = message;
|
||||
this.created = created;
|
||||
this.createdBy = createdBy;
|
||||
}
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the app definition.
|
||||
*
|
||||
*
|
||||
* @returns {AppDefinitionRepresentationModel} .
|
||||
*/
|
||||
export class AppDefinitionRepresentationModel {
|
||||
defaultAppId: string;
|
||||
deploymentId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
theme: string;
|
||||
icon: string;
|
||||
id: number;
|
||||
modelId: number;
|
||||
tenantId: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.defaultAppId = obj && obj.defaultAppId || null;
|
||||
this.deploymentId = obj && obj.deploymentId || false;
|
||||
this.name = obj && obj.name || null;
|
||||
this.description = obj && obj.description || null;
|
||||
this.theme = obj && obj.theme || null;
|
||||
this.icon = obj && obj.icon || null;
|
||||
this.id = obj && obj.id;
|
||||
this.modelId = obj && obj.modelId;
|
||||
this.tenantId = obj && obj.tenantId;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the filter.
|
||||
*
|
||||
*
|
||||
* @returns {FilterRepresentationModel} .
|
||||
*/
|
||||
export class FilterRepresentationModel {
|
||||
id: number;
|
||||
appId: string;
|
||||
name: string;
|
||||
recent: boolean;
|
||||
icon: string;
|
||||
filter: FilterParamRepresentationModel;
|
||||
index: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.appId = obj && obj.appId || null;
|
||||
this.name = obj && obj.name || null;
|
||||
this.recent = obj && obj.recent || false;
|
||||
this.icon = obj && obj.icon || null;
|
||||
this.filter = new FilterParamRepresentationModel(obj.filter);
|
||||
this.index = obj && obj.index;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the parameters of a filter.
|
||||
*
|
||||
*
|
||||
* @returns {FilterParamRepresentationModel} .
|
||||
*/
|
||||
export class FilterParamRepresentationModel {
|
||||
processDefinitionId: string;
|
||||
processDefinitionKey: string;
|
||||
name: string;
|
||||
state: string;
|
||||
sort: string;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.processDefinitionId = obj && obj.processDefinitionId || null;
|
||||
this.processDefinitionKey = obj && obj.processDefinitionKey || null;
|
||||
this.name = obj && obj.name || null;
|
||||
this.state = obj && obj.state || null;
|
||||
this.sort = obj && obj.sort || null;
|
||||
}
|
||||
}
|
||||
|
||||
export class UserProcessInstanceFilterRepresentationModel extends FilterRepresentationModel {
|
||||
public filter: ProcessInstanceFilterRepresentation;
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.filter = new ProcessInstanceFilterRepresentation(obj.filter);
|
||||
}
|
||||
}
|
||||
|
||||
export class ProcessInstanceFilterRepresentation extends FilterParamRepresentationModel {
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
}
|
||||
}
|
||||
|
||||
export class UserTaskFilterRepresentationModel extends FilterRepresentationModel {
|
||||
public filter: TaskFilterRepresentationModel;
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.filter = new TaskFilterRepresentationModel(obj.filter);
|
||||
}
|
||||
}
|
||||
|
||||
export class TaskFilterRepresentationModel extends FilterParamRepresentationModel {
|
||||
assignment: string;
|
||||
dueAfter: Date;
|
||||
dueBefore: Date;
|
||||
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.assignment = obj && obj.assignment || null;
|
||||
this.dueAfter = obj && obj.dueAfter || null;
|
||||
this.dueBefore = obj && obj.dueBefore || null;
|
||||
}
|
||||
}
|
||||
|
||||
export class TaskQueryRequestRepresentationModel {
|
||||
appDefinitionId: string;
|
||||
processInstanceId: string;
|
||||
processDefinitionId: string;
|
||||
processDefinitionKey: string;
|
||||
text: string;
|
||||
assignment: string;
|
||||
state: string;
|
||||
sort: string;
|
||||
page: number;
|
||||
size: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.appDefinitionId = obj && obj.appDefinitionId || null;
|
||||
this.processInstanceId = obj && obj.processInstanceId || null;
|
||||
this.processDefinitionId = obj && obj.processDefinitionId || null;
|
||||
this.processDefinitionKey = obj && obj.processDefinitionKey || null;
|
||||
this.text = obj && obj.text || null;
|
||||
this.assignment = obj && obj.assignment || null;
|
||||
this.state = obj && obj.state || null;
|
||||
this.sort = obj && obj.sort || null;
|
||||
this.page = obj && obj.page || 0;
|
||||
this.size = obj && obj.size || 25;
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the details of a task.
|
||||
*
|
||||
*
|
||||
* @returns {TaskDetailsModel} .
|
||||
*/
|
||||
import { User } from './user.model';
|
||||
|
||||
export class TaskDetailsModel {
|
||||
id: string;
|
||||
name: string;
|
||||
assignee: User;
|
||||
priority: number;
|
||||
adhocTaskCanBeReassigned: number;
|
||||
category: string;
|
||||
created: string;
|
||||
description: string;
|
||||
dueDate: string;
|
||||
duration: string;
|
||||
endDate: string;
|
||||
executionId: string;
|
||||
formKey: string;
|
||||
initiatorCanCompleteTask: boolean = false;
|
||||
managerOfCandidateGroup: boolean = false;
|
||||
memberOfCandidateGroup: boolean = false;
|
||||
memberOfCandidateUsers: boolean = false;
|
||||
involvedPeople: User [];
|
||||
parentTaskId: string;
|
||||
parentTaskName: string;
|
||||
processDefinitionCategory: string;
|
||||
processDefinitionDeploymentId: string;
|
||||
processDefinitionDescription: string;
|
||||
processDefinitionId: string;
|
||||
processDefinitionKey: string;
|
||||
processDefinitionName: string;
|
||||
processDefinitionVersion: number = 0;
|
||||
processInstanceId: string;
|
||||
processInstanceName: string;
|
||||
processInstanceStartUserId: string;
|
||||
taskDefinitionKey: string;
|
||||
|
||||
constructor(obj: any) {
|
||||
this.id = obj.id;
|
||||
this.name = obj.name;
|
||||
this.priority = obj.priority;
|
||||
this.assignee = new User(obj.assignee.id, obj.assignee.email, obj.assignee.firstName, obj.assignee.lastName);
|
||||
this.adhocTaskCanBeReassigned = obj.adhocTaskCanBeReassigned;
|
||||
this.created = obj.created;
|
||||
this.description = obj.description;
|
||||
this.dueDate = obj.dueDate;
|
||||
this.duration = obj.duration;
|
||||
this.endDate = obj.endDate;
|
||||
this.executionId = obj.executionId;
|
||||
this.formKey = obj.formKey;
|
||||
this.initiatorCanCompleteTask = obj.initiatorCanCompleteTask;
|
||||
this.managerOfCandidateGroup = obj.managerOfCandidateGroup;
|
||||
this.memberOfCandidateGroup = obj.memberOfCandidateGroup;
|
||||
this.memberOfCandidateUsers = obj.memberOfCandidateUsers;
|
||||
this.involvedPeople = obj.involvedPeople;
|
||||
this.parentTaskId = obj.parentTaskId;
|
||||
this.parentTaskName = obj.parentTaskName;
|
||||
this.processDefinitionCategory = obj.processDefinitionCategory;
|
||||
this.processDefinitionDeploymentId = obj.processDefinitionDeploymentId;
|
||||
this.processDefinitionDescription = obj.processDefinitionDescription;
|
||||
this.processDefinitionId = obj.processDefinitionId;
|
||||
this.processDefinitionKey = obj.processDefinitionKey;
|
||||
this.processDefinitionName = obj.processDefinitionName;
|
||||
this.processDefinitionVersion = obj.processDefinitionVersion;
|
||||
this.processInstanceId = obj.processInstanceId;
|
||||
this.processInstanceName = obj.processInstanceName;
|
||||
this.processInstanceStartUserId = obj.processInstanceStartUserId;
|
||||
this.taskDefinitionKey = obj.taskDefinitionKey;
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the user.
|
||||
*
|
||||
*
|
||||
* @returns {User} .
|
||||
*/
|
||||
|
||||
export class User {
|
||||
id: number;
|
||||
email: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
|
||||
constructor(id: number, email: string, firstName: string, lastName: string) {
|
||||
this.id = id;
|
||||
this.email = email;
|
||||
this.firstName = firstName;
|
||||
this.lastName = lastName;
|
||||
}
|
||||
}
|
||||
@@ -15,13 +15,11 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {AlfrescoAuthenticationService} from 'ng2-alfresco-core';
|
||||
import {ProcessInstance} from '../models/process-instance';
|
||||
import {TaskQueryRequestRepresentationModel, UserProcessInstanceFilterRepresentationModel} from '../models/filter.model';
|
||||
import {User} from '../models/user.model';
|
||||
import {Comment} from '../models/comment.model';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { ProcessInstance } from '../models/process-instance';
|
||||
import { User, Comment, FilterRepresentationModel, TaskQueryRequestRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/catch';
|
||||
|
||||
@@ -61,9 +59,9 @@ export class ActivitiProcessService {
|
||||
} : {};
|
||||
return Observable.fromPromise(this.callApiGetUserProcessInstanceFilters(filterOpts))
|
||||
.map((response: any) => {
|
||||
let filters: UserProcessInstanceFilterRepresentationModel[] = [];
|
||||
response.data.forEach((filter: UserProcessInstanceFilterRepresentationModel) => {
|
||||
let filterModel = new UserProcessInstanceFilterRepresentationModel(filter);
|
||||
let filters: FilterRepresentationModel[] = [];
|
||||
response.data.forEach((filter: FilterRepresentationModel) => {
|
||||
let filterModel = new FilterRepresentationModel(filter);
|
||||
filters.push(filterModel);
|
||||
});
|
||||
if (response && response.data && response.data.length === 0) {
|
||||
@@ -77,10 +75,10 @@ export class ActivitiProcessService {
|
||||
/**
|
||||
* Create and return the default filters
|
||||
* @param appId
|
||||
* @returns {UserProcessInstanceFilterRepresentationModel[]}
|
||||
* @returns {FilterRepresentationModel[]}
|
||||
*/
|
||||
private createDefaultFilters(appId: string): UserProcessInstanceFilterRepresentationModel[] {
|
||||
let filters: UserProcessInstanceFilterRepresentationModel[] = [];
|
||||
private createDefaultFilters(appId: string): FilterRepresentationModel[] {
|
||||
let filters: FilterRepresentationModel[] = [];
|
||||
|
||||
let involvedTasksFilter = this.getRunningFilterInstance(appId);
|
||||
this.addFilter(involvedTasksFilter);
|
||||
@@ -100,10 +98,10 @@ export class ActivitiProcessService {
|
||||
/**
|
||||
* Return a static Running filter instance
|
||||
* @param appId
|
||||
* @returns {UserProcessInstanceFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
private getRunningFilterInstance(appId: string): UserProcessInstanceFilterRepresentationModel {
|
||||
return new UserProcessInstanceFilterRepresentationModel({
|
||||
private getRunningFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'Running',
|
||||
'appId': appId,
|
||||
'recent': true,
|
||||
@@ -115,10 +113,10 @@ export class ActivitiProcessService {
|
||||
/**
|
||||
* Return a static Completed filter instance
|
||||
* @param appId
|
||||
* @returns {UserProcessInstanceFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
private getCompletedFilterInstance(appId: string): UserProcessInstanceFilterRepresentationModel {
|
||||
return new UserProcessInstanceFilterRepresentationModel({
|
||||
private getCompletedFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'Completed',
|
||||
'appId': appId,
|
||||
'recent': false,
|
||||
@@ -130,10 +128,10 @@ export class ActivitiProcessService {
|
||||
/**
|
||||
* Return a static All filter instance
|
||||
* @param appId
|
||||
* @returns {UserProcessInstanceFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
private getAllFilterInstance(appId: string): UserProcessInstanceFilterRepresentationModel {
|
||||
return new UserProcessInstanceFilterRepresentationModel({
|
||||
private getAllFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'All',
|
||||
'appId': appId,
|
||||
'recent': true,
|
||||
@@ -144,13 +142,13 @@ export class ActivitiProcessService {
|
||||
|
||||
/**
|
||||
* Add a filter
|
||||
* @param filter - UserProcessInstanceFilterRepresentationModel
|
||||
* @returns {UserProcessInstanceFilterRepresentationModel}
|
||||
* @param filter - FilterRepresentationModel
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
addFilter(filter: UserProcessInstanceFilterRepresentationModel): Observable<UserProcessInstanceFilterRepresentationModel> {
|
||||
addFilter(filter: FilterRepresentationModel): Observable<FilterRepresentationModel> {
|
||||
return Observable.fromPromise(this.callApiAddFilter(filter))
|
||||
.map(res => res)
|
||||
.map((response: UserProcessInstanceFilterRepresentationModel) => {
|
||||
.map((response: FilterRepresentationModel) => {
|
||||
return response;
|
||||
}).catch(this.handleError);
|
||||
}
|
||||
@@ -187,8 +185,12 @@ export class ActivitiProcessService {
|
||||
.map((response: any) => {
|
||||
let comments: Comment[] = [];
|
||||
response.data.forEach((comment) => {
|
||||
let user = new User(
|
||||
comment.createdBy.id, comment.createdBy.email, comment.createdBy.firstName, comment.createdBy.lastName);
|
||||
let user = new User({
|
||||
id: comment.createdBy.id,
|
||||
email: comment.createdBy.email,
|
||||
firstName: comment.createdBy.firstName,
|
||||
lastName: comment.createdBy.lastName
|
||||
});
|
||||
comments.push(new Comment(comment.id, comment.message, comment.created, user));
|
||||
});
|
||||
return comments;
|
||||
@@ -203,7 +205,7 @@ export class ActivitiProcessService {
|
||||
*/
|
||||
addProcessInstanceComment(id: string, message: string): Observable<Comment> {
|
||||
return Observable.fromPromise(
|
||||
this.authService.getAlfrescoApi().activiti.commentsApi.addProcessInstanceComment({message: message}, id)
|
||||
this.authService.getAlfrescoApi().activiti.commentsApi.addProcessInstanceComment({message: message}, id)
|
||||
)
|
||||
.map(res => res)
|
||||
.map((response: Comment) => {
|
||||
@@ -251,7 +253,7 @@ export class ActivitiProcessService {
|
||||
return this.authService.getAlfrescoApi().activiti.userFiltersApi.getUserProcessInstanceFilters(filterOpts);
|
||||
}
|
||||
|
||||
private callApiAddFilter(filter: UserProcessInstanceFilterRepresentationModel) {
|
||||
private callApiAddFilter(filter: FilterRepresentationModel) {
|
||||
return this.authService.getAlfrescoApi().activiti.userFiltersApi.createUserProcessInstanceFilter(filter);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -1,105 +1,224 @@
|
||||
# Activiti Task List Component for Angular 2
|
||||
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/package/ng2-activiti-tasklist'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-activiti-tasklist.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Displays lists of process instances both active and completed, using any defined process filter, and
|
||||
render details of any chosen instance.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-tasklist
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
1. Npm
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
```sh
|
||||
npm install ng2-activiti-tasklist --save
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
2. Html
|
||||
|
||||
You must separately install the following libraries for your application:
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
- [ng2-translate](https://github.com/ocombe/ng2-translate)
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
|
||||
```html
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable
|
||||
```
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- 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">
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
#### Dialogs Polyfill
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
To make the dialog working with all the browser you have to add the dialog polyfill to you project:
|
||||
```
|
||||
|
||||
```sh
|
||||
npm install --save dialog-polyfill
|
||||
```
|
||||
3. SystemJs
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
```html
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>
|
||||
._dialog_overlay {
|
||||
position: static !important;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
- ng2-translate
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-core
|
||||
- ng2-activiti-form
|
||||
- ng2-alfresco-datatable
|
||||
- ng2-activiti-tasklist
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage example Activiti Task List
|
||||
The component shows the list of all the tasks filter by the
|
||||
FilterParamModel passed in input.
|
||||
|
||||
The component shows the list of all the tasks filter by the FilterParamRepresentationModel passed in input.
|
||||
|
||||
```html
|
||||
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { FilterRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<activiti-tasklist [taskFilter]="filterRepresentationModel"
|
||||
[data]="dataTasks"
|
||||
#activititasklist></activiti-tasklist>`
|
||||
})
|
||||
class MyDemoApp {
|
||||
|
||||
dataTasks: ObjectDataTableAdapter;
|
||||
|
||||
filterRepresentationModel: FilterRepresentationModel;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
this.dataTasks = new ObjectDataTableAdapter([], [
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
|
||||
]
|
||||
);
|
||||
this.dataTasks.setSorting(new DataSorting('started', 'desc'));
|
||||
|
||||
this.filterRepresentationModel = new FilterRepresentationModel({
|
||||
appId: '3003',
|
||||
filter: {
|
||||
processDefinitionKey: null,
|
||||
assignment: 'involved',
|
||||
name: null,
|
||||
state: 'running',
|
||||
sort: 'created-desc'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiTaskListModule.forRoot()
|
||||
],
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
#### Events
|
||||
**onSuccess**: The event is emitted when the task list is loaded
|
||||
**rowClick**: The event is emitted when the task in the list is
|
||||
clicked<br />
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `onSuccess` | The event is emitted when the task list is loaded |
|
||||
| `rowClick` | The event is emitted when the task in the list is clicked |
|
||||
|
||||
#### Options
|
||||
|
||||
**taskFilter**: { FilterParamModel } required) FilterParamModel object that
|
||||
is passed to the task list API to filter the task list.
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `taskFilter` | { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that is passed to the task list API to filter the task list. |
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
{
|
||||
"appDefinitionId": "1",
|
||||
"processDefinitionId": "1533",
|
||||
"sort": "created-desc",
|
||||
"text": "",
|
||||
"state": "open",
|
||||
"assignment": "involved",
|
||||
"page": "0",
|
||||
"size": "25"
|
||||
appId: '3003',
|
||||
filter:{
|
||||
processDefinitionKey: null,
|
||||
name:null,
|
||||
assignment: 'involved',
|
||||
state:'running',
|
||||
sort: 'created-desc'
|
||||
}
|
||||
}
|
||||
```
|
||||
**schemaColumn**: { any[] } optional) JSON object that represent
|
||||
the number and the type of the columns that you want show
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `schemaColumn` | { any[] } optional) JSON object that represent the number and the type of the columns that you want show |
|
||||
|
||||
Example:
|
||||
|
||||
```json
|
||||
[
|
||||
{type: 'text', key: 'id', title: 'Id'},
|
||||
@@ -110,31 +229,34 @@ Example:
|
||||
```
|
||||
|
||||
## Basic usage example Activiti Task Details
|
||||
|
||||
The component shows the details of the task id passed in input
|
||||
|
||||
```html
|
||||
<activiti-task-details [taskId]="taskId"></activiti-task-details>
|
||||
```
|
||||
|
||||
#### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| **formLoaded** | Invoked when form is loaded or reloaded. |
|
||||
| **formSaved** | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||
| **formCompleted** | Invoked when form is submitted with `Complete` outcome. |
|
||||
| **executeOutcome** | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||
| **onError** | Invoked at any error |
|
||||
| `formLoaded` | Invoked when form is loaded or reloaded. |
|
||||
| `formSaved` | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||
| `formCompleted` | Invoked when form is submitted with `Complete` outcome. |
|
||||
| `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||
| `onError` | Invoked at any error |
|
||||
|
||||
#### Options
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| **taskId** | {string} | required | The id of the task details that we are asking for. |
|
||||
| **showNextTask** | {boolean} | optional | Automatically render the next one, when the task is completed. |
|
||||
| **showFormTitle** | {boolean} | optional | Toggle rendering of the form title. |
|
||||
| **readOnlyForm** | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
||||
| **showFormRefreshButton** | {boolean} | optional | Toggle rendering of the `Refresh` button. |
|
||||
| **showFormSaveButton** | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
|
||||
| **showFormCompleteButton** | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
|
||||
| `taskId` | {string} | required | The id of the task details that we are asking for. |
|
||||
| `showNextTask` | {boolean} | optional | Automatically render the next one, when the task is completed. |
|
||||
| `showFormTitle` | {boolean} | optional | Toggle rendering of the form title. |
|
||||
| `readOnlyForm` | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
||||
| `showFormRefreshButton` | {boolean} | optional | Toggle rendering of the `Refresh` button. |
|
||||
| `showFormSaveButton` | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
|
||||
| `showFormCompleteButton` | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
|
||||
|
||||
### Custom 'empty Activiti Task Details' template
|
||||
|
||||
@@ -157,6 +279,7 @@ This can be changed by adding the following custom html template:
|
||||
```
|
||||
|
||||
## Basic usage example Activiti Filter
|
||||
|
||||
The component shows all the available filters.
|
||||
|
||||
```html
|
||||
@@ -164,16 +287,20 @@ The component shows all the available filters.
|
||||
```
|
||||
|
||||
#### Events
|
||||
**filterClick**: The event is emitted when the filter in the list is
|
||||
clicked
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `filterClick` | The event is emitted when the filter in the list is clicked |
|
||||
|
||||
#### Options
|
||||
|
||||
No options
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -185,7 +312,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -205,3 +332,27 @@ before performing unit testing.
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
||||
@@ -2,18 +2,38 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Angular 2 TaskList - Demo</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Alfresco Angular 2 Activiti Tasks - Demo</title>
|
||||
<base href="./">
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
@@ -24,9 +44,12 @@
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<style> .chart {display: block; width: 100%;}</style>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<activiti-tasklist-demo></activiti-tasklist-demo>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -23,25 +23,29 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
"ng2-translate": "2.5.0",
|
||||
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-datatable": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-activiti-tasklist": "0.3.3"
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-activiti-tasklist": "^0.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -15,79 +15,166 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import {
|
||||
ActivitiTaskListModule,
|
||||
AppDefinitionRepresentationModel,
|
||||
FilterRepresentationModel,
|
||||
ActivitiApps,
|
||||
ActivitiTaskList
|
||||
} from 'ng2-activiti-tasklist';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
|
||||
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-tasklist-demo',
|
||||
template: `<label for="token"><b>Insert a valid access token / ticket:</b></label><br>
|
||||
<input id="token" type="text" size="48" (change)="updateToken();documentList.reload()" [(ngModel)]="token"><br>
|
||||
<label for="token"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="token" type="text" size="48" (change)="updateHost();documentList.reload()" [(ngModel)]="bpmHost"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ bpmHost }} with user: admin, admin, you can still try to add a valid token to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
<div class="container" *ngIf="authenticated">
|
||||
<span>Task Filters</span>
|
||||
<activiti-filters (filterClick)="onFilterClick($event)"></activiti-filters>
|
||||
<span>Tasks</span>
|
||||
<activiti-tasklist [taskFilter]="taskFilter" [schemaColumn]="schemaColumn"
|
||||
(rowClick)="onRowClick($event)" #activititasklist></activiti-tasklist>
|
||||
<span>Task Details</span>
|
||||
<activiti-task-details [taskId]="currentTaskId" #activitidetails></activiti-task-details>
|
||||
</div>`,
|
||||
styles: [
|
||||
':host > .container {padding: 10px}',
|
||||
'.p-10 { padding: 10px; }'
|
||||
]
|
||||
})
|
||||
class ActivitiTaskListDemo implements OnInit {
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
@ViewChild('activititasklist')
|
||||
activititasklist: any;
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
|
||||
<header class="mdl-layout__header">
|
||||
|
||||
<!-- TABS -->
|
||||
|
||||
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
|
||||
<a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
|
||||
<a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASKS LIST</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mdl-layout__content activiti" #tabmain>
|
||||
|
||||
<!-- APPPS COMPONENT -->
|
||||
|
||||
<section class="mdl-layout__tab-panel is-active" id="apps">
|
||||
<div class="page-content">
|
||||
<activiti-apps [layoutType]="'GRID'" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- TASKS COMPONENT -->
|
||||
|
||||
<section class="mdl-layout__tab-panel" id="tasks">
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
|
||||
<span>Task Filters</span>
|
||||
<activiti-start-task [appId]="appId"
|
||||
(onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
|
||||
<activiti-filters [appId]="appId"
|
||||
(filterClick)="onTaskFilterClick($event)"
|
||||
(onSuccess)="onSuccessTaskFilterList($event)"
|
||||
#activitifilter></activiti-filters>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
|
||||
<span>Task List</span>
|
||||
<activiti-tasklist [taskFilter]="taskFilter"
|
||||
[data]="dataTasks"
|
||||
(rowClick)="onTaskRowClick($event)"
|
||||
(onSuccess)="onSuccessTaskList($event)"
|
||||
#activititasklist></activiti-tasklist>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
|
||||
<span>Task Details</span>
|
||||
<activiti-task-details [taskId]="currentTaskId"
|
||||
(formCompleted)="onFormCompleted($event)"
|
||||
#activitidetails></activiti-task-details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
class MyDemoApp implements OnInit {
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://localhost:9999';
|
||||
|
||||
ticket: string;
|
||||
|
||||
@ViewChild('activitiapps')
|
||||
activitiapps: ActivitiApps;
|
||||
|
||||
@ViewChild('tabmain')
|
||||
tabMain: any;
|
||||
|
||||
@ViewChild('tabheader')
|
||||
tabHeader: any;
|
||||
|
||||
@ViewChild('activitifilter')
|
||||
activitifilter: any;
|
||||
|
||||
@ViewChild('activitidetails')
|
||||
activitidetails: any;
|
||||
|
||||
bpmHost: string = 'http://127.0.0.1:9999';
|
||||
@ViewChild('activititasklist')
|
||||
activititasklist: ActivitiTaskList;
|
||||
|
||||
token: string;
|
||||
@Input()
|
||||
appId: number;
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
schemaColumn: any [] = [];
|
||||
layoutType: string;
|
||||
|
||||
currentTaskId: string;
|
||||
|
||||
taskSchemaColumns: any [] = [];
|
||||
|
||||
taskFilter: any;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService,
|
||||
private settingsService: AlfrescoSettingsService) {
|
||||
this.settingsService.setProviders('BPM');
|
||||
dataTasks: ObjectDataTableAdapter;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = this.host;
|
||||
settingsService.setProviders('BPM');
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
}
|
||||
|
||||
this.dataTasks = new ObjectDataTableAdapter(
|
||||
[],
|
||||
[
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
|
||||
]
|
||||
);
|
||||
this.dataTasks.setSorting(new DataSorting('started', 'desc'));
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.login();
|
||||
public updateTicket(): void {
|
||||
localStorage.setItem('ticket-BPM', this.ticket);
|
||||
}
|
||||
|
||||
this.schemaColumn = [
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}
|
||||
];
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.host;
|
||||
this.login();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
token => {
|
||||
console.log(token);
|
||||
this.token = token;
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
@@ -96,27 +183,57 @@ class ActivitiTaskListDemo implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
onFilterClick(event: any) {
|
||||
this.taskFilter = event;
|
||||
this.activititasklist.load(this.taskFilter);
|
||||
onAppClick(app: AppDefinitionRepresentationModel) {
|
||||
this.appId = app.id;
|
||||
|
||||
this.changeTab('apps', 'tasks');
|
||||
}
|
||||
|
||||
onRowClick(taskId) {
|
||||
this.currentTaskId = taskId;
|
||||
this.activitidetails.loadDetails(this.currentTaskId);
|
||||
onTaskFilterClick(event: FilterRepresentationModel) {
|
||||
this.taskFilter = event;
|
||||
}
|
||||
|
||||
onSuccessTaskFilterList(event: any) {
|
||||
this.taskFilter = this.activitifilter.getCurrentFilter();
|
||||
}
|
||||
|
||||
onStartTaskSuccess(event: any) {
|
||||
this.activititasklist.reload();
|
||||
}
|
||||
|
||||
onSuccessTaskList(event: FilterRepresentationModel) {
|
||||
this.currentTaskId = this.activititasklist.getCurrentTaskId();
|
||||
}
|
||||
|
||||
onTaskRowClick(taskId) {
|
||||
this.currentTaskId = taskId;
|
||||
}
|
||||
|
||||
onFormCompleted(form) {
|
||||
this.activititasklist.load(this.taskFilter);
|
||||
this.currentTaskId = null;
|
||||
}
|
||||
|
||||
changeTab(origin: string, destination: string) {
|
||||
this.tabMain.nativeElement.children[origin].classList.remove('is-active');
|
||||
this.tabMain.nativeElement.children[destination].classList.add('is-active');
|
||||
|
||||
this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
|
||||
this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
DataTableModule,
|
||||
ActivitiTaskListModule
|
||||
ActivitiTaskListModule.forRoot()
|
||||
],
|
||||
declarations: [ ActivitiTaskListDemo ],
|
||||
bootstrap: [ ActivitiTaskListDemo ]
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
@@ -26,7 +26,9 @@
|
||||
'ng2-translate': 'npm:ng2-translate',
|
||||
'alfresco-js-api': 'npm:alfresco-js-api/dist',
|
||||
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
|
||||
'ng2-activiti-form': 'npm:ng2-activiti-form/dist'
|
||||
'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
|
||||
'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
|
||||
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist'
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
@@ -41,7 +43,8 @@
|
||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'}
|
||||
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'}
|
||||
}
|
||||
});
|
||||
})(this);
|
||||
|
||||
@@ -38,7 +38,7 @@ import {
|
||||
|
||||
export * from './src/components/index';
|
||||
export * from './src/services/activiti-tasklist.service';
|
||||
export * from './src/models/filter.model';
|
||||
export * from './src/models/index';
|
||||
|
||||
export const ACTIVITI_TASKLIST_DIRECTIVES: any[] = [
|
||||
NoTaskDetailsTemplateComponent,
|
||||
|
||||
@@ -55,21 +55,29 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-activiti-form": "0.3.3",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"moment": "2.15.1",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-activiti-form": "0.3.3",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
+5
-5
@@ -18,7 +18,7 @@
|
||||
import { SimpleChange } from '@angular/core';
|
||||
import { ActivitiTaskList } from './activiti-tasklist.component';
|
||||
import { ActivitiTaskListService } from '../services/activiti-tasklist.service';
|
||||
import { UserTaskFilterRepresentationModel } from '../models/filter.model';
|
||||
import { FilterRepresentationModel } from '../models/filter.model';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
import { ObjectDataRow, DataRowEvent, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
|
||||
@@ -98,7 +98,7 @@ describe('ActivitiTaskList', () => {
|
||||
it('should return the filtered task list when the taskFilter is passed', (done) => {
|
||||
spyOn(taskList.activiti, 'getTotalTasks').and.returnValue(Observable.fromPromise(fakeGlobalTotalTasksPromise));
|
||||
spyOn(taskList.activiti, 'getTasks').and.returnValue(Observable.fromPromise(fakeGlobalTaskPromise));
|
||||
taskList.taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
taskList.taskFilter = new FilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
|
||||
taskList.onSuccess.subscribe( (res) => {
|
||||
expect(res).toBeDefined();
|
||||
@@ -120,7 +120,7 @@ describe('ActivitiTaskList', () => {
|
||||
|
||||
it('should throw an exception when the response is wrong', (done) => {
|
||||
spyOn(taskList.activiti, 'getTotalTasks').and.returnValue(Observable.fromPromise(fakeErrorTaskPromise));
|
||||
taskList.taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
taskList.taskFilter = new FilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
|
||||
taskList.onError.subscribe( (err) => {
|
||||
expect(err).toBeDefined();
|
||||
@@ -133,7 +133,7 @@ describe('ActivitiTaskList', () => {
|
||||
it('should reload tasks when reload() is called', (done) => {
|
||||
spyOn(taskList.activiti, 'getTotalTasks').and.returnValue(Observable.fromPromise(fakeGlobalTotalTasksPromise));
|
||||
spyOn(taskList.activiti, 'getTasks').and.returnValue(Observable.fromPromise(fakeGlobalTaskPromise));
|
||||
taskList.taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
taskList.taskFilter = new FilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
taskList.ngOnInit();
|
||||
taskList.onSuccess.subscribe( (res) => {
|
||||
expect(res).toBeDefined();
|
||||
@@ -164,7 +164,7 @@ describe('ActivitiTaskList', () => {
|
||||
|
||||
it('should reload task list by filter on binding changes', () => {
|
||||
spyOn(taskList, 'load').and.stub();
|
||||
const taskFilter = new UserTaskFilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
const taskFilter = new FilterRepresentationModel({filter: { state: 'open', assignment: 'fake-assignee'}});
|
||||
|
||||
let change = new SimpleChange(null, taskFilter);
|
||||
taskList.ngOnChanges({ 'taskFilter': change });
|
||||
|
||||
@@ -19,7 +19,7 @@ import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChange
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow } from 'ng2-alfresco-datatable';
|
||||
import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
|
||||
import { UserTaskFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
|
||||
import { FilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
|
||||
|
||||
declare let componentHandler: any;
|
||||
|
||||
@@ -32,7 +32,7 @@ declare let componentHandler: any;
|
||||
export class ActivitiTaskList implements OnInit, OnChanges {
|
||||
|
||||
@Input()
|
||||
taskFilter: UserTaskFilterRepresentationModel;
|
||||
taskFilter: FilterRepresentationModel;
|
||||
|
||||
@Input()
|
||||
data: DataTableAdapter;
|
||||
@@ -191,13 +191,15 @@ export class ActivitiTaskList implements OnInit, OnChanges {
|
||||
return tasks;
|
||||
}
|
||||
|
||||
private convertTaskUserToTaskQuery(userTask: UserTaskFilterRepresentationModel) {
|
||||
let requestNode = {appDefinitionId: userTask.appId,
|
||||
private convertTaskUserToTaskQuery(userTask: FilterRepresentationModel) {
|
||||
let requestNode = {
|
||||
appDefinitionId: userTask.appId,
|
||||
processDefinitionId: userTask.filter.processDefinitionId,
|
||||
text: userTask.filter.name,
|
||||
assignment: userTask.filter.assignment,
|
||||
state: userTask.filter.state,
|
||||
sort: userTask.filter.sort};
|
||||
sort: userTask.filter.sort
|
||||
};
|
||||
return new TaskQueryRequestRepresentationModel(requestNode);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,6 +85,9 @@ export class FilterParamRepresentationModel {
|
||||
name: string;
|
||||
state: string;
|
||||
sort: string;
|
||||
assignment: string;
|
||||
dueAfter: Date;
|
||||
dueBefore: Date;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.processDefinitionId = obj && obj.processDefinitionId || null;
|
||||
@@ -92,38 +95,6 @@ export class FilterParamRepresentationModel {
|
||||
this.name = obj && obj.name || null;
|
||||
this.state = obj && obj.state || null;
|
||||
this.sort = obj && obj.sort || null;
|
||||
}
|
||||
}
|
||||
|
||||
export class UserProcessInstanceFilterRepresentationModel extends FilterRepresentationModel {
|
||||
public filter: ProcessInstanceFilterRepresentation;
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.filter = new ProcessInstanceFilterRepresentation(obj.filter);
|
||||
}
|
||||
}
|
||||
|
||||
export class ProcessInstanceFilterRepresentation extends FilterParamRepresentationModel {
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
}
|
||||
}
|
||||
|
||||
export class UserTaskFilterRepresentationModel extends FilterRepresentationModel {
|
||||
public filter: TaskFilterRepresentationModel;
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.filter = new TaskFilterRepresentationModel(obj.filter);
|
||||
}
|
||||
}
|
||||
|
||||
export class TaskFilterRepresentationModel extends FilterParamRepresentationModel {
|
||||
assignment: string;
|
||||
dueAfter: Date;
|
||||
dueBefore: Date;
|
||||
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.assignment = obj && obj.assignment || null;
|
||||
this.dueAfter = obj && obj.dueAfter || null;
|
||||
this.dueBefore = obj && obj.dueBefore || null;
|
||||
|
||||
+5
-14
@@ -15,17 +15,8 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
|
||||
@Injectable()
|
||||
export class NotificationService {
|
||||
|
||||
notificationsdSource = new Subject<string>();
|
||||
|
||||
notifications = this.notificationsdSource.asObservable();
|
||||
|
||||
sendNotification(message: string) {
|
||||
this.notificationsdSource.next(message);
|
||||
}
|
||||
}
|
||||
export * from './comment.model';
|
||||
export * from './filter.model';
|
||||
export * from './icon.model';
|
||||
export * from './user.model';
|
||||
export * from './task-details.model';
|
||||
@@ -23,7 +23,7 @@ import {
|
||||
} from 'ng2-alfresco-core';
|
||||
import { ActivitiTaskListService } from './activiti-tasklist.service';
|
||||
import { TaskDetailsModel } from '../models/task-details.model';
|
||||
import { UserTaskFilterRepresentationModel, AppDefinitionRepresentationModel } from '../models/filter.model';
|
||||
import { FilterRepresentationModel, AppDefinitionRepresentationModel } from '../models/filter.model';
|
||||
import { Comment } from '../models/comment.model';
|
||||
|
||||
declare let AlfrescoApi: any;
|
||||
@@ -415,13 +415,13 @@ describe('ActivitiTaskListService', () => {
|
||||
});
|
||||
|
||||
it('should add a filter ', (done) => {
|
||||
let filterFake = new UserTaskFilterRepresentationModel({
|
||||
let filterFake = new FilterRepresentationModel({
|
||||
name: 'FakeNameFilter',
|
||||
assignment: 'fake-assignement'
|
||||
});
|
||||
|
||||
service.addFilter(filterFake).subscribe(
|
||||
(res: UserTaskFilterRepresentationModel) => {
|
||||
(res: FilterRepresentationModel) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(res.id).not.toEqual('');
|
||||
expect(res.name).toEqual('FakeNameFilter');
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import {AlfrescoAuthenticationService} from 'ng2-alfresco-core';
|
||||
import {Observable} from 'rxjs/Rx';
|
||||
import {UserTaskFilterRepresentationModel} from '../models/filter.model';
|
||||
import {FilterRepresentationModel} from '../models/filter.model';
|
||||
import {TaskQueryRequestRepresentationModel} from '../models/filter.model';
|
||||
import {Comment} from '../models/comment.model';
|
||||
import {User} from '../models/user.model';
|
||||
@@ -52,9 +52,9 @@ export class ActivitiTaskListService {
|
||||
getTaskListFilters(appId?: string): Observable<any> {
|
||||
return Observable.fromPromise(this.callApiTaskFilters(appId))
|
||||
.map((response: any) => {
|
||||
let filters: UserTaskFilterRepresentationModel[] = [];
|
||||
response.data.forEach((filter: UserTaskFilterRepresentationModel) => {
|
||||
let filterModel = new UserTaskFilterRepresentationModel(filter);
|
||||
let filters: FilterRepresentationModel[] = [];
|
||||
response.data.forEach((filter: FilterRepresentationModel) => {
|
||||
let filterModel = new FilterRepresentationModel(filter);
|
||||
filters.push(filterModel);
|
||||
});
|
||||
if (response && response.data && response.data.length === 0) {
|
||||
@@ -127,10 +127,10 @@ export class ActivitiTaskListService {
|
||||
/**
|
||||
* Create and return the default filters
|
||||
* @param appId
|
||||
* @returns {UserTaskFilterRepresentationModel[]}
|
||||
* @returns {FilterRepresentationModel[]}
|
||||
*/
|
||||
createDefaultFilter(appId: string): UserTaskFilterRepresentationModel[] {
|
||||
let filters: UserTaskFilterRepresentationModel[] = [];
|
||||
createDefaultFilter(appId: string): FilterRepresentationModel[] {
|
||||
let filters: FilterRepresentationModel[] = [];
|
||||
|
||||
let involvedTasksFilter = this.getInvolvedTasksFilterInstance(appId);
|
||||
this.addFilter(involvedTasksFilter);
|
||||
@@ -166,13 +166,13 @@ export class ActivitiTaskListService {
|
||||
|
||||
/**
|
||||
* Add a filter
|
||||
* @param filter - UserTaskFilterRepresentationModel
|
||||
* @returns {UserTaskFilterRepresentationModel}
|
||||
* @param filter - FilterRepresentationModel
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
addFilter(filter: UserTaskFilterRepresentationModel): Observable<UserTaskFilterRepresentationModel> {
|
||||
addFilter(filter: FilterRepresentationModel): Observable<FilterRepresentationModel> {
|
||||
return Observable.fromPromise(this.callApiAddFilter(filter))
|
||||
.map(res => res)
|
||||
.map((response: UserTaskFilterRepresentationModel) => {
|
||||
.map((response: FilterRepresentationModel) => {
|
||||
return response;
|
||||
}).catch(this.handleError);
|
||||
}
|
||||
@@ -256,7 +256,7 @@ export class ActivitiTaskListService {
|
||||
return this.authService.getAlfrescoApi().activiti.taskApi.addSubtask(task.parentTaskId, task);
|
||||
}
|
||||
|
||||
private callApiAddFilter(filter: UserTaskFilterRepresentationModel) {
|
||||
private callApiAddFilter(filter: FilterRepresentationModel) {
|
||||
return this.authService.getAlfrescoApi().activiti.userFiltersApi.createUserTaskFilter(filter);
|
||||
}
|
||||
|
||||
@@ -280,10 +280,10 @@ export class ActivitiTaskListService {
|
||||
/**
|
||||
* Return a static Involved filter instance
|
||||
* @param appId
|
||||
* @returns {UserTaskFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
getInvolvedTasksFilterInstance(appId: string): UserTaskFilterRepresentationModel {
|
||||
return new UserTaskFilterRepresentationModel({
|
||||
getInvolvedTasksFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'Involved Tasks',
|
||||
'appId': appId,
|
||||
'recent': false,
|
||||
@@ -295,10 +295,10 @@ export class ActivitiTaskListService {
|
||||
/**
|
||||
* Return a static My task filter instance
|
||||
* @param appId
|
||||
* @returns {UserTaskFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
getMyTasksFilterInstance(appId: string): UserTaskFilterRepresentationModel {
|
||||
return new UserTaskFilterRepresentationModel({
|
||||
getMyTasksFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'My Tasks',
|
||||
'appId': appId,
|
||||
'recent': false,
|
||||
@@ -310,10 +310,10 @@ export class ActivitiTaskListService {
|
||||
/**
|
||||
* Return a static Queued filter instance
|
||||
* @param appId
|
||||
* @returns {UserTaskFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
getQueuedTasksFilterInstance(appId: string): UserTaskFilterRepresentationModel {
|
||||
return new UserTaskFilterRepresentationModel({
|
||||
getQueuedTasksFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'Queued Tasks',
|
||||
'appId': appId,
|
||||
'recent': false,
|
||||
@@ -325,10 +325,10 @@ export class ActivitiTaskListService {
|
||||
/**
|
||||
* Return a static Completed filter instance
|
||||
* @param appId
|
||||
* @returns {UserTaskFilterRepresentationModel}
|
||||
* @returns {FilterRepresentationModel}
|
||||
*/
|
||||
getCompletedTasksFilterInstance(appId: string): UserTaskFilterRepresentationModel {
|
||||
return new UserTaskFilterRepresentationModel({
|
||||
getCompletedTasksFilterInstance(appId: string): FilterRepresentationModel {
|
||||
return new FilterRepresentationModel({
|
||||
'name': 'Completed Tasks',
|
||||
'appId': appId,
|
||||
'recent': true,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
demo/
|
||||
node_modules
|
||||
|
||||
@@ -15,11 +15,23 @@
|
||||
<a href='https://www.npmjs.com/package/ng2-alfresco-core'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-alfresco-core.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Core library for other ng2-alfresco components.
|
||||
This should be added as a dependency for any project using the components.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
@@ -55,8 +67,6 @@ npm install --save ng2-alfresco-core
|
||||
Provides access to initialized **AlfrescoJSApi** instance.
|
||||
|
||||
```ts
|
||||
import { OnInit } from '@angular/core';
|
||||
import { AlfrescoApiService } from 'ng2-alfresco-core';
|
||||
|
||||
export class MyComponent implements OnInit {
|
||||
|
||||
@@ -125,38 +135,44 @@ export class MyComponent implements OnInit {
|
||||
The authentication service is used inside the [login component](../ng2-alfresco-login) and is possible to find there an example of how to use it.
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
|
||||
import {
|
||||
ALFRESCO_CORE_PROVIDERS,
|
||||
AlfrescoSettingsService,
|
||||
AlfrescoAuthenticationService
|
||||
} from 'ng2-alfresco-core';
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<div *ngIf="!authenticated" >
|
||||
Authentication failed to ip {{ ecmHost }} with user: admin, admin
|
||||
</div>
|
||||
<div *ngIf="authenticated">
|
||||
Authentication successfull to ip {{ ecmHost }} with user: admin, admin, your token is {{ token }}
|
||||
<H5>ECM</H5>
|
||||
Authentication successfull to ip {{ ecmHost }} with user: admin, admin<br>
|
||||
your token is {{ tokenEcm }}<br>
|
||||
<H5>BPM</H5>
|
||||
Authentication successfull to ip {{ bpmHost }} with user: admin, admin<br>
|
||||
your token is {{ tokenBpm }}<br>
|
||||
</div>`
|
||||
})
|
||||
class MyDemoApp {
|
||||
authenticated: boolean = false;
|
||||
|
||||
ecmHost: string = 'http://127.0.0.1:8080';
|
||||
public ecmHost: string = 'http://localhost:8080';
|
||||
|
||||
token: string;
|
||||
public bpmHost: string = 'http://localhost:9999';
|
||||
|
||||
tokenBpm: string;
|
||||
|
||||
tokenEcm: string;
|
||||
|
||||
constructor(public alfrescoAuthenticationService: AlfrescoAuthenticationService,
|
||||
private alfrescoSettingsService: AlfrescoSettingsService) {
|
||||
|
||||
alfrescoSettingsService.ecmHost = this.ecmHost;
|
||||
alfrescoSettingsService.setProviders('ECM');
|
||||
alfrescoSettingsService.bpmHost = this.bpmHost;
|
||||
|
||||
alfrescoSettingsService.setProviders('ALL');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@@ -166,7 +182,8 @@ class MyDemoApp {
|
||||
login() {
|
||||
this.alfrescoAuthenticationService.login('admin', 'admin').subscribe(
|
||||
token => {
|
||||
this.token = token.ticket;
|
||||
this.tokenBpm = this.alfrescoAuthenticationService.getTicketBpm();
|
||||
this.tokenEcm = this.alfrescoAuthenticationService.getTicketEcm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
@@ -175,11 +192,19 @@ class MyDemoApp {
|
||||
});
|
||||
}
|
||||
}
|
||||
bootstrap(MyDemoApp, [
|
||||
HTTP_PROVIDERS,
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
]);
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot()
|
||||
],
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
```
|
||||
|
||||
#### Renditions Service
|
||||
@@ -198,10 +223,53 @@ npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Additional scripts
|
||||
## Build from sources
|
||||
|
||||
- `npm run build:w` builds the files and keep watching for changes
|
||||
- `npm test` runs unit tests
|
||||
- `npm run test-browser` runs unit tests in browser. This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Build the files and keep watching for changes
|
||||
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
|
||||
### Running unit tests in browser
|
||||
|
||||
```sh
|
||||
npm test-browser
|
||||
```
|
||||
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
- `npm run coverage` runs code coverage report
|
||||
|
||||
### Code coverage
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
@@ -53,6 +53,8 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
@@ -60,18 +62,23 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"cpx": "1.3.1",
|
||||
@@ -86,7 +93,6 @@
|
||||
"karma-mocha-reporter": "2.0.3",
|
||||
"license-check": "1.1.5",
|
||||
"remap-istanbul": "0.6.3",
|
||||
"rimraf": "2.5.2",
|
||||
"traceur": "0.0.91",
|
||||
"tslint": "3.15.1",
|
||||
"typescript": "^2.0.3",
|
||||
|
||||
@@ -21,6 +21,8 @@ import { AlfrescoSettingsService } from './AlfrescoSettings.service';
|
||||
import { AlfrescoApiService } from './AlfrescoApi.service';
|
||||
import * as alfrescoApi from 'alfresco-js-api';
|
||||
import { AlfrescoApi } from 'alfresco-js-api';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
|
||||
/**
|
||||
* The AlfrescoAuthenticationService provide the login service and store the ticket in the localStorage
|
||||
*/
|
||||
@@ -29,6 +31,10 @@ export class AlfrescoAuthenticationService {
|
||||
|
||||
alfrescoApi: AlfrescoApi;
|
||||
|
||||
public loginSubject: Subject<any> = new Subject<any>();
|
||||
|
||||
public logoutSubject: Subject<any> = new Subject<any>();
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param settingsService
|
||||
@@ -84,6 +90,7 @@ export class AlfrescoAuthenticationService {
|
||||
return Observable.fromPromise(this.callApiLogin(username, password))
|
||||
.map((response: any) => {
|
||||
this.saveTickets();
|
||||
this.loginSubject.next(response);
|
||||
return {type: this.settingsService.getProviders(), ticket: response};
|
||||
})
|
||||
.catch(this.handleError);
|
||||
@@ -105,10 +112,11 @@ export class AlfrescoAuthenticationService {
|
||||
* @returns {Observable<R>|Observable<T>}
|
||||
*/
|
||||
public logout() {
|
||||
this.removeTicket();
|
||||
return Observable.fromPromise(this.callApiLogout())
|
||||
.map(res => <any> res)
|
||||
.do(response => {
|
||||
this.removeTicket();
|
||||
this.logoutSubject.next(response);
|
||||
return response;
|
||||
})
|
||||
.catch(this.handleError);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -34,96 +34,133 @@
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-alfresco-datatable
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
1. Npm
|
||||
|
||||
You must separately install the following libraries for your application:
|
||||
|
||||
- [ng2-translate](https://github.com/ocombe/ng2-translate)
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
```sh
|
||||
npm install ng2-alfresco-datatable --save
|
||||
```
|
||||
|
||||
```sh
|
||||
npm install --save ng2-translate ng2-alfresco-core
|
||||
```
|
||||
2. Html
|
||||
|
||||
#### Material Design Lite
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
```html
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- 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">
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
```
|
||||
|
||||
3. SystemJs
|
||||
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- ng2-translate
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-datatable
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage example
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**my.component.ts**
|
||||
|
||||
```ts
|
||||
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
import { Component } from '@angular/core';
|
||||
import {
|
||||
CONTEXT_MENU_DIRECTIVES,
|
||||
CONTEXT_MENU_PROVIDERS
|
||||
} from 'ng2-alfresco-core';
|
||||
import {
|
||||
ALFRESCO_DATATABLE_DIRECTIVES,
|
||||
ObjectDataTableAdapter
|
||||
} from 'ng2-alfresco-datatable';
|
||||
import { CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core';
|
||||
import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'my-view',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<alfresco-datatable [data]="data">
|
||||
</alfresco-datatable>`,
|
||||
directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
|
||||
providers: [CONTEXT_MENU_PROVIDERS]
|
||||
})
|
||||
export class MyView {
|
||||
export class DataTableDemo {
|
||||
data: ObjectDataTableAdapter;
|
||||
|
||||
constructor() {
|
||||
this.data = new ObjectDataTableAdapter(
|
||||
// data
|
||||
[
|
||||
{ id: 1, name: 'Name 1' },
|
||||
{ id: 2, name: 'Name 2' }
|
||||
{id: 1, name: 'Name 1'},
|
||||
{id: 2, name: 'Name 2'}
|
||||
],
|
||||
// schema
|
||||
[
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: true
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
cssClass: 'full-width',
|
||||
sortable: true
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
cssClass: 'full-width',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
DataTableModule
|
||||
],
|
||||
declarations: [DataTableDemo],
|
||||
bootstrap: [DataTableDemo]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
@@ -132,10 +169,10 @@ export class MyView {
|
||||
|
||||
| Name | Type | Default | Description
|
||||
| --- | --- | --- | --- |
|
||||
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
|
||||
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
|
||||
| actions | boolean | false | Toggles data actions column |
|
||||
| fallbackThubnail | string | | Fallback image for row ehre thubnail is missing|
|
||||
| `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
|
||||
| `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
|
||||
| `actions` | boolean | false | Toggles data actions column |
|
||||
| `fallbackThubnail` | string | | Fallback image for row ehre thubnail is missing|
|
||||
|
||||
### Events
|
||||
|
||||
@@ -366,6 +403,7 @@ let data = new ObjectDataTableAdapter(
|
||||
```
|
||||
|
||||
## Generate schema
|
||||
|
||||
Is possible to auto generate your schema if you have only the data row
|
||||
|
||||
```ts
|
||||
@@ -397,11 +435,11 @@ let schema = ObjectDataTableAdapter.generateSchema(data);
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@@ -412,8 +450,8 @@ npm run build
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -425,11 +463,35 @@ npm test
|
||||
npm test-browser
|
||||
```
|
||||
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
|
||||
### Code coverage
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
@@ -26,7 +26,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<alfresco-datatable-demo></alfresco-datatable-demo>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -29,25 +29,25 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"license-check": "1.1.5",
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1"
|
||||
"ng2-alfresco-datatable": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -30,7 +30,7 @@ import {
|
||||
} from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-datatable-demo',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="p-10">
|
||||
|
||||
@@ -51,20 +51,24 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -34,49 +34,63 @@
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-alfresco-documentlist
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
1. Npm
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
```sh
|
||||
npm install ng2-alfresco-documentlist --save
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
2. Html
|
||||
|
||||
The following component needs to be added to your `systemjs.config.js` file:
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
- [ng2-translate](https://github.com/ocombe/ng2-translate)
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
|
||||
```html
|
||||
|
||||
You can get more details in the
|
||||
[example implementation](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js).
|
||||
<!-- 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">
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
```
|
||||
|
||||
3. SystemJs
|
||||
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- ng2-translate
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-datatable
|
||||
- ng2-alfresco-documentlist
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage
|
||||
|
||||
@@ -91,28 +105,88 @@ Also make sure you include these dependencies in your `index.html` file:
|
||||
</alfresco-document-list>
|
||||
```
|
||||
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component, ViewChild } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
|
||||
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<alfresco-document-list
|
||||
#documentList
|
||||
[currentFolderPath]="'/'"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[multiselect]="true">
|
||||
</alfresco-document-list>`
|
||||
})
|
||||
class DocumentListDemo {
|
||||
|
||||
@ViewChild(DocumentList)
|
||||
documentList: DocumentList;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.ecmHost = 'http://localhost:8080';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.documentList.reload();
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
DataTableModule,
|
||||
DocumentListModule.forRoot()
|
||||
],
|
||||
declarations: [DocumentListDemo],
|
||||
bootstrap: [DocumentListDemo]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| navigate | boolean | true | Toggles 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 |
|
||||
| fallbackThubnail | string | | Fallback image for row ehre thubnail is missing|
|
||||
| multiselect | boolean | false | Toggles multiselect mode |
|
||||
| contentActions | boolean | false | Toggles content actions for each row |
|
||||
| contextMenuActions | boolean | false | Toggles context menus for each row |
|
||||
| rowFilter | `RowFilter` | | Custom row filter, [see more](#custom-row-filter).
|
||||
| imageResolver | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver).
|
||||
| `navigate` | boolean | true | Toggles 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 |
|
||||
| `fallbackThubnail` | string | | Fallback image for row ehre thubnail is missing|
|
||||
| `multiselect` | boolean | false | Toggles multiselect mode |
|
||||
| `contentActions` | boolean | false | Toggles content actions for each row |
|
||||
| `contextMenuActions` | boolean | false | Toggles context menus for each row |
|
||||
| `rowFilter` | `RowFilter` | | Custom row filter, [see more](#custom-row-filter).
|
||||
| `imageResolver` | `ImageResolver` | | Custom image resolver, [see more](#custom-image-resolver).
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| nodeClick | Emitted when user clicks the node |
|
||||
| nodeDblClick | Emitted when user double-clicks the node |
|
||||
| folderChange | Emitted upon display folder changed |
|
||||
| preview | Emitted when document preview is requested either with single or double click |
|
||||
| `nodeClick` | Emitted when user clicks the node |
|
||||
| `nodeDblClick` | Emitted when user double-clicks the node |
|
||||
| `folderChange` | Emitted upon display folder changed |
|
||||
| `preview` | Emitted when document preview is requested either with single or double click |
|
||||
|
||||
|
||||
_For a complete example source code please refer to
|
||||
@@ -204,13 +278,13 @@ 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 |
|
||||
| `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](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) formatting is used.
|
||||
For a full list of available `format` values please refer to [DatePipe](https://angular.io/docs/ts/latest/api/common/DatePipe-class.html) documentation.
|
||||
@@ -660,7 +734,8 @@ by means of custom application service.
|
||||
|
||||
## Build from sources
|
||||
|
||||
You can build component from sources with the following commands:
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
@@ -672,8 +747,8 @@ npm run build
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@@ -685,11 +760,35 @@ npm test
|
||||
npm test-browser
|
||||
```
|
||||
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
|
||||
### Code coverage
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
@@ -31,7 +31,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<alfresco-documentlist-demo></alfresco-documentlist-demo>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -24,25 +24,26 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.1.3",
|
||||
"ng2-translate": "2.5.0",
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-alfresco-documentlist": "^0.3.0",
|
||||
"ng2-alfresco-datatable": "^0.3.0"
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-alfresco-documentlist": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -15,13 +15,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { NgModule, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { DataTableModule } from 'ng2-alfresco-datatable';
|
||||
import { DocumentListModule } from 'ng2-alfresco-documentlist';
|
||||
import { DocumentListModule, DocumentList } from 'ng2-alfresco-documentlist';
|
||||
|
||||
import {
|
||||
AlfrescoSettingsService,
|
||||
@@ -32,7 +31,7 @@ import {
|
||||
import { DocumentActionsService } from 'ng2-alfresco-documentlist';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-documentlist-demo',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid access ticket / ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket(); documentList.reload()" [(ngModel)]="ticket"><br>
|
||||
@@ -142,11 +141,16 @@ import { DocumentActionsService } from 'ng2-alfresco-documentlist';
|
||||
class DocumentListDemo implements OnInit {
|
||||
|
||||
currentPath: string = '/';
|
||||
|
||||
authenticated: boolean = false;
|
||||
ecmHost: string = 'http://devproducts-platform.alfresco.me';
|
||||
|
||||
ecmHost: string = 'http://localhost:8080';
|
||||
|
||||
ticket: string;
|
||||
|
||||
@ViewChild(DocumentList)
|
||||
documentList: DocumentList;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService,
|
||||
translation: AlfrescoTranslationService, private documentActions: DocumentActionsService) {
|
||||
|
||||
@@ -194,6 +198,7 @@ class DocumentListDemo implements OnInit {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketEcm();
|
||||
this.authenticated = true;
|
||||
this.documentList.reload();
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
|
||||
@@ -59,21 +59,25 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/node": "^6.0.42",
|
||||
"alfresco-js-api": "^0.3.1",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
# Alfresco Login Component for Angular 2
|
||||
# Alfresco Core Component for Angular 2
|
||||
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
@@ -31,91 +32,99 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### Node
|
||||
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-alfresco-login
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
Components included:
|
||||
1. Npm
|
||||
|
||||
* Alfresco Login Component
|
||||
* Alfresco Authentication Service
|
||||
```sh
|
||||
npm install ng2-alfresco-login --save
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
2. Html
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
```html
|
||||
|
||||
The following component needs to be added to your systemjs.config:
|
||||
<!-- 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">
|
||||
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-login
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
Please refer to the following example to have an idea of how your systemjs.config should look like :
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
## Style
|
||||
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:
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
```
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
3. SystemJs
|
||||
|
||||
Also make sure you include these dependencies in your .html page:
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-login
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage
|
||||
|
||||
This component allow to authenticate to Alfresco One and Alfresco Activiti.
|
||||
|
||||
```html
|
||||
<alfresco-login [providers]="'ALL'"></alfresco-login>
|
||||
```
|
||||
|
||||
Example of an App that use Alfresco login component :
|
||||
Usage example of this component :
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { AlfrescoLoginComponent } from 'ng2-alfresco-login';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
import {
|
||||
ALFRESCO_CORE_PROVIDERS,
|
||||
AlfrescoSettingsService,
|
||||
AlfrescoAuthenticationService
|
||||
} from 'ng2-alfresco-core';
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { LoginModule } from 'ng2-alfresco-login';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '
|
||||
<alfresco-login
|
||||
providers="'ALL'"
|
||||
(onSuccess)="mySuccessMethod($event)"
|
||||
(onError)="myErrorMethod($event)">
|
||||
</alfresco-login>',
|
||||
directives: [AlfrescoLoginComponent]
|
||||
template: `
|
||||
<alfresco-login [providers]="'ALL'"
|
||||
[disableCsrf]="true"
|
||||
(onSuccess)="mySuccessMethod($event)"
|
||||
(onError)="myErrorMethod($event)">
|
||||
</alfresco-login>`
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
constructor(public auth: AlfrescoAuthenticationService,
|
||||
alfrescoSettingsService: AlfrescoSettingsService) {
|
||||
alfrescoSettingsService.host = 'http://myalfrescoip';
|
||||
private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.ecmHost = 'http://localhost:8080/';
|
||||
settingsService.bpmHost = 'http://localhost:9999/';
|
||||
}
|
||||
|
||||
mySuccessMethod($event) {
|
||||
@@ -125,33 +134,41 @@ export class AppComponent {
|
||||
myErrorMethod($event) {
|
||||
console.log('Error Login EventEmitt called with: ' + $event.value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
bootstrap(AppComponent, [
|
||||
HTTP_PROVIDERS,
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
]);
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
LoginModule
|
||||
],
|
||||
declarations: [ AppComponent ],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
```
|
||||
|
||||
#### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | The event is emitted when the login is done |
|
||||
| onError | The event is emitted when the login fails |
|
||||
| `onSuccess` | The event is emitted when the login is done |
|
||||
| `onError` | The event is emitted when the login fails |
|
||||
|
||||
Attribute | Description |
|
||||
--- | --- |
|
||||
`onSuccess` | The event is emitted when the login is done |
|
||||
`onError` | The event is emitted when the login fails |
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `onSuccess` | The event is emitted when the login is done |
|
||||
| `onError` | The event is emitted when the login fails |
|
||||
|
||||
#### Options
|
||||
|
||||
Attribute | Options | Default | Description | Mandatory
|
||||
--- | --- | --- | --- | ---
|
||||
`providers` | *string* | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
|
||||
`disableCsrf` | *boolean* | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
|
||||
| Name | Options | Default | Description | Mandatory
|
||||
| --- | --- | --- | --- | ---
|
||||
| `providers` | *string* | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
|
||||
| `disableCsrf` | *boolean* | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
|
||||
|
||||
|
||||
## Custom logo and background
|
||||
@@ -179,6 +196,7 @@ Alternatively you can bind to your component properties and provide values dynam
|
||||
```
|
||||
|
||||
#### Customize Validation rules
|
||||
|
||||
If needed it is possible customize the validation rules of the login
|
||||
form. You can add/modify the default rules of the login form.
|
||||
|
||||
@@ -294,6 +312,16 @@ npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
||||
@@ -11,10 +11,20 @@
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
@@ -27,7 +37,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<my-app></my-app>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -52,25 +52,26 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
"md-date-time-picker": "^2.2.0",
|
||||
"moment": "2.15.1",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
"ng2-translate": "2.5.0",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-alfresco-login": "^0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -23,11 +23,13 @@ import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } fr
|
||||
import { LoginModule } from 'ng2-alfresco-login';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="host"><b>Insert the ip of your Alfresco instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="ecmHost"><br><br>
|
||||
<label for="host"><b>Insert the ip of your Alfresco and Activiti instance:</b></label><br>
|
||||
ECM Host: <input id="ecmHost" type="text" size="48" (change)="updateEcmHost()" [(ngModel)]="ecmHost"><br>
|
||||
BPM Host: <input id="bpmHost" type="text" size="48" (change)="updateBpmHost()" [(ngModel)]="bpmHost"><br>
|
||||
<div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 120px; z-index: 1;">
|
||||
|
||||
<p style="width:120px;margin: 20px;">
|
||||
<label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch1" class="mdl-switch__input" checked
|
||||
@@ -42,16 +44,26 @@ import { LoginModule } from 'ng2-alfresco-login';
|
||||
<span class="mdl-switch__label">BPM</span>
|
||||
</label>
|
||||
</p>
|
||||
<p style="width:120px;margin: 20px;">
|
||||
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
|
||||
<input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
|
||||
<span class="mdl-switch__label">CSRF</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
{{ status }}
|
||||
<hr>
|
||||
|
||||
<alfresco-login [providers]="providers" (onSuccess)="mySuccessMethod($event)"
|
||||
(onError)="myErrorMethod($event)"></alfresco-login>`
|
||||
<alfresco-login [providers]="providers"
|
||||
[disableCsrf]="disableCsrf"
|
||||
(onSuccess)="mySuccessMethod($event)"
|
||||
(onError)="myErrorMethod($event)"></alfresco-login>`
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
public ecmHost: string = 'http://devproducts-platform.alfresco.me';
|
||||
public ecmHost: string = 'http://localhost:8080';
|
||||
|
||||
public bpmHost: string = 'http://localhost:9999';
|
||||
|
||||
public ticket: string;
|
||||
|
||||
@@ -59,15 +71,22 @@ export class AppComponent {
|
||||
|
||||
public providers: string = 'ECM';
|
||||
|
||||
public disableCsrf: boolean = false;
|
||||
|
||||
constructor(public auth: AlfrescoAuthenticationService,
|
||||
private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.ecmHost = this.ecmHost;
|
||||
settingsService.bpmHost = this.bpmHost;
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
public updateEcmHost(): void {
|
||||
this.settingsService.ecmHost = this.ecmHost;
|
||||
}
|
||||
|
||||
public updateBpmHost(): void {
|
||||
this.settingsService.bpmHost = this.bpmHost;
|
||||
}
|
||||
|
||||
mySuccessMethod($event) {
|
||||
console.log('Success Login EventEmitt called with: ' + $event.value);
|
||||
this.status = $event.value;
|
||||
@@ -83,8 +102,8 @@ export class AppComponent {
|
||||
this.providers = 'ALL';
|
||||
} else if (checked) {
|
||||
this.providers = 'ECM';
|
||||
} else {
|
||||
this.providers = undefined;
|
||||
} else if (!checked && this.providers === 'ALL') {
|
||||
this.providers = 'BPM';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,10 +112,14 @@ export class AppComponent {
|
||||
this.providers = 'ALL';
|
||||
} else if (checked) {
|
||||
this.providers = 'BPM';
|
||||
} else {
|
||||
this.providers = undefined;
|
||||
} else if (!checked && this.providers === 'ALL') {
|
||||
this.providers = 'ECM';
|
||||
}
|
||||
}
|
||||
|
||||
toggleCSRF() {
|
||||
this.disableCsrf = !this.disableCsrf;
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
@@ -105,8 +128,8 @@ export class AppComponent {
|
||||
CoreModule.forRoot(),
|
||||
LoginModule
|
||||
],
|
||||
declarations: [ AppComponent ],
|
||||
bootstrap: [ AppComponent ]
|
||||
declarations: [AppComponent],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
defaultExtension: 'js'
|
||||
},
|
||||
'ng2-translate': { defaultExtension: 'js' },
|
||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}
|
||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'}
|
||||
}
|
||||
|
||||
@@ -63,20 +63,24 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"alfresco-js-api": "^0.3.0"
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
npm-debug.log
|
||||
.idea
|
||||
|
||||
assets/
|
||||
coverage/
|
||||
node_modules
|
||||
typings/
|
||||
|
||||
@@ -32,59 +32,63 @@
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### Node
|
||||
To correctly use this component check that on your machine is running Node version 5.0.0 or higher.
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-alfresco-core ng2-alfresco-search
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
Components included:
|
||||
1. Npm
|
||||
|
||||
- [Search control](#search-control)
|
||||
- [Search results](#search-results)
|
||||
```sh
|
||||
npm install ng2-alfresco-search --save
|
||||
```
|
||||
|
||||
### Search control
|
||||
2. Html
|
||||
|
||||
This component displays a search box on the page, which the user can use to enter a search query. It is decoupled from
|
||||
the related [search results](#search-results) component which performs a query and displays results.
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
#### Dependencies
|
||||
```html
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
<!-- 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">
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
The following component needs to be added to your systemjs.config:
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-search
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
Please refer to the following example to have an idea of how your systemjs.config should look like :
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
```
|
||||
|
||||
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
|
||||
3. SystemJs
|
||||
|
||||
#### Style
|
||||
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:
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- alfresco-js-api
|
||||
- ng2-alfresco-search
|
||||
|
||||
Also make sure you include these dependencies in your .html page:
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
#### Basic usage
|
||||
|
||||
@@ -102,132 +106,70 @@ but instead the component could emit an event to be consumed upstream, or it cou
|
||||
results component embedded inside the same component.
|
||||
|
||||
```ts
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
import {
|
||||
ALFRESCO_CORE_PROVIDERS,
|
||||
AlfrescoSettingsService,
|
||||
AlfrescoAuthenticationService,
|
||||
AlfrescoTranslationService
|
||||
} from 'ng2-alfresco-core';
|
||||
import {
|
||||
ALFRESCO_SEARCH_DIRECTIVES
|
||||
} from 'ng2-alfresco-search';
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { SearchModule } from 'ng2-alfresco-search';
|
||||
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-search-demo',
|
||||
template: `
|
||||
<alfresco-search-control *ngIf="authenticated" [searchTerm]="searchTerm" (searchChange)="onSearchChange($event);" (searchSubmit)="onSearchSubmit($event)">
|
||||
</alfresco-search-control>
|
||||
<div *ngIf="!authenticated">
|
||||
Authentication failed to ip {{ host }}
|
||||
</div>
|
||||
`,
|
||||
directives: [ALFRESCO_SEARCH_DIRECTIVES]
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<alfresco-search-control [searchTerm]="'test'"></alfresco-search-control>`
|
||||
})
|
||||
class SearchDemo implements OnInit {
|
||||
class SearchDemo {
|
||||
|
||||
public searchTerm: string = 'test';
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.ecmHost = 'http://localhost:8080';
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://myalfrescoip';
|
||||
|
||||
constructor(
|
||||
private authService: AlfrescoAuthenticationService,
|
||||
settings: AlfrescoSettingsService,
|
||||
translation: AlfrescoTranslationService) {
|
||||
|
||||
settings.host = this.host;
|
||||
translation.addTranslationFolder();
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
onSearchChange(event) {
|
||||
console.log('Search term changed', event);
|
||||
this.searchTerm = event.value;
|
||||
}
|
||||
|
||||
onSearchSubmit(event) {
|
||||
console.log('Search submitted', event);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(token => {
|
||||
this.authenticated = true;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
bootstrap(SearchDemo, [
|
||||
HTTP_PROVIDERS,
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
]);
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
SearchModule
|
||||
],
|
||||
declarations: [SearchDemo],
|
||||
bootstrap: [SearchDemo]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
```
|
||||
#### Events
|
||||
|
||||
**searchChange**: Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string.<br />
|
||||
**searchSubmit**: Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object.<br />
|
||||
**fileSelect**: Emitted when a file item from the list of find-as-you-type results is selected<br />
|
||||
**expand**: Emitted when the expanded state of the control changes based on focus events and the content of the input control
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `searchChange` | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string. |
|
||||
| `searchSubmit` | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
|
||||
| `fileSelect` | Emitted when a file item from the list of find-as-you-type results is selected |
|
||||
| `expand` | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
|
||||
|
||||
#### Options
|
||||
|
||||
**searchTerm**: {string} (optional) default "". Search term to pre-populate the field with<br />
|
||||
**inputType**: {string} (optional) default "text". Type of the input field to render, e.g. "search" or "text" (default)<br />
|
||||
**expandable** {boolean} (optional) default true. Whether to use an expanding search control, if false then a regular input is used.<br />
|
||||
**autocomplete** {boolean} (optional) default true. Whether the browser should offer field auto-completion for the input field to the user.<br />
|
||||
**liveSearchEnabled** {boolean} (optional) default true. Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable.<br />
|
||||
**liveSearchRoot** {boolean} (optional) default "-root-". NodeRef or node name where the search should start.<br />
|
||||
**liveSearchResultType** {boolean} (optional) default (none). Node type to filter live search results by, e.g. 'cm:content'.<br />
|
||||
**liveSearchMaxResults** {boolean} (optional) default 5. Maximum number of results to show in the live search.<br />
|
||||
**liveSearchResultSort** {boolean} (optional) default (none). Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt"
|
||||
| Name | Type | Optional | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `searchTerm` | {string} | (optional) | "" | Search term to pre-populate the field with |
|
||||
| `inputType` | {string} | (optional) | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
|
||||
| `expandable` | {boolean} | (optional) | true | Whether to use an expanding search control, if false then a regular input is used. |
|
||||
| `autocomplet` | {boolean} | (optional) | true | Whether the browser should offer field auto-completion for the input field to the user. |
|
||||
| `liveSearchEnabled` | {boolean} | (optional) | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
|
||||
| `liveSearchRoot` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
|
||||
| `liveSearchResultType` | {boolean} | (optional) | (none) | Node type to filter live search results by, e.g. 'cm:content'. |
|
||||
| `liveSearchMaxResults` | {boolean} | (optional) | 5 | Maximum number of results to show in the live search. |
|
||||
| `iveSearchResultSort` | {boolean} | (optional) | (none) | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
|
||||
|
||||
### Search results
|
||||
|
||||
This component displays the results of a search to the user.
|
||||
|
||||
#### Dependencies
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/bundle.js"></script>
|
||||
```
|
||||
|
||||
The following component needs to be added to your systemjs.config:
|
||||
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- ng2-alfresco-search
|
||||
|
||||
Please refer to the following example to have an idea of how your systemjs.config should look like :
|
||||
|
||||
https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
|
||||
|
||||
#### Style
|
||||
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:
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your .html page:
|
||||
|
||||
```html
|
||||
<!-- 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
|
||||
#### Basic usage Search results
|
||||
|
||||
```html
|
||||
<alfresco-search [searchTerm]="searchTerm"></alfresco-search>
|
||||
@@ -238,157 +180,121 @@ search term. If no router is present on the page of if the router does not provi
|
||||
results page will be shown.
|
||||
|
||||
```ts
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
|
||||
import {
|
||||
ALFRESCO_CORE_PROVIDERS,
|
||||
AlfrescoSettingsService,
|
||||
AlfrescoAuthenticationService,
|
||||
AlfrescoTranslationService
|
||||
} from 'ng2-alfresco-core';
|
||||
|
||||
import {
|
||||
ALFRESCO_SEARCH_DIRECTIVES
|
||||
} from 'ng2-alfresco-search';
|
||||
import { NgModule, Component } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { SearchModule } from 'ng2-alfresco-search';
|
||||
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-search-demo',
|
||||
template: `
|
||||
<alfresco-search *ngIf="authenticated"></alfresco-search>
|
||||
<div *ngIf="!authenticated">
|
||||
Authentication failed to ip {{ host }}
|
||||
</div>
|
||||
`,
|
||||
directives: [ALFRESCO_SEARCH_DIRECTIVES]
|
||||
})
|
||||
class SearchDemo implements OnInit {
|
||||
|
||||
public searchTerm: string = 'test';
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://192.168.99.101:8080';
|
||||
|
||||
constructor(
|
||||
private authService: AlfrescoAuthenticationService,
|
||||
settings: AlfrescoSettingsService,
|
||||
translation: AlfrescoTranslationService) {
|
||||
|
||||
settings.host = this.host;
|
||||
translation.addTranslationFolder();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(token => {
|
||||
this.authenticated = true;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
bootstrap(SearchDemo, [
|
||||
HTTP_PROVIDERS,
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
]);
|
||||
```
|
||||
|
||||
Example of an component that displays search results, taking the search term from a `@Input` property provided by the container.
|
||||
|
||||
When the input is updated by the application, the search control will run a new search and display the results.
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { bootstrap } from '@angular/platform-browser-dynamic';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
import {
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
} from 'ng2-alfresco-core';
|
||||
import {
|
||||
ALFRESCO_SEARCH_DIRECTIVES
|
||||
} from 'ng2-alfresco-search';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-search-demo',
|
||||
template: `
|
||||
<alfresco-search [searchTerm]="searchTerm"></alfresco-search>
|
||||
`,
|
||||
directives: [ALFRESCO_SEARCH_DIRECTIVES]
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<alfresco-search [searchTerm]="'test'"></alfresco-search>`
|
||||
})
|
||||
class SearchDemo {
|
||||
@Input()
|
||||
searchTerm: string = '';
|
||||
constructor() {
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.ecmHost = 'http://localhost:8080';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap(SearchDemo, [
|
||||
HTTP_PROVIDERS,
|
||||
ALFRESCO_CORE_PROVIDERS
|
||||
]);
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
SearchModule
|
||||
],
|
||||
declarations: [SearchDemo],
|
||||
bootstrap: [SearchDemo]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
```
|
||||
|
||||
#### Events
|
||||
|
||||
**preview**: Emitted when a file result is clicked/selected<br />
|
||||
**resultsLoad**: Emitted when search results have fully loaded
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `preview` | Emitted when a file result is clicked/selected |
|
||||
| `resultsLoad` | Emitted when search results have fully loaded |
|
||||
|
||||
#### Options
|
||||
|
||||
**searchTerm**: {string} (optional) default "". Search term to use when executing the search. Updating this value will
|
||||
run a new search and update the results.<br />
|
||||
**rootNodeId** {boolean} (optional) default "-root-". NodeRef or node name where the search should start.<br />
|
||||
**resultType** {boolean} (optional) default (none). Node type to filter search results by, e.g. 'cm:content'.<br />
|
||||
**maxResults** {boolean} (optional) default 20. Maximum number of results to show in the search.<br />
|
||||
**resultSort** {boolean} (optional) default (none). Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt"
|
||||
| Name | Type | Optional | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `searchTerm` | {string} | (optional) | "" | Search term to use when executing the search. Updating this value will run a new search and update the results |
|
||||
| `rootNodeId` | {boolean} | (optional) | "-root-" | NodeRef or node name where the search should start. |
|
||||
| `resultType` | {boolean} | (optional) | (none) | Node type to filter search results by, e.g. 'cm:content'. |
|
||||
| `maxResults` | {boolean} | (optional) | 20 | Maximum number of results to show in the search. |
|
||||
| `resultSort` | {boolean} | (optional) | (none) | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
|
||||
|
||||
## Build from sources
|
||||
### Build from sources
|
||||
|
||||
Alternatively you can build the component from source with the following commands:
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
##Build the files and keep watching for changes
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
### Build the files and keep watching for changes
|
||||
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
## Running unit tests in browser
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test-browser
|
||||
```
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
### Running unit tests in browser
|
||||
|
||||
## Code coverage
|
||||
```sh
|
||||
npm test-browser
|
||||
```
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
|
||||
## Demo
|
||||
### Code coverage
|
||||
|
||||
The `demo` folder contains a complete app with both components running on a single page and linked together:
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## NPM scripts
|
||||
|
||||
| Command | Description |
|
||||
| --- | --- |
|
||||
| npm run build | Build component |
|
||||
| npm run build:w | Build component and keep watching the changes |
|
||||
| npm run test | Run unit tests in the console |
|
||||
| npm run test-browser | Run unit tests in the browser
|
||||
| npm run coverage | Run unit tests and display code coverage report |
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
@@ -10,9 +10,21 @@
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
|
||||
<!-- 1. Load libraries -->
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
@@ -26,7 +38,7 @@
|
||||
<body>
|
||||
|
||||
<div mdl class="mdl-layout mdl-js-layout">
|
||||
<alfresco-search-demo></alfresco-search-demo>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
@@ -52,24 +53,25 @@
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-search": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
@@ -28,9 +28,8 @@ import {
|
||||
AlfrescoTranslationService
|
||||
} from 'ng2-alfresco-core';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-search-demo',
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<label for="ticket"><b>Insert a valid access ticket / ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Alfresco instance:</b></label><br>
|
||||
@@ -54,7 +53,7 @@ class SearchDemo implements OnInit {
|
||||
|
||||
public searchTerm: string = 'test';
|
||||
|
||||
public ecmHost: string = 'http://devproducts-platform.alfresco.me';
|
||||
public ecmHost: string = 'http://localhost:8080';
|
||||
|
||||
ticket: string;
|
||||
|
||||
|
||||
@@ -52,6 +52,7 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
@@ -60,19 +61,24 @@
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"intl": "1.2.4",
|
||||
"dialog-polyfill": "^0.4.3",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"ng2-translate": "2.5.0",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^6.0.42",
|
||||
"@types/core-js": "^0.9.32",
|
||||
"@types/jasmine": "^2.2.33",
|
||||
"concurrently": "^2.2.0",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user