wad-lab 1.1.2 → 1.1.4

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

@@ -0,0 +1,237 @@
+<template>
+  <div class="employee-view">
+    <h2>Employees Management</h2>
+
+    <section class="card">
+      <h3>Add Employee</h3>
+      <form @submit.prevent="handleSubmit" class="form">
+        <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 Address</label>
+          <input
+            id="emp-email"
+            v-model="form.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="form.departmentId" required>
+            <option value="" disabled>Select Department</option>
+            <option v-for="dept in companyStore.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>
+        <button type="submit" class="btn btn-primary">Add Employee</button>
+      </form>
+    </section>
+
+    <section class="card table-card">
+      <h3>Employee List</h3>
+      <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="companyStore.employees.length === 0">
+              <td colspan="6" class="empty">No employees found</td>
+            </tr>
+            <tr v-for="emp in companyStore.employees" :key="emp.id">
+              <td>{{ emp.id }}</td>
+              <td>{{ emp.name }}</td>
+              <td>{{ emp.email }}</td>
+              <td>{{ companyStore.getDepartmentName(emp.departmentId) }}</td>
+              <td>${{ Number(emp.salary).toLocaleString() }}</td>
+              <td>
+                <button @click="handleDelete(emp.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: '',
+  email: '',
+  departmentId: '',
+  salary: ''
+})
+
+const handleSubmit = async () => {
+  await companyStore.addEmployee({
+    name: form.name,
+    email: form.email,
+    departmentId: Number(form.departmentId),
+    salary: Number(form.salary)
+  })
+  form.name = ''
+  form.email = ''
+  form.departmentId = ''
+  form.salary = ''
+}
+
+const handleDelete = async (id) => {
+  await companyStore.deleteEmployee(id)
+}
+
+onMounted(() => {
+  companyStore.fetchEmployees()
+  companyStore.fetchDepartments()
+})
+</script>
+
+<style scoped>
+.employee-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,
+.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;
+}
+
+.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;
+}
+
+.empty {
+  text-align: center;
+  color: #888888;
+  padding: 16px;
+}
+</style>

package/templates/vue-axios-router-pinia/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-props/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 Portal</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,21 @@
+{
+  "name": "vue-axios-router-pinia-props",
+  "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/vue-axios-router-pinia-props/src/App.vue

@@ -0,0 +1,67 @@
+<script setup>
+</script>
+
+<template>
+  <div class="app-container">
+    <header class="header">
+      <h1 class="logo">CompanyHub</h1>
+      <nav class="nav-links">
+        <router-link to="/">Overview</router-link>
+        <router-link to="/manage-departments">Manage Departments</router-link>
+        <router-link to="/manage-employees">Manage Employees</router-link>
+      </nav>
+    </header>
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: #24292f;
+  background-color: #ffffff;
+}
+.app-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 24px 16px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #eaeef2;
+  padding-bottom: 16px;
+  margin-bottom: 24px;
+}
+.logo {
+  font-size: 1.5rem;
+  color: #0969da;
+}
+.nav-links {
+  display: flex;
+  gap: 16px;
+}
+.nav-links a {
+  text-decoration: none;
+  color: #57606a;
+  font-weight: 500;
+  padding: 6px 12px;
+  border-radius: 6px;
+}
+.nav-links a.router-link-active {
+  color: #0969da;
+  background-color: #f0f4f8;
+  font-weight: 600;
+}
+.main-content {
+  padding: 8px 0;
+}
+</style>

package/templates/vue-axios-router-pinia-props/src/components/EntityForm.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  fields: {
+    type: Array,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['submit-form'])
+
+const formData = reactive({})
+
+const initForm = () => {
+  for (const key of Object.keys(formData)) {
+    delete formData[key]
+  }
+  props.fields.forEach(field => {
+    formData[field.key] = ''
+  })
+}
+
+watch(() => props.fields, initForm, { immediate: true })
+
+const handleSubmit = () => {
+  emit('submit-form', { ...formData })
+  initForm()
+}
+</script>
+
+<template>
+  <div class="entity-form-container">
+    <h3 v-if="title" class="form-title">{{ title }}</h3>
+    <form @submit.prevent="handleSubmit" class="entity-form">
+      <div v-for="field in fields" :key="field.key" class="form-group">
+        <label :for="field.key">{{ field.label }}</label>
+        <input
+          :id="field.key"
+          v-model="formData[field.key]"
+          :type="field.type || 'text'"
+          :placeholder="field.placeholder || ''"
+          required
+        />
+      </div>
+      <button type="submit" class="btn-submit">Submit</button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.entity-form-container {
+  background-color: #f6f8fa;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+.form-title {
+  margin-bottom: 12px;
+  font-size: 1.1rem;
+}
+.entity-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.form-group label {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.form-group input {
+  padding: 8px 10px;
+  border: 1px solid #d0d7de;
+  border-radius: 4px;
+  font-size: 0.95rem;
+}
+.btn-submit {
+  align-self: flex-start;
+  background-color: #1f883d;
+  color: #ffffff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.btn-submit:hover {
+  background-color: #1a7f37;
+}
+</style>

package/templates/vue-axios-router-pinia-props/src/components/EntityTable.vue

@@ -0,0 +1,92 @@
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['delete-item'])
+
+const getColKey = (col) => (typeof col === 'object' && col.key ? col.key : col)
+const getColLabel = (col) => (typeof col === 'object' && col.label ? col.label : col)
+
+const handleDelete = (id) => {
+  emit('delete-item', id)
+}
+</script>
+
+<template>
+  <div class="entity-table-container">
+    <h3 v-if="title" class="table-title">{{ title }}</h3>
+    <table v-if="items && items.length > 0" class="entity-table">
+      <thead>
+        <tr>
+          <th v-for="col in columns" :key="getColKey(col)">
+            {{ getColLabel(col) }}
+          </th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in items" :key="item.id">
+          <td v-for="col in columns" :key="getColKey(col)">
+            {{ item[getColKey(col)] }}
+          </td>
+          <td>
+            <button class="btn-delete" @click="handleDelete(item.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else class="empty-msg">No records found.</p>
+  </div>
+</template>
+
+<style scoped>
+.entity-table-container {
+  margin-top: 16px;
+}
+.table-title {
+  margin-bottom: 12px;
+  font-size: 1.2rem;
+}
+.entity-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.entity-table th,
+.entity-table td {
+  border: 1px solid #d0d7de;
+  padding: 10px 12px;
+  text-align: left;
+}
+.entity-table th {
+  background-color: #f6f8fa;
+  font-weight: 600;
+}
+.btn-delete {
+  background-color: #cf222e;
+  color: #ffffff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.btn-delete:hover {
+  background-color: #a40e26;
+}
+.empty-msg {
+  color: #57606a;
+  padding: 12px 0;
+}
+</style>

package/templates/vue-axios-router-pinia-props/src/components/SummaryBadge.vue

@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  count: {
+    type: [Number, String],
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="summary-badge">
+    <span class="count">{{ count }}</span>
+    <span class="label">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.summary-badge {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f4f8;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 16px 24px;
+  min-width: 140px;
+}
+.count {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #0969da;
+}
+.label {
+  font-size: 0.9rem;
+  color: #57606a;
+  margin-top: 4px;
+}
+</style>

package/templates/vue-axios-router-pinia-props/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/vue-axios-router-pinia-props/src/router/index.js

@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import OverviewView from '../views/OverviewView.vue'
+import ManageDepartmentsView from '../views/ManageDepartmentsView.vue'
+import ManageEmployeesView from '../views/ManageEmployeesView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Overview',
+    component: OverviewView
+  },
+  {
+    path: '/manage-departments',
+    name: 'ManageDepartments',
+    component: ManageDepartmentsView
+  },
+  {
+    path: '/manage-employees',
+    name: 'ManageEmployees',
+    component: ManageEmployeesView
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-axios-router-pinia-props/src/services/api.js

@@ -0,0 +1,29 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'http://localhost:8080/api',
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getDepartments() {
+    return apiClient.get('/departments')
+  },
+  createDepartment(data) {
+    return apiClient.post('/departments', data)
+  },
+  deleteDepartment(id) {
+    return apiClient.delete(`/departments/${id}`)
+  },
+  getEmployees() {
+    return apiClient.get('/employees')
+  },
+  createEmployee(data) {
+    return apiClient.post('/employees', data)
+  },
+  deleteEmployee(id) {
+    return apiClient.delete(`/employees/${id}`)
+  }
+}