wad-lab 1.1.2 → 1.1.4

package/templates/fullstack-springboot-vue/frontend/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"
+  }
+}

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

@@ -0,0 +1,92 @@
+<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>
+
+    <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;
+}
+
+.app-container {
+  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;
+}
+
+.main-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 16px;
+}
+</style>

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

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

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

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import DashboardView from '../views/DashboardView.vue'
+import DepartmentView from '../views/DepartmentView.vue'
+import EmployeeView from '../views/EmployeeView.vue'
+
+const routes = [
+  { path: '/', name: 'Dashboard', component: DashboardView },
+  { path: '/departments', name: 'Departments', component: DepartmentView },
+  { path: '/employees', name: 'Employees', component: EmployeeView }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/fullstack-springboot-vue/frontend/vue-axios-router-pinia/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/fullstack-springboot-vue/frontend/vue-axios-router-pinia/src/stores/companyStore.js

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import api from '../services/api'
+
+export const useCompanyStore = defineStore('company', {
+  state: () => ({
+    departments: [],
+    employees: []
+  }),
+  getters: {
+    totalDepts: (state) => state.departments.length,
+    totalEmployees: (state) => state.employees.length,
+    getDepartmentName: (state) => (deptId) => {
+      const dept = state.departments.find((d) => d.id === deptId)
+      return dept ? dept.name : `Dept #${deptId}`
+    }
+  },
+  actions: {
+    async fetchDepartments() {
+      try {
+        const response = await api.get('/departments')
+        this.departments = response.data
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async addDepartment(dept) {
+      try {
+        const response = await api.post('/departments', dept)
+        await this.fetchDepartments()
+        return response.data
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async deleteDepartment(id) {
+      try {
+        await api.delete(`/departments/${id}`)
+        await this.fetchDepartments()
+        await this.fetchEmployees()
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async fetchEmployees() {
+      try {
+        const response = await api.get('/employees')
+        this.employees = response.data
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async addEmployee(emp) {
+      try {
+        const response = await api.post('/employees', emp)
+        await this.fetchEmployees()
+        return response.data
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    async deleteEmployee(id) {
+      try {
+        await api.delete(`/employees/${id}`)
+        await this.fetchEmployees()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+})

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="dashboard-view">
+    <h2>Dashboard</h2>
+    <div class="stats-grid">
+      <div class="stat-card">
+        <h3>Total Departments</h3>
+        <p class="stat-number">{{ companyStore.totalDepts }}</p>
+        <router-link to="/departments" class="stat-link">Manage Departments</router-link>
+      </div>
+      <div class="stat-card">
+        <h3>Total Employees</h3>
+        <p class="stat-number">{{ companyStore.totalEmployees }}</p>
+        <router-link to="/employees" class="stat-link">Manage Employees</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+
+const companyStore = useCompanyStore()
+
+onMounted(() => {
+  companyStore.fetchDepartments()
+  companyStore.fetchEmployees()
+})
+</script>
+
+<style scoped>
+.dashboard-view h2 {
+  font-size: 22px;
+  margin-bottom: 20px;
+  color: #1a1a1a;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 20px;
+}
+
+.stat-card {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 24px;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.stat-card h3 {
+  font-size: 16px;
+  color: #555555;
+  margin-bottom: 12px;
+}
+
+.stat-number {
+  font-size: 40px;
+  font-weight: bold;
+  color: #0066cc;
+  margin-bottom: 16px;
+}
+
+.stat-link {
+  display: inline-block;
+  color: #0066cc;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.stat-link:hover {
+  text-decoration: underline;
+}
+</style>

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

@@ -0,0 +1,209 @@
+<template>
+  <div class="department-view">
+    <h2>Departments Management</h2>
+
+    <section class="card">
+      <h3>Add Department</h3>
+      <form @submit.prevent="handleSubmit" class="form">
+        <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. Engineering"
+          />
+        </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. ENG"
+          />
+        </div>
+        <button type="submit" class="btn btn-primary">Add Department</button>
+      </form>
+    </section>
+
+    <section class="card table-card">
+      <h3>Department List</h3>
+      <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="companyStore.departments.length === 0">
+              <td colspan="4" class="empty">No departments found</td>
+            </tr>
+            <tr v-for="dept in companyStore.departments" :key="dept.id">
+              <td>{{ dept.id }}</td>
+              <td>{{ dept.name }}</td>
+              <td><code>{{ dept.code }}</code></td>
+              <td>
+                <button @click="handleDelete(dept.id)" class="btn btn-danger">Delete</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+
+const companyStore = useCompanyStore()
+
+const form = reactive({
+  name: '',
+  code: ''
+})
+
+const handleSubmit = async () => {
+  await companyStore.addDepartment({
+    name: form.name,
+    code: form.code
+  })
+  form.name = ''
+  form.code = ''
+}
+
+const handleDelete = async (id) => {
+  await companyStore.deleteDepartment(id)
+}
+
+onMounted(() => {
+  companyStore.fetchDepartments()
+})
+</script>
+
+<style scoped>
+.department-view h2 {
+  font-size: 22px;
+  margin-bottom: 20px;
+  color: #1a1a1a;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.card h3 {
+  font-size: 16px;
+  margin-bottom: 16px;
+  color: #333333;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 400px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #444444;
+}
+
+.form-group input {
+  padding: 8px 10px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #0066cc;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.btn-primary {
+  background-color: #0066cc;
+  color: #ffffff;
+  align-self: flex-start;
+}
+
+.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;
+}
+
+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>