refactor(code): Form code change

src/app/search/models/search-mapper.ts

-import { SearchResultsFromAPI, SearchResults } from './search-result.model';
-
-export class SearchApiMapper {
-
-    // map API to APP
-    public mapFromApi(searchResultsApi: SearchResultsFromAPI): SearchResults {
-        const appModel = new SearchResults();
-        appModel.fields = searchResultsApi.head.vars;
-        appModel.results = searchResultsApi.results.bindings;
-        return appModel;
-    }
-}
\ No newline at end of file

src/app/search/models/search-result.model.ts

-
-export class SearchResults{
-    fields: string[];
-    results: string[];
+export interface Head {
+    vars: string[];
+}
+export interface Results {
+    bindings: any[];
 }
 
-export class SearchResultsFromAPI{
-    
-    head: Record<"vars",string[]>
-    results: Record<"bindings",string[]>;
+export interface SearchResult {
+    head: Head;
+    results: Results;
 }
\ No newline at end of file

src/app/search/search.component.html

 
-<form [formGroup]="seachForm" (ngSubmit)="simpleSearch(seachForm.value);">
-  <nb-card>
+  <!--<nb-card>
     <nb-card-body class="example-items-col">
+      <form [formGroup]="searchForm">
       <label for="search">Search by title or description</label>  
       <input id="search" type="text" nbInput shape="round"  placeholder="Search" formControlName="searchTerm">
       <span>
-        <button status="info" href="#" nbButton type="submit" value="Search">
+        <button status="info" href="#" nbButton type="submit" (click)="simpleSearch()" value="Search">
           <nb-icon icon="search-outline"></nb-icon> Search 
         </button>
       </span>
+    </form>
     </nb-card-body>
   </nb-card>
-  </form>
   
   <nb-card>
   <nb-card-body>
@@ -35,7 +35,27 @@
   </div>
 </nb-card-body>
   </nb-card>
+-->
+  
+<form class="form-inline "[formGroup]="searchForm">
+    <input class="form-control" type="text" placeholder="Search" aria-label="Search" formControlName="searchTerm">
+    <button type="submit" (click)="simpleSearch()">Search</button>
+  </form>
   
-  <ng-template #loading>
-    Loading User...
-  </ng-template>
+  
+  <div *ngIf="results.length > 0" class="w3-container">    
+    <table class="w3-table-all w3-card-4">    
+      <thead>    
+        <th style="text-align: center;">Uri (DOI)</th>    
+        <th style="text-align: center;">Title</th>    
+        <th style="text-align: center;">Description</th>    
+      </thead>    
+      <tbody>
+        <tr *ngFor="let item of results">     
+          <td><a href="{{item.uri.value}}" target="blank">{{item.uri.value}}</a></td>   
+          <td>{{item.title.value}}</td>    
+          <td>{{item.description.value.substr(0,250) }}... </td>    
+      </tr>    
+    </tbody>
+    </table>    
+  </div>   

src/app/search/search.component.ts

 import { Component,Input,  OnInit} from '@angular/core';
 import { ParseXmlService } from '../services/parse-xml.service';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { SearchResult } from './models/search-result.model';
+
 
 
 @Component({
@@ -10,38 +12,34 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 })
 
 
-
 export class SearchComponent implements OnInit {
 
-  public results: string[] = [];
-
-  seachForm: FormGroup;
+  results: string[][] = [];
 
+  //seachForm: FormGroup;
   submitted = false;
 
+  searchForm = new FormGroup({
+    searchTerm: new FormControl()
+  });
 
-  constructor(private parserService: ParseXmlService, private formBuild: FormBuilder) {
-    this.seachForm = this.formBuild.group({
-      searchTerm: ''
-    })
-  }
+
+  constructor(private parserService: ParseXmlService, private formBuild: FormBuilder) { }
 
   ngOnDestroy(): void {}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
 
-  }
-
-  simpleSearch(searchData) {
+  simpleSearch() {
     this.submitted = true;
+    this.results = [];
     //effectuer une recherche plein text en SPARL sur la BDD Blazegraph
     //curl -X POST -H 'Accept: application/rdf+xml' -i 'http://10.6.10.9:8888/blazegraph/sparql' --data 'query=SELECT * where {?s a <http://www.w3.org/ns/dcat#Dataset> }'
 
-    if (searchData) {
+    //if (searchData) {
       let query: string;
-      let searchTerm = searchData["searchTerm"]
+      let searchTerm = this.searchForm.get("searchTerm").value
       console.log("Log arrived : ", searchTerm)
-      this.results = [];
       //query ='query=SELECT * where {?s a <http://www.w3.org/ns/dcat#Dataset> }'
       query = 'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\
             PREFIX dcterms: <http://purl.org/dc/terms/>\n\
@@ -56,22 +54,19 @@ export class SearchComponent implements OnInit {
 
       this.parserService.getXmlResult(query).subscribe(
         data => {
-          if (data) {
-            console.error("Data : ", data)
-            data.results.forEach(result => {
-              this.results.push(result);
-            })
+          if (data){
+            console.error("Data", data)
+            data.results.bindings.forEach(element => {
+              this.results.push(element);
+            });
           }
-        })
+          //console.warn('Data submited ', searchTerm, "Results : ", this.results);
 
-      //this.seachForm.reset();
-      console.warn('Data submited ', searchTerm);
+      });
       
-    }
-  }
       
-  isXmlItemsEmpty() {
-    return this.results.length === 0;
+      this.searchForm.reset();
     }
+  //}
 
 }

src/app/search/search.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SearchResults,SearchResultsFromAPI } from './models/search-result.model';
+import { Head,Results,SearchResult } from './models/search-result.model';
 
 
 @NgModule({

src/app/services/parse-xml.service.ts

 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { SearchResults, SearchResultsFromAPI } from '../search/models/search-result.model';
-import { SearchApiMapper } from '../search/models/search-mapper';
-import { map, filter } from "rxjs/operators";
 
 @Injectable({
   providedIn: 'root'
@@ -17,16 +14,14 @@ export class ParseXmlService {
   deserializedXmlObject = new BehaviorSubject(null);
   
   
-  getXmlResult(body): Observable<SearchResults> {
+  getXmlResult(body): Observable<any> {
     const httpOptions = {
         headers: new HttpHeaders({
           'Content-Type':  'application/x-www-form-urlencoded',
           'responseType': 'application/sparql-results+xml'         
         })
       };
-    return this.http.post<SearchResultsFromAPI>("http://10.6.10.9:8888/blazegraph/sparql",body, httpOptions)
-                    .pipe(
-                      map (
-                        response=> new SearchApiMapper().mapFromApi(response)));
+    return this.http.post("http://10.6.10.9:8888/blazegraph/sparql",body, httpOptions);   
   }
+
 }