webpack implementation fix for hints not showing (#197)

* initial commit

* initial commit

* not fixed

* hot not fix

* basic webpack implementation

* implement webpack

* implement webpack

* added fixes and mobile support

* deleated package-lock.json

* Delete yarn.lock

* adding new lines and deleated public build

* Change input to symfony form row

* GHA fix

* GHA fix

* Gha fix build->encore

* Fix spec ImageTransformer

* Gha fix node version changed to 14.x

* scrutinizer node fix

* scrutinizer node fix

* scrutinizer node fix

Co-authored-by: kuba-end <[email protected]>
Co-authored-by: Tomasz Grochowski <[email protected]>

.github/workflows/build.yml

@@ -24,7 +24,7 @@ jobs:
                 php: ["8.0", "7.4"]
                 symfony: ["^4.4", "^5.2"]
                 sylius: ["~1.9.0", "~1.10.0"]
-                node: ["10.x"]
+                node: ["14.x"]
                 mysql: ["8.0"]
 
                 exclude:
@@ -157,7 +157,7 @@ jobs:
                 name: Prepare test application assets
                 run: |
                     (cd tests/Application && bin/console assets:install public -vvv)
-                    (cd tests/Application && yarn build)
+                    (cd tests/Application && yarn encore production)
 
             -
                 name: Prepare test application cache

.gitignore

@@ -9,3 +9,28 @@
 
 /behat.yml
 /phpspec.yml
+
+/vendor/
+/node_modules/
+package-lock.json
+
+/etc/build/*
+!/etc/build/.gitignore
+
+tests/Application/node_modules/
+
+tests/Application/var/
+!tests/Application/var/.gitkeep
+
+tests/Application/web/*
+!tests/Application/web/favicon.ico
+!tests/Application/web/app.php
+!tests/Application/web/app_dev.php
+!tests/Application/web/app_test.php
+
+/tests/Application/yarn.lock
+
+/composer.lock
+
+/etc/build/*
+!/etc/build/.gitkeep

composer.json

@@ -9,7 +9,9 @@
         "sylius/sylius": "~1.8.0 || ~1.9.0 || ~1.10.0",
         "friendsofsymfony/elastica-bundle": "^6.0",
         "symfony/property-access": "^4.4 || ^5.2",
-        "bitbag/coding-standard": "^1.0"
+        "bitbag/coding-standard": "^1.0",
+        "symfony/orm-pack": "^2.1",
+        "symfony/webpack-encore-bundle": "^1.13"
     },
     "require-dev": {
         "behat/behat": "^3.6.1",

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@bitbag/elasticsearch-plugin",
+  "description": "Elasticsearch plugin for Sylius.",
+  "repository": "https://github.com/BitBagCommerce/[...].git",
+  "license": "MIT",
+  "scripts": {
+    "dist": "yarn encore production --config-name bitbag-plugin-dist"
+  },
+  "dependencies": {
+    "node-sass": "7.0.1"
+  }
+}

spec/Transformer/Product/ImageTransformerSpec.php

@@ -34,7 +34,7 @@ function it_transforms_product_images_into_product_thumbnail(
         ImageInterface $productImage,
         FilterService $filterService
     ): void {
-        $product->getImagesByType('thumbnail')->willReturn(new ArrayCollection([$productImage->getWrappedObject()]));
+        $product->getImagesByType('main')->willReturn(new ArrayCollection([$productImage->getWrappedObject()]));
         $productImage->getPath()->willReturn('/path-to-image');
 
         $filterService

src/Form/Type/SearchBoxType.php

@@ -27,7 +27,10 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 SymfonySearchType::class,
                 [
                     'label' => false,
-                    'attr' => ['placeholder' => 'bitbag_sylius_elasticsearch_plugin.ui.search_box.query.placeholder'],
+                    'attr' => [
+                        'placeholder' => 'bitbag_sylius_elasticsearch_plugin.ui.search_box.query.placeholder',
+                        'class' => 'prompt app-quick-add-code-input',
+                    ],
                     'constraints' => [new NotBlank()],
                 ]
             )

src/Resources/assets/admin/entry.js

@@ -0,0 +1,2 @@
+import './scss/main.scss'
+import './js/'

src/Resources/assets/shop/entry.js

@@ -0,0 +1,2 @@
+import './scss/main.scss'
+import './js/'

src/Resources/assets/shop/js/elasticSearchAutocomplete.js

@@ -0,0 +1,133 @@
+export default class ElasticSearchAutocomplete {
+    constructor(
+        config = {},
+    ) {
+        this.config = config;
+        this.defaultConfig = {
+            searchFields: '.searchdiv',
+            baseAutocompleteVariantUrl: '[data-bb-elastic-url]',
+            searchInput: '.app-quick-add-code-input',
+            resultsTarget: '.results',
+            resultContainerClassesArray: ['result'],
+            resultImageClass: 'image',
+            resultContentClass: 'result__content',
+            resultPriceClass: 'result__price',
+            resultTitleClass: 'js-title',
+            resultDescriptionClass: 'result__description',
+            resultLinkClass: 'result__link',
+            resultCategoryClass: 'result__category',
+            resultImageClass: 'result__image',
+            resultContainerClass: 'result__container',
+        };
+        this.finalConfig = {...this.defaultConfig, ...config};
+        this.searchFieldsSelector = document.querySelector(this.finalConfig.searchFields);
+    }
+
+    init() {
+        if (this.config && typeof this.config !== 'object') {
+            throw new Error('BitBag - CreateConfirmationModal - given config is not valid - expected object');
+        }
+
+        this._debounce();        
+    }
+
+    _toggleModalVisibility(elements) {
+        document.addEventListener('variantsVisible', () => {
+            document.addEventListener('click', () => {
+                elements.forEach((element) => {
+                    element.innerHTML = '';
+                    element.style.display = 'none';
+                });
+            });
+        });
+    }
+
+    _modalTemplate(item, categoryStyle) {
+        const result = document.createElement('a');
+        result.classList.add(...this.finalConfig.resultContainerClassesArray, 'js-result');
+        result.innerHTML = `
+            <h3 class=${this.finalConfig.resultCategoryClass} style=${categoryStyle}>${item.taxon_name}</h3> 
+                <a href=${item.slug} class=${this.finalConfig.resultLinkClass}>
+                    <div class=${this.finalConfig.resultContainerClass}>
+                        <img class=${this.finalConfig.resultImageClass} src=${item.image}>
+                        <div class=${this.finalConfig.resultContentClass}>
+                            <div class=${this.finalConfig.resultTitleClass}>${item.name}</div>
+                            <div class=${this.finalConfig.resultPriceClass}>${item.price}</div>
+                        </div>
+                    </div>
+                </a> 
+        `;
+
+        return result;
+    }
+
+    _assignElements(entry, data) {
+        const currentResults = this.searchFieldsSelector.querySelector(this.finalConfig.resultsTarget);
+
+        currentResults.innerHTML = ''
+        currentResults.style = 'visibility: visible';
+
+        const allResults = document.querySelectorAll(this.finalConfig.resultsTarget);
+
+        if (data.items.length === 0) {
+            currentResults.innerHTML = '<center class="result">no matching results</center>';
+        }
+
+        data.items = data.items.sort((a,b) => {
+            if (b.taxon_name < a.taxon_name) return 1;
+            if (b.taxon_name > a.taxon_name) return -1;
+            return 0;
+        });
+
+        let tempTaxonName;
+        data.items.forEach((item) => {
+
+            let categoryStyle = "visibility: visible"
+            if (tempTaxonName == item.taxon_name) {
+                categoryStyle = "visibility: hidden";
+            }
+
+            tempTaxonName = item.taxon_name;
+            currentResults.appendChild(this._modalTemplate(item, categoryStyle));
+        });
+
+        currentResults.style.display = 'block';
+        this._toggleModalVisibility(allResults);
+
+        const customEvent = new CustomEvent('variantsVisible');
+        document.dispatchEvent(customEvent);
+    }
+
+    async _getProducts(entry) {
+        const variantUrl = document.querySelector(this.finalConfig.baseAutocompleteVariantUrl).dataset.bbElasticUrl;
+        const url = `${variantUrl}?query=${entry.value}`;
+
+        entry.parentNode.classList.add('loading');
+
+        try {
+            const response = await fetch(url);
+            const data = await response.json();
+
+            this._assignElements(entry, data);
+        } catch (error) {
+            console.error(error);
+        } finally {
+            entry.parentNode.classList.remove('loading');
+        }
+    }
+
+    _debounce() {
+        const codeInputs = document.querySelectorAll(this.finalConfig.searchInput);    
+        let timeout;
+
+        codeInputs.forEach((input) => {
+            input.addEventListener('input', () => {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    this._getProducts(input);
+                }, 400);
+            });
+        });
+    }
+
+}

src/Resources/assets/shop/js/index.js

@@ -0,0 +1 @@
+import './initAutocomleate';

src/Resources/assets/shop/js/initAutocomleate.js

@@ -0,0 +1,3 @@
+import ElasticSearchAutocomplete from './elasticSearchAutocomplete';
+
+new ElasticSearchAutocomplete().init();

src/Resources/assets/shop/scss/elasticSearchAutocomplete.scss

@@ -0,0 +1,92 @@
+.results {
+    margin-top: 0.5rem;
+    position: absolute;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    min-width: 100%;
+    width: 600px;
+    padding: 0 1rem 0 1rem;
+    background-color: white;
+    backdrop-filter: blur(1px);   
+    z-index: 16;
+    box-shadow: 0px 1px 2px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5;
+    visibility: hidden;
+    color: #050428;
+    max-height: 50vh;
+    overflow-x: auto;
+
+    @media (max-width: 767px) {
+        width: 300px;
+    }
+
+    .result {
+        padding: 1px;
+
+        &__category {
+            padding-top:  1rem;
+            color: #050428;
+        }
+
+        &__link {
+            padding-top: 1rem;
+
+            .result__container {
+                max-height: 400px;
+                box-shadow: 0px 1px 1px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5;
+                color: #050428;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                .result__image {
+                    max-width: 7rem;
+                    max-height: 7rem;
+                    width: 100%;
+                    padding: 0.5rem;
+                    object-fit: cover;
+
+                    @media (max-width: 767px){
+                        max-width: 6rem;
+                        max-height: 6rem;
+                    }
+                }
+
+                .result__content {
+                    display: flex;
+                    flex-direction: row;   
+                    justify-content: space-between;
+                    font-weight: bold;
+                    padding: 0.5rem 3.7rem 0 0;
+
+
+                    @media (max-width: 767px) {
+                        flex-direction: column;
+                        justify-content: space-evenly; 
+                        text-align: left;
+                        width: 100%;
+                        padding: 1rem;
+                    }
+
+                    .result__price {
+                        position: absolute;
+                        right: 1.5rem;
+
+                        @media (max-width: 767px) {
+                            position: relative;
+                            right: 0;
+                        }
+                    }
+                }
+
+                .result__description {
+                    padding: 10px;
+                }
+            }
+
+            .result__container:hover {
+                background-color: rgba(250, 250, 250, 0.952);
+            }
+        }
+    }
+}

src/Resources/assets/shop/scss/main.scss

@@ -0,0 +1,2 @@
+@import './elasticSearchAutocomplete.scss';
+

src/Resources/public/bitbag-elasticsearch-admin.css

@@ -0,0 +1 @@
+