Merge remote-tracking branch 'uiteam/master' into angular

src/main/angular/src/component.ts

@@ -2,6 +2,7 @@ import * as angular from 'angular';
 
 export function Component(options: {
     bindings?: any,
+    bindToController?: boolean,
     controllerAs?: string,
     template?: string,
     templateUrl?: string,

src/main/angular/src/directive.ts

@@ -0,0 +1,23 @@
+import * as angular from 'angular';
+
+export default function Directive(options: {
+    bindToController?: boolean,
+    controller?: (string | any),
+    controllerAs?: string,
+    restrict?: string,
+    template?: string,
+    templateUrl?: string,
+    transclude?: boolean,
+    scope?: (boolean | any),
+    stylesheetUrl?: string
+}) {
+    // Consistent default behavior for components and directives
+    if (options.controller) {
+        options.controllerAs = options.controllerAs || '$ctrl';
+
+        // If bindToController is any value that is not false, set it to true
+        options.bindToController = options.bindToController != false;
+    }
+
+    return (directive: Function) => angular.extend(options, directive);
+}

src/main/angular/src/peoplesearch/orgchart-search.component.html

@@ -1,6 +1,6 @@
-<app-bar>
+<mf-app-bar>
     <div class="page-content-title">{{ 'TITLE_ORGANIZATION' | translate }}</div>
-    <auto-complete flex
+    <mf-auto-complete flex
                    search="$ctrl.autoCompleteSearch(query)"
                    item-selected="$ctrl.onAutoCompleteItemSelected(person)"
                    item="person">
@@ -9,8 +9,8 @@
             <span ng-bind="person.title"></span>
             <span ng-bind="person.telephoneNumber"></span>
         </content-template>
-    </auto-complete>
-</app-bar>
+    </mf-auto-complete>
+</mf-app-bar>
 
 <org-chart person="$ctrl.person"
            direct-reports="$ctrl.directReports"

src/main/angular/src/peoplesearch/orgchart-search.component.scss

@@ -4,15 +4,15 @@ org-chart-search {
   height: 100%;
   overflow-x: auto;
 
-  app-bar {
-    > .app-bar-content {
+  mf-app-bar {
+    > .mf-app-bar-content {
       display: block;
 
       > .page-content-title {
         width: 100%;
       }
 
-      > auto-complete {
+      > mf-auto-complete {
         .results {
           span {
             color: #808080;
@@ -31,15 +31,15 @@ org-chart-search {
 
 @media (min-width: 426px) {
   org-chart-search {
-    app-bar {
-      > .app-bar-content {
+    mf-app-bar {
+      > .mf-app-bar-content {
         display: flex;
 
         > .page-content-title {
           width: auto;
         }
 
-        > auto-complete {
+        > mf-auto-complete {
           > input {
             max-width: 360px;
           }

src/main/angular/src/peoplesearch/peoplesearch-table.component.html

@@ -1,3 +1,10 @@
+<!--<mf-table class="table-striped" data="person in $ctrl.people">-->
+    <!--<mf-table-column label="First Name" value="person.givenName"></mf-table-column>-->
+    <!--<mf-table-column label="Last Name" value="person.sn"></mf-table-column>-->
+    <!--<mf-table-column label="Title" value="person.title"></mf-table-column>-->
+    <!--<mf-table-column label="Email" value="person.mail"></mf-table-column>-->
+    <!--<mf-table-column label="Telephone" value="person.telephoneNumber"></mf-table-column>-->
+<!--</mf-table>-->
 <table st-table="rowCollection" ng-if="$ctrl.people.length" class="table table-striped">
     <thead>
         <tr>

src/main/angular/src/peoplesearch/peoplesearch.component.html

@@ -1,8 +1,8 @@
-<app-bar>
+<mf-app-bar>
     <div class="page-content-title">{{ 'TITLE_PEOPLE_SEARCH' | translate }}</div>
     <span flex></span>
     <icon-button ng-click="$ctrl.viewToggleClicked()" ng-class="$ctrl.viewToggleClass"></icon-button>
-</app-bar>
+</mf-app-bar>
 
 <div class="search-bar">
     <input id="username" name="username" placeholder="Search" class="peoplesearch-input-username"

src/main/angular/src/ux/app-bar.component.scss

@@ -1,7 +1,7 @@
-app-bar {
+mf-app-bar {
   display: block;
 
-  > .app-bar-content {
+  > .mf-app-bar-content {
     display: flex;
     flex-flow: row nowrap;
 

src/main/angular/src/ux/app-bar.component.ts

@@ -2,7 +2,7 @@ import { Component } from '../component';
 
 @Component({
     stylesheetUrl: require('ux/app-bar.component.scss'),
-    template: `<div class="app-bar-content" ng-transclude></div>`,
+    template: `<div class="mf-app-bar-content" ng-transclude></div>`,
     transclude: true
 })
 export default class AppBarComponent {

src/main/angular/src/ux/auto-complete.component.scss

@@ -1,4 +1,4 @@
-auto-complete {
+mf-auto-complete {
   display: block;
   position: relative;
 

src/main/angular/src/ux/table-column.directive.controller.ts

@@ -0,0 +1,5 @@
+export default class TableColumnDirectiveController {
+    static $inject = [];
+    constructor() {
+    }
+}

src/main/angular/src/ux/table-column.directive.html

@@ -0,0 +1 @@
+{{$ctrl.label}}

src/main/angular/src/ux/table-column.directive.ts

@@ -0,0 +1,37 @@
+import { IAttributes, IAugmentedJQuery, IDirective, IScope, ITranscludeFunction } from 'angular';
+import Directive from '../directive.ts';
+import TableColumnDirectiveController from './table-column.directive.controller';
+
+interface ITableColumnDirectiveScope extends IScope {
+    label: string;
+    order: number;
+    sortable: boolean;
+    value: string;
+    visible: boolean;
+}
+
+@Directive({
+    bindToController: true,
+    controller: TableColumnDirectiveController,
+    restrict: 'E',
+    scope: {
+        label: '@'
+    },
+    templateUrl: require('ux/table-column.directive.html'),
+    transclude: false
+})
+export default class TableColumnDirective implements IDirective {
+    static $inject = [];
+    constructor() {
+    }
+
+    static link($scope: ITableColumnDirectiveScope,
+         element: IAugmentedJQuery,
+         attributes: IAttributes,
+         transclude: ITranscludeFunction) {
+    }
+
+    static factory(): IDirective {
+        return TableColumnDirective;
+    }
+}

src/main/angular/src/ux/table.directive.controller.ts

@@ -0,0 +1,5 @@
+export default class TableDirectiveController {
+    static $inject = [];
+    constructor() {
+    }
+}

src/main/angular/src/ux/table.directive.html

@@ -0,0 +1 @@
+<ng-transclude></ng-transclude>

src/main/angular/src/ux/table.directive.scss

@@ -0,0 +1,3 @@
+mf-table {
+
+}

src/main/angular/src/ux/table.directive.ts

@@ -0,0 +1,33 @@
+import { IAttributes, IAugmentedJQuery, IDirective, IScope, ITranscludeFunction } from 'angular';
+import Directive from '../directive.ts';
+import TableDirectiveController from './table.directive.controller';
+
+interface ITableDirectiveScope extends IScope {
+    autoSize: boolean;
+}
+
+@Directive({
+    controller: TableDirectiveController,
+    restrict: 'E',
+    scope: {
+        autoSize: '@'
+    },
+    stylesheetUrl: require('ux/table.directive.scss'),
+    templateUrl: require('ux/table.directive.html'),
+    transclude: true
+})
+export default class TableDirective implements IDirective {
+    static $inject = [];
+    constructor() {
+    }
+
+    static link($scope: ITableDirectiveScope,
+         element: IAugmentedJQuery,
+         attributes: IAttributes,
+         transclude: ITranscludeFunction) {
+    }
+
+    static factory(): IDirective {
+        return TableDirective;
+    }
+}

src/main/angular/src/ux/ux.module.ts

@@ -2,12 +2,16 @@ import { module } from 'angular';
 import AppBarComponent from './app-bar.component';
 import AutoCompleteComponent from './auto-complete.component';
 import IconButtonComponent from './icon-button.component';
+import TableDirective from './table.directive';
+import TableColumnDirective from './table-column.directive';
 
 var moduleName = 'peoplesearch.ux';
 
 module(moduleName, [ ])
-    .component('appBar', AppBarComponent)
-    .component('autoComplete', AutoCompleteComponent)
-    .component('iconButton', IconButtonComponent);
+    .component('mfAppBar', AppBarComponent)
+    .component('mfAutoComplete', AutoCompleteComponent)
+    .component('mfIconButton', IconButtonComponent)
+    .directive('mfTable', TableDirective.factory)
+    .directive('mfTableColumn', TableColumnDirective.factory);
 
 export default moduleName;