WIP

app/models/product-family.js

@@ -10,7 +10,9 @@ export default class ProductFamilyModel extends Model {
   @belongsTo('product-family', { inverse: 'subFamilies' }) productFamily;
   @hasMany('product-family', { inverse: 'productFamily' }) subFamilies;
 
-  @hasMany('product') products;
+  // @hasMany('product') products;
+  @hasMany('product', { inverse: 'mainFamily' }) productsWithMain;
+  @hasMany('product', { inverse: 'subFamily' }) productsWithSub;
 
   get productsByRank() {
     const rank = 'rankAmongFamily';

app/models/product.js

@@ -29,18 +29,34 @@ export default class ProductModel extends Model {
   @attr('string') avatarCaption;
   @attr('string') avatarVariations;
 
-  @belongsTo('product-family') productFamily;
+  // @belongsTo('product-family') productFamily;
+  @belongsTo('product-family') mainFamily;
+  @belongsTo('product-family') subFamily;
 
-  get family() {
-    return this.productFamily;
-  }
+  get familyLabel() {
+    if (this.subFamily) {
+      return this.subFamily.get('nameSingle');
+    }
+
+    if (this.mainFamily) {
+      return this.mainFamily.get('nameSingle');
+    }
+
+    console.warn(`${this.name} does not have sub nor main family`);
 
-  get mainFamily() {
-    return this.family.get('isMainFamily')
-      ? this.family
-      : this.family.get('productFamily');
+    return 'product';
   }
 
+  // get family() {
+  //   return this.productFamily;
+  // }
+
+  // get mainFamily() {
+  //   return this.family.get('isMainFamily')
+  //     ? this.family
+  //     : this.family.get('productFamily');
+  // }
+
   @belongsTo('product', { inverse: 'inferiorProducts' }) superiorProduct;
   @hasMany('product', { inverse: 'superiorProduct' }) inferiorProducts;
 
@@ -123,16 +139,30 @@ export default class ProductModel extends Model {
     return this.status === 'discontinued';
   }
 
+  // HACK: the backend should not be serving this... However, when side loading
+  // records with includes the permanent filters are ignored (for now)
+  get isOffline() {
+    return this.status === 'offline';
+  }
+
+  get isFeatured() {
+    return this.isNew || this.isPopular || this.isRecommended;
+  }
+
+  get isHidden() {
+    return this.isOutdated || this.discountinued;
+  }
+
   get testResultsArray() {
     return JSON.parse(this.testResults);
   }
 
-  get familyLabel() {
-    const family = this.family.get('nameSingle');
-    const label = this.label;
+  // get familyLabel() {
+  //   const family = this.family.get('nameSingle');
+  //   const label = this.label;
 
-    return label ? label : family;
-  }
+  //   return label ? label : family;
+  // }
 
   get compliesWithIPC() {
     return (
@@ -141,4 +171,15 @@ export default class ProductModel extends Model {
       this.compliesWithIPCJSTD005
     );
   }
+
+  get statusRank() {
+    return [
+      'new',
+      'popular',
+      'recommended',
+      'outdated',
+      'discontinued',
+      'offline'
+    ].indexOf(this.status);
+  }
 }

app/models/use.js

@@ -8,6 +8,10 @@ export default class UseModel extends Model {
   @attr('string') gist;
   @attr('number') rank;
 
+  get name() {
+    return this.text;
+  }
+
   @hasMany('product-use') productUses;
 
   get productsByRank() {
@@ -54,4 +58,8 @@ export default class UseModel extends Model {
   get forSlug() {
     return `for-${this.id}`;
   }
+
+  get improvedRank() {
+    return this.rank || '999';
+  }
 }

app/pods/application-loading/route.js

@@ -9,4 +9,11 @@ export default class ApplicationLoadingRoute extends BaseRoute {
       showLoading: true
     });
   }
+
+  deactivate() {
+    super.activate();
+    this.page.update({
+      showLoading: false
+    });
+  }
 }

app/pods/application-loading/template.hbs

@@ -1,5 +1,4 @@
 <HeadLayout />
 <Page>
   {{outlet}}
-</Page>
-<Modals />
+</Page>

app/pods/application/route.js

@@ -2,15 +2,6 @@ import BaseRoute from 'interflux/pods/base/route';
 import { hash } from 'rsvp';
 
 export default class ApplicationRoute extends BaseRoute {
-  activate() {
-    super.activate();
-    this.page.update({
-      id: 'application',
-      title: 'Loading ...',
-      showLoading: true
-    });
-  }
-
   model() {
     const language = this.translation.language;
 
@@ -34,12 +25,4 @@ export default class ApplicationRoute extends BaseRoute {
 
     return hash(payload);
   }
-
-  afterModel() {
-    super.activate();
-
-    this.page.update({
-      showLoading: true
-    });
-  }
 }

app/pods/components/button/content/component.js

@@ -24,19 +24,21 @@ export default class ButtonContentComponent extends Component {
       'email',
       'expand',
       'flask',
+      'grid',
       'hamburger',
       'lightbulb',
+      'list',
       'microchip',
       'people',
       'play',
       'podcast',
+      'search',
       'share',
       'star',
       'street-view',
       'translation',
       'truck',
-      'user',
-      'search'
+      'user'
     ].includes(this.args.icon);
 
     if (!valid) {

app/pods/components/button/group/style.scss

@@ -0,0 +1,32 @@
+.button-group {
+  display: flex;
+  &.stretch-evenly {
+    a,
+    button {
+      &.button {
+        flex: 1;
+      }
+    }
+  }
+  a,
+  button {
+    &.button {
+      &.medium.grey-border {
+        position: relative;
+        margin-right: -1px;
+        border-radius: 0;
+        &:first-child {
+          border-radius: 3px 0 0 3px;
+        }
+        &:last-child {
+          border-radius: 0 3px 3px 0;
+          margin-right: 0;
+        }
+        &:hover,
+        &:focus {
+          z-index: 1;
+        }
+      }
+    }
+  }
+}

app/pods/components/button/group/template.hbs

@@ -0,0 +1,3 @@
+<div class='button-group {{@theme}}'>
+  {{yield}}
+</div>

app/pods/components/button/style.scss

@@ -99,24 +99,28 @@
     @include widescreen {
       font-size: 16px;
       line-height: 32px;
+      height: 32px;
       border-radius: 3px;
       padding: 0 13px;
     }
     @include desktop {
       font-size: vw(16px);
       line-height: vw(32px);
+      height: vw(32px);
       border-radius: vw(3px);
       padding: 0 vw(13px);
     }
     @include tablet {
       font-size: vw-tablet(16px);
       line-height: vw-tablet(32px);
+      height: vw-tablet(32px);
       border-radius: vw-tablet(3px);
       padding: 0 vw-tablet(13px);
     }
     @include mobile {
       font-size: vw-mobile(16px);
       line-height: vw-mobile(40px);
+      height: vw-mobile(40px);
       border-radius: vw-mobile(3px);
       padding: 0 vw-mobile(15px);
     }
@@ -332,7 +336,7 @@
       color: $grey-6;
       svg {
         [fill] {
-          fill: $grey-2;
+          fill: $grey-5;
         }
       }
     }
@@ -374,6 +378,7 @@
       &:focus {
         color: $blue-0;
         border-color: $blue-0;
+        box-shadow: inset 0 0 0 1px $blue-0;
         svg {
           [fill] {
             fill: $blue-0;

app/pods/components/delete-product-card/component.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ProductCardComponent extends Component {
+  @service media;
+
+  get features() {
+    const { product } = this.args;
+
+    const uses = product.productUsesSorted
+      ? product.productUsesSorted.filterBy('showOnProductList').mapBy('use')
+      : [];
+
+    const qualities = product.productQualitiesSorted
+      ? product.productQualitiesSorted
+          .filterBy('showOnProductList')
+          .mapBy('quality')
+      : [];
+
+    return [...uses, ...qualities];
+  }
+}