Hi All,
I installed Strapi v4 (Community Edition) and able to use its APIs after consuming them in Angular but I have been facing problems mentioned below.
Unable to Get the Content as formatted text on the Angular page.
We need to provide ‘Search’ option to do search in the content of my website (i.e. a static website).
Can someone of you provide a solution to any of the problems mentioned above?
Thanks in advance and for your support as well.
Regards,
Suresh Verma
I use
swagger-codegen to create api client from the json which documentation strapi plugin produces.
ngx-markdown to render rich text
Since the documentation does not output the filters for the methods I have for now extended my solution with a custom client for each content type where I want to search. See the code section where I set ‘queryParameters’
/**
* API v1
* No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
*
* OpenAPI spec version: 1.0.0
*
* NOTE: This class is NOT auto generated by the swagger code generator program.
* https://github.com/swagger-api/swagger-codegen.git
* DO edit the class manually.
**/
import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams,
HttpResponse, HttpEvent } from '@angular/common/http';
import { CustomHttpUrlEncodingCodec } from '../strapi-client/encoder';
import { Observable } from 'rxjs';
import { BASE_PATH, COLLECTION_FORMATS } from '../strapi-client/variables';
import { Configuration } from '../strapi-client/configuration';
import { InlineResponse20014 } from '../strapi-client/model/models';
@Injectable()
export class WikiSearchService{
protected basePath = 'http://localhost:1337/api';
public defaultHeaders = new HttpHeaders();
public configuration = new Configuration();
constructor(protected httpClient: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
if (basePath) {
this.basePath = basePath;
}
if (configuration) {
this.configuration = configuration;
this.basePath = basePath || configuration.basePath || this.basePath;
}
}
/**
*
*
* @param sort Sort by attributes ascending (asc) or descending (desc)
* @param pagination_withCount Retun page/pageSize (default: true)
* @param pagination_page Page number (default: 0)
* @param pagination_pageSize Page size (default: 25)
* @param pagination_start Offset value (default: 0)
* @param pagination_limit Number of entities to return (default: 25)
* @param fields Fields to return (ex: title,author)
* @param populate Relations to return
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
// hacked in custom api module because documentation plugin does not provide us with filter queryparam but filter actually works
// example: http://localhost:1337/api/wikis?filters[content][$containsi]=supercomputer
// using multiple fields http://localhost:1337/api/wikis?filters[$or][0][title][$containsi]=Web&filters[$or][1][content][$containsi]=supercomputer
public searchWikis(sort?: string, pagination_withCount?: boolean, pagination_page?: number, pagination_pageSize?: number, pagination_start?: number, pagination_limit?: number, fields?: string, populate?: string, search?:string, observe?: 'body', reportProgress?: boolean): Observable<InlineResponse20014>;
public searchWikis(sort?: string, pagination_withCount?: boolean, pagination_page?: number, pagination_pageSize?: number, pagination_start?: number, pagination_limit?: number, fields?: string, populate?: string, search?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<InlineResponse20014>>;
public searchWikis(sort?: string, pagination_withCount?: boolean, pagination_page?: number, pagination_pageSize?: number, pagination_start?: number, pagination_limit?: number, fields?: string, populate?: string, search?:string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<InlineResponse20014>>;
public searchWikis(sort?: string, pagination_withCount?: boolean, pagination_page?: number, pagination_pageSize?: number, pagination_start?: number, pagination_limit?: number, fields?: string, populate?: string, search?:string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
if (sort !== undefined && sort !== null) {
queryParameters = queryParameters.set('sort', <any>sort);
}
if (pagination_withCount !== undefined && pagination_withCount !== null) {
queryParameters = queryParameters.set('pagination[withCount]', <any>pagination_withCount);
}
if (pagination_page !== undefined && pagination_page !== null) {
queryParameters = queryParameters.set('pagination[page]', <any>pagination_page);
}
if (pagination_pageSize !== undefined && pagination_pageSize !== null) {
queryParameters = queryParameters.set('pagination[pageSize]', <any>pagination_pageSize);
}
if (pagination_start !== undefined && pagination_start !== null) {
queryParameters = queryParameters.set('pagination[start]', <any>pagination_start);
}
if (pagination_limit !== undefined && pagination_limit !== null) {
queryParameters = queryParameters.set('pagination[limit]', <any>pagination_limit);
}
if (fields !== undefined && fields !== null) {
queryParameters = queryParameters.set('fields', <any>fields);
}
if (populate !== undefined && populate !== null) {
queryParameters = queryParameters.set('populate', <any>populate);
}
if (search !== undefined && search !== null) {
queryParameters = queryParameters.set('filters[$or][0][title][$containsi]', <any>search);
queryParameters = queryParameters.set('filters[$or][1][content][$containsi]', <any>search);
}
let headers = this.defaultHeaders;
// authentication (bearerAuth) required
if (this.configuration.accessToken) {
const accessToken = typeof this.configuration.accessToken === 'function'
? this.configuration.accessToken()
: this.configuration.accessToken;
headers = headers.set('Authorization', 'Bearer ' + accessToken);
}
// to determine the Accept header
let httpHeaderAccepts: string[] = [
'application/json'
];
const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
if (httpHeaderAcceptSelected != undefined) {
headers = headers.set('Accept', httpHeaderAcceptSelected);
}
// to determine the Content-Type header
const consumes: string[] = [
];
return this.httpClient.request<InlineResponse20014>('get',`${this.basePath}/wikis`,
{
params: queryParameters,
withCredentials: this.configuration.withCredentials,
headers: headers,
observe: observe,
reportProgress: reportProgress
}
);
}
}