wad-lab 1.1.6 → 1.1.7

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

@@ -1,70 +1,137 @@
-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)
-      }
-    }
-  }
-})
+import { defineStore } from 'pinia'
+import api from '../services/api'
+
+export const useCompanyStore = defineStore('company', {
+  state: () => ({
+    departments: [],
+    employees: [],
+    loading: false,
+    error: null
+  }),
+  getters: {
+    totalDepts: (state) => state.departments.length,
+    totalDepartments: (state) => state.departments.length,
+    totalEmployees: (state) => state.employees.length,
+    totalPayroll: (state) => state.employees.reduce((sum, emp) => sum + (Number(emp.salary) || 0), 0),
+    getDepartmentName: (state) => (deptId) => {
+      const dept = state.departments.find((d) => d.id === deptId)
+      return dept ? dept.name : `Dept #${deptId}`
+    }
+  },
+  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 addDepartment(dept) {
+      return this.createDepartment(dept)
+    },
+    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 addEmployee(emp) {
+      return this.createEmployee(emp)
+    },
+    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-router-pinia/src/views/DepartmentView.vue

@@ -1,209 +1,229 @@
-<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>
+<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="handlePatchDepartment(dept.id, dept.code)" class="btn btn-warning">Patch</button>
+                <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)
+}
+
+const handlePatchDepartment = async (id, code) => {
+  const newCode = prompt('New code:', code)
+  if (newCode) {
+    await companyStore.patchDepartment(id, { code: newCode })
+  }
+}
+
+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;
+}
+
+.btn-warning {
+  background-color: #f0ad4e;
+  color: #ffffff;
+  padding: 4px 8px;
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+.btn-warning:hover {
+  background-color: #ec971f;
+}
+
+.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>