Revize 30989178

Re#7527 Implemented import and export files on front end

webapp/src/app/employees/employees-list.component.html

@@ -1 +1 @@
 <div class="employee-component">
-  <h3>Zaměstnanci
+  <h3> <span class="align-baseline">Zaměstnanci</span>
+
     <button
       id="settings-button"
       mat-icon-button
       (click)="openDefaultSettingsDialog()"
+      class="align-baseline"
     >
       <i class="material-icons">settings</i>
     </button>
+
+    <input
+      type="file"
+      [multiple]="false"
+      #fileInput
+      class="input-file"
+      id="input-file"
+      (change)="uploadXlsxFile(fileInput.files); fileInput.value = null;"
+    />
+
+    <label for="input-file" class="btn btn-primary align-baseline">Import</label>
+    <button class="btn btn-danger align-baseline" (click)="downloadPdf()">
+      Export
+    </button>
+
   </h3>
 
   <table class="table text-center table-hover">

webapp/src/app/employees/employees-list.component.sass

@@ -25 +25 @@
   background-color: #68b040
   border-radius: 40%
   justify-content: center
+
+
+.input-file
+  width: 0.1px
+  height: 0.1px
+  opacity: 0
+  overflow: hidden
+  position: absolute
+  z-index: -1
+

webapp/src/app/employees/employees-list.component.ts

@@ -11 +11 @@
 import {UserService} from '../services/api/user.service';
 import {LocalizationService} from '../localization/localization.service';
 import {DateFormatterService} from '../services/util/date-formatter.service';
+import {FileService} from '../services/api/file.service';
 
 const daysOfWeek: string[] = [
   'po',
@@ -40 +41 @@
     private settingsService: SettingsService,
     private localizationService: LocalizationService,
     private dateFormatterService: DateFormatterService,
+    private fileService: FileService,
     public dialog: MatDialog,
     private snackBar: MatSnackBar) {
     this.generateDays();
@@ -47 +49 @@
     this.editDates();
   }
 
+
+  /**
+   * Sends a request to the GET /api/export/pdf end point
+   * After receiving the answer downloads the pdf file to user's download folder
+   */
+  downloadPdf(): void {
+    // https://stackoverflow.com/a/52687792/6204336
+    this.fileService.getExportedPdf()
+      .subscribe((data: any) => {
+        console.log(data);
+        const blob = new Blob([data], {type: 'application/pdf'});
+        const link = window.URL.createObjectURL(blob);
+        const linkElement = document.createElement('a');
+        linkElement.href = link;
+        linkElement.download = 'super.pdf';
+        linkElement.click();
+      });
+  }
+
+  /**
+   * Uploads first file from the file list to the
+   * endpoint /api/import/xlsx
+   * @param files file list, uses only files.item(0)
+   */
+  uploadXlsxFile(files: FileList): void {
+    this.fileService.uploadXlsFile(files)
+      .subscribe(() => this.snackBar.open('Import souboru se provedl', 'Zavřít', {duration: 5000}));
+  }
+
+  /**
+   * Opens a dialog to edit users settings after closing
+   * the dialog if user clicked to confirm new settings
+   * new settings are sent to the PUT /api/user/settings end point
+   * @param user user information
+   */
   openEditUserDialog(user: User): void {
     this.userService.getUserProfile(user.id)
       .subscribe((userProfile: UserProfile) => {
@@ -56 +93 @@
 
         dialogRef.componentInstance.postUserSettings.subscribe((emittedData) => {
           this.userService.putUserSettings(emittedData)
-            .subscribe(() => this.snackBar.open('Povedlo se', 'Zavrit'));
+            .subscribe(() => this.snackBar.open('Povedlo se', 'Zavrit', {duration: 5000}));
         });
       });
   }

webapp/src/app/services/api/basic.service.ts

@@ -23 +23 @@
       'Something bad happened; please try again later.');
   }
 
+  /**
+   * Creates http parameters (query for request) for given
+   * object (parameter - value), if the value is null
+   * it's not added into the query
+   * @param params object from which the query is created
+   */
   protected createParams(params: any) {
     let httpParams = new HttpParams();
     for (const key in params) {

webapp/src/app/services/api/file.service.ts

@@ +1 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpParams} from '@angular/common/http';
+import {BasicService} from './basic.service';
+import {catchError} from 'rxjs/operators';
+import {Languages} from '../../enums/common.enum';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService extends BasicService {
+
+  constructor(protected http: HttpClient) {
+    super(http);
+  }
+
+  /**
+   * Uploads xlsx file which will be parsed on the server
+   * @param file xlsx file to be parsed
+   */
+  uploadXlsFile(file: FileList) {
+    return this.makeImportXlsxAPiCall(file, null);
+  }
+
+  /**
+   * Uploads xlsx file which will be parsed on the server
+   * @param language specify error message language
+   * @param file xlsx file to be parsed
+   */
+  uploadXlsFileWithLanguage(file: FileList, language: Languages) {
+    return this.makeImportXlsxAPiCall(file, language);
+  }
+
+  /**
+   * Exports a pdf file from the imported xlsx file
+   */
+  getExportedPdf() {
+    return this.makeExportPdfApiCall(null);
+  }
+
+  /**
+   * Exports a pdf file from the imported xlsx file
+   * @param language specify error message language
+   */
+  getExportedPdfWithLanguage(language: Languages) {
+    return this.makeExportPdfApiCall(language);
+  }
+
+  /**
+   * Testovaci endpoint pro export PDF souboru
+   * GET /export/pdf? [lang=<CZ,EN>]
+   * @param language specify error message language
+   */
+  private makeExportPdfApiCall(language: Languages) {
+    const httpParams: HttpParams = this.createParams({lang: language});
+
+    return this.http.get(this.baseUrl + '/api/export/pdf', {responseType: 'blob', params: httpParams})
+      .pipe(
+        catchError(err => this.handleError(err))
+      );
+  }
+
+  /**
+   * Testovaci endpoint pro import XLS souboru
+   * POST /import/xls?[lang=<CZ,EN>]&file=<binarni_soubor>
+   * @param file xlsx file to import and parse
+   * @param language specify error message langauge
+   */
+  private makeImportXlsxAPiCall(file: FileList, language: Languages) {
+    const fileCount: number = file.length;
+    const formData = new FormData();
+
+    const httpParams: HttpParams = this.createParams({lang: language});
+    const options = {params: httpParams};
+
+    if (fileCount > 0) {
+
+      formData.append('file', file.item(0));
+      console.log('posilam data');
+      return this.http.post(this.baseUrl + '/api/import/xls', formData, options);
+    }
+  }
+}