wad-lab 1.2.2 → 1.2.3

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

@@ -0,0 +1,207 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'department'
+  },
+  departments: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const deptForm = reactive({ name: '', code: '' })
+const empForm = reactive({ name: '', email: '', departmentId: '', salary: '' })
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      deptForm.name = ''
+      deptForm.code = ''
+      empForm.name = ''
+      empForm.email = ''
+      empForm.departmentId = ''
+      empForm.salary = ''
+    }
+  }
+)
+
+function submitDept() {
+  if (!deptForm.name || !deptForm.code) return
+  emit('submit', {
+    type: 'department',
+    data: { name: deptForm.name, code: deptForm.code }
+  })
+}
+
+function submitEmp() {
+  if (!empForm.name || !empForm.email || !empForm.departmentId) return
+  emit('submit', {
+    type: 'employee',
+    data: {
+      name: empForm.name,
+      email: empForm.email,
+      departmentId: Number(empForm.departmentId),
+      salary: Number(empForm.salary) || 0
+    }
+  })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ type === 'department' ? 'Add Department' : 'Add Employee' }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <div class="modal-body">
+        <form v-if="type === 'department'" @submit.prevent="submitDept" class="form">
+          <div class="form-group">
+            <label for="dept-name">Department Name</label>
+            <input id="dept-name" v-model="deptForm.name" 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" required placeholder="e.g. ENG" />
+          </div>
+          <div class="modal-actions">
+            <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+            <button type="submit" class="btn btn-primary">Add Department</button>
+          </div>
+        </form>
+
+        <form v-else @submit.prevent="submitEmp" class="form">
+          <div class="form-group">
+            <label for="emp-name">Full Name</label>
+            <input id="emp-name" v-model="empForm.name" 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" required placeholder="75000" />
+          </div>
+          <div class="modal-actions">
+            <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+            <button type="submit" class="btn btn-primary">Add Employee</button>
+          </div>
+        </form>
+      </div>
+    </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-body {
+  padding: 20px;
+}
+
+.form {
+  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: #1f883d; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>

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

@@ -0,0 +1,64 @@
+<script setup>
+defineProps({
+  totalDepartments: {
+    type: Number,
+    default: 0
+  },
+  totalEmployees: {
+    type: Number,
+    default: 0
+  },
+  totalPayroll: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+
+<template>
+  <div class="stats-grid">
+    <div class="stat-card">
+      <h3>Total Departments</h3>
+      <p class="stat-value">{{ totalDepartments }}</p>
+    </div>
+    <div class="stat-card">
+      <h3>Total Employees</h3>
+      <p class="stat-value">{{ totalEmployees }}</p>
+    </div>
+    <div class="stat-card">
+      <h3>Total Payroll</h3>
+      <p class="stat-value">${{ Number(totalPayroll).toLocaleString() }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.stat-card h3 {
+  font-size: 13px;
+  text-transform: uppercase;
+  color: #666666;
+  margin-bottom: 6px;
+  letter-spacing: 0.5px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #0969da;
+}
+</style>

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

@@ -0,0 +1,195 @@
+<script setup>
+defineProps({
+  departments: {
+    type: Array,
+    default: () => []
+  },
+  employees: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits([
+  'create-department',
+  'create-employee',
+  'patch-department',
+  'delete-department',
+  'patch-employee',
+  'delete-employee'
+])
+
+function getDepartmentName(deptId, deptList) {
+  const dept = deptList.find(d => d.id === deptId)
+  return dept ? dept.name : (deptId ? 'Dept #' + deptId : 'N/A')
+}
+</script>
+
+<template>
+  <div class="main-grid">
+    <section class="card">
+      <div class="card-header">
+        <h2>Departments</h2>
+        <button type="button" class="btn btn-sm btn-primary" @click="emit('create-department')">Add Department</button>
+      </div>
+
+      <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 class="action-cell">
+                <button type="button" @click="emit('patch-department', dept)" class="btn btn-sm btn-patch">Patch</button>
+                <button type="button" @click="emit('delete-department', dept.id)" class="btn btn-sm btn-danger">Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="card-header">
+        <h2>Employees</h2>
+        <button type="button" class="btn btn-sm btn-primary" @click="emit('create-employee')">Add Employee</button>
+      </div>
+
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Dept</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, departments) }}</td>
+              <td>${{ Number(emp.salary).toLocaleString() }}</td>
+              <td class="action-cell">
+                <button type="button" @click="emit('patch-employee', emp)" class="btn btn-sm btn-patch">Patch</button>
+                <button type="button" @click="emit('delete-employee', emp.id)" class="btn btn-sm btn-danger">Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.main-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+@media (min-width: 900px) {
+  .main-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-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 10px;
+  margin-bottom: 16px;
+}
+
+.card-header h2 {
+  font-size: 18px;
+  color: #24292f;
+  margin: 0;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 8px 10px;
+  border-bottom: 1px solid #e1e4e8;
+  text-align: left;
+}
+
+th {
+  background-color: #f6f8fa;
+  font-weight: 600;
+  color: #57606a;
+}
+
+code {
+  background: #eff1f3;
+  padding: 2px 5px;
+  border-radius: 4px;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.empty {
+  text-align: center;
+  color: #8c959f;
+  padding: 20px;
+}
+
+.btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-weight: 500;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn-primary { background: #1f883d; color: #fff; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+</style>

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

@@ -1,90 +1,41 @@
-<script setup>
-</script>
-
-<template>
-  <div class="app-layout">
-    <header class="app-header">
-      <div class="brand">
-        <h1>Company Portal</h1>
-      </div>
-      <nav class="nav-links">
-        <router-link to="/" class="nav-item">Dashboard</router-link>
-        <router-link to="/departments" class="nav-item">Departments</router-link>
-        <router-link to="/employees" class="nav-item">Employees</router-link>
-        <router-link to="/add-employee" class="nav-item">Add Employee</router-link>
-      </nav>
-    </header>
-
-    <main class="main-content">
-      <router-view />
-    </main>
-  </div>
-</template>
-
-<style>
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  background-color: #f4f6f8;
-  color: #333333;
-}
-</style>
-
-<style scoped>
-.app-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.app-header {
-  background-color: #2c3e50;
-  color: #ffffff;
-  padding: 0 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.brand h1 {
-  font-size: 20px;
-  margin: 16px 0;
-}
-
-.nav-links {
-  display: flex;
-  gap: 8px;
-}
-
-.nav-item {
-  color: #ecf0f1;
-  text-decoration: none;
-  padding: 8px 14px;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  transition: background-color 0.2s;
-}
-
-.nav-item:hover {
-  background-color: #34495e;
-}
-
-.nav-item.router-link-exact-active {
-  background-color: #1abc9c;
-  color: #ffffff;
-}
-
-.main-content {
-  flex: 1;
-  max-width: 1000px;
-  width: 100%;
-  margin: 24px auto;
-  padding: 0 20px;
-}
-</style>
+<script setup>
+import NavBar from './components/NavBar.vue'
+</script>
+
+<template>
+  <div class="app-layout">
+    <NavBar />
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f4f6f8;
+  color: #333333;
+}
+</style>
+
+<style scoped>
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  flex: 1;
+  max-width: 1000px;
+  width: 100%;
+  margin: 24px auto;
+  padding: 0 20px;
+}
+</style>