From 5954b345f40b8a7cf77756d452dff665d8ec72b7 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 12 Aug 2019 17:34:29 +0200
Subject: [PATCH] Cart and quote functionality. WIP #2769 @7

---
 app/Templates/Cart.php                    | 28 +++++++++++++++++++++++
 resources/js/app.js                       | 20 ++++++++++++----
 resources/js/components/Cart.vue          |  6 +----
 resources/js/components/CartItem.vue      |  8 +++----
 resources/styles/components/cart.styl     |  5 ++++
 resources/views/layouts/app.blade.php     |  4 ++--
 resources/views/pages/cart.blade.php      | 26 +++++++++++++++++++++
 resources/views/partials/cart.blade.php   |  2 +-
 resources/views/partials/form.blade.php   |  2 +-
 resources/views/partials/header.blade.php | 11 ++++++---
 tailwind.config.js                        |  1 +
 11 files changed, 92 insertions(+), 21 deletions(-)
 create mode 100644 app/Templates/Cart.php
 create mode 100644 resources/views/pages/cart.blade.php

diff --git a/app/Templates/Cart.php b/app/Templates/Cart.php
new file mode 100644
index 0000000..753a749
--- /dev/null
+++ b/app/Templates/Cart.php
@@ -0,0 +1,28 @@
+<?php
+
+
+namespace App\Templates;
+
+
+class Cart extends Base
+{
+    public function getName()
+    {
+        return 'Ma sélection';
+    }
+
+    public function init()
+    {
+        parent::init();
+
+        $this->removeField('intro');
+
+        $this->addField(['name'  => 'page_heading',
+                         'type'  => 'Text',
+                         'label' => 'Titre de la page',
+                         'tab'   => 'Contenus']);
+
+        // Enable form
+        $this->addForm();
+    }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 5b49d61..104b03a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -9,6 +9,7 @@ require('./bootstrap');
 require('./menu');
 
 window.Vue = require('vue');
+window.eventBus = new Vue();
 
 import PortalVue from 'portal-vue';
 Vue.use(PortalVue);
@@ -37,10 +38,22 @@ const app = new Vue({
       items: {}, // Populated from data attribute on root element so we can pass data from PHP
     },
 
-    beforeMount: function () {
+    beforeMount() {
       this.items = JSON.parse(this.$el.dataset.cartItems);
     },
 
+    mounted() {
+        eventBus.$on('update-item-quantity', update => {
+            const index = this.items.findIndex((item) => item.id == update.id);
+            this.items[index].quantity = update.quantity;
+        });
+
+        eventBus.$on('delete-item', id => {
+            const index = this.items.findIndex((item) => item.id == id);
+            this.items.splice(index, 1);
+        });
+    },
+
     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.
@@ -49,16 +62,13 @@ const app = new Vue({
     },
 
     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 6e3ff2e..81b6bf1 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" @update-item-quantity="updateItemQuantity"></cart-item>
+        <cart-item v-for="item in items" :key="item.id" :item="item"></cart-item>
     </div>
 </template>
 
@@ -22,10 +22,6 @@
         },
 
         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 2442586..d9e347b 100644
--- a/resources/js/components/CartItem.vue
+++ b/resources/js/components/CartItem.vue
@@ -9,11 +9,11 @@
                 <br>
                 {{ item.name }}
             </div>
-            <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between">
+            <div class="cart-quantity 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 @change="updateQuantity"></number-input>
             </div>
-            <a href="#" class="cart-delete-item text-red" @click.prevent="deleteItem">
+            <a href="#" class="cart-delete-item text-red block" @click.prevent="deleteItem">
                 Supprimer
             </a>
         </div>
@@ -38,14 +38,14 @@
 
         methods: {
             updateQuantity(newValue, oldValue) {
-                this.$emit('update-item-quantity', {
+                eventBus.$emit('update-item-quantity', {
                     id: this.item.id,
                     quantity: newValue,
                 });
             },
 
             deleteItem() {
-                this.$emit('deleteItem', this.item.id);
+                eventBus.$emit('delete-item', this.item.id);
             }
         }
     }
diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl
index a6966fe..24b7b02 100644
--- a/resources/styles/components/cart.styl
+++ b/resources/styles/components/cart.styl
@@ -50,3 +50,8 @@
     z-index: 15
     background-color: theme('colors.navy')
     opacity: 0.1
+
+// Main cart page view
+.cart-page
+  .cart-quantity
+    @apply bg-white inline-flex
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 2588ab2..1766fa3 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -16,9 +16,9 @@
     if (config('features.quote')) {
         //#### Generate temporary cart data
         $cart_items = [];
-        for ($i = 1; $i <= 6; $i++) {
+        for ($i = 0; $i < 6; $i++) {
             $cart_items[$i] = [
-                'id' => $i,
+                'id' => $i + 1,
                 'quantity' => rand(1, 15),
                 'name' => 'Modèle '. rand(1000, 1500),
                 'category' => 'Capteur de force',
diff --git a/resources/views/pages/cart.blade.php b/resources/views/pages/cart.blade.php
new file mode 100644
index 0000000..e17e213
--- /dev/null
+++ b/resources/views/pages/cart.blade.php
@@ -0,0 +1,26 @@
+@extends('layouts/app')
+
+@section('content')
+
+    <content class="pb-3v">
+        <text-block :title="$page->page_heading" />
+
+        {{-- Columns set to auto because cart will disappear when quote form is sent, leaving just the confirmation message. --}}
+        <grid cols="auto">
+
+            {{-- Nested divs to allow grey backgrounds of columns to match the height of their content instead of total height --}}
+            <div v-if="cartItemCount > 0">
+                <cart :items='items' class="cart-page bg-grey-100 p-1v"></cart>
+            </div>
+
+            <div>
+                <div class="bg-grey-100 p-1v">
+                    @form
+                </div>
+            </div>
+
+        </grid>
+
+    </content>
+
+@endsection
diff --git a/resources/views/partials/cart.blade.php b/resources/views/partials/cart.blade.php
index 164e5eb..236a6f3 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-title">{{ __('Ma sélection') }}</span>
 <span class="cart-header-icon" v-html="cartItemCount"></span>
diff --git a/resources/views/partials/form.blade.php b/resources/views/partials/form.blade.php
index cb01ad8..1628bed 100644
--- a/resources/views/partials/form.blade.php
+++ b/resources/views/partials/form.blade.php
@@ -5,7 +5,7 @@
     @endpush
 
 <div id="contact-form">
-    <div class="ajax-form flex flex-col">
+    <div class="ajax-form flex flex-col max-w-half">
         @if($page->get('form_intro'))
             <p class="form-info text-navy">{{$page->get('form_intro')}}</p>
         @endif
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 85b8b31..b4d5574 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -32,10 +32,15 @@
                     </a>
                 </div>
                 <div class="cart-header-popout-content text-navy font-body p-1v pb-0">
-                    <cart :items='items' @update-item-quantity="updateItemQuantity"></cart>
+                    <cart :items='items'></cart>
+                    <div v-if="cartItemCount == 0" class="pb-1v">
+                        {{ __("Vous n'avez encore rien sélectionné") }}
+                    </div>
                 </div>
-                <div class="cart-header-popout-footer bg-grey-100 p-1v">
-                    <link-button class="block text-center">Obtenir un devis</link-button>
+                <div class="cart-header-popout-footer bg-grey-100 p-1v" v-if="cartItemCount > 0">
+                    <link-button class="block text-center" :href="$nav->getHrefByName('cart')">
+                        {{ __('Obtenir un devis') }}
+                    </link-button>
                 </div>
             </div>
         @endif
diff --git a/tailwind.config.js b/tailwind.config.js
index e44e517..331b67a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,6 +36,7 @@ module.exports = {
                 'body': ['Muli', 'sans-serif'], // Main blocks of text
             },
             maxWidth: {
+                'half': '768px', // Half a full-width content area
                 'text': '480px' // Or 30rem?
             },
             padding: {
-- 
2.39.5