Исправления фронта

Множество оптимизаций по фронту

front_vue/src/views/ArchivePage.vue

@@ -1,37 +1,12 @@
 <template>
-  <div class="app" :class="{ mobile: isMobile }">
-    <!-- Боковая панель навигации -->
-    <Sidebar />
-
-    <!-- Основной контент -->
-    <div class="main-wrapper">
+  <PageLayout>
       <!-- Шапка с заголовком и фильтрами -->
       <Header title="Архив задач">
         <template #filters>
-          <div class="filters">
-            <!-- Выбор проекта -->
-            <ProjectSelector @change="onProjectChange" />
-
-            <div class="filter-divider"></div>
-
-            <!-- Фильтр по отделам -->
-            <button 
-              class="filter-tag"
-              :class="{ active: activeDepartment === null }"
-              @click="activeDepartment = null"
-            >
-              Все
-            </button>
-            <button 
-              v-for="dept in store.departments" 
-              :key="dept.id"
-              class="filter-tag"
-              :class="{ active: activeDepartment === dept.id }"
-              @click="activeDepartment = activeDepartment === dept.id ? null : dept.id"
-            >
-              {{ dept.name_departments }}
-            </button>
-          </div>
+          <DepartmentTags 
+            v-model="activeDepartment"
+            @project-change="onProjectChange"
+          />
         </template>
 
         <!-- Мобильные фильтры -->
@@ -58,7 +33,7 @@
       </Header>
       
       <!-- Список архивных задач -->
-      <main class="main">
+      <main class="main" :class="{ mobile: isMobile }">
         <!-- Мобильный заголовок над карточками -->
         <div v-if="isMobile" class="mobile-archive-header">
           <div class="archive-title-row">
@@ -68,20 +43,18 @@
           </div>
         </div>
 
-        <div class="archive-list">
+        <div class="archive-list" :class="{ mobile: isMobile }">
           <ArchiveCard
             v-for="card in filteredCards"
             :key="card.id"
             :card="card"
-            :departments="store.departments"
-            :labels="store.labels"
             @click="openTaskPanel(card)"
-            @restore="handleRestore"
+            @restore="confirmRestore"
             @delete="confirmDelete"
           />
           
           <!-- Пустое состояние -->
-          <div v-if="filteredCards.length === 0 && !loading" class="empty-state">
+          <div v-if="filteredCards.length === 0 && !loading" class="empty-state" :class="{ mobile: isMobile }">
             <i data-lucide="archive-x"></i>
             <p>Архив пуст</p>
             <span>Архивированные задачи появятся здесь</span>
@@ -91,71 +64,63 @@
           <Loader v-if="loading" />
         </div>
       </main>
-    </div>
 
+    <!-- Модальные окна -->
+    <template #modals>
+      <TaskPanel 
+        :show="panelOpen"
+        :card="editingCard"
+        :column-id="null"
+        :is-archived="true"
+        :on-save="handleSaveTask"
+        @close="closePanel"
+        @delete="handleDeleteTask"
+        @restore="handleRestoreFromPanel"
+      />
 
-    <!-- Панель редактирования задачи -->
-    <TaskPanel 
-      :show="panelOpen"
-      :card="editingCard"
-      :column-id="null"
-      :is-archived="true"
-      :departments="store.departments"
-      :labels="store.labels"
-      :users="store.users"
-      :current-user-id="store.currentUserId"
-      :is-project-admin="store.isProjectAdmin"
-      :on-save="handleSaveTask"
-      @close="closePanel"
-      @delete="handleDeleteTask"
-      @restore="handleRestoreFromPanel"
-    />
+      <ConfirmDialog
+        :show="confirmDialogOpen"
+        type="deleteTask"
+        :action="handleConfirmDelete"
+        @confirm="confirmDialogOpen = false"
+        @cancel="confirmDialogOpen = false"
+      />
 
-    <!-- Диалог подтверждения удаления -->
-    <ConfirmDialog
-      :show="confirmDialogOpen"
-      title="Удалить задачу?"
-      message="Задача будет удалена безвозвратно. Это действие нельзя отменить."
-      confirm-text="Удалить"
-      variant="danger"
-      :is-loading="isDeleting"
-      @confirm="handleConfirmDelete"
-      @cancel="confirmDialogOpen = false"
-    />
-  </div>
+      <ConfirmDialog
+        :show="restoreDialogOpen"
+        type="restore"
+        :action="handleConfirmRestore"
+        @confirm="restoreDialogOpen = false"
+        @cancel="restoreDialogOpen = false"
+      />
+    </template>
+  </PageLayout>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
-import Sidebar from '../components/Sidebar.vue'
+import { ref, computed, onMounted } from 'vue'
+import PageLayout from '../components/PageLayout.vue'
 import Header from '../components/Header.vue'
 import ArchiveCard from '../components/ArchiveCard.vue'
 import TaskPanel from '../components/TaskPanel'
 import ConfirmDialog from '../components/ConfirmDialog.vue'
+import DepartmentTags from '../components/DepartmentTags.vue'
 import ProjectSelector from '../components/ProjectSelector.vue'
 import MobileSelect from '../components/ui/MobileSelect.vue'
 import Loader from '../components/ui/Loader.vue'
 import { useProjectsStore } from '../stores/projects'
 import { cardsApi } from '../api'
 import { useMobile } from '../composables/useMobile'
+import { useDepartmentFilter } from '../composables/useDepartmentFilter'
 
 const { isMobile } = useMobile()
 
-// ==================== СОСТОЯНИЯ ЗАГРУЗКИ ====================
-const isRestoring = ref(false)
-const isDeleting = ref(false)
 
 // ==================== STORE ====================
 const store = useProjectsStore()
 
-// ==================== MOBILE ====================
-const departmentOptions = computed(() => [
-  { id: null, label: 'Все отделы' },
-  ...store.departments.map(d => ({
-    id: d.id,
-    label: d.name_departments
-  }))
-])
+// ==================== ФИЛЬТР ПО ОТДЕЛАМ ====================
+const { activeDepartment, departmentOptions, resetFilter } = useDepartmentFilter()
 
 // ==================== КАРТОЧКИ ====================
 const cards = ref([])
@@ -215,22 +180,10 @@ const fetchCards = async () => {
 
 // При смене проекта
 const onProjectChange = async () => {
-  activeDepartment.value = null
+  resetFilter()
   await fetchCards()
 }
 
-// ==================== ФИЛЬТР ПО ОТДЕЛАМ ====================
-const savedDepartment = localStorage.getItem('activeDepartment')
-const activeDepartment = ref(savedDepartment ? parseInt(savedDepartment) : null)
-
-watch(activeDepartment, (newVal) => {
-  if (newVal === null) {
-    localStorage.removeItem('activeDepartment')
-  } else {
-    localStorage.setItem('activeDepartment', newVal.toString())
-  }
-})
-
 // ==================== ПАНЕЛЬ РЕДАКТИРОВАНИЯ ====================
 const panelOpen = ref(false)
 const editingCard = ref(null)
@@ -291,39 +244,49 @@ const confirmDelete = (cardId) => {
   confirmDialogOpen.value = true
 }
 
-const handleConfirmDelete = async () => {
-  if (isDeleting.value || !cardToDelete.value) return
-  
-  isDeleting.value = true
-  try {
-    const result = await cardsApi.delete(cardToDelete.value)
-    if (result.success) {
-      cards.value = cards.value.filter(c => c.id !== cardToDelete.value)
-    }
-    confirmDialogOpen.value = false
-    cardToDelete.value = null
-  } finally {
-    isDeleting.value = false
-  }
+// ==================== ВОССТАНОВЛЕНИЕ С ПОДТВЕРЖДЕНИЕМ ====================
+const restoreDialogOpen = ref(false)
+const cardToRestore = ref(null)
+
+const confirmRestore = (cardId) => {
+  cardToRestore.value = cardId
+  restoreDialogOpen.value = true
 }
 
-// ==================== ВОССТАНОВЛЕНИЕ ====================
-const handleRestore = async (cardId) => {
-  if (isRestoring.value) return
-  
-  isRestoring.value = true
-  try {
-    const result = await cardsApi.setArchive(cardId, 0)
-    if (result.success) {
-      cards.value = cards.value.filter(c => c.id !== cardId)
-    }
-  } finally {
-    isRestoring.value = false
+const handleConfirmDelete = async () => {
+  if (!cardToDelete.value) {
+    throw new Error('Задача не выбрана')
   }
+  
+  const result = await cardsApi.delete(cardToDelete.value)
+  if (!result.success) {
+    throw new Error('Ошибка удаления задачи')
+  }
+  
+  cards.value = cards.value.filter(c => c.id !== cardToDelete.value)
+  cardToDelete.value = null
+}
+
+// ==================== ВОССТАНОВЛЕНИЕ (действие) ====================
+const handleConfirmRestore = async () => {
+  if (!cardToRestore.value) {
+    throw new Error('Задача не выбрана')
+  }
+  
+  const result = await cardsApi.setArchive(cardToRestore.value, 0)
+  if (!result.success) {
+    throw new Error('Ошибка восстановления задачи')
+  }
+  
+  cards.value = cards.value.filter(c => c.id !== cardToRestore.value)
+  cardToRestore.value = null
 }
 
 const handleRestoreFromPanel = async (cardId) => {
-  await handleRestore(cardId)
+  const result = await cardsApi.setArchive(cardId, 0)
+  if (result.success) {
+    cards.value = cards.value.filter(c => c.id !== cardId)
+  }
   closePanel()
 }
 
@@ -337,98 +300,16 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* Контейнер приложения */
-.app {
-  display: flex;
-  min-height: 100vh;
-}
-
-/* Основная область контента */
-.main-wrapper {
-  flex: 1;
-  margin-left: 64px;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-main);
-}
-
-/* Контейнер фильтров */
-.filters {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-/* Разделитель между проектом и отделами */
-.filter-divider {
-  width: 1px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.1);
-  margin: 0 8px;
-}
-
-/* Кнопка фильтра */
-.filter-tag {
-  padding: 6px 12px;
-  background: var(--bg-card);
-  border: none;
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.filter-tag:hover {
-  background: var(--bg-card-hover);
-  color: var(--text-primary);
-}
-
-/* Активный фильтр */
-.filter-tag.active {
-  background: var(--accent);
-  color: #000;
-}
-
-/* Блок статистики */
-.header-stats {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 10px 20px;
-  background: var(--bg-card);
-  border-radius: 10px;
-}
-
-.stat {
-  display: flex;
-  align-items: baseline;
-  gap: 5px;
-}
-
-.stat-value {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.stat-label {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* Основная область */
+/* Специфичные стили для архива (вертикальный скролл) */
 .main {
-  flex: 1;
-  padding: 0 36px 36px;
   overflow-y: auto;
 }
 
+/* Мобильный архив — с padding */
+.main.mobile {
+  padding: 0 16px 16px;
+}
+
 /* Список архивных карточек */
 .archive-list {
   display: flex;
@@ -467,39 +348,12 @@ onMounted(async () => {
   font-size: 13px;
 }
 
-/* ========== MOBILE ========== */
-.app.mobile {
-  flex-direction: column;
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.app.mobile .main-wrapper {
-  margin-left: 0;
-  flex: 1;
-  min-height: 0;
-  padding-bottom: calc(64px + var(--safe-area-bottom, 0px));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.app.mobile .main {
-  flex: 1;
-  min-height: 0;
-  padding: 0 16px 16px;
-  overflow: hidden;
-}
-
-.app.mobile .archive-list {
+/* ========== MOBILE: Архив ========== */
+.archive-list.mobile {
   /* 60px header + 40px title + 64px nav + safe-area */
   max-height: calc(100dvh - 60px - 40px - 64px - var(--safe-area-bottom, 0px));
+  max-width: none;
+  gap: 12px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
@@ -507,20 +361,15 @@ onMounted(async () => {
   padding-bottom: 16px;
 }
 
-.app.mobile .archive-list::-webkit-scrollbar {
+.archive-list.mobile::-webkit-scrollbar {
   display: none;
 }
 
-.app.mobile .archive-list {
-  max-width: none;
-  gap: 12px;
-}
-
-.app.mobile .empty-state {
+.empty-state.mobile {
   padding: 40px 20px;
 }
 
-.app.mobile .empty-state i {
+.empty-state.mobile i {
   width: 40px;
   height: 40px;
 }