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

frontend/src/components/admin/EmployeesModal.vue

@@ -0,0 +1,432 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="closeModal">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h2>Список сотрудников</h2>
+        <button class="close-button" @click="closeModal">&times;</button>
+      </div>
+
+      <div class="employees-container">
+        <div class="search-bar">
+          <input
+            type="text"
+            v-model="searchQuery"
+            placeholder="Поиск по имени или отделу..."
+            class="search-input"
+          >
+        </div>
+
+        <div class="employees-list" v-if="filteredEmployees.length">
+          <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>
+            </div>
+
+            <div class="employee-actions">
+              <button class="edit-button" @click="editEmployee(employee)">
+                Изменить
+              </button>
+              <button class="delete-button" @click="deleteEmployee(employee.id)">
+                Удалить
+              </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>
+        
+        <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>
+
+          <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>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'EmployeesModal',
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      employees: [],
+      searchQuery: '',
+      editingEmployee: null,
+      isLoading: false
+    }
+  },
+  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)
+      })
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close')
+    },
+    async fetchEmployees() {
+      try {
+        const response = await axios.get('/api/employees', {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+          }
+        })
+        this.employees = response.data
+      } catch (error) {
+        console.error('Error fetching employees:', error)
+      }
+    },
+    editEmployee(employee) {
+      this.editingEmployee = { ...employee }
+    },
+    cancelEdit() {
+      this.editingEmployee = null
+    },
+    async saveEmployee() {
+      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}`, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+          }
+        })
+        
+        await this.fetchEmployees()
+      } catch (error) {
+        console.error('Error deleting employee:', error)
+      }
+    }
+  },
+  watch: {
+    isOpen(newValue) {
+      if (newValue) {
+        this.fetchEmployees()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  width: 90%;
+  max-width: 800px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.modal-header h2 {
+  margin: 0;
+  color: #1a237e;
+  font-size: 1.5rem;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #666;
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: color 0.3s;
+}
+
+.close-button:hover {
+  color: #1a237e;
+}
+
+.search-bar {
+  margin-bottom: 1.5rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 1rem;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #1a237e;
+}
+
+.employees-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.employee-card {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.employee-info h3 {
+  margin: 0 0 0.5rem 0;
+  color: #1a237e;
+  font-size: 1.2rem;
+}
+
+.department {
+  margin: 0;
+  color: #666;
+}
+
+.employee-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.edit-button, .delete-button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.edit-button {
+  background-color: #1a237e;
+  color: white;
+}
+
+.edit-button:hover {
+  background-color: #283593;
+}
+
+.delete-button {
+  background-color: #fbe9e7;
+  color: #d32f2f;
+}
+
+.delete-button:hover {
+  background-color: #ffcdd2;
+}
+
+.no-employees {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+}
+
+.edit-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+}
+
+.edit-modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  width: 100%;
+  max-width: 500px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-group label {
+  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 {
+  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;
+}
+
+.cancel-button {
+  flex: 1;
+  background-color: #f5f5f5;
+  color: #666;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 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;
+  }
+}
+</style> 

frontend/src/components/admin/RequestsModal.vue

@@ -0,0 +1,358 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="closeModal">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h2>Управление заявками</h2>
+        <button class="close-button" @click="closeModal">&times;</button>
+      </div>
+
+      <div class="requests-container">
+        <div class="filters">
+          <select v-model="statusFilter" class="filter-select">
+            <option value="">Все статусы</option>
+            <option value="new">Новые</option>
+            <option value="in_progress">В работе</option>
+            <option value="completed">Завершенные</option>
+          </select>
+
+          <select v-model="priorityFilter" class="filter-select">
+            <option value="">Все приоритеты</option>
+            <option value="low">Низкий</option>
+            <option value="medium">Средний</option>
+            <option value="high">Высокий</option>
+          </select>
+        </div>
+
+        <div class="requests-list" v-if="requests.length">
+          <div v-for="request in filteredRequests" :key="request.id" class="request-card">
+            <div class="request-header">
+              <h3>{{ request.title }}</h3>
+              <span :class="['status-badge', request.status]">{{ getStatusText(request.status) }}</span>
+            </div>
+            
+            <p class="request-description">{{ request.description }}</p>
+            
+            <div class="request-info">
+              <span class="priority-badge" :class="request.priority">
+                {{ getPriorityText(request.priority) }}
+              </span>
+              <span class="employee-name">{{ request.employee_name }}</span>
+              <span class="request-date">{{ formatDate(request.created_at) }}</span>
+            </div>
+
+            <div class="request-actions">
+              <select 
+                v-model="request.status" 
+                class="status-select"
+                @change="updateRequestStatus(request.id, request.status)"
+              >
+                <option value="new">Новая</option>
+                <option value="in_progress">В работе</option>
+                <option value="completed">Завершена</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        
+        <div v-else class="no-requests">
+          <p>Заявок не найдено</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'RequestsModal',
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      requests: [],
+      statusFilter: '',
+      priorityFilter: '',
+      isLoading: false
+    }
+  },
+  computed: {
+    filteredRequests() {
+      return this.requests.filter(request => {
+        const matchStatus = !this.statusFilter || request.status === this.statusFilter
+        const matchPriority = !this.priorityFilter || request.priority === this.priorityFilter
+        return matchStatus && matchPriority
+      })
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close')
+    },
+    getStatusText(status) {
+      const statusMap = {
+        new: 'Новая',
+        in_progress: 'В работе',
+        completed: 'Завершена'
+      }
+      return statusMap[status] || status
+    },
+    getPriorityText(priority) {
+      const priorityMap = {
+        low: 'Низкий',
+        medium: 'Средний',
+        high: 'Высокий'
+      }
+      return priorityMap[priority] || priority
+    },
+    formatDate(dateString) {
+      const date = new Date(dateString)
+      return date.toLocaleDateString('ru-RU', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+      })
+    },
+    async fetchRequests() {
+      try {
+        const response = await axios.get('/api/requests', {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+          }
+        })
+        this.requests = response.data
+      } catch (error) {
+        console.error('Error fetching requests:', error)
+      }
+    },
+    async updateRequestStatus(requestId, newStatus) {
+      try {
+        await axios.patch(`/api/requests/${requestId}`, 
+          { status: newStatus },
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem('admin_token')}`
+            }
+          }
+        )
+      } catch (error) {
+        console.error('Error updating request status:', error)
+      }
+    }
+  },
+  watch: {
+    isOpen(newValue) {
+      if (newValue) {
+        this.fetchRequests()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  width: 90%;
+  max-width: 1000px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.modal-header h2 {
+  margin: 0;
+  color: #1a237e;
+  font-size: 1.5rem;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #666;
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: color 0.3s;
+}
+
+.close-button:hover {
+  color: #1a237e;
+}
+
+.filters {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.filter-select {
+  padding: 0.5rem;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 1rem;
+  color: #1a237e;
+  background-color: white;
+}
+
+.requests-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.request-card {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1.5rem;
+  border: 1px solid #e0e0e0;
+}
+
+.request-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.request-header h3 {
+  margin: 0;
+  color: #1a237e;
+  font-size: 1.2rem;
+}
+
+.status-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.status-badge.new {
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
+.status-badge.in_progress {
+  background-color: #fff3e0;
+  color: #f57c00;
+}
+
+.status-badge.completed {
+  background-color: #e8f5e9;
+  color: #388e3c;
+}
+
+.request-description {
+  margin: 0 0 1rem 0;
+  color: #666;
+}
+
+.request-info {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.priority-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.priority-badge.low {
+  background-color: #e8f5e9;
+  color: #388e3c;
+}
+
+.priority-badge.medium {
+  background-color: #fff3e0;
+  color: #f57c00;
+}
+
+.priority-badge.high {
+  background-color: #fbe9e7;
+  color: #d32f2f;
+}
+
+.employee-name {
+  color: #1a237e;
+  font-weight: 500;
+}
+
+.request-date {
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.request-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.status-select {
+  padding: 0.5rem;
+  border: 2px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: #1a237e;
+  background-color: white;
+  cursor: pointer;
+}
+
+.no-requests {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .modal-content {
+    padding: 1rem;
+    width: 95%;
+  }
+
+  .filters {
+    flex-direction: column;
+  }
+
+  .request-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .request-info {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style> 

frontend/src/router/index.ts

@@ -29,18 +29,6 @@ const router = createRouter({
       name: 'admin-dashboard',
       component: () => import('@/views/admin/AdminDashboardView.vue'),
       meta: { requiresAdmin: true }
-    },
-    {
-      path: '/admin/employees',
-      name: 'admin-employees',
-      component: () => import('@/views/admin/EmployeesView.vue'),
-      meta: { requiresAdmin: true }
-    },
-    {
-      path: '/admin/requests',
-      name: 'admin-requests',
-      component: () => import('@/views/admin/RequestsView.vue'),
-      meta: { requiresAdmin: true }
     }
   ]
 });

frontend/src/views/admin/AdminDashboardView.vue

@@ -34,17 +34,17 @@
             <p>Регистрация нового сотрудника в системе</p>
           </div>
 
-          <router-link to="/admin/requests" class="action-card">
+          <div class="action-card" @click="showRequestsModal">
             <div class="action-icon">📝</div>
             <h3>Управление заявками</h3>
             <p>Просмотр и обработка заявок</p>
-          </router-link>
+          </div>
 
-          <router-link to="/admin/employees" class="action-card">
+          <div class="action-card" @click="showEmployeesModal">
             <div class="action-icon">👤</div>
             <h3>Список сотрудников</h3>
             <p>Управление учетными записями</p>
-          </router-link>
+          </div>
         </div>
       </div>
     </main>
@@ -55,6 +55,16 @@
       @close="closeAddEmployeeModal"
       @employee-added="handleEmployeeAdded"
     />
+
+    <RequestsModal
+      :is-open="isRequestsModalOpen"
+      @close="closeRequestsModal"
+    />
+
+    <EmployeesModal
+      :is-open="isEmployeesModalOpen"
+      @close="closeEmployeesModal"
+    />
   </div>
 </template>
 
@@ -62,6 +72,8 @@
 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'
 
 export default {
@@ -69,7 +81,9 @@ export default {
   components: {
     AdminHeader,
     AdminFooter,
-    AddEmployeeModal
+    AddEmployeeModal,
+    RequestsModal,
+    EmployeesModal
   },
   data() {
     return {
@@ -78,7 +92,9 @@ export default {
         by_status: {},
         by_priority: {}
       },
-      isAddEmployeeModalOpen: false
+      isAddEmployeeModalOpen: false,
+      isRequestsModalOpen: false,
+      isEmployeesModalOpen: false
     }
   },
   methods: {
@@ -88,6 +104,18 @@ export default {
     closeAddEmployeeModal() {
       this.isAddEmployeeModalOpen = false
     },
+    showRequestsModal() {
+      this.isRequestsModalOpen = true
+    },
+    closeRequestsModal() {
+      this.isRequestsModalOpen = false
+    },
+    showEmployeesModal() {
+      this.isEmployeesModalOpen = true
+    },
+    closeEmployeesModal() {
+      this.isEmployeesModalOpen = false
+    },
     handleEmployeeAdded() {
       // Можно добавить уведомление об успешном добавлении
       console.log('Сотрудник успешно добавлен')