Починка добавления сотрудника11

frontend/src/components/admin/EmployeeList.vue

@@ -3,7 +3,8 @@
     <div class="flex justify-between items-center mb-6">
       <h2 class="text-lg font-semibold">Сотрудники</h2>
       <button
-        @click="openAddForm"
+        type="button"
+        @click="showAddForm = true"
         class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 flex items-center gap-2"
       >
         <UserPlusIcon :size="18" />
@@ -51,106 +52,94 @@
     </div>
 
     <!-- Модальное окно -->
-    <div v-if="showAddForm || editingEmployee" class="fixed inset-0 overflow-y-auto" style="z-index: 100;">
-      <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-        <div class="fixed inset-0 transition-opacity" aria-hidden="true" @click="closeForm">
-          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
-        </div>
-
-        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-            <div class="sm:flex sm:items-start">
-              <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
-                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
-                  {{ editingEmployee ? 'Редактировать сотрудника' : 'Добавить сотрудника' }}
-                </h3>
-                
-                <form @submit.prevent="handleSubmit" class="space-y-4">
-                  <div class="grid grid-cols-1 gap-4">
-                    <div>
-                      <label class="block text-sm font-medium text-gray-700">Фамилия</label>
-                      <input
-                        v-model="formData.last_name"
-                        type="text"
-                        required
-                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                    
-                    <div>
-                      <label class="block text-sm font-medium text-gray-700">Имя</label>
-                      <input
-                        v-model="formData.first_name"
-                        type="text"
-                        required
-                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                    
-                    <div>
-                      <label class="block text-sm font-medium text-gray-700">Отдел</label>
-                      <select
-                        v-model="formData.department"
-                        required
-                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                      >
-                        <option value="">Выберите отдел</option>
-                        <option v-for="dept in departments" :key="dept.value" :value="dept.value">
-                          {{ dept.label }}
-                        </option>
-                      </select>
-                    </div>
-                    
-                    <div>
-                      <label class="block text-sm font-medium text-gray-700">Кабинет</label>
-                      <input
-                        v-model="formData.office"
-                        type="text"
-                        required
-                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                    
-                    <div>
-                      <label class="block text-sm font-medium text-gray-700">
-                        Пароль {{ !editingEmployee ? '(обязательно)' : '(оставьте пустым, чтобы не менять)' }}
-                      </label>
-                      <input
-                        v-model="formData.password"
-                        type="password"
-                        :required="!editingEmployee"
-                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                    <button
-                      type="submit"
-                      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-                    >
-                      {{ editingEmployee ? 'Сохранить' : 'Добавить' }}
-                    </button>
-                    <button
-                      type="button"
-                      @click="closeForm"
-                      class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
-                    >
-                      Отмена
-                    </button>
-                  </div>
-                </form>
-              </div>
+    <Teleport to="body">
+      <div v-if="showAddForm" class="modal-overlay">
+        <div class="modal-wrapper">
+          <div class="modal">
+            <div class="modal-header">
+              <h3 class="text-lg font-medium">{{ editingEmployee ? 'Редактировать сотрудника' : 'Добавить сотрудника' }}</h3>
+              <button @click="closeForm" class="text-gray-400 hover:text-gray-500">
+                <span class="sr-only">Закрыть</span>
+                ×
+              </button>
             </div>
+            <form @submit.prevent="handleSubmit" class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-gray-700">Фамилия</label>
+                <input
+                  v-model="formData.last_name"
+                  type="text"
+                  required
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700">Имя</label>
+                <input
+                  v-model="formData.first_name"
+                  type="text"
+                  required
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700">Отдел</label>
+                <select
+                  v-model="formData.department"
+                  required
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                >
+                  <option value="">Выберите отдел</option>
+                  <option v-for="dept in departments" :key="dept.value" :value="dept.value">
+                    {{ dept.label }}
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700">Кабинет</label>
+                <input
+                  v-model="formData.office"
+                  type="text"
+                  required
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                />
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-gray-700">
+                  Пароль {{ !editingEmployee ? '(обязательно)' : '(оставьте пустым, чтобы не менять)' }}
+                </label>
+                <input
+                  v-model="formData.password"
+                  type="password"
+                  :required="!editingEmployee"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                />
+              </div>
+              <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+                <button
+                  type="submit"
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-2 sm:text-sm"
+                >
+                  {{ editingEmployee ? 'Сохранить' : 'Добавить' }}
+                </button>
+                <button
+                  type="button"
+                  @click="closeForm"
+                  class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:col-start-1 sm:text-sm"
+                >
+                  Отмена
+                </button>
+              </div>
+            </form>
           </div>
         </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import { UserPlusIcon, PencilIcon } from 'lucide-vue-next';
 import { departments } from '@/utils/constants';
 import type { Employee, EmployeeFormData } from '@/types/employee';
@@ -167,13 +156,6 @@ const formData = ref<EmployeeFormData>({
   password: ''
 });
 
-function openAddForm() {
-  console.log('Opening add form');
-  showAddForm.value = true;
-  console.log('showAddForm value:', showAddForm.value);
-}
-
-// Сброс формы при закрытии
 function resetForm() {
   formData.value = {
     first_name: '',
@@ -184,46 +166,29 @@ function resetForm() {
   };
 }
 
-// Наблюдаем за изменением showAddForm
-watch(showAddForm, (newValue) => {
-  console.log('showAddForm changed:', newValue);
-});
-
-// Наблюдаем за изменением editingEmployee
-watch(editingEmployee, (newEmployee) => {
-  console.log('editingEmployee changed:', newEmployee);
-  if (newEmployee) {
-    formData.value = {
-      first_name: newEmployee.first_name,
-      last_name: newEmployee.last_name,
-      department: newEmployee.department,
-      office: newEmployee.office,
-      password: ''
-    };
-  } else {
-    resetForm();
-  }
-});
-
 function getDepartmentLabel(value: string) {
   return departments.find(d => d.value === value)?.label || value;
 }
 
 function editEmployee(employee: Employee) {
-  console.log('Editing employee:', employee);
   editingEmployee.value = employee;
+  formData.value = {
+    first_name: employee.first_name,
+    last_name: employee.last_name,
+    department: employee.department,
+    office: employee.office,
+    password: ''
+  };
   showAddForm.value = true;
 }
 
 function closeForm() {
-  console.log('Closing form');
   showAddForm.value = false;
   editingEmployee.value = null;
   resetForm();
 }
 
 async function handleSubmit() {
-  console.log('Submitting form:', formData.value);
   try {
     const data = { ...formData.value };
     if (editingEmployee.value && !data.password) {
@@ -231,7 +196,6 @@ async function handleSubmit() {
     }
 
     if (editingEmployee.value) {
-      // Update existing employee
       const response = await fetch(`/api/employees/${editingEmployee.value.id}`, {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
@@ -243,7 +207,6 @@ async function handleSubmit() {
         throw new Error(error.detail || 'Failed to update employee');
       }
     } else {
-      // Create new employee
       const response = await fetch('/api/employees/', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -274,18 +237,45 @@ async function fetchEmployees() {
   }
 }
 
-onMounted(() => {
-  console.log('Component mounted');
-  fetchEmployees();
-});
+onMounted(fetchEmployees);
 </script>
 
 <style scoped>
-.fixed {
+.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+.modal-wrapper {
+  background-color: white;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 28rem;
+  margin: 1rem;
+}
+
+.modal {
+  padding: 1.5rem;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.modal-header button {
+  font-size: 1.5rem;
+  line-height: 1;
+  padding: 0.25rem;
 }
 </style>