#25-CTS Add layout, add vuex state, add a new route

frontend/src/components/Header.vue

@@ -21,11 +21,11 @@
         <a href="#" class="nav-item is-hidden-desktop is-hidden-tablet ">Home</a>
         <a href="#" class="nav-item is-hidden-desktop is-hidden-tablet ">Customize</a>
         <router-link :to="{ name: 'MyAccount', params: { customerId: 1 }}" class="nav-item is-hidden-desktop is-hidden-tablet ">About</router-link>
-        <a class="nav-item">
+        <router-link :to="{ name: 'Basket' }" class="nav-item">
           <span class="icon force-white">
             <i class="fa fa-shopping-cart"></i>
           </span>
-        </a>
+        </router-link>
       </div>
       <div class="nav-toggle" @click="toggleMenu">
         <span></span>

frontend/src/pages/Checkout/Basket.vue

@@ -0,0 +1,92 @@
+<template lang="html">
+  <div id="basket">
+    <div class="columns">
+      <div class="column is-9-desktop is-8-tablet">
+        <h1 class="title is-1 has-text-centered">
+          <span>Basket</span>
+          <span class="icon is-large">
+            <i class="fa fa-shopping-cart"></i>
+          </span>
+        </h1>
+
+        <!--  v-for="(basketArtcile, index) in basketArticles" -->
+        <div class="card">
+          <div class="card-content">
+            <a class="delete is-pulled-right is-large"></a>
+            <div class="columns">
+              <div class="column is-5">
+                <h3 class="title is-3"><u>Basic with custom "My custom 5"</u></h3>
+                <table>
+                  <tr>
+                    <td>Shoe model: basic</td>
+                  </tr>
+                  <tr>
+                    <td>Size: 40</td>
+                  </tr>
+                  <tr>
+                    <td>Address: Chemin des rue 27</td>
+                  </tr>
+                </table>
+                <img src="http://localhost:10010/shoes/model.png" alt="">
+              </div>
+              <div class="column">
+                <h3 class="title is-3">100 CHF</h3>
+                <span class="select is-small">
+                  <select>
+                    <option value="" disabled selected>Quantity</option>
+                    <option>1</option>
+                    <option>2</option>
+                  </select>
+                </span>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+      <div class="column is-3-desktop is-4-tablet summary">
+        <h2 class="title is-2">Summary</h2>
+        <div class="horizontal-separator"></div>
+        <p>Basic x 2</p>
+        <div class="horizontal-separator"></div>
+        <div>
+          <p class="is-pulled-left">Total</p>
+          <p class="is-pulled-right title is-2">200 CHF</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  mapGetters,
+  mapActions
+} from 'vuex'
+
+export default {
+  name: 'CTSBasket',
+  computed: mapGetters([
+
+  ]),
+  methods: mapActions([
+
+  ]),
+  created () {
+    
+  }
+}
+</script>
+
+<style lang="sass">
+  .summary
+    background-color: lightgrey
+  .horizontal-separator
+    width: 100%
+    height: 2px
+    border-radius: 100%
+    background-color: black
+    margin-bottom: 20px
+    margin-top: 20px
+</style>

frontend/src/router/index.js

@@ -11,6 +11,7 @@ import Register        from '@/pages/Auth/Register'
 import Customize       from '@/pages/Customize/Customize'
 import ManageShoesList from '@/pages/Admin/ShoesList.vue'
 import ManageUsers     from '@/pages/Admin/ManageUsers'
+import Basket          from '@/pages/Checkout/Basket'
 
 Vue.use(Router)
 
@@ -23,6 +24,7 @@ const router = new Router({
     { path: '/customize/:articleId', name: 'Customize', component: Customize },
     { path: '/manage-shoes-list', name: 'ManageShoesList', component: ManageShoesList },
     { path: '/manage-users', name: 'ManageUsers', component: ManageUsers },
+    { path: '/basket', name: 'Basket', component: Basket },
     { path: '/my-account/:customerId',
       name: 'MyAccount',
       component: MyAccount,

frontend/src/store/index.js

@@ -12,6 +12,7 @@ import me                from './modules/me' // current logged in user
 import header            from './modules/header'
 import adminShoesList    from './modules/adminShoesList'
 import manageUsers       from './modules/manageUsers'
+import basket            from './modules/Checkout/basket'
 
 Vue.use(Vuex)
 
@@ -20,6 +21,7 @@ const debug = process.env.NODE_ENV !== 'production'
 export default new Vuex.Store({
   modules: {
     me,
+    basket,
     login,
     model,
     shoesList,

frontend/src/store/modules/Checkout/basket.js

@@ -0,0 +1,46 @@
+import * as types from '../mutations-types'
+
+/* eslint key-spacing: ["error", { "align": "colon" }] */
+
+// initial state
+const state = {
+  basket: {
+    articles  : [ ],
+    isLoading : true,
+    totalPrice: 0,
+    quantity  : 1
+  }
+}
+
+// getters
+const getters = {
+  basket: state => state.basket
+}
+
+// actions
+const actions = {
+  getBasketArticles ({ commit }) {
+    const basketArticles = ''
+    commit(types.UPDATE_SHOPPING_CART, basketArticles)
+  },
+  updateArticleQuantity ({ commit }, newQuantity) {
+    commit(types.UPDATE_ARTICLE_QUANTITY, newQuantity)
+  }
+}
+
+// mutations
+const mutations = {
+  [types.UPDATE_SHOPPING_CART] (state, basketArticles) {
+    state.basket.articles = basketArticles
+  },
+  [types.UPDATE_ARTICLE_QUANTITY] (state, newQuantity) {
+    state.basket.quantity = newQuantity
+  }
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}

frontend/src/store/mutations-types.js

@@ -103,3 +103,9 @@ export const REMOVE_ARTICLE = 'REMOVE_ARTICLE'
 export const UPDATE_LIST_OF_CUSTOMERS           = 'UPDATE_LIST_OF_CUSTOMERS'
 export const UPDATE_IS_LOADING_CUSTOMERS_STATUS = 'UPDATE_IS_LOADING_CUSTOMERS_STATUS'
 export const TOGGLE_CUSTOMER_ACTIVATION         = 'TOGGLE_CUSTOMER_ACTIVATION'
+
+/* -----------------------------  /
+/  ---- MANAGE USERS TYPES  ----  /
+/  ----------------------------- */
+export const UPDATE_SHOPPING_CART    = 'UPDATE_SHOPPING_CART'
+export const UPDATE_ARTICLE_QUANTITY = 'UPDATE_ARTICLE_QUANTITY'