feat(TableSortable): Add capability to disable sorting on specified c…

…olumns
akmil · Jun 27, 2016 · ac0cb87 · ac0cb87
1 parent 152f199
commit ac0cb87
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 34 deletions.
diff --git a/bundles/fuel-ui.js b/bundles/fuel-ui.js
@@ -97,6 +97,15 @@ System.registerDynamic("fuel-ui/dist/components/Alert/Alert", ["@angular/core",
   var define,
       global = this,
       GLOBAL = this;
+  var __extends = (this && this.__extends) || function(d, b) {
+    for (var p in b)
+      if (b.hasOwnProperty(p))
+        d[p] = b[p];
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
   var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
     var c = arguments.length,
         r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
@@ -115,32 +124,50 @@ System.registerDynamic("fuel-ui/dist/components/Alert/Alert", ["@angular/core",
   };
   var core_1 = $__require('@angular/core');
   var common_1 = $__require('@angular/common');
-  var Alert = (function() {
-    function Alert(el) {
+  var Alert = (function(_super) {
+    __extends(Alert, _super);
+    function Alert(_el) {
+      _super.call(this);
+      this._el = _el;
       this.displayed = false;
       this.closeButton = true;
       this.type = 'success';
+      this.closeDelay = 0;
       this.displayedChange = new core_1.EventEmitter();
-      this._el = el.nativeElement;
     }
-    Alert.prototype.getElement = function() {
-      return this._el;
+    Alert.prototype.ngOnChanges = function(event) {
+      var _this = this;
+      if (this.displayed && this._el.nativeElement.querySelector('.alert')) {
+        this._el.nativeElement.querySelector('.alert').className = "alert fuel-ui-alert-fade-in";
+      }
+      if (this.closeDelay > 0) {
+        setTimeout(function() {
+          _this.close();
+        }, this.closeDelay);
+      }
     };
     Alert.prototype.close = function() {
-      this.displayed = false;
-      this.displayedChange.next(null);
+      var _this = this;
+      if (this._el.nativeElement.querySelector('.alert')) {
+        this._el.nativeElement.querySelector('.alert').className = "alert fuel-ui-alert-fade-out";
+      }
+      setTimeout(function() {
+        _this.displayed = false;
+        _this.displayedChange.next(null);
+      }, 1000);
     };
     __decorate([core_1.Input(), __metadata('design:type', Boolean)], Alert.prototype, "displayed", void 0);
     __decorate([core_1.Input(), __metadata('design:type', Boolean)], Alert.prototype, "closeButton", void 0);
     __decorate([core_1.Input(), __metadata('design:type', String)], Alert.prototype, "type", void 0);
+    __decorate([core_1.Input(), __metadata('design:type', Number)], Alert.prototype, "closeDelay", void 0);
     __decorate([core_1.Output(), __metadata('design:type', Object)], Alert.prototype, "displayedChange", void 0);
     Alert = __decorate([core_1.Component({
       selector: 'alert',
       template: "\n      <div\n          *ngIf=\"displayed\"\n          role=\"alert\"\n          class=\"alert fuel-ui-alert-fade-in\"\n          [ngClass]=\"{'alert-success': type === 'success', 'alert-info': type === 'info', 'alert-warning': type === 'warning', 'alert-danger': type === 'danger' }\" >\n          <button *ngIf=\"closeButton\" (click)=\"close()\" type=\"button\" class=\"close\" aria-label=\"Close\">\n              <span aria-hidden=\"true\">&#215;</span>\n              <span class=\"sr-only\">Close</span>\n          </button>\n          <ng-content></ng-content>\n      </div>\n    ",
       directives: [common_1.CORE_DIRECTIVES]
     }), __metadata('design:paramtypes', [core_1.ElementRef])], Alert);
     return Alert;
-  }());
+  }(core_1.OnChanges));
   exports.Alert = Alert;
   exports.ALERT_PROVIDERS = [Alert];
   return module.exports;
@@ -4233,15 +4260,37 @@ System.registerDynamic("fuel-ui/dist/pipes/OrderBy/OrderBy", ["@angular/core"],
         } else {
           var property = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-' ? propertyToCheck.substr(1) : propertyToCheck;
           return value.sort(function(a, b) {
-            return !desc ? OrderByPipe._orderByComparator(a[property], b[property]) : -OrderByPipe._orderByComparator(a[property], b[property]);
+            var aValue = a[property];
+            var bValue = b[property];
+            var propertySplit = property.split('.');
+            if (typeof aValue === 'undefined' && typeof bValue === 'undefined' && propertySplit.length > 1) {
+              aValue = a;
+              bValue = b;
+              for (var j = 0; j < propertySplit.length; j++) {
+                aValue = aValue[propertySplit[j]];
+                bValue = bValue[propertySplit[j]];
+              }
+            }
+            return !desc ? OrderByPipe._orderByComparator(aValue, bValue) : -OrderByPipe._orderByComparator(aValue, bValue);
           });
         }
       } else {
         return value.sort(function(a, b) {
           for (var i = 0; i < config.length; i++) {
             var desc = config[i].substr(0, 1) == '-';
             var property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-' ? config[i].substr(1) : config[i];
-            var comparison = !desc ? OrderByPipe._orderByComparator(a[property], b[property]) : -OrderByPipe._orderByComparator(a[property], b[property]);
+            var aValue = a[property];
+            var bValue = b[property];
+            var propertySplit = property.split('.');
+            if (typeof aValue === 'undefined' && typeof bValue === 'undefined' && propertySplit.length > 1) {
+              aValue = a;
+              bValue = b;
+              for (var j = 0; j < propertySplit.length; j++) {
+                aValue = aValue[propertySplit[j]];
+                bValue = bValue[propertySplit[j]];
+              }
+            }
+            var comparison = !desc ? OrderByPipe._orderByComparator(aValue, bValue) : -OrderByPipe._orderByComparator(aValue, bValue);
             if (comparison != 0)
               return comparison;
           }

diff --git a/bundles/fuel-ui.min.js b/bundles/fuel-ui.min.js
diff --git a/src/components/TableSortable/TableSortable.Demo.ts b/src/components/TableSortable/TableSortable.Demo.ts
@@ -59,27 +59,32 @@ export class TableSortableExample {
     {
       Name: 'Data 1',
       Amount: 100.23,
-      Date: 1441588216000
+      Date: 1441588216000,
+      Desc: "You can't sort"
     },
     {
       Name: 'Data 2',
       Amount: 0.875623,
-      Date: 1442387616000
+      Date: 1442387616000,
+      Desc: "On this"
     },
     {
       Name: 'Data 3',
       Amount: .010123,
-      Date: 1442187616000
+      Date: 1442187616000,
+      Desc: "Table column"
     }
   ];
   columns: TableSortableColumn[] = [
     {
       display: 'Column 1', //The text to display
       variable: 'Name', //The name of the key that's apart of the data array
-      filter: 'text' //The type data type of the column (number, text, date, etc.)
+      filter: 'text', //The type data type of the column (number, text, date, etc.)
+      sortable: true //Whether the user can sort on the column
     },
     new TableSortableColumn('Column 2', 'Amount', 'decimal : 1.0-2'),
-    new TableSortableColumn('Column 3', 'Date', 'dateTime')
+    new TableSortableColumn('Column 3', 'Date', 'dateTime'),
+    new TableSortableColumn('Column 4', 'Desc', 'string', false)
   ];
   sorting: TableSortableSorting = {
     column: 'Name', //to match the variable of one of the columns
@@ -107,27 +112,32 @@ export class TableSortableDemo {
     {
       Name: 'Data 1',
       Amount: 100.23,
-      Date: 1441588216000
+      Date: 1441588216000,
+      Desc: "You can't sort"
     },
     {
       Name: 'Data 2',
       Amount: 0.875623,
-      Date: 1442387616000
+      Date: 1442387616000,
+      Desc: "On this"
     },
     {
       Name: 'Data 3',
       Amount: .010123,
-      Date: 1442187616000
+      Date: 1442187616000,
+      Desc: "Table column"
     }
   ];
   columns: TableSortableColumn[] = [
     {
       display: 'Column 1', //The text to display
       variable: 'Name', //The name of the key that's apart of the data array
-      filter: 'text' //The type data type of the column (number, text, date, etc.)
+      filter: 'text', //The type data type of the column (number, text, date, etc.)
+      sortable: true //Whether the user can sort on the column
     },
     new TableSortableColumn('Column 2', 'Amount', 'decimal : 1.0-2'),
-    new TableSortableColumn('Column 3', 'Date', 'dateTime')
+    new TableSortableColumn('Column 3', 'Date', 'dateTime'),
+    new TableSortableColumn('Column 4', 'Desc', 'string', false)
   ];
   sorting: TableSortableSorting = {
     column: 'Name', //to match the variable of one of the columns

diff --git a/src/components/TableSortable/TableSortable.html b/src/components/TableSortable/TableSortable.html
@@ -2,7 +2,7 @@
   <table class="table table-bordered table-hover table-striped fuel-ui-table-sortable">
     <thead>
       <tr>
-        <th *ngFor="let column of columns" [class]="selectedClass(column.variable)" (click)="changeSorting(column.variable)">
+        <th *ngFor="let column of columns" [class]="selectedClass(column)" (click)="changeSorting(column)">
           {{column.display}}
         </th>
       </tr>

diff --git a/src/components/TableSortable/TableSortable.scss b/src/components/TableSortable/TableSortable.scss
@@ -1,4 +1,4 @@
-.fuel-ui-table-sortable > thead > tr > th {
+.fuel-ui-table-sortable > thead > tr > th:not(.fuel-ui-not-sortable) {
     cursor: pointer;
     position: relative;
     background-image: none;

diff --git a/src/components/TableSortable/TableSortable.ts b/src/components/TableSortable/TableSortable.ts
@@ -19,16 +19,20 @@ export class TableSortable {
 
   constructor() {}
 
-  selectedClass(columnName: string): string{
-    return columnName == this.sort.column ? 'sort-' + (this.sort.descending ? 'desc' : 'asc') : '';
+  selectedClass(column: TableSortableColumn): string{
+    if(!column.sortable) return 'fuel-ui-not-sortable';
+
+    return column.variable == this.sort.column ? 'sort-' + (this.sort.descending ? 'desc' : 'asc') : '';
   }
 
-  changeSorting(columnName: string): void{
+  changeSorting(column: TableSortableColumn): void{
+    if(!column.sortable) return;
+
     var sort = this.sort;
-    if (sort.column == columnName) {
+    if (sort.column == column.variable) {
       sort.descending = !sort.descending;
     } else {
-      sort.column = columnName;
+      sort.column = column.variable;
       sort.descending = false;
     }
   }

diff --git a/src/components/TableSortable/TableSortableColumn.ts b/src/components/TableSortable/TableSortableColumn.ts
@@ -1,3 +1,13 @@
 export class TableSortableColumn {
-    constructor(public display: string, public variable: string, public filter: string){}
+    public display: string;
+    public variable: string;
+    public filter: string;
+    public sortable: boolean = true;
+
+    constructor(display: string, variable: string, filter: string, sortable?: boolean){
+        this.display = display;
+        this.variable = variable;
+        this.filter = filter;
+        this.sortable = sortable != null ? sortable : true;
+    }
 }