wad-lab 1.1.2 → 1.1.3

package/templates/vue-axios-basic/src/App.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="container">
+    <header class="header">
+      <h1>Company Directory</h1>
+      <p>Vue 3 + Axios Direct CRUD</p>
+    </header>
+
+    <div class="grid">
+      <section class="card">
+        <h2>Departments</h2>
+        
+        <form @submit.prevent="createDepartment" class="form">
+          <div class="form-group">
+            <label for="dept-name">Department Name</label>
+            <input
+              id="dept-name"
+              v-model="deptForm.name"
+              type="text"
+              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"
+              type="text"
+              required
+              placeholder="e.g. ENG"
+            />
+          </div>
+          <button type="submit" class="btn btn-primary">Add Department</button>
+        </form>
+
+        <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>
+                  <button @click="deleteDepartment(dept.id)" class="btn btn-danger">Delete</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section class="card">
+        <h2>Employees</h2>
+
+        <form @submit.prevent="createEmployee" class="form">
+          <div class="form-group">
+            <label for="emp-name">Full Name</label>
+            <input
+              id="emp-name"
+              v-model="empForm.name"
+              type="text"
+              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"
+              step="any"
+              required
+              placeholder="e.g. 75000"
+            />
+          </div>
+          <button type="submit" class="btn btn-primary">Add Employee</button>
+        </form>
+
+        <div class="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Department</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) }}</td>
+                <td>${{ Number(emp.salary).toLocaleString() }}</td>
+                <td>
+                  <button @click="deleteEmployee(emp.id)" class="btn btn-danger">Delete</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import api from './services/api'
+
+const departments = ref([])
+const employees = ref([])
+
+const deptForm = reactive({
+  name: '',
+  code: ''
+})
+
+const empForm = reactive({
+  name: '',
+  email: '',
+  departmentId: '',
+  salary: ''
+})
+
+const fetchDepartments = async () => {
+  try {
+    const response = await api.get('/departments')
+    departments.value = response.data
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const fetchEmployees = async () => {
+  try {
+    const response = await api.get('/employees')
+    employees.value = response.data
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const createDepartment = async () => {
+  try {
+    await api.post('/departments', {
+      name: deptForm.name,
+      code: deptForm.code
+    })
+    deptForm.name = ''
+    deptForm.code = ''
+    await fetchDepartments()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const deleteDepartment = async (id) => {
+  try {
+    await api.delete(`/departments/${id}`)
+    await fetchDepartments()
+    await fetchEmployees()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const createEmployee = async () => {
+  try {
+    await api.post('/employees', {
+      name: empForm.name,
+      email: empForm.email,
+      departmentId: Number(empForm.departmentId),
+      salary: Number(empForm.salary)
+    })
+    empForm.name = ''
+    empForm.email = ''
+    empForm.departmentId = ''
+    empForm.salary = ''
+    await fetchEmployees()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const deleteEmployee = async (id) => {
+  try {
+    await api.delete(`/employees/${id}`)
+    await fetchEmployees()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const getDepartmentName = (deptId) => {
+  const dept = departments.value.find((d) => d.id === deptId)
+  return dept ? dept.name : `Dept #${deptId}`
+}
+
+onMounted(() => {
+  fetchDepartments()
+  fetchEmployees()
+})
+</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;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 32px 16px;
+}
+
+.header {
+  margin-bottom: 24px;
+}
+
+.header h1 {
+  font-size: 28px;
+  color: #1a1a1a;
+}
+
+.header p {
+  color: #666666;
+  font-size: 14px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+@media (min-width: 900px) {
+  .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 h2 {
+  font-size: 20px;
+  margin-bottom: 16px;
+  color: #222222;
+  border-bottom: 1px solid #edf0f2;
+  padding-bottom: 8px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.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 10px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: #ffffff;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #0066cc;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: background-color 0.15s ease;
+}
+
+.btn-primary {
+  background-color: #0066cc;
+  color: #ffffff;
+}
+
+.btn-primary:hover {
+  background-color: #0052a3;
+}
+
+.btn-danger {
+  background-color: #d9383a;
+  color: #ffffff;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn-danger:hover {
+  background-color: #b8282a;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  margin-top: 8px;
+}
+
+th, td {
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+th {
+  background-color: #fafbfc;
+  color: #555555;
+  font-weight: 600;
+}
+
+code {
+  background: #f0f0f0;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.empty {
+  text-align: center;
+  color: #888888;
+  padding: 16px;
+}
+</style>

package/templates/{frontend → vue-axios-basic}/src/main.js

@@ -1,5 +1,3 @@
-import './assets/main.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
 

package/templates/vue-axios-basic/src/services/api.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: 'http://localhost:8080/api'
+})
+
+export default api

package/templates/vue-axios-basic/vite.config.js

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

package/templates/{frontend → vue-axios-interceptor}/index.html

@@ -1,10 +1,9 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Vue Axios Interceptor</title>
   </head>
   <body>
     <div id="app"></div>

package/templates/vue-axios-interceptor/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "vue-axios-interceptor",
+  "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"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-axios-interceptor/src/App.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { ref, reactive } from 'vue'
+import api from './services/api'
+import ToastNotification from './components/ToastNotification.vue'
+
+const departments = ref([
+  { id: 1, name: 'Engineering', location: 'Floor 3' },
+  { id: 2, name: 'Marketing', location: 'Floor 2' }
+])
+
+const newDept = reactive({
+  name: '',
+  location: ''
+})
+
+async function fetchDepartments() {
+  try {
+    const res = await api.get('/departments')
+    departments.value = res.data
+  } catch (err) {
+  }
+}
+
+async function addDepartment() {
+  if (!newDept.name) return
+  try {
+    const res = await api.post('/departments', {
+      name: newDept.name,
+      location: newDept.location
+    })
+    departments.value.push(res.data || { id: Date.now(), name: newDept.name, location: newDept.location })
+    newDept.name = ''
+    newDept.location = ''
+  } catch (err) {
+  }
+}
+
+async function triggerError() {
+  try {
+    await api.get('/departments/invalid-id')
+  } catch (err) {
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <ToastNotification />
+    <h1>Department Management</h1>
+
+    <div class="actions">
+      <button @click="fetchDepartments">Fetch Departments (GET)</button>
+      <button class="btn-error" @click="triggerError">Trigger 404 Error (GET)</button>
+    </div>
+
+    <form class="form" @submit.prevent="addDepartment">
+      <input v-model="newDept.name" placeholder="Department Name" required />
+      <input v-model="newDept.location" placeholder="Location" required />
+      <button type="submit">Add Department (POST)</button>
+    </form>
+
+    <table class="table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Location</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="dept in departments" :key="dept.id">
+          <td>{{ dept.id }}</td>
+          <td>{{ dept.name }}</td>
+          <td>{{ dept.location }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style>
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background-color: #f7f9fa;
+  color: #333;
+}
+
+.container {
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 20px;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 22px;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+button {
+  padding: 8px 14px;
+  border: 1px solid #1976d2;
+  background-color: #1976d2;
+  color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #1565c0;
+}
+
+button.btn-error {
+  border-color: #d32f2f;
+  background-color: #d32f2f;
+}
+
+button.btn-error:hover {
+  background-color: #b71c1c;
+}
+
+.form {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+input {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  flex: 1;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: left;
+}
+
+.table th {
+  background-color: #f0f0f0;
+}
+</style>

package/templates/vue-axios-interceptor/src/components/ToastNotification.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useToastStore } from '../stores/toastStore'
+
+const toastStore = useToastStore()
+</script>
+
+<template>
+  <div v-if="toastStore.visible" :class="['toast-banner', toastStore.type]">
+    <span>{{ toastStore.message }}</span>
+    <button class="close-btn" @click="toastStore.hide">&times;</button>
+  </div>
+</template>
+
+<style scoped>
+.toast-banner {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 12px 18px;
+  border-radius: 4px;
+  color: #fff;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+.toast-banner.success {
+  background-color: #2e7d32;
+}
+
+.toast-banner.error {
+  background-color: #d32f2f;
+}
+
+.close-btn {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+  line-height: 1;
+}
+</style>

package/templates/vue-axios-interceptor/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

package/templates/vue-axios-interceptor/src/services/api.js

@@ -0,0 +1,32 @@
+import axios from 'axios'
+import { useToastStore } from '../stores/toastStore'
+
+const api = axios.create({
+  baseURL: 'http://localhost:8080/api'
+})
+
+api.interceptors.request.use(
+  (config) => {
+    config.headers.Authorization = 'Bearer test-token'
+    console.log(config.method.toUpperCase(), config.url)
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+api.interceptors.response.use(
+  (res) => {
+    const toastStore = useToastStore()
+    toastStore.show('Request Succeeded: ' + res.config.method.toUpperCase(), 'success')
+    return res
+  },
+  (err) => {
+    const toastStore = useToastStore()
+    toastStore.show('API Error: ' + (err.response?.data?.message || err.message), 'error')
+    return Promise.reject(err)
+  }
+)
+
+export default api