wad-lab 1.2.2 → 1.2.3

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

@@ -1,285 +1,261 @@
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-
-const API_URL = 'http://localhost:8080/api/items'
-
-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 fetch(API_URL)
-    if (!res.ok) throw new Error('Failed to fetch items: ' + res.statusText)
-    items.value = await res.json()
-  } 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 fetch(API_URL + '/' + id)
-    if (!res.ok) throw new Error('Failed to fetch item ' + id + ': ' + res.statusText)
-    selectedItem.value = await res.json()
-  } catch (err) {
-    errorMessage.value = err.message
-  } finally {
-    loading.value = false
-  }
-}
-
-async function createItem() {
-  if (!createForm.name) return
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    const res = await fetch(API_URL, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        name: createForm.name,
-        description: createForm.description,
-        describtion: createForm.description,
-        price: Number(createForm.price)
-      })
-    })
-    if (!res.ok) throw new Error('Failed to create item: ' + res.statusText)
-    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 {
-    const res = await fetch(API_URL + '/' + editForm.id, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        id: editForm.id,
-        name: editForm.name,
-        description: editForm.description,
-        describtion: editForm.description,
-        price: Number(editForm.price)
-      })
-    })
-    if (!res.ok) throw new Error('Failed to update item: ' + res.statusText)
-    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 {
-    const res = await fetch(API_URL + '/' + id, {
-      method: 'DELETE'
-    })
-    if (!res.ok) throw new Error('Failed to delete item: ' + res.statusText)
-    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 {
-    const res = await fetch(`http://localhost:8080/api/items/${id}`, {
-      method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(partial)
-    })
-    if (!res.ok) throw new Error('Failed to patch item: ' + res.statusText)
-    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 Fetch 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 FetchTable from './components/FetchTable.vue'
+import FetchFormModal from './components/FetchFormModal.vue'
+import FetchPatchModal from './components/FetchPatchModal.vue'
+
+const API_URL = 'http://localhost:8080/api/items'
+
+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 fetch(API_URL)
+    if (!res.ok) throw new Error('Failed to fetch items: ' + res.statusText)
+    items.value = await res.json()
+  } catch (err) {
+    errorMessage.value = err.message
+  } 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) {
+      const res = await fetch(API_URL + '/' + payload.id, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+      if (!res.ok) throw new Error('Failed to update item: ' + res.statusText)
+    } else {
+      const res = await fetch(API_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+      if (!res.ok) throw new Error('Failed to create item: ' + res.statusText)
+    }
+    isFormModalOpen.value = false
+    await fetchAll()
+  } catch (err) {
+    errorMessage.value = err.message
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handlePatchSubmit({ id, partial }) {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const res = await fetch(API_URL + '/' + id, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(partial)
+    })
+    if (!res.ok) throw new Error('Failed to patch item: ' + res.statusText)
+    isPatchModalOpen.value = false
+    await fetchAll()
+  } catch (err) {
+    errorMessage.value = err.message
+  } 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 {
+    const res = await fetch(API_URL + '/' + id, {
+      method: 'DELETE'
+    })
+    if (!res.ok) throw new Error('Failed to delete item: ' + res.statusText)
+    if (selectedItem.value && selectedItem.value.id === id) {
+      selectedItem.value = null
+    }
+    await fetchAll()
+  } catch (err) {
+    errorMessage.value = err.message
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleViewDetails(item) {
+  selectedItem.value = item
+}
+
+onMounted(() => {
+  fetchAll()
+})
+</script>
+
+<template>
+  <div class="app-container">
+    <header class="app-header">
+      <h1>Vue Fetch CRUD with Child Components</h1>
+      <p>Modular: FetchTable, FetchFormModal, FetchPatchModal</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>
+
+    <FetchTable
+      :items="items"
+      :loading="loading"
+      @open-create="openCreateModal"
+      @edit="openEditModal"
+      @patch="openPatchModal"
+      @delete="handleDelete"
+      @view-details="handleViewDetails"
+      @refresh="fetchAll"
+    />
+
+    <FetchFormModal
+      :show="isFormModalOpen"
+      :is-edit="isEditMode"
+      :item-data="activeItemData"
+      @close="isFormModalOpen = false"
+      @submit="handleFormSubmit"
+    />
+
+    <FetchPatchModal
+      :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>