templates aus listen erstellen

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

@@ -42,10 +42,26 @@
       <mat-card-header>
         <mat-card-title>Details</mat-card-title>
         @if (!isCreateMode()) {
-          <button mat-stroked-button type="button" (click)="showEditor() ? cancelEditing() : startEditing()">
-            <mat-icon aria-hidden="true">{{ showEditor() ? 'close' : 'edit' }}</mat-icon>
-            {{ showEditor() ? 'Abbrechen' : 'Bearbeiten' }}
-          </button>
+          <div class="detail-actions">
+            <button
+              mat-stroked-button
+              type="button"
+              [disabled]="creatingTemplate()"
+              (click)="createTemplateFromList()"
+            >
+              @if (creatingTemplate()) {
+                <mat-progress-spinner mode="indeterminate" diameter="18" />
+              } @else {
+                <mat-icon aria-hidden="true">content_copy</mat-icon>
+              }
+              Template
+            </button>
+
+            <button mat-stroked-button type="button" (click)="showEditor() ? cancelEditing() : startEditing()">
+              <mat-icon aria-hidden="true">{{ showEditor() ? 'close' : 'edit' }}</mat-icon>
+              {{ showEditor() ? 'Abbrechen' : 'Bearbeiten' }}
+            </button>
+          </div>
         }
       </mat-card-header>
 

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

@@ -58,6 +58,7 @@ export class ListDetailComponent implements OnInit {
   protected readonly isCreateMode = signal(false);
   protected readonly loading = signal(true);
   protected readonly saving = signal(false);
+  protected readonly creatingTemplate = signal(false);
   protected readonly editing = signal(false);
   protected readonly addingItem = signal(false);
   protected readonly loadingSuggestions = signal(false);
@@ -210,6 +211,28 @@ export class ListDetailComponent implements OnInit {
       });
   }
 
+  protected createTemplateFromList(): void {
+    const listId = this.listId();
+
+    if (!listId || this.creatingTemplate()) {
+      return;
+    }
+
+    this.creatingTemplate.set(true);
+    this.listsService
+      .createTemplateFromList(listId)
+      .pipe(finalize(() => this.creatingTemplate.set(false)))
+      .subscribe({
+        next: (template) => {
+          this.snackBar.open('Template erstellt.', 'OK', { duration: 2500 });
+          void this.router.navigate(['/templates', template.id]);
+        },
+        error: (error: unknown) => {
+          this.snackBar.open(getAuthErrorMessage(error), 'OK', { duration: 5000 });
+        },
+      });
+  }
+
   protected loadSuggestions(): void {
     const listId = this.listId();
 

listify-client/src/app/lists/lists.service.ts

@@ -9,6 +9,7 @@ import {
   UpdateListRequest,
   UserList,
 } from './lists.models';
+import { ListTemplate } from '../templates/templates.models';
 
 @Injectable({ providedIn: 'root' })
 export class ListsService {
@@ -50,6 +51,10 @@ export class ListsService {
     );
   }
 
+  createTemplateFromList(listId: string): Observable<ListTemplate> {
+    return this.http.post<ListTemplate>(`${this.apiUrl}/${listId}/template`, {});
+  }
+
   updateItem(
     listId: string,
     itemId: string,