wad-lab 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/index.js +30 -3
- package/package.json +1 -1
- package/templates/vue-axios-basic/src/App.vue +405 -405
- package/templates/vue-axios-pinia/src/App.vue +427 -427
- package/templates/vue-axios-props-emits/src/App.vue +167 -167
- package/templates/vue-axios-props-emits/src/components/DepartmentForm.vue +98 -98
- package/templates/vue-axios-props-emits/src/components/DepartmentList.vue +91 -91
- package/templates/vue-axios-props-emits/src/components/EmployeeForm.vue +128 -128
- package/templates/vue-axios-props-emits/src/components/EmployeeList.vue +94 -94
- package/templates/vue-axios-router/src/App.vue +90 -90
- package/templates/vue-axios-router/src/views/AddEmployeeView.vue +247 -247
- package/templates/vue-axios-router/src/views/DepartmentView.vue +273 -273
- package/templates/vue-axios-router/src/views/EmployeeView.vue +196 -196
- package/templates/vue-axios-router/src/views/HomeDashboardView.vue +263 -263
- package/templates/vue-axios-router-props/src/App.vue +59 -59
|
@@ -1,405 +1,405 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="container">
|
|
3
|
-
<header class="header">
|
|
4
|
-
<h1>Company Directory</h1>
|
|
5
|
-
<p>Vue 3 + Axios Direct CRUD</p>
|
|
6
|
-
</header>
|
|
7
|
-
|
|
8
|
-
<div class="grid">
|
|
9
|
-
<section class="card">
|
|
10
|
-
<h2>Departments</h2>
|
|
11
|
-
|
|
12
|
-
<form @submit.prevent="createDepartment" class="form">
|
|
13
|
-
<div class="form-group">
|
|
14
|
-
<label for="dept-name">Department Name</label>
|
|
15
|
-
<input
|
|
16
|
-
id="dept-name"
|
|
17
|
-
v-model="deptForm.name"
|
|
18
|
-
type="text"
|
|
19
|
-
required
|
|
20
|
-
placeholder="e.g. Engineering"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
<div class="form-group">
|
|
24
|
-
<label for="dept-code">Department Code</label>
|
|
25
|
-
<input
|
|
26
|
-
id="dept-code"
|
|
27
|
-
v-model="deptForm.code"
|
|
28
|
-
type="text"
|
|
29
|
-
required
|
|
30
|
-
placeholder="e.g. ENG"
|
|
31
|
-
/>
|
|
32
|
-
</div>
|
|
33
|
-
<button type="submit" class="btn btn-primary">Add Department</button>
|
|
34
|
-
</form>
|
|
35
|
-
|
|
36
|
-
<div class="table-wrapper">
|
|
37
|
-
<table>
|
|
38
|
-
<thead>
|
|
39
|
-
<tr>
|
|
40
|
-
<th>ID</th>
|
|
41
|
-
<th>Name</th>
|
|
42
|
-
<th>Code</th>
|
|
43
|
-
<th>Action</th>
|
|
44
|
-
</tr>
|
|
45
|
-
</thead>
|
|
46
|
-
<tbody>
|
|
47
|
-
<tr v-if="departments.length === 0">
|
|
48
|
-
<td colspan="4" class="empty">No departments found</td>
|
|
49
|
-
</tr>
|
|
50
|
-
<tr v-for="dept in departments" :key="dept.id">
|
|
51
|
-
<td>{{ dept.id }}</td>
|
|
52
|
-
<td>{{ dept.name }}</td>
|
|
53
|
-
<td><code>{{ dept.code }}</code></td>
|
|
54
|
-
<td>
|
|
55
|
-
<button @click="deleteDepartment(dept.id)" class="btn btn-danger">Delete</button>
|
|
56
|
-
</td>
|
|
57
|
-
</tr>
|
|
58
|
-
</tbody>
|
|
59
|
-
</table>
|
|
60
|
-
</div>
|
|
61
|
-
</section>
|
|
62
|
-
|
|
63
|
-
<section class="card">
|
|
64
|
-
<h2>Employees</h2>
|
|
65
|
-
|
|
66
|
-
<form @submit.prevent="createEmployee" class="form">
|
|
67
|
-
<div class="form-group">
|
|
68
|
-
<label for="emp-name">Full Name</label>
|
|
69
|
-
<input
|
|
70
|
-
id="emp-name"
|
|
71
|
-
v-model="empForm.name"
|
|
72
|
-
type="text"
|
|
73
|
-
required
|
|
74
|
-
placeholder="e.g. Jane Doe"
|
|
75
|
-
/>
|
|
76
|
-
</div>
|
|
77
|
-
<div class="form-group">
|
|
78
|
-
<label for="emp-email">Email Address</label>
|
|
79
|
-
<input
|
|
80
|
-
id="emp-email"
|
|
81
|
-
v-model="empForm.email"
|
|
82
|
-
type="email"
|
|
83
|
-
required
|
|
84
|
-
placeholder="e.g. jane@example.com"
|
|
85
|
-
/>
|
|
86
|
-
</div>
|
|
87
|
-
<div class="form-group">
|
|
88
|
-
<label for="emp-dept">Department</label>
|
|
89
|
-
<select id="emp-dept" v-model="empForm.departmentId" required>
|
|
90
|
-
<option value="" disabled>Select Department</option>
|
|
91
|
-
<option v-for="dept in departments" :key="dept.id" :value="dept.id">
|
|
92
|
-
{{ dept.name }} ({{ dept.code }})
|
|
93
|
-
</option>
|
|
94
|
-
</select>
|
|
95
|
-
</div>
|
|
96
|
-
<div class="form-group">
|
|
97
|
-
<label for="emp-salary">Salary</label>
|
|
98
|
-
<input
|
|
99
|
-
id="emp-salary"
|
|
100
|
-
v-model.number="empForm.salary"
|
|
101
|
-
type="number"
|
|
102
|
-
min="0"
|
|
103
|
-
step="any"
|
|
104
|
-
required
|
|
105
|
-
placeholder="e.g. 75000"
|
|
106
|
-
/>
|
|
107
|
-
</div>
|
|
108
|
-
<button type="submit" class="btn btn-primary">Add Employee</button>
|
|
109
|
-
</form>
|
|
110
|
-
|
|
111
|
-
<div class="table-wrapper">
|
|
112
|
-
<table>
|
|
113
|
-
<thead>
|
|
114
|
-
<tr>
|
|
115
|
-
<th>ID</th>
|
|
116
|
-
<th>Name</th>
|
|
117
|
-
<th>Email</th>
|
|
118
|
-
<th>Department</th>
|
|
119
|
-
<th>Salary</th>
|
|
120
|
-
<th>Action</th>
|
|
121
|
-
</tr>
|
|
122
|
-
</thead>
|
|
123
|
-
<tbody>
|
|
124
|
-
<tr v-if="employees.length === 0">
|
|
125
|
-
<td colspan="6" class="empty">No employees found</td>
|
|
126
|
-
</tr>
|
|
127
|
-
<tr v-for="emp in employees" :key="emp.id">
|
|
128
|
-
<td>{{ emp.id }}</td>
|
|
129
|
-
<td>{{ emp.name }}</td>
|
|
130
|
-
<td>{{ emp.email }}</td>
|
|
131
|
-
<td>{{ getDepartmentName(emp.departmentId) }}</td>
|
|
132
|
-
<td>${{ Number(emp.salary).toLocaleString() }}</td>
|
|
133
|
-
<td>
|
|
134
|
-
<button @click="deleteEmployee(emp.id)" class="btn btn-danger">Delete</button>
|
|
135
|
-
</td>
|
|
136
|
-
</tr>
|
|
137
|
-
</tbody>
|
|
138
|
-
</table>
|
|
139
|
-
</div>
|
|
140
|
-
</section>
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
</template>
|
|
144
|
-
|
|
145
|
-
<script setup>
|
|
146
|
-
import { ref, reactive, onMounted } from 'vue'
|
|
147
|
-
import api from './services/api'
|
|
148
|
-
|
|
149
|
-
const departments = ref([])
|
|
150
|
-
const employees = ref([])
|
|
151
|
-
|
|
152
|
-
const deptForm = reactive({
|
|
153
|
-
name: '',
|
|
154
|
-
code: ''
|
|
155
|
-
})
|
|
156
|
-
|
|
157
|
-
const empForm = reactive({
|
|
158
|
-
name: '',
|
|
159
|
-
email: '',
|
|
160
|
-
departmentId: '',
|
|
161
|
-
salary: ''
|
|
162
|
-
})
|
|
163
|
-
|
|
164
|
-
const fetchDepartments = async () => {
|
|
165
|
-
try {
|
|
166
|
-
const response = await api.get('/departments')
|
|
167
|
-
departments.value = response.data
|
|
168
|
-
} catch (error) {
|
|
169
|
-
console.error(error)
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
const fetchEmployees = async () => {
|
|
174
|
-
try {
|
|
175
|
-
const response = await api.get('/employees')
|
|
176
|
-
employees.value = response.data
|
|
177
|
-
} catch (error) {
|
|
178
|
-
console.error(error)
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
const createDepartment = async () => {
|
|
183
|
-
try {
|
|
184
|
-
await api.post('/departments', {
|
|
185
|
-
name: deptForm.name,
|
|
186
|
-
code: deptForm.code
|
|
187
|
-
})
|
|
188
|
-
deptForm.name = ''
|
|
189
|
-
deptForm.code = ''
|
|
190
|
-
await fetchDepartments()
|
|
191
|
-
} catch (error) {
|
|
192
|
-
console.error(error)
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
const deleteDepartment = async (id) => {
|
|
197
|
-
try {
|
|
198
|
-
await api.delete(`/departments/${id}`)
|
|
199
|
-
await fetchDepartments()
|
|
200
|
-
await fetchEmployees()
|
|
201
|
-
} catch (error) {
|
|
202
|
-
console.error(error)
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
const createEmployee = async () => {
|
|
207
|
-
try {
|
|
208
|
-
await api.post('/employees', {
|
|
209
|
-
name: empForm.name,
|
|
210
|
-
email: empForm.email,
|
|
211
|
-
departmentId: Number(empForm.departmentId),
|
|
212
|
-
salary: Number(empForm.salary)
|
|
213
|
-
})
|
|
214
|
-
empForm.name = ''
|
|
215
|
-
empForm.email = ''
|
|
216
|
-
empForm.departmentId = ''
|
|
217
|
-
empForm.salary = ''
|
|
218
|
-
await fetchEmployees()
|
|
219
|
-
} catch (error) {
|
|
220
|
-
console.error(error)
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
const deleteEmployee = async (id) => {
|
|
225
|
-
try {
|
|
226
|
-
await api.delete(`/employees/${id}`)
|
|
227
|
-
await fetchEmployees()
|
|
228
|
-
} catch (error) {
|
|
229
|
-
console.error(error)
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
const getDepartmentName = (deptId) => {
|
|
234
|
-
const dept = departments.value.find((d) => d.id === deptId)
|
|
235
|
-
return dept ? dept.name : `Dept #${deptId}`
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
onMounted(() => {
|
|
239
|
-
fetchDepartments()
|
|
240
|
-
fetchEmployees()
|
|
241
|
-
})
|
|
242
|
-
</script>
|
|
243
|
-
|
|
244
|
-
<style>
|
|
245
|
-
* {
|
|
246
|
-
box-sizing: border-box;
|
|
247
|
-
margin: 0;
|
|
248
|
-
padding: 0;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
body {
|
|
252
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
253
|
-
background-color: #f4f5f7;
|
|
254
|
-
color: #333333;
|
|
255
|
-
line-height: 1.5;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.container {
|
|
259
|
-
max-width: 1200px;
|
|
260
|
-
margin: 0 auto;
|
|
261
|
-
padding: 32px 16px;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.header {
|
|
265
|
-
margin-bottom: 24px;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.header h1 {
|
|
269
|
-
font-size: 28px;
|
|
270
|
-
color: #1a1a1a;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.header p {
|
|
274
|
-
color: #666666;
|
|
275
|
-
font-size: 14px;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.grid {
|
|
279
|
-
display: grid;
|
|
280
|
-
grid-template-columns: 1fr;
|
|
281
|
-
gap: 24px;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
@media (min-width: 900px) {
|
|
285
|
-
.grid {
|
|
286
|
-
grid-template-columns: 1fr 1fr;
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
.card {
|
|
291
|
-
background: #ffffff;
|
|
292
|
-
border: 1px solid #e1e4e8;
|
|
293
|
-
border-radius: 8px;
|
|
294
|
-
padding: 20px;
|
|
295
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.card h2 {
|
|
299
|
-
font-size: 20px;
|
|
300
|
-
margin-bottom: 16px;
|
|
301
|
-
color: #222222;
|
|
302
|
-
border-bottom: 1px solid #edf0f2;
|
|
303
|
-
padding-bottom: 8px;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
.form {
|
|
307
|
-
display: flex;
|
|
308
|
-
flex-direction: column;
|
|
309
|
-
gap: 12px;
|
|
310
|
-
margin-bottom: 20px;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
.form-group {
|
|
314
|
-
display: flex;
|
|
315
|
-
flex-direction: column;
|
|
316
|
-
gap: 4px;
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.form-group label {
|
|
320
|
-
font-size: 13px;
|
|
321
|
-
font-weight: 600;
|
|
322
|
-
color: #444444;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.form-group input,
|
|
326
|
-
.form-group select {
|
|
327
|
-
padding: 8px 10px;
|
|
328
|
-
border: 1px solid #cccccc;
|
|
329
|
-
border-radius: 4px;
|
|
330
|
-
font-size: 14px;
|
|
331
|
-
background-color: #ffffff;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
.form-group input:focus,
|
|
335
|
-
.form-group select:focus {
|
|
336
|
-
outline: none;
|
|
337
|
-
border-color: #0066cc;
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
.btn {
|
|
341
|
-
padding: 8px 14px;
|
|
342
|
-
border: none;
|
|
343
|
-
border-radius: 4px;
|
|
344
|
-
cursor: pointer;
|
|
345
|
-
font-size: 13px;
|
|
346
|
-
font-weight: 600;
|
|
347
|
-
transition: background-color 0.15s ease;
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
.btn-primary {
|
|
351
|
-
background-color: #0066cc;
|
|
352
|
-
color: #ffffff;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
.btn-primary:hover {
|
|
356
|
-
background-color: #0052a3;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
.btn-danger {
|
|
360
|
-
background-color: #d9383a;
|
|
361
|
-
color: #ffffff;
|
|
362
|
-
padding: 4px 8px;
|
|
363
|
-
font-size: 12px;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
.btn-danger:hover {
|
|
367
|
-
background-color: #b8282a;
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
.table-wrapper {
|
|
371
|
-
overflow-x: auto;
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
table {
|
|
375
|
-
width: 100%;
|
|
376
|
-
border-collapse: collapse;
|
|
377
|
-
font-size: 13px;
|
|
378
|
-
margin-top: 8px;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
th, td {
|
|
382
|
-
text-align: left;
|
|
383
|
-
padding: 8px 10px;
|
|
384
|
-
border-bottom: 1px solid #eeeeee;
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
th {
|
|
388
|
-
background-color: #fafbfc;
|
|
389
|
-
color: #555555;
|
|
390
|
-
font-weight: 600;
|
|
391
|
-
}
|
|
392
|
-
|
|
393
|
-
code {
|
|
394
|
-
background: #f0f0f0;
|
|
395
|
-
padding: 2px 4px;
|
|
396
|
-
border-radius: 3px;
|
|
397
|
-
font-size: 12px;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.empty {
|
|
401
|
-
text-align: center;
|
|
402
|
-
color: #888888;
|
|
403
|
-
padding: 16px;
|
|
404
|
-
}
|
|
405
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="container">
|
|
3
|
+
<header class="header">
|
|
4
|
+
<h1>Company Directory</h1>
|
|
5
|
+
<p>Vue 3 + Axios Direct CRUD</p>
|
|
6
|
+
</header>
|
|
7
|
+
|
|
8
|
+
<div class="grid">
|
|
9
|
+
<section class="card">
|
|
10
|
+
<h2>Departments</h2>
|
|
11
|
+
|
|
12
|
+
<form @submit.prevent="createDepartment" class="form">
|
|
13
|
+
<div class="form-group">
|
|
14
|
+
<label for="dept-name">Department Name</label>
|
|
15
|
+
<input
|
|
16
|
+
id="dept-name"
|
|
17
|
+
v-model="deptForm.name"
|
|
18
|
+
type="text"
|
|
19
|
+
required
|
|
20
|
+
placeholder="e.g. Engineering"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="form-group">
|
|
24
|
+
<label for="dept-code">Department Code</label>
|
|
25
|
+
<input
|
|
26
|
+
id="dept-code"
|
|
27
|
+
v-model="deptForm.code"
|
|
28
|
+
type="text"
|
|
29
|
+
required
|
|
30
|
+
placeholder="e.g. ENG"
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
<button type="submit" class="btn btn-primary">Add Department</button>
|
|
34
|
+
</form>
|
|
35
|
+
|
|
36
|
+
<div class="table-wrapper">
|
|
37
|
+
<table>
|
|
38
|
+
<thead>
|
|
39
|
+
<tr>
|
|
40
|
+
<th>ID</th>
|
|
41
|
+
<th>Name</th>
|
|
42
|
+
<th>Code</th>
|
|
43
|
+
<th>Action</th>
|
|
44
|
+
</tr>
|
|
45
|
+
</thead>
|
|
46
|
+
<tbody>
|
|
47
|
+
<tr v-if="departments.length === 0">
|
|
48
|
+
<td colspan="4" class="empty">No departments found</td>
|
|
49
|
+
</tr>
|
|
50
|
+
<tr v-for="dept in departments" :key="dept.id">
|
|
51
|
+
<td>{{ dept.id }}</td>
|
|
52
|
+
<td>{{ dept.name }}</td>
|
|
53
|
+
<td><code>{{ dept.code }}</code></td>
|
|
54
|
+
<td>
|
|
55
|
+
<button @click="deleteDepartment(dept.id)" class="btn btn-danger">Delete</button>
|
|
56
|
+
</td>
|
|
57
|
+
</tr>
|
|
58
|
+
</tbody>
|
|
59
|
+
</table>
|
|
60
|
+
</div>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section class="card">
|
|
64
|
+
<h2>Employees</h2>
|
|
65
|
+
|
|
66
|
+
<form @submit.prevent="createEmployee" class="form">
|
|
67
|
+
<div class="form-group">
|
|
68
|
+
<label for="emp-name">Full Name</label>
|
|
69
|
+
<input
|
|
70
|
+
id="emp-name"
|
|
71
|
+
v-model="empForm.name"
|
|
72
|
+
type="text"
|
|
73
|
+
required
|
|
74
|
+
placeholder="e.g. Jane Doe"
|
|
75
|
+
/>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="form-group">
|
|
78
|
+
<label for="emp-email">Email Address</label>
|
|
79
|
+
<input
|
|
80
|
+
id="emp-email"
|
|
81
|
+
v-model="empForm.email"
|
|
82
|
+
type="email"
|
|
83
|
+
required
|
|
84
|
+
placeholder="e.g. jane@example.com"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="form-group">
|
|
88
|
+
<label for="emp-dept">Department</label>
|
|
89
|
+
<select id="emp-dept" v-model="empForm.departmentId" required>
|
|
90
|
+
<option value="" disabled>Select Department</option>
|
|
91
|
+
<option v-for="dept in departments" :key="dept.id" :value="dept.id">
|
|
92
|
+
{{ dept.name }} ({{ dept.code }})
|
|
93
|
+
</option>
|
|
94
|
+
</select>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="form-group">
|
|
97
|
+
<label for="emp-salary">Salary</label>
|
|
98
|
+
<input
|
|
99
|
+
id="emp-salary"
|
|
100
|
+
v-model.number="empForm.salary"
|
|
101
|
+
type="number"
|
|
102
|
+
min="0"
|
|
103
|
+
step="any"
|
|
104
|
+
required
|
|
105
|
+
placeholder="e.g. 75000"
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
108
|
+
<button type="submit" class="btn btn-primary">Add Employee</button>
|
|
109
|
+
</form>
|
|
110
|
+
|
|
111
|
+
<div class="table-wrapper">
|
|
112
|
+
<table>
|
|
113
|
+
<thead>
|
|
114
|
+
<tr>
|
|
115
|
+
<th>ID</th>
|
|
116
|
+
<th>Name</th>
|
|
117
|
+
<th>Email</th>
|
|
118
|
+
<th>Department</th>
|
|
119
|
+
<th>Salary</th>
|
|
120
|
+
<th>Action</th>
|
|
121
|
+
</tr>
|
|
122
|
+
</thead>
|
|
123
|
+
<tbody>
|
|
124
|
+
<tr v-if="employees.length === 0">
|
|
125
|
+
<td colspan="6" class="empty">No employees found</td>
|
|
126
|
+
</tr>
|
|
127
|
+
<tr v-for="emp in employees" :key="emp.id">
|
|
128
|
+
<td>{{ emp.id }}</td>
|
|
129
|
+
<td>{{ emp.name }}</td>
|
|
130
|
+
<td>{{ emp.email }}</td>
|
|
131
|
+
<td>{{ getDepartmentName(emp.departmentId) }}</td>
|
|
132
|
+
<td>${{ Number(emp.salary).toLocaleString() }}</td>
|
|
133
|
+
<td>
|
|
134
|
+
<button @click="deleteEmployee(emp.id)" class="btn btn-danger">Delete</button>
|
|
135
|
+
</td>
|
|
136
|
+
</tr>
|
|
137
|
+
</tbody>
|
|
138
|
+
</table>
|
|
139
|
+
</div>
|
|
140
|
+
</section>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</template>
|
|
144
|
+
|
|
145
|
+
<script setup>
|
|
146
|
+
import { ref, reactive, onMounted } from 'vue'
|
|
147
|
+
import api from './services/api'
|
|
148
|
+
|
|
149
|
+
const departments = ref([])
|
|
150
|
+
const employees = ref([])
|
|
151
|
+
|
|
152
|
+
const deptForm = reactive({
|
|
153
|
+
name: '',
|
|
154
|
+
code: ''
|
|
155
|
+
})
|
|
156
|
+
|
|
157
|
+
const empForm = reactive({
|
|
158
|
+
name: '',
|
|
159
|
+
email: '',
|
|
160
|
+
departmentId: '',
|
|
161
|
+
salary: ''
|
|
162
|
+
})
|
|
163
|
+
|
|
164
|
+
const fetchDepartments = async () => {
|
|
165
|
+
try {
|
|
166
|
+
const response = await api.get('/departments')
|
|
167
|
+
departments.value = response.data
|
|
168
|
+
} catch (error) {
|
|
169
|
+
console.error(error)
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
const fetchEmployees = async () => {
|
|
174
|
+
try {
|
|
175
|
+
const response = await api.get('/employees')
|
|
176
|
+
employees.value = response.data
|
|
177
|
+
} catch (error) {
|
|
178
|
+
console.error(error)
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
const createDepartment = async () => {
|
|
183
|
+
try {
|
|
184
|
+
await api.post('/departments', {
|
|
185
|
+
name: deptForm.name,
|
|
186
|
+
code: deptForm.code
|
|
187
|
+
})
|
|
188
|
+
deptForm.name = ''
|
|
189
|
+
deptForm.code = ''
|
|
190
|
+
await fetchDepartments()
|
|
191
|
+
} catch (error) {
|
|
192
|
+
console.error(error)
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
const deleteDepartment = async (id) => {
|
|
197
|
+
try {
|
|
198
|
+
await api.delete(`/departments/${id}`)
|
|
199
|
+
await fetchDepartments()
|
|
200
|
+
await fetchEmployees()
|
|
201
|
+
} catch (error) {
|
|
202
|
+
console.error(error)
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
const createEmployee = async () => {
|
|
207
|
+
try {
|
|
208
|
+
await api.post('/employees', {
|
|
209
|
+
name: empForm.name,
|
|
210
|
+
email: empForm.email,
|
|
211
|
+
departmentId: Number(empForm.departmentId),
|
|
212
|
+
salary: Number(empForm.salary)
|
|
213
|
+
})
|
|
214
|
+
empForm.name = ''
|
|
215
|
+
empForm.email = ''
|
|
216
|
+
empForm.departmentId = ''
|
|
217
|
+
empForm.salary = ''
|
|
218
|
+
await fetchEmployees()
|
|
219
|
+
} catch (error) {
|
|
220
|
+
console.error(error)
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
const deleteEmployee = async (id) => {
|
|
225
|
+
try {
|
|
226
|
+
await api.delete(`/employees/${id}`)
|
|
227
|
+
await fetchEmployees()
|
|
228
|
+
} catch (error) {
|
|
229
|
+
console.error(error)
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
const getDepartmentName = (deptId) => {
|
|
234
|
+
const dept = departments.value.find((d) => d.id === deptId)
|
|
235
|
+
return dept ? dept.name : `Dept #${deptId}`
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
onMounted(() => {
|
|
239
|
+
fetchDepartments()
|
|
240
|
+
fetchEmployees()
|
|
241
|
+
})
|
|
242
|
+
</script>
|
|
243
|
+
|
|
244
|
+
<style>
|
|
245
|
+
* {
|
|
246
|
+
box-sizing: border-box;
|
|
247
|
+
margin: 0;
|
|
248
|
+
padding: 0;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
body {
|
|
252
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
253
|
+
background-color: #f4f5f7;
|
|
254
|
+
color: #333333;
|
|
255
|
+
line-height: 1.5;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.container {
|
|
259
|
+
max-width: 1200px;
|
|
260
|
+
margin: 0 auto;
|
|
261
|
+
padding: 32px 16px;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.header {
|
|
265
|
+
margin-bottom: 24px;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.header h1 {
|
|
269
|
+
font-size: 28px;
|
|
270
|
+
color: #1a1a1a;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.header p {
|
|
274
|
+
color: #666666;
|
|
275
|
+
font-size: 14px;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.grid {
|
|
279
|
+
display: grid;
|
|
280
|
+
grid-template-columns: 1fr;
|
|
281
|
+
gap: 24px;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
@media (min-width: 900px) {
|
|
285
|
+
.grid {
|
|
286
|
+
grid-template-columns: 1fr 1fr;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.card {
|
|
291
|
+
background: #ffffff;
|
|
292
|
+
border: 1px solid #e1e4e8;
|
|
293
|
+
border-radius: 8px;
|
|
294
|
+
padding: 20px;
|
|
295
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.card h2 {
|
|
299
|
+
font-size: 20px;
|
|
300
|
+
margin-bottom: 16px;
|
|
301
|
+
color: #222222;
|
|
302
|
+
border-bottom: 1px solid #edf0f2;
|
|
303
|
+
padding-bottom: 8px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.form {
|
|
307
|
+
display: flex;
|
|
308
|
+
flex-direction: column;
|
|
309
|
+
gap: 12px;
|
|
310
|
+
margin-bottom: 20px;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.form-group {
|
|
314
|
+
display: flex;
|
|
315
|
+
flex-direction: column;
|
|
316
|
+
gap: 4px;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.form-group label {
|
|
320
|
+
font-size: 13px;
|
|
321
|
+
font-weight: 600;
|
|
322
|
+
color: #444444;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.form-group input,
|
|
326
|
+
.form-group select {
|
|
327
|
+
padding: 8px 10px;
|
|
328
|
+
border: 1px solid #cccccc;
|
|
329
|
+
border-radius: 4px;
|
|
330
|
+
font-size: 14px;
|
|
331
|
+
background-color: #ffffff;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.form-group input:focus,
|
|
335
|
+
.form-group select:focus {
|
|
336
|
+
outline: none;
|
|
337
|
+
border-color: #0066cc;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.btn {
|
|
341
|
+
padding: 8px 14px;
|
|
342
|
+
border: none;
|
|
343
|
+
border-radius: 4px;
|
|
344
|
+
cursor: pointer;
|
|
345
|
+
font-size: 13px;
|
|
346
|
+
font-weight: 600;
|
|
347
|
+
transition: background-color 0.15s ease;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.btn-primary {
|
|
351
|
+
background-color: #0066cc;
|
|
352
|
+
color: #ffffff;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.btn-primary:hover {
|
|
356
|
+
background-color: #0052a3;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.btn-danger {
|
|
360
|
+
background-color: #d9383a;
|
|
361
|
+
color: #ffffff;
|
|
362
|
+
padding: 4px 8px;
|
|
363
|
+
font-size: 12px;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.btn-danger:hover {
|
|
367
|
+
background-color: #b8282a;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.table-wrapper {
|
|
371
|
+
overflow-x: auto;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
table {
|
|
375
|
+
width: 100%;
|
|
376
|
+
border-collapse: collapse;
|
|
377
|
+
font-size: 13px;
|
|
378
|
+
margin-top: 8px;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
th, td {
|
|
382
|
+
text-align: left;
|
|
383
|
+
padding: 8px 10px;
|
|
384
|
+
border-bottom: 1px solid #eeeeee;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
th {
|
|
388
|
+
background-color: #fafbfc;
|
|
389
|
+
color: #555555;
|
|
390
|
+
font-weight: 600;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
code {
|
|
394
|
+
background: #f0f0f0;
|
|
395
|
+
padding: 2px 4px;
|
|
396
|
+
border-radius: 3px;
|
|
397
|
+
font-size: 12px;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.empty {
|
|
401
|
+
text-align: center;
|
|
402
|
+
color: #888888;
|
|
403
|
+
padding: 16px;
|
|
404
|
+
}
|
|
405
|
+
</style>
|