feat: Add search functionality and rename to crm-grid. #287 (#288)

* feat: Add search functionality and rename to crm-grid. #287 * fix: Grid id is unnecessary and causes memory leak * chore: Formatting. * chore(formatting): space * fix: remove id * feat: Update grid-crm-sample * feat: Update awesome-grid sample. * fix: Remove grid id. * fix: remove the id not the reference * fix: Add styles * chore(crm-grid): detect changes when updating column lists, lint
IgniteUI · Jul 18, 2018 · 992bda3 · 992bda3
1 parent a072058
commit 992bda3
Show file tree

Hide file tree

Showing 217 changed files with 911 additions and 556 deletions.
diff --git a/...gular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.html b/...gular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.html
@@ -1,9 +1,7 @@
 <div class="sample-wrapper">
-  <section class="sample-content">
-  <article class="sample-column">
-
-    <div class="grid__wrapper">
-
+	<section class="sample-content">
+		<article class="sample-column">	
+		<div class="grid__wrapper">	
 		<div class="sample__header">
 			<div class="switch-sample">
 				<h2 class="switch-sample__title">Boston Marathon 2018</h2>
@@ -21,19 +19,13 @@ <h2 class="switch-sample__title">Boston Marathon 2018</h2>
 						<div>{{ cell.value }}</div>
 						<ng-container *ngIf="isTop3(cell)">
 							<span class="cup" *ngIf="cell.value === 1">
-								<svg id="circle" height="20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-									<image x="0" y="0" height="20" width="20" xlink:href="assets/images/trophy_gold.svg" />
-								</svg>
+								<img src="assets/images/trophy_gold.svg" alt="golf-trophy" />
 							</span>
 							<span class="cup" *ngIf="cell.value === 2">
-								<svg id="circle" height="20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-									<image x="0" y="0" height="20" width="20" xlink:href="assets/images/trophy_silver.svg" />
-								</svg>
+								<img src="assets/images/trophy_silver.svg" alt="silver-trophy" />
 							</span>
 							<span class="cup" *ngIf="cell.value === 3">
-								<svg id="circle" height="20" width="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-									<image x="0" y="0" height="20" width="20" xlink:href="assets/images/trophy_bronze.svg" />
-								</svg>
+								<img src="assets/images/trophy_bronze.svg" alt="bronze-trophy" />
 							</span>
 						</ng-container>
 					</div>
@@ -78,7 +70,9 @@ <h2 class="switch-sample__title">Boston Marathon 2018</h2>
 
 			<igx-column field="TrackProgress" sortable="true" header="Track Progress">
 				<ng-template igxCell let-val>
-					<igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar>
+					<div class="linear-bar-container">
+						<igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar>
+					</div>
 				</ng-template>
 			</igx-column>
 
@@ -110,8 +104,8 @@ <h2 class="switch-sample__title">Boston Marathon 2018</h2>
 					<igx-icon>last_page</igx-icon>
 				</button>
 			</div>
-		</ng-template>
-    </div>
-  </article>
-  </section>
-</div>
+		</ng-template>	
+		</div>
+		</article>
+	</section>
+</div>
diff --git a/...gular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.scss b/...gular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.scss
@@ -10,7 +10,7 @@
   $row-selected-text-color: #ddd,
   $row-hover-background: #f8f8f8,
   $row-border-color: #f8f8f8,
-
+  
   $cell-selected-background: igx-color($default-palette, grays, 800),
   $cell-selected-text-color: #fff
   );
@@ -67,14 +67,15 @@
   width: 100%;
   height: rem(50px);
   }
+
   .switch-sample__label {
   margin: 0 rem(8) 0 0;
   }
 
   .athlete_name {
   width: rem(100px);
-  margin:0 rem(30px);
-  }
+	margin:0 rem(30px);
+	}
 
   .athlete_name,
   .title {
@@ -108,18 +109,27 @@
   width: rem(24px);
   }
 
-  .rowIndex {
-  margin-left: rem(57px);
+  .cup {
+    padding-left: 20px;
   }
 
+  .rowIndex {
+    margin-left: rem(57px);
+  }
 
   @media (max-width: rem(960px)) {
   .grid__wrapper {
     width: rem(960px);
   }
-  }
+}
 
   .igx-paginator>* {
     margin: 0 .3125rem;
+    display: flex;
+    align-items: center;
+  } 
+
+  .linear-bar-container {
+    width: 100%;
   }
 }
diff --git a/...angular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.ts b/...angular/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__name__.component.ts
@@ -30,26 +30,25 @@ import {
 
   get live() {
     return this._live;
-    }
+  }
+
   set live(val) {
     this._live = val;
     if (this._live) {
       this._timer = setInterval(() => this.ticker(), 3000);
-      } else {
+    } else {
       clearInterval(this._timer);
-      }
     }
+  }
 
   get hideAthleteNumber() {
     return this.windowWidth && this.windowWidth < 960;
   }
-
   get hideBeatsPerMinute() {
     return this.windowWidth && this.windowWidth < 860;
   }
 
-
-  constructor(private zone: NgZone) {}
+  constructor(private zone: NgZone) { }
 
   public ngOnInit() {
     this.localData = athletesData;
@@ -72,8 +71,8 @@ import {
   }
 
   public cellSelection(evt) {
-      const cell = evt.cell;
-      this.grid1.selectRows([cell.row.rowID], true);
+    const cell = evt.cell;
+    this.grid1.selectRows([cell.row.rowID], true);
   }
 
   public getIconType(cell) {
@@ -105,6 +104,7 @@ import {
 
   public filter(term) {
     this.grid1.filter('CountryName', term, IgxStringFilteringOperand.instance().condition('contains'));
+    this.grid1.markForCheck();
   }
 
   private ticker() {
@@ -120,43 +120,45 @@ import {
 
   private updateData() {
     this.localData.map((rec) => {
-        let val = this.generateRandomNumber(-1, 1);
-        switch (val) {
+      let val = this.generateRandomNumber(-1, 1);
+      switch (val) {
         case -1:
-            val = 0;
-            break;
+          val = 0;
+          break;
         case 0:
-            val = 1;
-            break;
+          val = 1;
+          break;
         case 1:
-            val = 3;
-            break;
-        }
+          val = 3;
+          break;
+      }
 
-        rec.TrackProgress += val;
+      rec.TrackProgress += val;
     });
     const unsortedData = this.localData.slice(0);
 
     this.localData.sort((a, b) => b.TrackProgress - a.TrackProgress).map((rec, idx) => rec.Id = idx + 1);
     this.localData = this.localData.slice(0);
 
-    unsortedData.forEach((element, index) => {
-        this.localData.some((elem, ind) => {
-            if (element.Id === elem.Id) {
-                const position = index - ind;
-
-                if (position < 0) {
-                    elem.Position = 'down';
-                } else if (position === 0) {
-                    elem.Position = 'current';
-                } else {
-                    elem.Position = 'up';
-                }
-
-                return true;
-            }
-        });
-    });
+    // tslint:disable-next-line:prefer-for-of
+    // Browser compatibility: for-of, No support for IE
+    for (let i = 0; i < unsortedData.length; i++) {
+      this.localData.some((elem, ind) => {
+        if (unsortedData[i].Id === elem.Id) {
+          const position = i - ind;
+
+          if (position < 0) {
+            elem.Position = 'down';
+          } else if (position === 0) {
+            elem.Position = 'current';
+          } else {
+            elem.Position = 'up';
+          }
+
+          return true;
+        }
+      });
+    }
 
     if (this.localData[0].TrackProgress >= 100) {
       this.live = false;
@@ -167,45 +169,45 @@ import {
 
 class CustomTopSpeedSummary extends IgxNumberSummaryOperand {
 
-    constructor() {
-        super();
-    }
+  constructor() {
+    super();
+  }
 
-    public operate(data?: any[]): IgxSummaryResult[] {
-        const result = [];
-        result.push({
-            key: 'average',
-            label: 'average',
-            summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
-        });
+  public operate(data?: any[]): IgxSummaryResult[] {
+    const result = [];
+    result.push({
+      key: 'average',
+      label: 'average',
+      summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
+    });
 
-        return result;
-    }
+    return result;
+  }
 }
 
 export class CustomBPMSummary extends IgxNumberSummaryOperand {
 
-    constructor() {
-        super();
-    }
+  constructor() {
+    super();
+  }
 
-    public operate(data?: any[]): IgxSummaryResult[] {
-        const result = [];
-        result.push(
-            {
-                key: 'min',
-                label: 'min',
-                summaryResult: IgxNumberSummaryOperand.min(data)
-            }, {
-                key: 'max',
-                label: 'max',
-                summaryResult: IgxNumberSummaryOperand.max(data)
-            }, {
-                key: 'average',
-                label: 'average',
-                summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
-            });
-
-        return result;
-    }
+  public operate(data?: any[]): IgxSummaryResult[] {
+    const result = [];
+    result.push(
+      {
+        key: 'min',
+        label: 'min',
+        summaryResult: IgxNumberSummaryOperand.min(data)
+      }, {
+        key: 'max',
+        label: 'max',
+        summaryResult: IgxNumberSummaryOperand.max(data)
+      }, {
+        key: 'average',
+        label: 'average',
+        summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
+      });
+
+    return result;
+  }
 }