From e7f371351a9c89bf60e62b566887df0dc8010847 Mon Sep 17 00:00:00 2001
From: MoonTestUse1 <crocoman7887@gmail.com>
Date: Fri, 27 Dec 2024 02:54:53 +0600
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D1=87=D0=B8=D0=BD=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D1=81=D0=BE=D1=82=D1=80=D1=83=D0=B4=D0=BD=D0=B8=D0=BA=D0=B07?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/admin/EmployeeList.vue     | 144 ++++++++++--------
 1 file changed, 81 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/admin/EmployeeList.vue b/frontend/src/components/admin/EmployeeList.vue
index a5ea11a..55088ad 100644
--- a/frontend/src/components/admin/EmployeeList.vue
+++ b/frontend/src/components/admin/EmployeeList.vue
@@ -1,9 +1,74 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex justify-between items-center mb-6">
+      <h2 class="text-lg font-semibold">Сотрудники</h2>
+      <button
+        @click="handleAddClick"
+        class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center gap-2"
+      >
+        <UserPlusIcon :size="18" />
+        Добавить сотрудника
+      </button>
+    </div>
+
+    <div class="bg-white rounded-lg shadow overflow-hidden">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Фамилия</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Имя</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Отдел</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Кабинет</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Действия</th>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <tr v-for="employee in employees" :key="employee.id">
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+              {{ employee.last_name }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+              {{ employee.first_name }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+              {{ getDepartmentLabel(employee.department) }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+              {{ employee.office }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+              <button 
+                @click="editEmployee(employee)"
+                class="text-blue-600 hover:text-blue-900 mr-4 flex items-center gap-2"
+              >
+                <PencilIcon :size="16" />
+                Редактировать
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="showAddForm || editingEmployee" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+      <EmployeeForm
+        :employee="editingEmployee"
+        @close="closeForm"
+        @submit="handleSubmit"
+      />
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { UserPlusIcon, PencilIcon } from 'lucide-vue-next';
 import { departments } from '@/utils/constants';
 import type { Employee, EmployeeFormData } from '@/types/employee';
 import EmployeeForm from './EmployeeForm.vue';
 
+console.log('Initializing EmployeeList component');
+
 const employees = ref<Employee[]>([]);
 const showAddForm = ref(false);
 const editingEmployee = ref<Employee | null>(null);
@@ -13,16 +78,27 @@ function getDepartmentLabel(value: string) {
 }
 
 function editEmployee(employee: Employee) {
+  console.log('Editing employee:', employee);
   editingEmployee.value = employee;
   showAddForm.value = true;
 }
 
 function closeForm() {
+  console.log('Closing form');
   showAddForm.value = false;
   editingEmployee.value = null;
 }
 
+// Добавляем отладочный вывод для кнопки
+function handleAddClick() {
+  console.log('Add button clicked');
+  console.log('Previous showAddForm value:', showAddForm.value);
+  showAddForm.value = true;
+  console.log('New showAddForm value:', showAddForm.value);
+}
+
 async function handleSubmit(data: EmployeeFormData) {
+  console.log('Submitting form data:', data);
   try {
     if (editingEmployee.value) {
       // Update existing employee
@@ -68,66 +144,8 @@ async function fetchEmployees() {
   }
 }
 
-onMounted(fetchEmployees);
-</script>
-
-<template>
-  <div class="space-y-4">
-    <div class="flex justify-between items-center mb-6">
-      <h2 class="text-lg font-semibold">Сотрудники</h2>
-      <button
-        @click="showAddForm = true"
-        class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
-      >
-        Добавить сотрудника
-      </button>
-    </div>
-
-    <div class="bg-white rounded-lg shadow overflow-hidden">
-      <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-          <tr>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Фамилия</th>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Имя</th>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Отдел</th>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Кабинет</th>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Действия</th>
-          </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-          <tr v-for="employee in employees" :key="employee.id">
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {{ employee.last_name }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {{ employee.first_name }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {{ getDepartmentLabel(employee.department) }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-              {{ employee.office }}
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-              <button 
-                @click="editEmployee(employee)"
-                class="text-blue-600 hover:text-blue-900 mr-4"
-              >
-                Редактировать
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <Teleport to="body">
-      <EmployeeForm
-        v-if="showAddForm || editingEmployee"
-        :employee="editingEmployee"
-        @close="closeForm"
-        @submit="handleSubmit"
-      />
-    </Teleport>
-  </div>
-</template>
\ No newline at end of file
+onMounted(() => {
+  console.log('Component mounted');
+  fetchEmployees();
+});
+</script>
\ No newline at end of file