wad-lab 1.2.2 → 1.2.4

package/templates/vue-2model-crud-patch/src/components/EmployeePatchModal.vue

@@ -0,0 +1,221 @@
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-container">
+      <div class="modal-header">
+        <h3 class="modal-title">Partial Update Employee (PATCH)</h3>
+        <button type="button" class="modal-close-btn" @click="$emit('close')">&times;</button>
+      </div>
+
+      <form @submit.prevent="handlePatch">
+        <div class="modal-body">
+          <div class="alert alert-info">
+            Select the specific field(s) you wish to update via HTTP PATCH (salary, role, departmentId). Only checked fields will be included in the request payload.
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Employee</label>
+            <input
+              type="text"
+              class="form-control"
+              :value="employee ? `${employee.name} (${employee.id})` : ''"
+              disabled
+            />
+          </div>
+
+          <!-- Salary Field -->
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="patchSalary"
+                class="form-check-input"
+                v-model="fieldsToPatch.salary"
+              />
+              <label for="patchSalary" class="form-label" style="margin-bottom: 0; cursor: pointer;">
+                Patch Salary
+              </label>
+            </div>
+            <input
+              type="number"
+              class="form-control"
+              v-model.number="patchValues.salary"
+              :disabled="!fieldsToPatch.salary"
+              placeholder="New salary"
+              min="0"
+              step="1000"
+            />
+            <small class="card-subtitle" v-if="employee">
+              Current: ${{ Number(employee.salary || 0).toLocaleString() }}
+            </small>
+          </div>
+
+          <!-- Role Field -->
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="patchRole"
+                class="form-check-input"
+                v-model="fieldsToPatch.role"
+              />
+              <label for="patchRole" class="form-label" style="margin-bottom: 0; cursor: pointer;">
+                Patch Role
+              </label>
+            </div>
+            <input
+              type="text"
+              class="form-control"
+              v-model="patchValues.role"
+              :disabled="!fieldsToPatch.role"
+              placeholder="New role title"
+            />
+            <small class="card-subtitle" v-if="employee">
+              Current: {{ employee.role || 'Staff' }}
+            </small>
+          </div>
+
+          <!-- Department Field -->
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="patchDeptId"
+                class="form-check-input"
+                v-model="fieldsToPatch.departmentId"
+              />
+              <label for="patchDeptId" class="form-label" style="margin-bottom: 0; cursor: pointer;">
+                Patch Department Assignment
+              </label>
+            </div>
+            <select
+              class="form-control"
+              v-model="patchValues.departmentId"
+              :disabled="!fieldsToPatch.departmentId"
+            >
+              <option value="" disabled>Select Department</option>
+              <option
+                v-for="dept in departments"
+                :key="dept.id"
+                :value="dept.id"
+              >
+                {{ dept.name }} ({{ dept.location || 'N/A' }})
+              </option>
+            </select>
+            <small class="card-subtitle" v-if="employee">
+              Current Department ID: {{ employee.departmentId || 'None' }}
+            </small>
+          </div>
+
+          <!-- JSON Payload Preview -->
+          <div class="form-group">
+            <label class="form-label">HTTP PATCH Payload Preview</label>
+            <pre class="code-preview">{{ jsonPayload }}</pre>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="$emit('close')">
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="btn btn-patch"
+            :disabled="submitting || isPayloadEmpty"
+          >
+            {{ submitting ? 'Applying...' : 'Apply Patch (PATCH)' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmployeePatchModal',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    employee: {
+      type: Object,
+      default: null
+    },
+    departments: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['close', 'patch'],
+  data() {
+    return {
+      fieldsToPatch: {
+        salary: false,
+        role: false,
+        departmentId: false
+      },
+      patchValues: {
+        salary: 0,
+        role: '',
+        departmentId: ''
+      },
+      submitting: false
+    }
+  },
+  computed: {
+    payload() {
+      const result = {}
+      if (this.fieldsToPatch.salary) {
+        result.salary = Number(this.patchValues.salary)
+      }
+      if (this.fieldsToPatch.role) {
+        result.role = this.patchValues.role
+      }
+      if (this.fieldsToPatch.departmentId) {
+        result.departmentId = this.patchValues.departmentId
+      }
+      return result
+    },
+    jsonPayload() {
+      return JSON.stringify(this.payload, null, 2)
+    },
+    isPayloadEmpty() {
+      return Object.keys(this.payload).length === 0
+    }
+  },
+  watch: {
+    employee: {
+      immediate: true,
+      handler(val) {
+        this.fieldsToPatch = {
+          salary: false,
+          role: false,
+          departmentId: false
+        }
+        if (val) {
+          this.patchValues = {
+            salary: val.salary !== undefined ? Number(val.salary) : 0,
+            role: val.role || '',
+            departmentId: val.departmentId || ''
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    async handlePatch() {
+      if (this.isPayloadEmpty || !this.employee) return
+      this.submitting = true
+      try {
+        await this.$emit('patch', {
+          id: this.employee.id,
+          patchData: { ...this.payload }
+        })
+      } finally {
+        this.submitting = false
+      }
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/src/components/EmployeeTable.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div>
+        <h2 class="card-title">Employees</h2>
+        <p class="card-subtitle">Manage workforce records, roles, salaries, and departmental assignments</p>
+      </div>
+      <button type="button" class="btn btn-primary" @click="$emit('create')">
+        Add Employee
+      </button>
+    </div>
+
+    <div class="search-bar">
+      <input
+        type="text"
+        class="form-control search-input"
+        placeholder="Search employees by name, email, or role..."
+        v-model="searchTerm"
+      />
+      <select class="form-control" style="width: auto; min-width: 180px;" v-model="selectedDeptFilter">
+        <option value="">All Departments</option>
+        <option v-for="d in departments" :key="d.id" :value="d.id">
+          {{ d.name }}
+        </option>
+      </select>
+      <span class="badge badge-secondary">
+        {{ filteredEmployees.length }} Employee{{ filteredEmployees.length === 1 ? '' : 's' }}
+      </span>
+    </div>
+
+    <div v-if="loading" class="alert alert-info">
+      Loading employees...
+    </div>
+
+    <div v-else-if="filteredEmployees.length === 0" class="alert alert-info">
+      No employees found. Click "Add Employee" to create one.
+    </div>
+
+    <div v-else class="table-responsive">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Salary</th>
+            <th>Department</th>
+            <th style="text-align: right;">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="emp in filteredEmployees" :key="emp.id">
+            <td>
+              <code>{{ emp.id }}</code>
+            </td>
+            <td>
+              <strong>{{ emp.name }}</strong>
+            </td>
+            <td>{{ emp.email }}</td>
+            <td>
+              <span class="badge badge-primary">{{ emp.role || 'Staff' }}</span>
+            </td>
+            <td>
+              <span class="badge badge-success">
+                {{ formatCurrency(emp.salary) }}
+              </span>
+            </td>
+            <td>
+              <span class="badge badge-secondary">
+                {{ getDepartmentName(emp.departmentId) }}
+              </span>
+            </td>
+            <td style="text-align: right;">
+              <div class="btn-group" style="justify-content: flex-end;">
+                <button
+                  type="button"
+                  class="btn btn-secondary btn-sm"
+                  title="Full Update (PUT)"
+                  @click="$emit('edit', emp)"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-patch btn-sm"
+                  title="Partial Update (PATCH)"
+                  @click="$emit('patch', emp)"
+                >
+                  Patch
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-danger btn-sm"
+                  title="Delete (DELETE)"
+                  @click="$emit('delete', emp.id)"
+                >
+                  Delete
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmployeeTable',
+  props: {
+    employees: {
+      type: Array,
+      default: () => []
+    },
+    departments: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['create', 'edit', 'patch', 'delete'],
+  data() {
+    return {
+      searchTerm: '',
+      selectedDeptFilter: ''
+    }
+  },
+  computed: {
+    filteredEmployees() {
+      let result = this.employees
+
+      if (this.selectedDeptFilter) {
+        result = result.filter(
+          (e) =>
+            e.departmentId === this.selectedDeptFilter ||
+            (this.getDepartmentName(e.departmentId) === this.selectedDeptFilter)
+        )
+      }
+
+      if (this.searchTerm.trim()) {
+        const term = this.searchTerm.toLowerCase()
+        result = result.filter((e) => {
+          const name = (e.name || '').toLowerCase()
+          const email = (e.email || '').toLowerCase()
+          const role = (e.role || '').toLowerCase()
+          return name.includes(term) || email.includes(term) || role.includes(term)
+        })
+      }
+
+      return result
+    }
+  },
+  methods: {
+    getDepartmentName(deptId) {
+      if (!deptId) return 'Unassigned'
+      const dept = this.departments.find((d) => d.id === deptId || d.name === deptId)
+      return dept ? dept.name : deptId
+    },
+    formatCurrency(val) {
+      const num = Number(val)
+      if (isNaN(num)) return '$0'
+      return '$' + num.toLocaleString()
+    }
+  }
+}
+</script>

package/templates/vue-2model-crud-patch/src/components/NavBar.vue

@@ -0,0 +1,156 @@
+<template>
+  <header class="navbar">
+    <div class="navbar-container">
+      <div class="navbar-brand">
+        <span class="brand-title">Enterprise Resource Manager</span>
+        <span class="badge badge-secondary">Spring Boot + Vue 3</span>
+      </div>
+
+      <nav class="navbar-tabs">
+        <button
+          type="button"
+          class="tab-btn"
+          :class="{ active: currentTab === 'departments' }"
+          @click="selectTab('departments')"
+        >
+          Departments
+        </button>
+        <button
+          type="button"
+          class="tab-btn"
+          :class="{ active: currentTab === 'employees' }"
+          @click="selectTab('employees')"
+        >
+          Employees
+        </button>
+        <button
+          type="button"
+          class="tab-btn"
+          :class="{ active: currentTab === 'analytics' }"
+          @click="selectTab('analytics')"
+        >
+          Analytics Board
+        </button>
+      </nav>
+
+      <div class="navbar-status">
+        <span class="status-indicator"></span>
+        <span class="status-text">API: localhost:8080/api</span>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'NavBar',
+  props: {
+    currentTab: {
+      type: String,
+      default: 'departments'
+    }
+  },
+  emits: ['tab-change'],
+  methods: {
+    selectTab(tab) {
+      this.$emit('tab-change', tab)
+      if (this.$router && this.$route && this.$route.path !== `/${tab === 'departments' ? '' : tab}`) {
+        this.$router.push(tab === 'departments' ? '/' : `/${tab}`).catch(() => {})
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.navbar {
+  background-color: #0f172a;
+  color: #f8fafc;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.navbar-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  gap: 16px;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.brand-title {
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: #ffffff;
+}
+
+.navbar-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+.tab-btn:hover {
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.tab-btn.active {
+  color: #ffffff;
+  background-color: var(--primary);
+  font-weight: 600;
+}
+
+.navbar-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.75rem;
+  color: #94a3b8;
+}
+
+.status-indicator {
+  width: 8px;
+  height: 8px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+@media (max-width: 768px) {
+  .navbar-container {
+    height: auto;
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .navbar-tabs {
+    width: 100%;
+    overflow-x: auto;
+  }
+}
+</style>

package/templates/vue-2model-crud-patch/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

package/templates/vue-2model-crud-patch/src/router/index.js

@@ -0,0 +1,33 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import DepartmentsView from '../views/DepartmentsView.vue'
+import EmployeesView from '../views/EmployeesView.vue'
+import AnalyticsView from '../views/AnalyticsView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Departments',
+    component: DepartmentsView
+  },
+  {
+    path: '/departments',
+    redirect: '/'
+  },
+  {
+    path: '/employees',
+    name: 'Employees',
+    component: EmployeesView
+  },
+  {
+    path: '/analytics',
+    name: 'Analytics',
+    component: AnalyticsView
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

package/templates/vue-2model-crud-patch/src/services/api.js

@@ -0,0 +1,64 @@
+import axios from 'axios'
+
+const client = axios.create({
+  baseURL: 'http://localhost:8080/api',
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+export const departments = {
+  getAll() {
+    return client.get('/departments')
+  },
+  getById(id) {
+    return client.get(`/departments/${id}`)
+  },
+  create(data) {
+    return client.post('/departments', data)
+  },
+  update(id, data) {
+    return client.put(`/departments/${id}`, data)
+  },
+  patch(id, data) {
+    return client.patch(`/departments/${id}`, data)
+  },
+  remove(id) {
+    return client.delete(`/departments/${id}`)
+  },
+  getStats() {
+    return client.get('/departments/stats')
+  }
+}
+
+export const employees = {
+  getAll() {
+    return client.get('/employees')
+  },
+  getById(id) {
+    return client.get(`/employees/${id}`)
+  },
+  create(data) {
+    return client.post('/employees', data)
+  },
+  update(id, data) {
+    return client.put(`/employees/${id}`, data)
+  },
+  patch(id, data) {
+    return client.patch(`/employees/${id}`, data)
+  },
+  remove(id) {
+    return client.delete(`/employees/${id}`)
+  },
+  getJoined() {
+    return client.get('/employees/joined')
+  }
+}
+
+export const api = {
+  client,
+  departments,
+  employees
+}
+
+export default api