From 8825e62b4efafbdcbdbd19c532048f2fd93d6269 Mon Sep 17 00:00:00 2001
From: Ben <36240171+benkyd@users.noreply.github.com>
Date: Sat, 23 Apr 2022 00:33:56 +0100
Subject: [PATCH] refine search

Former-commit-id: 0c98d8332b5cd756d60de41bfe3e6183258def78
---
 client/public/components/basket-popout.mjs   |  2 +-
 client/public/components/compact-listing.mjs | 14 +++++++---
 client/public/components/product-list.mjs    | 28 ++++++++++++++++++++
 client/public/components/storefront.mjs      |  2 +-
 client/public/search/index.html              |  3 ++-
 5 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/client/public/components/basket-popout.mjs b/client/public/components/basket-popout.mjs
index b46c4e8..b5d73e2 100644
--- a/client/public/components/basket-popout.mjs
+++ b/client/public/components/basket-popout.mjs
@@ -135,7 +135,7 @@ class BasketPopout extends Component {
                                 const item = this.state.items[key];
                                 return /* html */`
                                     <div class="popup-content-item">
-                                        <span class="popup-content-item-quantity">X${item.quantity}</span>
+                                        <span class="popup-content-item-quantity">x${item.quantity}</span>
                                         <super-compact-listing-component class="sc-listing" 
                                                                             id="${key.split('~')[0]}"
                                                                             type="${item.type}"
diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs
index 4d3a0f2..3b24b1b 100644
--- a/client/public/components/compact-listing.mjs
+++ b/client/public/components/compact-listing.mjs
@@ -8,7 +8,6 @@ class CompactProductListing extends Component {
     }
 
     OnMount() {
-        console.log(this.state);
         if (this.state.tags) {
             const tags = JSON.parse(this.state.tags);
             this.setState({
@@ -31,9 +30,11 @@ class CompactProductListing extends Component {
                     <div class="product-listing-info">
                         <div class="product-listing-name">{this.state.name} {this.state.id}</div>
                         </a>
-                        ${this.state.tags
-                            ? this.state.tags.map(tag => `<tag-component name="${tag}"></tag-component>`).join('') 
-                            : ''}
+                        <span class="product-listing-tags">
+                            ${this.state.tags
+                                ? this.state.tags.map(tag => `<tag-component name="${tag}"></tag-component>`).join('') 
+                                : ''}
+                        </span>
                         ${this.state.discount
                             ? `<span class="product-listing-price-full">£${parseFloat(this.state.price).toFixed(2)}</span><span class="product-listing-price-new">£${parseFloat(this.state.discount).toFixed(2)}</span>`
                             : `<span class="product-listing-price">£${parseFloat(this.state.price).toFixed(2)}</span>`}
@@ -85,6 +86,11 @@ class CompactProductListing extends Component {
                     text-decoration: underline;
                 }
 
+                .product-listing-tags {
+                    padding-top: 5px;
+                    padding-bottom: 5px;
+                }
+
                 .product-listing-price {
                     font-size: 1.1em;
                 }
diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs
index 23e75df..3fa8e47 100644
--- a/client/public/components/product-list.mjs
+++ b/client/public/components/product-list.mjs
@@ -12,8 +12,12 @@ class ProductList extends Component {
         const productsList = this.state.products || [];
         // concat the new products to the existing products
         const newProducts = productsList.concat(products.data);
+
+        const augmentable = this.state.augmentable === 'true';
+
         this.setState({
             ...this.getState,
+            augmentable,
             products: newProducts,
             page: products.page.page,
             per_page: products.page.per_page,
@@ -30,7 +34,30 @@ class ProductList extends Component {
         this.state.products = [];
     }
 
+    GenerateAugmentPanel(augmentable) {
+        if (!augmentable) {
+            return '';
+        }
+        return /* html */`
+            <div class="augment-panel">
+                <div class="augment-panel-header">
+                    <span class="augment-panel-header-text">Refine search results</span>
+                </div>
+                <div class="augment-panel-body">
+                    <div class="augment-panel-body-row">
+                        <span class="augment-panel-body-row-text">Weight</span>
+                        <span class="augment-panel-body-row-text">Tag</span>
+                        <span class="augment-panel-body-row-text"></span>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
     Render() {
+        const augmentPanel = this.GenerateAugmentPanel(this.state.augmentable);
+        console.log(augmentPanel);
+
         if (this.state.page * this.state.per_page >= this.state.total) {
             this.keepLoading = false;
             this.loadingBar = '';
@@ -51,6 +78,7 @@ class ProductList extends Component {
         return {
             template: /* html */`
                 <h2>{this.state.title}</h2>
+                ${augmentPanel}
                 <div class="product-list">
                     ${this.state.products.map(product => {
                         return `<compact-listing-component name="${product.name}"
diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs
index 32c7e2b..eff0ad7 100644
--- a/client/public/components/storefront.mjs
+++ b/client/public/components/storefront.mjs
@@ -22,7 +22,7 @@ class StoreFront extends Component {
                         <img class="carousel-image" src="res/technic.png" alt="">
                         <div class="carousel-caption">
                             <h1>Check out our LEGO® Technic range</h1>
-                            <a href="/search/?q=technic"><button>Show Technic Now</button></a>
+                            <a href="/search/?q=technic"><button>Shop Technic Now</button></a>
                         </div>
                     </div>
                     <div class="carousel-cell">
diff --git a/client/public/search/index.html b/client/public/search/index.html
index a6a61d2..3932878 100644
--- a/client/public/search/index.html
+++ b/client/public/search/index.html
@@ -47,7 +47,8 @@
             document.write(/* html */`
                 <product-list-component id="results"
                     title="Search Results for '${searchQuery}'"
-                    getroute="/api/search/${window.location.search}">
+                    getroute="/api/search/${window.location.search}"
+					augmentable="true">
                 </product-list-component>
             `);
         </script>