wad-lab 1.1.5 → 1.1.7

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

@@ -1,96 +1,126 @@
-import { defineStore } from 'pinia'
-import api from '../services/api'
-
-export const useCompanyStore = defineStore('company', {
-  state: () => ({
-    departments: [],
-    employees: [],
-    loading: false,
-    error: null
-  }),
-  getters: {
-    totalDepartments: (state) => state.departments.length,
-    totalEmployees: (state) => state.employees.length,
-    totalPayroll: (state) => state.employees.reduce((sum, emp) => sum + (Number(emp.salary) || 0), 0)
-  },
-  actions: {
-    async fetchDepartments() {
-      this.loading = true
-      this.error = null
-      try {
-        const response = await api.get('/departments')
-        this.departments = response.data
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message
-      } finally {
-        this.loading = false
-      }
-    },
-    async createDepartment(data) {
-      this.loading = true
-      this.error = null
-      try {
-        const response = await api.post('/departments', data)
-        this.departments.push(response.data)
-        return response.data
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message
-        throw err
-      } finally {
-        this.loading = false
-      }
-    },
-    async deleteDepartment(id) {
-      this.loading = true
-      this.error = null
-      try {
-        await api.delete(`/departments/${id}`)
-        this.departments = this.departments.filter(dept => dept.id !== id)
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message
-        throw err
-      } finally {
-        this.loading = false
-      }
-    },
-    async fetchEmployees() {
-      this.loading = true
-      this.error = null
-      try {
-        const response = await api.get('/employees')
-        this.employees = response.data
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message
-      } finally {
-        this.loading = false
-      }
-    },
-    async createEmployee(data) {
-      this.loading = true
-      this.error = null
-      try {
-        const response = await api.post('/employees', data)
-        this.employees.push(response.data)
-        return response.data
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message
-        throw err
-      } finally {
-        this.loading = false
-      }
-    },
-    async deleteEmployee(id) {
-      this.loading = true
-      this.error = null
-      try {
-        await api.delete(`/employees/${id}`)
-        this.employees = this.employees.filter(emp => emp.id !== id)
-      } catch (err) {
-        this.error = err.response?.data?.message || err.message
-        throw err
-      } finally {
-        this.loading = false
-      }
-    }
-  }
-})
+import { defineStore } from 'pinia'
+import api from '../services/api'
+
+export const useCompanyStore = defineStore('company', {
+  state: () => ({
+    departments: [],
+    employees: [],
+    loading: false,
+    error: null
+  }),
+  getters: {
+    totalDepartments: (state) => state.departments.length,
+    totalEmployees: (state) => state.employees.length,
+    totalPayroll: (state) => state.employees.reduce((sum, emp) => sum + (Number(emp.salary) || 0), 0)
+  },
+  actions: {
+    async fetchDepartments() {
+      this.loading = true
+      this.error = null
+      try {
+        const response = await api.get('/departments')
+        this.departments = response.data
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+      } finally {
+        this.loading = false
+      }
+    },
+    async createDepartment(data) {
+      this.loading = true
+      this.error = null
+      try {
+        const response = await api.post('/departments', data)
+        this.departments.push(response.data)
+        return response.data
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+        throw err
+      } finally {
+        this.loading = false
+      }
+    },
+    async deleteDepartment(id) {
+      this.loading = true
+      this.error = null
+      try {
+        await api.delete(`/departments/${id}`)
+        this.departments = this.departments.filter(dept => dept.id !== id)
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+        throw err
+      } finally {
+        this.loading = false
+      }
+    },
+    async fetchEmployees() {
+      this.loading = true
+      this.error = null
+      try {
+        const response = await api.get('/employees')
+        this.employees = response.data
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+      } finally {
+        this.loading = false
+      }
+    },
+    async createEmployee(data) {
+      this.loading = true
+      this.error = null
+      try {
+        const response = await api.post('/employees', data)
+        this.employees.push(response.data)
+        return response.data
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+        throw err
+      } finally {
+        this.loading = false
+      }
+    },
+    async deleteEmployee(id) {
+      this.loading = true
+      this.error = null
+      try {
+        await api.delete(`/employees/${id}`)
+        this.employees = this.employees.filter(emp => emp.id !== id)
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+        throw err
+      } finally {
+        this.loading = false
+      }
+    },
+    async patchDepartment(id, data) {
+      this.loading = true
+      this.error = null
+      try {
+        const response = await api.patch(`/departments/${id}`, data)
+        const idx = this.departments.findIndex(dept => dept.id === id)
+        if (idx !== -1) this.departments[idx] = response.data
+        return response.data
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+        throw err
+      } finally {
+        this.loading = false
+      }
+    },
+    async patchEmployee(id, data) {
+      this.loading = true
+      this.error = null
+      try {
+        const response = await api.patch(`/employees/${id}`, data)
+        const idx = this.employees.findIndex(emp => emp.id === id)
+        if (idx !== -1) this.employees[idx] = response.data
+        return response.data
+      } catch (err) {
+        this.error = err.response?.data?.message || err.message
+        throw err
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+})

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

@@ -1,69 +1,84 @@
-<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>
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from './stores/companyStore'
+import DepartmentSection from './components/DepartmentSection.vue'
+import EmployeeSection from './components/EmployeeSection.vue'
+
+const companyStore = useCompanyStore()
+const store = companyStore
+
+onMounted(() => {
+  store.fetchDepartments()
+  store.fetchEmployees()
+})
+
+function handleCreateDepartment(department) {
+  store.createDepartment(department)
+}
+
+function handleDeleteDepartment(id) {
+  store.deleteDepartment(id)
+}
+
+async function handlePatchDept(id, code) {
+  const newCode = prompt('New code:', code)
+  if (!newCode || newCode === code) return
+  await companyStore.patchDepartment(id, { code: newCode })
+}
+
+function handleCreateEmployee(employee) {
+  store.createEmployee(employee)
+}
+
+function handleDeleteEmployee(id) {
+  store.deleteEmployee(id)
+}
+
+async function handlePatchEmp(id, salary) {
+  const newSalary = prompt('New salary:', salary)
+  if (!newSalary || Number(newSalary) === Number(salary)) return
+  await companyStore.patchEmployee(id, { salary: Number(newSalary) })
+}
+</script>
+
+<template>
+  <main class="app-container">
+    <header class="app-header">
+      <h1>Company Management System</h1>
+    </header>
+    <DepartmentSection
+      :departments="store.departments"
+      @create="handleCreateDepartment"
+      @delete="handleDeleteDepartment"
+      @patch="handlePatchDept"
+    />
+    <EmployeeSection
+      :employees="store.employees"
+      :departments="store.departments"
+      @create="handleCreateEmployee"
+      @delete="handleDeleteEmployee"
+      @patch="handlePatchEmp"
+    />
+  </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>