From 64b89aa5074132b4ff1b5d0aec2796469abf828d Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 18 Mar 2020 16:43:52 +0100
Subject: [PATCH] wip #3505 @4

---
 app/Providers/AppServiceProvider.php          |  1 +
 package.json                                  |  2 +-
 resources/js/app.js                           | 13 +++++
 resources/js/components/CartAdd.vue           | 47 -------------------
 resources/js/components/ProductsFilters.vue   | 11 +++--
 resources/views/components/cart-add.blade.php | 10 ++++
 .../views/pages/product-detail.blade.php      | 12 ++---
 .../views/partials/product-link.blade.php     |  7 +--
 8 files changed, 35 insertions(+), 68 deletions(-)
 delete mode 100644 resources/js/components/CartAdd.vue
 create mode 100644 resources/views/components/cart-add.blade.php

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index da285a9..0c9d881 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -54,6 +54,7 @@ class AppServiceProvider extends ServiceProvider
             BladeX::component('components.map-link'); // <map-link address="..."> ... </map-link>
             BladeX::component('components.phone-link'); // <phone-link number="012345"> ... </phone-link>
             BladeX::component('components.text-block'); // <text-block> ... </text-block>
+            BladeX::component('components.cart-add')->tag('cart-add'); // <cart-add id="1234"> ... </cart-add>
         } catch (\Exception $e) {
 
         }
diff --git a/package.json b/package.json
index ed72d3d..c93b589 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
         "modernizr-webpack-plugin": "^1.0.7",
         "polyfill-array-includes": "^2.0.0",
         "popper.js": "^1.12",
-        "portal-vue": "^2.1.5",
+        "portal-vue": "^2.1.7",
         "resolve-url-loader": "^2.3.1",
         "rupture": "^0.7.1",
         "stylus": "github:acidjazz/stylus#dev",
diff --git a/resources/js/app.js b/resources/js/app.js
index 4158d84..8bad322 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -8,6 +8,7 @@ require('./bootstrap');
 require('./menu');
 require('../../vendor/cubist/cms-back/src/public/emailobfuscator/emailobfuscator');
 require('element-closest');
+window.$ = require('cash-dom');
 
 // Polyfill CSS Vars for older browsers
 // This is only partly useful because we need to update CSS variables
@@ -179,3 +180,15 @@ function checkScroll() {
 }
 
 checkScroll();
+
+$(document).on('click', 'button.cart-add', function () {
+    $(this).addClass('btn-no-hover').addClass('bg-navy');
+    $(this).find('.add').addClass('opacity-0');
+    $(this).find('.added').show();
+    var id = parseInt($(this).attr('data-product-id'));
+    eventBus.$emit('add-item', {
+        id: id,
+        quantity: 1,
+    });
+});
+
diff --git a/resources/js/components/CartAdd.vue b/resources/js/components/CartAdd.vue
deleted file mode 100644
index 140e893..0000000
--- a/resources/js/components/CartAdd.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <button class="btn" @click="addToCart" :class="{'btn-no-hover bg-navy' : isAdded }" :disabled="isAdded">
-        <span class="btn-text relative">
-            <span :class="{'opacity-0': isAdded}">
-                <slot></slot>
-            </span>
-            <span class="absolute top-0 left-0 w-full h-full flex items-center justify-center" v-if="isAdded">
-                <slot name="success-message"></slot>
-            </span>
-        </span>
-    </button>
-</template>
-
-<script>
-
-    export default {
-        name: "CartAdd",
-
-        props: {
-            productId: {
-                type: Number,
-                required: true,
-            }
-        },
-
-        data() {
-            return {
-                isAdded: false,
-            };
-        },
-
-        methods: {
-            addToCart() {
-                console.warn(':)');
-                eventBus.$emit('add-item', {
-                    id: this.productId,
-                    quantity: 1,
-                });
-                this.isAdded = true;
-            }
-        }
-    }
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index 334d42a..9d5f48a 100644
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -106,7 +106,7 @@
             <!-- Product Grid -->
             <div class="grid grid-cols-auto grid-gap-lg products-grid mt-6 sm:mt-2">
                 <template v-for="product in products" v-if="productVisible(product.id)">
-                    <div v-html="product.html"></div>
+                    <div v-html="product.html" @click="productLoaded(product.id)"></div>
                 </template>
             </div>
 
@@ -125,14 +125,12 @@
     import 'ie-array-find-polyfill'
     import 'es7-object-polyfill'
     import VueSlider from 'vue-slider-component' // See vue-slider.styl for CSS
-    import CartAdd from "./CartAdd";
 
 
     export default {
 
         components: {
-            VueSlider,
-            CartAdd
+            VueSlider
         },
 
         props: {
@@ -254,7 +252,6 @@
                 if (child.tag) { // Ensure it's a tag and not an empty text element
                     let product = child.elm;
                     let ID = parseInt(product.dataset.productId);
-
                     this.products.push({id: ID, html: product.outerHTML});
                 }
             });
@@ -312,6 +309,10 @@
                 return Object.values(this.matches.hits).includes(id)
             },
 
+            productLoaded(id) {
+                console.log(id + ' loaded');
+            },
+
             removeFilter(filterID, optionID) {
                 let index = this.filters[filterID].indexOf(optionID);
 
diff --git a/resources/views/components/cart-add.blade.php b/resources/views/components/cart-add.blade.php
new file mode 100644
index 0000000..54fe378
--- /dev/null
+++ b/resources/views/components/cart-add.blade.php
@@ -0,0 +1,10 @@
+<button data-product-id="{{ $id }}" class="btn cart-add">
+        <span class="btn-text relative">
+            <span class="add">
+               {{ __('Ajouter à ma sélection') }}
+            </span>
+            <span class="added absolute top-0 left-0 w-full h-full flex items-center justify-ce hidden">
+                @svg('tick', 'w-4 mr-3 inline absolute left-0') <span class="relative" style="top:-15%">{{ __('Produit ajouté') }}</span>
+            </span>
+        </span>
+</button>
diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 75be0b8..1cc2c87 100644
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -47,15 +47,9 @@
 
 
                 @if(config('features.quote'))
-                    <cart-add :product-id="{{ $product->id }}" class="align-middle">
-                        {{ __('Ajouter à ma sélection') }}
-
-                        <template v-slot:success-message>
-                            @svg('tick', 'w-4 mr-3') {{ __('Produit ajouté') }}
-                        </template>
-                    </cart-add>
-
-                    <span data-tooltip="{{__('Ajoutez un ou plusieurs produits à votre sélection, ajustez les quantités et obtenez un devis.')}}"
+                    <cart-add :id="$product->id"></cart-add>
+                    <span
+                        data-tooltip="{{__('Ajoutez un ou plusieurs produits à votre sélection, ajustez les quantités et obtenez un devis.')}}"
                         class="font-display text-lg inline-block align-middle rounded-full border-grey-dark border-2 h-8 w-8 text-center ml-6">?</span>
                 @endif
 
diff --git a/resources/views/partials/product-link.blade.php b/resources/views/partials/product-link.blade.php
index cf17670..d717245 100644
--- a/resources/views/partials/product-link.blade.php
+++ b/resources/views/partials/product-link.blade.php
@@ -16,12 +16,7 @@
         </h3>
         <div class="product-highlights text-sm">
             @if(config('features.quote'))
-                <cart-add :product-id="{{ $product->id }}" class="align-middle">
-                    {{ __('Ajouter à ma sélection') }}
-                    <template v-slot:success-message>
-                        @svg('tick', 'w-4 mr-3') {{ __('Produit ajouté') }}
-                    </template>
-                </cart-add>
+                <cart-add :id="$product->id"></cart-add>
             @endif
         </div>
         <div class="links mt-4">
-- 
2.39.5