refactor interceptors for blob files & add download export xlsx files

Author: Awakich

package-lock.json

@@ -46,6 +46,7 @@
     "class-transformer": "^0.5.1",
     "core-js": "^3.23.4",
     "dayjs": "^1.11.3",
+    "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",

package.json

@@ -46,9 +46,7 @@ export class BearerTokenInterceptor implements HttpInterceptor {
    */
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
     // Базовые заголовки для всех запросов
-    const headers: Record<string, string> = {
-      Accept: "application/json",
-    };
+    const headers: Record<string, string> = {};
 
     const tokens = this.tokenService.getTokens();
 
@@ -57,14 +55,24 @@ export class BearerTokenInterceptor implements HttpInterceptor {
       headers["Authorization"] = `Bearer ${tokens.access}`;
     }
 
+    // Для blob запросов (файлы) не устанавливаем Accept, чтобы не парсить blob как JSON
+    const isBlobRequest =
+      request.url.includes("/export") ||
+      request.url.includes("/download") ||
+      (request.headers.has("X-Request-Type") && request.headers.get("X-Request-Type") === "blob");
+
+    const hasAcceptHeader = request.headers.has("Accept");
+
+    if (!isBlobRequest && !hasAcceptHeader) {
+      headers["Accept"] = "application/json";
+    }
+
     const req = request.clone({ setHeaders: headers });
 
-    // Если токены есть, обрабатываем запрос с возможностью обновления токенов
     if (tokens !== null) {
       return this.handleRequestWithTokens(req, next);
     } else {
-      // Если токенов нет, просто выполняем запрос
-      return next.handle(request);
+      return next.handle(req);
     }
   }
 
@@ -107,10 +115,9 @@ export class BearerTokenInterceptor implements HttpInterceptor {
     request: HttpRequest<unknown>,
     next: HttpHandler
   ): Observable<HttpEvent<unknown>> {
-    // Если токен еще не обновляется, начинаем процесс обновления
     if (!this.isRefreshing) {
       this.isRefreshing = true;
-      this.refreshTokenSubject.next(null); // Сбрасываем subject
+      this.refreshTokenSubject.next(null);
 
       return this.tokenService.refreshTokens().pipe(
         catchError(err => {
@@ -119,22 +126,29 @@ export class BearerTokenInterceptor implements HttpInterceptor {
         }),
         switchMap(res => {
           this.isRefreshing = false;
-          this.refreshTokenSubject.next(res.access); // Уведомляем о новом токене
+          this.refreshTokenSubject.next(res.access);
 
-          // Сохраняем новые токены в хранилище
           this.tokenService.memTokens(res);
 
-          // Подготавливаем заголовки с новым токеном
-          const headers: Record<string, string> = {
-            Accept: "application/json",
-          };
+          const headers: Record<string, string> = {};
 
           const tokens = this.tokenService.getTokens();
           if (tokens) {
             headers["Authorization"] = `Bearer ${tokens.access}`;
           }
 
-          // Повторяем исходный запрос с новым токеном
+          const isBlobRequest =
+            request.url.includes("/export") ||
+            request.url.includes("/download") ||
+            (request.headers.has("X-Request-Type") &&
+              request.headers.get("X-Request-Type") === "blob");
+
+          const hasAcceptHeader = request.headers.has("Accept");
+
+          if (!isBlobRequest && !hasAcceptHeader) {
+            headers["Accept"] = "application/json";
+          }
+
           return next.handle(
             request.clone({
               setHeaders: headers,
@@ -144,17 +158,32 @@ export class BearerTokenInterceptor implements HttpInterceptor {
       );
     }
 
-    // Если токен уже обновляется, ждем завершения процесса
     return this.refreshTokenSubject.pipe(
-      filter(token => token !== null), // Ждем получения нового токена
-      take(1), // Берем только первое значение
-      switchMap(token =>
-        next.handle(
+      filter(token => token !== null),
+      take(1),
+      switchMap(token => {
+        const headers: Record<string, string> = {
+          Authorization: `Bearer ${token}`,
+        };
+
+        const isBlobRequest =
+          request.url.includes("/export") ||
+          request.url.includes("/download") ||
+          (request.headers.has("X-Request-Type") &&
+            request.headers.get("X-Request-Type") === "blob");
+
+        const hasAcceptHeader = request.headers.has("Accept");
+
+        if (!isBlobRequest && !hasAcceptHeader) {
+          headers["Accept"] = "application/json";
+        }
+
+        return next.handle(
           request.clone({
-            setHeaders: { Authorization: `Bearer ${token}` },
+            setHeaders: headers,
           })
-        )
-      )
+        );
+      })
     );
   }
 }

projects/core/src/lib/interceptors/bearer-token.interceptor.ts

@@ -54,24 +54,34 @@ export class CamelcaseInterceptor implements HttpInterceptor {
         }),
       });
     } else {
-      // Если тела нет, просто клонируем запрос
       req = request.clone();
     }
 
     // Выполняем запрос и обрабатываем ответ
     return next.handle(req).pipe(
       map((event: HttpEvent<any>) => {
-        // Обрабатываем только HTTP ответы (не события загрузки и т.д.)
         if (event instanceof HttpResponse) {
+          if (event.body instanceof Blob) {
+            return event;
+          }
+
+          if (typeof event.body !== "object" || event.body === null) {
+            return event;
+          }
+
           // Клонируем ответ с преобразованным телом (snake_case → camelCase)
-          return event.clone({
-            body: camelcaseKeys(event.body, {
-              deep: true, // Рекурсивное преобразование вложенных объектов
-            }),
-          });
+          try {
+            return event.clone({
+              body: camelcaseKeys(event.body, {
+                deep: true, // Рекурсивное преобразование вложенных объектов
+              }),
+            });
+          } catch (error) {
+            console.warn("CamelcaseInterceptor: Failed to transform response body", error);
+            return event;
+          }
         }
 
-        // Для других типов событий возвращаем как есть
         return event;
       })
     );

projects/core/src/lib/interceptors/camelcase.interceptor.ts

@@ -44,6 +44,15 @@ export class ApiService {
     return this.http.get(this.apiUrl + path, { params, ...options }).pipe(first()) as Observable<T>;
   }
 
+  getFile(path: string, params?: HttpParams): Observable<Blob> {
+    return this.http
+      .get(this.apiUrl + path, {
+        params,
+        responseType: "blob",
+      })
+      .pipe(first()) as Observable<Blob>;
+  }
+
   /**
    * Выполняет PUT запрос к API (полное обновление ресурса)
    * @param path - Относительный путь к ресурсу

projects/core/src/lib/services/api.service.ts

@@ -55,6 +55,54 @@
             (closeFilter)="closeFilter()"
             (clear)="onClearFilters()"
           ></app-projects-filter>
+
+          @if (listType === 'projects') {
+          <div class="page__export" style="margin-top: 0">
+            <app-button
+              [loader]="loadingExportProjects()"
+              customTypographyClass="text-body-12"
+              size="medium"
+              (click)="downloadProjects()"
+            >
+              <span class="text-body-12">выгрузка проектов</span>
+              <i appIcon icon="download" appSquare="18"></i>
+            </app-button>
+
+            <app-button
+              [loader]="loadingExportSubmittedProjects()"
+              customTypographyClass="text-body-12"
+              size="medium"
+              (click)="downloadSubmittedProjects()"
+            >
+              <span class="text-body-12">сданные решения</span>
+              <i appIcon icon="download" appSquare="18"></i>
+            </app-button>
+          </div>
+          } @else {
+          <div class="page__export">
+            <app-button
+              [loader]="loadingExportRates()"
+              customTypographyClass="text-body-12"
+              size="medium"
+              (click)="downloadRates()"
+            >
+              <span class="text-body-12">выгрузка оценок</span>
+              <i appIcon icon="download" appSquare="18"></i>
+            </app-button>
+
+            <app-button
+              [disabled]="true"
+              style="opacity: 0.5"
+              [loader]="loadingExportCalculations()"
+              customTypographyClass="text-body-12"
+              size="medium"
+              (click)="downloadCalculations()"
+            >
+              <span class="text-body-12">итоговые расчеты</span>
+              <i appIcon icon="download" appSquare="18"></i>
+            </app-button>
+          </div>
+          }
         </div>
       </div>
       }

projects/social_platform/src/app/office/program/detail/list/list.component.html

@@ -4,7 +4,7 @@
 .page {
   display: grid;
   grid-template-columns: 8fr 2fr;
-  gap: 20px;
+  gap: 10px;
   padding-bottom: 100px;
 
   &__outlet {
@@ -59,6 +59,22 @@
   &__left {
     width: 100%;
   }
+
+  &__export {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+
+    ::ng-deep {
+      app-button {
+        span {
+          margin-right: 5px !important;
+        }
+      }
+    }
+  }
 }
 
 .filter {