wad-lab 1.2.2 → 1.2.3

package/templates/vue-springboot-mongo-aggregation/frontend/src/App.vue

@@ -1,11 +1,15 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import ItemService from './services/ItemService';
-import AnalyticsService from './services/AnalyticsService';
-
-const items = ref([]);
-const summaries = ref([]);
-const isEditing = ref(false);
+import { ref, computed, onMounted } from 'vue'
+import ItemService from './services/ItemService'
+import AnalyticsService from './services/AnalyticsService'
+import AnalyticsCards from './components/AnalyticsCards.vue'
+import CategorySummaryTable from './components/CategorySummaryTable.vue'
+import ItemTable from './components/ItemTable.vue'
+
+const items = ref([])
+const summaries = ref([])
+const isEditing = ref(false)
+const showModal = ref(false)
 const form = ref({
   id: '',
   name: '',
@@ -13,199 +17,186 @@ const form = ref({
   category: '',
   price: 0,
   quantity: 0
-});
-const searchId = ref('');
-const selectedItem = ref(null);
-
-const loadData = async () => {
-  await Promise.all([loadItems(), loadAnalytics()]);
-};
-
-const loadItems = async () => {
-  const res = await ItemService.getAll();
-  items.value = res.data;
-};
-
-const loadAnalytics = async () => {
-  const res = await AnalyticsService.getCategorySummary();
-  summaries.value = res.data;
-};
-
-const saveItem = async () => {
+})
+
+const totalCategories = computed(() => summaries.value.length)
+const totalQuantity = computed(() =>
+  items.value.reduce((sum, item) => sum + Number(item.quantity || 0), 0)
+)
+const totalValue = computed(() =>
+  items.value.reduce((sum, item) => sum + (Number(item.price || 0) * Number(item.quantity || 0)), 0)
+)
+
+async function loadData() {
+  await Promise.all([loadItems(), loadAnalytics()])
+}
+
+async function loadItems() {
+  const res = await ItemService.getAll()
+  items.value = res.data || []
+}
+
+async function loadAnalytics() {
+  const res = await AnalyticsService.getCategorySummary()
+  summaries.value = res.data || []
+}
+
+function openCreate() {
+  isEditing.value = false
+  form.value = { id: '', name: '', description: '', category: '', price: 0, quantity: 0 }
+  showModal.value = true
+}
+
+function openEdit(item) {
+  isEditing.value = true
+  form.value = { ...item }
+  showModal.value = true
+}
+
+async function saveItem() {
   if (isEditing.value) {
-    await ItemService.update(form.value.id, {
-      id: form.value.id,
-      name: form.value.name,
-      description: form.value.description,
-      category: form.value.category,
-      price: form.value.price,
-      quantity: form.value.quantity
-    });
+    await ItemService.update(form.value.id, form.value)
   } else {
-    await ItemService.create({
-      id: form.value.id,
-      name: form.value.name,
-      description: form.value.description,
-      category: form.value.category,
-      price: form.value.price,
-      quantity: form.value.quantity
-    });
+    await ItemService.create(form.value)
   }
-  resetForm();
-  loadData();
-};
-
-const editItem = (item) => {
-  isEditing.value = true;
-  form.value = { ...item };
-};
-
-const resetForm = () => {
-  isEditing.value = false;
-  form.value = { id: '', name: '', description: '', category: '', price: 0, quantity: 0 };
-};
-
-const deleteItem = async (id) => {
-  await ItemService.delete(id);
-  if (selectedItem.value && selectedItem.value.id === id) {
-    selectedItem.value = null;
+  showModal.value = false
+  await loadData()
+}
+
+async function deleteItem(id) {
+  if (confirm('Delete this item?')) {
+    await ItemService.delete(id)
+    await loadData()
   }
-  loadData();
-};
-
-const fetchSingleItem = async (id) => {
-  const targetId = id || searchId.value;
-  if (!targetId) return;
-  const res = await ItemService.getById(targetId);
-  selectedItem.value = res.data;
-};
+}
 
-onMounted(loadData);
+onMounted(() => {
+  loadData()
+})
 </script>
 
 <template>
-  <h2>Item Management and MongoDB Aggregation Analytics</h2>
-
-  <h3>{{ isEditing ? 'Edit Item (PUT)' : 'Add New Item (POST)' }}</h3>
-  <form @submit.prevent="saveItem">
-    <label>Custom ID (Optional):</label>
-    <br>
-    <input v-model="form.id" placeholder="ID (e.g. 101 or leave blank for auto)" :disabled="isEditing" />
-    <br><br>
-
-    <label>Name:</label>
-    <br>
-    <input v-model="form.name" placeholder="Name" required />
-    <br><br>
-
-    <label>Description:</label>
-    <br>
-    <input v-model="form.description" placeholder="Description" required />
-    <br><br>
-
-    <label>Category:</label>
-    <br>
-    <input v-model="form.category" placeholder="Category" required />
-    <br><br>
-
-    <label>Price:</label>
-    <br>
-    <input v-model.number="form.price" type="number" step="0.01" placeholder="Price" required />
-    <br><br>
-
-    <label>Quantity:</label>
-    <br>
-    <input v-model.number="form.quantity" type="number" placeholder="Quantity" required />
-    <br><br>
-
-    <button type="submit">{{ isEditing ? 'Update Item (PUT)' : 'Create Item (POST)' }}</button>
-    <button type="button" v-if="isEditing" @click="resetForm">Cancel</button>
-  </form>
-
-  <hr>
-
-  <h3>Fetch Single Item By ID (GET /api/items/:id)</h3>
-  <input v-model="searchId" placeholder="Enter Item ID" />
-  <button type="button" @click="fetchSingleItem(searchId)">Fetch Detail</button>
-
-  <div v-if="selectedItem">
-    <br>
-    <b>Item Details:</b>
-    <br>
-    ID: {{ selectedItem.id }}
-    <br>
-    Name: {{ selectedItem.name }}
-    <br>
-    Description: {{ selectedItem.description }}
-    <br>
-    Category: {{ selectedItem.category }}
-    <br>
-    Price: {{ selectedItem.price }}
-    <br>
-    Quantity: {{ selectedItem.quantity }}
-    <br>
-    <button type="button" @click="selectedItem = null">Close Details</button>
+  <div class="agg-container">
+    <header class="header">
+      <h1>Spring Boot + MongoDB Aggregation Dashboard</h1>
+      <p>Modular: AnalyticsCards, CategorySummaryTable, ItemTable</p>
+    </header>
+
+    <AnalyticsCards
+      :total-categories="totalCategories"
+      :total-quantity="totalQuantity"
+      :total-value="totalValue"
+    />
+
+    <CategorySummaryTable :summaries="summaries" />
+
+    <ItemTable
+      :items="items"
+      @create="openCreate"
+      @edit="openEdit"
+      @delete="deleteItem"
+    />
+
+    <div v-if="showModal" class="modal-overlay" @click.self="showModal = false">
+      <div class="modal-card">
+        <h3>{{ isEditing ? 'Edit Item' : 'Add Item' }}</h3>
+        <form @submit.prevent="saveItem" class="form">
+          <input v-model="form.name" placeholder="Name" required />
+          <input v-model="form.description" placeholder="Description" required />
+          <input v-model="form.category" placeholder="Category" required />
+          <input v-model.number="form.price" type="number" step="any" placeholder="Price" required />
+          <input v-model.number="form.quantity" type="number" placeholder="Quantity" required />
+          <div class="actions">
+            <button type="button" class="btn btn-secondary" @click="showModal = false">Cancel</button>
+            <button type="submit" class="btn btn-primary">Save</button>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
-
-  <hr>
-
-  <h3>Aggregation Analytics: Category Summary</h3>
-  <button type="button" @click="loadAnalytics">Refresh Analytics</button>
-  <br><br>
-
-  <table>
-    <thead>
-      <tr>
-        <th>Category</th>
-        <th>Total Price</th>
-        <th>Average Price</th>
-        <th>Total Quantity</th>
-        <th>Item Count</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="summary in summaries" :key="summary.category">
-        <td>{{ summary.category }}</td>
-        <td>{{ summary.totalPrice }}</td>
-        <td>{{ summary.avgPrice }}</td>
-        <td>{{ summary.totalQuantity }}</td>
-        <td>{{ summary.count }}</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <hr>
-
-  <h3>Items List (GET /api/items)</h3>
-  <button type="button" @click="loadData">Refresh All</button>
-  <br><br>
-
-  <table>
-    <thead>
-      <tr>
-        <th>ID</th>
-        <th>Name</th>
-        <th>Description</th>
-        <th>Category</th>
-        <th>Price</th>
-        <th>Quantity</th>
-        <th>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="item in items" :key="item.id">
-        <td>{{ item.id }}</td>
-        <td>{{ item.name }}</td>
-        <td>{{ item.description }}</td>
-        <td>{{ item.category }}</td>
-        <td>{{ item.price }}</td>
-        <td>{{ item.quantity }}</td>
-        <td>
-          <button type="button" @click="fetchSingleItem(item.id)">View</button>
-          <button type="button" @click="editItem(item)">Edit</button>
-          <button type="button" @click="deleteItem(item.id)">Delete</button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
 </template>
+
+<style>
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f8fafc;
+  color: #334155;
+}
+</style>
+
+<style scoped>
+.agg-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 30px 16px;
+}
+
+.header {
+  margin-bottom: 24px;
+}
+
+.header h1 {
+  font-size: 24px;
+  color: #0f172a;
+}
+
+.header p {
+  color: #64748b;
+  font-size: 14px;
+}
+
+.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: 400px;
+  padding: 20px;
+}
+
+.modal-card h3 {
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.form input {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+}
+
+.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: #0284c7; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+</style>

package/templates/vue-springboot-mongo-aggregation/frontend/src/components/AnalyticsCards.vue

@@ -0,0 +1,56 @@
+<script setup>
+defineProps({
+  totalCategories: { type: Number, default: 0 },
+  totalQuantity: { type: Number, default: 0 },
+  totalValue: { type: Number, default: 0 }
+})
+</script>
+
+<template>
+  <div class="analytics-cards">
+    <div class="stat-card">
+      <span class="label">Total Categories</span>
+      <strong class="value">{{ totalCategories }}</strong>
+    </div>
+    <div class="stat-card">
+      <span class="label">Total Inventory Units</span>
+      <strong class="value">{{ totalQuantity }}</strong>
+    </div>
+    <div class="stat-card">
+      <span class="label">Total Inventory Valuation</span>
+      <strong class="value">${{ Number(totalValue).toFixed(2) }}</strong>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.analytics-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #0284c7;
+}
+</style>

package/templates/vue-springboot-mongo-aggregation/frontend/src/components/CategorySummaryTable.vue

@@ -0,0 +1,71 @@
+<script setup>
+defineProps({
+  summaries: { type: Array, required: true }
+})
+</script>
+
+<template>
+  <div class="summary-container">
+    <h3>Category Aggregation Summary</h3>
+    <table class="summary-table">
+      <thead>
+        <tr>
+          <th>Category</th>
+          <th>Total Quantity</th>
+          <th>Avg Price</th>
+          <th>Total Valuation</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="summaries.length === 0">
+          <td colspan="4" class="empty">No category aggregations computed.</td>
+        </tr>
+        <tr v-for="s in summaries" :key="s.category || s._id">
+          <td><strong>{{ s.category || s._id || 'Uncategorized' }}</strong></td>
+          <td>{{ s.totalQuantity || s.count || 0 }}</td>
+          <td>${{ Number(s.avgPrice || 0).toFixed(2) }}</td>
+          <td>${{ Number(s.totalValue || (s.totalQuantity * s.avgPrice) || 0).toFixed(2) }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.summary-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.summary-container h3 {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.summary-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 16px;
+}
+</style>

package/templates/vue-springboot-mongo-aggregation/frontend/src/components/ItemTable.vue

@@ -0,0 +1,114 @@
+<script setup>
+defineProps({
+  items: { type: Array, required: true }
+})
+
+const emit = defineEmits(['create', 'edit', 'delete'])
+</script>
+
+<template>
+  <div class="table-container">
+    <div class="table-header">
+      <h3>Inventory Items</h3>
+      <button type="button" class="btn btn-primary" @click="emit('create')">Add Item</button>
+    </div>
+
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Category</th>
+          <th>Price</th>
+          <th>Quantity</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="items.length === 0">
+          <td colspan="6" class="empty">No inventory items found.</td>
+        </tr>
+        <tr v-for="item in items" :key="item.id">
+          <td>{{ item.id }}</td>
+          <td><strong>{{ item.name }}</strong></td>
+          <td><span class="badge">{{ item.category }}</span></td>
+          <td>${{ Number(item.price).toFixed(2) }}</td>
+          <td>{{ item.quantity }}</td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-warning" @click="emit('edit', item)">Edit</button>
+            <button type="button" class="btn btn-danger" @click="emit('delete', item.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.table-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.badge {
+  background: #e0f2fe;
+  color: #0369a1;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #0284c7; color: #fff; }
+.btn-warning { background: #d97706; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+</style>