Merge branch 'batch-operations' into dev

client/src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { UpdaterService } from './update/updater.service';
 
 @Component({
@@ -8,9 +7,9 @@ import { UpdaterService } from './update/updater.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  constructor(private _updaterService: UpdaterService) {
+  constructor(private _updaterService: UpdaterService) {}
+
+  ngOnInit() {
     this._updaterService.setupHandlers();
   }
-
-  ngOnInit() {}
 }

client/src/app/app.module.ts

@@ -3,22 +3,24 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import {
   MatButtonModule,
+  MatCheckboxModule,
   MatDialogModule,
   MatIconModule,
   MatListModule,
   MatProgressSpinnerModule,
   MatSidenavModule,
   MatSnackBarModule,
   MatTableModule,
+  MatToolbarModule,
 } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgxElectronModule } from 'ngx-electron';
-
 import { AppComponent } from './app.component';
 import { CardPreviewOverlayComponent } from './card-preview/card-preview.component';
 import { CardPreviewOverlayService } from './card-preview/card-preview.service';
 import { HomeComponent } from './home/home.component';
+import { IpcService } from './ipc.service';
 import { SetItemComponent } from './set-item/set-item.component';
 import { UpdateAvailableDialogComponent } from './update/update-available/update-available-dialog.component';
 import { UpdateDownloadedDialogComponent } from './update/update-downloaded/update-downloaded-dialog.component';
@@ -46,6 +48,8 @@ import { UpdaterService } from './update/updater.service';
     MatTableModule,
     MatProgressSpinnerModule,
     MatIconModule,
+    MatToolbarModule,
+    MatCheckboxModule,
 
     NgxElectronModule,
     BrowserModule,
@@ -57,6 +61,7 @@ import { UpdaterService } from './update/updater.service';
   providers: [
     //SettingsService,
     UpdaterService,
+    IpcService,
 
     CardPreviewOverlayService
 

client/src/app/card-preview/card-preview-overlay.ref.ts

@@ -2,7 +2,7 @@ import { OverlayRef } from '@angular/cdk/overlay';
 
 export class CardPreviewOverlayRef {
   constructor(private _overlayRef: OverlayRef) {}
-  
+
   close(): void {
     this._overlayRef.dispose();
   }

client/src/app/card-preview/card-preview.component.ts

@@ -1,9 +1,11 @@
-import { Component, Inject, NgZone, OnInit } from '@angular/core';
-import { ElectronService } from 'ngx-electron';
+import { Component, Inject, OnInit } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
-
+import { IpcService } from '../ipc.service';
 import { CardPreviewOverlayRef } from './card-preview-overlay.ref';
-import { CARD_PREVIEW_OVERLAY_DATA, CardData } from './card-preview-overlay.tokens';
+import {
+  CARD_PREVIEW_OVERLAY_DATA,
+  CardData
+} from './card-preview-overlay.tokens';
 
 @Component({
   selector: 'card-preview-overlay',
@@ -16,20 +18,17 @@ export class CardPreviewOverlayComponent implements OnInit {
   constructor(
     public dialogRef: CardPreviewOverlayRef,
     @Inject(CARD_PREVIEW_OVERLAY_DATA) public cardData: CardData,
-    private _electronService: ElectronService,
-    private _zone: NgZone
+    private _ipcService: IpcService
   ) {}
 
   ngOnInit() {
-    this._electronService.ipcRenderer.once(
+    this._ipcService.setupIpcListenerOnce(
       `cards:image:${this.cardData.setCode}-${this.cardData.cardNumber}`,
       (event, args) => {
-        this._zone.run(() => {
-          this.img$.next(`data:image/png;base64,${args}`);
-        });
+        this.img$.next(`data:image/png;base64,${args}`);
       }
     );
-    this._electronService.ipcRenderer.send('cards:load:image', {
+    this._ipcService.sendMessage('cards:load:image', {
       setCode: this.cardData.setCode,
       cardNumber: this.cardData.cardNumber
     });

client/src/app/card-preview/card-preview.service.ts

@@ -1,9 +1,11 @@
 import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
 import { ComponentRef, Injectable, Injector } from '@angular/core';
-
 import { CardPreviewOverlayRef } from './card-preview-overlay.ref';
-import { CARD_PREVIEW_OVERLAY_DATA, CardData } from './card-preview-overlay.tokens';
+import {
+  CARD_PREVIEW_OVERLAY_DATA,
+  CardData
+} from './card-preview-overlay.tokens';
 import { CardPreviewOverlayComponent } from './card-preview.component';
 
 const DEFAULT_CONFIG: CardPreviewOverlayConfig = {

client/src/app/home/home.component.html

@@ -7,21 +7,54 @@
 <mat-sidenav-container fullscreen autosize>
   <mat-sidenav mode="side" opened>
     <mat-list>
-      <pokemon-set-item *ngFor="let set of sets | async; let last = last" [set]="set" [last]="last" (click)="selectSet(set)" [class.active]="set.code == selectedSet">
+      <pokemon-set-item *ngFor="let set of sets | async; let last = last" [set]="set" [last]="last" (click)="selectSet(set)" [class.active]="set.code == selectedSet?.code">
       </pokemon-set-item>
     </mat-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <div class="example-loading-shade" *ngIf="!(cards$ | async)">
       <mat-spinner></mat-spinner>
     </div>
+    <mat-toolbar>
+      <img *ngIf="img$ | async as img" [src]="img">
+      <span>{{ selectedSet?.name }}</span>
+      <span class="spacer"></span>
+      <ng-container *ngIf="editing">
+        <div class="v-divider"></div>
+        <button mat-icon-button (click)="deleteAll()">
+          <mat-icon>delete_sweep</mat-icon>
+        </button>
+        <div class="v-divider"></div>
+        <button mat-icon-button (click)="collectAll()">
+          <mat-icon>done_all</mat-icon>
+        </button>
+      </ng-container>
+      <div class="v-divider"></div>
+      <ng-container>
+        <button mat-icon-button (click)="switchMode()">
+          <mat-icon *ngIf="!editing">edit</mat-icon>
+          <mat-icon *ngIf="editing">cancel</mat-icon>
+        </button>
+      </ng-container>
+    </mat-toolbar>
 
     <mat-table [hidden]="!(cards$ | async)" #table [dataSource]="cards$">
       <ng-container matColumnDef="number">
         <mat-header-cell *matHeaderCellDef>Number</mat-header-cell>
         <mat-cell *matCellDef="let element">{{ element.number }}</mat-cell>
       </ng-container>
 
+      <ng-container matColumnDef="select">
+        <mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+          </mat-checkbox>
+        </mat-cell>
+      </ng-container>
+
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
         <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
@@ -42,7 +75,7 @@
         <mat-cell *matCellDef="let element">
           <ng-container *ngIf="!collection[element.id]">
             <button mat-mini-fab (click)="collect($event, element.id)">
-              <mat-icon aria-label="Collect">library_add</mat-icon>
+              <mat-icon aria-label="Collect">check</mat-icon>
             </button>
           </ng-container>
           <ng-container *ngIf="collection[element.id]">

client/src/app/home/home.component.scss

@@ -22,3 +22,40 @@
 .mat-row:hover {
   background: lightgray;
 }
+
+mat-sidenav-content {
+  overflow: hidden;
+
+  mat-table {
+    overflow: auto;
+    height: calc(100vh - 64px);
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+mat-toolbar img {
+  max-height: 44px;
+}
+
+.mat-column-select {
+  overflow: initial;
+  max-width: 70px;
+}
+
+.mat-column-number {
+  max-width: 100px;
+}
+
+.v-divider {
+  width: 1px;
+  border-left: 1px solid black;
+  height: 50px;
+}
+
+mat-toolbar button {
+  margin-left: 10px;
+  margin-right: 10px;
+}