All files / app/components/edit-favourite-modal edit-favourite-modal.html

90% Statements 54/60
100% Branches 0/0
0% Functions 0/6
100% Lines 35/35

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 806x     18x 18x 18x 6x       6x   6x 18x 6x         18x 6x             6x 18x 6x     18x 6x     18x 198x   6x       6x   18x 6x         18x 6x           6x 18x 6x     18x 6x     18x 180x   6x         18x 18x 6x    
<div class="modal-content">
  <!-- Header -->
  <div class="modal-header">
    <h2 class="modal-title">{{ 'modals.editFavourite.title' | 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="favName">{{ 'modals.editFavourite.name' | transloco }}</label>
      <input
        type="text"
        id="favName"
        class="form-input"
        [attr.placeholder]="'modals.editFavourite.namePlaceholder' | transloco"
        [ngModel]="name()"
        (ngModelChange)="name.set($event)"
        name="favName"
        required
      />
    </div>
 
    <!-- Kategorie -->
    <div class="form-group">
      <label for="favCategory">{{ 'modals.editFavourite.category' | transloco }}</label>
      <select
        id="favCategory"
        class="form-input"
        [ngModel]="category()"
        (ngModelChange)="setCategory($event)"
        name="favCategory"
      >
        @for (cat of categories; track cat) {
          <option [value]="cat">{{ ('categories.' + cat) | transloco }}</option>
        }
      </select>
    </div>
 
    <!-- Menge und Einheit -->
    <div class="form-row form-row-2">
      <div class="form-group">
        <label for="favSize">{{ 'modals.editFavourite.amountOptional' | transloco }}</label>
        <input
          type="number"
          id="favSize"
          class="form-input"
          [attr.placeholder]="'modals.addItem.sizePlaceholder' | transloco"
          [ngModel]="size()"
          (ngModelChange)="setSize($event)"
          name="favSize"
          min="0"
          step="0.1"
        />
      </div>
      <div class="form-group">
        <label for="favUnit">{{ 'modals.editFavourite.unit' | transloco }}</label>
        <select
          id="favUnit"
          class="form-select"
          [ngModel]="unit()"
          (ngModelChange)="setUnit($event)"
          name="favUnit"
        >
          @for (u of units; track u) {
            <option [value]="u">{{ ('units.' + u) | transloco }}</option>
          }
        </select>
      </div>
    </div>
 
    <!-- Submit Button -->
    <button type="submit" class="submit-btn" [disabled]="!name().trim()">
      {{ 'common.save' | transloco }}
    </button>
  </form>
</div>