refactor(style): Ajout de style

debug.log

+[1019/142259.425:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

package.json

@@ -25,7 +25,7 @@
     "@nebular/theme": "^5.1.0",
     "file-saver": "^2.0.2",
     "ngx-filesaver": "^9.0.0",
-    "rxjs": "~6.5.5",
+    "rxjs": "^6.5.5",
     "stream": "0.0.2",
     "swagger-editor-dist": "^3.11.5",
     "timers": "^0.1.1",

src/app/app-routing.module.ts

@@ -34,10 +34,7 @@ const routes: Routes = [
                         {path: 'simplesearch', component : SearchComponent},
                         {path: 'advancedsearch', component : SearchComponent},
                         {path: 'auth/login',component: AccountLoginComponent},
-                            //{ path: 'register',component: NbRegisterComponent},
-                            //{ path: 'logout', component: NbLogoutComponent},
-                            //{ path: 'request-password', component: NbRequestPasswordComponent},
-                            //{ path: 'reset-password', component: NbRequestPasswordComponent}
+                       // {path: 'auth/admin', component: AdminComponent, canActivate: [AuthGuard] }
                         ]
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -21,8 +21,10 @@
 
   <nb-layout-column>
     <router-outlet></router-outlet>
+   <!--<hr style="border-bottom: 1px solid gray; width: 80%; position: absolute;margin-top: 25%;">
+    <p>Test</p>-->
   </nb-layout-column>
- 
-  <nb-layout-footer fixed>Contact us</nb-layout-footer>
+  <nb-layout-footer>Contact us</nb-layout-footer>
+    
+    <!--<div style="background-color: aqua; height: 60px;">Contact us</div>-->
 </nb-layout>
-<div class="footer">TEST</div>

src/app/app.component.scss

@@ -125,11 +125,23 @@
     font-size: 3.5rem;
   }
 
-  .footer{
-    display: block;
-    margin-top: auto; 
-    z-index: 99999!important;
-    overflow: hidden; 
-    width: auto;
-    height: 100px;
-  }
\ No newline at end of file
+  #footer { 
+    position : absolute;
+    bottom : 0;
+    height:60px;
+    margin-top : 40px;
+    text-align: center ;
+    font-size: 10px ;
+    font-family: 'Lato' ;
+}
+
+::ng-deep .nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav{
+    background-color: #0f0d7a;
+    border-top: 1px solid #63656b;
+    color: white;
+    font-family: Open Sans, sans-serif;
+    font-size: 0.9375rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    padding: 1.25rem;
+}
\ No newline at end of file

src/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent  {
     {
       title: 'Register',
       icon: 'file-text-outline',
-      link: '/register',
+      link: '/repository',
       pathMatch:'full'
     },
     {

src/app/app.module.ts

@@ -42,7 +42,7 @@ import { NbMenuModule,
 import { NbEvaIconsModule } from '@nebular/eva-icons';
 import { AccountComponent } from './account/account.component';
 import { AccountModule } from './account/account.module';
-
+import { SearchModule} from './search/search.module';
 
 
 @NgModule({
@@ -80,7 +80,7 @@ import { AccountModule } from './account/account.module';
     FileSaverModule,
     NbStepperModule,
     NbCardModule,
-    NbThemeModule.forRoot({ name: 'default' }),
+    NbThemeModule.forRoot(),
     NbLayoutModule,
     NbSidebarModule.forRoot(),
     NbContextMenuModule,
@@ -90,7 +90,8 @@ import { AccountModule } from './account/account.module';
     NbEvaIconsModule,
     NbInputModule,
     NbUserModule,
-    AccountModule 
+    AccountModule,
+    SearchModule
   ],
   providers: [
     AppConfiguration,

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 class SearchResultsFromAPI{
+    
+    head: Record<"vars",string[]>
+    results: Record<"bindings",string[]>;
+}

src/app/search/search.component.html

 
-<form class="form-inline "[formGroup]="Form">
+<form [formGroup]="seachForm" (ngSubmit)="simpleSearch(seachForm.value);">
   <nb-card>
-    <nb-card-body class="example-items-col">  
-      <input class="form-control" type="text" nbInput shape="round" placeholder="Search" formControlName="keyword">
-      <p>
-        <button type="submit" (click)="simpleSearch()">Search</button>
-      </p>
+    <nb-card-body class="example-items-col">
+      <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">
+          <nb-icon icon="search-outline"></nb-icon> Search 
+        </button>
+      </span>
     </nb-card-body>
   </nb-card>
   </form>
+  
+  <nb-card>
+  <nb-card-body>
 
-  <div *ngIf="!isXmlItemsEmpty()" class="w3-container">    
+  <div *ngIf="results.length > 0" class="w3-container">
+    <p>Found {{results.length}} entries for search term {{seachTerm}}</p>
     <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 xmlItems">     
-          <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 >
+        <tr *ngFor="let result of results">
+          <td><a href="{{result.uri.value}}" target="blank">{{result.uri.value}}</a></td>   
+          <td>{{result.title.value}}</td>    
+          <td>{{result.description.value.substr(0,250)}}</td>    
+        </tr>    
     </tbody>
     </table>    
-  </div>    
+  </div>
+</nb-card-body>
+  </nb-card>
+  
+  <ng-template #loading>
+    Loading User...
+  </ng-template>

src/app/search/search.component.ts

-import { Component, OnInit } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component,Input,  OnInit} from '@angular/core';
 import { ParseXmlService } from '../services/parse-xml.service';
-import { FormControl, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 
 
 @Component({
@@ -14,59 +13,65 @@ import { FormControl, FormGroup } from '@angular/forms';
 
 export class SearchComponent implements OnInit {
 
+  public results: string[] = [];
 
-  public xmlItems: string[][] = []; 
+  seachForm: FormGroup;
 
-  Form = new FormGroup({
-    keyword: new FormControl()
-});
+  submitted = false;
 
-  constructor(
-    private http: HttpClient,
-    private parserService: ParseXmlService
-  ) { }
+
+  constructor(private parserService: ParseXmlService, private formBuild: FormBuilder) {
+    this.seachForm = this.formBuild.group({
+      searchTerm: ''
+    })
+  }
+
+  ngOnDestroy(): void {}
 
   ngOnInit(): void {
+
   }
 
-  simpleSearch(){
-     //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> }'
-     
-
-
-query= 
-'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\
-PREFIX dcterms: <http://purl.org/dc/terms/>\n\
-SELECT  ?title ?description ?uri \n\
-where {\n\
-?dataset a dcat:Dataset ;\n\
-dcterms:title ?title ;\n\
-dcterms:description ?description; \n\
-dcat:keyword ?uri ; \n\
-FILTER (contains( ?description, "'+ this.Form.value.keyword +'") || contains( ?title, "'+ this.Form.value.keyword +'"))\n\
-.\n\
-}'
-
-
-      this.parserService.getXmlResult("http://10.6.10.9:8888/blazegraph/sparql",query).subscribe(
-        data=>{
-          console.error("Datta :", data)
-          if (data){
-            data.results.bindings.forEach(element => {
-              this.xmlItems.push(element);
-            });
+  simpleSearch(searchData) {
+    this.submitted = true;
+    //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) {
+      let query: string;
+      let searchTerm = searchData["searchTerm"]
+      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\
+            SELECT  ?title ?description ?uri \n\
+            where {\n\
+                  ?dataset a dcat:Dataset ;\n\
+                  dcterms:title ?title ;\n\
+                  dcterms:description ?description; \n\
+                  dcat:keyword ?uri ; \n\
+                  FILTER ( contains( ?description, "' + searchTerm + '") || contains( ?title, "' + searchTerm + '"))\n\.\n\
+            }'
+
+      this.parserService.getXmlResult(query).subscribe(
+        data => {
+          if (data) {
+            console.error("Data : ", data)
+            data.results.forEach(result => {
+              this.results.push(result);
+            })
           }
         })
-      return null;
-  }
 
+      //this.seachForm.reset();
+      console.warn('Data submited ', searchTerm);
+
+    }
+  }
 
-  isXmlItemsEmpty(){
-    return this.xmlItems.length === 0;
-  } 
+  isXmlItemsEmpty() {
+    return this.results.length === 0;
+  }
 
 }

src/app/search/search.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchResults,SearchResultsFromAPI } from './models/search-result.model';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class SearchModule { }

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'
@@ -13,13 +16,17 @@ export class ParseXmlService {
   constructor(private http:HttpClient) { }
   deserializedXmlObject = new BehaviorSubject(null);
   
-  getXmlResult(path,body): Observable<any> {
+  
+  getXmlResult(body): Observable<SearchResults> {
     const httpOptions = {
         headers: new HttpHeaders({
           'Content-Type':  'application/x-www-form-urlencoded',
           'responseType': 'application/sparql-results+xml'         
         })
       };
-    return this.http.post(path,body, httpOptions);   
+    return this.http.post<SearchResultsFromAPI>("http://10.6.10.9:8888/blazegraph/sparql",body, httpOptions)
+                    .pipe(
+                      map (
+                        response=> new SearchApiMapper().mapFromApi(response)));
   }
 }

src/themes.scss

@@ -2,3 +2,23 @@
 @import '~@nebular/theme/styles/themes/default';
 @import '~@nebular/theme/styles/themes/dark';
 
+/*$nb-themes: nb-register-theme((
+
+  color-primary-100: #faf7ff, // <- new primary color
+  color-primary-200: #ece3ff,
+  color-primary-300: #d5bfff,
+  color-primary-400: #b18aff,
+  color-primary-500: #a16eff,
+  color-primary-600: #7b51db,
+  color-primary-700: #5a37b8,
+  color-primary-800: #3e2494,
+  color-primary-900: #29157a,
+
+  text-basic-color: color-basic-800,
+  text-disabled-color: color-basic-600,
+), default, default);*/
+
+:host {
+
+    background: nb-theme(background-basic-color-1);
+  }
\ No newline at end of file