From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 2 Jul 2019 18:26:07 +0000 (+0200)
Subject: WIP #2738 @6
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=0523a94ab3a1b9c5d74b4700d6515dac19785c81;p=pmi.git

WIP #2738 @6
---

diff --git a/resources/js/app.js b/resources/js/app.js
index d2f8884..240ac9d 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -33,14 +33,32 @@ const app = new Vue({
     el: '#app',
 
     data: {
+      items: {}, // Populated from data attribute on root element so we can pass data from PHP
+    },
 
+    beforeMount: function () {
+      this.items = JSON.parse(this.$el.dataset.cartItems);
+    },
+
+    computed: {
+      cartItemCount() {
+        // Todo: See if this should count just number of items or make a sum of all quantities? What is more useful? The sum of quantities can be found using map/reduce functions but this needs to be adapted for the object structure using Object.keys as the source.
+        return Object.keys(this.items).length;
+      }
     },
 
     methods: {
       // Todo: find a better way to structure this with Vue
       openCart() {
         document.body.classList.add('cart-open');
+      },
+      closeCart() {
+        document.body.classList.remove('cart-open');
+      },
+      updateItemQuantity(update) {
+        this.items[update.id].quantity = update.quantity;
       }
+
     }
 
 
diff --git a/resources/js/components/Cart.vue b/resources/js/components/Cart.vue
index c3f5151..6e3ff2e 100644
--- a/resources/js/components/Cart.vue
+++ b/resources/js/components/Cart.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cart-wrapper">
-        <cart-item v-for="item in items" :key="item.id" :item="item"></cart-item>
+        <cart-item v-for="item in items" :key="item.id" :item="item" @update-item-quantity="updateItemQuantity"></cart-item>
     </div>
 </template>
 
@@ -16,8 +16,16 @@
 
         props: {
             items: {
-                type: Array
+                type: Object,
+                required: true,
             }
+        },
+
+        methods: {
+            // Todo: consider event bus to avoid having to pass this up through all the levels?
+            updateItemQuantity(update) {
+                this.$emit('update-item-quantity', update)
+            },
         }
     }
 </script>
diff --git a/resources/js/components/CartItem.vue b/resources/js/components/CartItem.vue
index 65c5081..2442586 100644
--- a/resources/js/components/CartItem.vue
+++ b/resources/js/components/CartItem.vue
@@ -11,9 +11,9 @@
             </div>
             <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between">
                 <span class="mr-2">Quantité</span>
-                <number-input :value="item.quantity" :min="1" inline center controls></number-input>
+                <number-input :value="item.quantity" :min="1" inline center controls @change="updateQuantity"></number-input>
             </div>
-            <a href="#" class="cart-delete-item text-red">
+            <a href="#" class="cart-delete-item text-red" @click.prevent="deleteItem">
                 Supprimer
             </a>
         </div>
@@ -34,6 +34,19 @@
             item: {
                 type: Object
             }
+        },
+
+        methods: {
+            updateQuantity(newValue, oldValue) {
+                this.$emit('update-item-quantity', {
+                    id: this.item.id,
+                    quantity: newValue,
+                });
+            },
+
+            deleteItem() {
+                this.$emit('deleteItem', this.item.id);
+            }
         }
     }
 </script>
diff --git a/resources/styles/components/footer.styl b/resources/styles/components/footer.styl
index e50103b..6dc3d8e 100644
--- a/resources/styles/components/footer.styl
+++ b/resources/styles/components/footer.styl
@@ -113,14 +113,15 @@ $footer-logo-height = 70px // Used so we can align headings in other columns wit
     &-flag
       @apply inline-block mr-2
 
-    &-list
+    &-list-wrapper
       @apply absolute w-full -mb-1
       left: 0
       bottom: 100%
-      opacity: 0
-      transform: translateY(1.5em)
-      transition: all 0.1s ease-out
+      overflow: hidden // Child element is translated out of the visible area to give precise clipping
 
+    &-list
+      transform: translateY(100%)
+      transition: transform 0.2s ease-out
 
       li:first-child a
         @apply rounded-t
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 8fd674c..bc2e4c1 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -11,7 +11,22 @@
 <body class="font-body text-grey-dark">
 @include('cubist::body.begin')
 
-<div id="app" class="flex flex-col min-h-screen">
+
+@php
+    //#### Generate temporary cart data
+    $cart_items = [];
+    for ($i = 1; $i <= 6; $i++) {
+        $cart_items[$i] = [
+            'id' => $i,
+            'quantity' => rand(1, 15),
+            'name' => 'Modèle '. rand(1000, 1500),
+            'category' => 'Capteur de force',
+            'image' => '/storage/products/'. rand(1,6) .'.png',
+        ];
+    }
+@endphp
+
+<div id="app" class="flex flex-col min-h-screen" data-cart-items='@json($cart_items)'>
 
     @include('partials.header')
 
@@ -30,9 +45,10 @@
     </main>
 
     @include('partials.footer')
+
+    <div class="body-overlay" @click="closeCart"></div>
 </div>
 
-<div class="body-overlay"></div>
 
 <script src="{{ mix('/js/app.js') }}"></script>
 
diff --git a/resources/views/partials/cart.blade.php b/resources/views/partials/cart.blade.php
index 1292c2a..164e5eb 100644
--- a/resources/views/partials/cart.blade.php
+++ b/resources/views/partials/cart.blade.php
@@ -1,2 +1,2 @@
 <span class="cart-header-title">My Selection</span>
-<span class="cart-header-icon">0</span>
+<span class="cart-header-icon" v-html="cartItemCount"></span>
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index 4ceb0aa..68c8e14 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -78,10 +78,12 @@
                 <span class="footer-locales-current pr-12">
                     <img src="{{ asset('images/locale-fr.svg') }}" alt="Français" class="footer-locales-flag">Français
                 </span>
-                <ul class="footer-locales-list">
-                    <li><a href="/de"><img src="{{ asset('images/locale-de.svg') }}" alt="Deutsch" class="footer-locales-flag">Deutsche</a></li>
-                    <li><a href="/en"><img src="{{ asset('images/locale-en.svg') }}" alt="English" class="footer-locales-flag">English</a></li>
-                </ul>
+                <div class="footer-locales-list-wrapper">
+                    <ul class="footer-locales-list">
+                        <li><a href="/de"><img src="{{ asset('images/locale-de.svg') }}" alt="Deutsch" class="footer-locales-flag">Deutsche</a></li>
+                        <li><a href="/en"><img src="{{ asset('images/locale-en.svg') }}" alt="English" class="footer-locales-flag">English</a></li>
+                    </ul>
+                </div>
             </div>
 
             {{-- Footer Nav Links --}}
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index e88df29..1aa9b69 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -14,8 +14,6 @@
             <portal-target name="nav-search-toggle" slim></portal-target>
         </div>
 
-        {{-- TODO: Make a Vue component for the cart + popout using portals and slots (see Search.vue) --}}
-
         <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue" @click="openCart">
             @include('partials.cart')
         </div>
@@ -26,28 +24,12 @@
                     {{ __('My Selection') }}
                 </span>
 
-                <a href="#" class="close-cart-popout text-white hover:text-blue">
+                <a href="#" class="close-cart-popout text-white hover:text-blue" @click.prevent="closeCart">
                     @svg('icon-close-thin')
                 </a>
             </div>
             <div class="cart-header-popout-content text-navy font-body p-1v pb-0">
-
-                @php
-                    //#### Generate temporary data
-                    $cart_items = [];
-                    for ($i = 1; $i <= 6; $i++) {
-                        $cart_items[] = [
-                            'id' => $i,
-                            'quantity' => rand(1, 15),
-                            'name' => 'Modèle '. rand(1000, 1500),
-                            'category' => 'Capteur de force',
-                            'image' => '/storage/products/'. rand(1,6) .'.png',
-                        ];
-                    }
-                @endphp
-
-                <cart :items='@json($cart_items)'></cart>
-
+                <cart :items='items' @update-item-quantity="updateItemQuantity"></cart>
             </div>
             <div class="cart-header-popout-footer bg-grey-100 p-1v">
                 <link-button class="block text-center">Obtenir un devis</link-button>