wad-lab 1.1.2 → 1.1.3

package/templates/vue-axios-router-pinia-props/src/stores/companyStore.js

@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia'
+import api from '../services/api'
+
+export const useCompanyStore = defineStore('company', {
+  state: () => ({
+    departments: [
+      { id: 1, name: 'Engineering', code: 'ENG', budget: 150000 },
+      { id: 2, name: 'Marketing', code: 'MKT', budget: 80000 },
+      { id: 3, name: 'Human Resources', code: 'HR', budget: 60000 }
+    ],
+    employees: [
+      { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Lead Architect', department: 'Engineering' },
+      { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'Marketing Specialist', department: 'Marketing' },
+      { id: 3, name: 'Charlie Brown', email: 'charlie@example.com', role: 'HR Coordinator', department: 'Human Resources' }
+    ],
+    loading: false,
+    error: null
+  }),
+  getters: {
+    totalDepartments: (state) => state.departments.length,
+    totalEmployees: (state) => state.employees.length,
+    totalBudget: (state) => state.departments.reduce((sum, d) => sum + Number(d.budget || 0), 0)
+  },
+  actions: {
+    async fetchDepartments() {
+      this.loading = true
+      try {
+        const response = await api.getDepartments()
+        this.departments = response.data
+        this.error = null
+      } catch (err) {
+        this.error = err.message
+      } finally {
+        this.loading = false
+      }
+    },
+    async addDepartment(dept) {
+      try {
+        const response = await api.createDepartment(dept)
+        this.departments.push(response.data)
+      } catch (err) {
+        const newDept = { ...dept, id: dept.id || Date.now() }
+        this.departments.push(newDept)
+      }
+    },
+    async removeDepartment(id) {
+      try {
+        await api.deleteDepartment(id)
+        this.departments = this.departments.filter(d => d.id !== id)
+      } catch (err) {
+        this.departments = this.departments.filter(d => d.id !== id)
+      }
+    },
+    async fetchEmployees() {
+      this.loading = true
+      try {
+        const response = await api.getEmployees()
+        this.employees = response.data
+        this.error = null
+      } catch (err) {
+        this.error = err.message
+      } finally {
+        this.loading = false
+      }
+    },
+    async addEmployee(emp) {
+      try {
+        const response = await api.createEmployee(emp)
+        this.employees.push(response.data)
+      } catch (err) {
+        const newEmp = { ...emp, id: emp.id || Date.now() }
+        this.employees.push(newEmp)
+      }
+    },
+    async removeEmployee(id) {
+      try {
+        await api.deleteEmployee(id)
+        this.employees = this.employees.filter(e => e.id !== id)
+      } catch (err) {
+        this.employees = this.employees.filter(e => e.id !== id)
+      }
+    }
+  }
+})

package/templates/vue-axios-router-pinia-props/src/views/ManageDepartmentsView.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+import EntityTable from '../components/EntityTable.vue'
+import EntityForm from '../components/EntityForm.vue'
+
+const store = useCompanyStore()
+
+const departmentFields = [
+  { key: 'name', label: 'Department Name', type: 'text', placeholder: 'e.g. Finance' },
+  { key: 'code', label: 'Department Code', type: 'text', placeholder: 'e.g. FIN' },
+  { key: 'budget', label: 'Annual Budget ($)', type: 'number', placeholder: 'e.g. 50000' }
+]
+
+const departmentColumns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'code', label: 'Code' },
+  { key: 'budget', label: 'Budget' }
+]
+
+const handleAddDepartment = (formData) => {
+  store.addDepartment({
+    name: formData.name,
+    code: formData.code,
+    budget: Number(formData.budget)
+  })
+}
+
+const handleDeleteDepartment = (id) => {
+  store.removeDepartment(id)
+}
+
+onMounted(() => {
+  store.fetchDepartments()
+})
+</script>
+
+<template>
+  <div class="manage-departments-view">
+    <h2>Manage Departments</h2>
+    <EntityForm
+      :fields="departmentFields"
+      title="Add New Department"
+      @submit-form="handleAddDepartment"
+    />
+    <EntityTable
+      :items="store.departments"
+      :columns="departmentColumns"
+      title="All Departments"
+      @delete-item="handleDeleteDepartment"
+    />
+  </div>
+</template>
+
+<style scoped>
+.manage-departments-view {
+  padding: 16px 0;
+}
+.manage-departments-view h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+}
+</style>

package/templates/vue-axios-router-pinia-props/src/views/ManageEmployeesView.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+import EntityTable from '../components/EntityTable.vue'
+import EntityForm from '../components/EntityForm.vue'
+
+const store = useCompanyStore()
+
+const employeeFields = [
+  { key: 'name', label: 'Employee Name', type: 'text', placeholder: 'e.g. Jane Doe' },
+  { key: 'email', label: 'Email Address', type: 'email', placeholder: 'e.g. jane@example.com' },
+  { key: 'role', label: 'Job Role', type: 'text', placeholder: 'e.g. Developer' },
+  { key: 'department', label: 'Department', type: 'text', placeholder: 'e.g. Engineering' }
+]
+
+const employeeColumns = [
+  { key: 'id', label: 'ID' },
+  { key: 'name', label: 'Name' },
+  { key: 'email', label: 'Email' },
+  { key: 'role', label: 'Role' },
+  { key: 'department', label: 'Department' }
+]
+
+const handleAddEmployee = (formData) => {
+  store.addEmployee({
+    name: formData.name,
+    email: formData.email,
+    role: formData.role,
+    department: formData.department
+  })
+}
+
+const handleDeleteEmployee = (id) => {
+  store.removeEmployee(id)
+}
+
+onMounted(() => {
+  store.fetchEmployees()
+})
+</script>
+
+<template>
+  <div class="manage-employees-view">
+    <h2>Manage Employees</h2>
+    <EntityForm
+      :fields="employeeFields"
+      title="Add New Employee"
+      @submit-form="handleAddEmployee"
+    />
+    <EntityTable
+      :items="store.employees"
+      :columns="employeeColumns"
+      title="All Employees"
+      @delete-item="handleDeleteEmployee"
+    />
+  </div>
+</template>
+
+<style scoped>
+.manage-employees-view {
+  padding: 16px 0;
+}
+.manage-employees-view h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+}
+</style>

package/templates/vue-axios-router-pinia-props/src/views/OverviewView.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+import SummaryBadge from '../components/SummaryBadge.vue'
+
+const store = useCompanyStore()
+
+onMounted(() => {
+  store.fetchDepartments()
+  store.fetchEmployees()
+})
+</script>
+
+<template>
+  <div class="overview-view">
+    <h2>Company Overview</h2>
+    <div class="badges-container">
+      <SummaryBadge :count="store.totalDepartments" label="Total Departments" />
+      <SummaryBadge :count="store.totalEmployees" label="Total Employees" />
+      <SummaryBadge :count="'$' + store.totalBudget" label="Total Budget" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.overview-view {
+  padding: 16px 0;
+}
+.overview-view h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+}
+.badges-container {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+</style>

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

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

@@ -0,0 +1,20 @@
+{
+  "name": "vue-axios-router-props",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "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-props/src/App.vue

@@ -0,0 +1,59 @@
+<script setup>
+</script>
+
+<template>
+  <div class="app-container">
+    <header class="navbar">
+      <h2>Company Management</h2>
+      <nav class="nav-links">
+        <router-link to="/">Departments</router-link>
+        <router-link to="/employees">Employees</router-link>
+      </nav>
+    </header>
+    <main class="content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 24px 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  color: #2d3748;
+}
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #e2e8f0;
+  padding-bottom: 16px;
+  margin-bottom: 24px;
+}
+.navbar h2 {
+  margin: 0;
+  font-size: 22px;
+}
+.nav-links {
+  display: flex;
+  gap: 12px;
+}
+.nav-links a {
+  text-decoration: none;
+  color: #4a5568;
+  font-weight: 500;
+  padding: 6px 14px;
+  border-radius: 4px;
+  border: 1px solid #cbd5e0;
+}
+.nav-links a.router-link-active {
+  background-color: #3182ce;
+  border-color: #3182ce;
+  color: #fff;
+}
+.content {
+  margin-top: 10px;
+}
+</style>

package/templates/vue-axios-router-props/src/components/DataCard.vue

@@ -0,0 +1,53 @@
+<script setup>
+const props = defineProps(['title', 'subtitle', 'id'])
+const emit = defineEmits(['remove'])
+
+const handleRemove = () => {
+  emit('remove', props.id)
+}
+</script>
+
+<template>
+  <div class="data-card">
+    <div class="card-info">
+      <h4>{{ title }}</h4>
+      <p>{{ subtitle }}</p>
+    </div>
+    <button class="btn-remove" @click="handleRemove">Delete</button>
+  </div>
+</template>
+
+<style scoped>
+.data-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin-bottom: 10px;
+  background-color: #fff;
+}
+.card-info h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  color: #2d3748;
+}
+.card-info p {
+  margin: 0;
+  font-size: 14px;
+  color: #718096;
+}
+.btn-remove {
+  background-color: #e53e3e;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.btn-remove:hover {
+  background-color: #c53030;
+}
+</style>

package/templates/vue-axios-router-props/src/components/EntryForm.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps(['fields'])
+const emit = defineEmits(['submit-data'])
+
+const formData = reactive({})
+
+const getFieldName = (field) => {
+  if (typeof field === 'string') return field
+  return field.name || field.key || ''
+}
+
+const getFieldLabel = (field) => {
+  if (typeof field === 'string') {
+    return field.charAt(0).toUpperCase() + field.slice(1)
+  }
+  return field.label || field.name || field.key || ''
+}
+
+const getFieldType = (field) => {
+  if (typeof field === 'object' && field.type) return field.type
+  return 'text'
+}
+
+const initFormData = () => {
+  if (Array.isArray(props.fields)) {
+    props.fields.forEach(field => {
+      const name = getFieldName(field)
+      if (name && !(name in formData)) {
+        formData[name] = ''
+      }
+    })
+  }
+}
+
+watch(() => props.fields, () => {
+  initFormData()
+}, { immediate: true, deep: true })
+
+const handleSubmit = () => {
+  emit('submit-data', { ...formData })
+  Object.keys(formData).forEach(key => {
+    formData[key] = ''
+  })
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="entry-form">
+    <div v-for="field in fields" :key="getFieldName(field)" class="form-group">
+      <label :for="getFieldName(field)">{{ getFieldLabel(field) }}</label>
+      <select
+        v-if="typeof field === 'object' && field.type === 'select'"
+        :id="getFieldName(field)"
+        v-model="formData[getFieldName(field)]"
+        :required="field.required !== false"
+      >
+        <option value="" disabled>{{ field.placeholder || 'Select an option' }}</option>
+        <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </select>
+      <input
+        v-else
+        :id="getFieldName(field)"
+        v-model="formData[getFieldName(field)]"
+        :type="getFieldType(field)"
+        :placeholder="typeof field === 'object' && field.placeholder ? field.placeholder : ''"
+        :required="typeof field === 'object' && field.required === false ? false : true"
+      />
+    </div>
+    <button type="submit" class="btn-submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+.entry-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: #f7fafc;
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+  margin-bottom: 20px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4a5568;
+}
+input, select {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e0;
+  border-radius: 4px;
+  font-size: 14px;
+}
+.btn-submit {
+  align-self: flex-start;
+  background-color: #3182ce;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.btn-submit:hover {
+  background-color: #2b6cb0;
+}
+</style>

package/templates/vue-axios-router-props/src/main.js

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

package/templates/vue-axios-router-props/src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import DepartmentPage from '../views/DepartmentPage.vue'
+import EmployeePage from '../views/EmployeePage.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Departments',
+    component: DepartmentPage
+  },
+  {
+    path: '/employees',
+    name: 'Employees',
+    component: EmployeePage
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-axios-router-props/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-router-props/src/views/DepartmentPage.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../services/api'
+import EntryForm from '../components/EntryForm.vue'
+import DataCard from '../components/DataCard.vue'
+
+const departments = ref([])
+
+const deptFields = [
+  { key: 'name', label: 'Department Name', placeholder: 'e.g. Engineering' },
+  { key: 'code', label: 'Department Code', placeholder: 'e.g. ENG' }
+]
+
+const fetchDepartments = async () => {
+  try {
+    const res = await api.get('/departments')
+    departments.value = res.data
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleCreateDepartment = async (formData) => {
+  try {
+    const res = await api.post('/departments', formData)
+    departments.value.push(res.data)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleRemoveDepartment = async (id) => {
+  try {
+    await api.delete(`/departments/${id}`)
+    departments.value = departments.value.filter(dept => dept.id !== id)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(() => {
+  fetchDepartments()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <h2>Departments</h2>
+    <EntryForm :fields="deptFields" @submit-data="handleCreateDepartment" />
+    <div class="card-list">
+      <p v-if="departments.length === 0" class="empty-state">No departments available.</p>
+      <DataCard
+        v-for="dept in departments"
+        :key="dept.id"
+        :id="dept.id"
+        :title="dept.name"
+        :subtitle="dept.code"
+        @remove="handleRemoveDepartment"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+}
+.empty-state {
+  color: #a0aec0;
+  font-style: italic;
+}
+.card-list {
+  display: flex;
+  flex-direction: column;
+}
+</style>