Edit

src/app/components/show-list/show-list.component.html

@@ -7,16 +7,24 @@
   </thead>
   <tbody>
     @for (show of shows; track show.id) {
-      <tr>
-        <td>{{ show.id }}</td>
-        <td>{{ show.title }}</td>
-        <td>
-          <button class="btn btn-secondary">Bearbeiten</button>
+      @if (isToEdit(show)) {
+        <td><input class="form-control" id="newShowId" name="newShowId" type="number" [(ngModel)]="show.id"></td>
+        <td><input class="form-control" id="newShowTitle" name="newShowTitle" type="text" [(ngModel)]="show.title"></td>
+        <td colspan="2">
+          <button class="material-icons" (click)="saveEdit()">save</button>
         </td>
-        <td>
-          <button class="btn btn-danger" (click)="delete(show)">Löschen</button>
-        </td>
-      </tr>
+      } @else {
+        <tr>
+          <td>{{ show.id }}</td>
+          <td>{{ show.title }}</td>
+          <td>
+            <button class="btn btn-secondary" (click)="edit(show)">Bearbeiten</button>
+          </td>
+          <td>
+            <button class="btn btn-danger" (click)="delete(show)">Löschen</button>
+          </td>
+        </tr>
+      }
     }
   </tbody>
 </table>

src/app/components/show-list/show-list.component.ts

@@ -1,24 +1,47 @@
 import {Component, inject, Input} from '@angular/core';
 import {Show} from '../../model/show';
 import {ShowService} from '../../services/show.service';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-show-list',
   standalone: true,
-  imports: [],
+  imports: [
+    FormsModule
+  ],
   templateUrl: './show-list.component.html',
   styleUrl: './show-list.component.css'
 })
 export class ShowListComponent {
   showService: ShowService = inject(ShowService);
   shows: Show[] = this.showService.getShows();
+  editShow: Show = new Show(null, null);
+
+  edit(show: Show) {
+    this.editShow = show;
+  }
+
+  saveEdit() {
+    this.updateShow(this.editShow);
+
+    this.editShow = new Show(null, null);
+  }
 
   updateShow(show: Show) {
     this.shows = this.shows.filter(s => s !== show);
     this.shows.push(show);
+    this.shows.sort((a, b) => (a.id ?? 0) - (b.id ?? 0));
   }
 
   delete(show: Show) {
     this.shows = this.shows.filter(s => s !== show);
   }
+
+  isToEdit(show: Show): boolean {
+    if (!this.editShow) {
+      return false;
+    } else {
+      return this.editShow === show;
+    }
+  }
 }