122 lines
4.2 KiB
HTML
122 lines
4.2 KiB
HTML
<section class="workspace-page">
|
|
<header class="page-header">
|
|
<div>
|
|
<h1>Templates</h1>
|
|
<p>Vorlagen für wiederkehrende Listen.</p>
|
|
</div>
|
|
|
|
<a
|
|
mat-flat-button
|
|
routerLink="/templates/new"
|
|
data-onboarding="new-template"
|
|
(click)="onboarding.createTemplateClicked()"
|
|
>
|
|
<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 }} Einträge
|
|
</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 + ' löschen'"
|
|
[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>
|