Add product search route and logic

interflux-electronics · Sep 10, 2023 · d5f5293 · d5f5293
1 parent ab0682f
commit d5f5293
Show file tree

Hide file tree

Showing 19 changed files with 247 additions and 57 deletions.
diff --git a/app/helpers/mark.js b/app/helpers/mark.js
@@ -0,0 +1,31 @@
+import { helper } from '@ember/component/helper';
+import { htmlSafe } from '@ember/template';
+
+// <p>{{mark this.search.value label}}</p>
+
+export default helper(function mark(params) {
+  let phrase = params[1];
+
+  if (!phrase) {
+    return '';
+  }
+
+  let wordToMark = params[0];
+
+  if (!wordToMark) {
+    return phrase;
+  }
+
+  // Akward things happen when search ends with a space
+  wordToMark = wordToMark.trim();
+
+  if (typeof phrase === 'object' && phrase.string) {
+    phrase = phrase.string;
+  }
+
+  const regex = new RegExp(wordToMark, 'gi');
+
+  phrase = phrase.replace(regex, '<mark>$&</mark>');
+
+  return htmlSafe(phrase);
+});
diff --git a/app/helpers/span-each-word.js b/app/helpers/span-each-word.js
@@ -3,6 +3,12 @@ import { htmlSafe } from '@ember/template';
 
 export function spanEachWord(params) {
   const phrase = params[0];
+
+  if (!phrase) {
+    console.warn('no phrase');
+    return;
+  }
+
   const words = phrase.split(' ');
 
   const html = `<span>${words.join('</span><span>&nbsp;</span><span>')}</span>`;

diff --git a/app/pods/components/product-list/featured/component.js b/app/pods/components/product-list/featured/component.js
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
-export default class ProductGroupPageFeaturedComponent extends Component {
+export default class ProductListFeaturedComponent extends Component {
   @tracked show = false;
 
   @action

diff --git a/app/pods/components/product-list/hidden/component.js b/app/pods/components/product-list/hidden/component.js
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
-export default class ProductGroupPageHiddenComponent extends Component {
+export default class ProductListHiddenComponent extends Component {
   @tracked expanded = false;
 
   @action

diff --git a/app/pods/components/product-list/row/component.js b/app/pods/components/product-list/row/component.js
@@ -1,9 +1,34 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 
-export default class ProductGroupPageProductComponent extends Component {
+export default class ProductListRowomponent extends Component {
+  // @arg product
+  // @arg search
+
   @service media;
 
+  get classes() {
+    return [
+      'row',
+      this.args.product.get('status'),
+      this.args.layout,
+      this.searchMatch ? 'match' : 'hide'
+    ].join(' ');
+  }
+
+  get searchMatch() {
+    if (!this.args.search) {
+      return true;
+    }
+
+    const search = this.args.search.toLowerCase();
+    const product = this.args.product;
+    const name = product.name.toLowerCase();
+    const pitch = product.pitch ? product.pitch.toLowerCase() : '';
+
+    return name.includes(search) || pitch.includes(search);
+  }
+
   get features() {
     const { product } = this.args;
 

diff --git a/app/pods/components/product-list/row/style.scss b/app/pods/components/product-list/row/style.scss
@@ -155,6 +155,21 @@
           padding: 1.2vw 4vw 0.6vw;
           border-radius: 0.5vw;
         }
+        mark {
+          background-color: transparent;
+          color: white;
+          display: inline-block;
+          position: relative;
+          &:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 2px; // TODO: make responsive
+            height: 3px; // TODO: make responsive
+            width: 100%;
+            background-color: yellow;
+          }
+        }
       }
       .tags {
         display: flex;
@@ -207,7 +222,7 @@
             font-family: $semibold;
           }
           &.grey {
-            background: $grey-3;
+            background: $grey-5;
           }
           &.red {
             background: $red-1;
@@ -271,6 +286,10 @@
               height: calc(5vw * 1.8);
             }
           }
+          mark {
+            background-color: yellow;
+            color: $grey-7;
+          }
         }
       }
     }

diff --git a/app/pods/components/product-list/row/template.hbs b/app/pods/components/product-list/row/template.hbs
@@ -1,4 +1,4 @@
-<li id={{@product.id}} class='row {{@product.status}} {{@layout}}'>
+<li id={{@product.id}} class={{this.classes}}>
   <a href={{href-to 'product' @product.id}}>
     <div class='left'>
       {{#if @product.avatarPath}}
@@ -33,7 +33,7 @@
     </div>
 
     <div class='center'>
-      <h3>{{@product.name}}</h3>
+      <h3>{{mark @search @product.name}}</h3>
       <div class='tags'>
         {{#if @product.familyLabel}}
           <h4 class='blue'>
@@ -72,7 +72,7 @@
       </div>
       {{#if @product.pitch}}
         <div class='pitch'>
-          {{markdown (t @product.pitch 'product.2' @product.id)}}
+          {{mark @search (markdown (t @product.pitch 'product.2' @product.id))}}
         </div>
       {{/if}}
       {{!-- {{#if (and this.features this.media.isDesktopWidescreen)}}

diff --git a/app/pods/components/product-list/search/component.js b/app/pods/components/product-list/search/component.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+
+export default class ProductListSearchComponent extends Component {
+  // @arg products
+  // @arg search
+
+  get products() {
+    return this.args.products.sortBy('statusRank', 'name');
+  }
+}
diff --git a/app/pods/components/product-list/search/template.hbs b/app/pods/components/product-list/search/template.hbs
@@ -0,0 +1,5 @@
+<ol class='product-search'>
+  {{#each this.products as |product|}}
+    <ProductList::Row @product={{product}} @search={{@search}} />
+  {{/each}}
+</ol>
diff --git a/app/pods/components/product-list/template.hbs b/app/pods/components/product-list/template.hbs
@@ -3,14 +3,20 @@
   {{#if @loading}}
     <Shimmer::ProductRows::Desktop />
   {{else}}
-    {{#each this.groups as |group|}}
-      <section>
-        {{#if group.title}}
-          <h2>{{group.title}}</h2>
-        {{/if}}
-        <ProductList::Featured @products={{group.featured}} />
-        <ProductList::Hidden @products={{group.hidden}} />
-      </section>
-    {{/each}}
+    {{#if @search}}
+      <ProductList::Search @products={{@products}} @search={{@search}} />
+    {{else}}
+      {{#each this.groups as |group|}}
+        <section>
+          {{#if group.title}}
+            <h2>{{group.title}}</h2>
+          {{/if}}
+
+          <ProductList::Featured @products={{group.featured}} />
+          <ProductList::Hidden @products={{group.hidden}} />
+        </section>
+      {{/each}}
+    {{/if}}
+
   {{/if}}
 </div>
diff --git a/app/pods/products/controller.js b/app/pods/products/controller.js
@@ -1,34 +1,38 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ProductsController extends Controller {
   @service page;
   @service router;
 
-  // VIEW
+  // SEARCH BY NAME
 
-  // TODO: build
-  // @tracked layout = 'list'; // list, grid
+  queryParams = ['search'];
 
-  // TODO: review
-  get stickyMenu() {
-    return this.router.currentRouteName !== 'products.index';
+  @tracked search = null;
+
+  @action
+  onKeyUp(event) {
+    const input = event.target;
+    this.search = input.value;
   }
 
   // FAMILY
 
   @tracked selectedFamilyId; // set by child routes
-  @tracked mainFamiliesSubset; // set by child routes
+  @tracked familiesSubset; // set by child routes
+  @tracked familiesLoading;
 
   get allMainFamilies() {
     return this.model.families.filterBy('isMainFamily');
   }
 
   get familyOptions() {
     const families =
-      this.selectedUseId && this.mainFamiliesSubset
-        ? this.mainFamiliesSubset
+      this.selectedUseId && this.familiesSubset
+        ? this.familiesSubset
         : this.allMainFamilies;
 
     return families.sortBy('rank').map((family) => {
@@ -66,8 +70,9 @@ export default class ProductsController extends Controller {
 
   // USE
 
-  @tracked selectedUseId; // set by child routes
-  @tracked usesSubset; // set by child routes
+  @tracked selectedUseId;
+  @tracked usesSubset;
+  @tracked usesLoading;
 
   get allUses() {
     return this.model.uses;
@@ -109,4 +114,14 @@ export default class ProductsController extends Controller {
   get selectedUseOption() {
     return this.useOptions.find((option) => option.selected);
   }
+
+  // VIEW
+
+  // TODO: build
+  // @tracked layout = 'list'; // list, grid
+
+  // TODO: review
+  get stickyMenu() {
+    return this.router.currentRouteName !== 'products.index' || this.search;
+  }
 }
diff --git a/app/pods/products/family/controller.js b/app/pods/products/family/controller.js
@@ -19,7 +19,7 @@ export default class ProductsFamilyController extends Controller {
       return 'alloy';
     }
 
-    if (id === 'auxiliaries') {
+    if (id === 'fluxing-systems') {
       return 'none';
     }
 

diff --git a/app/pods/products/family/route.js b/app/pods/products/family/route.js
@@ -10,6 +10,8 @@ export default class ProductsFamilyRoute extends BaseRoute {
     const family = this.store.peekRecord('product-family', slug);
 
     this.controllerFor('products').selectedFamilyId = slug;
+    this.controllerFor('products').usesSubset = null;
+    this.controllerFor('products').usesLoading = true;
     this.controllerFor('products.familyLoading').title = family
       ? family.get('label')
       : 'Loading';
@@ -30,15 +32,26 @@ export default class ProductsFamilyRoute extends BaseRoute {
     const family = model.products.mapBy('mainFamily').uniqBy('id')[0];
     const uses = model.products.mapBy('uses').flat().uniqBy('id');
 
-    this.controllerFor('products').families = [family];
     this.controllerFor('products').selectedFamilyId = family.get('id');
     this.controllerFor('products').usesSubset = uses;
+    this.controllerFor('products').usesLoading = false;
     this.controllerFor('products.family').family = family;
+
+    // TODO
+    // this.headData.update(this.seo.products);
+    this.page.update({
+      id: 'products-family',
+      mainClasses: 'products'
+      // title: 'Products', // TODO: translate
+      // backRoute: 'index',
+      // crumbs: [{ label: 'Interflux', route: 'index' }, { label: 'Products' }]
+    });
   }
 
   @action
   willTransition() {
     this.controllerFor('products').selectedFamilyId = null;
-    this.controllerFor('products').mainFamiliesSubset = null;
+    this.controllerFor('products').usesSubset = null;
+    this.controllerFor('products').usesLoading = false;
   }
 }
diff --git a/app/pods/products/index/route.js b/app/pods/products/index/route.js
@@ -5,17 +5,20 @@ export default class ProductsIndexRoute extends BaseRoute {
   beforeModel() {
     super.activate();
 
-    this.controllerFor('products').selectedFamily = null;
-    this.controllerFor('products').selectedUse = null;
+    this.controllerFor('products').selectedFamilyId = null;
+    this.controllerFor('products').selectedUseId = null;
+    this.controllerFor('products').usesLoading = false;
+    this.controllerFor('products').familiesLoading = false;
     this.controllerFor('products.indexLoading').title = 'All products';
 
+    // TODO
     this.headData.update(this.seo.products);
     this.page.update({
       id: 'products-index',
-      title: 'Products', // TODO: translate
-      mainClasses: 'products',
-      backRoute: 'index',
-      crumbs: [{ label: 'Interflux', route: 'index' }, { label: 'Products' }]
+      mainClasses: 'products'
+      // title: 'Products', // TODO: translate
+      // backRoute: 'index',
+      // crumbs: [{ label: 'Interflux', route: 'index' }, { label: 'Products' }]
     });
   }
 

diff --git a/app/pods/products/mix/route.js b/app/pods/products/mix/route.js
@@ -14,11 +14,21 @@ export default class ProductsMixRoute extends BaseRoute {
 
     this.controllerFor('products').selectedFamilyId = familyId;
     this.controllerFor('products').selectedUseId = useId;
-    this.controllerFor('products').mainFamiliesSubset = null;
+    this.controllerFor('products').familiesSubset = null;
     this.controllerFor('products').usesSubset = null;
     this.controllerFor('products.mixLoading').title = family
       ? `${family.get('label')} for ${use.get('name')}`
       : 'Loading';
+
+    // TODO
+    // this.headData.update(this.seo.products);
+    this.page.update({
+      id: 'products-mix',
+      mainClasses: 'products'
+      // title: 'Products', // TODO: translate
+      // backRoute: 'index',
+      // crumbs: [{ label: 'Interflux', route: 'index' }, { label: 'Products' }]
+    });
   }
 
   model(params) {