From aa6c9a988f1997d561bdd813a9e8fc604f429d00 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 12 Jul 2016 19:53:53 +0100 Subject: [PATCH] #70 pagination component (first cut), mdl directives --- .../app/components/files/files.component.html | 2 + ng2-components/ng2-alfresco-core/.gitignore | 2 +- ng2-components/ng2-alfresco-core/index.js.map | 1 - ng2-components/ng2-alfresco-core/index.ts | 15 ++- .../src/data/pagination-provider.ts | 47 ++++++++ .../src/material/mdl-button.directive.ts | 38 +++++++ .../src/material/mdl-menu.directive.ts | 38 +++++++ .../ng2-alfresco-documentlist/index.ts | 5 +- .../pagination/pagination.component.css | 64 +++++++++++ .../pagination/pagination.component.html | 23 ++++ .../pagination/pagination.component.ts | 55 ++++++++++ .../src/data/share-datatable-adapter.ts | 100 +++++++++++++----- .../src/services/document-list.service.ts | 1 + 13 files changed, 362 insertions(+), 29 deletions(-) delete mode 100644 ng2-components/ng2-alfresco-core/index.js.map create mode 100644 ng2-components/ng2-alfresco-core/src/data/pagination-provider.ts create mode 100644 ng2-components/ng2-alfresco-core/src/material/mdl-button.directive.ts create mode 100644 ng2-components/ng2-alfresco-core/src/material/mdl-menu.directive.ts create mode 100644 ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.css create mode 100644 ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.html create mode 100644 ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.ts diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 119653aa46..0f4a862066 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -92,6 +92,8 @@ + + diff --git a/ng2-components/ng2-alfresco-core/.gitignore b/ng2-components/ng2-alfresco-core/.gitignore index bf980cac93..13324e66b9 100644 --- a/ng2-components/ng2-alfresco-core/.gitignore +++ b/ng2-components/ng2-alfresco-core/.gitignore @@ -11,5 +11,5 @@ demo/**/*.js demo/**/*.js.map demo/**/*.d.ts index.js -index.map +index.js.map !systemjs.config.js diff --git a/ng2-components/ng2-alfresco-core/index.js.map b/ng2-components/ng2-alfresco-core/index.js.map deleted file mode 100644 index 1015c095d3..0000000000 --- a/ng2-components/ng2-alfresco-core/index.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;QAwBU,uBAAuB,EAUvB,sBAAsB,EAItB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAdvB,qCAAA,uBAAuB,GAAU;gBAC1C,qEAA6B;gBAC7B,uDAAsB;gBACtB,yDAAuB;gBACvB,6DAAyB;gBACzB,+DAA0B;gBAC1B,qDAAqB;gBACrB,yCAAkB;aACrB,CAAA,CAAC;YAEW,oCAAA,sBAAsB,GAAU;gBACzC,yCAAkB;aACrB,CAAA,CAAC;YAEW,qCAAA,uBAAuB,GAAU;gBAC1C,0DAA0B;gBAC1B,6CAAoB;aACvB,CAAA,CAAC"} \ No newline at end of file diff --git a/ng2-components/ng2-alfresco-core/index.ts b/ng2-components/ng2-alfresco-core/index.ts index 5c70878787..62059dff40 100644 --- a/ng2-components/ng2-alfresco-core/index.ts +++ b/ng2-components/ng2-alfresco-core/index.ts @@ -24,19 +24,27 @@ import { AlfrescoContentService } from './src/services/AlfrescoContentService.se import { ContextMenuService } from './src/services/context-menu.service'; import { ContextMenuHolderComponent } from './src/components/context-menu-holder.component'; import { ContextMenuDirective } from './src/components/context-menu.directive'; +import { MDL } from './src/material/MaterialDesignLiteUpgradeElement'; +import { AlfrescoMdlButtonDirective } from './src/material/mdl-button.directive'; +import { AlfrescoMdlMenuDirective } from './src/material/mdl-menu.directive'; export * from './src/services/AlfrescoSettingsService.service'; export * from './src/services/AlfrescoTranslationLoader.service'; export * from './src/services/AlfrescoTranslationService.service'; export * from './src/services/AlfrescoPipeTranslate.service'; -export * from './src/material/MaterialDesignLiteUpgradeElement'; export * from './src/services/AlfrescoAuthenticationService.service'; export * from './src/services/AlfrescoContentService.service'; +// Material Design Lite integration +export * from './src/material/MaterialDesignLiteUpgradeElement'; +export * from './src/material/mdl-button.directive'; +export * from './src/material/mdl-menu.directive'; + export * from './src/services/context-menu.service'; export * from './src/components/context-menu-holder.component'; export * from './src/components/context-menu.directive'; +export * from './src/data/pagination-provider'; export * from './src/utils/object-utils'; export const ALFRESCO_CORE_PROVIDERS: [any] = [ @@ -58,3 +66,8 @@ export const CONTEXT_MENU_DIRECTIVES: [any] = [ ContextMenuDirective ]; +export const MATERIAL_DESIGN_DIRECTIVES: [any] = [ + MDL, + AlfrescoMdlButtonDirective, + AlfrescoMdlMenuDirective +]; diff --git a/ng2-components/ng2-alfresco-core/src/data/pagination-provider.ts b/ng2-components/ng2-alfresco-core/src/data/pagination-provider.ts new file mode 100644 index 0000000000..c4e58a66e9 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/data/pagination-provider.ts @@ -0,0 +1,47 @@ +/*! + * @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. + */ + +export interface PaginationProvider { + + /** + * The number of objects in the collection. + */ + count: number; + + /** + * A boolean value which is true if there are more entities in the collection beyond those in this response. + * A true value means a request with a larger value for the skipCount or the maxItems parameter will return more entities. + */ + hasMoreItems: boolean; + + /** + * An integer describing the total number of entities in the collection. + * The API might not be able to determine this value, in which case this property will not be present. + */ + totalItems?: number; + + /** + * An integer describing how many entities exist in the collection before those included in this list. + */ + skipCount: number; + + /** + * The value of the maxItems parameter used to generate this list, + * or if there was no maxItems parameter the default value is 100. + */ + maxItems: number; +} diff --git a/ng2-components/ng2-alfresco-core/src/material/mdl-button.directive.ts b/ng2-components/ng2-alfresco-core/src/material/mdl-button.directive.ts new file mode 100644 index 0000000000..96f82aad74 --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/material/mdl-button.directive.ts @@ -0,0 +1,38 @@ +/*! + * @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 { Directive, ElementRef, AfterViewInit } from '@angular/core'; + +declare var componentHandler; + +@Directive({ + selector: '[alfresco-mdl-button]' +}) +export class AlfrescoMdlButtonDirective implements AfterViewInit { + + constructor(private element: ElementRef) {} + + ngAfterViewInit() { + if (componentHandler) { + let el = this.element.nativeElement; + el.classList.add('mdl-button'); + el.classList.add('mdl-js-button'); + el.classList.add('mdl-js-ripple-effect'); + componentHandler.upgradeElement(el, 'MaterialButton'); + } + } +} diff --git a/ng2-components/ng2-alfresco-core/src/material/mdl-menu.directive.ts b/ng2-components/ng2-alfresco-core/src/material/mdl-menu.directive.ts new file mode 100644 index 0000000000..370665234b --- /dev/null +++ b/ng2-components/ng2-alfresco-core/src/material/mdl-menu.directive.ts @@ -0,0 +1,38 @@ +/*! + * @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 { Directive, ElementRef, AfterViewInit } from '@angular/core'; + +declare var componentHandler; + +@Directive({ + selector: '[alfresco-mdl-menu]' +}) +export class AlfrescoMdlMenuDirective implements AfterViewInit { + + constructor(private element: ElementRef) {} + + ngAfterViewInit() { + if (componentHandler) { + let el = this.element.nativeElement; + el.classList.add('mdl-menu'); + el.classList.add('mdl-js-menu'); + el.classList.add('mdl-js-ripple-effect'); + componentHandler.upgradeElement(el, 'MaterialMenu'); + } + } +} diff --git a/ng2-components/ng2-alfresco-documentlist/index.ts b/ng2-components/ng2-alfresco-documentlist/index.ts index 7c2f142c61..0678520b1f 100644 --- a/ng2-components/ng2-alfresco-documentlist/index.ts +++ b/ng2-components/ng2-alfresco-documentlist/index.ts @@ -22,6 +22,7 @@ import { ContentAction } from './src/components/content-action'; import { ContentActionList } from './src/components/content-action-list'; import { EmptyFolderContent } from './src/components/empty-folder-content'; import { DocumentListBreadcrumb } from './src/components/breadcrumb/breadcrumb.component'; +import { DocumentListPagination } from './src/components/pagination/pagination.component'; import { FolderActionsService } from './src/services/folder-actions.service'; import { DocumentActionsService } from './src/services/document-actions.service'; @@ -35,6 +36,7 @@ export * from './src/components/content-action'; export * from './src/components/content-action-list'; export * from './src/components/empty-folder-content'; export * from './src/components/breadcrumb/breadcrumb.component'; +export * from './src/components/pagination/pagination.component'; // services export * from './src/services/folder-actions.service'; @@ -48,7 +50,8 @@ export const DOCUMENT_LIST_DIRECTIVES: [any] = [ ContentAction, ContentActionList, EmptyFolderContent, - DocumentListBreadcrumb + DocumentListBreadcrumb, + DocumentListPagination ]; export const DOCUMENT_LIST_PROVIDERS: [any] = [ diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.css b/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.css new file mode 100644 index 0000000000..221ad85823 --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.css @@ -0,0 +1,64 @@ +.mdl-paging { + color: rgba(0, 0, 0, 0.54); + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + height: 56px; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; +} + +.mdl-paging > * { + -webkit-flex: none; + -ms-flex: none; + flex: none; +} + +.mdl-list + .mdl-paging { + margin: 0; +} + +.mdl-paging__per-page { + position: relative; +} + +.mdl-paging__per-page-label { + margin-right: 40px; +} + +.mdl-paging__per-page-value { + position: absolute; + right: 36px; + top: 6px; +} + +.mdl-paging__per-page + .mdl-paging__count { + margin-left: 24px; +} + +.mdl-paging .mdl-menu { + min-width: 64px; +} + +.mdl-paging__prev:last-child { + margin-right: 44px; +} + +.mdl-paging__count + .mdl-paging__prev { + margin-left: 24px; +} + +.mdl-paging__prev + .mdl-paging__next { + margin-left: 12px; +} + +.mdl-paging__count + .mdl-paging__next { + margin-left: 68px; +} diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.html new file mode 100644 index 0000000000..fd075193d7 --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.html @@ -0,0 +1,23 @@ +
+ + Rows per page: + {{pageSize}} + +
    +
  • + {{size}} +
    • +
+ + 1-10 of 25 + + +
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.ts b/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.ts new file mode 100644 index 0000000000..3461255dbd --- /dev/null +++ b/ng2-components/ng2-alfresco-documentlist/src/components/pagination/pagination.component.ts @@ -0,0 +1,55 @@ +/*! + * @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, Input, OnInit } from '@angular/core'; +import { + MATERIAL_DESIGN_DIRECTIVES, + PaginationProvider +} from 'ng2-alfresco-core'; + +declare let __moduleName: string; + +@Component({ + moduleId: __moduleName, + selector: 'alfresco-document-list-pagination', + templateUrl: './pagination.component.html', + styleUrls: ['./pagination.component.css'], + directives: [MATERIAL_DESIGN_DIRECTIVES] +}) +export class DocumentListPagination implements OnInit { + + @Input() + supportedPageSizes: number[] = [5, 10, 20, 50, 100]; + + @Input() + provider: PaginationProvider; + + @Input() + pageSize: number = 10; + + constructor() {} + + setPageSize(value: number) { + this.pageSize = value; + } + + ngOnInit() { + console.info(this.provider); + } +} + + diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts index 66b88d63c5..7d3de45ec5 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts @@ -16,7 +16,7 @@ */ import { DatePipe } from '@angular/common'; -import { ObjectUtils } from 'ng2-alfresco-core'; +import { PaginationProvider, ObjectUtils } from 'ng2-alfresco-core'; import { DataTableAdapter, DataRow, DataColumn, DataSorting @@ -25,16 +25,24 @@ import { import { NodePaging, MinimalNodeEntity } from './../models/document-library.model'; import { DocumentListService } from './../services/document-list.service'; -export class ShareDataTableAdapter implements DataTableAdapter { +export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvider { static ERR_ROW_NOT_FOUND: string = 'Row not found'; static ERR_COL_NOT_FOUND: string = 'Column not found'; static DEFAULT_DATE_FORMAT: string = 'medium'; + static DEFAULT_PAGE_SIZE: number = 100; private sorting: DataSorting; private rows: DataRow[]; private columns: DataColumn[]; + private page: NodePaging; + + private _count: number = 0; + private _hasMoreItems: boolean = false; + private _totalItems: number = 0; + private _skipCount: number = 0; + private _maxItems: number = ShareDataTableAdapter.DEFAULT_PAGE_SIZE; thumbnails: boolean = false; @@ -43,12 +51,34 @@ export class ShareDataTableAdapter implements DataTableAdapter { schema: DataColumn[]) { this.rows = []; this.columns = schema || []; + this.resetPagination(); + } + + get count(): number { + return this._count; + } + + get hasMoreItems(): boolean { + return this._hasMoreItems; + } + + get totalItems(): number { + return this._totalItems; + } + + get skipCount(): number { + return this._skipCount; + } + + get maxItems(): number { + return this._maxItems; } getRows(): Array { return this.rows; } + // TODO: disable this api setRows(rows: Array) { this.rows = rows || []; this.sort(); @@ -165,33 +195,53 @@ export class ShareDataTableAdapter implements DataTableAdapter { if (path && this.documentListService) { this.documentListService .getFolder(path) - .subscribe(val => { - let page = val; - let rows = []; - - if (page && page.list) { - let data = page.list.entries; - if (data && data.length > 0) { - rows = data.map(item => new ShareDataRow(item)); - - // Sort by first sortable or just first column - if (this.columns && this.columns.length > 0) { - let sortable = this.columns.filter(c => c.sortable); - if (sortable.length > 0) { - this.sort(sortable[0].key, 'asc'); - } else { - this.sort(this.columns[0].key, 'asc'); - } - } - } - } - - this.rows = rows; - }, + .subscribe(val => this.loadPage(val), error => console.error(error)); } } + private loadPage(page: NodePaging) { + this.page = page; + this.resetPagination(); + + let rows = []; + + if (page && page.list) { + let data = page.list.entries; + if (data && data.length > 0) { + rows = data.map(item => new ShareDataRow(item)); + + // Sort by first sortable or just first column + if (this.columns && this.columns.length > 0) { + let sortable = this.columns.filter(c => c.sortable); + if (sortable.length > 0) { + this.sort(sortable[0].key, 'asc'); + } else { + this.sort(this.columns[0].key, 'asc'); + } + } + } + + let pagination = page.list.pagination; + if (pagination) { + this._count = pagination.count; + this._hasMoreItems = pagination.hasMoreItems; + this._maxItems = pagination.maxItems; + this._skipCount = pagination.skipCount; + this._totalItems = pagination.totalItems; + } + } + + this.rows = rows; + } + + private resetPagination() { + this._count = 0; + this._hasMoreItems = false; + this._totalItems = 0; + this._skipCount = 0; + this._maxItems = ShareDataTableAdapter.DEFAULT_PAGE_SIZE; + } } export class ShareDataRow implements DataRow { diff --git a/ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts b/ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts index dccc26840c..c782d40a6f 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts +++ b/ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts @@ -89,6 +89,7 @@ export class DocumentListService { return Observable.fromPromise(nodesApi.deleteNode(nodeId, opts)); } + // TODO: rename to 'getFolderContent' /** * Gets the folder node with the content. * @param folder Path to folder.