feat: Count result (#151)

Display count results on the search result page

frontend/public/off.html

@@ -177,13 +177,10 @@
                 <div class="block short block_ristreto">
                   <div class="row">
                     <div class="small-12 columns filterProducts">
-                      <div>
-                        <span class="filterProducts__results">
-                          <span class="material-icons">search</span>
-                          565 products, found in 1804 ms
-                        </span>
-                      </div>
                       <div class="filterProducts__buttons">
+                        <div>
+                          <searchalicious-count search-name="off"></searchalicious-count>
+                        </div>
                         <div>
                           <button
                             href="#"

frontend/src/search-a-licious.ts

@@ -4,6 +4,7 @@ export {SearchaliciousButton} from './search-button';
 export {SearchaliciousPages} from './search-pages';
 export {SearchaliciousFacets} from './search-facets';
 export {SearchaliciousResults} from './search-results';
+export {SearchCount} from './search-count';
 export {SearchaliciousAutocomplete} from './search-autocomplete';
 export {SearchaliciousSecondaryButton} from './secondary-button';
 export {SearchaliciousButtonTransparent} from './button-transparent';

frontend/src/search-count.ts

@@ -0,0 +1,57 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {SearchResultEvent} from './events';
+import {
+  SearchaliciousResultCtlMixin,
+  SearchaliciousResultsCtlInterface,
+} from './mixins/search-results-ctl';
+
+@customElement('searchalicious-count')
+export class SearchCount
+  extends SearchaliciousResultCtlMixin(LitElement)
+  implements SearchaliciousResultsCtlInterface
+{
+  static override styles = css`
+    :host {
+      display: block;
+      padding: 5px;
+      color: white;
+    }
+  `;
+
+  // the last number of results found
+  @state()
+  nbResults = 0;
+
+  // HTML to display before the search is launched
+  beforeSearch = html``;
+
+  // HTML to display when there are no results
+  noResults = html`<div>No results found</div>`;
+
+  /**
+   * Render the component
+   */
+  override render() {
+    if (this.nbResults > 0) {
+      return this.nbResults + ' results found';
+    } else if (this.searchLaunched) {
+      return html`<slot name="no-results">${this.noResults}</slot>`;
+    } else {
+      return html`<slot name="before-search">${this.beforeSearch}</slot>`;
+    }
+  }
+
+  /**
+   * Handle the search result event
+   */
+  override handleResults(event: SearchResultEvent) {
+    this.nbResults = event.detail.count; // it's reactive so it will trigger a render
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'searchalicious-count': SearchCount;
+  }
+}