ovh-ux · AxelPeter · Jun 29, 2018 · May 25, 2018 · May 28, 2018 · May 23, 2018
@@ -465,6 +465,67 @@ You can use `row-loader`. It take the current row as argument and must return a
 </oui-datagrid>
 ```
 
+### Filtering using dynamic column
+
+```html:preview
+<oui-datagrid
+  rows="$ctrl.servers"
+  page-size="5"
+  columns="[{
+    title: 'Name',
+    property: 'name',
+    sortable: 'asc',
+    searchable: true,
+    filterable: true,
+    type: 'string',
+    typeOptions: {
+        operators: [
+            'contains'
+        ]
+    }
+  },
+  {
+    title: 'CPUs',
+    property: 'cpu',
+    sortable: true,
+    searchable: true,
+    filterable: true,
+    type: 'number'
+  },
+  {
+    title: 'Running',
+    property: 'up',
+    sortable: true,
+    filterable: true,
+    type: 'boolean'
+  },
+  {
+    title: 'Purpose',
+    property: 'purpose',
+    sortable: true,
+    filterable: true,
+    type: 'options',
+    typeOptions: {
+        values: {
+            network: 'Network',
+            database: 'Database',
+            static: 'Static content',
+            frontend: 'Frontend',
+            backend: 'Backend',
+            broker: 'Broker',
+            others: 'Others'
+        }
+    }
+  },
+  {
+    title: 'IP',
+    property: 'ip',
+    sortable: true,
+    filterable: true,
+    type: 'string'
+  }]"></oui-datagrid>
+```
+
 ### Refresh
 
 #### Local datagrid

@@ -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;

@@ -33,9 +33,32 @@
     <oui-header-tabs-item text="Datagrid" href="/#!/oui-angular/datagrid"></oui-header-tabs-item>
     <oui-header-tabs-item text="Criteria Adder" href="#!/oui-angular/criteria-adder"></oui-header-tabs-item>
   </oui-header-tabs-dropdown>
+  <oui-header-tabs-item text="Header Tabs" href="/#!/oui-angular/header-tabs" active></oui-header-tabs-item>
+  <oui-header-tabs-item text="Page Header" href="/#!/oui-angular/page-header"></oui-header-tabs-item>
+</oui-header-tabs>
+```
+
+### Disabled items
+
+```html:preview
+<oui-header-tabs>
+  <oui-header-tabs-item text="Home" href="/#" disabled></oui-header-tabs-item>
+  <oui-header-tabs-dropdown text="Form">
+    <oui-header-tabs-item text="Field" href="/#!/oui-angular/field" disabled></oui-header-tabs-item>
+    <oui-header-tabs-divider></oui-header-tabs-divider>
+    <oui-header-tabs-item text="Checkbox" href="#!/oui-angular/checkbox"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Radio" href="#!/oui-angular/radio-group" disabled></oui-header-tabs-item>
+    <oui-header-tabs-divider></oui-header-tabs-divider>
+    <oui-header-tabs-item text="Select" href="/#!/oui-angular/select"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Select Picker" href="/#!/oui-angular/select-picker"></oui-header-tabs-item>
+  </oui-header-tabs-dropdown>
+  <oui-header-tabs-dropdown text="Datagrid">
+    <oui-header-tabs-item text="Datagrid" href="/#!/oui-angular/datagrid" disabled></oui-header-tabs-item>
+    <oui-header-tabs-item text="Criteria Adder" href="#!/oui-angular/criteria-adder" disabled></oui-header-tabs-item>
+  </oui-header-tabs-dropdown>
   <oui-header-tabs-item text="Page Header" href="/#!/oui-angular/page-header"></oui-header-tabs-item>
   <oui-header-tabs-item text="Header Tabs" href="/#!/oui-angular/header-tabs" active></oui-header-tabs-item>
-</oui-header-tabs>  
+</oui-header-tabs>
 ```
 
 ### 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    | <?        |                   |                   |           | state params of the menu item
-| `external`        | boolean   | <?        | yes               | `true`, `false`   | `false`   | external link flag
 | `active`          | boolean   | <?        |                   | `true`, `false`   | `false`   | manual active flag
+| `disabled`        | boolean   | <?        | yes               | `true`, `false`   | `false`   | disabled flag
+| `external`        | boolean   | <?        | yes               | `true`, `false`   | `false`   | external link flag
 
 **Note:** `ui-router` is needed for the attributes `state` and `state-params`.
 

@@ -1,37 +1,11 @@
+import controller from "./header-tabs-dropdown.controller";
 import template from "./header-tabs-dropdown.html";
 
-const itemClass = "oui-header-tabs__item";
-const dropDownClass = `${itemClass}_dropdown`;
-
 export default {
     bindings: {
         text: "@"
     },
-    controller: class {
-        constructor ($element, $scope, $timeout) {
-            "ngInject";
-
-            this.$element = $element;
-            this.$scope = $scope;
-            this.$timeout = $timeout;
-        }
-
-        $postLink () {
-            this.$timeout(() => {
-                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
 };
@@ -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);
+                }
+            });
+        });
+    }
+}
@@ -1,5 +1,6 @@
 <oui-dropdown align="center" arrow>
-    <oui-dropdown-trigger text="{{::$ctrl.text}}"></oui-dropdown-trigger>
+    <oui-dropdown-trigger text="{{::$ctrl.text}}"
+                          disabled="$ctrl.disabled"></oui-dropdown-trigger>
     <oui-dropdown-content class="oui-header-tabs__dropdown-container" role="list"
                           ng-transclude>
     </oui-dropdown-content>

@@ -10,6 +10,7 @@ export default {
         state: "@?",
         stateParams: "<?",
         external: "<?",
-        active: "<?"
+        active: "<?",
+        disabled: "<?"
     }
 };
@@ -14,6 +14,7 @@ export default class {
 
     $onInit () {
         addBooleanParameter(this, "active");
+        addBooleanParameter(this, "disabled");
         addBooleanParameter(this, "external");
 
         if (this.external) {

@@ -1,17 +1,19 @@
 <div class="oui-header-tabs__item" role="listitem"
     ui-sref-active="oui-header-tabs__item_active"
-    ng-class="{ 'oui-header-tabs__item_active': $ctrl.active }">
+    ng-class="{ 'oui-header-tabs__item_active': $ctrl.active, 'oui-header-tabs__item_disabled': $ctrl.disabled }">
     <a ng-attr-rel="{{::$ctrl.linkRel}}"
        ng-attr-target="{{::$ctrl.linkTarget}}"
        ng-href="{{::$ctrl.href}}"
-       ng-if="::!!$ctrl.href">
+       ng-if="!!$ctrl.href && !$ctrl.disabled">
         <span ng-bind="::$ctrl.text"></span>
         <span class="oui-icon oui-icon-external_link" aria-hidden="true"
               ng-if="::$ctrl.external">
         </span>
     </a>
     <a ng-bind="::$ctrl.text"
-       ng-if="::!!$ctrl.state"
+       ng-if="!!$ctrl.state && !$ctrl.disabled"
        ui-sref="{{::$ctrl.getFullSref()}}">
     </a>
+    <span ng-bind="::$ctrl.text"
+          ng-if="!!$ctrl.disabled"></span>
 </div>
@@ -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(`
+                <oui-header-tabs>
+                    <oui-header-tabs-item text="Disabled" disabled></oui-header-tabs-item>
+                    <oui-header-tabs-dropdown text="Dropdown">
+                        <oui-header-tabs-item text="Disabled 1" disabled></oui-header-tabs-item>
+                        <oui-header-tabs-item text="Disabled 2" disabled></oui-header-tabs-item>
+                    </oui-header-tabs-dropdown>
+                </oui-header-tabs>`
+            );
+
+            $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(`
+                <oui-header-tabs>
+                    <oui-header-tabs-item text="Active" active></oui-header-tabs-item>
+                    <oui-header-tabs-dropdown text="Dropdown">
+                        <oui-header-tabs-item text="Active 1" active></oui-header-tabs-item>
+                        <oui-header-tabs-item text="Active 2"></oui-header-tabs-item>
+                    </oui-header-tabs-dropdown>
+                </oui-header-tabs>`
+            );
+
+            $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(`
                 <oui-header-tabs>

@@ -38,7 +38,21 @@
 ### With tabs
 
 ```html:preview
-<oui-page-header heading="My title" description="My subtitle"></oui-page-header>
+<oui-page-header heading="My title" description="My subtitle">
+  <oui-header-tabs>
+    <oui-header-tabs-item text="Home" href="/#"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Page Header" href="/#!/oui-angular/page-header" active></oui-header-tabs-item>
+    <oui-header-tabs-item text="Header Tabs" href="/#!/oui-angular/header-tabs"></oui-header-tabs-item>
+    <oui-header-tabs-dropdown text="Form">
+      <oui-header-tabs-item text="Field" href="/#!/oui-angular/field"></oui-header-tabs-item>
+      <oui-header-tabs-divider></oui-header-tabs-divider>
+      <oui-header-tabs-item text="Checkbox" href="#!/oui-angular/checkbox"></oui-header-tabs-item>
+      <oui-header-tabs-item text="Radio" href="#!/oui-angular/radio-group"></oui-header-tabs-item>
+    </oui-header-tabs-dropdown>
+    <oui-header-tabs-item text="Pagination" href="/#!/oui-angular/pagination"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Datagrid" href="/#!/oui-angular/datagrid"></oui-header-tabs-item>
+  </oui-header-tabs>
+</oui-page-header>
 ```
 
 

@@ -53,6 +53,24 @@
 </oui-tile>
 ```
 
+### Loading state
+
+```html:preview
+<div ng-init="$ctrl.loading = true" class="oui-doc-preview-only-keep-children">
+<button class="oui-button oui-doc-preview-only" type="button"
+    ng-class="{
+        'oui-button_primary': $ctrl.loading,
+        'oui-button_secondary': !$ctrl.loading
+    }"
+    ng-click="$ctrl.loading = !$ctrl.loading">
+    Toggle loading
+</button>
+<oui-tile heading="Title" description="A great legend for this tile." loading="$ctrl.loading">
+    <p>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.</p>
+</oui-tile>
+</div>
+```
+
 ## API
 
 ### oui-tile

@@ -1,5 +1,12 @@
 <div class="oui-tile">
     <h4 class="oui-header_4 oui-tile__title" ng-bind="::$ctrl.heading"></h4>
     <p class="oui-tile__legend" ng-if="!!$ctrl.description" ng-bind="::$ctrl.description"></p>
-    <div class="oui-tile__body" ng-transclude></div>
+    <div class="oui-tile__body"
+        ng-if="!$ctrl.loading"
+        ng-transclude>
+    </div>
+    <div class="oui-tile__loader"
+        ng-if="$ctrl.loading">
+        <oui-spinner size="m"></oui-spinner>
+    </div>
 </div>