wad-lab 1.2.2 → 1.2.3

package/templates/vue-employee-system/src/components/EmployeeModal.vue

@@ -0,0 +1,183 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  isEdit: { type: Boolean, default: false },
+  employee: { type: Object, default: null },
+  departments: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const form = reactive({
+  id: '',
+  name: '',
+  department: 'Engineering',
+  experience: 1,
+  baseSalary: 50000
+})
+
+watch(
+  () => props.employee,
+  (val) => {
+    if (val) {
+      form.id = val.id
+      form.name = val.name
+      form.department = val.department
+      form.experience = val.experience
+      form.baseSalary = val.baseSalary
+    } else {
+      form.id = ''
+      form.name = ''
+      form.department = 'Engineering'
+      form.experience = 1
+      form.baseSalary = 50000
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  if (!form.name.trim()) return
+  emit('submit', {
+    id: Number(form.id) || Date.now(),
+    name: form.name.trim(),
+    department: form.department,
+    experience: Number(form.experience),
+    baseSalary: Number(form.baseSalary)
+  })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ isEdit ? 'Edit Employee' : 'Add Employee' }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div class="form-group">
+          <label for="emp-id">Employee ID</label>
+          <input id="emp-id" v-model.number="form.id" :disabled="isEdit" type="number" required />
+        </div>
+
+        <div class="form-group">
+          <label for="emp-name">Full Name</label>
+          <input id="emp-name" v-model="form.name" required placeholder="Jane Doe" />
+        </div>
+
+        <div class="form-group">
+          <label for="emp-dept">Department</label>
+          <select id="emp-dept" v-model="form.department">
+            <option v-for="d in departments.filter(x => x !== 'All')" :key="d" :value="d">
+              {{ d }}
+            </option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label for="emp-exp">Experience (Years)</label>
+          <input id="emp-exp" v-model.number="form.experience" type="number" min="0" required />
+        </div>
+
+        <div class="form-group">
+          <label for="emp-salary">Base Salary ($)</label>
+          <input id="emp-salary" v-model.number="form.baseSalary" type="number" min="0" required />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">{{ isEdit ? 'Save Changes' : 'Create' }}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: 13px;
+}
+
+.btn-primary { background: #0284c7; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+</style>

package/templates/vue-employee-system/src/components/EmployeeTable.vue

@@ -0,0 +1,91 @@
+<script setup>
+defineProps({
+  employees: { type: Array, required: true }
+})
+
+const emit = defineEmits(['edit', 'patch', 'delete'])
+</script>
+
+<template>
+  <div class="table-container">
+    <table class="emp-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Department</th>
+          <th>Experience</th>
+          <th>Base Salary</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="employees.length === 0">
+          <td colspan="6" class="empty">No employees found.</td>
+        </tr>
+        <tr v-for="emp in employees" :key="emp.id">
+          <td>{{ emp.id }}</td>
+          <td><strong>{{ emp.name }}</strong></td>
+          <td>{{ emp.department }}</td>
+          <td>{{ emp.experience }} yrs</td>
+          <td>${{ Number(emp.baseSalary).toLocaleString() }}</td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-edit" @click="emit('edit', emp)">Edit</button>
+            <button type="button" class="btn btn-patch" @click="emit('patch', emp)">Patch</button>
+            <button type="button" class="btn btn-delete" @click="emit('delete', emp.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.emp-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-edit { background: #0284c7; color: #fff; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-delete { background: #cf222e; color: #fff; }
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+</style>

package/templates/vue-employee-system/src/stores/employeeStore.js

@@ -44,6 +44,18 @@ export const useEmployeeStore = defineStore('employee', {
     addEmployee(emp) {
       this.employees.push(emp)
     },
+    updateEmployee(id, updated) {
+      const idx = this.employees.findIndex(e => e.id === Number(id))
+      if (idx !== -1) {
+        this.employees[idx] = { ...this.employees[idx], ...updated }
+      }
+    },
+    patchEmployee(id, partial) {
+      const item = this.employees.find(e => e.id === Number(id))
+      if (item) {
+        Object.assign(item, partial)
+      }
+    },
     deleteEmployee(id) {
       this.employees = this.employees.filter(emp => emp.id !== id)
     },