JavaScript - Fluid Topics - Latest

Design a Custom Component

Category
How To
Audience
public
Version
Latest

The following JavaScript commands perform two primary functions:

  • Select all the documents where the document type is map.
  • Retrieve the ft:lastEdition metadata values for each document.

Copy and paste this sample into the JavaScript section of the custom component editor.

/********* Clustered search **********/

function get_search_results(params={}){

  params.query = params.query || '';
  params.filters = params.filters || [];
  params.sort = params.sort || [];
  params.locale = params.locale || 'en-US';
  params.page = params.page || 1;
  params.per_page = params.per_page || 50;
  params.displayresults_callback = params.displayresults_callback || null;


  let tenant_url = window.FluidTopicsClientConfiguration.headerLogoUrl.split('/internal/')[0];
  let endpoint = tenant_url+'/api/khub/clustered-search';

  let search_results = [];

  let payload = {
    "query": params.query,
    "contentLocale": params.locale,
    "filters": params.filters,
    "sort": params.sort,
    "paging": {
      "page": params.page,
      "perPage": params.per_page
    }
  };

  let defaultHeader = new Headers();
  defaultHeader.append("Accept", "application/json");
  defaultHeader.append("Content-Type", "application/json");
  defaultHeader.append("FT-Calling-App", "page-designer");
  defaultHeader.append("FT-Calling-App-Version", "0.1");

  const responsePromise = fetch(new Request(endpoint),  {
    method: 'POST',
    body: JSON.stringify(payload),
    headers: defaultHeader
  });
  responsePromise
  .then(response => response.json())
  .then(jsonTree => {
    console.log('testtesttest',jsonTree);
    let search_results = [];
    jsonTree.results.forEach(result => {
      let entry = result.entries[0];
      switch (entry.type) {
        case 'MAP':
          search_results.push({
            'type': entry.type,
            'url':entry.map.readerUrl,
            'title':entry.map.title,
            'metadata':entry.map.metadata
          });
          break;
        case 'TOPIC':
          search_results.push({
            'type': entry.type,
            'url':entry.topic.readerUrl,
            'title':entry.topic.title,
            'metadata':entry.topic.metadata
          });
          break;
        case 'DOCUMENT':
          search_results.push({
            'type': entry.type,
            'url':entry.document.viewerUrl,
            'title':entry.document.title,
            'metadata':entry.document.metadata
          });
          break;
      }
    });

    if (params.displayresults_callback){
      params.displayresults_callback({'results': search_results, 'paging': jsonTree.paging});
    }
  });
}

/********* Metadata **********/

function get_metadata_value_by_key(metas, key){
    o = metas.find(e => e.key == key);
    return (o===undefined ? '' : o.values.join(', '));
}
/*

/********* URL parameters **********/

let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
let query = urlParams.get('query') || '';
let page = urlParams.get('page') || 1;
let per_page = urlParams.get('per_page') || 15;
let editorial_type = urlParams.get('editorial_type') || 'book';

/********* Results display **********/

function displayResults(search_results){
  // Table result
  let table = document.getElementById("result_table");

  search_results.results.forEach(r => {
    row = table.insertRow();
    cell = row.insertCell();
    cell.innerHTML = r.type; // type can be: MAP, TOPIC, DOCUMENT
    cell = row.insertCell();
    cell.innerHTML = '<a href="'+r.url+'">'+r.title+'</a>';
    cell = row.insertCell();
    cell.innerHTML = get_metadata_value_by_key(r.metadata,'ft:lastEdition');
  });

  // Pagination
  let url = window.location.href.split('?')[0];
  let urlParams = new URLSearchParams(window.location.search);
  let div_paging = document.getElementById("result_paging");


  if (search_results.paging.currentPage>1){
    urlParams.set('page', search_results.paging.currentPage-1);
    div_paging.innerHTML+="<a href='"+url+"?"+urlParams.toString()+"'>Prev</a>";
  }
  let total_pages = Math.ceil(search_results.paging.totalClustersCount/per_page);
  div_paging.innerHTML+="<span>"+search_results.paging.currentPage+"/"+total_pages+"</span>";

  if (! search_results.paging.isLastPage){
    urlParams.set('page', search_results.paging.currentPage+1);
    div_paging.innerHTML+="<a href='"+url+"?"+urlParams.toString()+"'>Next</a>";
  }

}

/********* Main **********/

get_search_results({
  query:query,
  filters:[{'key':'ft:editorialType', values:[editorial_type]}],
  locale:'en-US',
  page:page,
  per_page:per_page,
  displayresults_callback:displayResults,
});