wad-lab 1.2.2 → 1.2.4

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

@@ -1,158 +1,228 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import ItemService from './services/ItemService';
-
-const items = ref([]);
-const isEditing = ref(false);
-const form = ref({
-  id: '',
-  name: '',
-  description: '',
-  price: 0
-});
-const searchId = ref('');
-const selectedItem = ref(null);
-
-const loadItems = async () => {
-  const res = await ItemService.getAll();
-  items.value = res.data;
-};
-
-const saveItem = async () => {
-  if (isEditing.value) {
-    await ItemService.update(form.value.id, {
-      id: form.value.id,
-      name: form.value.name,
-      description: form.value.description,
-      price: form.value.price
-    });
-  } else {
-    await ItemService.create({
-      id: form.value.id,
-      name: form.value.name,
-      description: form.value.description,
-      price: form.value.price
-    });
-  }
-  resetForm();
-  loadItems();
-};
-
-const editItem = (item) => {
-  isEditing.value = true;
-  form.value = { ...item };
-};
-
-const resetForm = () => {
-  isEditing.value = false;
-  form.value = { id: '', name: '', description: '', price: 0 };
-};
-
-const deleteItem = async (id) => {
-  await ItemService.delete(id);
-  if (selectedItem.value && selectedItem.value.id === id) {
-    selectedItem.value = null;
-  }
-  loadItems();
-};
-
-const patchItem = async (item) => {
-  const price = prompt('Enter new price:');
-  if (price !== null && price !== '') {
-    await ItemService.patch(item.id, { price: Number(price) });
-    loadItems();
-  }
-};
-
-const fetchSingleItem = async (id) => {
-  const targetId = id || searchId.value;
-  if (!targetId) return;
-  const res = await ItemService.getById(targetId);
-  selectedItem.value = res.data;
-};
-
-onMounted(loadItems);
-</script>
-
-<template>
-  <h2>Item Management</h2>
-
-  <h3>{{ isEditing ? 'Edit Item' : 'Add New Item' }}</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>Price:</label>
-    <br>
-    <input v-model.number="form.price" type="number" step="0.01" placeholder="Price" 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>
-    Price: {{ selectedItem.price }}
-    <br>
-    <button type="button" @click="selectedItem = null">Close Details</button>
-  </div>
-
-  <hr>
-
-  <h3>Item List (GET /api/items)</h3>
-  <button type="button" @click="loadItems">Refresh List</button>
-  <br><br>
-
-  <table>
-    <thead>
-      <tr>
-        <th>ID</th>
-        <th>Name</th>
-        <th>Description</th>
-        <th>Price</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.price }}</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>
-          <button type="button" @click="patchItem(item)">Patch</button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import ItemService from './services/ItemService'
+import ItemTable from './components/ItemTable.vue'
+import ItemFormModal from './components/ItemFormModal.vue'
+import ItemPatchModal from './components/ItemPatchModal.vue'
+
+const items = ref([])
+const loading = ref(false)
+const errorMessage = ref('')
+const selectedItem = ref(null)
+
+const isFormModalOpen = ref(false)
+const isEditMode = ref(false)
+const activeItemData = ref(null)
+
+const isPatchModalOpen = ref(false)
+const activePatchItem = ref(null)
+
+async function fetchAll() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const res = await ItemService.getAll()
+    items.value = res.data || []
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to load items'
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreateModal() {
+  isEditMode.value = false
+  activeItemData.value = { name: '', description: '', price: 0 }
+  isFormModalOpen.value = true
+}
+
+function openEditModal(item) {
+  isEditMode.value = true
+  activeItemData.value = { ...item }
+  isFormModalOpen.value = true
+}
+
+function openPatchModal(item) {
+  activePatchItem.value = item
+  isPatchModalOpen.value = true
+}
+
+async function handleFormSubmit(payload) {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    if (isEditMode.value) {
+      await ItemService.update(payload.id, payload)
+    } else {
+      await ItemService.create(payload)
+    }
+    isFormModalOpen.value = false
+    await fetchAll()
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to save item'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handlePatchSubmit({ id, partial }) {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    await ItemService.patch(id, partial)
+    isPatchModalOpen.value = false
+    await fetchAll()
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to patch item'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleDelete(id) {
+  if (!confirm('Are you sure you want to delete this item?')) return
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    await ItemService.delete(id)
+    if (selectedItem.value && selectedItem.value.id === id) {
+      selectedItem.value = null
+    }
+    await fetchAll()
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to delete item'
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleViewDetails(item) {
+  selectedItem.value = item
+}
+
+onMounted(() => {
+  fetchAll()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <header class="app-header">
+      <h1>Spring Boot + MongoDB CRUD</h1>
+      <p>Modular: ItemTable, ItemFormModal, ItemPatchModal</p>
+    </header>
+
+    <div v-if="errorMessage" class="error-banner">
+      {{ errorMessage }}
+    </div>
+
+    <div v-if="selectedItem" class="detail-card">
+      <div class="detail-header">
+        <h3>Selected Item</h3>
+        <button type="button" class="btn-close" @click="selectedItem = null">Close</button>
+      </div>
+      <div class="detail-body">
+        <p><strong>ID:</strong> {{ selectedItem.id }}</p>
+        <p><strong>Name:</strong> {{ selectedItem.name }}</p>
+        <p><strong>Description:</strong> {{ selectedItem.description || selectedItem.describtion || 'N/A' }}</p>
+        <p><strong>Price:</strong> ${{ Number(selectedItem.price).toFixed(2) }}</p>
+      </div>
+    </div>
+
+    <ItemTable
+      :items="items"
+      :loading="loading"
+      @open-create="openCreateModal"
+      @edit="openEditModal"
+      @patch="openPatchModal"
+      @delete="handleDelete"
+      @view-details="handleViewDetails"
+      @refresh="fetchAll"
+    />
+
+    <ItemFormModal
+      :show="isFormModalOpen"
+      :is-edit="isEditMode"
+      :item-data="activeItemData"
+      @close="isFormModalOpen = false"
+      @submit="handleFormSubmit"
+    />
+
+    <ItemPatchModal
+      :show="isPatchModalOpen"
+      :item="activePatchItem"
+      @close="isPatchModalOpen = false"
+      @submit="handlePatchSubmit"
+    />
+  </div>
+</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>
+.app-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 32px 16px;
+}
+
+.app-header {
+  margin-bottom: 24px;
+}
+
+.app-header h1 {
+  font-size: 26px;
+  color: #0f172a;
+}
+
+.app-header p {
+  color: #64748b;
+  font-size: 14px;
+}
+
+.error-banner {
+  background-color: #ffebe9;
+  color: #cf222e;
+  border: 1px solid #ff818266;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+}
+
+.detail-card {
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+
+.detail-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #57606a;
+}
+</style>

package/templates/vue-springboot-mongo-crud/frontend/src/components/ItemFormModal.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  itemData: {
+    type: Object,
+    default: () => ({ name: '', description: '', price: 0 })
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const form = reactive({
+  id: '',
+  name: '',
+  description: '',
+  price: 0
+})
+
+watch(
+  () => props.itemData,
+  (val) => {
+    if (val) {
+      form.id = val.id || ''
+      form.name = val.name || ''
+      form.description = val.description || val.describtion || ''
+      form.price = Number(val.price) || 0
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  if (!form.name.trim()) return
+  emit('submit', {
+    id: form.id,
+    name: form.name.trim(),
+    description: form.description.trim(),
+    describtion: form.description.trim(),
+    price: Number(form.price)
+  })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ isEdit ? 'Update Item' : 'Create Item' }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div v-if="isEdit" class="form-group">
+          <label for="form-id">Item ID</label>
+          <input id="form-id" :value="form.id" disabled class="input-disabled" />
+        </div>
+
+        <div class="form-group">
+          <label for="form-name">Name</label>
+          <input id="form-name" v-model="form.name" required placeholder="Item Name" />
+        </div>
+
+        <div class="form-group">
+          <label for="form-desc">Description</label>
+          <input id="form-desc" v-model="form.description" required placeholder="Item Description" />
+        </div>
+
+        <div class="form-group">
+          <label for="form-price">Price ($)</label>
+          <input id="form-price" v-model.number="form.price" type="number" step="any" min="0" required placeholder="0.00" />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">{{ isEdit ? 'Save Changes' : 'Create Item' }}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: 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: 480px;
+  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;
+  color: #24292f;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #57606a;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #444444;
+}
+
+.form-group input {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.input-disabled {
+  background-color: #f6f8fa;
+  color: #6e7781;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #0969da; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>