First Commit

Author: Yasir.Shabbir

Diff for: package-lock.json

@@ -33,7 +33,7 @@
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.5",
+    "@angular/cli": "1.5.0",
     "@angular/compiler-cli": "^4.2.4",
     "@angular/language-service": "^4.2.4",
     "@types/jasmine": "~2.5.53",

Diff for: package.json

@@ -1,5 +1,5 @@
 <div style="padding: 25px">
   <data-table-demo-1></data-table-demo-1>
-  <data-table-demo-2></data-table-demo-2>
-  <data-table-demo-3></data-table-demo-3>
+
+
 </div>

Diff for: src/app/app.component.html

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +7,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+
+  ngOnInit(): void {
+  }
+
 }

Diff for: src/app/app.component.ts

@@ -1,30 +1,30 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
 
-import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
+import {DataTableModule} from 'angular-4-data-table-bootstrap-4';
+
+import {DataTableDemo1} from './data-table/data-table-demo1';
+import {HttpClientModule} from "@angular/common/http";
 
-import { DataTableDemo1 } from './demo1/data-table-demo1';
-import { DataTableDemo2 } from './demo2/data-table-demo2';
-import { DataTableDemo3 } from './demo3/data-table-demo3';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DataTableDemo1,
-    DataTableDemo2,
-    DataTableDemo3
+    DataTableDemo1
   ],
   imports: [
     BrowserModule,
     CommonModule,
     FormsModule,
-    DataTableModule
+    DataTableModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

Diff for: src/app/app.module.ts

@@ -0,0 +1 @@
+export default []

Diff for: src/app/data-table/data-table-demo1-data.js

@@ -0,0 +1,51 @@
+<div style="margin: auto; max-width: 1000px; margin-bottom: 50px;">
+
+  <div>
+    <span>Name: </span>
+    <input type="text" (keyup)="onNameSearch($event)" class="form-control input-sm" style="display: inline-block; width: 100px">
+
+    <span>Country: </span>
+    <input type="text"  (keyup)="onCountrySearch($event)" class="form-control input-sm" style="display: inline-block; width: 100px">
+
+    <span>City: </span>
+    <input type="text"  (keyup)="onCitySearch($event)"  class="form-control input-sm" style="display: inline-block; width: 100px">
+
+
+
+    <input type="button" class="btn btn-outline-primary" (click)="getData()" value="CLick to Get Result">
+
+  </div>
+    <data-table id="persons-grid"
+        headerTitle="Facebook Graph API Result"
+        [items]="items"
+        [itemCount]="itemCount"
+        (reload)="reloadItems($event)"
+        (rowClick)="rowClick($event)"
+        (rowDoubleClick)="rowDoubleClick($event)"
+        [rowTooltip]="rowTooltip"
+
+        >
+        <data-table-column
+            [property]="'name'"
+            [header]="'Name'"
+            [sortable]="true"
+            [resizable]="true"
+        >
+        </data-table-column>
+        <data-table-column
+            [property]="'country'"
+            [header]="'Country'"
+            [sortable]="true">
+        </data-table-column>
+        <data-table-column
+            property="city"
+            header="City"
+            width="150px">
+        </data-table-column>
+
+
+    </data-table>
+
+
+
+</div>

Diff for: src/app/data-table/data-table-demo1-data.js.map

@@ -0,0 +1,118 @@
+import {Component, OnInit} from '@angular/core';
+import {DataTableResource} from 'angular-4-data-table-bootstrap-4';
+import {HttpClient, HttpParams} from "@angular/common/http";
+
+
+@Component({
+  selector: 'data-table-demo-1',
+  templateUrl: './data-table-demo1.html',
+  styleUrls: ['./data-table-demo1.css']
+})
+export class DataTableDemo1 implements OnInit {
+
+
+  ngOnInit(): void {
+    this.http.get('https://api.github.com/users/seeschweiler').subscribe(data => {
+      console.log(data);
+    });
+
+  }
+
+  itemResource;
+  items = [];
+  itemCount = 0;
+
+  readonly ROOT_URL = "http://localhost:8080/facebookData";
+  readonly NAME_SEARCH_URL = "http://localhost:8080/searchByName";
+
+  SEARCH_NAME_URL: String = "http://localhost:8080/searchByName";
+  SEARCH_COUNTRY_URL: String = "http://localhost:8080/searchByCountry";
+  SEARCH_CITY_URL: String = "http://localhost:8080/searchByCity";
+
+
+  constructor(private  http: HttpClient) {
+    //  this.itemResource.count().then(count => this.itemCount = count);
+  }
+
+  reloadItems(params) {
+    this.itemResource.query(params).then(items => this.items = items);
+  }
+
+  getData() {
+    this.extractFacebookResult();
+  }
+
+
+  onNameSearch(event: any) {
+
+    let params = new HttpParams().set("name", event.target.value);
+    this.onStringSearch(params, this.SEARCH_NAME_URL)
+  }
+
+
+  onCountrySearch(event: any) {
+
+    let params = new HttpParams().set("countryName", event.target.value);
+    this.onStringSearch(params, this.SEARCH_COUNTRY_URL)
+  }
+
+
+  onCitySearch(event: any) {
+
+    let params = new HttpParams().set("cityName", event.target.value);
+    this.onStringSearch(params, this.SEARCH_CITY_URL)
+  }
+
+
+  onStringSearch(params: any, url) {
+    this.http.get(url, {params: params})
+      .subscribe(
+        (data) => {
+          const helperArray = [];
+
+          for (let key in data) {
+            helperArray.push(data[key]);
+          }
+
+          this.items = helperArray;
+
+          this.itemResource = new DataTableResource(helperArray);
+          this.itemResource.count().then(count => this.itemCount = count);
+
+          console.log(helperArray)
+          console.log(JSON.stringify(data))
+        });
+  }
+
+  // special properties:
+  rowClick(rowEvent) {
+    console.log('Clicked: ' + rowEvent.row.item.name);
+  }
+
+  rowDoubleClick(rowEvent) {
+    alert('Double clicked: ' + rowEvent.row.item.name);
+  }
+
+  rowTooltip(item) {
+    return item.jobTitle;
+  }
+
+  private extractFacebookResult() {
+    this.http.get(this.ROOT_URL)
+      .subscribe(
+        (data) => {
+          const helperArray = [];
+          for (let key in data) {
+            helperArray.push(data[key]);
+          }
+
+
+          this.items = helperArray;
+          this.itemResource = new DataTableResource(helperArray);
+          this.itemResource.count().then(count => this.itemCount = count);
+
+          console.log(helperArray)
+          console.log(JSON.stringify(data))
+        });
+  }
+}