Function LisPaginatedSearchMixin

A mixin that encapsulates code that implements a paginated search. The mixin is a function that uses the factory pattern to generate a class to be extended by a component. To use the mixin, call the function with the appropriate template arguments and extend the class it returns when defining a component.

Example

When using the mixin, the requiredQueryStringParams, y resultAttributes, and tableHeader properties of the extended class must be set in the component's constructor.

The renderForm method must be overridden to define the form part of the component's template. It is recommended that the form's elements' values are bound to the URL query string parameters using the inherited queryStringController since their values will automatically be reflected in the URL query string parameters.

Lastly, note the due to TypeScript's lack of support for partial type argument inference the mixin function is curried. This means the function returns another function that must also be called to generate the mixin class:

@customElement('lis-gene-search-element')
export class LisGeneSearchElement extends
LisPaginatedSearchMixin(LitElement)<GeneSearchData, GeneSearchResult>()  // <-- curried function call
{

  // set properties in the constructor
  constructor() {
    super();
    // configure query string parameters
    this.requiredQueryStringParams = [['query']];
    // configure results table
    this.resultAttributes = ['name', 'description'];
    this.tableHeader = {name: 'Name', description: 'Description'};
  }

  // define the form part of the template
  override renderForm() {
    // NOTE:
    // 1) the input element has a name attribute, which all form elemnts are required to have
    // 2) the input value is set to a URL query string parameter value
    return html`
      <form>
        <fieldset class="uk-fieldset">
          <legend class="uk-legend">Gene search</legend>
          <div class="uk-margin">
            <input
              name="query"  // <-- all form elements need a name
              class="uk-input"
              type="text"
              placeholder="Input"
              aria-label="Input"
              .value=${this.queryStringController.getParameter('query')}>
          </div>
          <div class="uk-margin">
            <button type="submit" class="uk-button uk-button-primary">Search</button>
          </div>
        </fieldset>
      </form>
    `;
  }

}
Copy

Example

By default, the LisPaginatedSearchMixin renders search results using the LisSimpleTableElement | LisSimpleTableElement. If this is too restrictive, a class that uses the mixin may override its renderResults method to draw the results portion of the template itself. For example:

@customElement('lis-gene-search-element')
export class LisGeneSearchElement extends
LisPaginatedSearchMixin(LitElement)<GeneSearchData, GeneSearchResult>()  // <-- curried function call
{

  // set properties in the constructor
  constructor() {
    super();
    // configure query string parameters
    this.requiredQueryStringParams = [['query']];
    // no need to configure the results table since we're going to override it
  }

  // define the form part of the template
  override renderForm() {
    ...
  }

  // define the results part of the template
  override renderResults() {
    // this is actually the default implementation provided by the mixin
    return html`
      <lis-simple-table-element
        caption="Search Results"
        .dataAttributes=${this.resultAttributes}
        .header=${this.tableHeader}
        .data=${this.searchResults}>
      </lis-simple-table-element>
    `;
  }

}
Copy