Add number column Type

Author: VladislavKostyukevich

src/app/elements/table/table.filter.component.html

@@ -43,7 +43,7 @@
                         [sorter]="getDefaultSorter(col)"
                         (sorted)="sort($event)" class="{{col.property}}" [ngClass]="{
                             'fit': col.type === 'checkbox' || col.property === 'action',
-                            'percent':col.type === 'percent'
+                            'percent':col.type === 'percent' || col.type === 'number'
                         }">
                         <fa-icon class="icon up sorter" [icon]="icons.faArrowUp" style="display: none"></fa-icon>
                         <fa-icon class="icon down sorter" [icon]="icons.faArrowDown" style="display: none"></fa-icon>
@@ -102,17 +102,17 @@
                             (modelChange)="handleLookupFilterChange(col.lookup.objectWithId ? col.lookup.objectWithId : col.lookup.entity, [$event])">
                         </lookup-autocomplete>
 
-                        <div *ngIf="col.type === 'percent' && col.filter"
+                        <div *ngIf="(col.type === 'percent' || col.type === 'number') && col.filter"
                             [ngClass]="{ 'has-error': isRangeInvalid(col) }">
                             <input placeholder="from" class="inline form-control input-sm ft-range-selector"
-                                (keyup)="rangeKeyUp($event)"
+                                (keyup)="rangeKeyUp($event, col)"
                                 (ngModelChange)="handleRangeFilterChange(col, $event, 'from')"
-                                [ngModel]="rangeFilterData(col.property, 'from')" type="number" min="0" max="100"
+                                [ngModel]="rangeFilterData(col.property, 'from')" type="number" min="0" [max]="col.type === 'percent' ? 100 : undefined"
                                 oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                             <input placeholder="to" class="inline form-control input-sm ft-range-selector"
                                 (ngModelChange)="handleRangeFilterChange(col, $event, 'to')"
-                                [ngModel]="rangeFilterData(col.property, 'to')" type="number" min="0" max="100"
-                                (keyup)="rangeKeyUp($event)" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
+                                [ngModel]="rangeFilterData(col.property, 'to')" type="number" min="0" [max]="col.type === 'percent' ? 100 : undefined"
+                                (keyup)="rangeKeyUp($event, col)" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
                             <fa-icon class="icon" [icon]="icons.faTimes" (click)="removeRangeFilter(col.property)">
                             </fa-icon>
                         </div>
@@ -366,7 +366,7 @@
                                 (blur)="sendUpdate(entity)" />
 
                             <div
-                                *ngIf="(col.type === 'text' || col.type=='email' || col.type=='percent' || col.type=='textarea') && (!col.editable || entity.constantRow || notEditableByProperty(entity, col)) && !col.link">
+                                *ngIf="(col.type === 'text' || col.type=='email' || col.type=='percent' || col.type=='number' || col.type=='textarea') && (!col.editable || entity.constantRow || notEditableByProperty(entity, col)) && !col.link">
                                 {{transformationsService.getPropertyValue(entity, col.property)}}</div>
                             <attachment-inline *ngIf="col.type === 'file'" [name]="col.property + rowNum"
                                 [model]="transformationsService.getPropertyValue(entity, col.property)"

src/app/elements/table/table.filter.component.ts

@@ -274,14 +274,14 @@ export class TableFilterComponent implements OnInit, AfterViewInit, OnDestroy, O
   handleRangeFilterChange(col: any, value: string, type: string) {
     const newFilter: Filter = this.filterHelper.getOrCreateFilter(col.property, this.appliedFilters);
     let ranges: any[] = [];
-    ranges = newFilter.range ? newFilter.range.split(',') : [0, 100];
+    ranges = newFilter.range ? newFilter.range.split(',') : [0, undefined];
 
     switch (type) {
       case 'from':
-        ranges[0] = this.fixIvalidRange(value);
+        ranges[0] = this.fixIvalidRange(value, col);
         break;
       case 'to':
-        ranges[1] = this.fixIvalidRange(value);
+        ranges[1] = this.fixIvalidRange(value, col);
         break;
     }
 
@@ -318,9 +318,11 @@ export class TableFilterComponent implements OnInit, AfterViewInit, OnDestroy, O
     this.filterChange(newFilter);
   }
 
-  fixIvalidRange(range: string | number) {
+  fixIvalidRange(range: string | number, col: TFColumn) {
     range = +range < 0 ? 0 : range;
-    range = +range > 100 ? 100 : range;
+    if (col.type === TFColumnType.percent) {
+      range = +range > 100 ? 100 : range;
+    }
     return range;
   }
 
@@ -568,8 +570,8 @@ export class TableFilterComponent implements OnInit, AfterViewInit, OnDestroy, O
     this.sort(this.defaultSortBy);
   }
 
-  rangeKeyUp($event) {
-    $event.target.value = this.fixIvalidRange($event.target.value);
+  rangeKeyUp($event, column: TFColumn) {
+    $event.target.value = this.fixIvalidRange($event.target.value, column);
   }
 
   removeRangeFilter(property) {
@@ -646,9 +648,9 @@ export class TableFilterComponent implements OnInit, AfterViewInit, OnDestroy, O
   rowClicked(entity: any, col: any, $event: any) {
     const el: HTMLElement = $event.target;
     const canClick = (!col.editable || this.notEditableByProperty(entity, col) || el.classList.contains('ft-cell'))
-    && col.type !== 'link'
-    && col.type !== 'long-text'
-    && !col.link;
+      && col.type !== 'link'
+      && col.type !== 'long-text'
+      && !col.link;
     if (canClick) {
       this.rowClick.emit(entity);
     }

src/app/elements/table/tfColumn.ts

@@ -72,6 +72,7 @@ export enum TFColumnType {
     email = 'email',
     multiselect = 'multiselect',
     percent = 'percent',
+    number = 'number',
     password = 'password',
     checkbox = 'checkbox',
     autocomplete = 'lookup-autocomplete',

src/app/pages/project/testrun/testrun-list/testruns.component.ts

@@ -164,7 +164,7 @@ export class TestRunsComponent implements OnInit {
         property: 'not_assigned',
         filter: true,
         sorting: true,
-        type: TFColumnType.percent,
+        type: TFColumnType.number,
         editable: false,
         link: {
           template: `/project/${this.route.snapshot.params.projectId}/testrun/{id}`,