Add export function

frontend/package-lock.json

@@ -498,6 +498,15 @@
         }
       }
     },
+    "angular-file-saver": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/angular-file-saver/-/angular-file-saver-1.1.3.tgz",
+      "integrity": "sha1-3K7AaVIU8iakyq/IwW0hqaYffRs=",
+      "requires": {
+        "blob-tmp": "1.0.0",
+        "file-saver": "1.3.8"
+      }
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -1103,6 +1112,11 @@
       "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=",
       "dev": true
     },
+    "blob-tmp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/blob-tmp/-/blob-tmp-1.0.0.tgz",
+      "integrity": "sha1-3oJJHiIv8TVMd6k+6OTqLIlUQnM="
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -3248,6 +3262,11 @@
         "schema-utils": "0.4.5"
       }
     },
+    "file-saver": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz",
+      "integrity": "sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

frontend/package.json

@@ -24,6 +24,7 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "angular-file-saver": "^1.1.3",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.5.6",

frontend/src/app/app.module.ts

@@ -20,6 +20,7 @@ import {
     MatTableModule
 } from '@angular/material';
 
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 
@@ -45,6 +46,7 @@ const routes: Routes = [
         BrowserAnimationsModule,
         HttpClientModule,
         FlexLayoutModule,
+        MatButtonModule,
         MatIconModule,
         MatInputModule,
         MatListModule,

frontend/src/app/quotes/quotes.component.css

@@ -2,6 +2,14 @@
     text-align: center;
 }
 
+.search {
+    font-size: 75%;
+}
+
+.spacer {
+    flex: 1 1 auto;
+}
+
 .spinner-container {
     width: 100%;
     position: fixed;

frontend/src/app/quotes/quotes.component.html

@@ -1,11 +1,19 @@
 <div class="quote">
 
-    <mat-input-container>
+    <mat-toolbar>
+
+        <mat-input-container class="search">
 
             <input matInput placeholder="Search quotes" #input>
 
         </mat-input-container>
 
+        <span class="spacer"></span>
+
+        <button class="export-button" mat-raised-button (click)="export()">Export</button>
+
+    </mat-toolbar>
+
     <div class="spinner-container" *ngIf="dataSource.loading$ | async">
 
         <mat-spinner></mat-spinner>

frontend/src/app/quotes/quotes.component.ts

@@ -14,6 +14,8 @@ import {
     MatTableDataSource
 } from '@angular/material';
 
+import { DatePipe } from '@angular/common';
+
 import {
     debounceTime,
     distinctUntilChanged,
@@ -25,6 +27,9 @@ import {
 import { merge } from 'rxjs/observable/merge';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 
+import { saveAs } from 'file-saver';
+
+import { Quotes } from '../models/quotes';
 import { QuotesService } from '../services/quotes.service';
 import { QuotesDataSource } from '../services/quotes.datasource';
 
@@ -85,4 +90,26 @@ export class QuotesComponent implements OnInit, AfterViewInit {
             this.paginator.pageIndex,
             this.paginator.pageSize);
     }
+
+    saveFile(quotes) {
+        let lines = [];
+
+        for (const quote of quotes) {
+            let date = new DatePipe('en-US-POSIX').transform(quote.date, 'dd-MM-yyyy');
+            lines.push('"' + quote.text + '" [' + quote.game + '] [' + date + ']\r\n');
+        }
+
+        let data = new Blob(lines, {
+            type: 'text/plain; charset=utf-8'
+        });
+
+        saveAs(data, 'quotes.txt');
+    }
+
+    export() {
+        this.quotesService.findQuotes('', 'id', 'asc', 0, 0)
+            .subscribe(quotes => {
+                this.saveFile((<Quotes>quotes).quotes)
+            });
+    }
 }