wad-lab 1.2.2 → 1.2.3

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

@@ -1,315 +1,67 @@
-<template>
-  <div class="employees-page">
-    <header class="page-header">
-      <h1>Employees</h1>
-      <p>Manage company employees and view their profiles.</p>
-    </header>
-
-    <section class="card form-card">
-      <h2>Add New Employee</h2>
-      <form @submit.prevent="createEmployee" class="form">
-        <div class="form-row">
-          <div class="form-group">
-            <label for="emp-name">Full Name</label>
-            <input
-              id="emp-name"
-              v-model="form.name"
-              type="text"
-              required
-              placeholder="e.g. Jane Doe"
-            />
-          </div>
-          <div class="form-group">
-            <label for="emp-email">Email</label>
-            <input
-              id="emp-email"
-              v-model="form.email"
-              type="email"
-              required
-              placeholder="e.g. jane@example.com"
-            />
-          </div>
-        </div>
-        <div class="form-row">
-          <div class="form-group">
-            <label for="emp-dept">Department</label>
-            <select id="emp-dept" v-model="form.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="form.salary"
-              type="number"
-              min="0"
-              step="any"
-              required
-              placeholder="e.g. 75000"
-            />
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">Add Employee</button>
-      </form>
-    </section>
-
-    <section class="card table-card">
-      <h2>All Employees</h2>
-      <table 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-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 class="action-cell">
-              <router-link :to="'/company/employees/' + emp.id" class="btn btn-info">View</router-link>
-              <button @click="handlePatch(emp.id, emp.salary)" class="btn btn-warning">Patch</button>
-              <button @click="deleteEmployee(emp.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 employees = ref([])
-const departments = ref([])
-
-const form = reactive({
-  name: '',
-  email: '',
-  departmentId: '',
-  salary: ''
-})
-
-const fetchDepartments = async () => {
-  try {
-    const res = await api.get('/departments')
-    departments.value = Array.isArray(res.data) ? res.data : []
-  } catch (err) {
-    departments.value = []
-  }
-}
-
-const fetchEmployees = async () => {
-  try {
-    const res = await api.get('/employees')
-    employees.value = Array.isArray(res.data) ? res.data : []
-  } catch (err) {
-    employees.value = []
-  }
-}
-
-const createEmployee = async () => {
-  try {
-    await api.post('/employees', {
-      name: form.name,
-      email: form.email,
-      departmentId: Number(form.departmentId),
-      salary: Number(form.salary)
-    })
-    form.name = ''
-    form.email = ''
-    form.departmentId = ''
-    form.salary = ''
-    await fetchEmployees()
-  } catch (err) {
-    alert('Failed to add employee')
-  }
-}
-
-const deleteEmployee = async (id) => {
-  try {
-    await api.delete(`/employees/${id}`)
-    await fetchEmployees()
-  } catch (err) {
-    alert('Failed to delete employee')
-  }
-}
-
-const handlePatch = async (id, salary) => {
-  const newSalary = prompt('New salary:', salary)
-  if (newSalary !== null && newSalary !== '') {
-    try {
-      await api.patch(`/employees/${id}`, { salary: Number(newSalary) })
-      await fetchEmployees()
-    } catch (err) {
-      alert('Failed to patch employee')
-    }
-  }
-}
-
-const getDepartmentName = (deptId) => {
-  const dept = departments.value.find((d) => d.id === deptId)
-  return dept ? dept.name : `Dept #${deptId}`
-}
-
-onMounted(() => {
-  fetchDepartments()
-  fetchEmployees()
-})
-</script>
-
-<style scoped>
-.employees-page {
-  max-width: 960px;
-}
-
-.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,
-select {
-  padding: 8px 12px;
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-  font-size: 0.95rem;
-}
-
-input:focus,
-select:focus {
-  outline: none;
-  border-color: #2563eb;
-}
-
-.btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 0.2s;
-}
-
-.btn:hover {
-  opacity: 0.9;
-}
-
-.btn-primary {
-  background-color: #2563eb;
-  color: #ffffff;
-}
-
-.btn-info {
-  background-color: #0284c7;
-  color: #ffffff;
-  font-size: 0.875rem;
-  padding: 6px 12px;
-}
-
-.btn-danger {
-  background-color: #ef4444;
-  color: #ffffff;
-  font-size: 0.875rem;
-  padding: 6px 12px;
-}
-
-.btn-warning {
-  background-color: #f59e0b;
-  color: #ffffff;
-  font-size: 0.875rem;
-  padding: 6px 12px;
-}
-
-.action-cell {
-  display: flex;
-  gap: 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;
-}
-
-.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 employees = ref([])
+const departments = ref([])
+
+const columns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  {
+    key: 'salary',
+    label: 'Salary',
+    format: (val) => '$' + Number(val || 0).toLocaleString()
+  }
+]
+
+async function fetchData() {
+  const [empRes, deptRes] = await Promise.all([
+    api.get('/employees'),
+    api.get('/departments').catch(() => ({ data: [] }))
+  ])
+  employees.value = empRes.data || []
+  departments.value = deptRes.data || []
+}
+
+async function handlePatch(emp) {
+  const salary = prompt('Enter new salary:', emp.salary)
+  if (!salary || Number(salary) === Number(emp.salary)) return
+  await api.patch('/employees/' + emp.id, { salary: Number(salary) })
+  await fetchData()
+}
+
+async function handleDelete(id) {
+  if (!confirm('Delete this employee?')) return
+  await api.delete('/employees/' + id)
+  await fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<template>
+  <div class="emp-view">
+    <h2>Employees</h2>
+
+    <ItemTable
+      :columns="columns"
+      :items="employees"
+      detail-route-prefix="/company/employees"
+      @patch="handlePatch"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
+
+<style scoped>
+.emp-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

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

@@ -1,92 +1,41 @@
-<template>
-  <div class="app-container">
-    <header class="app-header">
-      <div class="header-inner">
-        <h1 class="logo">Company Admin</h1>
-        <nav class="nav">
-          <router-link to="/" class="nav-link">Dashboard</router-link>
-          <router-link to="/departments" class="nav-link">Departments</router-link>
-          <router-link to="/employees" class="nav-link">Employees</router-link>
-        </nav>
-      </div>
-    </header>
+<script setup>
+import NavBar from './components/NavBar.vue'
+</script>
 
+<template>
+  <div class="app-layout">
+    <NavBar />
     <main class="main-content">
       <router-view />
     </main>
   </div>
 </template>
 
-<script setup>
-</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;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f8fafc;
+  color: #334155;
 }
+</style>
 
-.app-container {
+<style scoped>
+.app-layout {
   min-height: 100vh;
-}
-
-.app-header {
-  background-color: #ffffff;
-  border-bottom: 1px solid #e1e4e8;
-  padding: 0 16px;
-}
-
-.header-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 60px;
-}
-
-.logo {
-  font-size: 18px;
-  font-weight: 700;
-  color: #1a1a1a;
-}
-
-.nav {
   display: flex;
-  gap: 16px;
-}
-
-.nav-link {
-  text-decoration: none;
-  color: #555555;
-  font-weight: 600;
-  font-size: 14px;
-  padding: 6px 10px;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-}
-
-.nav-link:hover {
-  color: #0066cc;
-  background-color: #f0f4f8;
-}
-
-.nav-link.router-link-exact-active {
-  color: #0066cc;
-  background-color: #e6f0fa;
+  flex-direction: column;
 }
 
 .main-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 24px 16px;
+  flex: 1;
+  max-width: 1000px;
+  width: 100%;
+  margin: 24px auto;
+  padding: 0 20px;
 }
 </style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-pinia/src/components/ItemFormModal.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: 'Form'
+  },
+  fields: {
+    type: Array,
+    default: () => []
+  },
+  initialData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const formData = reactive({})
+
+watch(
+  () => [props.show, props.initialData],
+  () => {
+    if (props.show) {
+      props.fields.forEach(f => {
+        formData[f.key] = props.initialData[f.key] !== undefined ? props.initialData[f.key] : ''
+      })
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  emit('submit', { ...formData })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ title }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div v-for="field in fields" :key="field.key" class="form-group">
+          <label :for="'f-' + field.key">{{ field.label }}</label>
+          <select
+            v-if="field.type === 'select'"
+            :id="'f-' + field.key"
+            v-model="formData[field.key]"
+            :required="field.required"
+          >
+            <option value="" disabled>{{ field.placeholder || 'Select...' }}</option>
+            <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </option>
+          </select>
+          <input
+            v-else
+            :id="'f-' + field.key"
+            v-model="formData[field.key]"
+            :type="field.type || 'text'"
+            :required="field.required"
+            :placeholder="field.placeholder || ''"
+          />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 16px;
+  margin: 0;
+  color: #24292f;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #57606a;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.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 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #0969da; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>