wad-lab 1.2.2 → 1.2.3

package/templates/vue-food-ordering/src/components/FoodMenu.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  categories: { type: Array, required: true },
+  items: { type: Array, required: true }
+})
+
+const emit = defineEmits(['add-to-cart'])
+
+const selectedCategory = ref('All')
+
+const filteredItems = computed(() => {
+  if (selectedCategory.value === 'All') return props.items
+  return props.items.filter(i => i.category === selectedCategory.value)
+})
+</script>
+
+<template>
+  <div class="menu-container">
+    <div class="category-tabs">
+      <button
+        v-for="cat in categories"
+        :key="cat"
+        type="button"
+        class="tab-btn"
+        :class="{ active: selectedCategory === cat }"
+        @click="selectedCategory = cat"
+      >
+        {{ cat }}
+      </button>
+    </div>
+
+    <div class="menu-grid">
+      <div v-for="item in filteredItems" :key="item.id" class="menu-card">
+        <div class="card-header">
+          <span class="badge">{{ item.category }}</span>
+          <span class="price">${{ Number(item.price).toFixed(2) }}</span>
+        </div>
+        <h3>{{ item.name }}</h3>
+        <p>{{ item.description }}</p>
+        <button type="button" class="btn btn-add" @click="emit('add-to-cart', item)">Add to Order</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.category-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.tab-btn {
+  padding: 8px 14px;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.tab-btn.active {
+  background: #ea580c;
+  color: #fff;
+  border-color: #ea580c;
+}
+
+.menu-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 16px;
+}
+
+.menu-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.badge {
+  font-size: 11px;
+  background: #ffedd5;
+  color: #c2410c;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.price {
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.menu-card h3 {
+  font-size: 16px;
+  margin-bottom: 4px;
+}
+
+.menu-card p {
+  font-size: 13px;
+  color: #64748b;
+  flex: 1;
+  margin-bottom: 12px;
+}
+
+.btn-add {
+  background: #ea580c;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+}
+</style>

package/templates/vue-food-ordering/src/components/OrderModal.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { reactive } from 'vue'
+
+defineProps({
+  show: { type: Boolean, default: false },
+  total: { type: Number, required: true }
+})
+
+const emit = defineEmits(['close', 'confirm'])
+
+const form = reactive({
+  name: '',
+  tableOrAddress: '',
+  notes: ''
+})
+
+function handleSubmit() {
+  if (!form.name.trim() || !form.tableOrAddress.trim()) return
+  emit('confirm', { ...form })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>Complete Food Order</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div class="total-badge">
+          Payable Amount: <strong>${{ total.toFixed(2) }}</strong>
+        </div>
+
+        <div class="form-group">
+          <label for="ord-name">Customer Name</label>
+          <input id="ord-name" v-model="form.name" required placeholder="Alex Smith" />
+        </div>
+
+        <div class="form-group">
+          <label for="ord-loc">Table Number or Delivery Address</label>
+          <input id="ord-loc" v-model="form.tableOrAddress" required placeholder="Table 4 / 45 Park Ave" />
+        </div>
+
+        <div class="form-group">
+          <label for="ord-notes">Special Instructions</label>
+          <textarea id="ord-notes" v-model="form.notes" rows="2" placeholder="Extra spicy, no onions, etc."></textarea>
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">Place Order</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.total-badge {
+  background: #ffedd5;
+  color: #c2410c;
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.form-group input,
+.form-group textarea {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #ea580c; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+</style>

package/templates/vue-food-ordering/src/views/MenuView.vue

@@ -1,145 +1,24 @@
 <script setup>
-import { ref, computed } from 'vue'
 import { useFoodStore } from '../stores/foodStore'
+import FoodMenu from '../components/FoodMenu.vue'
 
 const store = useFoodStore()
-const selectedCategory = ref('All')
-
-const filteredItems = computed(() => {
-  if (selectedCategory.value === 'All') {
-    return store.menuItems
-  }
-  return store.menuItems.filter((item) => item.category === selectedCategory.value)
-})
-
-const selectCategory = (category) => {
-  selectedCategory.value = category
-}
 </script>
 
 <template>
-  <div class="menu-container">
-    <h2>Menu</h2>
-    
-    <div class="category-tabs">
-      <button
-        v-for="cat in store.categories"
-        :key="cat"
-        :class="{ active: selectedCategory === cat }"
-        class="tab-btn"
-        @click="selectCategory(cat)"
-      >
-        {{ cat }}
-      </button>
-    </div>
-
-    <div class="menu-grid">
-      <div v-for="item in filteredItems" :key="item.id" class="menu-card">
-        <div class="card-header">
-          <h3>{{ item.name }}</h3>
-          <span class="category-tag">{{ item.category }}</span>
-        </div>
-        <p class="description">{{ item.description }}</p>
-        <div class="card-footer">
-          <span class="price">${{ item.price.toFixed(2) }}</span>
-          <button class="add-btn" @click="store.addToCart(item)">Add to Order</button>
-        </div>
-      </div>
-    </div>
+  <div class="menu-page">
+    <h2>Our Menu</h2>
+    <FoodMenu
+      :categories="store.categories"
+      :items="store.menuItems"
+      @add-to-cart="store.addToCart"
+    />
   </div>
 </template>
 
 <style scoped>
-.menu-container {
-  padding: 1rem 0;
-}
-
-.category-tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
-}
-
-.tab-btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid #ccc;
-  background-color: #f8f9fa;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.tab-btn.active {
-  background-color: #007bff;
-  color: #fff;
-  border-color: #007bff;
-}
-
-.menu-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 1rem;
-}
-
-.menu-card {
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #fff;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 0.5rem;
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.category-tag {
-  font-size: 0.75rem;
-  background-color: #e9ecef;
-  padding: 0.2rem 0.5rem;
-  border-radius: 3px;
-  color: #495057;
-}
-
-.description {
-  color: #666;
-  font-size: 0.9rem;
-  margin: 0 0 1rem 0;
-  flex-grow: 1;
-}
-
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.price {
-  font-weight: bold;
-  font-size: 1.1rem;
-  color: #28a745;
-}
-
-.add-btn {
-  padding: 0.4rem 0.8rem;
-  background-color: #28a745;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.add-btn:hover {
-  background-color: #218838;
+.menu-page h2 {
+  font-size: 22px;
+  margin-bottom: 16px;
 }
 </style>

package/templates/vue-food-ordering/src/views/OrderCartView.vue

@@ -1,181 +1,48 @@
 <script setup>
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFoodStore } from '../stores/foodStore'
+import CartSummary from '../components/CartSummary.vue'
+import OrderModal from '../components/OrderModal.vue'
 
 const store = useFoodStore()
 const router = useRouter()
+const isModalOpen = ref(false)
 
-const checkout = () => {
-  if (store.cart.length > 0) {
-    router.push('/order-success')
-  }
+function handleConfirmOrder() {
+  store.clearCart()
+  isModalOpen.value = false
+  router.push('/order-success')
 }
 </script>
 
 <template>
-  <div class="cart-container">
-    <h2>Your Order Cart</h2>
-
-    <div v-if="store.cart.length === 0" class="empty-cart">
-      <p>Your cart is empty.</p>
-      <router-link to="/" class="menu-link">Browse Menu</router-link>
-    </div>
-
-    <div v-else>
-      <table class="cart-table">
-        <thead>
-          <tr>
-            <th>Item</th>
-            <th>Price</th>
-            <th>Quantity</th>
-            <th>Total</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="item in store.cart" :key="item.id">
-            <td>{{ item.name }}</td>
-            <td>${{ item.price.toFixed(2) }}</td>
-            <td class="qty-cell">
-              <button class="qty-btn" @click="store.decrementQuantity(item.id)">-</button>
-              <span class="qty-val">{{ item.quantity }}</span>
-              <button class="qty-btn" @click="store.incrementQuantity(item.id)">+</button>
-            </td>
-            <td>${{ (item.price * item.quantity).toFixed(2) }}</td>
-            <td>
-              <button class="remove-btn" @click="store.removeFromCart(item.id)">Remove</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="cart-summary">
-        <div class="summary-row">
-          <span>Subtotal:</span>
-          <span>${{ store.cartSubtotal.toFixed(2) }}</span>
-        </div>
-        <div class="summary-row">
-          <span>Tax (5%):</span>
-          <span>${{ store.taxAmount.toFixed(2) }}</span>
-        </div>
-        <div class="summary-row total-row">
-          <span>Grand Total:</span>
-          <span>${{ store.totalBill.toFixed(2) }}</span>
-        </div>
-
-        <div class="checkout-actions">
-          <button class="checkout-btn" @click="checkout">Proceed to Checkout</button>
-        </div>
-      </div>
-    </div>
+  <div class="cart-page">
+    <h2>Your Cart</h2>
+    <CartSummary
+      :cart="store.cart"
+      :subtotal="store.cartSubtotal"
+      :tax="store.taxAmount"
+      :total="store.totalBill"
+      @increment="store.incrementQuantity"
+      @decrement="store.decrementQuantity"
+      @remove="store.removeFromCart"
+      @clear="store.clearCart"
+      @checkout="isModalOpen = true"
+    />
+
+    <OrderModal
+      :show="isModalOpen"
+      :total="store.totalBill"
+      @close="isModalOpen = false"
+      @confirm="handleConfirmOrder"
+    />
   </div>
 </template>
 
 <style scoped>
-.cart-container {
-  padding: 1rem 0;
-}
-
-.empty-cart {
-  text-align: center;
-  padding: 2rem;
-  background-color: #f8f9fa;
-  border-radius: 6px;
-}
-
-.menu-link {
-  display: inline-block;
-  margin-top: 0.5rem;
-  color: #007bff;
-  text-decoration: none;
-}
-
-.cart-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 1.5rem;
-}
-
-.cart-table th,
-.cart-table td {
-  border: 1px solid #ddd;
-  padding: 0.75rem;
-  text-align: left;
-}
-
-.cart-table th {
-  background-color: #f8f9fa;
-}
-
-.qty-cell {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: none;
-}
-
-.qty-btn {
-  width: 28px;
-  height: 28px;
-  background-color: #e9ecef;
-  border: 1px solid #ced4da;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.qty-val {
-  min-width: 20px;
-  text-align: center;
-}
-
-.remove-btn {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 0.3rem 0.6rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.cart-summary {
-  max-width: 350px;
-  margin-left: auto;
-  border: 1px solid #ddd;
-  padding: 1rem;
-  border-radius: 6px;
-  background-color: #fff;
-}
-
-.summary-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-}
-
-.total-row {
-  font-weight: bold;
-  font-size: 1.1rem;
-  border-top: 1px solid #ddd;
-  padding-top: 0.5rem;
-  margin-top: 0.5rem;
-}
-
-.checkout-actions {
-  margin-top: 1rem;
-}
-
-.checkout-btn {
-  width: 100%;
-  padding: 0.75rem;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.checkout-btn:hover {
-  background-color: #0069d9;
+.cart-page h2 {
+  font-size: 22px;
+  margin-bottom: 16px;
 }
 </style>