From b3763a587677b5cc742556244c86cca9535674fa Mon Sep 17 00:00:00 2001 From: Axel Peter <15101925+AxelPeter@users.noreply.github.com> Date: Mon, 4 Feb 2019 14:00:34 +0100 Subject: [PATCH 1/2] fix(oui-file): fix input hidden error from ng 1.7.6 (#353) --- packages/oui-file/src/file.html | 9 ++++++--- packages/oui-file/src/index.spec.js | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/oui-file/src/file.html b/packages/oui-file/src/file.html index d6b7eeed..7b25076e 100644 --- a/packages/oui-file/src/file.html +++ b/packages/oui-file/src/file.html @@ -1,18 +1,21 @@ - + + - - { const getAttachments = (element) => element[0].querySelector(".oui-file-attachments"); const getDropArea = (element) => element[0].querySelector(".oui-file-droparea"); - const getInputFile = (element) => element[0].querySelector("input[type='file']"); - const getInputHidden = (element) => element[0].querySelector("input[type='hidden']"); + const getInputFile = (element) => element[0].querySelector(".oui-file__input_file"); + const getInputHidden = (element) => element[0].querySelector(".oui-file__input_hidden"); const getMultipleSelector = (element) => element[0].querySelector(".oui-file-multiple"); const getCustomSelector = (element) => element[0].querySelector(".oui-file-selector"); From 11c3c470832201ea613f3e76cd71b45285b25af0 Mon Sep 17 00:00:00 2001 From: Axel Peter <15101925+AxelPeter@users.noreply.github.com> Date: Wed, 13 Feb 2019 11:18:04 +0100 Subject: [PATCH 2/2] fix(oui-pagination): add input search when huge amount of pages (#358) * fix(oui-pagination): add input search when huge amount of pages * style: code review * style: code review --- packages/oui-pagination/README.md | 19 ++++-- .../src/pagination.controller.js | 26 ++++++-- packages/oui-pagination/src/pagination.html | 60 +++++++++++++------ 3 files changed, 80 insertions(+), 25 deletions(-) diff --git a/packages/oui-pagination/README.md b/packages/oui-pagination/README.md index 1e37f928..e138c112 100644 --- a/packages/oui-pagination/README.md +++ b/packages/oui-pagination/README.md @@ -4,6 +4,16 @@ ## Usage +### One page + +```html:preview + + +``` + ### A few pages ```html:preview @@ -25,13 +35,14 @@ ``` -### One page +### Huge amount of pages ```html:preview + current-offset="$ctrl.pagination3.offset" + page-size="$ctrl.pagination3.pageSize" + total-items="$ctrl.pagination3.totalItems" + on-change="$ctrl.onChange('pagination3', $event)"> ``` diff --git a/packages/oui-pagination/src/pagination.controller.js b/packages/oui-pagination/src/pagination.controller.js index 505f8dc7..14965ecb 100644 --- a/packages/oui-pagination/src/pagination.controller.js +++ b/packages/oui-pagination/src/pagination.controller.js @@ -1,3 +1,6 @@ +import clamp from "lodash/clamp"; +import range from "lodash/range"; + export default class { constructor ($attrs, ouiPaginationConfiguration) { "ngInject"; @@ -35,17 +38,23 @@ export default class { processPaginationChange () { this.pageCount = this.getPageCount(); - this.pageRange = this.getPageRange(); this.currentPage = this.getCurrentPage(); + this.inputPage = this.getCurrentPage(); // Update model for input } processTranslations () { - this.translations = Object.assign({}, this.config.translations); + this.translations = { ...this.config.translations }; this.translations.ofNResults = this.translations.ofNResults .replace("{{totalItems}}", this.totalItems); this.translations.currentPageOfPageCount = this.translations.currentPageOfPageCount .replace("{{currentPage}}", this.currentPage) .replace("{{pageCount}}", this.pageCount); + + // For huge amount of pages, we replaced "{{currentPage}}" by a number input + const translations = { ...this.config.translations }; + this.translations.inputPageOfPageCount = translations.currentPageOfPageCount + .replace("{{pageCount}}", this.pageCount) + .split("{{currentPage}}"); } getPageAriaLabel (page) { @@ -71,9 +80,19 @@ export default class { onPageChange (page) { this.currentOffset = (this.pageSize * (page - 1)) + 1; + this.currentPage = this.getCurrentPage(); + this.inputPage = this.getCurrentPage(); // Update model for input this._onChange(); } + checkPageRange (page) { + const currentPage = Number.isInteger(page) ? + clamp(page, 1, this.pageCount) : + this.currentPage; + + this.onPageChange(currentPage); + } + getLastItemOffset () { return Math.min(this.currentOffset + this.pageSize - 1, this.totalItems); } @@ -87,8 +106,7 @@ export default class { } getPageRange () { - return Array(...{ length: this.getPageCount() }) - .map((item, index) => index + 1); + return range(1, this.getPageCount() + 1); } _onChange () { diff --git a/packages/oui-pagination/src/pagination.html b/packages/oui-pagination/src/pagination.html index 225321bb..61c38146 100644 --- a/packages/oui-pagination/src/pagination.html +++ b/packages/oui-pagination/src/pagination.html @@ -27,18 +27,20 @@
- + +
- + + + + - -