refactor(form): Form working

src/app/app.component.html

@@ -6,12 +6,17 @@
     <a routerLink="/" routerLinkActive="active">
       <img width="80"alt="Angular Logo" src="assets/images/logo.png"/>
     </a>
-    <nb-user style="margin-left:75%; white-space: pre;" name="Paulo Pimenta"
+    <h3 style="width: 100%;text-align: center;"> <strong>Federated FAIR Data Space</strong></h3>
+
+
+    <nb-user style="white-space: pre;" name="Paulo Pimenta"
               title="CINES"
               [nbContextMenu]="items"
+              badgePosition="right"
               nbContextMenuTag="my-context-menu">
     </nb-user>
     <button routerLink="/auth/login" nbContextMenuPlacement="right" outline nbButton >Login</button>
+    
   </nb-layout-header>
   
   <nb-sidebar responsive start state="compacted">

src/app/app.component.ts

@@ -5,7 +5,6 @@ import { NbMenuItem, NbSidebarService } from '@nebular/theme';
 
 @Component({
   selector: 'app-root',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

src/app/app.module.ts

@@ -38,7 +38,7 @@ import { ParseXmlService } from './services/parse-xml.service';
 import { NbMenuModule, 
   NbThemeModule,NbStepperModule,
   NbCardModule, NbSidebarModule, NbLayoutModule, 
-  NbButtonModule, NbIconModule, NbInputModule, NbContextMenuModule, NbUserModule } from '@nebular/theme/';
+  NbButtonModule, NbIconModule, NbInputModule, NbContextMenuModule, NbUserModule, NbSpinnerModule } from '@nebular/theme/';
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { AccountComponent } from './account/account.component';
 import { AccountModule } from './account/account.module';
@@ -91,7 +91,8 @@ import { SearchModule} from './search/search.module';
     NbInputModule,
     NbUserModule,
     AccountModule,
-    SearchModule
+    SearchModule,
+    NbSpinnerModule
   ],
   providers: [
     AppConfiguration,

src/app/search/search.component.html

 
-  <!--<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" (click)="simpleSearch()" value="Search">
+        <button status="info" href="#" nbButton type="submit" (click)="simpleSearch(searchForm.value.searchTerm)" value="Search">
           <nb-icon icon="search-outline"></nb-icon> Search 
         </button>
       </span>
@@ -13,11 +13,8 @@
     </nb-card-body>
   </nb-card>
 
-  <nb-card>
-  <nb-card-body>
-
-  <div *ngIf="results.length > 0" class="w3-container">
-    <p>Found {{results.length}} entries for search term {{seachTerm}}</p>
+  <div *ngIf="results.length > 0; else notFound" class="w3-container">
+    <p>Found {{results.length}} entries for search term {{searchForm.value.searchTerm}}</p>
     <table class="w3-table-all w3-card-4">    
       <thead>    
         <th style="text-align: center;">Uri (DOI)</th>    
@@ -33,29 +30,7 @@
     </tbody>
     </table>    
   </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>
-  
-  
-  <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>   
+  <ng-template #notFound>
+    <div *ngIf="submited && results.length == 0">No results found for search {{searchForm.value.searchTerm}}</div>
+  </ng-template>

src/app/search/search.component.ts

-import { Component,Input,  OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { ParseXmlService } from '../services/parse-xml.service';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { SearchResult } from './models/search-result.model';
-
+import { FormControl, FormGroup } from '@angular/forms';
 
 
 @Component({
@@ -12,29 +11,39 @@ import { SearchResult } from './models/search-result.model';
 })
 
 
+
 export class SearchComponent implements OnInit {
 
-  results: string[][] = [];
 
+  public results: string[][] = []; 
 
   searchForm = new FormGroup({
     searchTerm: new FormControl()
 });
+  submited: boolean;
 
   constructor(
+    private http: HttpClient,
     private parserService: ParseXmlService
   ) { }
 
   ngOnInit(): void {
   }
 
-  simpleSearch(){
+  loading = false;
+
+  hasResults() {
+    this.loading = this.results.length > 0;
+    setTimeout(() => this.loading = false, 2000);
+  }
+
+  simpleSearch(term:string){
      //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> }'
      let query: string;
 //     query ='query=SELECT * where {?s a <http://www.w3.org/ns/dcat#Dataset> }'
-     
-
+     this.results = []
+    this.submited = false;
 
 query= 
 'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\
@@ -45,7 +54,7 @@ where {\n\
 dcterms:title ?title ;\n\
 dcterms:description ?description; \n\
 dcat:keyword ?uri ; \n\
-FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || contains( ?title, "'+ this.searchForm.value.searchTerm +'"))\n\
+FILTER (contains( ?description, "'+ term +'") || contains( ?title, "'+ term +'"))\n\
 .\n\
 }'
 
@@ -53,7 +62,6 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con
       this.parserService.getXmlResult(query).subscribe(
         data=>{
           if (data){
-            this.results = [];
             data.results.bindings.forEach(element => {
               this.results.push(element);
             });
@@ -61,8 +69,7 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con
         })
 
         this.searchForm.reset();
-
-  
+        this.submited = true;
   }
 
 
@@ -70,5 +77,4 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con
     return this.results.length === 0;
   } 
 
-
 }

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

@@ -5,13 +5,11 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 @Injectable({
   providedIn: 'root'
 })
-
-
-
 export class ParseXmlService {
  
+  blazePath = "http://10.6.10.9:8888/blazegraph/sparql"
+
   constructor(private http:HttpClient) { }
-  deserializedXmlObject = new BehaviorSubject(null);
   
   
   getXmlResult(body): Observable<any> {
@@ -21,7 +19,7 @@ export class ParseXmlService {
           'responseType': 'application/sparql-results+xml'         
         })
       };
-    return this.http.post("http://10.6.10.9:8888/blazegraph/sparql",body, httpOptions);   
+    return this.http.post(this.blazePath,body, httpOptions);   
   }
 
 }