mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Activtiti apps - Provide a way to filter the apps (#1804)
* Provide a way to filter the apps #1389 * Add unit test #1389 * Add documentation #1389 * Improve docs #1389 * Correct image * Add parameter filtersAppId to docs
This commit is contained in:
committed by
Mario Romano
parent
25a430c933
commit
7239b37dac
@@ -224,10 +224,10 @@ Example:
|
||||
|
||||
```json
|
||||
[
|
||||
{type: 'text', key: 'id', title: 'Id'},
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'formKey', title: 'Form Key', sortable: true},
|
||||
{type: 'text', key: 'created', title: 'Created', sortable: true}
|
||||
{"type": "text", "key": "id", "title": "Id"},
|
||||
{"type": "text", "key": "name", "title": "Name", "cssClass": "full-width name-column", "sortable": true},
|
||||
{"type": "text", "key": "formKey", "title": "Form Key", "sortable": true},
|
||||
{"type": "text", "key": "created", "title": "Created", "sortable": true}
|
||||
]
|
||||
```
|
||||
|
||||
@@ -310,6 +310,31 @@ The component shows all the available apps.
|
||||
| Name | Type | Required | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `layoutType` | {string} | required | Define the layout of the apps. There are two possible values: GRID or LIST. |
|
||||
| `filtersAppId` | {Object} | | Provide a way to filter the apps to show. |
|
||||
|
||||
|
||||
### How filter the activiti apps
|
||||
|
||||
If you want show some specific apps you can specify them through the filtersAppId parameters
|
||||
|
||||
```html
|
||||
<activiti-apps [filtersAppId]="'[{defaultAppId: 'tasks'}, {deploymentId: '15037'}, {name : 'my app name'}]'"></activiti-apps>
|
||||
```
|
||||
|
||||
In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be showed
|
||||

|
||||
|
||||
You can use inside the filter one of the following property
|
||||
```json
|
||||
{
|
||||
"defaultAppId": "string",
|
||||
"deploymentId": "string",
|
||||
"name": "string",
|
||||
"id": "number",
|
||||
"modelId": "number",
|
||||
"tenantId": "number"
|
||||
}
|
||||
```
|
||||
|
||||
## Basic usage example Activiti Filter
|
||||
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 89 KiB |
@@ -17,22 +17,6 @@
|
||||
|
||||
import { AppDefinitionRepresentationModel } from '../models/filter.model';
|
||||
|
||||
export var deployedApps = [new AppDefinitionRepresentationModel({
|
||||
id: '1',
|
||||
name: 'App1',
|
||||
icon: 'icon1',
|
||||
deploymentId: '1'
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: '2',
|
||||
name: 'App2',
|
||||
icon: 'icon2',
|
||||
deploymentId: '2'
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: '3',
|
||||
name: 'App3',
|
||||
icon: 'icon3',
|
||||
deploymentId: '3'
|
||||
})];
|
||||
export var nonDeployedApps = [new AppDefinitionRepresentationModel({
|
||||
id: '1',
|
||||
name: '1',
|
||||
@@ -46,6 +30,50 @@ export var nonDeployedApps = [new AppDefinitionRepresentationModel({
|
||||
name: '3',
|
||||
icon: 'icon3'
|
||||
})];
|
||||
export var deployedApps = [new AppDefinitionRepresentationModel({
|
||||
id: 1,
|
||||
name: 'App1',
|
||||
icon: 'icon1',
|
||||
deploymentId: '1',
|
||||
defaultAppId: 'fake-app-1',
|
||||
modelId: null,
|
||||
tenantId: null
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: 2,
|
||||
name: 'App2',
|
||||
icon: 'icon2',
|
||||
deploymentId: '2',
|
||||
modelId: null,
|
||||
tenantId: null
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: 3,
|
||||
name: 'App3',
|
||||
icon: 'icon3',
|
||||
deploymentId: '3',
|
||||
modelId: null,
|
||||
tenantId: null
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: 4,
|
||||
name: 'App4',
|
||||
icon: 'icon4',
|
||||
deploymentId: '4',
|
||||
modelId: 65,
|
||||
tenantId: null
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: 5,
|
||||
name: 'App5',
|
||||
icon: 'icon5',
|
||||
deploymentId: '5',
|
||||
modelId: 66,
|
||||
tenantId: 9
|
||||
}), new AppDefinitionRepresentationModel({
|
||||
id: 6,
|
||||
name: 'App6',
|
||||
icon: 'icon6',
|
||||
deploymentId: '6',
|
||||
tenantId: 9,
|
||||
modelId: 66
|
||||
})];
|
||||
export var defaultApp = [new AppDefinitionRepresentationModel({
|
||||
defaultAppId: 'tasks'
|
||||
})];
|
||||
|
@@ -22,3 +22,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-container" *ngIf="isEmpty()">
|
||||
{{ 'APPS.NONE' | translate }}
|
||||
</div>
|
||||
|
@@ -59,7 +59,7 @@ describe('ActivitiApps', () => {
|
||||
debugElement = fixture.debugElement;
|
||||
|
||||
service = fixture.debugElement.injector.get(ActivitiTaskListService);
|
||||
getAppsSpy = spyOn(service, 'getDeployedApplications').and.returnValue(Observable.of());
|
||||
getAppsSpy = spyOn(service, 'getDeployedApplications').and.returnValue(Observable.of(deployedApps));
|
||||
|
||||
componentHandler = jasmine.createSpyObj('componentHandler', [
|
||||
'upgradeAllRegistered',
|
||||
@@ -79,6 +79,59 @@ describe('ActivitiApps', () => {
|
||||
expect(getAppsSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should show the apps filterd by defaultAppId', () => {
|
||||
component.filtersAppId = [{defaultAppId: 'fake-app-1'}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should show the apps filterd by deploymentId', () => {
|
||||
component.filtersAppId = [{deploymentId: '4'}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
expect(component.appList[0].deploymentId).toEqual('4');
|
||||
});
|
||||
|
||||
it('should show the apps filterd by name', () => {
|
||||
component.filtersAppId = [{name: 'App5'}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
expect(component.appList[0].name).toEqual('App5');
|
||||
});
|
||||
|
||||
it('should show the apps filterd by id', () => {
|
||||
component.filtersAppId = [{id: 6}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(1);
|
||||
expect(component.appList[0].id).toEqual(6);
|
||||
});
|
||||
|
||||
it('should show the apps filterd by modelId', () => {
|
||||
component.filtersAppId = [{modelId: 66}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(2);
|
||||
expect(component.appList[0].modelId).toEqual(66);
|
||||
});
|
||||
|
||||
it('should show the apps filterd by tenandId', () => {
|
||||
component.filtersAppId = [{tenantId: 9}];
|
||||
fixture.detectChanges();
|
||||
expect(component.isEmpty()).toBe(false);
|
||||
expect(component.appList).toBeDefined();
|
||||
expect(component.appList.length).toEqual(2);
|
||||
expect(component.appList[0].tenantId).toEqual(9);
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs loading apps', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
getAppsSpy.and.returnValue(Observable.throw({}));
|
||||
@@ -119,7 +172,7 @@ describe('ActivitiApps', () => {
|
||||
it('should display all deployed apps', () => {
|
||||
getAppsSpy.and.returnValue(Observable.of(deployedApps));
|
||||
fixture.detectChanges();
|
||||
expect(debugElement.queryAll(By.css('h1')).length).toBe(3);
|
||||
expect(debugElement.queryAll(By.css('h1')).length).toBe(6);
|
||||
});
|
||||
|
||||
it('should not display undeployed apps', () => {
|
||||
|
@@ -45,6 +45,9 @@ export class ActivitiApps implements OnInit {
|
||||
@Input()
|
||||
layoutType: string = ActivitiApps.LAYOUT_GRID;
|
||||
|
||||
@Input()
|
||||
filtersAppId: any[];
|
||||
|
||||
@Output()
|
||||
appClick: EventEmitter<AppDefinitionRepresentationModel> = new EventEmitter<AppDefinitionRepresentationModel>();
|
||||
|
||||
@@ -90,6 +93,7 @@ export class ActivitiApps implements OnInit {
|
||||
private load() {
|
||||
this.activitiTaskList.getDeployedApplications().subscribe(
|
||||
(res) => {
|
||||
res = this.filterApps(res);
|
||||
res.forEach((app: AppDefinitionRepresentationModel) => {
|
||||
if (app.defaultAppId === ActivitiApps.DEFAULT_TASKS_APP) {
|
||||
app.name = ActivitiApps.DEFAULT_TASKS_APP_NAME;
|
||||
@@ -125,6 +129,27 @@ export class ActivitiApps implements OnInit {
|
||||
return (this.currentApp !== undefined && appId === this.currentApp.id);
|
||||
}
|
||||
|
||||
private filterApps(apps: AppDefinitionRepresentationModel []): AppDefinitionRepresentationModel[] {
|
||||
let filteredApps = [];
|
||||
if (this.filtersAppId) {
|
||||
apps.filter((app: AppDefinitionRepresentationModel) => {
|
||||
this.filtersAppId.forEach((filter) => {
|
||||
if (app.defaultAppId === filter.defaultAppId ||
|
||||
app.deploymentId === filter.deploymentId ||
|
||||
app.name === filter.name ||
|
||||
app.id === filter.id ||
|
||||
app.modelId === filter.modelId ||
|
||||
app.tenantId === filter.tenantId) {
|
||||
filteredApps.push(app);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
return apps;
|
||||
}
|
||||
return filteredApps;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the value of the layoutType property is an allowed value
|
||||
* @returns {boolean}
|
||||
|
@@ -1,4 +1,7 @@
|
||||
{
|
||||
"APPS": {
|
||||
"NONE": "No apps found."
|
||||
},
|
||||
"TASK_LIST": {
|
||||
"MESSAGES": {
|
||||
"NONE": "No tasks list found."
|
||||
|
@@ -1,4 +1,7 @@
|
||||
{
|
||||
"APPS": {
|
||||
"NONE": "Nessuna applicazione trovata."
|
||||
},
|
||||
"TASK_LIST": {
|
||||
"MESSAGES": {
|
||||
"NONE": "Nessuna lista tasks trovata."
|
||||
|
Reference in New Issue
Block a user