Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 29x 92x 92x 92x 29x 29x 29x 92x 29x 92x 29x 92x 92x 92x 92x 29x 92x 29x 92x 29x 29x 92x 92x 92x 108x 29x 29x 92x 29x 92x 92x 29x 92x 29x 92x 29x 29x 92x 29x 92x 29x 92x 92x 920x 29x 29x 92x 92x 29x 92x 92x 29x | <div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h2 class="modal-title">{{ modalTitle() | transloco }}</h2>
<button type="button" class="close-btn" (click)="close()" [attr.aria-label]="'common.close' | transloco">
<lucide-icon [img]="icons.X" [size]="24" [strokeWidth]="2"></lucide-icon>
</button>
</div>
<!-- Form -->
<form class="modal-form" (ngSubmit)="submit()">
<!-- Produktname -->
<div class="form-group">
<label for="name">{{ 'modals.addItem.productName' | transloco }}</label>
<div class="size-unit-control" style="position: relative;">
<input type="text" id="name" class="form-input" [attr.placeholder]="'modals.addItem.productNamePlaceholder' | transloco" [ngModel]="name()"
(ngModelChange)="onNameChange($event)" (focus)="showAutocomplete.set(true)" (blur)="hideAutocomplete()"
name="name" autocomplete="off" required />
<button type="button" class="favourite-btn" [class.active]="isCurrentFavourite()" (click)="toggleFavourite()"
[disabled]="isNameEmpty()" [attr.title]="'modals.addItem.saveAsFavourite' | transloco" [attr.aria-label]="'modals.addItem.saveAsFavourite' | transloco">
<lucide-icon [img]="icons.Star" [size]="24" [strokeWidth]="2"
[class.filled]="isCurrentFavourite()"></lucide-icon>
</button>
@if (shouldShowAutocomplete()) {
<div class="autocomplete-dropdown">
@for (fav of filteredFavourites(); track fav.id) {
<button type="button" class="autocomplete-item" (mousedown)="$event.preventDefault(); selectFavourite(fav)">
<lucide-icon [img]="icons.Star" [size]="16" [strokeWidth]="2" class="filled"></lucide-icon>
<span class="item-name">{{ fav.name }}</span>
@if (hasFavouriteDetails(fav)) {
<span class="item-details">
{{ getFavouriteDetails(fav) }}
</span>
}
</button>
}
</div>
}
</div>
@if (shouldShowFavouritesList()) {
<div class="favourites-list">
@for (fav of favourites(); track fav.id) {
<button type="button" class="favourite-chip" (click)="selectFavourite(fav)">
<lucide-icon [img]="icons.Star" [size]="12" [strokeWidth]="1"></lucide-icon>
<span>{{ fav.name }}</span>
@if (hasFavouriteDetails(fav)) {
<div>
{{ getFavouriteDetails(fav) }}
</div>
}
</button>
}
</div>
}
</div>
<!-- Kategorie -->
<div class="form-group">
<label for="category">{{ 'modals.addItem.category' | transloco }}</label>
<select id="category" class="form-select" [ngModel]="category()" (ngModelChange)="category.set($event)"
name="category">
@for (cat of categories(); track cat.id) {
<option [value]="cat.name">{{ ('categories.' + cat.name) | transloco }}</option>
}
</select>
</div>
<!-- Menge -->
<div class="form-group">
<label>{{ 'modals.addItem.quantity' | transloco }}</label>
<div class="quantity-control">
<button type="button" class="quantity-btn" (click)="decrementQuantity()" [disabled]="quantity() <= 1">
<lucide-icon [img]="icons.Minus" [size]="20" [strokeWidth]="2"></lucide-icon>
</button>
<span class="quantity-value">{{ quantity() }}</span>
<button type="button" class="quantity-btn" (click)="incrementQuantity()">
<lucide-icon [img]="icons.Plus" [size]="20" [strokeWidth]="2"></lucide-icon>
</button>
</div>
</div>
<!-- Größe/Einheit -->
<div class="form-group">
<label>{{ 'modals.addItem.sizeOptional' | transloco }}</label>
<div class="size-unit-control">
<input type="number" class="form-input size-input" [attr.placeholder]="'modals.addItem.sizePlaceholder' | transloco" [ngModel]="size()"
(ngModelChange)="size.set($event)" name="size" min="0" />
<select class="form-select unit-select" [ngModel]="unit()" (ngModelChange)="unit.set($event)" name="unit">
@for (u of units; track u) {
<option [value]="u">{{ ('units.' + u) | transloco }}</option>
}
</select>
</div>
</div>
<!-- Info/Beschreibung -->
<div class="form-group">
<label for="info">{{ 'modals.addItem.descriptionOptional' | transloco }}</label>
<textarea id="info" class="form-textarea" [attr.placeholder]="'modals.addItem.descriptionPlaceholder' | transloco" [ngModel]="info()"
(ngModelChange)="info.set($event)" name="info" rows="3"></textarea>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-btn" [disabled]="isNameEmpty()">
{{ submitButtonText() | transloco }}
</button>
</form>
</div> |