jaume/recordalexia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(panel): selector de emoji y color reutilizable

Browse Source 
Extrae app-emoji-picker y app-color-picker a shared/ y los usa en las
pestañas de niños, materiales, rutinas y recompensas, que tenían el mismo
problema: input de color a pelo y emoji escrito a mano. Ahora se elige el
icono de una rejilla de emojis y el color de la paleta del handoff.
This commit is contained in:
Jaume Garriga Maestre
2026-06-21 15:40:38 +02:00
parent cb6db53920
commit b8925d83dd
6 changed files with 251 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/app/features/parents/routines-tab.component.ts
View File

@@ -3,6 +3,8 @@ import { FormsModule } from '@angular/forms';
import { ParentApiService } from '../../core/parent-api.service';
import { I18nService } from '../../core/i18n.service';
import { RoutineView } from '../../core/models';
import { EmojiPickerComponent } from '../../shared/emoji-picker.component';
import { ColorPickerComponent } from '../../shared/color-picker.component';
const DAYS: { key: string; es: string; ca: string }[] = [
{ key: 'MONDAY', es: 'Lunes', ca: 'Dilluns' },
@@ -15,7 +17,7 @@ const DAYS: { key: string; es: string; ca: string }[] = [
/** Pestaña Rutinas de tarde por día de la semana, de un niño. */
@Component({
selector: 'app-routines-tab',
imports: [FormsModule],
imports: [FormsModule, EmojiPickerComponent, ColorPickerComponent],
template: `
<div class="adm-card">
<div class="adm-row">
@@ -35,13 +37,25 @@ const DAYS: { key: string; es: string; ca: string }[] = [
<div class="adm-card">
<p class="adm-label">Nueva rutina</p>
<div class="adm-row">
<input class="adm-input adm-input--sm" [(ngModel)]="icon" placeholder="🎹" maxlength="4" />
<input class="adm-input" [(ngModel)]="labelEs" placeholder="Rutina (ES)" />
<input class="adm-input" [(ngModel)]="labelCa" placeholder="Rutina (CA)" />
<input class="adm-input adm-input--sm" type="color" [(ngModel)]="color" />
<button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="add()">+ {{ i18n.t('add') }}</button>
<div class="grid2">
<div class="field">
<label class="field__label">Rutina (ES)</label>
<input class="field__input" [(ngModel)]="labelEs" placeholder="Ej. Hacer los deberes" />
</div>
<div class="field">
<label class="field__label">Rutina (CA)</label>
<input class="field__input" [(ngModel)]="labelCa" placeholder="Ex. Fer els deures" />
</div>
</div>
<div class="field">
<label class="field__label">Icono <span class="field__info" title="Toca un emoji para la rutina.">ⓘ</span></label>
<app-emoji-picker [(value)]="icon" [options]="routineIcons" />
</div>
<div class="field">
<label class="field__label">Color</label>
<app-color-picker [(value)]="color" />
</div>
<button class="adm-btn" [disabled]="!labelEs || !labelCa || !icon" (click)="add()">+ {{ i18n.t('add') }}</button>
</div>
<div class="adm-card">
@@ -60,6 +74,20 @@ const DAYS: { key: string; es: string; ca: string }[] = [
</div>
</div>
`,
styles: [
`
.field { margin-bottom: var(--space-4); }
.field__label { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-1); margin-bottom: 6px; }
.field__info { cursor: help; color: var(--text-4); font-size: 0.85rem; }
.field__input {
font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
border: 2px solid var(--border-2); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text-strong); width: 100%; box-sizing: border-box;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }
`,
],
})
export class RoutinesTabComponent {
@Input({ required: true }) set childId(value: number) {
@@ -78,10 +106,11 @@ export class RoutinesTabComponent {
this.routines().filter((r) => r.dayOfWeek === this.day()),
);
protected readonly routineIcons = ['🎒', '🥪', '📝', '🎹', '🍽️', '🛁', '🦷', '📚', '🧹', '🐕', '🛏️', '🎨', '⚽', '🧺'];
protected icon = '';
protected labelEs = '';
protected labelCa = '';
protected color = '#a78bd0';
protected color = '#A78BD0';
private reload(): void {
this.api.listRoutines(this._childId).subscribe((l) => this.routines.set(l));