feat: add import to excel

Made at the request of the customer

src/pages/schedule/confirm-dialog.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Подтверждение</h1>
+<div mat-dialog-content>
+  <p>Вы уверены, что хотите запросить Excel с выбранными данными?</p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button color="accent" (click)="onConfirm()">Запросить</button>
+  <button mat-button (click)="onCancel()">Отмена</button>
+</div>

src/pages/schedule/confirm-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from '@angular/material/dialog';
+import {MatButton} from "@angular/material/button";
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatButton
+  ],
+  standalone: true
+})
+export class ConfirmDialogComponent {
+
+  constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) { }
+
+  protected onConfirm(): void {
+    this.dialogRef.close(true);
+  }
+
+  protected onCancel(): void {
+    this.dialogRef.close(false);
+  }
+}

src/pages/schedule/schedule.component.html

@@ -12,7 +12,12 @@
     <app-table [currentWeek]="currentWeek" [startWeek]="startWeek" [data]="data" [isLoad]="isLoadTable" [disciplineWithWeeks]="disciplineWithWeeks"/>
   </mat-sidenav-content>
 
-  <mat-sidenav-content>
+  <mat-sidenav-content style="display: flex; justify-content: space-between; align-items: center;">
     <mat-checkbox (change)="changeDisciplineWeeksView($event.checked)" [checked]="disciplineWithWeeks">Показать недели в дисциплине</mat-checkbox>
+    @if(excelImportLoader) {
+    <app-data-spinner/>
+    } @else {
+      <button mat-button (click)="openDialog()" *appHasRole="AuthRoles.Admin">Импортировать расписание (.xlsx)</button>
+    }
   </mat-sidenav-content>
 </mat-sidenav-container>

src/pages/schedule/schedule.component.ts

@@ -1,55 +1,62 @@
-import {Component, LOCALE_ID, OnInit, ViewChild} from '@angular/core';
-import {TableComponent} from "@component/schedule/table/table.component";
-import {MatFormField, MatInput} from "@angular/material/input";
-import {MatButton} from "@angular/material/button";
-import {FormsModule} from "@angular/forms";
+import {Component, LOCALE_ID, ViewChild} from '@angular/core';
 import {AdditionalText, TableHeaderComponent} from "@component/schedule/table-header/table-header.component";
 import {addDays, weekInYear} from "@progress/kendo-date-math";
-import {MatCard} from "@angular/material/card";
-import {MatSidenavModule} from "@angular/material/sidenav";
 import {TabsComponent, TabsSelect} from "@component/schedule/tabs/tabs.component";
 import {catchError, Observable} from "rxjs";
 import {ScheduleService} from "@api/v1/schedule.service";
 import {ScheduleResponse} from "@api/v1/scheduleResponse";
 import {PeriodTimes} from "@model/pairPeriodTime";
-import {MatCheckbox} from "@angular/material/checkbox";
 import {ActivatedRoute} from "@angular/router";
 import {TabStorageService} from "@service/tab-storage.service";
+import {MatDialog} from "@angular/material/dialog";
+import {ConfirmDialogComponent} from "@page/schedule/confirm-dialog.component";
+import {AuthRoles} from "@model/AuthRoles";
+import {ImportService} from "@api/v1/import.service";
+import {ScheduleRequest} from "@api/v1/scheduleRequest";
+import {ToastrService} from "ngx-toastr";
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {TableComponent} from "@component/schedule/table/table.component";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
+import {MatButton} from "@angular/material/button";
+import {HasRoleDirective} from "@/directives/has-role.directive";
 
 @Component({
   selector: 'app-schedule',
   standalone: true,
   imports: [
-    TableComponent,
-    MatInput,
-    MatFormField,
-    MatButton,
-    FormsModule,
-    TableHeaderComponent,
-    MatCard,
     MatSidenavModule,
     TabsComponent,
-    MatCheckbox
+    TableHeaderComponent,
+    TableComponent,
+    MatCheckbox,
+    DataSpinnerComponent,
+    MatButton,
+    HasRoleDirective
   ],
   templateUrl: './schedule.component.html',
   styleUrl: './schedule.component.css',
   providers: [
     ScheduleService,
+    ImportService,
     {provide: LOCALE_ID, useValue: 'ru-RU'}
   ]
 })
 
-export class ScheduleComponent implements OnInit {
+export class ScheduleComponent {
+  private lastRequest: ScheduleRequest | null = null;
+
   protected startWeek: Date;
   protected data: ScheduleResponse[] = [];
   protected startTerm: Date;
   protected isLoadTable: boolean = false;
   protected pairPeriods: PeriodTimes = {};
   protected disciplineWithWeeks: boolean = false;
+  protected excelImportLoader: boolean = false;
 
   @ViewChild('tableHeader') childComponent!: TableHeaderComponent;
 
-  constructor(api: ScheduleService, route: ActivatedRoute) {
+  constructor(api: ScheduleService, route: ActivatedRoute, private importApi: ImportService, private notify: ToastrService, public dialog: MatDialog) {
     route.queryParams.subscribe(params => {
       TabStorageService.selectDataFromQuery(params);
     });
@@ -71,11 +78,10 @@ export class ScheduleComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
-  }
-
-  protected result(data: [TabsSelect, number, Observable<ScheduleResponse[]>]) {
+  protected result(data: [TabsSelect, number, Observable<ScheduleResponse[]>, ScheduleRequest]) {
     this.isLoadTable = true;
+    this.lastRequest = data[3];
+
     data[2]
       .pipe(catchError(error => {
         this.data = [];
@@ -147,4 +153,35 @@ export class ScheduleComponent implements OnInit {
     localStorage.setItem('disciplineWithWeeks', checked.toString());
     this.disciplineWithWeeks = checked;
   }
+
+  protected openDialog() {
+    if (this.lastRequest == null) {
+      this.notify.error("It is not possible to make an import request because the table data has not been selected", "Import error");
+      return;
+    }
+    const dialogRef = this.dialog.open(ConfirmDialogComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result && this.lastRequest != null) {
+        this.excelImportLoader = true;
+        this.importApi.importToExcel(this.lastRequest).subscribe({
+          next: (blob: Blob) => {
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'schedule.xlsx';
+            a.click();
+            window.URL.revokeObjectURL(url);
+            this.excelImportLoader = false;
+          },
+          error: _ => {
+            this.excelImportLoader = false;
+            this.notify.error("Failed to import Excel file");
+          }
+        });
+      }
+    });
+  }
+
+  protected readonly AuthRoles = AuthRoles;
 }