wad-lab 1.2.2 → 1.2.3

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

@@ -1,250 +1,92 @@
-<template>
-  <div class="departments-page">
-    <header class="page-header">
-      <h1>Departments</h1>
-      <p>Manage company departments.</p>
-    </header>
-
-    <section class="card form-card">
-      <h2>Add New Department</h2>
-      <form @submit.prevent="createDepartment" class="form">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="dept-name">Department Name</label>
-            <input
-              id="dept-name"
-              v-model="form.name"
-              type="text"
-              required
-              placeholder="e.g. Finance"
-            />
-          </div>
-          <div class="form-group">
-            <label for="dept-code">Department Code</label>
-            <input
-              id="dept-code"
-              v-model="form.code"
-              type="text"
-              required
-              placeholder="e.g. FIN"
-            />
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">Add Department</button>
-      </form>
-    </section>
-
-    <section class="card table-card">
-      <h2>All Departments</h2>
-      <table class="data-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Name</th>
-            <th>Code</th>
-            <th>Actions</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="handlePatch(dept.id, dept.code)" class="btn btn-warning">Patch</button>
-              <button @click="deleteDepartment(dept.id)" class="btn btn-danger">Delete</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue'
-import api from '../services/api'
-
-const departments = ref([])
-const form = reactive({
-  name: '',
-  code: ''
-})
-
-const fetchDepartments = async () => {
-  try {
-    const res = await api.get('/departments')
-    departments.value = Array.isArray(res.data) ? res.data : []
-  } catch (err) {
-    departments.value = []
-  }
-}
-
-const createDepartment = async () => {
-  try {
-    await api.post('/departments', {
-      name: form.name,
-      code: form.code
-    })
-    form.name = ''
-    form.code = ''
-    await fetchDepartments()
-  } catch (err) {
-    alert('Failed to add department')
-  }
-}
-
-const deleteDepartment = async (id) => {
-  try {
-    await api.delete(`/departments/${id}`)
-    await fetchDepartments()
-  } catch (err) {
-    alert('Failed to delete department')
-  }
-}
-
-const handlePatch = async (id, code) => {
-  const newCode = prompt('New code:', code)
-  if (newCode) {
-    try {
-      await api.patch(`/departments/${id}`, { code: newCode })
-      await fetchDepartments()
-    } catch (err) {
-      alert('Failed to patch department')
-    }
-  }
-}
-
-onMounted(() => {
-  fetchDepartments()
-})
-</script>
-
-<style scoped>
-.departments-page {
-  max-width: 900px;
-}
-
-.page-header {
-  margin-bottom: 24px;
-}
-
-.page-header h1 {
-  font-size: 1.75rem;
-  margin-bottom: 6px;
-  color: #1e293b;
-}
-
-.page-header p {
-  color: #64748b;
-}
-
-.card {
-  background: #ffffff;
-  padding: 24px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 24px;
-}
-
-.card h2 {
-  font-size: 1.2rem;
-  margin-bottom: 16px;
-  color: #334155;
-}
-
-.form-row {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.form-group {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #475569;
-}
-
-input {
-  padding: 8px 12px;
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-  font-size: 0.95rem;
-}
-
-input:focus {
-  outline: none;
-  border-color: #2563eb;
-}
-
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: opacity 0.2s;
-}
-
-.btn:hover {
-  opacity: 0.9;
-}
-
-.btn-primary {
-  background-color: #2563eb;
-  color: #ffffff;
-}
-
-.btn-danger {
-  background-color: #ef4444;
-  color: #ffffff;
-}
-
-.btn-warning {
-  background-color: #f59e0b;
-  color: #ffffff;
-  margin-right: 8px;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.data-table th {
-  background-color: #f8fafc;
-  font-size: 0.875rem;
-  color: #475569;
-  font-weight: 600;
-}
-
-.data-table td code {
-  background-color: #f1f5f9;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-}
-
-.empty {
-  text-align: center;
-  color: #94a3b8;
-  padding: 24px;
-}
-</style>
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../services/api'
+import ItemTable from '../components/ItemTable.vue'
+
+const departments = ref([])
+const newName = ref('')
+const newCode = ref('')
+
+const columns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Department Name' },
+  { key: 'code', label: 'Code' }
+]
+
+async function fetchDepartments() {
+  const res = await api.get('/departments')
+  departments.value = res.data || []
+}
+
+async function handleAdd() {
+  if (!newName.value || !newCode.value) return
+  await api.post('/departments', { name: newName.value, code: newCode.value })
+  newName.value = ''
+  newCode.value = ''
+  await fetchDepartments()
+}
+
+async function handlePatch(dept) {
+  const code = prompt('Enter new code:', dept.code)
+  if (!code || code === dept.code) return
+  await api.patch('/departments/' + dept.id, { code })
+  await fetchDepartments()
+}
+
+async function handleDelete(id) {
+  if (!confirm('Delete this department?')) return
+  await api.delete('/departments/' + id)
+  await fetchDepartments()
+}
+
+onMounted(() => {
+  fetchDepartments()
+})
+</script>
+
+<template>
+  <div class="dept-view">
+    <h2>Departments</h2>
+
+    <form @submit.prevent="handleAdd" class="add-form">
+      <input v-model="newName" placeholder="Department Name" required />
+      <input v-model="newCode" placeholder="Code" required />
+      <button type="submit" class="btn btn-primary">Add</button>
+    </form>
+
+    <ItemTable
+      :columns="columns"
+      :items="departments"
+      @patch="handlePatch"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
+
+<style scoped>
+.dept-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.add-form {
+  display: flex;
+  gap: 10px;
+}
+
+.add-form input {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+}
+
+.btn-primary {
+  background: #0284c7;
+  color: #fff;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+</style>

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

@@ -1,181 +1,59 @@
-<template>
-  <div class="employee-detail-page">
-    <div class="header-actions">
-      <router-link to="/company/employees" class="btn btn-secondary">&larr; Back to Employees</router-link>
-      <button @click="handleQuickPatchSalary" class="btn btn-warning">Quick Patch Salary</button>
-    </div>
-
-    <div v-if="loading" class="card">
-      <p>Loading employee details...</p>
-    </div>
-
-    <div v-else-if="error" class="card error-card">
-      <p>{{ error }}</p>
-    </div>
-
-    <div v-else-if="employee" class="card detail-card">
-      <header class="detail-header">
-        <h1>{{ employee.name }}</h1>
-        <span class="badge">ID: {{ employee.id }}</span>
-      </header>
-
-      <div class="detail-grid">
-        <div class="detail-item">
-          <span class="detail-label">Email Address</span>
-          <span class="detail-value">{{ employee.email }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="detail-label">Department ID</span>
-          <span class="detail-value">{{ employee.departmentId }}</span>
-        </div>
-
-        <div class="detail-item">
-          <span class="detail-label">Salary</span>
-          <span class="detail-value">${{ Number(employee.salary).toLocaleString() }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import api from '../services/api'
-
-const route = useRoute()
-const employee = ref(null)
-const loading = ref(true)
-const error = ref('')
-
-const fetchEmployee = async () => {
-  const id = route.params.id
-  loading.value = true
-  error.value = ''
-  try {
-    const res = await api.get(`/employees/${id}`)
-    employee.value = res.data
-  } catch (err) {
-    error.value = 'Failed to load employee details.'
-  } finally {
-    loading.value = false
-  }
-}
-
-const handleQuickPatchSalary = async () => {
-  if (!employee.value) return
-  const id = route.params.id
-  const salary = prompt('New salary:', employee.value.salary)
-  if (salary !== null && salary !== '') {
-    try {
-      await api.patch(`/employees/${id}`, { salary: Number(salary) })
-      await fetchEmployee()
-    } catch (err) {
-      error.value = 'Failed to patch employee salary.'
-    }
-  }
-}
-
-onMounted(() => {
-  fetchEmployee()
-})
-</script>
-
-<style scoped>
-.employee-detail-page {
-  max-width: 650px;
-}
-
-.header-actions {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  transition: opacity 0.2s;
-}
-
-.btn:hover {
-  opacity: 0.9;
-}
-
-.btn-secondary {
-  background-color: #64748b;
-  color: #ffffff;
-}
-
-.btn-warning {
-  background-color: #f59e0b;
-  color: #ffffff;
-}
-
-.card {
-  background: #ffffff;
-  padding: 28px;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.error-card {
-  color: #ef4444;
-}
-
-.detail-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e2e8f0;
-  padding-bottom: 16px;
-  margin-bottom: 20px;
-}
-
-.detail-header h1 {
-  font-size: 1.5rem;
-  color: #1e293b;
-}
-
-.badge {
-  background-color: #e2e8f0;
-  color: #475569;
-  font-size: 0.85rem;
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: 20px;
-}
-
-.detail-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.detail-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.detail-label {
-  font-size: 0.85rem;
-  color: #64748b;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.detail-value {
-  font-size: 1.1rem;
-  color: #0f172a;
-  font-weight: 600;
-}
-</style>
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import api from '../services/api'
+import ItemDetail from '../components/ItemDetail.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const employee = ref(null)
+const departments = ref([])
+
+const departmentName = computed(() => {
+  if (!employee.value) return 'N/A'
+  const dept = departments.value.find(d => d.id === employee.value.departmentId)
+  return dept ? dept.name : 'Dept #' + employee.value.departmentId
+})
+
+async function fetchEmployee() {
+  try {
+    const [empRes, deptRes] = await Promise.all([
+      api.get('/employees/' + route.params.id),
+      api.get('/departments').catch(() => ({ data: [] }))
+    ])
+    employee.value = empRes.data
+    departments.value = deptRes.data || []
+  } catch (err) {
+    employee.value = null
+  }
+}
+
+async function handlePatchSalary() {
+  if (!employee.value) return
+  const salary = prompt('Enter new salary:', employee.value.salary)
+  if (!salary || Number(salary) === Number(employee.value.salary)) return
+  await api.patch('/employees/' + employee.value.id, { salary: Number(salary) })
+  await fetchEmployee()
+}
+
+async function handleDelete(id) {
+  if (!confirm('Delete this employee?')) return
+  await api.delete('/employees/' + id)
+  router.push('/company/employees')
+}
+
+onMounted(() => {
+  fetchEmployee()
+})
+</script>
+
+<template>
+  <ItemDetail
+    :item="employee"
+    :department-name="departmentName"
+    @patch-salary="handlePatchSalary"
+    @delete="handleDelete"
+    @back="router.push('/company/employees')"
+  />
+</template>