delete repertoire items

folkies · Feb 25, 2024 · 68f22cf · 68f22cf
1 parent 0021885
commit 68f22cf
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 24 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -64,6 +64,7 @@ import { TranscriberProvider } from './service/transcription/transcriber-provide
 import { TuneBookCollectionService } from './service/tunebook-collection.service';
 import { TuneBookIndex } from './service/tunebook-index';
 import { TuneBookLoaderService } from './service/tunebook-loader.service';
+import { DeleteRepertoireItemComponent } from './component/delete-repertoire-item/delete-repertoire-item.component';
 
 const appRoutes: Routes = [
     { path: 'about', component: AboutComponent },
@@ -105,6 +106,7 @@ const googleApiClientConfig: GoogleApiClientConfig = {
     declarations: [
         AboutComponent,
         NewRepertoireComponent,
+        DeleteRepertoireItemComponent,
         AddToRepertoireComponent,
         AppComponent,
         BookPrintComponent,

diff --git a/src/app/component/delete-repertoire-item/delete-repertoire-item.component.html b/src/app/component/delete-repertoire-item/delete-repertoire-item.component.html
@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Confirmation</h1>
+<div mat-dialog-content class="form-container">
+    <p class="mat-body">{{data}}</p>
+</div>
+<div mat-dialog-actions>
+    <button mat-button (click)="onConfirm(false)" cdkFocusInitial>Cancel</button>
+    <button mat-button (click)="onConfirm(true)">Delete</button>
+</div>
diff --git a/src/app/component/delete-repertoire-item/delete-repertoire-item.component.ts b/src/app/component/delete-repertoire-item/delete-repertoire-item.component.ts
@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'delete-repertoire-item',
+    templateUrl: './delete-repertoire-item.component.html'
+})
+export class DeleteRepertoireItemComponent {
+
+
+    constructor(public dialogRef: MatDialogRef<DeleteRepertoireItemComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: string) {
+    }
+
+    onConfirm(confirm: boolean): void {
+        this.dialogRef.close(confirm);
+    }
+}
diff --git a/src/app/component/repertoire/repertoire.component.html b/src/app/component/repertoire/repertoire.component.html
@@ -5,36 +5,51 @@ <h2 class="mat-h2">{{currentRepertoire ? currentRepertoire.name + ' ': ''}}Reper
             <mat-icon>more_vert</mat-icon>
         </button>
         <mat-menu #repertoireMenu="matMenu">
-            <button mat-menu-item *ngFor="let rep of repertoires()" (click)="selectRepertoire(rep)">{{rep.name}}</button>
-            <button mat-menu-item (click)="openDialog()">New repertoire</button>
-        </mat-menu>        
+            <button mat-menu-item *ngFor="let rep of repertoires()"
+                (click)="selectRepertoire(rep)">{{rep.name}}</button>
+            <button mat-menu-item (click)="openNewRepertoireDialog()">New repertoire</button>
+        </mat-menu>
     </div>
 
     <p class="mat-body">{{tunes.length}} tunes</p>
 
-    <table mat-table matSort [dataSource]="dataSource" class="repertoire">        
+    <table mat-table matSort [dataSource]="dataSource" class="repertoire">
         <ng-container matColumnDef="title">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
-            <td mat-cell *matCellDef="let tune"><div class="tune-link" routerLink="{{tune.uri}}">{{tune.title}}</div></td>
+            <td mat-cell *matCellDef="let tune">
+                <div class="tune-link" routerLink="{{tune.uri}}">{{tune.title}}</div>
+            </td>
         </ng-container>
 
         <ng-container matColumnDef="timesPracticed">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>Times practiced</th>
-            <td mat-cell *matCellDef="let tune"> {{tune.timesPracticed}} </td>
+            <td mat-cell *matCellDef="let tune"> {{tune.item.timesPracticed}} </td>
         </ng-container>
 
         <ng-container matColumnDef="lastPracticed">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>Last practiced</th>
-            <td mat-cell *matCellDef="let tune"> {{tune.lastPracticed ? tune.lastPracticed.toLocaleDateString() : ''}} </td>
+            <td mat-cell *matCellDef="let tune"> {{tune.item.lastPracticed ? tune.item.lastPracticed.toLocaleDateString() : ''}}
+            </td>
         </ng-container>
 
         <ng-container matColumnDef="added">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>Added</th>
-            <td mat-cell *matCellDef="let tune"> {{tune.added.toLocaleDateString()}} </td>
+            <td mat-cell *matCellDef="let tune"> {{tune.item.added.toLocaleDateString()}} </td>
+        </ng-container>
+        <ng-container matColumnDef="action">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Action</th>
+            <td mat-cell *matCellDef="let tune">
+                <button mat-icon-button color="none" [matMenuTriggerFor]="tuneMenu">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #tuneMenu="matMenu">
+                    <button mat-menu-item (click)="deleteTune(tune)">Delete</button>
+                </mat-menu>
+            </td>
         </ng-container>
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      
+
     </table>
 
 </div>
diff --git a/src/app/component/repertoire/repertoire.component.ts b/src/app/component/repertoire/repertoire.component.ts
@@ -6,14 +6,14 @@ import { TuneBookIndex } from 'src/app/service/tunebook-index';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
+
 import { NewRepertoireComponent } from '../new-repertoire/new-repertoire.component';
+import { DeleteRepertoireItemComponent } from '../delete-repertoire-item/delete-repertoire-item.component';
 
 export interface RepertoireTune {
+    item: RepertoireItem;
     title: string;
     uri: string;
-    added: Date;
-    lastPracticed: Date;
-    timesPracticed: number;
 }
 
 @Component({
@@ -22,13 +22,13 @@ export interface RepertoireTune {
 })
 export class RepertoireComponent implements OnInit {
 
-    @ViewChild(MatSort, {static: true}) 
+    @ViewChild(MatSort, { static: true })
     sort: MatSort;
 
     dataSource: MatTableDataSource<RepertoireTune>;
 
     tunes: RepertoireTune[] = [];
-    displayedColumns: string[] = ['title', 'timesPracticed', 'lastPracticed', 'added'];
+    displayedColumns: string[] = ['title', 'timesPracticed', 'lastPracticed', 'added', 'action'];
 
     titleWithoutNumber = titleWithoutNumber;
 
@@ -47,16 +47,18 @@ export class RepertoireComponent implements OnInit {
     }
 
     newRepertoire(rep: Repertoire) {
-        this.repertoireCollection.repertoires.push(rep);
-        this.selectRepertoire(rep);
+        if (rep) {
+            this.repertoireCollection.repertoires.push(rep);
+            this.selectRepertoire(rep);
+        }
     }
 
-    openDialog(): void {
+    openNewRepertoireDialog(): void {
         const dialogRef = this.dialog.open(NewRepertoireComponent);
         dialogRef.afterClosed().subscribe(added => this.newRepertoire(added));
     }
 
-    selectRepertoire(repertoire: Repertoire): void  {
+    selectRepertoire(repertoire: Repertoire): void {
         this.currentRepertoire = repertoire;
         this.prepareTunes();
     }
@@ -68,6 +70,20 @@ export class RepertoireComponent implements OnInit {
         return this.repertoireCollection.repertoires;
     }
 
+    async deleteTune(tune: RepertoireTune): Promise<void> {
+        const dialogRef = this.dialog.open(DeleteRepertoireItemComponent, { data: `Delete "${tune.title}" from repertoire?` });
+        dialogRef.afterClosed().subscribe(confirmed => {
+            if (confirmed) {
+                this.doDeleteTune(tune);
+            }
+        });
+    }
+
+    private async doDeleteTune(tune: RepertoireTune): Promise<void> {
+        await this.repertoireRepository.deleteRepertoireItem(tune.item.tune, this.currentRepertoire.name);
+        this.prepareTunes();
+    }
+
     private async loadRepertoire() {
         this.repertoireCollection = await this.repertoireRepository.load();
         const rep = await this.repertoireRepository.findRepertoire();
@@ -87,9 +103,7 @@ export class RepertoireComponent implements OnInit {
     private toRepertoireTune(item: RepertoireItem): RepertoireTune {
         const entry = this.index.findEntryByTuneReference(item.tune);
         return {
-            added: item.added,
-            lastPracticed: item.lastPracticed,
-            timesPracticed: item.timesPracticed,
+            item,
             title: titleWithoutNumber(entry.title),
             uri: `../tune/${item.tune.bookId}/${item.tune.tuneId}`
         };

diff --git a/src/app/service/repertoire-repository.ts b/src/app/service/repertoire-repository.ts
@@ -6,7 +6,7 @@ import { RepertoireSelection } from '../component/add-to-repertoire/add-to-reper
 
 const TUNE_FOLDER = 'Tune Browser';
 const REPERTOIRE_COLLECTION = 'repertoire-collection.json';
-export const INTERVALS : number[] = [ 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 6, 6, 15 ];
+export const INTERVALS: number[] = [1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 6, 6, 15];
 
 /**
  * Repertoire reviver function for `JSON.parse()`.
@@ -77,7 +77,7 @@ export class RepertoireRepository {
      */
     async load(): Promise<RepertoireCollection> {
         if (! await this.googleDrive.isSignedIn()) {
-            return {repertoires: []};
+            return { repertoires: [] };
         }
 
         if (this.repertoireCollection) {
@@ -130,7 +130,7 @@ export class RepertoireRepository {
         const collection = await this.load();
         let repertoire = await this.findRepertoire(selection.name);
         if (repertoire === undefined) {
-            repertoire = { name: selection.name, maxAge: 30, numTunesPerAssignment: 10, items: []};
+            repertoire = { name: selection.name, maxAge: 30, numTunesPerAssignment: 10, items: [] };
             collection.repertoires.push(repertoire);
             collection.current = selection.name;
         }
@@ -143,6 +143,20 @@ export class RepertoireRepository {
         return this.saveCollection(collection);
     }
 
+    async deleteRepertoireItem(tuneRef: TuneReference, repertoireName: string): Promise<string> {
+        const collection = await this.load();
+        let repertoire = await this.findRepertoire(repertoireName);
+        if (repertoire !== undefined) {
+            const index = repertoire.items.findIndex(it => it.referencedBy(tuneRef));
+            if (index >= 0) {
+                repertoire.items.splice(index, 1);
+                return this.saveCollection(collection);
+            }
+        }
+        return "";
+    }
+
+
     /**
      * Finds the repertoire with the given identity.
      * @param name repertoire name (if empty, the current repertoire will be returned)