edit hinter button

listify-client/src/app/lists/list-detail/list-detail.component.ts

@@ -46,10 +46,12 @@ export class ListDetailComponent implements OnInit {
   protected readonly isCreateMode = signal(false);
   protected readonly loading = signal(true);
   protected readonly saving = signal(false);
+  protected readonly editing = signal(false);
   protected readonly addingItem = signal(false);
   protected readonly errorMessage = signal<string | null>(null);
   protected readonly updatingItemId = signal<string | null>(null);
   protected readonly canEditItems = computed(() => Boolean(this.list()?.id));
+  protected readonly showEditor = computed(() => this.isCreateMode() || this.editing());
 
   protected readonly listForm = this.formBuilder.group({
     name: ['', [Validators.required]],
@@ -66,6 +68,7 @@ export class ListDetailComponent implements OnInit {
 
     if (this.isCreateMode()) {
       this.loading.set(false);
+      this.editing.set(true);
       this.listForm.reset({ name: '', description: '' });
       return;
     }
@@ -128,7 +131,10 @@ export class ListDetailComponent implements OnInit {
         this.setList(list);
         if (this.isCreateMode()) {
           this.isCreateMode.set(false);
+          this.editing.set(false);
           void this.router.navigate(['/lists', list.id], { replaceUrl: true });
+        } else {
+          this.editing.set(false);
         }
         this.snackBar.open('Liste gespeichert.', 'OK', { duration: 2500 });
       },
@@ -196,6 +202,29 @@ export class ListDetailComponent implements OnInit {
       });
   }
 
+  protected startEditing(): void {
+    this.editing.set(true);
+  }
+
+  protected cancelEditing(): void {
+    const list = this.list();
+
+    if (this.isCreateMode()) {
+      void this.router.navigateByUrl('/lists');
+      return;
+    }
+
+    if (list) {
+      this.listForm.reset({
+        name: list.name,
+        description: list.description ?? '',
+      });
+    }
+
+    this.itemForm.reset({ title: '', required: true });
+    this.editing.set(false);
+  }
+
   protected checkedCount(list: UserList): number {
     return list.items.filter((item) => item.checked).length;
   }