From 468970cbbe09b27e64012b6961737bf2d1093fa1 Mon Sep 17 00:00:00 2001
From: Ray Wojciechowski <ray@skillbird.de>
Date: Sun, 15 Dec 2024 17:26:28 +0100
Subject: [PATCH] Add "Clear All" functionality to persons

Introduced "Clear All" buttons across lists with conditional
rendering to ensure visibility only when items exist.
Added `removeAllPersons` method in the person service and connected it
with relevant components.
---
 .../person-list/person-list.component.html           |  9 +++++++++
 .../components/person-list/person-list.component.ts  |  9 ++++++++-
 src/app/persons/services/person.service.ts           |  5 +++++
 .../prior-knowledge-list.component.html              | 10 ++++++----
 .../prior-knowledge-list.component.ts                |  6 +++---
 .../time-slot-list/time-slot-list.component.html     | 12 +++++++-----
 6 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/app/persons/components/person-list/person-list.component.html b/src/app/persons/components/person-list/person-list.component.html
index c02f12d..555ac51 100644
--- a/src/app/persons/components/person-list/person-list.component.html
+++ b/src/app/persons/components/person-list/person-list.component.html
@@ -6,7 +6,16 @@
             caption="Add person"
             (click)="onAdd(content)">
     </button>
+
     <app-person-sort-buttons/>
+
+    @if ((personsCount$ | async)! > 0) {
+      <button app-delete-button
+              caption="Clear all persons"
+              confirmationMessage="Are you sure you want to clear all persons?"
+              (deleteConfirmed)="onDeleteAll()">
+      </button>
+    }
   </div>
 
   <div class="d-flex gap-2">
diff --git a/src/app/persons/components/person-list/person-list.component.ts b/src/app/persons/components/person-list/person-list.component.ts
index 632a589..20f171f 100644
--- a/src/app/persons/components/person-list/person-list.component.ts
+++ b/src/app/persons/components/person-list/person-list.component.ts
@@ -14,6 +14,7 @@ import {PersonSortButtonsComponent} from '../../../shared/components/person-sort
 import {PersonSlotFilterComponent} from '../../../shared/components/person-slot-filter/person-slot-filter.component';
 import {SearchFieldComponent} from '../../../shared/components/search-field/search-field.component';
 import {map} from 'rxjs';
+import {DeleteButtonComponent} from '../../../shared/components/delete-button/delete-button.component';
 
 
 @Component({
@@ -29,7 +30,8 @@ import {map} from 'rxjs';
     AddButtonComponent,
     PersonSortButtonsComponent,
     PersonSlotFilterComponent,
-    SearchFieldComponent
+    SearchFieldComponent,
+    DeleteButtonComponent
   ],
   templateUrl: './person-list.component.html',
   styleUrl: './person-list.component.scss'
@@ -79,6 +81,11 @@ export class PersonListComponent {
   }
 
 
+  protected onDeleteAll() {
+    this.personService.removeAllPersons();
+  }
+
+
   private openOffcanvas(content: TemplateRef<any>, title: string) {
     this.offcanvasTitle = title;
 
diff --git a/src/app/persons/services/person.service.ts b/src/app/persons/services/person.service.ts
index 964580c..3316b28 100644
--- a/src/app/persons/services/person.service.ts
+++ b/src/app/persons/services/person.service.ts
@@ -127,6 +127,11 @@ export class PersonService {
   }
 
 
+  public removeAllPersons() {
+    this.persons.forEach(p => this.removePerson(p));
+  }
+
+
   public addAvailablePerson(person: Person) {
     this.availablePersons = this.availablePersons.concat(person);
     this.sortAvailablePersons(this.nameSortOrder(), this.slotSortOrder());
diff --git a/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.html b/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.html
index ddfdde9..76dd478 100644
--- a/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.html
+++ b/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.html
@@ -7,10 +7,12 @@
             (click)="onAdd(content)">
     </button>
 
-    <button app-delete-button caption="Clear all prior knowledge"
-            confirmationMessage="Are you sure you want to clear all prior knowledge?"
-            (deleteConfirmed)="onDeleteAll()">
-    </button>
+    @if ((knowledgeList$ | async)!.length > 0) {
+      <button app-delete-button caption="Clear all prior knowledge"
+              confirmationMessage="Are you sure you want to clear all prior knowledge?"
+              (deleteConfirmed)="onDeleteAll()">
+      </button>
+    }
   </div>
 </div>
 
diff --git a/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.ts b/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.ts
index 35a28b1..daf2b9f 100644
--- a/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.ts
+++ b/src/app/prior-knowledge/components/prior-knowledge-list/prior-knowledge-list.component.ts
@@ -1,6 +1,5 @@
 import {Component, inject, TemplateRef} from '@angular/core';
 import {PriorKnowledgeService} from '../../services/prior-knowledge.service';
-import {AsyncPipe} from '@angular/common';
 import {PriorKnowledgeViewComponent} from '../prior-knowledge-view/prior-knowledge-view.component';
 import {createPriorKnowledge, PriorKnowledge} from '../../models/prior-knowledge.model';
 import {NgbOffcanvas, NgbOffcanvasOptions} from '@ng-bootstrap/ng-bootstrap';
@@ -9,18 +8,19 @@ import {DataNotAvailableInfoComponent} from "../../../shared/components/data-not
 import {DataNotAvailableViewComponent} from '../../../shared/components/data-not-available-view/data-not-available-view.component';
 import {AddButtonComponent} from "../../../shared/components/add-button/add-button.component";
 import {DeleteButtonComponent} from "../../../shared/components/delete-button/delete-button.component";
+import {AsyncPipe} from '@angular/common';
 
 
 @Component({
   selector: 'app-prior-knowledge-list',
   imports: [
-    AsyncPipe,
     PriorKnowledgeViewComponent,
     PriorKnowledgeEditComponent,
     DataNotAvailableInfoComponent,
     DataNotAvailableViewComponent,
     AddButtonComponent,
-    DeleteButtonComponent
+    DeleteButtonComponent,
+    AsyncPipe
   ],
   templateUrl: './prior-knowledge-list.component.html',
   styleUrl: './prior-knowledge-list.component.scss'
diff --git a/src/app/timeslots/components/time-slot-list/time-slot-list.component.html b/src/app/timeslots/components/time-slot-list/time-slot-list.component.html
index 26804ed..9234562 100644
--- a/src/app/timeslots/components/time-slot-list/time-slot-list.component.html
+++ b/src/app/timeslots/components/time-slot-list/time-slot-list.component.html
@@ -18,11 +18,13 @@
         </button>
       }
 
-      <button app-delete-button
-              caption="Clear all time slots"
-              confirmationMessage="Are you sure you want to clear all time slots?"
-              (deleteConfirmed)="onDeleteAll()">
-      </button>
+      @if ((timeSlotCount$ | async)! > 0) {
+        <button app-delete-button
+                caption="Clear all time slots"
+                confirmationMessage="Are you sure you want to clear all time slots?"
+                (deleteConfirmed)="onDeleteAll()">
+        </button>
+      }
     </div>
   </div>
 </div>