Commit 7b053bd3 authored by Paulo's avatar Paulo
Browse files

refactor(form): Form working

parent 1daa3df5
...@@ -6,12 +6,17 @@ ...@@ -6,12 +6,17 @@
<a routerLink="/" routerLinkActive="active"> <a routerLink="/" routerLinkActive="active">
<img width="80"alt="Angular Logo" src="assets/images/logo.png"/> <img width="80"alt="Angular Logo" src="assets/images/logo.png"/>
</a> </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" title="CINES"
[nbContextMenu]="items" [nbContextMenu]="items"
badgePosition="right"
nbContextMenuTag="my-context-menu"> nbContextMenuTag="my-context-menu">
</nb-user> </nb-user>
<button routerLink="/auth/login" nbContextMenuPlacement="right" outline nbButton >Login</button> <button routerLink="/auth/login" nbContextMenuPlacement="right" outline nbButton >Login</button>
</nb-layout-header> </nb-layout-header>
<nb-sidebar responsive start state="compacted"> <nb-sidebar responsive start state="compacted">
......
...@@ -5,7 +5,6 @@ import { NbMenuItem, NbSidebarService } from '@nebular/theme'; ...@@ -5,7 +5,6 @@ import { NbMenuItem, NbSidebarService } from '@nebular/theme';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
......
...@@ -38,7 +38,7 @@ import { ParseXmlService } from './services/parse-xml.service'; ...@@ -38,7 +38,7 @@ import { ParseXmlService } from './services/parse-xml.service';
import { NbMenuModule, import { NbMenuModule,
NbThemeModule,NbStepperModule, NbThemeModule,NbStepperModule,
NbCardModule, NbSidebarModule, NbLayoutModule, 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 { NbEvaIconsModule } from '@nebular/eva-icons';
import { AccountComponent } from './account/account.component'; import { AccountComponent } from './account/account.component';
import { AccountModule } from './account/account.module'; import { AccountModule } from './account/account.module';
...@@ -91,7 +91,8 @@ import { SearchModule} from './search/search.module'; ...@@ -91,7 +91,8 @@ import { SearchModule} from './search/search.module';
NbInputModule, NbInputModule,
NbUserModule, NbUserModule,
AccountModule, AccountModule,
SearchModule SearchModule,
NbSpinnerModule
], ],
providers: [ providers: [
AppConfiguration, AppConfiguration,
......
<!--<nb-card> <nb-card>
<nb-card-body class="example-items-col"> <nb-card-body class="example-items-col">
<form [formGroup]="searchForm"> <form [formGroup]="searchForm">
<label for="search">Search by title or description</label> <label for="search">Search by title or description</label>
<input id="search" type="text" nbInput shape="round" placeholder="Search" formControlName="searchTerm"> <input id="search" type="text" nbInput shape="round" placeholder="Search" formControlName="searchTerm">
<span> <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 <nb-icon icon="search-outline"></nb-icon> Search
</button> </button>
</span> </span>
</form> </form>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
<nb-card>
<nb-card-body>
<div *ngIf="results.length > 0" class="w3-container"> <div *ngIf="results.length > 0; else notFound" class="w3-container">
<p>Found {{results.length}} entries for search term {{seachTerm}}</p> <p>Found {{results.length}} entries for search term {{searchForm.value.searchTerm}}</p>
<table class="w3-table-all w3-card-4"> <table class="w3-table-all w3-card-4">
<thead> <thead>
<th style="text-align: center;">Uri (DOI)</th> <th style="text-align: center;">Uri (DOI)</th>
...@@ -33,29 +30,7 @@ ...@@ -33,29 +30,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</nb-card-body>
</nb-card> <ng-template #notFound>
--> <div *ngIf="submited && results.length == 0">No results found for search {{searchForm.value.searchTerm}}</div>
</ng-template>
<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>
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 { ParseXmlService } from '../services/parse-xml.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
import { SearchResult } from './models/search-result.model';
@Component({ @Component({
...@@ -12,29 +11,39 @@ import { SearchResult } from './models/search-result.model'; ...@@ -12,29 +11,39 @@ import { SearchResult } from './models/search-result.model';
}) })
export class SearchComponent implements OnInit { export class SearchComponent implements OnInit {
results: string[][] = [];
public results: string[][] = [];
searchForm = new FormGroup({ searchForm = new FormGroup({
searchTerm: new FormControl() searchTerm: new FormControl()
}); });
submited: boolean;
constructor( constructor(
private http: HttpClient,
private parserService: ParseXmlService private parserService: ParseXmlService
) { } ) { }
ngOnInit(): void { 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 //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> }' //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; let query: string;
// query ='query=SELECT * where {?s a <http://www.w3.org/ns/dcat#Dataset> }' // query ='query=SELECT * where {?s a <http://www.w3.org/ns/dcat#Dataset> }'
this.results = []
this.submited = false;
query= query=
'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\ 'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\
...@@ -45,7 +54,7 @@ where {\n\ ...@@ -45,7 +54,7 @@ where {\n\
dcterms:title ?title ;\n\ dcterms:title ?title ;\n\
dcterms:description ?description; \n\ dcterms:description ?description; \n\
dcat:keyword ?uri ; \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\ .\n\
}' }'
...@@ -53,16 +62,14 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con ...@@ -53,16 +62,14 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con
this.parserService.getXmlResult(query).subscribe( this.parserService.getXmlResult(query).subscribe(
data=>{ data=>{
if (data){ if (data){
this.results = [];
data.results.bindings.forEach(element => { data.results.bindings.forEach(element => {
this.results.push(element); this.results.push(element);
}); });
} }
}) })
this.searchForm.reset();
this.searchForm.reset();
this.submited = true;
} }
...@@ -70,5 +77,4 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con ...@@ -70,5 +77,4 @@ FILTER (contains( ?description, "'+ this.searchForm.value.searchTerm +'") || con
return this.results.length === 0; return this.results.length === 0;
} }
} }
...@@ -5,13 +5,11 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; ...@@ -5,13 +5,11 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class ParseXmlService { export class ParseXmlService {
blazePath = "http://10.6.10.9:8888/blazegraph/sparql"
constructor(private http:HttpClient) { } constructor(private http:HttpClient) { }
deserializedXmlObject = new BehaviorSubject(null);
getXmlResult(body): Observable<any> { getXmlResult(body): Observable<any> {
...@@ -21,7 +19,7 @@ export class ParseXmlService { ...@@ -21,7 +19,7 @@ export class ParseXmlService {
'responseType': 'application/sparql-results+xml' '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);
} }
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment