inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-914] Form List Component (#2023)

Browse Source 
Form List Component
This commit is contained in:
Maurizio Vitale 2017-07-03 15:53:15 +01:00 committed by Eugenio Romano
parent 033939615d
commit 2e03ef3548
13 changed files with 246 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
demo-shell-ng2/app/components/form/form-demo.component.html
View File

@ -1,32 +1,9 @@
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a id="demo-form" href="#demo" class="mdl-layout__tab" [class.is-active]="activeTab === 'demo'" (click)="changeToDemoForm()">DEMO</a>
<a id="store-form" href="#store" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="changeToStoreForm()">STORE</a>
</div>
</header>
<main class="mdl-layout__content activiti">
<section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'demo'" id="demo">
<div class="form-container">
<activiti-form [form]="form">
</activiti-form>
</div>
</section>
<section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'store'" id="store">
<span>FORM NAME TO VISUALIZE</span>
<input [(ngModel)]="formToLoadName" class="mdl-textfield__input" type="text" (ngModelChange)="loadForm()">
<div *ngIf="formToLoadName && formToLoadName !== '' " class="store-form-container">
<activiti-form [form]="form" [data]="restoredData" #storeForm>
</activiti-form>
<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
</div>
<div>
<span> Please create in APS the form with the name you entered</span>
</div>
<div *ngIf="showError">
<span> Form Name not valid or form not present</span>
</div>
</section>
</main>
<adf-form-list [forms]="formList"
(row-dblclick)="onRowDblClick($event)">
</adf-form-list>
<div class="form-container" *ngIf="!isEmptyForm()">
<activiti-form [form]="form" [data]="restoredData">
</activiti-form>
</div>
<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>

71
demo-shell-ng2/app/components/form/form-demo.component.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormModel, FormService } from 'ng2-activiti-form';
import { DemoForm } from './demo-form';
import { ActivitiForm } from 'ng2-activiti-form';
@ -29,17 +29,18 @@ declare var componentHandler;
'form-demo.component.css'
]
})
export class FormDemoComponent implements OnInit, AfterViewInit {
export class FormDemoComponent implements OnInit {
@ViewChild(ActivitiForm)
activitiForm: ActivitiForm;
formList: any [] = [];
form: FormModel;
activeTab: string = 'demo';
formId: string;
storedData: any = {};
restoredData: any = {};
formToLoadName: string = null;
showError: boolean = false;
constructor(private formService: FormService) {
formService.executeOutcome.subscribe(e => {
@ -49,10 +50,7 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
let formDefinitionJSON: any = DemoForm.getDefinition();
let form = this.formService.parseForm(formDefinitionJSON);
console.log(form);
this.form = form;
this.formList.push({ name: 'Demo Form Definition', lastUpdatedByFullName: 'Demo Name User', lastUpdated: '2017-06-23T13:20:30.754+0000', isFake: true });
}
ngAfterViewInit() {
@ -62,16 +60,24 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
}
}
changeToStoreForm() {
this.activeTab = 'store';
this.showError = false;
onRowDblClick(event: CustomEvent) {
let rowForm = event.detail.value.obj;
if (rowForm.isFake) {
let formDefinitionJSON: any = DemoForm.getDefinition();
let form = this.formService.parseForm(formDefinitionJSON);
this.form = form;
} else {
this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
let form = this.formService.parseForm(definition);
this.form = form;
});
}
console.log(rowForm);
}
changeToDemoForm() {
this.activeTab = 'demo';
let formDefinitionJSON: any = DemoForm.getDefinition();
let demoForm = this.formService.parseForm(formDefinitionJSON);
this.form = demoForm;
isEmptyForm() {
return this.form === null || this.form === undefined;
}
store() {
@ -82,11 +88,6 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
this.restoredData = null;
}
restore() {
this.restoredData = this.storedData;
this.storedData = {};
}
clone(objToCopyFrom, objToCopyTo) {
for (let attribute in objToCopyFrom) {
if (objToCopyFrom.hasOwnProperty(attribute)) {
@ -96,27 +97,9 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
return objToCopyTo;
}
loadForm() {
if (this.formToLoadName) {
this.showError = false;
this.formService
.getFormDefinitionByName(this.formToLoadName)
.debounceTime(7000)
.subscribe(
id => {
this.formService.getFormDefinitionById(id).subscribe(
form => {
this.form = this.formService.parseForm(form);
},
(error) => {
this.showError = true;
}
);
},
(error) => {
this.showError = true;
}
);
}
restore() {
this.restoredData = this.storedData;
this.storedData = {};
}
}

20
ng2-components/ng2-activiti-form/README.md
View File

@ -17,6 +17,8 @@
- [Activiti Content Component](#activiti-content-component)
* [Properties](#properties-1)
* [Events](#events-1)
- [ADF Form List Component](#adf-form-list-component)
* [Properties](#properties-2)
- [FormService Service](#formservice-service)
* [Events](#events-2)
* [Methods](#methods)
@ -279,6 +281,24 @@ The recommended set of properties can be found in the following table:
| --- | --- |
| contentClick | Invoked when the content is clicked. |
## ADF Form List Component
The component shows the activiti forms as a list.
```html
<adf-form-list
[forms]="[{ name: 'My Name', lastUpdatedByFullName: 'My User Name', lastUpdated: '2017-06-01'}]">
</adf-form-list>
```
### Properties
The recommended set of properties can be found in the following table:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| forms | any | | The array that contains the information to show inside the list. |
## FormService Service
```ts

6
ng2-components/ng2-activiti-form/index.ts
View File

@ -18,8 +18,9 @@
import { NgModule, ModuleWithProviders } from '@angular/core';
import { MdCheckboxModule, MdTabsModule, MdCardModule, MdButtonModule, MdIconModule, MdSlideToggleModule, MdInputModule } from '@angular/material';
import { CoreModule } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { ActivitiForm } from './src/components/activiti-form.component';
import { ADFFormList } from './src/components/adf-form-list.component';
import { ActivitiContent } from './src/components/activiti-content.component';
import { FormFieldComponent } from './src/components/form-field/form-field.component';
import { ActivitiStartForm } from './src/components/activiti-start-form.component';
@ -34,6 +35,7 @@ import { HttpModule } from '@angular/http';
import { WIDGET_DIRECTIVES, MASK_DIRECTIVE } from './src/components/widgets/index';
export * from './src/components/activiti-form.component';
export * from './src/components/adf-form-list.component';
export * from './src/components/activiti-content.component';
export * from './src/components/activiti-start-form.component';
export * from './src/services/form.service';
@ -46,6 +48,7 @@ export * from './src/events/index';
export const ACTIVITI_FORM_DIRECTIVES: any[] = [
ActivitiForm,
ADFFormList,
ActivitiContent,
ActivitiStartForm,
FormFieldComponent,
@ -65,6 +68,7 @@ export const ACTIVITI_FORM_PROVIDERS: any[] = [
@NgModule({
imports: [
CoreModule,
DataTableModule,
HttpModule,
MdCheckboxModule,
MdTabsModule,

0
ng2-components/ng2-activiti-form/src/components/adf-form-list.component.css Normal file
View File

8
ng2-components/ng2-activiti-form/src/components/adf-form-list.component.html Normal file
View File

@ -0,0 +1,8 @@
<alfresco-datatable *ngIf="!isEmpty()"
[rows]="forms">
<data-columns>
<data-column key="name" type="text" title="Name" class="ellipsis-cell" [sortable]="true"></data-column>
<data-column key="lastUpdatedByFullName" type="text" title="User" class="ellipsis-cell" [sortable]="true"></data-column>
<data-column key="lastUpdated" type="date" format="shortDate" title="Date"></data-column>
</data-columns>
</alfresco-datatable>

88
ng2-components/ng2-activiti-form/src/components/adf-form-list.component.spec.ts Normal file
View File

@ -0,0 +1,88 @@
/*!
* @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 { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { CoreModule, AlfrescoTranslationService } from 'ng2-alfresco-core';
import { DataTableModule } from 'ng2-alfresco-datatable';
import { FormService } from '../services/form.service';
import { EcmModelService } from '../services/ecm-model.service';
import { ADFFormList } from './adf-form-list.component';
import { Observable } from 'rxjs/Rx';
import { By } from '@angular/platform-browser';
declare let jasmine: any;
describe('TaskAttachmentList', () => {
let component: ADFFormList;
let fixture: ComponentFixture<ADFFormList>;
let service: FormService;
let componentHandler: any;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CoreModule.forRoot(),
DataTableModule
],
declarations: [
ADFFormList
],
providers: [
FormService,
EcmModelService
]
}).compileComponents();
let translateService = TestBed.get(AlfrescoTranslationService);
spyOn(translateService, 'addTranslationFolder').and.stub();
spyOn(translateService, 'get').and.callFake((key) => {
return Observable.of(key);
});
componentHandler = jasmine.createSpyObj('componentHandler', [
'upgradeAllRegistered',
'upgradeElement'
]);
window['componentHandler'] = componentHandler;
}));
beforeEach(async(() => {
fixture = TestBed.createComponent(ADFFormList);
component = fixture.componentInstance;
service = TestBed.get(FormService);
}));
fit('should show the forms as a list', async(() => {
spyOn(service, 'getForms').and.returnValue(Observable.of([
{ name: 'FakeName-1', lastUpdatedByFullName: 'FakeUser-1', lastUpdated: '2017-01-02' },
{ name: 'FakeName-2', lastUpdatedByFullName: 'FakeUser-2', lastUpdated: '2017-01-03' }
]));
component.ngOnChanges({});
fixture.whenStable()
.then(() => {
fixture.detectChanges();
expect(fixture.debugElement.queryAll(By.css('alfresco-datatable tbody tr')).length).toBe(2);
});
}));
});

50
ng2-components/ng2-activiti-form/src/components/adf-form-list.component.ts Normal file
View File

@ -0,0 +1,50 @@
/*!
* @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 { Component, OnChanges, Input, SimpleChanges } from '@angular/core';
import { LogService } from 'ng2-alfresco-core';
import { FormService } from './../services/form.service';
@Component({
selector: 'adf-form-list',
templateUrl: './adf-form-list.component.html',
styleUrls: ['./adf-form-list.component.css']
})
export class ADFFormList implements OnChanges {
@Input()
forms: any [] = [];
constructor(protected formService: FormService,
private logService: LogService) {
}
ngOnChanges(changes: SimpleChanges) {
this.getForms();
}
isEmpty(): boolean {
return this.forms && this.forms.length === 0;
}
getForms() {
this.formService.getForms().subscribe((forms) => {
this.forms.push(...forms);
});
}
}

6
ng2-components/ng2-activiti-form/src/services/form.service.ts
View File

@ -138,7 +138,11 @@ export class FormService {
'modelType': 2
};
return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.getModels(opts));
return Observable.fromPromise(
this.apiService.getInstance().activiti.modelsApi.getModels(opts))
.map((response: any) => <any[]> response.data || [])
.catch(err => this.handleError(err));
}
/**

4
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
View File

@ -185,14 +185,14 @@ describe('DataTable', () => {
});
it('should initialize default adapter', () => {
let table = new DataTableComponent(null);
let table = new DataTableComponent(null, null);
expect(table.data).toBeUndefined();
table.ngOnChanges({'data': new SimpleChange('123', {}, true)});
expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
});
it('should load data table on onChange', () => {
let table = new DataTableComponent(null);
let table = new DataTableComponent(null, null);
let data = new ObjectDataTableAdapter([], []);
expect(table.data).toBeUndefined();

43
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@ -15,15 +15,17 @@
* limitations under the License.
*/
import { Component, OnChanges, SimpleChange, SimpleChanges, Input, Output, EventEmitter, ElementRef, TemplateRef, AfterContentInit, ContentChild, Optional } from '@angular/core';
import { MdCheckboxChange } from '@angular/material';
import { Observable, Observer } from 'rxjs/Rx';
import { DataColumnListComponent } from 'ng2-alfresco-core';
import {
Component, OnChanges, DoCheck, IterableDiffers, SimpleChange, SimpleChanges, Input,
Output, EventEmitter, ElementRef, TemplateRef, AfterContentInit, ContentChild, Optional
} from '@angular/core';
import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent } from '../../data/datatable-adapter';
import { ObjectDataTableAdapter, ObjectDataRow } from '../../data/object-datatable-adapter';
import { DataCellEvent } from './data-cell.event';
import { DataRowActionEvent } from './data-row-action.event';
import { DataColumnListComponent } from 'ng2-alfresco-core';
import { MdCheckboxChange } from '@angular/material';
import { Observable, Observer } from 'rxjs/Rx';
declare var componentHandler;
@ -32,7 +34,7 @@ declare var componentHandler;
styleUrls: ['./datatable.component.css'],
templateUrl: './datatable.component.html'
})
export class DataTableComponent implements AfterContentInit, OnChanges {
export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck {
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
@ -95,7 +97,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
private clickObserver: Observer<DataRowEvent>;
private click$: Observable<DataRowEvent>;
constructor(@Optional() private el: ElementRef) {
private schema: DataColumn[] = [];
private differ: any;
constructor(
@Optional() private el: ElementRef,
private differs: IterableDiffers) {
if (differs) {
this.differ = differs.find([]).create(null);
}
this.click$ = new Observable<DataRowEvent>(observer => this.clickObserver = observer).share();
}
@ -140,6 +151,13 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
}
}
ngDoCheck() {
let changes = this.differ.diff(this.rows);
if (changes) {
this.setTableRows(this.rows);
}
}
isPropertyChanged(property: SimpleChange): boolean {
return property && property.currentValue ? true : false;
}
@ -189,7 +207,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
}
private initTable() {
this.data = new ObjectDataTableAdapter(this.rows, []);
this.data = new ObjectDataTableAdapter(this.rows, this.schema);
}
isTableEmpty() {
@ -202,14 +220,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
}
private setTableSchema() {
let schema: DataColumn[] = [];
if (this.columnList && this.columnList.columns) {
schema = this.columnList.columns.map(c => <DataColumn> c);
this.schema = this.columnList.columns.map(c => <DataColumn> c);
}
if (this.data && schema && schema.length > 0) {
this.data.setColumns(schema);
if (this.data && this.schema && this.schema.length > 0) {
this.data.setColumns(this.schema);
}
}
@ -353,4 +369,5 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
isMultiSelectionMode(): boolean {
return this.selectionMode && this.selectionMode.toLowerCase() === 'multiple';
}
}

4
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts
View File

@ -691,7 +691,7 @@ describe('DocumentList', () => {
it('should check [empty folder] template ', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null);
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.dataTable).toBeDefined();
expect(documentList.isEmptyTemplateDefined()).toBeTruthy();
@ -701,7 +701,7 @@ describe('DocumentList', () => {
it('should empty folder NOT show the pagination', () => {
documentList.emptyFolderTemplate = <TemplateRef<any>> {};
documentList.dataTable = new DataTableComponent(null);
documentList.dataTable = new DataTableComponent(null, null);
expect(documentList.isEmpty()).toBeTruthy();
expect(element.querySelector('alfresco-pagination')).toBe(null);

2
ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts
View File

@ -29,7 +29,7 @@ describe('EmptyFolderContent', () => {
beforeEach(() => {
let documentListService = new DocumentListServiceMock();
documentList = new DocumentListComponent(documentListService, null, null, null);
documentList.dataTable = new DataTableComponent(null);
documentList.dataTable = new DataTableComponent(null, null);
emptyFolderContent = new EmptyFolderContentComponent(documentList);
});