wad-lab 1.2.2 → 1.2.3

package/templates/fullstack-springboot-vue/frontend/vue-axios-router/src/views/EmployeeView.vue

@@ -1,219 +1,126 @@
-<script setup>
-import { ref, onMounted } from 'vue'
-import api from '../services/api'
-
-const employees = ref([])
-const departments = ref([])
-const loading = ref(false)
-const errorMessage = ref('')
-
-async function fetchData() {
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    const [empRes, deptRes] = await Promise.all([
-      api.get('/employees'),
-      api.get('/departments').catch(() => ({ data: [] }))
-    ])
-    employees.value = empRes.data
-    departments.value = deptRes.data
-  } catch (err) {
-    errorMessage.value = err.message || 'Failed to fetch employees'
-  } finally {
-    loading.value = false
-  }
-}
-
-function getDepartmentName(deptId) {
-  if (!deptId) return 'N/A'
-  const dept = departments.value.find(d => d.id === deptId)
-  return dept ? `${dept.name} (${dept.code})` : deptId
-}
-
-async function handlePatchEmployee(id, currentSalary) {
-  const salary = prompt('Enter new salary:', currentSalary)
-  if (!salary || Number(salary) === Number(currentSalary)) return
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    await api.patch(`/employees/${id}`, { salary: Number(salary) })
-    await fetchData()
-  } catch (err) {
-    errorMessage.value = err.message || 'Failed to patch employee'
-  } finally {
-    loading.value = false
-  }
-}
-
-async function handleDeleteEmployee(id) {
-  if (!confirm('Are you sure you want to delete this employee?')) return
-  loading.value = true
-  errorMessage.value = ''
-  try {
-    await api.delete(`/employees/${id}`)
-    await fetchData()
-  } catch (err) {
-    errorMessage.value = err.message || 'Failed to delete employee'
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  fetchData()
-})
-</script>
-
-<template>
-  <div class="employee-view">
-    <div class="view-header">
-      <h2>Employees</h2>
-      <router-link to="/add-employee" class="btn primary">+ Add Employee</router-link>
-    </div>
-
-    <div v-if="loading" class="state-msg">Loading...</div>
-    <div v-if="errorMessage" class="state-msg error">{{ errorMessage }}</div>
-
-    <div class="card">
-      <table v-if="employees.length > 0" class="data-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Email</th>
-            <th>Department</th>
-            <th>Salary</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="emp in employees" :key="emp.id">
-            <td>{{ emp.id }}</td>
-            <td><strong>{{ emp.name }}</strong></td>
-            <td>{{ emp.email }}</td>
-            <td>{{ getDepartmentName(emp.departmentId) }}</td>
-            <td>${{ Number(emp.salary || 0).toLocaleString() }}</td>
-            <td>
-              <button
-                @click="handlePatchEmployee(emp.id, emp.salary)"
-                class="btn"
-                :disabled="loading"
-              >
-                Patch
-              </button>
-              &nbsp;
-              <button
-                @click="handleDeleteEmployee(emp.id)"
-                class="btn danger"
-                :disabled="loading"
-              >
-                Delete
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p v-else class="empty-text">No employees found.</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.employee-view {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.view-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-h2 {
-  margin: 0;
-  color: #2c3e50;
-}
-
-.card {
-  background: #ffffff;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  padding: 18px;
-}
-
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  font-size: 14px;
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: bold;
-  display: inline-block;
-}
-
-.btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn.primary {
-  background: #27ae60;
-  color: #fff;
-}
-
-.btn.primary:hover:not(:disabled) {
-  background: #219150;
-}
-
-.btn.danger {
-  background: #e74c3c;
-  color: #fff;
-  padding: 5px 10px;
-  font-size: 12px;
-}
-
-.btn.danger:hover:not(:disabled) {
-  background: #c0392b;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-  padding: 10px 12px;
-  text-align: left;
-  border-bottom: 1px solid #eee;
-  font-size: 14px;
-}
-
-.data-table th {
-  background: #f8f9fa;
-  color: #555;
-  font-weight: 600;
-}
-
-.state-msg {
-  padding: 10px;
-  background-color: #f8f9fa;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.state-msg.error {
-  background-color: #fde8e8;
-  color: #c0392b;
-  border-color: #f5c6cb;
-}
-
-.empty-text {
-  color: #7f8c8d;
-  font-size: 14px;
-  margin: 0;
-}
-</style>
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../services/api'
+import ItemTable from '../components/ItemTable.vue'
+
+const employees = ref([])
+const departments = ref([])
+const loading = ref(false)
+const errorMessage = ref('')
+
+const columns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  {
+    key: 'departmentId',
+    label: 'Department',
+    format: (val) => {
+      const dept = departments.value.find(d => d.id === val)
+      return dept ? dept.name : (val ? 'Dept #' + val : 'N/A')
+    }
+  },
+  {
+    key: 'salary',
+    label: 'Salary',
+    format: (val) => '$' + Number(val || 0).toLocaleString()
+  }
+]
+
+async function fetchData() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const [empRes, deptRes] = await Promise.all([
+      api.get('/employees'),
+      api.get('/departments').catch(() => ({ data: [] }))
+    ])
+    employees.value = empRes.data || []
+    departments.value = deptRes.data || []
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to fetch employees'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handlePatch(emp) {
+  const salary = prompt('Enter new salary:', emp.salary)
+  if (!salary || Number(salary) === Number(emp.salary)) return
+  try {
+    await api.patch('/employees/' + emp.id, { salary: Number(salary) })
+    await fetchData()
+  } catch (err) {
+    alert(err.message || 'Failed to patch employee')
+  }
+}
+
+async function handleDelete(id) {
+  if (!confirm('Delete this employee?')) return
+  try {
+    await api.delete('/employees/' + id)
+    await fetchData()
+  } catch (err) {
+    alert(err.message || 'Failed to delete employee')
+  }
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <div class="view-container">
+    <div class="view-header">
+      <h2>Employee Directory</h2>
+      <router-link to="/add-employee" class="btn btn-primary">Add Employee</router-link>
+    </div>
+
+    <div v-if="errorMessage" class="error-msg">{{ errorMessage }}</div>
+
+    <ItemTable
+      :columns="columns"
+      :items="employees"
+      :loading="loading"
+      @patch="handlePatch"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
+
+<style scoped>
+.view-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.view-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.view-header h2 {
+  font-size: 20px;
+  color: #1e293b;
+}
+
+.error-msg {
+  background: #fee2e2;
+  color: #991b1b;
+  padding: 10px 14px;
+  border-radius: 6px;
+}
+
+.btn-primary {
+  background: #0969da;
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 14px;
+}
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-children/src/components/ItemDetail.vue

@@ -0,0 +1,115 @@
+<script setup>
+defineProps({
+  item: {
+    type: Object,
+    default: null
+  },
+  departmentName: {
+    type: String,
+    default: 'N/A'
+  }
+})
+
+const emit = defineEmits(['patch-salary', 'delete', 'back'])
+</script>
+
+<template>
+  <div v-if="item" class="detail-card">
+    <div class="card-header">
+      <h3>Employee Details</h3>
+      <button type="button" class="btn btn-secondary" @click="emit('back')">Back</button>
+    </div>
+    <div class="detail-grid">
+      <div class="info-row">
+        <span>Employee ID:</span>
+        <strong>{{ item.id }}</strong>
+      </div>
+      <div class="info-row">
+        <span>Full Name:</span>
+        <strong>{{ item.name }}</strong>
+      </div>
+      <div class="info-row">
+        <span>Email Address:</span>
+        <strong>{{ item.email }}</strong>
+      </div>
+      <div class="info-row">
+        <span>Department:</span>
+        <strong>{{ departmentName }}</strong>
+      </div>
+      <div class="info-row">
+        <span>Salary:</span>
+        <strong>${{ Number(item.salary || 0).toLocaleString() }}</strong>
+      </div>
+    </div>
+
+    <div class="detail-actions">
+      <button type="button" class="btn btn-patch" @click="emit('patch-salary')">Patch Salary</button>
+      <button type="button" class="btn btn-danger" @click="emit('delete', item.id)">Delete Employee</button>
+    </div>
+  </div>
+  <div v-else class="empty-state">
+    Employee not found.
+  </div>
+</template>
+
+<style scoped>
+.detail-card {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 24px;
+  max-width: 500px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+}
+
+.card-header h3 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.detail-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  padding: 6px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.detail-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.btn-secondary { background: #f1f5f9; color: #475569; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+
+.empty-state {
+  padding: 24px;
+  color: #64748b;
+}
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-children/src/components/ItemTable.vue

@@ -0,0 +1,104 @@
+<script setup>
+defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  detailRoutePrefix: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['patch', 'delete'])
+</script>
+
+<template>
+  <div class="table-container">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th v-for="col in columns" :key="col.key">{{ col.label }}</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="items.length === 0">
+          <td :colspan="columns.length + 1" class="empty">No records found.</td>
+        </tr>
+        <tr v-for="row in items" :key="row.id">
+          <td v-for="col in columns" :key="col.key">
+            {{ col.format ? col.format(row[col.key], row) : row[col.key] }}
+          </td>
+          <td class="action-cell">
+            <router-link
+              v-if="detailRoutePrefix"
+              :to="detailRoutePrefix + '/' + row.id"
+              class="btn btn-sm btn-info"
+            >
+              Details
+            </router-link>
+            <button type="button" class="btn btn-sm btn-patch" @click="emit('patch', row)">Patch</button>
+            <button type="button" class="btn btn-sm btn-danger" @click="emit('delete', row.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th, td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e1e4e8;
+  text-align: left;
+}
+
+th {
+  background-color: #f8fafc;
+  font-weight: 600;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 24px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+}
+
+.btn-info { background: #0284c7; color: #fff; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-children/src/components/SideBar.vue

@@ -0,0 +1,59 @@
+<script setup>
+</script>
+
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <h2>Company Portal</h2>
+    </div>
+    <nav class="nav-links">
+      <router-link to="/company" class="nav-item" exact-active-class="active">Overview</router-link>
+      <router-link to="/company/departments" class="nav-item" active-class="active">Departments</router-link>
+      <router-link to="/company/employees" class="nav-item" active-class="active">Employees</router-link>
+    </nav>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  width: 240px;
+  background-color: #2c3e50;
+  color: #fff;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.sidebar-header h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #ecf0f1;
+  margin: 0;
+}
+
+.nav-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-item {
+  color: #bdc3c7;
+  text-decoration: none;
+  padding: 10px 14px;
+  border-radius: 6px;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.nav-item:hover {
+  background-color: #34495e;
+  color: #ffffff;
+}
+
+.nav-item.active {
+  background-color: #3498db;
+  color: #ffffff;
+  font-weight: 600;
+}
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-children/src/views/CompanyLayout.vue

@@ -1,15 +1,6 @@
 <template>
   <div class="layout-container">
-    <aside class="sidebar">
-      <div class="sidebar-header">
-        <h2>Company Portal</h2>
-      </div>
-      <nav class="nav-links">
-        <router-link to="/company" class="nav-item" exact-active-class="active">Overview</router-link>
-        <router-link to="/company/departments" class="nav-item" active-class="active">Departments</router-link>
-        <router-link to="/company/employees" class="nav-item" active-class="active">Employees</router-link>
-      </nav>
-    </aside>
+    <SideBar />
     <main class="main-content">
       <router-view />
     </main>
@@ -17,6 +8,7 @@
 </template>
 
 <script setup>
+import SideBar from '../components/SideBar.vue'
 </script>
 
 <style scoped>
@@ -25,47 +17,6 @@
   min-height: 100vh;
 }
 
-.sidebar {
-  width: 240px;
-  background-color: #2c3e50;
-  color: #fff;
-  padding: 24px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.sidebar-header h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #ecf0f1;
-}
-
-.nav-links {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.nav-item {
-  color: #bdc3c7;
-  text-decoration: none;
-  padding: 10px 14px;
-  border-radius: 6px;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.nav-item:hover {
-  background-color: #34495e;
-  color: #ffffff;
-}
-
-.nav-item.active {
-  background-color: #3498db;
-  color: #ffffff;
-  font-weight: 600;
-}
-
 .main-content {
   flex: 1;
   padding: 32px;