From a98b03dcd4e2f597767322fcd241c19f66049c31 Mon Sep 17 00:00:00 2001
From: Geomitron <22552797+Geomitron@users.noreply.github.com>
Date: Mon, 10 Feb 2020 00:43:39 -0500
Subject: [PATCH] Linked checkboxes to "download selected" button

---
 src/app/app.module.ts                         |  6 ++--
 .../components/browse/browse.component.html   |  7 +++-
 .../result-table-row.component.html           |  2 +-
 .../result-table-row.component.ts             | 27 +++++++++++++--
 .../result-table/result-table.component.html  |  5 ++-
 .../result-table/result-table.component.ts    | 19 ++++++++++-
 .../status-bar/status-bar.component.html      |  2 +-
 .../browse/status-bar/status-bar.component.ts | 16 +++++++++
 src/app/core/directives/checkbox.directive.ts | 19 +++++++++++
 .../ipc/download/AddDownloadHandler.ts        |  2 --
 src/electron/shared/Settings.ts               |  2 +-
 .../shared/interfaces/download.interface.ts   | 34 ++++++-------------
 12 files changed, 105 insertions(+), 36 deletions(-)
 create mode 100644 src/app/core/directives/checkbox.directive.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c9fbd64..f16e5e2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,7 +11,8 @@ import { ResultTableComponent } from './components/browse/result-table/result-ta
 import { ChartSidebarComponent } from './components/browse/chart-sidebar/chart-sidebar.component';
 import { ResultTableRowComponent } from './components/browse/result-table/result-table-row/result-table-row.component';
 import { DownloadsModalComponent } from './components/browse/status-bar/downloads-modal/downloads-modal.component';
-import { ProgressBarDirective } from './core/directives/progress-bar.directive'
+import { ProgressBarDirective } from './core/directives/progress-bar.directive';
+import { CheckboxDirective } from './core/directives/checkbox.directive'
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { ProgressBarDirective } from './core/directives/progress-bar.directive'
     ChartSidebarComponent,
     ResultTableRowComponent,
     DownloadsModalComponent,
-    ProgressBarDirective
+    ProgressBarDirective,
+    CheckboxDirective
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/browse/browse.component.html b/src/app/components/browse/browse.component.html
index 7707282..4f3f90e 100644
--- a/src/app/components/browse/browse.component.html
+++ b/src/app/components/browse/browse.component.html
@@ -2,7 +2,12 @@
 <div class="ui celled two column grid">
   <div id="table-row" class="row">
     <div id="table-column" class="column twelve wide">
-      <app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
+      <app-result-table
+        #resultTable
+        (rowClicked)="chartSidebar.onRowClicked($event)"
+        (songChecked)="statusBar.onSongChecked($event)"
+        (songUnchecked)="statusBar.onSongUnchecked($event)"
+      ></app-result-table>
     </div>
     <div id="sidebar-column" class="column four wide">
       <app-chart-sidebar #chartSidebar></app-chart-sidebar>
diff --git a/src/app/components/browse/result-table/result-table-row/result-table-row.component.html b/src/app/components/browse/result-table/result-table-row/result-table-row.component.html
index f0c32f0..960f1b4 100644
--- a/src/app/components/browse/result-table/result-table-row/result-table-row.component.html
+++ b/src/app/components/browse/result-table/result-table-row/result-table-row.component.html
@@ -1,5 +1,5 @@
 <td>
-  <div class="ui checkbox">
+  <div #checkbox class="ui checkbox">
     <input type="checkbox">
   </div>
 </td>
diff --git a/src/app/components/browse/result-table/result-table-row/result-table-row.component.ts b/src/app/components/browse/result-table/result-table-row/result-table-row.component.ts
index ea6e1df..0b3a2fd 100644
--- a/src/app/components/browse/result-table/result-table-row/result-table-row.component.ts
+++ b/src/app/components/browse/result-table/result-table-row/result-table-row.component.ts
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, Input } from '@angular/core'
+import { Component, AfterViewInit, Input, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core'
 import { SongResult } from '../../../../../electron/shared/interfaces/search.interface'
 
 @Component({
@@ -8,10 +8,31 @@ import { SongResult } from '../../../../../electron/shared/interfaces/search.int
 })
 export class ResultTableRowComponent implements AfterViewInit {
   @Input() result: SongResult
+  @Output() songChecked = new EventEmitter<SongResult>()
+  @Output() songUnchecked = new EventEmitter<SongResult>()
+
+  @ViewChild('checkbox', { static: true }) checkbox: ElementRef
 
   constructor() { }
-  
+
   ngAfterViewInit() {
-    $('.ui.checkbox').checkbox()
+    $(this.checkbox.nativeElement).checkbox({
+      onChecked: () => {
+        this.songChecked.emit(this.result)
+      },
+      onUnchecked: () => {
+        this.songUnchecked.emit(this.result)
+      }
+    })
+  }
+
+  check(isChecked: boolean) {
+    if (isChecked) {
+      $(this.checkbox.nativeElement).checkbox('check')
+      this.songChecked.emit(this.result)
+    } else {
+      $(this.checkbox.nativeElement).checkbox('uncheck')
+      this.songUnchecked.emit(this.result)
+    }
   }
 }
\ No newline at end of file
diff --git a/src/app/components/browse/result-table/result-table.component.html b/src/app/components/browse/result-table/result-table.component.html
index 131b8dc..10ee95e 100644
--- a/src/app/components/browse/result-table/result-table.component.html
+++ b/src/app/components/browse/result-table/result-table.component.html
@@ -5,7 +5,7 @@
   <thead>
     <!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
     <tr>
-      <th id="checkboxColumn" class="collapsing">
+      <th appCheckbox (checked)="checkAll($event)" id="checkboxColumn" class="collapsing">
         <div class="ui checkbox">
           <input type="checkbox">
         </div>
@@ -19,8 +19,11 @@
   <tbody>
     <tr
     app-result-table-row
+    #tableRow
     *ngFor="let result of results"
     (click)="onRowClicked(result)"
+    (songChecked)="onSongChecked($event)"
+    (songUnchecked)="onSongUnchecked($event)"
     [result]="result"></tr>
   </tbody>
 </table>
\ No newline at end of file
diff --git a/src/app/components/browse/result-table/result-table.component.ts b/src/app/components/browse/result-table/result-table.component.ts
index c457733..4af12b3 100644
--- a/src/app/components/browse/result-table/result-table.component.ts
+++ b/src/app/components/browse/result-table/result-table.component.ts
@@ -1,5 +1,6 @@
-import { Component, AfterViewInit, Input, Output, EventEmitter } from '@angular/core'
+import { Component, AfterViewInit, Input, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core'
 import { SongResult } from '../../../../electron/shared/interfaces/search.interface'
+import { ResultTableRowComponent } from './result-table-row/result-table-row.component'
 
 @Component({
   selector: 'app-result-table',
@@ -10,6 +11,10 @@ export class ResultTableComponent implements AfterViewInit {
   @Input() results: SongResult[]
 
   @Output() rowClicked = new EventEmitter<SongResult>()
+  @Output() songChecked = new EventEmitter<SongResult>()
+  @Output() songUnchecked = new EventEmitter<SongResult>()
+
+  @ViewChildren('tableRow') tableRows: QueryList<ResultTableRowComponent>
 
   constructor() { }
   
@@ -20,4 +25,16 @@ export class ResultTableComponent implements AfterViewInit {
   onRowClicked(result: SongResult) {
     this.rowClicked.emit(result)
   }
+
+  onSongChecked(result: SongResult) {
+    this.songChecked.emit(result)
+  }
+
+  onSongUnchecked(result: SongResult) {
+    this.songUnchecked.emit(result)
+  }
+
+  checkAll(isChecked: boolean) {
+    this.tableRows.forEach(row => row.check(isChecked))
+  }
 }
\ No newline at end of file
diff --git a/src/app/components/browse/status-bar/status-bar.component.html b/src/app/components/browse/status-bar/status-bar.component.html
index 7aa4b20..7225139 100644
--- a/src/app/components/browse/status-bar/status-bar.component.html
+++ b/src/app/components/browse/status-bar/status-bar.component.html
@@ -1,7 +1,7 @@
 <div class="ui bottom borderless menu">
   <div *ngIf="resultCount > 0" class="item">{{resultCount}} Result{{resultCount == 1 ? '' : 's'}}</div>
   <div class="item">
-    <button *ngIf="selectedResults.length > 0" class="ui positive button">Download Selected</button>
+    <button *ngIf="selectedResults.length > 0" (click)="downloadSelected()" class="ui positive button">Download Selected</button>
   </div>
   <a *ngIf="downloading" class="item right" (click)="showDownloads()">
     <div #progressBar appProgressBar [percent]="percent" class="ui progress">
diff --git a/src/app/components/browse/status-bar/status-bar.component.ts b/src/app/components/browse/status-bar/status-bar.component.ts
index 6d13ed6..ef8c3d8 100644
--- a/src/app/components/browse/status-bar/status-bar.component.ts
+++ b/src/app/components/browse/status-bar/status-bar.component.ts
@@ -25,4 +25,20 @@ export class StatusBarComponent {
   showDownloads() {
     $('#downloadsModal').modal('show')
   }
+
+  onSongChecked(result: SongResult) {
+    if (this.selectedResults.findIndex(oldResult => oldResult.id == result.id) == -1) {
+      this.selectedResults.push(result)
+    }
+  }
+
+  onSongUnchecked(result: SongResult) {
+    this.selectedResults = this.selectedResults.filter(oldResult => oldResult.id != result.id)
+  }
+
+  downloadSelected() {
+    // TODO send query to get versions; for any with more than one chart, show modal for confirmation:
+    // "some selected songs have more than one chart: ___" [download all charts for each song] [deselect these songs] [X]
+    console.log(this.selectedResults)
+  }
 }
\ No newline at end of file
diff --git a/src/app/core/directives/checkbox.directive.ts b/src/app/core/directives/checkbox.directive.ts
new file mode 100644
index 0000000..3db5a3b
--- /dev/null
+++ b/src/app/core/directives/checkbox.directive.ts
@@ -0,0 +1,19 @@
+import { Directive, ElementRef, Output, EventEmitter } from '@angular/core'
+
+@Directive({
+  selector: '[appCheckbox]'
+})
+export class CheckboxDirective {
+  @Output() checked = new EventEmitter<boolean>()
+
+  private _checked = false
+
+  constructor(element: ElementRef) {
+    $(element.nativeElement).checkbox({
+      onChange: () => {
+        this._checked = !this._checked
+        this.checked.emit(this._checked)
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/src/electron/ipc/download/AddDownloadHandler.ts b/src/electron/ipc/download/AddDownloadHandler.ts
index 5f0036a..d86d6d3 100644
--- a/src/electron/ipc/download/AddDownloadHandler.ts
+++ b/src/electron/ipc/download/AddDownloadHandler.ts
@@ -16,8 +16,6 @@ const mkdir = promisify(_mkdir)
 export class AddDownloadHandler implements IPCEmitHandler<'add-download'> {
   event: 'add-download' = 'add-download'
 
-  //TODO: update percent in a way that makes its progress seem as smooth as possible
-
   async handler(data: NewDownload) {
     const download: Download = {
       versionID: data.versionID,
diff --git a/src/electron/shared/Settings.ts b/src/electron/shared/Settings.ts
index 7751cce..720740f 100644
--- a/src/electron/shared/Settings.ts
+++ b/src/electron/shared/Settings.ts
@@ -7,5 +7,5 @@ export interface Settings {
 export const defaultSettings: Settings = {
   rateLimitDelay: 31,
   theme: 'Default',
-  libraryPath: 'C:/Users/bouviejs/Desktop/Bridge Notes/TestLibrary'
+  libraryPath: 'C:/Users/bouviejs/Desktop/Bridge Notes/TestLibrary' // TODO: default should be undefined
 }
\ No newline at end of file
diff --git a/src/electron/shared/interfaces/download.interface.ts b/src/electron/shared/interfaces/download.interface.ts
index 3cdc84a..dacc64b 100644
--- a/src/electron/shared/interfaces/download.interface.ts
+++ b/src/electron/shared/interfaces/download.interface.ts
@@ -1,16 +1,6 @@
 /**
- * Represents the download of a single chart
+ * Contains the data required to start downloading a single chart
  */
-export interface Download {
-  versionID: number
-  title: string
-  header: string
-  description: string
-  percent: number
-
-  //TODO: figure out how to handle user clicking "retry"
-}
-
 export interface NewDownload {
   versionID: number
   avTagName: string
@@ -19,15 +9,13 @@ export interface NewDownload {
   links: { [type: string]: string }
 }
 
-
-export enum DownloadState {
-  wait,      // Waiting for Google rate limit...
-  request,   // [song.ini] Sending request...
-  warning,   // Warning! [song.ini] has been modified recently and may not match how it was displayed in search results. Download anyway?
-  download,  // [song.ini] Downloading: 25%
-  extract,   // [archive.zip] Extracting: 44%
-  transfer,  // Copying files to library...
-  complete   // Complete
-}
-
-// Try again button appears after an error: restarts the stage that failed
\ No newline at end of file
+/**
+ * Represents the download progress of a single chart
+ */
+export interface Download {
+  versionID: number
+  title: string
+  header: string
+  description: string
+  percent: number
+}
\ No newline at end of file