wad-lab 1.2.2 → 1.2.4

package/templates/vue-axios/src/App.vue

@@ -1,264 +1,255 @@
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import ItemService from './services/ItemService'
-
-const items = ref([])
-const loading = ref(false)
-const errorMessage = ref('')
-
-const searchId = ref('')
-const selectedItem = ref(null)
-
-const createForm = reactive({
-  name: '',
-  description: '',
-  price: 0
-})
-
-const editForm = reactive({
-  id: '',
-  name: '',
-  description: '',
-  price: 0
-})
-
-async function fetchAll() {
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    const res = await ItemService.getAll()
-    items.value = res.data
-  } catch (err) {
-    errorMessage.value = err.message
-  } finally {
-    loading.value = false
-  }
-}
-
-async function fetchById(id) {
-  if (!id) return
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    const res = await ItemService.getOne(id)
-    selectedItem.value = res.data
-  } catch (err) {
-    errorMessage.value = err.message
-  } finally {
-    loading.value = false
-  }
-}
-
-async function createItem() {
-  if (!createForm.name) return
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    await ItemService.create({
-      name: createForm.name,
-      description: createForm.description,
-      describtion: createForm.description,
-      price: Number(createForm.price)
-    })
-    createForm.name = ''
-    createForm.description = ''
-    createForm.price = 0
-    await fetchAll()
-  } catch (err) {
-    errorMessage.value = err.message
-  } finally {
-    loading.value = false
-  }
-}
-
-async function updateItem() {
-  if (!editForm.id) return
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    await ItemService.update(editForm.id, {
-      id: editForm.id,
-      name: editForm.name,
-      description: editForm.description,
-      describtion: editForm.description,
-      price: Number(editForm.price)
-    })
-    editForm.id = ''
-    editForm.name = ''
-    editForm.description = ''
-    editForm.price = 0
-    await fetchAll()
-  } catch (err) {
-    errorMessage.value = err.message
-  } finally {
-    loading.value = false
-  }
-}
-
-async function deleteItem(id) {
-  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
-  } finally {
-    loading.value = false
-  }
-}
-
-async function patchItem(id, partial) {
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    await ItemService.patch(id, partial)
-    await fetchAll()
-  } catch (err) {
-    errorMessage.value = err.message
-  } finally {
-    loading.value = false
-  }
-}
-
-function promptPatch(item) {
-  const newPrice = prompt('Enter new price:')
-  if (newPrice !== null && newPrice !== '') {
-    patchItem(item.id, { price: Number(newPrice) })
-  }
-}
-
-function startEdit(item) {
-  editForm.id = item.id
-  editForm.name = item.name
-  editForm.description = item.description || item.describtion || ''
-  editForm.price = item.price
-}
-
-function cancelEdit() {
-  editForm.id = ''
-  editForm.name = ''
-  editForm.description = ''
-  editForm.price = 0
-}
-
-onMounted(() => {
-  fetchAll()
-})
-</script>
-
-<template>
-  <h2>Vue Axios CRUD</h2>
-  <br>
-
-  <p v-if="loading">Loading...</p>
-  <br v-if="loading">
-
-  <p v-if="errorMessage">{{ errorMessage }}</p>
-  <br v-if="errorMessage">
-
-  <button @click="fetchAll">Refresh All (GET /api/items)</button>
-  <br><br>
-  <hr>
-  <br>
-
-  <h3>Create Item (POST /api/items)</h3>
-  <br>
-  <form @submit.prevent="createItem">
-    <label for="create-name">Name:</label>
-    <br>
-    <input id="create-name" v-model="createForm.name" placeholder="Item Name" required>
-    <br><br>
-
-    <label for="create-desc">Description:</label>
-    <br>
-    <input id="create-desc" v-model="createForm.description" placeholder="Item Description" required>
-    <br><br>
-
-    <label for="create-price">Price:</label>
-    <br>
-    <input id="create-price" v-model.number="createForm.price" type="number" placeholder="Item Price" required>
-    <br><br>
-
-    <button type="submit">Create Item</button>
-  </form>
-
-  <br>
-  <hr>
-  <br>
-
-  <h3>Update Item (PUT /api/items/:id)</h3>
-  <br>
-  <form @submit.prevent="updateItem">
-    <label for="edit-id">Item ID:</label>
-    <br>
-    <input id="edit-id" v-model="editForm.id" placeholder="Item ID" required>
-    <br><br>
-
-    <label for="edit-name">Name:</label>
-    <br>
-    <input id="edit-name" v-model="editForm.name" placeholder="Item Name" required>
-    <br><br>
-
-    <label for="edit-desc">Description:</label>
-    <br>
-    <input id="edit-desc" v-model="editForm.description" placeholder="Item Description" required>
-    <br><br>
-
-    <label for="edit-price">Price:</label>
-    <br>
-    <input id="edit-price" v-model.number="editForm.price" type="number" placeholder="Item Price" required>
-    <br><br>
-
-    <button type="submit">Update Item</button>
-    <button type="button" @click="cancelEdit">Clear</button>
-  </form>
-
-  <br>
-  <hr>
-  <br>
-
-  <h3>Get Item By ID (GET /api/items/:id)</h3>
-  <br>
-  <input v-model="searchId" placeholder="Enter Item ID">
-  <br><br>
-  <button @click="fetchById(searchId)">Fetch By ID</button>
-  <br><br>
-
-  <div v-if="selectedItem">
-    <h4>Item Details</h4>
-    <p>ID: {{ selectedItem.id }}</p>
-    <br>
-    <p>Name: {{ selectedItem.name }}</p>
-    <br>
-    <p>Description: {{ selectedItem.description || selectedItem.describtion }}</p>
-    <br>
-    <p>Price: ${{ selectedItem.price }}</p>
-    <br>
-    <button @click="selectedItem = null">Close Details</button>
-  </div>
-
-  <br>
-  <hr>
-  <br>
-
-  <h3>Items List (GET /api/items)</h3>
-  <br>
-
-  <p v-if="items.length === 0">No items loaded.</p>
-
-  <ul v-if="items.length > 0">
-    <li v-for="item in items" :key="item.id">
-      <span>{{ item.name }} - {{ item.description || item.describtion }} - ${{ item.price }} (ID: {{ item.id }})</span>
-      <br><br>
-      <button @click="fetchById(item.id)">View Details</button>
-      <button @click="startEdit(item)">Edit</button>
-      <button @click="deleteItem(item.id)">Delete</button>
-      <button @click="promptPatch(item)">Patch</button>
-      <br><br>
-    </li>
-  </ul>
-</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
+  }
+}
+
+async function fetchById(id) {
+  if (!id) return
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const res = await ItemService.getOne(id)
+    selectedItem.value = res.data
+  } catch (err) {
+    errorMessage.value = err.message || 'Item not found'
+  } 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>Vue 3 Axios CRUD with Child Components</h1>
+      <p>Modular Architecture: 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 Details</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;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f4f6f8;
+  color: #333333;
+}
+</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: #1a1a1a;
+  margin-bottom: 4px;
+}
+
+.app-header p {
+  color: #666666;
+  font-size: 14px;
+}
+
+.error-banner {
+  background-color: #ffebe9;
+  color: #cf222e;
+  border: 1px solid #ff818266;
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  font-size: 14px;
+}
+
+.detail-card {
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+
+.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;
+  color: #24292f;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #57606a;
+  font-size: 14px;
+}
+
+.detail-body p {
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+</style>