wad-lab 1.1.2 → 1.1.3

package/templates/vue-axios-router/src/views/AddEmployeeView.vue

@@ -0,0 +1,247 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import api from '../services/api'
+
+const router = useRouter()
+const departments = ref([])
+const loading = ref(false)
+const submitting = ref(false)
+const errorMessage = ref('')
+
+const form = reactive({
+  name: '',
+  email: '',
+  departmentId: '',
+  salary: ''
+})
+
+async function fetchDepartments() {
+  loading.value = true
+  try {
+    const res = await api.get('/departments')
+    departments.value = res.data
+    if (departments.value.length > 0) {
+      form.departmentId = departments.value[0].id
+    }
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to fetch departments'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleAddEmployee() {
+  if (!form.name.trim() || !form.email.trim() || !form.salary) return
+  submitting.value = true
+  errorMessage.value = ''
+  try {
+    await api.post('/employees', {
+      name: form.name.trim(),
+      email: form.email.trim(),
+      departmentId: form.departmentId,
+      salary: Number(form.salary)
+    })
+    router.push('/employees')
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to add employee'
+  } finally {
+    submitting.value = false
+  }
+}
+
+function handleCancel() {
+  router.push('/employees')
+}
+
+onMounted(() => {
+  fetchDepartments()
+})
+</script>
+
+<template>
+  <div class="add-employee-view">
+    <h2>Add Employee</h2>
+
+    <div v-if="loading" class="state-msg">Loading department list...</div>
+    <div v-if="errorMessage" class="state-msg error">{{ errorMessage }}</div>
+
+    <div class="card">
+      <form @submit.prevent="handleAddEmployee" class="emp-form">
+        <div class="form-group">
+          <label for="emp-name">Full Name</label>
+          <input
+            id="emp-name"
+            v-model="form.name"
+            type="text"
+            placeholder="John Doe"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="emp-email">Email Address</label>
+          <input
+            id="emp-email"
+            v-model="form.email"
+            type="email"
+            placeholder="john.doe@example.com"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="emp-dept">Department</label>
+          <select
+            v-if="departments.length > 0"
+            id="emp-dept"
+            v-model="form.departmentId"
+            required
+          >
+            <option
+              v-for="dept in departments"
+              :key="dept.id"
+              :value="dept.id"
+            >
+              {{ dept.name }} ({{ dept.code }})
+            </option>
+          </select>
+          <input
+            v-else
+            id="emp-dept"
+            v-model="form.departmentId"
+            type="text"
+            placeholder="Department ID / Code"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="emp-salary">Annual Salary ($)</label>
+          <input
+            id="emp-salary"
+            v-model="form.salary"
+            type="number"
+            min="0"
+            step="100"
+            placeholder="75000"
+            required
+          />
+        </div>
+
+        <div class="form-actions">
+          <button type="submit" class="btn primary" :disabled="submitting">
+            {{ submitting ? 'Saving...' : 'Save Employee' }}
+          </button>
+          <button type="button" class="btn secondary" @click="handleCancel">
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.add-employee-view {
+  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+h2 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 24px;
+}
+
+.emp-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+label {
+  font-size: 13px;
+  font-weight: bold;
+  color: #555;
+}
+
+input,
+select {
+  padding: 10px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+input:focus,
+select:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn.primary {
+  background: #27ae60;
+  color: #fff;
+}
+
+.btn.primary:hover:not(:disabled) {
+  background: #219150;
+}
+
+.btn.secondary {
+  background: #ecf0f1;
+  color: #2c3e50;
+}
+
+.btn.secondary:hover {
+  background: #bdc3c7;
+}
+
+.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;
+}
+</style>

package/templates/vue-axios-router/src/views/DepartmentView.vue

@@ -0,0 +1,273 @@
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import api from '../services/api'
+
+const departments = ref([])
+const loading = ref(false)
+const errorMessage = ref('')
+
+const form = reactive({
+  name: '',
+  code: ''
+})
+
+async function fetchDepartments() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const res = await api.get('/departments')
+    departments.value = res.data
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to fetch departments'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleAddDepartment() {
+  if (!form.name.trim() || !form.code.trim()) return
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    await api.post('/departments', {
+      name: form.name.trim(),
+      code: form.code.trim()
+    })
+    form.name = ''
+    form.code = ''
+    await fetchDepartments()
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to add department'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleDeleteDepartment(id) {
+  if (!confirm('Are you sure you want to delete this department?')) return
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    await api.delete(`/departments/${id}`)
+    await fetchDepartments()
+  } catch (err) {
+    errorMessage.value = err.message || 'Failed to delete department'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDepartments()
+})
+</script>
+
+<template>
+  <div class="department-view">
+    <h2>Departments</h2>
+
+    <div v-if="loading" class="state-msg">Loading...</div>
+    <div v-if="errorMessage" class="state-msg error">{{ errorMessage }}</div>
+
+    <div class="card">
+      <h3>Add New Department</h3>
+      <form @submit.prevent="handleAddDepartment" class="dept-form">
+        <div class="form-group">
+          <label for="dept-name">Department Name</label>
+          <input
+            id="dept-name"
+            v-model="form.name"
+            type="text"
+            placeholder="e.g. Engineering"
+            required
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="dept-code">Department Code</label>
+          <input
+            id="dept-code"
+            v-model="form.code"
+            type="text"
+            placeholder="e.g. ENG"
+            required
+          />
+        </div>
+
+        <button type="submit" class="btn primary" :disabled="loading">Add Department</button>
+      </form>
+    </div>
+
+    <div class="card">
+      <h3>Department List</h3>
+      <table v-if="departments.length > 0" class="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Code</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="dept in departments" :key="dept.id">
+            <td>{{ dept.id }}</td>
+            <td>{{ dept.name }}</td>
+            <td><span class="badge">{{ dept.code }}</span></td>
+            <td>
+              <button
+                @click="handleDeleteDepartment(dept.id)"
+                class="btn danger"
+                :disabled="loading"
+              >
+                Delete
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p v-else class="empty-text">No departments found.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.department-view {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+h2 {
+  margin: 0;
+  color: #2c3e50;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 18px;
+}
+
+.card h3 {
+  margin: 0 0 14px 0;
+  font-size: 16px;
+  color: #2c3e50;
+}
+
+.dept-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-end;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 180px;
+}
+
+label {
+  font-size: 13px;
+  font-weight: bold;
+  color: #555;
+}
+
+input {
+  padding: 8px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.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;
+  margin-top: 10px;
+}
+
+.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;
+}
+
+.badge {
+  background: #ecf0f1;
+  color: #2c3e50;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.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: 10px 0 0 0;
+}
+</style>

package/templates/vue-axios-router/src/views/EmployeeView.vue

@@ -0,0 +1,196 @@
+<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 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="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>