Linked checkboxes to "download selected" button

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,

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>

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>

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)
+    }
   }
 }

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>

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))
+  }
 }

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">

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)
+  }
 }

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)
+      }
+    })
+  }
+}

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,

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
 }

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 {
+ * Represents the download progress of a single chart
-  wait,      // Waiting for Google rate limit...
+ */
-  request,   // [song.ini] Sending request...
+export interface Download {
-  warning,   // Warning! [song.ini] has been modified recently and may not match how it was displayed in search results. Download anyway?
+  versionID: number
-  download,  // [song.ini] Downloading: 25%
+  title: string
-  extract,   // [archive.zip] Extracting: 44%
+  header: string
-  transfer,  // Copying files to library...
+  description: string
-  complete   // Complete
+  percent: number
 }
-
-// Try again button appears after an error: restarts the stage that failed