wad-lab 1.1.6 → 1.1.8

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

@@ -1,92 +1,106 @@
-<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>
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['delete-item', 'patch-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 @click="$emit('patch-item', item)" class="btn-patch">Patch</button>
+            <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-patch {
+  background-color: #0969da;
+  color: #ffffff;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  margin-right: 6px;
+}
+.btn-patch:hover {
+  background-color: #0856b3;
+}
+.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/fullstack-springboot-vue/frontend/vue-axios-router-pinia-props/src/stores/companyStore.js

@@ -1,84 +1,139 @@
-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)
-      }
-    }
-  }
-})
+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),
+    totalBudget: (state) => state.departments.reduce((sum, d) => sum + Number(d.budget || 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 addDepartment(dept) {
+      return this.createDepartment(dept)
+    },
+    async removeDepartment(id) {
+      return this.deleteDepartment(id)
+    },
+    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 removeEmployee(id) {
+      return this.deleteEmployee(id)
+    },
+    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/fullstack-springboot-vue/frontend/vue-axios-router-pinia-props/src/views/ManageDepartmentsView.vue

@@ -1,64 +1,73 @@
-<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>
+<script setup>
+import { onMounted } from 'vue'
+import { useCompanyStore } from '../stores/companyStore'
+import EntityTable from '../components/EntityTable.vue'
+import EntityForm from '../components/EntityForm.vue'
+
+const companyStore = useCompanyStore()
+const store = companyStore
+
+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)
+}
+
+const handlePatch = (item) => {
+  const code = prompt('New code:', item.code)
+  if (code) {
+    companyStore.patchDepartment(item.id, { code })
+  }
+}
+
+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"
+      @patch-item="handlePatch"
+    />
+  </div>
+</template>
+
+<style scoped>
+.manage-departments-view {
+  padding: 16px 0;
+}
+.manage-departments-view h2 {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+}
+</style>