implemented json downlpad

package-lock.json

@@ -8596,6 +8596,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "apollo-angular": "^2.1.0",
     "apollo-angular-link-http": "^1.11.0",
     "apollo-link-http": "^1.5.17",
+    "file-saver": "^2.0.5",
     "graphql": "^15.4.0",
     "graphql-anywhere": "^4.2.7",
     "rxjs": "~6.5.5",

src/app/components/admin-data-page/admin-data-page.component.html

@@ -55,6 +55,10 @@
         <button mat-icon-button color="accent" (click)="deleteItem(row)">
           <mat-icon aria-label="Delete">delete</mat-icon>
         </button>
+
+        <button mat-icon-button color="primary" (click)="donwloadLog(row)">
+          <mat-icon aria-label="DownloadActionLog">cloud_download</mat-icon>
+        </button>
       </mat-cell>
     </ng-container>
 
@@ -68,6 +72,10 @@
                  [pageSizeOptions]="[5, 10, 25, 100]"
                 >
   </mat-paginator>
+  <button id="actionLogDownload" mat-icon-button color="primary" (click)="donwloadLog()">
+    Action Log 
+    <mat-icon aria-label="DownloadActionLog">cloud_download</mat-icon>
+  </button>
 </div>
 
 

src/app/components/admin-data-page/admin-data-page.component.scss

@@ -45,3 +45,8 @@
 .filterfield {
   margin-left: 1.5rem;
 }
+
+#actionLogDownload {
+  float: right;
+  right: 3.5rem;
+}

src/app/components/admin-data-page/admin-data-page.component.ts

@@ -25,6 +25,9 @@ import {EditDialogComponent} from '../../components/dialogs/edit/edit.dialog.com
 import {deepCopy} from '../../helperFunctions/deepCopy';
 import { SnackBarService } from 'src/app/services/snackbar.service';
 import { AuthService } from 'src/app/services/auth.service';
+import { DownloadService } from 'src/app/services/download.service';
+import { ActionLogService } from 'src/app/services/actionLog.service';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-admin-data-page',
@@ -40,13 +43,17 @@ export class AdminDataPageComponent implements OnInit {
   id: number;
   roles;
   isLoaded : boolean = false;
+  downloadJsonHref;
 
   constructor(public httpClient: HttpClient,
               public dialog: MatDialog,
               private userService: UserService,
               private roleService: RoleService,
-              private snackBarSerivice: SnackBarService,
+              private snackBarService: SnackBarService,
-              private authService: AuthService) {}
+              private authService: AuthService,
+              private sanitizer: DomSanitizer,
+              private downloadService: DownloadService,
+              private actionLogService : ActionLogService) {}
 
   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
   @ViewChild(MatSort, {static: true}) sort: MatSort;
@@ -105,7 +112,7 @@ export class AdminDataPageComponent implements OnInit {
 
   deleteItem(user : User) {
     if (user.id === this.authService.getCurrentUserValue.user.id){
-      this.snackBarSerivice.openSnackBar("Du kannst dich nciht selbst löschen","Ok Im an Idiot", true);
+      this.snackBarService.openSnackBar("Du kannst dich nicht selbst löschen","Ok Im an Idiot", true);
       return;
     }
     const dialogRef = this.dialog.open(DeleteDialogComponent, {
@@ -161,6 +168,8 @@ export class AdminDataPageComponent implements OnInit {
     
   }
 
+
+
   afterLoad(){
     
     setTimeout(() => {
@@ -181,6 +190,24 @@ export class AdminDataPageComponent implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
+  donwloadLog(user?: User){
+    if (user === undefined){
+      this.actionLogService.getActionLogAll().pipe(first())
+      .subscribe(
+        data => {
+          this.downloadService.exportJSONFile(data, "actionLog_global");
+        },
+      );
+    } else {
+      this.actionLogService.getActionLogByUserId({id : "" + user.id}).pipe(first())
+      .subscribe(
+        data => {
+          this.downloadService.exportJSONFile(data, "actionLog_" + user.email);
+        },
+      );
+    }
+  }
+  
 }
 
 

src/app/services/actionLog.service.ts

@@ -9,7 +9,7 @@ import {
 @Injectable({
   providedIn: 'root',
 })
-export class PersonsService {
+export class ActionLogService {
   constructor(
     private getActionLogGQL: GetActionLogGQL,
     private getActionLogByUserIdGQL: GetActionLogByUserIdGQL

src/app/services/download.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from "@angular/core";
+import * as FileSaver from 'file-saver';
+
+const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const JSON_TYPE = 'data:text/json;charset=UTF-8';
+
+const EXCEL_EXTENSION = '.xlsx';
+const JSON_EXTENSION = '.json';
+
+
+@Injectable({ providedIn: "root" })
+export class DownloadService {
+  csvChar: string = ";";
+
+
+  /*public exportAsExcelFile(json: any[], excelFileName: string, sheetName: string): void {  
+    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);  
+    const workbook: XLSX.WorkBook = { Sheets: { [sheetName] : worksheet }, SheetNames: [sheetName] };  
+    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  
+    this.saveAsExcelFile(excelBuffer, excelFileName);
+  }*/ 
+  
+  private saveAsExcelFile(buffer: any, fileName: string): void {
+    const data: Blob = new Blob([buffer], {type: EXCEL_TYPE});   
+    FileSaver.saveAs(data, fileName + '_export_' + new  Date().getTime() + EXCEL_EXTENSION);
+  }
+
+  public exportJSONFile(json: any, fileName: string){
+    const data: Blob = new Blob([JSON.stringify(json, null, 2)], {type: JSON_TYPE});   
+    FileSaver.saveAs(data, fileName + '_export_' + new  Date().getTime() + JSON_EXTENSION);
+  }
+}