gru/expense-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

poprawki

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-06 10:46:48 +02:00
parent 1ba1a26291
commit 0c7414101a
23 changed files with 962 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/shared/ui/category-picker.component.ts
+11 -9
View File
@@ -1,5 +1,6 @@
import { CommonModule } from '@angular/common';
import { Component, HostListener, computed, input, output, signal } from '@angular/core';
import { Component, HostListener, computed, inject, input, output, signal } from '@angular/core';
import { UiService } from '../../core/services/ui.service';
import type { Category } from '../models';
@Component({
@@ -7,13 +8,13 @@ import type { Category } from '../models';
standalone: true,
imports: [CommonModule],
template: `
<div class="dropdown w-100">
<div class="dropdown w-100 position-relative ec-category-picker">
<button class="form-select text-start d-flex align-items-center justify-content-between gap-2" type="button" (click)="toggle($event)">
<span class="d-flex flex-wrap gap-2 align-items-center">
@if (selectedItems().length) {
@for (item of selectedItems(); track item.id) {
<span class="badge text-bg-dark d-inline-flex align-items-center gap-1">
<span class="badge rounded-pill" [style.background]="item.color">&nbsp;</span>
<span class="badge ec-picker-badge d-inline-flex align-items-center gap-1">
<span class="badge rounded-pill ec-picker-dot" [style.background]="item.color">&nbsp;</span>
{{ item.name }}
</span>
}
@@ -25,21 +26,21 @@ import type { Category } from '../models';
</button>
@if (open()) {
<div class="dropdown-menu show w-100 p-2 shadow-sm">
<div class="dropdown-menu show w-100 p-2 shadow-sm ec-category-picker-menu">
<div class="d-grid gap-1" style="max-height: 18rem; overflow: auto;">
@for (item of items(); track item.id) {
<label class="dropdown-item rounded-2 d-flex align-items-center justify-content-between gap-3" (click)="$event.stopPropagation()">
<span class="d-flex align-items-center gap-2">
<input class="form-check-input m-0" type="checkbox" [checked]="isSelected(item.id)" (change)="toggleItem(item.id)" />
<span class="badge rounded-pill" [style.background]="item.color">&nbsp;</span>
<span class="badge rounded-pill ec-picker-dot" [style.background]="item.color">&nbsp;</span>
<span>{{ item.name }}</span>
</span>
@if (isSelected(item.id)) {
<span class="badge text-bg-success">OK</span>
<span class="badge text-bg-success">{{ ui.t('common.selected') }}</span>
}
</label>
} @empty {
<div class="dropdown-item text-secondary">Brak kategorii.</div>
<div class="dropdown-item text-secondary">{{ ui.t('common.noCategories') }}</div>
}
</div>
</div>
@@ -48,9 +49,10 @@ import type { Category } from '../models';
`
})
export class CategoryPickerComponent {
readonly ui = inject(UiService);
readonly items = input<Category[]>([]);
readonly selectedIds = input<string[]>([]);
readonly placeholder = input('Wybierz kategorie');
readonly placeholder = input('');
readonly changed = output<string[]>();
readonly open = signal(false);