diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json index 78139b5851..01d57fd935 100644 --- a/demo-shell/resources/i18n/en.json +++ b/demo-shell/resources/i18n/en.json @@ -43,6 +43,7 @@ "DESCRIPTION_UPLOAD" : "Enable upload", "ENABLE_INFINITE_SCROLL":"Enable Infinite Scrolling", "MULTISELECT_DESCRIPTION" : "Use Cmd (Mac) or Ctrl (Windows) to toggle selection of multiple items", + "RECENT" : "Recent Files", "COLUMNS": { "DISPLAY_NAME": "Display name", "TAG": "Tag", @@ -50,6 +51,13 @@ "CREATED_ON": "Created on", "CREATED": "Created" }, + "TOOLBAR": { + "CARDVIEW":"Card view mode", + "NEW_FOLDER":"New folder", + "EDIT_FOLDER":"Edit folder", + "DOWNLOAD":"Download", + "DELETE":"Delete" + }, "ACTIONS": { "DOWNLOAD": "Download", "FOLDER": { diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html index 3526931db5..32d936f184 100644 --- a/demo-shell/src/app/components/files/files.component.html +++ b/demo-shell/src/app/components/files/files.component.html @@ -1,15 +1,33 @@
+ +
+ + history{{ 'DOCUMENT_LIST.RECENT' | translate }} + + + + + +
+
+ [disabled]="disableDragArea" + [parentId]="getDocumentListCurrentFolderId()" + [versioning]="versioning" + [adf-node-permission]="'create'" + [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
+ @@ -128,6 +160,7 @@ [allowDropFiles]="true" [selectionMode]="selectionMode" [multiselect]="multiselect" + [cardview]="cardview" [node]="nodeResult" (error)="onNavigationError($event)" (success)="resetError()" @@ -276,13 +309,13 @@
face - {{'VERSION.CHOOSE_FILE' | translate}} + {{'VERSION.CHOOSE_FILE' | translate}}
warning - {{'VERSION.NO_PERMISSION' | translate}} + {{'VERSION.NO_PERMISSION' | translate}}
@@ -292,7 +325,7 @@ -
+
@@ -338,9 +371,9 @@
- {{'DOCUMENT_LIST.MAX_SIZE' | - translate}} - + {{'DOCUMENT_LIST.MAX_SIZE' | + translate}} +
@@ -358,15 +391,15 @@
Upload
- +
-
diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss index eb125cdfe4..b2e09763b6 100644 --- a/demo-shell/src/app/components/files/files.component.scss +++ b/demo-shell/src/app/components/files/files.component.scss @@ -30,8 +30,8 @@ adf-document-list ::ng-deep adf-datatable tr.document-list__disable { background: red !important; } -adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg { - fill: #00bcd4; +adf-document-list ::ng-deep .adf-datatable-selected > svg { + fill: #00bcd4 !important; } .adf-site-container-style { @@ -116,6 +116,10 @@ adf-document-list ::ng-deep adf-datatable > table > tbody > tr.is-selected > td. letter-spacing: -1px; } +.adf-recent-container{ + border: 1px solid rgba(0, 0, 0, 0.07); +} + @media (max-width: $minimumDocumentListWidth) { adf-document-list ::ng-deep adf-datatable { & ::ng-deep .adf-data-table-cell--fileSize { diff --git a/demo-shell/src/app/components/files/files.component.ts b/demo-shell/src/app/components/files/files.component.ts index 67f87565d4..be8cd66cad 100644 --- a/demo-shell/src/app/components/files/files.component.ts +++ b/demo-shell/src/app/components/files/files.component.ts @@ -49,6 +49,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy { fileNodeId: any; showViewer = false; showVersions = false; + cardview = false; toolbarColor = 'default'; @@ -423,4 +424,8 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy { onPrevPage(event: Pagination): void { this.turnedPreviousPage.emit(event); } + + toogleCardview(event: Pagination): void { + this.cardview = !this.cardview; + } } diff --git a/demo-shell/tsconfig.json b/demo-shell/tsconfig.json index 5ea8320c0b..16f8c697f0 100644 --- a/demo-shell/tsconfig.json +++ b/demo-shell/tsconfig.json @@ -18,14 +18,6 @@ "lib": [ "es2016", "dom" - ], - "paths": { - "rxjs/*": [ - "../node_modules/rxjs/*" - ], - "@angular/*": [ - "../node_modules/@angular/*" - ] - } + ] } } diff --git a/docs/datatable.component.md b/docs/datatable.component.md index 5699af82c2..bd030e63c1 100644 --- a/docs/datatable.component.md +++ b/docs/datatable.component.md @@ -18,6 +18,7 @@ See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/ - [Supplying data for the table](#supplying-data-for-the-table) - [Customizing columns](#customizing-columns) - [DataTable DOM Events](#datatable-dom-events) + - [Card view](#card-view) - [Custom Empty content template](#custom-empty-content-template) - [Loading content template](#loading-content-template) - [Events](#events-1) @@ -133,8 +134,9 @@ export class DataTableDemo { | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) | | loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template | | showHeader | boolean | true | Toggles header visibility | +| cardview | boolean | true | enable the cardview mode | | selection | DataRow\[] | \[] | Contains selected rows | - + ### Events | Name | Description | @@ -192,6 +194,20 @@ onRowClick(event) { ![](docassets/images/datatable-dom-events.png) +### Card view + +If you want enable the card view mode you need to set to true the input parameter [cardview] : + +```html + + ``` +### Card view + +If you want enable the card view mode you need to set to true the input parameter [cardview] : + +```html + + +``` + +![card-view](docassets/images/document-list-card-view.png) + + ### Pagination strategy The Document List by default supports 2 type of pagination, the **finite** and the **infinite** pagination. diff --git a/integration/base_ver_2_app/package.json b/integration/base_ver_2_app/package.json index 3c9fa64701..b2cf494417 100644 --- a/integration/base_ver_2_app/package.json +++ b/integration/base_ver_2_app/package.json @@ -31,7 +31,7 @@ "@angular/platform-browser-dynamic": "5.0.0", "@angular/router": "5.0.0", "@ngx-translate/core": "8.0.0", - "alfresco-js-api": "^2.1.0-4c702fe0041642c09f12fb939014cf70671d8ed8", + "alfresco-js-api": "2.0.0", "chart.js": "2.5.0", "classlist.js": "1.1.20150312", "core-js": "2.4.1", diff --git a/integration/base_ver_2_app/tsconfig.json b/integration/base_ver_2_app/tsconfig.json index b4d58af4b3..aa20b7c60c 100644 --- a/integration/base_ver_2_app/tsconfig.json +++ b/integration/base_ver_2_app/tsconfig.json @@ -17,14 +17,6 @@ "lib": [ "es2016", "dom" - ], - "paths": { - "rxjs/*": [ - "../node_modules/rxjs/*" - ], - "@angular/*": [ - "../node_modules/@angular/*" - ] - } + ] } -} \ No newline at end of file +} diff --git a/lib/content-services/document-list/components/document-list.component.html b/lib/content-services/document-list/components/document-list.component.html index 6160d8158a..759bfae04b 100644 --- a/lib/content-services/document-list/components/document-list.component.html +++ b/lib/content-services/document-list/components/document-list.component.html @@ -9,8 +9,9 @@ [rowStyle]="rowStyle" [rowStyleClass]="rowStyleClass" [loading]="loading" + [cardview]="cardview" [noPermission]="noPermission" - [showHeader]="!isEmpty()" + [showHeader]="!isEmpty() && showHeader" (showRowContextMenu)="onShowRowContextMenu($event)" (showRowActionsMenu)="onShowRowActionsMenu($event)" (executeRowAction)="onExecuteRowAction($event)" diff --git a/lib/content-services/document-list/components/document-list.component.scss b/lib/content-services/document-list/components/document-list.component.scss index 460bc6155c..6b9cc2ce49 100644 --- a/lib/content-services/document-list/components/document-list.component.scss +++ b/lib/content-services/document-list/components/document-list.component.scss @@ -2,7 +2,7 @@ $foreground: map-get($theme, foreground); $accent: map-get($theme, accent); - adf-datatable > table > tbody > tr.is-selected > td.adf-data-table-cell.adf-data-table-cell--image.image-table-cell > div > div > mat-icon > svg { + .adf-datatable-selected > svg { fill: mat-color($accent); margin-top: -4px; margin-left: -4px; diff --git a/lib/content-services/document-list/components/document-list.component.spec.ts b/lib/content-services/document-list/components/document-list.component.spec.ts index 888f02d572..db4d831601 100644 --- a/lib/content-services/document-list/components/document-list.component.spec.ts +++ b/lib/content-services/document-list/components/document-list.component.spec.ts @@ -181,7 +181,65 @@ describe('DocumentList', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - expect(element.querySelector('#adf-document-list-loading')).toBeDefined(); + expect(element.querySelector('.adf-document-list-loading')).toBeDefined(); + done(); + }); + }); + + it('should hide the header if showHeader is false', (done) => { + documentList.showHeader = false; + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(element.querySelector('.adf-datatable-header')).toBe(null); + done(); + }); + }); + + it('should show the header if showHeader is true', (done) => { + documentList.showHeader = true; + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(element.querySelector('.adf-datatable-header')).toBeDefined(); + done(); + }); + }); + + it('should reset selection upon reload', () => { + spyOn(documentList, 'resetSelection').and.callThrough(); + + documentList.reload(); + fixture.detectChanges(); + + expect(documentList.resetSelection).toHaveBeenCalled(); + }); + + it('should use the cardview style if cardview is true', (done) => { + documentList.cardview = true; + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(element.querySelector('.adf-data-table-card')).toBeDefined(); + done(); + }); + }); + + it('should use the base document list style if cardview is false', (done) => { + documentList.cardview = false; + + fixture.detectChanges(); + + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(element.querySelector('.adf-data-table-card')).toBe(null); + expect(element.querySelector('.adf-data-table')).toBeDefined(); done(); }); }); diff --git a/lib/content-services/document-list/components/document-list.component.ts b/lib/content-services/document-list/components/document-list.component.ts index 141706bf42..7cce60ccf7 100644 --- a/lib/content-services/document-list/components/document-list.component.ts +++ b/lib/content-services/document-list/components/document-list.component.ts @@ -71,6 +71,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent; + /* Enable the cardview mode */ + @Input() + cardview: boolean = false; + /** Define a set of CSS styles styles to apply depending on the permission * of the user on that node. See the Permission Style model * page for further details and examples. @@ -86,6 +90,10 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte @Input() navigate: boolean = true; + /** Toggles the header */ + @Input() + showHeader: boolean = true; + /** User interaction for folder navigation or file preview. Valid values are "click" and "dblclick". */ @Input() navigationMode: string = DocumentListComponent.DOUBLE_CLICK_NAVIGATION; // click|dblclick diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html index 7f931e0082..7c4a29e9c0 100644 --- a/lib/core/datatable/components/datatable/datatable.component.html +++ b/lib/core/datatable/components/datatable/datatable.component.html @@ -1,187 +1,212 @@ - - - - - - - - - - - - - - - - - - +
+
+
-
+ + + + - - - - + + + + - - - - - - - - - - - - -
- Actions - - - - {{ col.srTitle | translate }} - {{ col.title | translate}} - - Actions -
- - - - - - - - -
- -
- {{ asIconValue(row, col) }} - - +
+ + +
+
+
+ +
+ {{ asIconValue(row, col) }} + + - {{ iconAltTextKey(data.getValue(row, col)) | translate }} -
-
- {{ iconAltTextKey(data.getValue(row, col)) | translate }} - {{ data.getValue(row, col) }} -
-
- - -
-
- - -
-
- - -
-
- - -
- + {{ iconAltTextKey(data.getValue(row, col)) | translate }} +
+
+ {{ iconAltTextKey(data.getValue(row, col)) | translate }} + {{ data.getValue(row, col) }} +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ - + +
+
+ + +
-
- - -
-
- - - - -
- +
+
+ + + +
+
+ +
+ class="adf-no-permission__row"> +
+ + [ngForTemplate]="noPermissionTemplate"> - -
- - -
- - -
+
+
+
+
+ + +
+
+
+
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index 861858c4a8..566545937d 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -1,4 +1,3 @@ - @mixin adf-datatable-theme($theme) { $foreground: map-get($theme, foreground); $background: map-get($theme, background); @@ -26,7 +25,148 @@ $data-table-cell-top: $data-table-card-padding / 2; $data-table-drag-border: 1px dashed rgb(68, 138, 255); + .adf-data-table-card { + + border: 1px solid mat-color($foreground, divider); + + .sr-only { + } + + .adf-datatable-body { + flex-flow: row wrap; + display: flex; + + width: 100%; + flex-direction: row; + justify-content: space-between; + + &:after { + content: ""; + flex: auto; + } + + .adf-datatable-row { + transition: all 0.3s ease; + position: relative; + display: flex; + flex-direction: column; + flex: 0 1 24%; + + width: 288px !important; + max-width: 288px !important; + min-width: 288px !important; + + height: 200px !important; + + overflow: hidden !important; + margin: 6px; + padding: 15px; + + @include mat-elevation-transition; + @include mat-overridable-elevation(2); + } + + .is-selected { + background: mat-color($primary, 100); + padding-bottom: 31px; + } + + .adf-data-table-card-permission { + width: 100%; + min-height: 250px; + + .adf-datatable-table-cell { + height: 240px !important; + } + } + + .adf-data-table-card-loading { + width: 100%; + min-height: 250px; + + .adf-datatable-table-cell { + height: 240px !important; + } + } + + .adf-data-table-card-empty { + width: 100%; + min-height: 380px; + + .adf-datatable-table-cell { + height: 370px !important; + } + } + + .adf-datatable-table-cell { + text-align: left; + flex: 0 1 24%; + height: 136px !important; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + outline: none; + + &:before { + margin-left: 10px; + text-align: left; + content: attr(title); + color: mat-color($foreground, text, 0.4); + float: left; + width: 140px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + } + .alfresco-datatable__actions-cell { + position: absolute; + height: 42px !important; + width: 42px !important; + right: 0px; + text-align: right; + } + + .image-table-cell { + margin: 8px; + padding: 4px; + overflow: visible; + border-bottom-color: mat-color($foreground, divider); + border-bottom-width: 1px; + border-bottom-style: solid; + + .cell-container { + float: left; + width: 42px; + } + + &:after { + margin: 2px; + content: attr(filename); + float: left; + width: 140px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .adf-datatable-table-checkbox { + margin: 8px; + } + + } + + .adf-datatable-header { + margin-right: 18px; + float: right; + } + + } + .adf-data-table { + display: table; width: 100%; position: relative; border: $data-table-dividers; @@ -38,12 +178,36 @@ border-collapse: unset; border-spacing: 0; - thead { - padding-bottom: 3px; + .adf-datatable-row { + display: table-row; + vertical-align: inherit; + border-color: inherit; } - tbody { - tr { + .adf-datatable-body { + display: table-row-group; + vertical-align: middle; + border-color: inherit; + } + + .adf-datatable-table-cell { + display: table-cell; + } + + .adf-datatable-table-cell-header { + display: table-cell; + } + + .adf-datatable-header { + padding-bottom: 3px; + display: table-header-group; + vertical-align: middle; + border-color: inherit; + } + + .adf-datatable-body { + + .adf-datatable-row { cursor: pointer; position: relative; height: $data-table-row-height; @@ -73,7 +237,7 @@ } } - td, th { + .adf-datatable-table-cell, .adf-datatable-table-cell-header { padding: 0 $data-table-column-padding 12px $data-table-column-padding; text-align: right; @@ -93,7 +257,7 @@ } } - td { + .adf-datatable-table-cell { color: mat-color($foreground, text); position: relative; vertical-align: middle; @@ -105,7 +269,7 @@ @include no-select; } - th { + .adf-datatable-table-cell-header { @include no-select; cursor: pointer; position: relative; @@ -153,7 +317,7 @@ .adf-data-table-cell { text-align: left; - height: 100%; + height: 100%; &--text { text-align: left; @@ -182,7 +346,7 @@ .cell-container { display: flex; - align-items: center; + align-items: center; } } @@ -202,6 +366,7 @@ /* Loading folder */ .adf-loading-content-container { padding: 0 !important; + width: 100%; & > img { width: 100%; diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index 82bdba5d4c..75ed09edee 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts @@ -51,6 +51,86 @@ describe('DataTable', () => { element = fixture.debugElement.nativeElement; }); + it('should use the cardview style if cardview is true', () => { + let newData = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' } + ], + [new ObjectDataColumn({ key: 'name' })] + ); + + dataTable.cardview = true; + dataTable.ngOnChanges({ + data: new SimpleChange(null, newData, false) + }); + + fixture.detectChanges(); + + expect(element.querySelector('.adf-data-table-card')).not.toBeNull(); + expect(element.querySelector('.adf-data-table')).toBeNull(); + }); + + it('should use the cardview style if cardview is false', () => { + let newData = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' } + ], + [new ObjectDataColumn({ key: 'name' })] + ); + + dataTable.cardview = false; + dataTable.ngOnChanges({ + data: new SimpleChange(null, newData, false) + }); + + fixture.detectChanges(); + + expect(element.querySelector('.adf-data-table-card')).toBeNull(); + expect(element.querySelector('.adf-data-table')).not.toBeNull(); + }); + + it('should hide the header if showHeader is false', () => { + let newData = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' } + ], + [new ObjectDataColumn({ key: 'name' })] + ); + + dataTable.showHeader = false; + dataTable.loading = false; + dataTable.ngOnChanges({ + data: new SimpleChange(null, newData, false) + }); + + fixture.detectChanges(); + + expect(element.querySelector('.adf-datatable-header')).toBe(null); + }); + + it('should show the header if showHeader is true', () => { + let newData = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' } + ], + [new ObjectDataColumn({ key: 'name' })] + ); + dataTable.showHeader = true; + dataTable.loading = false; + + dataTable.ngOnChanges({ + data: new SimpleChange(null, newData, false) + }); + + fixture.detectChanges(); + + expect(element.querySelector('.adf-datatable-header')).toBeDefined(); + }); + it('should emit "sorting-changed" DOM event', (done) => { const column = new ObjectDataColumn({ key: 'name', sortable: true, direction: 'asc' }); dataTable.data = new ObjectDataTableAdapter( @@ -206,32 +286,40 @@ describe('DataTable', () => { }); it('should put actions menu to the right by default', () => { - dataTable.data = new ObjectDataTableAdapter([], [ - {}, - {}, - {} - ]); + dataTable.data = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' }, + { name: '3' }, + { name: '4' } + ], + [new ObjectDataColumn({ key: 'name' })] + ); + dataTable.actions = true; fixture.detectChanges(); - let headers = element.querySelectorAll('th'); - expect(headers.length).toBe(4); - expect(headers[headers.length - 1].classList.contains('actions-column')).toBeTruthy(); + let actions = element.querySelectorAll('[id^=action_menu_right]'); + expect(actions.length).toBe(4); }); it('should put actions menu to the left', () => { - dataTable.data = new ObjectDataTableAdapter([], [ - {}, - {}, - {} - ]); + dataTable.data = new ObjectDataTableAdapter( + [ + { name: '1' }, + { name: '2' }, + { name: '3' }, + { name: '4' } + ], + [new ObjectDataColumn({ key: 'name' })] + ); + dataTable.actions = true; dataTable.actionsPosition = 'left'; fixture.detectChanges(); - let headers = element.querySelectorAll('th'); - expect(headers.length).toBe(4); - expect(headers[0].classList.contains('actions-column')).toBeTruthy(); + let actions = element.querySelectorAll('[id^=action_menu_left]'); + expect(actions.length).toBe(4); }); it('should initialize default adapter', () => { diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index 073ce745e7..48e280a5e5 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/lib/core/datatable/components/datatable/datatable.component.ts @@ -53,6 +53,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck @Input() data: DataTableAdapter; + /* Enable the cardview mode */ + @Input() + cardview: boolean = false; + /* The rows that the datatable will show */ @Input() rows: any[] = []; @@ -483,6 +487,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck return `${row.cssClass} ${this.rowStyleClass}`; } + getFilename(row: DataRow): string { + return row.getValue('name'); + } + + getSortingKey(): string { + if (this.data.getSorting()) { + return this.data.getSorting().key; + } + } + private selectRow(row: DataRow, value: boolean) { if (row) { row.isSelected = value; diff --git a/lib/core/form/components/form-list.component.spec.ts b/lib/core/form/components/form-list.component.spec.ts index 60433dc3ba..7498b0982a 100644 --- a/lib/core/form/components/form-list.component.spec.ts +++ b/lib/core/form/components/form-list.component.spec.ts @@ -16,7 +16,6 @@ */ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; import { TranslationService } from '../../index'; import { DataTableModule } from '../../datatable/datatable.module'; import { DataColumnModule } from '../../data-column/data-column.module'; @@ -31,6 +30,7 @@ describe('TaskAttachmentList', () => { let component: FormListComponent; let fixture: ComponentFixture; let service: FormService; + let element: any; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -59,7 +59,7 @@ describe('TaskAttachmentList', () => { fixture = TestBed.createComponent(FormListComponent); component = fixture.componentInstance; - + element = fixture.debugElement.nativeElement; service = TestBed.get(FormService); })); @@ -71,12 +71,11 @@ describe('TaskAttachmentList', () => { ])); component.ngOnChanges({}); + fixture.detectChanges(); - fixture.whenStable() - .then(() => { - fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2); - }); - })); + fixture.whenStable().then(() => { + expect(element.querySelectorAll('.adf-datatable-body > .adf-datatable-row').length).toBe(2); + }); + }); }); diff --git a/lib/process-services/attachment/process-attachment-list.component.spec.ts b/lib/process-services/attachment/process-attachment-list.component.spec.ts index a13283b6d7..f678535a26 100644 --- a/lib/process-services/attachment/process-attachment-list.component.spec.ts +++ b/lib/process-services/attachment/process-attachment-list.component.spec.ts @@ -155,10 +155,10 @@ describe('ProcessAttachmentListComponent', () => { it('should display attachments when the process has attachments', async(() => { let change = new SimpleChange(null, '123', true); component.ngOnChanges({ 'processInstanceId': change }); + fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2); + expect(fixture.debugElement.queryAll(By.css('.adf-datatable-body > .adf-datatable-row')).length).toBe(2); }); })); diff --git a/lib/process-services/attachment/task-attachment-list.component.spec.ts b/lib/process-services/attachment/task-attachment-list.component.spec.ts index 2910e8d08d..05f56402af 100644 --- a/lib/process-services/attachment/task-attachment-list.component.spec.ts +++ b/lib/process-services/attachment/task-attachment-list.component.spec.ts @@ -138,10 +138,10 @@ describe('TaskAttachmentList', () => { it('should display attachments when the task has attachments', async(() => { let change = new SimpleChange(null, '123', true); component.ngOnChanges({ 'taskId': change }); + fixture.detectChanges(); fixture.whenStable().then(() => { - fixture.detectChanges(); - expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(2); + expect(fixture.debugElement.queryAll(By.css('.adf-datatable-body > .adf-datatable-row')).length).toBe(2); }); })); diff --git a/lib/process-services/people/components/people-search/people-search.component.spec.ts b/lib/process-services/people/components/people-search/people-search.component.spec.ts index 13a9ee92b6..9d7d54af93 100644 --- a/lib/process-services/people/components/people-search/people-search.component.spec.ts +++ b/lib/process-services/people/components/people-search/people-search.component.spec.ts @@ -94,7 +94,7 @@ describe('PeopleSearchComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - let gatewayElement: any = element.querySelector('#search-people-list tbody'); + let gatewayElement: any = element.querySelector('#search-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(2); done(); @@ -136,7 +136,7 @@ describe('PeopleSearchComponent', () => { fixture.whenStable() .then(() => { fixture.detectChanges(); - let gatewayElement: any = element.querySelector('#search-people-list tbody'); + let gatewayElement: any = element.querySelector('#search-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(1); done(); diff --git a/lib/process-services/people/components/people/people.component.spec.ts b/lib/process-services/people/components/people/people.component.spec.ts index 5c4a8d369e..361d3eca5e 100644 --- a/lib/process-services/people/components/people/people.component.spec.ts +++ b/lib/process-services/people/components/people/people.component.spec.ts @@ -113,7 +113,7 @@ describe('PeopleComponent', () => { it('should show people involved', async(() => { fixture.whenStable() .then(() => { - let gatewayElement: any = element.querySelector('#assignment-people-list tbody'); + let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(2); }); @@ -127,7 +127,7 @@ describe('PeopleComponent', () => { fixture.whenStable() .then(() => { fixture.detectChanges(); - let gatewayElement: any = element.querySelector('#assignment-people-list tbody'); + let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(1); }); @@ -141,7 +141,7 @@ describe('PeopleComponent', () => { fixture.whenStable() .then(() => { fixture.detectChanges(); - let gatewayElement: any = element.querySelector('#assignment-people-list tbody'); + let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(3); }); @@ -220,7 +220,7 @@ describe('PeopleComponent', () => { fixture.whenStable() .then(() => { fixture.detectChanges(); - let gatewayElement: any = element.querySelector('#assignment-people-list tbody'); + let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(2); }); @@ -234,7 +234,7 @@ describe('PeopleComponent', () => { fixture.whenStable() .then(() => { fixture.detectChanges(); - let gatewayElement: any = element.querySelector('#assignment-people-list tbody'); + let gatewayElement: any = element.querySelector('#assignment-people-list .adf-datatable-body'); expect(gatewayElement).not.toBeNull(); expect(gatewayElement.children.length).toBe(2); }); diff --git a/lib/process-services/task-list/components/task-list.component.ts b/lib/process-services/task-list/components/task-list.component.ts index 524b1ff2c6..653707ff90 100644 --- a/lib/process-services/task-list/components/task-list.component.ts +++ b/lib/process-services/task-list/components/task-list.component.ts @@ -161,10 +161,10 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit, P isStreamLoaded = false; constructor(private taskListService: TaskListService, - private appConfig: AppConfigService, - private userPreferences: UserPreferencesService) { + private appConfig: AppConfigService, + private userPreferences: UserPreferencesService) { this.size = this.userPreferences.paginationSize; - this.pagination = new BehaviorSubject({ + this.pagination = new BehaviorSubject( { maxItems: this.size, skipCount: 0, totalItems: 0 @@ -450,4 +450,4 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit, P get supportedPageSizes(): number[] { return this.userPreferences.getDifferentPageSizes(); } -} \ No newline at end of file +} diff --git a/lib/tslint.json b/lib/tslint.json index b96ad69c93..6c7d87e6a2 100644 --- a/lib/tslint.json +++ b/lib/tslint.json @@ -11,7 +11,8 @@ ], "ban": [ true, - "eval" + "eval", + "fdescribe" ], "class-name": true, "comment-format": [