fix album and event crud operations

kickin-media · Aug 19, 2024 · fb36e2c · fb36e2c
1 parent 8f4d8b9
commit fb36e2c
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 31 deletions.
diff --git a/projects/kick-in/src/styles.scss b/projects/kick-in/src/styles.scss
@@ -23,3 +23,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 .secondary-button {
   @include mat.button-color(kick-in.$theme, $color-variant: secondary);
 }
+
+.error-button {
+  @include mat.button-color(kick-in.$theme, $color-variant: error);
+}
diff --git a/src/app/album/album-page.component.html b/src/app/album/album-page.component.html
@@ -7,14 +7,29 @@
 <!--    ALBUM-->
 <!--  </button>-->
 
-  <button mat-icon-button [matMenuTriggerFor]="albumMenu">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #albumMenu="matMenu">
-    <button mat-menu-item (click)="editAlbum()"><mat-icon>edit</mat-icon>EDIT ALBUM</button>
-    <button mat-menu-item (click)="emptyAlbum()"><mat-icon>clear</mat-icon>EMPTY ALBUM</button>
-    <button mat-menu-item (click)="deleteAlbum()"><mat-icon>delete</mat-icon>DELETE ALBUM</button>
-  </mat-menu>
+  <ng-container *ngIf="albumService.album.data$ | async as album">
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="albumMenu"
+      *ngIf="accountService.canManageAlbums$ | async"
+    >
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #albumMenu="matMenu">
+      <button
+        mat-menu-item
+        (click)="editAlbum()"
+      >
+        <mat-icon>edit</mat-icon> EDIT ALBUM
+      </button>
+      <button
+        mat-menu-item
+        (click)="deleteAlbum()"
+      >
+        <mat-icon>delete</mat-icon> DELETE ALBUM
+      </button>
+    </mat-menu>
+  </ng-container>
 </title-section>
 
 <album-gallery [album]="albumService.album.data$ | async" [photos]="photos$ | async" [select]="null" />
diff --git a/src/app/album/album-page.component.ts b/src/app/album/album-page.component.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { AsyncPipe } from "@angular/common";
+import { AsyncPipe, NgIf } from "@angular/common";
 import { MatButton, MatIconButton } from "@angular/material/button";
 import { MatIcon } from "@angular/material/icon";
 import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
 import { SlugPipe } from "../../pipes/slug.pipe";
 import { Breadcrumb, TitleSectionComponent } from "../components/title-section/title-section.component";
 import { AlbumService } from "../../services/api/album.service";
-import { filter, first, map, Observable, of, pairwise, startWith, switchMap } from "rxjs";
+import { combineLatest, filter, first, map, Observable, of, pairwise, shareReplay, startWith, switchMap } from "rxjs";
 import { AlbumDialogComponent, AlbumDialogProps } from "./components/album-dialog/album-dialog.component";
 import { AlbumDetailed, Photo } from "../../util/types";
 import { MatDialog } from "@angular/material/dialog";
@@ -16,6 +16,12 @@ import { LightboxComponent } from "../lightbox/lightbox.component";
 import { Overlay } from "@angular/cdk/overlay";
 import { ComponentPortal } from "@angular/cdk/portal";
 import { ActivatedRoute, Router } from "@angular/router";
+import { AccountService } from "../../services/account.service";
+import { MatTooltip } from "@angular/material/tooltip";
+import {
+  ConfirmationDialogComponent,
+  ConfirmationDialogProps
+} from "../components/confirmation-dialog/confirmation-dialog.component";
 
 @Component({
   selector: 'album-page',
@@ -31,7 +37,9 @@ import { ActivatedRoute, Router } from "@angular/router";
     TitleSectionComponent,
     MatMenuTrigger,
     AlbumGalleryComponent,
-    LightboxComponent
+    LightboxComponent,
+    NgIf,
+    MatTooltip
   ],
   templateUrl: './album-page.component.html',
   styleUrl: './album-page.component.scss'
@@ -46,6 +54,8 @@ export class AlbumPageComponent {
     protected router: Router,
     protected dialog: MatDialog,
     protected overlay: Overlay,
+
+    protected accountService: AccountService,
     protected albumService: AlbumService,
   ) {
     this.breadcrumb$ = this.albumService.album.data$.pipe(
@@ -97,12 +107,36 @@ export class AlbumPageComponent {
     });
   }
 
-  emptyAlbum() {
-
-  }
-
   deleteAlbum() {
+    const album$ = this.albumService.album.data$.pipe(
+      filter(album => album !== null),
+      first(),
+      shareReplay(1),
+    );
+
+    const dialogRef = this.dialog.open(
+      ConfirmationDialogComponent,
+      {
+        data: {
+          title: "Are you sure you want to delete this album?",
+          detail: "This action is irreversible and the photos in this album may be deleted.",
+          buttonClass: "error-button",
+          buttonNames: ["CANCEL", "DELETE"],
+        } as ConfirmationDialogProps
+      },
+    );
 
+    (dialogRef.afterClosed() as Observable<boolean>).pipe(
+      filter(result => result),
+      switchMap(() => album$),
+      switchMap(album => this.albumService.empty(album.id)),
+      switchMap(() => album$),
+      switchMap(album => this.albumService.delete(album.id)),
+      switchMap(() => album$),
+    ).subscribe(album => {
+      if (!album) return;
+      this.router.navigate([`/event/${album.event_id}/${slugify(album.event.name)}`]);
+    });
   }
 
   openLightbox(photoId: string): void {

diff --git a/src/app/components/confirmation-dialog/confirmation-dialog.component.html b/src/app/components/confirmation-dialog/confirmation-dialog.component.html
@@ -0,0 +1,10 @@
+<h2 mat-dialog-title>{{ props.title }}</h2>
+<mat-dialog-content *ngIf="props.detail">{{ props.detail }}</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button [class]="props.buttonClass" [mat-dialog-close]="false">
+    {{ props.buttonNames ? props.buttonNames[0] : "CANCEL" }}
+  </button>
+  <button mat-flat-button [class]="props.buttonClass" [mat-dialog-close]="true">
+    {{ props.buttonNames ? props.buttonNames[1] : "OK" }}
+  </button>
+</mat-dialog-actions>
diff --git a/src/app/components/confirmation-dialog/confirmation-dialog.component.scss b/src/app/components/confirmation-dialog/confirmation-dialog.component.scss
@@ -0,0 +1,3 @@
+:host > * {
+  max-width: 400px;
+}
diff --git a/src/app/components/confirmation-dialog/confirmation-dialog.component.ts b/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
@@ -0,0 +1,32 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { NgIf } from "@angular/common";
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatDialogModule,
+    NgIf,
+  ],
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrl: './confirmation-dialog.component.scss'
+})
+export class ConfirmationDialogComponent {
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public props: ConfirmationDialogProps,
+  ) {
+  }
+
+}
+
+export interface ConfirmationDialogProps {
+  title: string;
+  detail?: string;
+
+  buttonClass?: string;
+  buttonNames?: [string, string];
+}
diff --git a/src/app/event/event-page.component.html b/src/app/event/event-page.component.html
@@ -11,8 +11,23 @@
     <mat-icon>more_vert</mat-icon>
   </button>
   <mat-menu #eventMenu="matMenu">
-    <button mat-menu-item (click)="editEvent()"><mat-icon>edit</mat-icon>EDIT EVENT</button>
-    <button mat-menu-item (click)="deleteEvent()"><mat-icon>delete</mat-icon>DELETE EVENT</button>
+    <button mat-menu-item (click)="editEvent()">
+      <mat-icon>edit</mat-icon>
+      EDIT EVENT
+    </button>
+    <button
+      mat-menu-item
+      (click)="deleteEvent()"
+      [disabled]="!(canDelete$ | async)"
+      [matTooltip]="
+        (canDelete$ | async)
+        ? ''
+        : 'You can only delete an event after all of its albums have been deleted.'"
+      matTooltipPosition="left"
+    >
+      <mat-icon>delete</mat-icon>
+      DELETE EVENT
+    </button>
   </mat-menu>
 </title-section>
 
@@ -22,6 +37,6 @@
 >
   <ng-container *ngFor="let index of getAlbumGroupIndices(albums)">
     <h3 *ngIf="index">{{ configService.config.albums.groupName(index) }}</h3>
-    <album *ngFor="let album of albums[index]" [album]="album" />
+    <album *ngFor="let album of albums[index]" [album]="album"/>
   </ng-container>
 </div>
diff --git a/src/app/event/event-page.component.ts b/src/app/event/event-page.component.ts
@@ -16,6 +16,11 @@ import { AlbumComponent } from "../album/components/album/album.component";
 import { AlbumDialogComponent } from "../album/components/album-dialog/album-dialog.component";
 import { SlugPipe } from "../../pipes/slug.pipe";
 import slugify from "slugify";
+import {
+  ConfirmationDialogComponent,
+  ConfirmationDialogProps
+} from "../components/confirmation-dialog/confirmation-dialog.component";
+import { MatTooltipModule } from "@angular/material/tooltip";
 
 @Component({
   selector: 'event-page',
@@ -28,9 +33,10 @@ import slugify from "slugify";
     MatButtonModule,
     MatIconModule,
     MatMenuModule,
+    MatTooltipModule,
 
-    TitleSectionComponent,
     AlbumComponent,
+    TitleSectionComponent,
     SlugPipe,
   ],
   templateUrl: './event-page.component.html',
@@ -43,6 +49,8 @@ export class EventPageComponent {
   // Yields albums indexed by date-strings or ""
   protected albums$: Observable<{ [key: string]: Album[] }>;
 
+  protected canDelete$: Observable<boolean>;
+
   constructor(
     protected dialog: MatDialog,
     protected router: Router,
@@ -73,7 +81,10 @@ export class EventPageComponent {
       }),
       shareReplay(1),
     );
-    eventService.id$.subscribe(console.log);
+
+    this.canDelete$ = this.eventService.albums.data$.pipe(
+      map(albums => albums.length === 0),
+    );
   }
 
   createAlbum() {
@@ -112,15 +123,28 @@ export class EventPageComponent {
   }
 
   deleteEvent() {
-    this.eventService.id$.pipe(
-      first(),
-      switchMap(eventId => {
-        if (!eventId) return of(false);
-        return this.eventService.delete(eventId);
-      })
+    const eventId$ = this.eventService.id$.pipe(first());
+
+    const dialogRef = this.dialog.open(
+      ConfirmationDialogComponent,
+      {
+        data: {
+          title: "Are you sure you want to delete this event?",
+          detail: "This action is irreversible and the photos in this album may be deleted.",
+          buttonClass: "error-button",
+          buttonNames: ["CANCEL", "DELETE"],
+        } as ConfirmationDialogProps
+      },
+    );
+
+    (dialogRef.afterClosed() as Observable<boolean>).pipe(
+      filter(result => result),
+      switchMap(() => eventId$),
+      filter(eventId => eventId !== null),
+      switchMap(eventId => this.eventService.delete(eventId)),
     ).subscribe(result => {
       if (!result) return;
-      this.router.navigate(['/event']);
+      this.router.navigate([`/event`]);
     });
   }
 

diff --git a/src/app/lightbox/components/lightbox-download-menu/lightbox-download-menu.component.html b/src/app/lightbox/components/lightbox-download-menu/lightbox-download-menu.component.html
@@ -13,7 +13,7 @@
     >
       <mat-icon>photo_size_select_small</mat-icon>
       Small
-      <span>400px</span>
+      <span class="hint">400px</span>
     </button>
 
     <button
@@ -22,7 +22,7 @@
     >
       <mat-icon>photo_size_select_large</mat-icon>
       Medium
-      <span>800px</span>
+      <span class="hint">800px</span>
     </button>
 
     <button
@@ -31,7 +31,7 @@
     >
       <mat-icon>photo_size_select_actual</mat-icon>
       Large
-      <span>2048px</span>
+      <span class="hint">2048px</span>
     </button>
 
     <ng-container *ngIf="canDownload$ | async">
@@ -42,7 +42,7 @@
       >
         <mat-icon>raw_on</mat-icon>
         Original
-        <span>Without watermark</span>
+        <span class="hint">Without watermark</span>
       </button>
     </ng-container>
   </mat-menu>

diff --git a/src/app/lightbox/components/lightbox-download-menu/lightbox-download-menu.component.scss b/src/app/lightbox/components/lightbox-download-menu/lightbox-download-menu.component.scss
@@ -1,3 +1,8 @@
 button[mat-icon-button] {
   color: white;
 }
+
+button span.hint {
+  display: block;
+  color: #777;
+}