Commit 5b0c91b8 authored by Paulo's avatar Paulo
Browse files

refactor(code): Form code change

parent 86209880
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
export interface Head {
export class SearchResults{ vars: string[];
fields: string[]; }
results: string[]; export interface Results {
bindings: any[];
} }
export class SearchResultsFromAPI{ export interface SearchResult {
head: Head;
head: Record<"vars",string[]> results: Results;
results: Record<"bindings",string[]>;
} }
\ No newline at end of file
<form [formGroup]="seachForm" (ngSubmit)="simpleSearch(seachForm.value);"> <!--<nb-card>
<nb-card>
<nb-card-body class="example-items-col"> <nb-card-body class="example-items-col">
<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" value="Search"> <button status="info" href="#" nbButton type="submit" (click)="simpleSearch()" value="Search">
<nb-icon icon="search-outline"></nb-icon> Search <nb-icon icon="search-outline"></nb-icon> Search
</button> </button>
</span> </span>
</form>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
</form>
<nb-card> <nb-card>
<nb-card-body> <nb-card-body>
...@@ -35,7 +35,27 @@ ...@@ -35,7 +35,27 @@
</div> </div>
</nb-card-body> </nb-card-body>
</nb-card> </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... <div *ngIf="results.length > 0" class="w3-container">
</ng-template> <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,Input, OnInit} from '@angular/core';
import { ParseXmlService } from '../services/parse-xml.service'; import { ParseXmlService } from '../services/parse-xml.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { SearchResult } from './models/search-result.model';
@Component({ @Component({
...@@ -10,38 +12,34 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' ...@@ -10,38 +12,34 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
}) })
export class SearchComponent implements OnInit { export class SearchComponent implements OnInit {
public results: string[] = []; results: string[][] = [];
seachForm: FormGroup;
//seachForm: FormGroup;
submitted = false; submitted = false;
searchForm = new FormGroup({
searchTerm: new FormControl()
});
constructor(private parserService: ParseXmlService, private formBuild: FormBuilder) {
this.seachForm = this.formBuild.group({ constructor(private parserService: ParseXmlService, private formBuild: FormBuilder) { }
searchTerm: ''
})
}
ngOnDestroy(): void {} ngOnDestroy(): void {}
ngOnInit(): void { ngOnInit(): void {}
} simpleSearch() {
simpleSearch(searchData) {
this.submitted = true; this.submitted = true;
this.results = [];
//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> }'
if (searchData) { //if (searchData) {
let query: string; let query: string;
let searchTerm = searchData["searchTerm"] let searchTerm = this.searchForm.get("searchTerm").value
console.log("Log arrived : ", searchTerm) console.log("Log arrived : ", searchTerm)
this.results = [];
//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> }'
query = 'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\ query = 'query=PREFIX dcat: <http://www.w3.org/ns/dcat#>\n\
PREFIX dcterms: <http://purl.org/dc/terms/>\n\ PREFIX dcterms: <http://purl.org/dc/terms/>\n\
...@@ -56,22 +54,19 @@ export class SearchComponent implements OnInit { ...@@ -56,22 +54,19 @@ export class SearchComponent implements OnInit {
this.parserService.getXmlResult(query).subscribe( this.parserService.getXmlResult(query).subscribe(
data => { data => {
if (data) { if (data){
console.error("Data : ", data) console.error("Data", data)
data.results.forEach(result => { data.results.bindings.forEach(element => {
this.results.push(result); this.results.push(element);
}) });
} }
}) //console.warn('Data submited ', searchTerm, "Results : ", this.results);
//this.seachForm.reset(); });
console.warn('Data submited ', searchTerm);
}
}
isXmlItemsEmpty() { this.searchForm.reset();
return this.results.length === 0;
} }
//}
} }
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { SearchResults,SearchResultsFromAPI } from './models/search-result.model'; import { Head,Results,SearchResult } from './models/search-result.model';
@NgModule({ @NgModule({
......
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http'; 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({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -17,16 +14,14 @@ export class ParseXmlService { ...@@ -17,16 +14,14 @@ export class ParseXmlService {
deserializedXmlObject = new BehaviorSubject(null); deserializedXmlObject = new BehaviorSubject(null);
getXmlResult(body): Observable<SearchResults> { getXmlResult(body): Observable<any> {
const httpOptions = { const httpOptions = {
headers: new HttpHeaders({ headers: new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
'responseType': 'application/sparql-results+xml' 'responseType': 'application/sparql-results+xml'
}) })
}; };
return this.http.post<SearchResultsFromAPI>("http://10.6.10.9:8888/blazegraph/sparql",body, httpOptions) return this.http.post("http://10.6.10.9:8888/blazegraph/sparql",body, httpOptions);
.pipe(
map (
response=> new SearchApiMapper().mapFromApi(response)));
} }
} }
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