wad-lab 1.1.2 → 1.1.3

package/templates/vue-axios-pinia-props/src/App.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from './stores/companyStore'
+import DepartmentSection from './components/DepartmentSection.vue'
+import EmployeeSection from './components/EmployeeSection.vue'
+
+const store = useCompanyStore()
+
+onMounted(() => {
+  store.fetchDepartments()
+  store.fetchEmployees()
+})
+
+function handleCreateDepartment(department) {
+  store.createDepartment(department)
+}
+
+function handleDeleteDepartment(id) {
+  store.deleteDepartment(id)
+}
+
+function handleCreateEmployee(employee) {
+  store.createEmployee(employee)
+}
+
+function handleDeleteEmployee(id) {
+  store.deleteEmployee(id)
+}
+</script>
+
+<template>
+  <main class="app-container">
+    <header class="app-header">
+      <h1>Company Management System</h1>
+    </header>
+    <DepartmentSection
+      :departments="store.departments"
+      @create="handleCreateDepartment"
+      @delete="handleDeleteDepartment"
+    />
+    <EmployeeSection
+      :employees="store.employees"
+      :departments="store.departments"
+      @create="handleCreateEmployee"
+      @delete="handleDeleteEmployee"
+    />
+  </main>
+</template>
+
+<style scoped>
+.app-container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 24px 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: #333;
+}
+
+.app-header {
+  margin-bottom: 24px;
+  border-bottom: 2px solid #eee;
+  padding-bottom: 12px;
+}
+
+.app-header h1 {
+  margin: 0;
+  font-size: 24px;
+}
+</style>

package/templates/vue-axios-pinia-props/src/components/DepartmentSection.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['departments'])
+const emit = defineEmits(['create', 'delete'])
+
+const name = ref('')
+const code = ref('')
+
+function handleSubmit() {
+  if (!name.value || !code.value) return
+  emit('create', {
+    name: name.value.trim(),
+    code: code.value.trim()
+  })
+  name.value = ''
+  code.value = ''
+}
+
+function handleDelete(id) {
+  emit('delete', id)
+}
+</script>
+
+<template>
+  <section class="section">
+    <h2>Departments</h2>
+    <form class="form" @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="dept-name">Department Name</label>
+        <input id="dept-name" v-model="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="code" type="text" placeholder="e.g. ENG" required>
+      </div>
+      <button type="submit" class="btn btn-primary">Add Department</button>
+    </form>
+
+    <div class="table-container">
+      <p v-if="!departments || departments.length === 0" class="empty">No departments available.</p>
+      <table v-else 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>{{ dept.code }}</td>
+            <td>
+              <button class="btn btn-danger" @click="handleDelete(dept.id)">Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.section {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-end;
+  margin-bottom: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.form-group input {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.btn {
+  padding: 6px 14px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  background-color: #0069d9;
+}
+
+.btn-danger {
+  background-color: #dc3545;
+  color: white;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.data-table th {
+  background-color: #f2f2f2;
+}
+
+.empty {
+  color: #666;
+  font-style: italic;
+}
+</style>

package/templates/vue-axios-pinia-props/src/components/EmployeeSection.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps(['employees', 'departments'])
+const emit = defineEmits(['create', 'delete'])
+
+const name = ref('')
+const email = ref('')
+const departmentId = ref('')
+const salary = ref('')
+
+function handleSubmit() {
+  if (!name.value || !email.value || !departmentId.value || salary.value === '') return
+  emit('create', {
+    name: name.value.trim(),
+    email: email.value.trim(),
+    departmentId: departmentId.value,
+    salary: Number(salary.value)
+  })
+  name.value = ''
+  email.value = ''
+  departmentId.value = ''
+  salary.value = ''
+}
+
+function handleDelete(id) {
+  emit('delete', id)
+}
+
+function getDepartmentLabel(deptId) {
+  const dept = props.departments?.find(d => d.id === deptId)
+  return dept ? `${dept.name} (${dept.code})` : deptId
+}
+</script>
+
+<template>
+  <section class="section">
+    <h2>Employees</h2>
+    <form class="form" @submit.prevent="handleSubmit">
+      <div class="form-group">
+        <label for="emp-name">Employee Name</label>
+        <input id="emp-name" v-model="name" type="text" placeholder="e.g. John Doe" required>
+      </div>
+      <div class="form-group">
+        <label for="emp-email">Email</label>
+        <input id="emp-email" v-model="email" type="email" placeholder="e.g. john@example.com" required>
+      </div>
+      <div class="form-group">
+        <label for="emp-dept">Department</label>
+        <select id="emp-dept" v-model="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="salary" type="number" step="any" placeholder="e.g. 50000" required>
+      </div>
+      <button type="submit" class="btn btn-primary">Add Employee</button>
+    </form>
+
+    <div class="table-container">
+      <p v-if="!employees || employees.length === 0" class="empty">No employees available.</p>
+      <table v-else 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>{{ emp.name }}</td>
+            <td>{{ emp.email }}</td>
+            <td>{{ getDepartmentLabel(emp.departmentId) }}</td>
+            <td>${{ Number(emp.salary).toLocaleString() }}</td>
+            <td>
+              <button class="btn btn-danger" @click="handleDelete(emp.id)">Delete</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.section {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-end;
+  margin-bottom: 16px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.form-group input,
+.form-group select {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.btn {
+  padding: 6px 14px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  background-color: #0069d9;
+}
+
+.btn-danger {
+  background-color: #dc3545;
+  color: white;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.data-table th {
+  background-color: #f2f2f2;
+}
+
+.empty {
+  color: #666;
+  font-style: italic;
+}
+</style>

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

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

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

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import api from '../services/api'
+
+export const useCompanyStore = defineStore('company', {
+  state: () => ({
+    departments: [],
+    employees: []
+  }),
+  actions: {
+    async fetchDepartments() {
+      const response = await api.get('/departments')
+      this.departments = response.data
+    },
+    async createDepartment(department) {
+      const response = await api.post('/departments', department)
+      this.departments.push(response.data)
+    },
+    async deleteDepartment(id) {
+      await api.delete(`/departments/${id}`)
+      this.departments = this.departments.filter(dept => dept.id !== id)
+    },
+    async fetchEmployees() {
+      const response = await api.get('/employees')
+      this.employees = response.data
+    },
+    async createEmployee(employee) {
+      const response = await api.post('/employees', employee)
+      this.employees.push(response.data)
+    },
+    async deleteEmployee(id) {
+      await api.delete(`/employees/${id}`)
+      this.employees = this.employees.filter(emp => emp.id !== id)
+    }
+  }
+})

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

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

@@ -0,0 +1,19 @@
+{
+  "name": "vue-axios-props-emits",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.7",
+    "vue": "^3.5.44"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

package/templates/vue-axios-props-emits/src/App.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="container">
+    <header class="header">
+      <h1>Company Directory</h1>
+      <p>Vue 3 + Axios + Props & Emits</p>
+    </header>
+
+    <div class="grid">
+      <section class="card">
+        <h2>Departments</h2>
+        <DepartmentForm @create-department="createDepartment" />
+        <DepartmentList
+          :departments="departments"
+          @delete-department="deleteDepartment"
+        />
+      </section>
+
+      <section class="card">
+        <h2>Employees</h2>
+        <EmployeeForm
+          :departments="departments"
+          @create-employee="createEmployee"
+        />
+        <EmployeeList
+          :employees="employees"
+          :departments="departments"
+          @delete-employee="deleteEmployee"
+        />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from './services/api'
+import DepartmentList from './components/DepartmentList.vue'
+import DepartmentForm from './components/DepartmentForm.vue'
+import EmployeeList from './components/EmployeeList.vue'
+import EmployeeForm from './components/EmployeeForm.vue'
+
+const departments = ref([])
+const employees = ref([])
+
+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 (departmentData) => {
+  try {
+    await api.post('/departments', departmentData)
+    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 (employeeData) => {
+  try {
+    await api.post('/employees', employeeData)
+    await fetchEmployees()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const deleteEmployee = async (id) => {
+  try {
+    await api.delete(`/employees/${id}`)
+    await fetchEmployees()
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+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;
+}
+</style>