diff --git a/packages/oui-datagrid/README.md b/packages/oui-datagrid/README.md index d141a565..a4efa896 100644 --- a/packages/oui-datagrid/README.md +++ b/packages/oui-datagrid/README.md @@ -465,6 +465,67 @@ You can use `row-loader`. It take the current row as argument and must return a ``` +### Filtering using dynamic column + +```html:preview + +``` + ### Refresh #### Local datagrid diff --git a/packages/oui-datagrid/src/datagrid-column-builder.service.js b/packages/oui-datagrid/src/datagrid-column-builder.service.js index 763328e8..dd35d703 100644 --- a/packages/oui-datagrid/src/datagrid-column-builder.service.js +++ b/packages/oui-datagrid/src/datagrid-column-builder.service.js @@ -98,7 +98,7 @@ export default class DatagridColumnBuilder { }; } - buildFromJs (columnsDescription, $scope) { + buildFromJs (columnsDescription) { const columns = []; const currentSorting = { columnName: undefined, @@ -132,8 +132,9 @@ export default class DatagridColumnBuilder { column.searchable = DatagridColumnBuilder.isSearchable(column) && columnDescription.searchable; - if (column.typeOptions) { - column.typeOptions = this.$parse(column.typeOptions)($scope); + + if (columnDescription.typeOptions) { + column.typeOptions = columnDescription.typeOptions; } column.preventCustomization = columnDescription.preventCustomization; diff --git a/packages/oui-header-tabs/README.md b/packages/oui-header-tabs/README.md index 681d426b..8abb0d32 100644 --- a/packages/oui-header-tabs/README.md +++ b/packages/oui-header-tabs/README.md @@ -33,9 +33,32 @@ + + + +``` + +### Disabled items + +```html:preview + + + + + + + + + + + + + + + - + ``` ### In Page Header @@ -71,8 +94,9 @@ | `href` | string | @? | yes | | | href of the menu item | `state` | boolean | @? | yes | | | state of the menu item | `stateParams` | object | { - this.$element - .addClass(`${itemClass} ${dropDownClass}`) - .attr("role", "listitem"); - - this.$scope.$watch(() => !!this.$element[0].querySelector(`.${itemClass}_active`), hasActive => { - if (hasActive) { - this.$element.addClass(`${dropDownClass}_active`); - } else { - this.$element.removeClass(`${dropDownClass}_active`); - } - }); - }); - } - }, + controller, template, transclude: true }; diff --git a/packages/oui-header-tabs/src/header-tabs-dropdown.controller.js b/packages/oui-header-tabs/src/header-tabs-dropdown.controller.js new file mode 100644 index 00000000..5fbfe34f --- /dev/null +++ b/packages/oui-header-tabs/src/header-tabs-dropdown.controller.js @@ -0,0 +1,45 @@ +const ouiHeaderTabsItemClass = "oui-header-tabs__item"; +const ouiHeaderTabsItemActiveClass = `${ouiHeaderTabsItemClass}_active`; +const ouiHeaderTabsItemDisabledClass = `${ouiHeaderTabsItemClass}_disabled`; +const ouiHeaderTabsDropDownClass = `${ouiHeaderTabsItemClass}_dropdown`; + +export default class { + constructor ($element, $scope, $timeout) { + "ngInject"; + + this.$element = $element; + this.$scope = $scope; + this.$timeout = $timeout; + } + + $onInit () { + this.disabled = false; + } + + $postLink () { + this.$timeout(() => { + this.$element + .addClass(`${ouiHeaderTabsItemClass} ${ouiHeaderTabsDropDownClass}`) + .attr("role", "listitem"); + + const itemCount = (this.$element[0].querySelectorAll(`.${ouiHeaderTabsItemClass}`) || []).length; + this.$scope.$watch(() => (this.$element[0].querySelectorAll(`.${ouiHeaderTabsItemDisabledClass}`) || []).length, itemDisabledCount => { + if (itemDisabledCount === itemCount) { + this.disabled = true; + this.$element.addClass(ouiHeaderTabsItemDisabledClass); + } else { + this.disabled = false; + this.$element.removeClass(ouiHeaderTabsItemDisabledClass); + } + }); + + this.$scope.$watch(() => !!this.$element[0].querySelector(`.${ouiHeaderTabsItemActiveClass}`), hasActive => { + if (hasActive) { + this.$element.addClass(ouiHeaderTabsItemActiveClass); + } else { + this.$element.removeClass(ouiHeaderTabsItemActiveClass); + } + }); + }); + } +} diff --git a/packages/oui-header-tabs/src/header-tabs-dropdown.html b/packages/oui-header-tabs/src/header-tabs-dropdown.html index 0fe4b406..249ce1fe 100644 --- a/packages/oui-header-tabs/src/header-tabs-dropdown.html +++ b/packages/oui-header-tabs/src/header-tabs-dropdown.html @@ -1,5 +1,6 @@ - + diff --git a/packages/oui-header-tabs/src/header-tabs-item.component.js b/packages/oui-header-tabs/src/header-tabs-item.component.js index fe42f848..5e14b3ab 100644 --- a/packages/oui-header-tabs/src/header-tabs-item.component.js +++ b/packages/oui-header-tabs/src/header-tabs-item.component.js @@ -10,6 +10,7 @@ export default { state: "@?", stateParams: " + ng-class="{ 'oui-header-tabs__item_active': $ctrl.active, 'oui-header-tabs__item_disabled': $ctrl.disabled }"> + ng-if="!!$ctrl.href && !$ctrl.disabled"> + diff --git a/packages/oui-header-tabs/src/index.spec.js b/packages/oui-header-tabs/src/index.spec.js index 7c293a78..e74d02f5 100644 --- a/packages/oui-header-tabs/src/index.spec.js +++ b/packages/oui-header-tabs/src/index.spec.js @@ -45,6 +45,46 @@ describe("ouiHeaderTabs", () => { expect(linkItem.querySelector(".oui-icon-external_link")).not.toBeNull(); }); + it("should display the header tabs with disabled items", () => { + const element = TestUtils.compileTemplate(` + + + + + + + ` + ); + + $timeout.flush(); + + const item = element[0].querySelector(".oui-header-tabs__item"); + expect(angular.element(item).hasClass("oui-header-tabs__item_disabled")).toBe(true); + const trigger = element[0].querySelector(".oui-dropdown__trigger"); + expect(angular.element(trigger).attr("disabled")).toBe("disabled"); + const dropDown = element[0].querySelector(".oui-header-tabs__item_dropdown"); + expect(angular.element(dropDown).hasClass("oui-header-tabs__item_disabled")).toBe(true); + }); + + it("should display the header tabs with active items", () => { + const element = TestUtils.compileTemplate(` + + + + + + + ` + ); + + $timeout.flush(); + + const item = element[0].querySelector(".oui-header-tabs__item"); + expect(angular.element(item).hasClass("oui-header-tabs__item_active")).toBe(true); + const dropDown = element[0].querySelector(".oui-header-tabs__item_dropdown"); + expect(angular.element(dropDown).hasClass("oui-header-tabs__item_active")).toBe(true); + }); + it("should display the header tabs with closed dropdown", () => { const element = TestUtils.compileTemplate(` diff --git a/packages/oui-page-header/README.md b/packages/oui-page-header/README.md index f642f83c..c18a47c7 100644 --- a/packages/oui-page-header/README.md +++ b/packages/oui-page-header/README.md @@ -38,7 +38,21 @@ ### With tabs ```html:preview - + + + + + + + + + + + + + + + ``` diff --git a/packages/oui-tile/README.md b/packages/oui-tile/README.md index b7c6e39b..fe1c44db 100644 --- a/packages/oui-tile/README.md +++ b/packages/oui-tile/README.md @@ -53,6 +53,24 @@ ``` +### Loading state + +```html:preview +
+ + +

Nulla ac dui a est varius eleifend nec vitae ipsum. Nunc venenatis luctus nisi quis pulvinar. Duis justo massa, mattis nec metus scelerisque, mattis tristique quam. Sed eget neque elementum, facilisis velit eget, iaculis lectus. Quisque at molestie justo. Ut tincidunt augue non tortor tincidunt facilisis. Donec ut lectus a leo porttitor eleifend. Morbi venenatis turpis eu rutrum consectetur. Sed auctor ligula at erat euismod, imperdiet posuere est feugiat. Quisque maximus ultricies risus sed varius.

+ +
+``` + ## API ### oui-tile diff --git a/packages/oui-tile/src/tile.html b/packages/oui-tile/src/tile.html index fe66440d..efa24957 100644 --- a/packages/oui-tile/src/tile.html +++ b/packages/oui-tile/src/tile.html @@ -1,5 +1,12 @@

-
+
+
+
+ +