Cart WIP

src/components/orders/cart.vue

@@ -10,32 +10,56 @@
         </div>
       </div>
       <!-- ListView -->
-      <ListView :items="cartItems" :displayColumns="columns" :displayFormats="formats" />
+      <ListView
+        :items="cartItems"
+        :displayColumns="columns"
+        :displayFormats="formats"
+        :editable="true"
+        :deleteable="true"
+        @onEdit="Edit"
+        @onDelete="Delete"
+      />
     </div>
+    <modal name="menu" :width="600" :height="auto">
+      <Cart :showItem="CurrentItem" />
+    </modal>
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
 import ListView from "../shared/listView";
+import Cart from "./cartItem";
 
 export default {
   name: "MyCart",
   components: {
-    ListView
+    ListView,
+    Cart,
   },
   data() {
     return {
       wait: true,
       columns: ["image", "name", "description", "qty", "subTotal"],
-      formats: ["image", "", "", "", "money"]
+      formats: ["image", "", "", "", "money"],
+      item: {},
     };
   },
   methods: {
-    New() {}
+    New() {},
+    Edit(item) {
+      this.item = item;
+      this.$modal.show("menu");
+    },
+    Delete(item) {
+      this.cartItems.pop(item);
+    },
   },
   computed: {
-    ...mapState("cart", ["cartItems"])
-  }
+    ...mapState("cart", ["cartItems"]),
+    CurrentItem() {
+      return this.item;
+    },
+  },
 };
 </script>

src/components/orders/cartItem.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="container">
+    <div class="row" style="text-align:left">
+      <!--Column 1 -->
+      <div class="col-md-6" style="margin-bottomL 1em">
+        <div class="row" style="text-align:left">
+          <div class="carousel-item-c">
+            <div class="card-box-b card-shadow news-box">
+              <div class="img-box-b">
+                <img v-if="item.image !== ''" :src="item.image" alt class="img-b img-fluid" />
+                <img
+                  v-else
+                  src="../../../public/img/DefaultImg.png"
+                  alt
+                  class="img-b img-fluid"
+                  style="object-fit: cover;"
+                />
+              </div>
+              <div class="card-overlay">
+                <div class="card-header-b">
+                  <div class="card-title-b">
+                    <h2 class="title-2" style="color: #ffffff;">{{ item.name }}</h2>
+                  </div>
+                  <div class="card-date">
+                    <span class="date-a">{{ item.description }}</span>
+                  </div>
+                  <br />
+                  <div class="card-category-b">
+                    <span class="category-b">
+                      <b>{{ item.displayPrice }}</b>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12" style="margin-top: 1em">
+            <div class="row">
+              <div class="col-sm-3">
+                <button
+                  @click="Minus()"
+                  class="btn btn-b-n"
+                  type="button"
+                  style="border-radius:50px"
+                >
+                  <eva-icon name="minus-outline" fill="white"></eva-icon>
+                </button>
+              </div>
+              <div class="col-sm-1">
+                <label style="margin-top: 0.5em">{{qty}}</label>
+              </div>
+              <div class="col-sm-3">
+                <button
+                  @click="Plus()"
+                  class="btn btn-b-n"
+                  type="button"
+                  style="border-radius:50px"
+                >
+                  <eva-icon name="plus-outline" fill="white"></eva-icon>
+                </button>
+              </div>
+              <div class="col-sm-2">
+                <label style="margin-top: 0.5em">
+                  <b>{{subTotal | toCurrency}}</b>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--Column 2 -->
+      <div class="col-md-6" style="margin-bottomL 1em">
+        <div class="row" style="text-align:left">
+          <div class="container" v-for="(item, i) in options" :key="i">
+            <div class="row">
+              <div class="col-sm-12">
+                <div class="title-box-d">
+                  <h3 class="title-d">{{ item.description }}</h3>
+                </div>
+              </div>
+            </div>
+            <div class="row" v-if="item.subTitle">
+              <div class="col-sm-12">{{ item.subTitle }}</div>
+            </div>
+            <hr v-if="item.subTitle" />
+            <optionSelector
+              :item="item"
+              @UpdateSelection="UpdateSelection"
+              @UpdateSelectionQty="UpdateSelectionQty"
+            />
+          </div>
+        </div>
+        <hr />
+        <div class="row">
+          <div class="col-sm-12">
+            <label>Special Instructions</label>
+            <div class="input-group-prepend">
+              <textarea
+                class="form-control editor form-control-lg form-control-a"
+                v-model="item.specialInstructions"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <br />
+    </div>
+
+    <div class="row">
+      <div class="col-md-12" style="margin-top: 1em">
+        <button @click="AddToCart()" class="btn btn-b-n" type="button">Add To Cart</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12" style="margin-top: 1em">
+        <button @click="Close()" class="btn btn-b-n" type="button">Back</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import optionSelector from "../orders/orderOptionSelection";
+
+export default {
+  name: "MenuOptions",
+  props: {
+    showItem: { default: {} },
+  },
+  components: {
+    optionSelector,
+  },
+  data() {
+    return {
+      wait: true,
+      item: {},
+      qty: 1,
+      subTotal: 0,
+      selection: [],
+    };
+  },
+  methods: {
+    ...mapActions("homeMenu", ["getOptions"]),
+    Close() {
+      this.item.specialInstructions = "";
+      this.selection = [];
+      this.qty = 1;
+      this.$emit("CloseOptions", false);
+    },
+    Plus() {
+      this.qty = this.qty + 1;
+    },
+    Minus() {
+      this.qty = this.qty - 1;
+      if (this.qty === 0) {
+        this.qty = 1;
+      }
+    },
+    CheckItem(value) {
+      alert(JSON.stringify(value));
+    },
+    UpdateSelection(value) {
+      if (value.value) {
+        this.selection.push(value.field);
+      } else {
+        for (let i = 0; i < this.selection.length; i++) {
+          if (this.selection[i].id === value.field.id) {
+            this.selection.splice(i, 1);
+          }
+        }
+      }
+    },
+    UpdateSelectionQty(value) {
+      this.selection.find((s) => s.id == value.id).qty = value.qty;
+    },
+    AddToCart() {
+      const cartItem = {
+        id: this.item.id,
+        description: this.item.description,
+        image: this.item.image,
+        name: this.item.name,
+        subTotal: this.subTotal,
+        specialInstructions: this.specialInstructions,
+        qty: this.qty,
+        selection: this.selection,
+      };
+
+      this.cartItems.push(cartItem);
+      this.item.specialInstructions = "";
+      this.selection = [];
+      this.qty = 1;
+      this.$emit("CloseOptions", false);
+    },
+  },
+  computed: {
+    ...mapState("cart", ["cartItems"]),
+    ...mapState("homeMenu", ["options"]),
+    SubTotal() {
+      var price = this.item.price * this.qty;
+
+      for (let i = 0; i < this.selection.length; i++) {
+        if (this.selection[i].price > 0) {
+          let optionPrice = this.selection[i].price * this.selection[i].qty;
+          price = price + optionPrice;
+        }
+      }
+      return price;
+    },
+  },
+  watch: {
+    showItem: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.item = val;
+          this.subTotal = this.item.price;
+          this.qty = this.item.qty;
+          this.selection = this.item.selection;
+          this.getOptions(val);
+        }
+      },
+    },
+  },
+};
+</script>