re

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.html

@@ -0,0 +1,9 @@
+<div mat-dialog-content>
+  <p>Die Veranstaltung wird archiviert und ist danach nichtmehr verfügbar.</p>
+</div>
+<div mat-dialog-actions>
+  <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
+  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>
+    Archivieren
+  </button>
+</div>

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.spec.ts

@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ArchiveDialogComponent} from './archive-dialog.component';
+
+describe('ArchiveDialogComponent', () => {
+  let component: ArchiveDialogComponent;
+  let fixture: ComponentFixture<ArchiveDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ArchiveDialogComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ArchiveDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/shows/dialog/archive-dialog/archive-dialog.component.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-archive-dialog',
+  templateUrl: './archive-dialog.component.html',
+  styleUrls: ['./archive-dialog.component.less'],
+})
+export class ArchiveDialogComponent {}

src/app/modules/shows/services/show.service.ts

@@ -27,7 +27,16 @@ export class ShowService {
         () => this.showDataService.list$,
         (user: User | null, shows: Show[]) => ({user, shows})
       ),
-      map(s => s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
+      map(s =>
+        s.shows
+          .sort((a, b) => a.date.toMillis() - b.date.toMillis())
+          .map(_ => {
+            console.log(_);
+            return _;
+          })
+          .filter(_ => !_.archived)
+          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
+      )
     );
   }
 

src/app/modules/shows/show/show.component.ts

@@ -23,6 +23,8 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {fade} from '../../../animations';
+import {MatDialog} from '@angular/material/dialog';
+import {ArchiveDialogComponent} from '../dialog/archive-dialog/archive-dialog.component';
 
 @Component({
   selector: 'app-show',
@@ -56,7 +58,8 @@ export class ShowComponent implements OnInit, OnDestroy {
     private showSongService: ShowSongService,
     private docxService: DocxService,
     private router: Router,
-    private cRef: ChangeDetectorRef
+    private cRef: ChangeDetectorRef,
+    public dialog: MatDialog
   ) {}
 
   public ngOnInit(): void {
@@ -102,8 +105,17 @@ export class ShowComponent implements OnInit, OnDestroy {
     this.textSize -= 0.1;
   }
 
-  public async onArchive(archived: boolean): Promise<void> {
+  public onArchive(archived: boolean): void {
-    if (this.showId != null) await this.showService.update$(this.showId, {archived});
+    if (!archived && this.showId != null) void this.showService.update$(this.showId, {archived});
+    else {
+      const dialogRef = this.dialog.open(ArchiveDialogComponent, {
+        width: '350px',
+      });
+
+      dialogRef.afterClosed().subscribe((archive: boolean) => {
+        if (archive && this.showId != null) void this.showService.update$(this.showId, {archived});
+      });
+    }
   }
 
   public async onPublish(published: boolean): Promise<void> {

src/app/modules/shows/shows.module.ts

@@ -34,9 +34,11 @@ import {SortByModule} from '../../widget-modules/pipes/sort-by/sort-by.module';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {FilterComponent} from './list/filter/filter.component';
 import {EditComponent} from './edit/edit.component';
+import {ArchiveDialogComponent} from './dialog/archive-dialog/archive-dialog.component';
+import {MatDialogModule} from '@angular/material/dialog';
 
 @NgModule({
-  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent],
+  declarations: [NewComponent, ListComponent, ListItemComponent, ShowComponent, SongComponent, FilterComponent, EditComponent, ArchiveDialogComponent],
   imports: [
     CommonModule,
     ShowsRoutingModule,
@@ -66,6 +68,7 @@ import {EditComponent} from './edit/edit.component';
     RoleModule,
     SortByModule,
     MatTooltipModule,
+    MatDialogModule,
   ],
 })
 export class ShowsModule {}