CSV downloader

src/app/modules/interviews/components/interview-page/interview-page.component.ts

@@ -8,6 +8,7 @@ import { ConfirmMsg } from '@shared/components/dialogs/models/confirm-msg';
 import { DialogMessage } from '@shared/components/dialogs/models/dialog-message';
 import { ActivatedRouteExtended } from '@shared/routes/activated-route-extended';
 import { untilDestroyed } from '@shared/subscriptions/until-destroyed';
+import { FileDownloadAnchor } from '@shared/value-objects/file-download-anchor';
 
 @Component({
   selector: 'app-interview-page',
@@ -84,7 +85,7 @@ export class InterviewPageComponent implements OnInit, OnDestroy {
 
   exportAsPDF(): void {
     if (this.downloadedFile != null) {
-      this.outputFile();
+      new FileDownloadAnchor(this.downloadedFile).execute(`${this.interview!.candidateName}_${this.interview!.id}.pdf`);
       return;
     }
 
@@ -93,18 +94,10 @@ export class InterviewPageComponent implements OnInit, OnDestroy {
       .pipe(untilDestroyed(this))
       .subscribe((file) => {
         this.downloadedFile = file;
-        this.outputFile();
+        new FileDownloadAnchor(this.downloadedFile).execute(`${this.interview!.candidateName}_${this.interview!.id}.pdf`);
       });
   }
 
-  private outputFile(): void {
-    const url = window.URL.createObjectURL(this.downloadedFile!);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${this.interview!.candidateName}_${this.interview!.id}.pdf`;
-    a.click();
-  }
-
   private setTitle(): void {
     this.pageTitle = `Interview with ${this.interview!.candidateName}`;
     this.title.setTitle(this.pageTitle);

src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html

@@ -232,11 +232,22 @@
         </div>
       </div>
 
-      <div *ngIf="!showDataStub" class="mb-3 text-muted text-end fst-italic">
-        <div>Идея подсмотрена у сервиса <a class="text-reset" href="https://career.habr.com/salaries" target="_blank">Habr.Карьера</a>, за что им большая благодарность.</div>
-        <div>Проект opensource, исходный код доступен на <a class="text-reset" href="https://github.com/orgs/Techinterview-space/repositories" target="_blank">Github</a>.</div>
-        <div>
-          Вы можете поддержать проект на <a href="https://boosty.to/ake111aa" class="text-reset" target="_blank">boosty</a>. Любая поддержка будет ценна.
+      <div class="mt-3 mb-5">
+        <hr />
+      </div>
+
+      <div *ngIf="!showDataStub" class="mb-3">
+        <div class="mb-5">
+          <div>Сырые данные можно выгрузить в <button type="button" class="btn-link-sm font-weight-normal" (click)="downloadCsv()">CSV файл</button></div>
+          <div>В файл будут записаны все данные, несмотря на примененные на странице фильтры.</div>
+        </div>
+
+        <div class="text-muted fst-italic">
+          <div>Идея подсмотрена у сервиса <a class="text-reset" href="https://career.habr.com/salaries" target="_blank">Habr.Карьера</a>, за что им большая благодарность.</div>
+          <div>Проект opensource, исходный код доступен на <a class="text-reset" href="https://github.com/orgs/Techinterview-space/repositories" target="_blank">Github</a>.</div>
+          <div>
+            Вы можете поддержать проект на <a href="https://boosty.to/ake111aa" class="text-reset" target="_blank">boosty</a>. Любая поддержка будет ценна.
+          </div>
         </div>
       </div>
 

src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts

@@ -16,6 +16,7 @@ import { CurrentUserSalaryLabelData } from './current-user-salary-label-data';
 import { MetaTagService } from '@services/meta-tag.service';
 import { LabelEntityDto } from '@services/label-entity.model';
 import { ConvertObjectToHttpParams } from '@shared/value-objects/convert-object-to-http';
+import { FileDownloadAnchor } from '@shared/value-objects/file-download-anchor';
 
 @Component({
   templateUrl: './salaries-chart.component.html',
@@ -34,6 +35,8 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
   industries: Array<LabelEntityDto> = [];
   professions: Array<LabelEntityDto> = [];
 
+  downloadedFile: File | null = null;
+
   showDataStub = false;
   openAddSalaryModal = false;
   openEditCurrentSalaryModal = false;
@@ -188,6 +191,23 @@ export class SalariesChartComponent implements OnInit, OnDestroy {
     this.meta.returnDefaultMetaTags();
   }
 
+  downloadCsv(): void {
+    this.gtag.event('salaries_csv_download', 'salary_chart');
+
+    if (this.downloadedFile != null) {
+      new FileDownloadAnchor(this.downloadedFile).execute(null);
+      return;
+    }
+
+    this.service
+      .downloadCsv()
+      .pipe(untilDestroyed(this))
+      .subscribe((file) => {
+        this.downloadedFile = file;
+        new FileDownloadAnchor(this.downloadedFile).execute(null);
+      });
+  }
+
   private loadChartWithFilter(data: SalaryChartGlobalFiltersData | null = null): void {
     this.service.charts({
       grade: data?.grade ?? null,

src/app/services/user-salaries.service.ts

@@ -177,4 +177,12 @@ export class UserSalariesService {
   delete(dataId: string): Observable<void> {
     return this.api.delete<void>(this.root + dataId);
   }
+
+  downloadCsv(): Observable<File> {
+    const httpOptions = {
+      responseType: 'blob' as 'json'
+    };
+
+    return this.api.get<File>(this.root + '/export', httpOptions);
+  }
 }

src/app/shared/value-objects/file-download-anchor.ts

@@ -0,0 +1,11 @@
+export class FileDownloadAnchor {
+  constructor(private readonly file: File) {}
+
+  execute(filename: string | null): void {
+    const url = window.URL.createObjectURL(this.file);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename ?? this.file.name;
+    a.click();
+  }
+}