переработка модальных окон6

frontend/src/components/admin/EmployeesModal.vue

@@ -6,83 +6,52 @@
         <button class="close-button" @click="closeModal">&times;</button>
       </div>
 
-      <div class="employees-container">
       <div class="search-bar">
         <input
           type="text"
           v-model="searchQuery"
-            placeholder="Поиск по имени или отделу..."
+          placeholder="Поиск сотрудников..."
           class="search-input"
         >
       </div>
 
-        <div class="employees-list" v-if="filteredEmployees.length">
+      <div class="employees-list">
         <div v-for="employee in filteredEmployees" :key="employee.id" class="employee-card">
           <div class="employee-info">
             <h3>{{ employee.last_name }} {{ employee.first_name }}</h3>
-              <p class="department">{{ employee.department }}</p>
+            <p>Отдел: {{ employee.department }}</p>
+            <p>Кабинет: {{ employee.office }}</p>
           </div>
-
           <div class="employee-actions">
-              <button class="edit-button" @click="editEmployee(employee)">
+            <button @click="editEmployee(employee)" class="edit-button">
               Изменить
             </button>
-              <button class="delete-button" @click="deleteEmployee(employee.id)">
+            <button @click="confirmDelete(employee)" class="delete-button">
               Удалить
             </button>
           </div>
         </div>
       </div>
 
-        <div v-else class="no-employees">
-          <p>Сотрудники не найдены</p>
-        </div>
-      </div>
-    </div>
-
       <!-- Модальное окно редактирования -->
-    <div v-if="editingEmployee" class="edit-modal">
-      <div class="edit-modal-content" @click.stop>
-        <h3>Редактировать сотрудника</h3>
+      <EditEmployeeModal
+        v-if="showEditModal"
+        :isOpen="showEditModal"
+        :employee="selectedEmployee"
+        @close="closeEditModal"
+        @employee-updated="handleEmployeeUpdated"
+      />
 
-        <form @submit.prevent="saveEmployee" class="edit-form">
-          <div class="form-group">
-            <label>Имя</label>
-            <input
-              type="text"
-              v-model="editingEmployee.first_name"
-              required
-              class="form-input"
-            >
+      <!-- Модальное окно подтверждения удаления -->
+      <div v-if="showDeleteConfirm" class="confirm-modal">
+        <div class="confirm-content">
+          <h3>Подтверждение удаления</h3>
+          <p>Вы действительно хотите удалить сотрудника {{ selectedEmployee?.last_name }} {{ selectedEmployee?.first_name }}?</p>
+          <div class="confirm-actions">
+            <button @click="deleteEmployee" class="delete-button">Удалить</button>
+            <button @click="cancelDelete" class="cancel-button">Отмена</button>
           </div>
-
-          <div class="form-group">
-            <label>Фамилия</label>
-            <input
-              type="text"
-              v-model="editingEmployee.last_name"
-              required
-              class="form-input"
-            >
         </div>
-
-          <div class="form-group">
-            <label>Отдел</label>
-            <input
-              type="text"
-              v-model="editingEmployee.department"
-              required
-              class="form-input"
-            >
-          </div>
-
-          <div class="form-actions">
-            <button type="submit" class="save-button">Сохранить</button>
-            <button type="button" class="cancel-button" @click="cancelEdit">
-              Отмена
-            </button>
-          </div>
-        </form>
       </div>
     </div>
   </div>
@@ -90,9 +59,13 @@
 
 <script>
 import axios from 'axios'
+import EditEmployeeModal from './EditEmployeeModal.vue'
 
 export default {
   name: 'EmployeesModal',
+  components: {
+    EditEmployeeModal
+  },
   props: {
     isOpen: {
       type: Boolean,
@@ -103,18 +76,20 @@ export default {
     return {
       employees: [],
       searchQuery: '',
-      editingEmployee: null,
-      isLoading: false
+      showEditModal: false,
+      showDeleteConfirm: false,
+      selectedEmployee: null,
+      error: ''
     }
   },
   computed: {
     filteredEmployees() {
       const query = this.searchQuery.toLowerCase()
-      return this.employees.filter(employee => {
-        const fullName = `${employee.last_name} ${employee.first_name}`.toLowerCase()
-        const department = employee.department.toLowerCase()
-        return fullName.includes(query) || department.includes(query)
-      })
+      return this.employees.filter(employee => 
+        employee.last_name.toLowerCase().includes(query) ||
+        employee.first_name.toLowerCase().includes(query) ||
+        employee.department.toLowerCase().includes(query)
+      )
     }
   },
   methods: {
@@ -134,49 +109,43 @@ export default {
       }
     },
     editEmployee(employee) {
-      this.editingEmployee = { ...employee }
+      this.selectedEmployee = employee
+      this.showEditModal = true
     },
-    cancelEdit() {
-      this.editingEmployee = null
+    closeEditModal() {
+      this.showEditModal = false
+      this.selectedEmployee = null
     },
-    async saveEmployee() {
+    handleEmployeeUpdated() {
+      this.fetchEmployees()
+      this.closeEditModal()
+    },
+    confirmDelete(employee) {
+      this.selectedEmployee = employee
+      this.showDeleteConfirm = true
+    },
+    cancelDelete() {
+      this.showDeleteConfirm = false
+      this.selectedEmployee = null
+    },
+    async deleteEmployee() {
       try {
-        await axios.put(`/api/employees/${this.editingEmployee.id}`,
-          this.editingEmployee,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem('admin_token')}`
-            }
-          }
-        )
-        
-        await this.fetchEmployees()
-        this.editingEmployee = null
-      } catch (error) {
-        console.error('Error updating employee:', error)
-      }
-    },
-    async deleteEmployee(employeeId) {
-      if (!confirm('Вы уверены, что хотите удалить этого сотрудника?')) {
-        return
-      }
-
-      try {
-        await axios.delete(`/api/employees/${employeeId}`, {
+        await axios.delete(`/api/employees/${this.selectedEmployee.id}`, {
           headers: {
             Authorization: `Bearer ${localStorage.getItem('admin_token')}`
           }
         })
-        
-        await this.fetchEmployees()
+        this.showDeleteConfirm = false
+        this.selectedEmployee = null
+        this.fetchEmployees()
       } catch (error) {
         console.error('Error deleting employee:', error)
       }
     }
   },
   watch: {
-    isOpen(newValue) {
-      if (newValue) {
+    isOpen(newVal) {
+      if (newVal) {
         this.fetchEmployees()
       }
     }
@@ -204,7 +173,7 @@ export default {
   padding: 2rem;
   width: 90%;
   max-width: 800px;
-  max-height: 90vh;
+  max-height: 80vh;
   overflow-y: auto;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 }
@@ -237,7 +206,7 @@ export default {
 }
 
 .search-bar {
-  margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
 }
 
 .search-input {
@@ -256,41 +225,41 @@ export default {
 
 .employees-list {
   display: grid;
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
 }
 
 .employee-card {
-  background: #f8f9fa;
+  background: #f5f5f5;
   border-radius: 8px;
   padding: 1.5rem;
-  border: 1px solid #e0e0e0;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .employee-info h3 {
-  margin: 0 0 0.5rem 0;
+  margin: 0;
   color: #1a237e;
   font-size: 1.2rem;
 }
 
-.department {
-  margin: 0;
+.employee-info p {
+  margin: 0.5rem 0;
   color: #666;
 }
 
 .employee-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
 }
 
 .edit-button, .delete-button {
-  padding: 0.5rem 1rem;
+  flex: 1;
+  padding: 0.5rem;
   border: none;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
+  border-radius: 4px;
+  font-size: 0.9rem;
   cursor: pointer;
   transition: all 0.3s;
 }
@@ -305,21 +274,15 @@ export default {
 }
 
 .delete-button {
-  background-color: #fbe9e7;
-  color: #d32f2f;
+  background-color: #f44336;
+  color: white;
 }
 
 .delete-button:hover {
-  background-color: #ffcdd2;
+  background-color: #d32f2f;
 }
 
-.no-employees {
-  text-align: center;
-  padding: 2rem;
-  color: #666;
-}
-
-.edit-modal {
+.confirm-modal {
   position: fixed;
   top: 0;
   left: 0;
@@ -332,101 +295,38 @@ export default {
   z-index: 1100;
 }
 
-.edit-modal-content {
+.confirm-content {
   background: white;
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 2rem;
   width: 100%;
-  max-width: 500px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  max-width: 400px;
+  text-align: center;
 }
 
-.edit-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-group label {
+.confirm-content h3 {
+  margin: 0 0 1rem;
   color: #1a237e;
-  font-weight: 500;
 }
 
-.form-input {
-  padding: 0.75rem;
-  border: 2px solid #e0e0e0;
-  border-radius: 6px;
-  font-size: 1rem;
-  transition: border-color 0.3s;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: #1a237e;
-}
-
-.form-actions {
+.confirm-actions {
   display: flex;
   gap: 1rem;
-  margin-top: 1rem;
-}
-
-.save-button {
-  flex: 1;
-  background-color: #1a237e;
-  color: white;
-  padding: 0.75rem;
-  border: none;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.save-button:hover {
-  background-color: #283593;
+  margin-top: 2rem;
 }
 
 .cancel-button {
   flex: 1;
-  background-color: #f5f5f5;
-  color: #666;
+  background-color: #9e9e9e;
+  color: white;
   padding: 0.75rem;
   border: none;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-weight: 500;
+  border-radius: 4px;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: background-color 0.3s;
 }
 
 .cancel-button:hover {
-  background-color: #e0e0e0;
-  color: #1a237e;
-}
-
-@media (max-width: 768px) {
-  .modal-content {
-    padding: 1rem;
-    width: 95%;
-  }
-
-  .employee-card {
-    flex-direction: column;
-    gap: 1rem;
-    text-align: center;
-  }
-
-  .employee-actions {
-    width: 100%;
-    justify-content: center;
-  }
+  background-color: #757575;
 }
 </style> 

frontend/src/views/admin/AdminDashboardView.vue

@@ -1,244 +1,163 @@
 <template>
-  <div class="admin-layout">
-    <AdminHeader />
-    <main class="admin-main">
-      <div class="dashboard-container">
-        <h1 class="dashboard-title">Панель управления</h1>
-        
-        <div class="stats-grid">
-          <div class="stat-card">
-            <h3>Всего заявок</h3>
-            <p class="stat-number">{{ statistics.total_requests || 0 }}</p>
+  <div class="admin-dashboard">
+    <div class="dashboard-header">
+      <h1>Панель администратора</h1>
+      <button @click="logout" class="logout-button">Выйти</button>
     </div>
 
-          <div class="stat-card">
-            <h3>Новые заявки</h3>
-            <p class="stat-number">{{ statistics.by_status?.new || 0 }}</p>
+    <div class="dashboard-content">
+      <div class="action-buttons">
+        <button @click="showAddEmployeeModal = true" class="action-button">
+          Добавить сотрудника
+        </button>
+        <button @click="showEmployeesModal = true" class="action-button">
+          Список сотрудников
+        </button>
+        <button @click="showRequestsModal = true" class="action-button">
+          Управление заявками
+        </button>
       </div>
 
-          <div class="stat-card">
-            <h3>В работе</h3>
-            <p class="stat-number">{{ statistics.by_status?.in_progress || 0 }}</p>
-          </div>
-          
-          <div class="stat-card">
-            <h3>Завершенные</h3>
-            <p class="stat-number">{{ statistics.by_status?.completed || 0 }}</p>
-          </div>
-        </div>
-
-        <div class="actions-grid">
-          <div class="action-card" @click="showAddEmployeeModal">
-            <div class="action-icon">👥</div>
-            <h3>Добавить сотрудника</h3>
-            <p>Регистрация нового сотрудника в системе</p>
-          </div>
-
-          <div class="action-card" @click="showRequestsModal">
-            <div class="action-icon">📝</div>
-            <h3>Управление заявками</h3>
-            <p>Просмотр и обработка заявок</p>
-          </div>
-
-          <div class="action-card" @click="showEmployeesModal">
-            <div class="action-icon">👤</div>
-            <h3>Список сотрудников</h3>
-            <p>Управление учетными записями</p>
-          </div>
-        </div>
-      </div>
-    </main>
-    <AdminFooter />
-    
+      <!-- Модальные окна -->
       <AddEmployeeModal
-      :is-open="isAddEmployeeModalOpen"
-      @close="closeAddEmployeeModal"
+        v-if="showAddEmployeeModal"
+        :isOpen="showAddEmployeeModal"
+        @close="showAddEmployeeModal = false"
         @employee-added="handleEmployeeAdded"
       />
 
-    <RequestsModal
-      :is-open="isRequestsModalOpen"
-      @close="closeRequestsModal"
+      <EmployeesModal
+        v-if="showEmployeesModal"
+        :isOpen="showEmployeesModal"
+        @close="showEmployeesModal = false"
       />
 
-    <EmployeesModal
-      :is-open="isEmployeesModalOpen"
-      @close="closeEmployeesModal"
+      <RequestsModal
+        v-if="showRequestsModal"
+        :isOpen="showRequestsModal"
+        @close="showRequestsModal = false"
       />
     </div>
+  </div>
 </template>
 
 <script>
-import AdminHeader from '@/components/AdminHeader.vue'
-import AdminFooter from '@/components/AdminFooter.vue'
 import AddEmployeeModal from '@/components/admin/AddEmployeeModal.vue'
-import RequestsModal from '@/components/admin/RequestsModal.vue'
 import EmployeesModal from '@/components/admin/EmployeesModal.vue'
-import axios from 'axios'
+import RequestsModal from '@/components/admin/RequestsModal.vue'
 
 export default {
   name: 'AdminDashboardView',
   components: {
-    AdminHeader,
-    AdminFooter,
     AddEmployeeModal,
-    RequestsModal,
-    EmployeesModal
+    EmployeesModal,
+    RequestsModal
   },
   data() {
     return {
-      statistics: {
-        total_requests: 0,
-        by_status: {},
-        by_priority: {}
-      },
-      isAddEmployeeModalOpen: false,
-      isRequestsModalOpen: false,
-      isEmployeesModalOpen: false
+      showAddEmployeeModal: false,
+      showEmployeesModal: false,
+      showRequestsModal: false
     }
   },
   methods: {
-    showAddEmployeeModal() {
-      this.isAddEmployeeModalOpen = true
-    },
-    closeAddEmployeeModal() {
-      this.isAddEmployeeModalOpen = false
-    },
-    showRequestsModal() {
-      this.isRequestsModalOpen = true
-    },
-    closeRequestsModal() {
-      this.isRequestsModalOpen = false
-    },
-    showEmployeesModal() {
-      this.isEmployeesModalOpen = true
-    },
-    closeEmployeesModal() {
-      this.isEmployeesModalOpen = false
+    logout() {
+      localStorage.removeItem('admin_token')
+      this.$router.push('/admin/login')
     },
     handleEmployeeAdded() {
-      // Можно добавить уведомление об успешном добавлении
-      console.log('Сотрудник успешно добавлен')
-    },
-    async fetchStatistics() {
-      try {
-        const response = await axios.get('/api/requests/statistics', {
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
-          }
-        });
-        this.statistics = response.data;
-      } catch (error) {
-        console.error('Error fetching statistics:', error);
+      // Обновляем список сотрудников, если модальное окно списка открыто
+      if (this.showEmployeesModal) {
+        this.$refs.employeesModal?.fetchEmployees()
       }
     }
-  },
-  async created() {
-    await this.fetchStatistics()
   }
 }
 </script>
 
 <style scoped>
-.admin-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: #f5f5f5;
-}
-
-.admin-main {
-  flex: 1;
+.admin-dashboard {
   padding: 2rem;
-}
-
-.dashboard-container {
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.dashboard-title {
-  color: #1a237e;
-  margin-bottom: 2rem;
-  font-size: 2rem;
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3rem;
 }
 
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.stat-card {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-align: center;
-}
-
-.stat-card h3 {
-  color: #1a237e;
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
-}
-
-.stat-number {
-  font-size: 2rem;
-  font-weight: bold;
-  color: #1a237e;
+.dashboard-header h1 {
   margin: 0;
+  color: #1a237e;
+  font-size: 2rem;
 }
 
-.actions-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
-.action-card {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  text-decoration: none;
-  color: inherit;
-  transition: transform 0.3s, box-shadow 0.3s;
+.logout-button {
+  background-color: #f44336;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
   cursor: pointer;
+  transition: background-color 0.3s;
 }
 
-.action-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+.logout-button:hover {
+  background-color: #d32f2f;
 }
 
-.action-icon {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+.action-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
-.action-card h3 {
-  color: #1a237e;
-  margin: 0 0 0.5rem 0;
+.action-button {
+  background-color: #1a237e;
+  color: white;
+  padding: 1.5rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 1.1rem;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 100px;
 }
 
-.action-card p {
-  margin: 0;
-  color: #666;
+.action-button:hover {
+  background-color: #283593;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 @media (max-width: 768px) {
-  .admin-main {
+  .admin-dashboard {
     padding: 1rem;
   }
 
-  .stats-grid {
+  .dashboard-header {
+    flex-direction: column;
+    gap: 1rem;
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .action-buttons {
     grid-template-columns: 1fr;
   }
 
-  .actions-grid {
-    grid-template-columns: 1fr;
+  .action-button {
+    padding: 1rem;
+    min-height: 80px;
   }
 }
 </style>