wad-lab 1.1.5 → 1.1.7

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

@@ -1,67 +1,76 @@
-<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>
+<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 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)
+}
+
+const handlePatch = (item) => {
+  const salary = prompt('New salary:', item.salary)
+  if (salary !== null && salary !== '') {
+    companyStore.patchEmployee(item.id, { salary: Number(salary) })
+  }
+}
+
+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"
+      @patch-item="handlePatch"
+    />
+  </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-props/src/App.vue

@@ -1,59 +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>
+<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

@@ -1,53 +1,72 @@
-<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>
+<script setup>
+const props = defineProps(['title', 'subtitle', 'id'])
+const emit = defineEmits(['remove', 'patch'])
+
+const handleRemove = () => {
+  emit('remove', props.id)
+}
+</script>
+
+<template>
+  <div class="data-card">
+    <div class="card-info">
+      <h4>{{ title }}</h4>
+      <p>{{ subtitle }}</p>
+    </div>
+    <div class="card-actions">
+      <button class="btn-patch" @click="$emit('patch', id)">Patch</button>
+      <button class="btn-remove" @click="handleRemove">Delete</button>
+    </div>
+  </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;
+}
+.card-actions {
+  display: flex;
+  gap: 8px;
+}
+.btn-patch {
+  background-color: #3182ce;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+.btn-patch:hover {
+  background-color: #2b6cb0;
+}
+.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/views/DepartmentPage.vue

@@ -1,77 +1,89 @@
-<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>
+<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)
+  }
+}
+
+const handlePatch = async (id, code) => {
+  const newCode = prompt('New code:', code)
+  if (!newCode || newCode === code) return
+  try {
+    await api.patch(`/departments/${id}`, { code: newCode })
+    await fetchDepartments()
+  } 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"
+        @patch="handlePatch(dept.id, dept.code)"
+      />
+    </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>