wad-lab 1.1.2 → 1.1.3

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

@@ -0,0 +1,231 @@
+<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="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')
+  }
+}
+
+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;
+}
+
+.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>

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

@@ -0,0 +1,159 @@
+<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>
+    </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
+  }
+}
+
+onMounted(() => {
+  fetchEmployee()
+})
+</script>
+
+<style scoped>
+.employee-detail-page {
+  max-width: 650px;
+}
+
+.header-actions {
+  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;
+}
+
+.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>

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

@@ -0,0 +1,295 @@
+<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="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 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;
+}
+
+.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>

package/templates/vue-axios-router-children/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

package/templates/vue-axios-router-pinia/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Company Management</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/vue-axios-router-pinia/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "vue-axios-router-pinia",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "pinia": "^4.1.0",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}