Initial

listify-client/src/app/templates/templates.component.html

@@ -0,0 +1,116 @@
+<section class="workspace-page">
+  <header class="page-header">
+    <div>
+      <h1>Templates</h1>
+      <p>Vorlagen fuer wiederkehrende Listen.</p>
+    </div>
+
+    <a mat-flat-button routerLink="/templates/new">
+      <mat-icon aria-hidden="true">add</mat-icon>
+      Neues Template
+    </a>
+  </header>
+
+  @if (loading()) {
+    <mat-card class="state-card" appearance="outlined">
+      <mat-card-content>
+        <mat-progress-spinner mode="indeterminate" diameter="40" />
+        <h2>Templates werden geladen</h2>
+      </mat-card-content>
+    </mat-card>
+  } @else if (errorMessage()) {
+    <mat-card class="state-card error-state" appearance="outlined">
+      <mat-card-content>
+        <mat-icon aria-hidden="true">error</mat-icon>
+        <h2>Templates konnten nicht geladen werden</h2>
+        <p>{{ errorMessage() }}</p>
+        <button mat-stroked-button type="button" (click)="loadTemplates()">
+          <mat-icon aria-hidden="true">refresh</mat-icon>
+          Erneut laden
+        </button>
+      </mat-card-content>
+    </mat-card>
+  } @else if (hasTemplates()) {
+    <div class="template-grid">
+      @for (template of templates(); track template.id) {
+        <mat-card class="template-card" appearance="outlined">
+          <mat-card-header>
+            <mat-card-title>{{ template.name }}</mat-card-title>
+            <mat-card-subtitle>{{ kindLabel(template.kind) }}</mat-card-subtitle>
+          </mat-card-header>
+
+          <mat-card-content>
+            @if (template.description) {
+              <p class="template-description">{{ template.description }}</p>
+            }
+
+            <div class="template-meta">
+              <span>
+                <mat-icon aria-hidden="true">checklist</mat-icon>
+                {{ template.items.length }} Eintraege
+              </span>
+              <span>
+                <mat-icon aria-hidden="true">schedule</mat-icon>
+                {{ template.updatedAt | date: 'dd.MM.yyyy' }}
+              </span>
+            </div>
+
+            @if (template.items.length > 0) {
+              <ul class="template-items">
+                @for (item of template.items.slice(0, 4); track item.id) {
+                  <li>
+                    <mat-icon aria-hidden="true">
+                      {{ item.required ? 'radio_button_unchecked' : 'remove_circle_outline' }}
+                    </mat-icon>
+                    <span>{{ item.title }}</span>
+                  </li>
+                }
+              </ul>
+            }
+          </mat-card-content>
+
+          <mat-card-actions align="end">
+            <button
+              mat-button
+              type="button"
+              [disabled]="copyingTemplateId() === template.id"
+              (click)="copyTemplate(template)"
+            >
+              @if (copyingTemplateId() === template.id) {
+                <mat-progress-spinner mode="indeterminate" diameter="18" />
+              } @else {
+                <mat-icon aria-hidden="true">content_copy</mat-icon>
+              }
+              Als Liste
+            </button>
+            <a mat-button [routerLink]="['/templates', template.id]">
+              <mat-icon aria-hidden="true">edit</mat-icon>
+              Bearbeiten
+            </a>
+            <button
+              mat-icon-button
+              type="button"
+              [attr.aria-label]="template.name + ' loeschen'"
+              [disabled]="deletingTemplateId() === template.id"
+              (click)="deleteTemplate(template)"
+            >
+              @if (deletingTemplateId() === template.id) {
+                <mat-progress-spinner mode="indeterminate" diameter="18" />
+              } @else {
+                <mat-icon aria-hidden="true">delete</mat-icon>
+              }
+            </button>
+          </mat-card-actions>
+        </mat-card>
+      }
+    </div>
+  } @else {
+    <mat-card class="state-card" appearance="outlined">
+      <mat-card-content>
+        <mat-icon aria-hidden="true">dashboard_customize</mat-icon>
+        <h2>Noch keine Templates</h2>
+        <p>Erstelle dein erstes Template, um wiederkehrende Listen schneller anzulegen.</p>
+      </mat-card-content>
+    </mat-card>
+  }
+</section>