wad-lab 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wad-lab",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Interactive CLI for WAD Lab starter templates compatible with Node 12+",
   "bin": {
     "wad-lab": "bin/index.js"

package/templates/fullstack-springboot-vue/frontend/vue-axios-basic/src/App.vue

@@ -1,429 +1,241 @@
-<template>
-  <div class="container">
-    <header class="header">
-      <h1>Company Directory</h1>
-      <p>Vue 3 + Axios Direct CRUD</p>
-    </header>
-
-    <div class="grid">
-      <section class="card">
-        <h2>Departments</h2>
-        
-        <form @submit.prevent="createDepartment" class="form">
-          <div class="form-group">
-            <label for="dept-name">Department Name</label>
-            <input
-              id="dept-name"
-              v-model="deptForm.name"
-              type="text"
-              required
-              placeholder="e.g. Engineering"
-            />
-          </div>
-          <div class="form-group">
-            <label for="dept-code">Department Code</label>
-            <input
-              id="dept-code"
-              v-model="deptForm.code"
-              type="text"
-              required
-              placeholder="e.g. ENG"
-            />
-          </div>
-          <button type="submit" class="btn btn-primary">Add Department</button>
-        </form>
-
-        <div class="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>Name</th>
-                <th>Code</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="departments.length === 0">
-                <td colspan="4" class="empty">No departments found</td>
-              </tr>
-              <tr v-for="dept in departments" :key="dept.id">
-                <td>{{ dept.id }}</td>
-                <td>{{ dept.name }}</td>
-                <td><code>{{ dept.code }}</code></td>
-                <td>
-                  <button @click="patchDepartment(dept.id, dept.code)" class="btn">Patch</button>
-                  <button @click="deleteDepartment(dept.id)" class="btn btn-danger">Delete</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <section class="card">
-        <h2>Employees</h2>
-
-        <form @submit.prevent="createEmployee" class="form">
-          <div class="form-group">
-            <label for="emp-name">Full Name</label>
-            <input
-              id="emp-name"
-              v-model="empForm.name"
-              type="text"
-              required
-              placeholder="e.g. Jane Doe"
-            />
-          </div>
-          <div class="form-group">
-            <label for="emp-email">Email Address</label>
-            <input
-              id="emp-email"
-              v-model="empForm.email"
-              type="email"
-              required
-              placeholder="e.g. jane@example.com"
-            />
-          </div>
-          <div class="form-group">
-            <label for="emp-dept">Department</label>
-            <select id="emp-dept" v-model="empForm.departmentId" required>
-              <option value="" disabled>Select Department</option>
-              <option v-for="dept in departments" :key="dept.id" :value="dept.id">
-                {{ dept.name }} ({{ dept.code }})
-              </option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label for="emp-salary">Salary</label>
-            <input
-              id="emp-salary"
-              v-model.number="empForm.salary"
-              type="number"
-              min="0"
-              step="any"
-              required
-              placeholder="e.g. 75000"
-            />
-          </div>
-          <button type="submit" class="btn btn-primary">Add Employee</button>
-        </form>
-
-        <div class="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>ID</th>
-                <th>Name</th>
-                <th>Email</th>
-                <th>Department</th>
-                <th>Salary</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-if="employees.length === 0">
-                <td colspan="6" class="empty">No employees found</td>
-              </tr>
-              <tr v-for="emp in employees" :key="emp.id">
-                <td>{{ emp.id }}</td>
-                <td>{{ emp.name }}</td>
-                <td>{{ emp.email }}</td>
-                <td>{{ getDepartmentName(emp.departmentId) }}</td>
-                <td>${{ Number(emp.salary).toLocaleString() }}</td>
-                <td>
-                  <button @click="patchEmployeeSalary(emp.id, emp.salary)" class="btn">Patch</button>
-                  <button @click="deleteEmployee(emp.id)" class="btn btn-danger">Delete</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import api from './services/api'
-
-const departments = ref([])
-const employees = ref([])
-
-const deptForm = reactive({
-  name: '',
-  code: ''
-})
-
-const empForm = reactive({
-  name: '',
-  email: '',
-  departmentId: '',
-  salary: ''
-})
-
-const fetchDepartments = async () => {
-  try {
-    const response = await api.get('/departments')
-    departments.value = response.data
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const fetchEmployees = async () => {
-  try {
-    const response = await api.get('/employees')
-    employees.value = response.data
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const createDepartment = async () => {
-  try {
-    await api.post('/departments', {
-      name: deptForm.name,
-      code: deptForm.code
-    })
-    deptForm.name = ''
-    deptForm.code = ''
-    await fetchDepartments()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const deleteDepartment = async (id) => {
-  try {
-    await api.delete(`/departments/${id}`)
-    await fetchDepartments()
-    await fetchEmployees()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const createEmployee = async () => {
-  try {
-    await api.post('/employees', {
-      name: empForm.name,
-      email: empForm.email,
-      departmentId: Number(empForm.departmentId),
-      salary: Number(empForm.salary)
-    })
-    empForm.name = ''
-    empForm.email = ''
-    empForm.departmentId = ''
-    empForm.salary = ''
-    await fetchEmployees()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const deleteEmployee = async (id) => {
-  try {
-    await api.delete(`/employees/${id}`)
-    await fetchEmployees()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const patchDepartment = async (id, currentCode) => {
-  const code = prompt('Enter new department code:', currentCode)
-  if (!code || code === currentCode) return
-  try {
-    await api.patch(`/departments/${id}`, { code })
-    await fetchDepartments()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const patchEmployeeSalary = async (id, currentSalary) => {
-  const salary = prompt('Enter new salary:', currentSalary)
-  if (!salary || Number(salary) === Number(currentSalary)) return
-  try {
-    await api.patch(`/employees/${id}`, { salary: Number(salary) })
-    await fetchEmployees()
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const getDepartmentName = (deptId) => {
-  const dept = departments.value.find((d) => d.id === deptId)
-  return dept ? dept.name : `Dept #${deptId}`
-}
-
-onMounted(() => {
-  fetchDepartments()
-  fetchEmployees()
-})
-</script>
-
-<style>
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  background-color: #f4f5f7;
-  color: #333333;
-  line-height: 1.5;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 32px 16px;
-}
-
-.header {
-  margin-bottom: 24px;
-}
-
-.header h1 {
-  font-size: 28px;
-  color: #1a1a1a;
-}
-
-.header p {
-  color: #666666;
-  font-size: 14px;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
-}
-
-@media (min-width: 900px) {
-  .grid {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.card {
-  background: #ffffff;
-  border: 1px solid #e1e4e8;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.card h2 {
-  font-size: 20px;
-  margin-bottom: 16px;
-  color: #222222;
-  border-bottom: 1px solid #edf0f2;
-  padding-bottom: 8px;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.form-group label {
-  font-size: 13px;
-  font-weight: 600;
-  color: #444444;
-}
-
-.form-group input,
-.form-group select {
-  padding: 8px 10px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  font-size: 14px;
-  background-color: #ffffff;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #0066cc;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 600;
-  transition: background-color 0.15s ease;
-}
-
-.btn-primary {
-  background-color: #0066cc;
-  color: #ffffff;
-}
-
-.btn-primary:hover {
-  background-color: #0052a3;
-}
-
-.btn-danger {
-  background-color: #d9383a;
-  color: #ffffff;
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-danger:hover {
-  background-color: #b8282a;
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  margin-top: 8px;
-}
-
-th, td {
-  text-align: left;
-  padding: 8px 10px;
-  border-bottom: 1px solid #eeeeee;
-}
-
-th {
-  background-color: #fafbfc;
-  color: #555555;
-  font-weight: 600;
-}
-
-code {
-  background: #f0f0f0;
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-size: 12px;
-}
-
-.empty {
-  text-align: center;
-  color: #888888;
-  padding: 16px;
-}
-</style>
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from './services/api'
+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 api.get('/items')
+    items.value = res.data || []
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to fetch 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 api.put('/items/' + payload.id, payload)
+    } else {
+      await api.post('/items', 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 api.patch('/items/' + 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 api.delete('/items/' + 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 Basic CRUD</h1>
+      <p>Direct Axios with 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;
+  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>