wad-lab 1.2.2 → 1.2.4

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

@@ -0,0 +1,210 @@
+<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 Department (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. Only checked fields will be included in the request payload.
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Department ID</label>
+            <input
+              type="text"
+              class="form-control"
+              :value="department ? department.id : ''"
+              disabled
+            />
+          </div>
+
+          <!-- Name Field -->
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="patchDeptName"
+                class="form-check-input"
+                v-model="fieldsToPatch.name"
+              />
+              <label for="patchDeptName" class="form-label" style="margin-bottom: 0; cursor: pointer;">
+                Patch Department Name
+              </label>
+            </div>
+            <input
+              type="text"
+              class="form-control"
+              v-model="patchValues.name"
+              :disabled="!fieldsToPatch.name"
+              placeholder="New department name"
+            />
+            <small class="card-subtitle" v-if="department">
+              Current: {{ department.name }}
+            </small>
+          </div>
+
+          <!-- Location Field -->
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="patchDeptLocation"
+                class="form-check-input"
+                v-model="fieldsToPatch.location"
+              />
+              <label for="patchDeptLocation" class="form-label" style="margin-bottom: 0; cursor: pointer;">
+                Patch Location
+              </label>
+            </div>
+            <input
+              type="text"
+              class="form-control"
+              v-model="patchValues.location"
+              :disabled="!fieldsToPatch.location"
+              placeholder="New location"
+            />
+            <small class="card-subtitle" v-if="department">
+              Current: {{ department.location }}
+            </small>
+          </div>
+
+          <!-- Budget Field -->
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="patchDeptBudget"
+                class="form-check-input"
+                v-model="fieldsToPatch.budget"
+              />
+              <label for="patchDeptBudget" class="form-label" style="margin-bottom: 0; cursor: pointer;">
+                Patch Annual Budget
+              </label>
+            </div>
+            <input
+              type="number"
+              class="form-control"
+              v-model.number="patchValues.budget"
+              :disabled="!fieldsToPatch.budget"
+              placeholder="New annual budget"
+              min="0"
+              step="1000"
+            />
+            <small class="card-subtitle" v-if="department">
+              Current: ${{ Number(department.budget || 0).toLocaleString() }}
+            </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: 'DepartmentPatchModal',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    department: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['close', 'patch'],
+  data() {
+    return {
+      fieldsToPatch: {
+        name: false,
+        location: false,
+        budget: false
+      },
+      patchValues: {
+        name: '',
+        location: '',
+        budget: 0
+      },
+      submitting: false
+    }
+  },
+  computed: {
+    payload() {
+      const result = {}
+      if (this.fieldsToPatch.name) {
+        result.name = this.patchValues.name
+      }
+      if (this.fieldsToPatch.location) {
+        result.location = this.patchValues.location
+      }
+      if (this.fieldsToPatch.budget) {
+        result.budget = Number(this.patchValues.budget)
+      }
+      return result
+    },
+    jsonPayload() {
+      return JSON.stringify(this.payload, null, 2)
+    },
+    isPayloadEmpty() {
+      return Object.keys(this.payload).length === 0
+    }
+  },
+  watch: {
+    department: {
+      immediate: true,
+      handler(val) {
+        this.fieldsToPatch = {
+          name: false,
+          location: false,
+          budget: false
+        }
+        if (val) {
+          this.patchValues = {
+            name: val.name || '',
+            location: val.location || '',
+            budget: val.budget !== undefined ? Number(val.budget) : 0
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    async handlePatch() {
+      if (this.isPayloadEmpty || !this.department) return
+      this.submitting = true
+      try {
+        await this.$emit('patch', {
+          id: this.department.id,
+          patchData: { ...this.payload }
+        })
+      } finally {
+        this.submitting = false
+      }
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div>
+        <h2 class="card-title">Departments</h2>
+        <p class="card-subtitle">Manage organizational departments and budgets</p>
+      </div>
+      <button type="button" class="btn btn-primary" @click="$emit('create')">
+        Add Department
+      </button>
+    </div>
+
+    <div class="search-bar">
+      <input
+        type="text"
+        class="form-control search-input"
+        placeholder="Search departments by name or location..."
+        v-model="searchTerm"
+      />
+      <span class="badge badge-secondary">
+        {{ filteredDepartments.length }} Department{{ filteredDepartments.length === 1 ? '' : 's' }}
+      </span>
+    </div>
+
+    <div v-if="loading" class="alert alert-info">
+      Loading departments...
+    </div>
+
+    <div v-else-if="filteredDepartments.length === 0" class="alert alert-info">
+      No departments found. Click "Add Department" to create one.
+    </div>
+
+    <div v-else class="table-responsive">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Department Name</th>
+            <th>Location</th>
+            <th>Allocated Budget</th>
+            <th style="text-align: right;">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="dept in filteredDepartments" :key="dept.id">
+            <td>
+              <code>{{ dept.id }}</code>
+            </td>
+            <td>
+              <strong>{{ dept.name }}</strong>
+            </td>
+            <td>{{ dept.location || 'N/A' }}</td>
+            <td>
+              <span class="badge badge-success">
+                {{ formatCurrency(dept.budget) }}
+              </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', dept)"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-patch btn-sm"
+                  title="Partial Update (PATCH)"
+                  @click="$emit('patch', dept)"
+                >
+                  Patch
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-danger btn-sm"
+                  title="Delete (DELETE)"
+                  @click="$emit('delete', dept.id)"
+                >
+                  Delete
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DepartmentTable',
+  props: {
+    departments: {
+      type: Array,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['create', 'edit', 'patch', 'delete'],
+  data() {
+    return {
+      searchTerm: ''
+    }
+  },
+  computed: {
+    filteredDepartments() {
+      if (!this.searchTerm.trim()) {
+        return this.departments
+      }
+      const term = this.searchTerm.toLowerCase()
+      return this.departments.filter((dept) => {
+        const name = (dept.name || '').toLowerCase()
+        const location = (dept.location || '').toLowerCase()
+        return name.includes(term) || location.includes(term)
+      })
+    }
+  },
+  methods: {
+    formatCurrency(val) {
+      const num = Number(val)
+      if (isNaN(num)) return '$0'
+      return '$' + num.toLocaleString()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,177 @@
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="$emit('close')">
+    <div class="modal-container">
+      <div class="modal-header">
+        <h3 class="modal-title">
+          {{ isEdit ? 'Edit Employee (PUT)' : 'Create Employee (POST)' }}
+        </h3>
+        <button type="button" class="modal-close-btn" @click="$emit('close')">&times;</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit">
+        <div class="modal-body">
+          <div v-if="isEdit" class="form-group">
+            <label class="form-label">Employee ID</label>
+            <input
+              type="text"
+              class="form-control"
+              :value="formData.id"
+              disabled
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Full Name</label>
+            <input
+              type="text"
+              class="form-control"
+              v-model="formData.name"
+              placeholder="e.g. John Doe"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Email Address</label>
+            <input
+              type="email"
+              class="form-control"
+              v-model="formData.email"
+              placeholder="e.g. john.doe@example.com"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Job Role</label>
+            <input
+              type="text"
+              class="form-control"
+              v-model="formData.role"
+              placeholder="e.g. Software Engineer, Manager, Designer"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Annual Salary (USD)</label>
+            <input
+              type="number"
+              class="form-control"
+              v-model.number="formData.salary"
+              placeholder="e.g. 85000"
+              min="0"
+              step="1000"
+              required
+            />
+          </div>
+
+          <div class="form-group">
+            <label class="form-label">Department</label>
+            <select
+              class="form-control"
+              v-model="formData.departmentId"
+              required
+            >
+              <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>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="$emit('close')">
+            Cancel
+          </button>
+          <button type="submit" class="btn btn-primary" :disabled="submitting">
+            {{ submitting ? 'Saving...' : (isEdit ? 'Save Changes (PUT)' : 'Create Employee (POST)') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmployeeFormModal',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    employee: {
+      type: Object,
+      default: null
+    },
+    departments: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ['close', 'save'],
+  data() {
+    return {
+      formData: {
+        id: '',
+        name: '',
+        email: '',
+        role: '',
+        salary: 0,
+        departmentId: ''
+      },
+      submitting: false
+    }
+  },
+  computed: {
+    isEdit() {
+      return !!(this.employee && this.employee.id)
+    }
+  },
+  watch: {
+    employee: {
+      immediate: true,
+      handler(val) {
+        if (val && val.id) {
+          this.formData = {
+            id: val.id,
+            name: val.name || '',
+            email: val.email || '',
+            role: val.role || '',
+            salary: val.salary !== undefined ? Number(val.salary) : 0,
+            departmentId: val.departmentId || ''
+          }
+        } else {
+          this.formData = {
+            id: '',
+            name: '',
+            email: '',
+            role: 'Software Engineer',
+            salary: 75000,
+            departmentId: this.departments.length > 0 ? this.departments[0].id : ''
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    async handleSubmit() {
+      this.submitting = true
+      try {
+        await this.$emit('save', {
+          data: { ...this.formData },
+          isEdit: this.isEdit
+        })
+      } finally {
+        this.submitting = false
+      }
+    }
+  }
+}
+</script>