diff --git a/demo-shell-ng2/app/components/form/form-demo.component.html b/demo-shell-ng2/app/components/form/form-demo.component.html index 5b993a273c..250aaec488 100644 --- a/demo-shell-ng2/app/components/form/form-demo.component.html +++ b/demo-shell-ng2/app/components/form/form-demo.component.html @@ -1,32 +1,9 @@ -
-
-
- DEMO - STORE -
-
-
-
-
- - -
-
-
- FORM NAME TO VISUALIZE - -
- - - - -
-
- Please create in APS the form with the name you entered -
-
- Form Name not valid or form not present -
-
-
+ + +
+ +
+ + diff --git a/demo-shell-ng2/app/components/form/form-demo.component.ts b/demo-shell-ng2/app/components/form/form-demo.component.ts index 3a9fa58262..e142c75426 100644 --- a/demo-shell-ng2/app/components/form/form-demo.component.ts +++ b/demo-shell-ng2/app/components/form/form-demo.component.ts @@ -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 = {}; } + } diff --git a/ng2-components/ng2-activiti-form/README.md b/ng2-components/ng2-activiti-form/README.md index 4e9457898d..0fa11ca4be 100644 --- a/ng2-components/ng2-activiti-form/README.md +++ b/ng2-components/ng2-activiti-form/README.md @@ -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 + + +``` + +### 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 diff --git a/ng2-components/ng2-activiti-form/index.ts b/ng2-components/ng2-activiti-form/index.ts index d0ecafb8ea..463c45b63b 100644 --- a/ng2-components/ng2-activiti-form/index.ts +++ b/ng2-components/ng2-activiti-form/index.ts @@ -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, diff --git a/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.css b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.html b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.html new file mode 100644 index 0000000000..e483af46fe --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.html @@ -0,0 +1,8 @@ + + + + + + + diff --git a/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.spec.ts b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.spec.ts new file mode 100644 index 0000000000..8e2deab5af --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.spec.ts @@ -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; + 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); + }); + })); + +}); diff --git a/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.ts b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.ts new file mode 100644 index 0000000000..7ad73507c4 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/adf-form-list.component.ts @@ -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); + }); + } + +} diff --git a/ng2-components/ng2-activiti-form/src/services/form.service.ts b/ng2-components/ng2-activiti-form/src/services/form.service.ts index 61ff29f94e..c88b69fd4d 100644 --- a/ng2-components/ng2-activiti-form/src/services/form.service.ts +++ b/ng2-components/ng2-activiti-form/src/services/form.service.ts @@ -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) => response.data || []) + .catch(err => this.handleError(err)); + } /** diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts index 2337c9b81f..d353594a98 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts @@ -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(); diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index 9512daeb4b..f8e0b766f3 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts @@ -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; private click$: Observable; - 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(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 => c); + this.schema = this.columnList.columns.map(c => 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'; } + } diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts index 479a3db5a9..2cb38c59c8 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts @@ -691,7 +691,7 @@ describe('DocumentList', () => { it('should check [empty folder] template ', () => { documentList.emptyFolderTemplate = > {}; - 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 = > {}; - documentList.dataTable = new DataTableComponent(null); + documentList.dataTable = new DataTableComponent(null, null); expect(documentList.isEmpty()).toBeTruthy(); expect(element.querySelector('alfresco-pagination')).toBe(null); diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts index aae664a984..8c3a2359df 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts @@ -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); });