Skip to main content

🏷️ e-label: panoramica

La feature e-label permette a una company di:

  • creare, modificare e pubblicare etichette digitali (QR) per vini/annate;
  • consultare statistiche e lo storico delle e-label create;
  • gestire stato di pubblicazione e aspetto del QR.

L’area è organizzata come feature module lazy sotto dashboard/elabel.

🧭 Routing e moduli​

Struttura principale dei moduli (lazy):

elabel/
├─ elabel.module.ts                 # route container (children)
├─ elabel.component.ts|html|scss    # shell con <router-outlet>

├─ elabel-home-page/                # homepage e-label (lista + stats)
│  ├─ elabel-home-page.module.ts
│  └─ elabel-home-page.component.ts|html|scss
│
├─ elabel-creation/                 # wizard creazione/edizione
│  ├─ elabel-creation.module.ts
│  ├─ elabel-creation.component.ts|html|scss
│  ├─ elabel-create-vintage/        # flow rapido per creare Vintage/Wine
│  │  └─ elabel-create-vintage.component.ts|html|scss
│  ├─ elabel-step-one/              # selezione base (lingua, vino, annata)
│  ├─ elabel-step-two/              # ingredienti/nutrizionale (drag&drop)
│  ├─ elabel-step-three/            # legal/sostenibilità/impressum/certificazioni
│  ├─ elabel-step-four/             # QR style/preview/esportazione
│  ├─ services/
│  │  ├─ elabel-create-form.service.ts
│  │  └─ objectValueValidator.validator.ts
│  └─ pipes/safeUrl.pipe.ts
│
└─ elabel-detail/                   # pagina dettaglio e-label (azioni)
   ├─ elabel-detail.module.ts
   └─ elabel-detail.component.ts|html|scss

Nota sui path: il container elabel.module.ts carica:

  • '' → HomePage
  • 'create' → Creation wizard
  • ':id' → Detail

(I nomi esatti dei segmenti sono dedotti dalla struttura dei moduli e dal pattern delle altre feature.)

🧱 Shell della feature​

ElabelComponent è un semplice shell con <router-outlet>.
Al ngOnInit/ngOnDestroy aggiorna un flag UI globale:

  • USER_ACCESS_PAGE_ACTIONS.changeShowEnterprisePanelAccess(true|false) → mostra/nasconde pannello “enterprise access” nell’app.
// Esempio (estratto)
ngOnInit()  { this._store.dispatch(changeShowEnterprisePanelAccess({ showEnterpriseAccessPanel: true  })); }
ngOnDestroy(){ this._store.dispatch(changeShowEnterprisePanelAccess({ showEnterpriseAccessPanel: false })); }

🏠 HomePage (lista + statistiche)​

File: elabel-home-page.component.*

Cosa mostra

  • Counters: numero e-label create, scan totali, annate coinvolte.
  • Tabella e-label con paginazione/ricerca, azioni (apri dettaglio, modifica, nuovo lotto).
  • Call-to-action per creare nuova e-label.

Dati principali

  • user$ (utente loggato) via AUTHENTICATION_SELECTORS.
  • selectedAccess$ (company corrente) via USER_ACCES_SELECTORS.
  • elabelItems$ (lista) e scanNumber$ (statistiche) tramite BackendService.
  • Stato UI: isLoading$, isTableDataLoading$, getErrorMessage$.

Navigazione

  • “Nuova e-label” → dashboard/elabel/create
  • “Dettaglio” → dashboard/elabel/:id

🧪 Creation Wizard (4 step + “create vintage”)​

File: elabel-creation.component.*, elabel-step-*/, elabel-create-vintage/

Stato e servizi

  • ElabelCreateFormService → Single Source of Truth per i FormGroup e FormArray dei vari step:
    • ElabelCreateVintageForm (lingua base, vino, annata)
    • ElabelCreateIngredientsForm (ingredienti, allergeni, nutrizionale)
    • ElabelCreateSustainabilityForm (operatori, paesi, avvertenze, impressum, certificazioni, packaging: componenti/materiali)
    • ElabelQrConfigForm (opzioni QR: dimensioni, colori, corner, logo, trasparenza; Options di ngx-qrcode-styling)
  • Validator custom: objectValueValidator per garantire selezioni valide in form complessi.
  • Pipes: SafeUrlPipe per anteprime sicure (logo/immagini).

Step 0 — Create Vintage (opzionale)

  • Sub-flow per creare rapidamente wine/vintage (riutilizza componenti condivisi di creazione).
  • Utile quando l’e-label richiede un’annata che non esiste ancora.

Step 1 — Base

  • Selezione lingua base, wine, vintage (con suggerimenti e dipendenze).
  • Possibilità di attivare il sub-flow CreateVintage.
  • Reset intelligente dei campi dipendenti (es. reset annata al cambio vino).

Step 2 — Ingredienti & Nutrizionale

  • Gestione liste con CDK Drag&Drop (moveItemInFormArray) per ordinamento dinamico.
  • Form dinamici di ingredienti/allergeni (key/name/flag).
  • Sezione nutrizionale (alcol, energia, valori per 100ml, ecc.).
  • Utilizzo di componenti list/selection (ItemListType da UI lib).

Step 3 — Legal & Sostenibilità

  • Operatori di produzione (tipo, nome, paesi).
  • Avvertenze (warnings).
  • Impressum (riutilizza ImpressumBoxComponent).
  • Certificazioni (nome, codice, data).
  • Packaging (componenti + materiali) con suggerimenti (PackagingSuggestionType).
  • Note legali per paese (legal notices) e campi localizzati (via TranslateService e utilità resolveDBLocaleFields).

Step 4 — QR & Anteprima/Export

  • Configurazione QR (Options di ngx-qrcode-styling): dimensione, colori, corner shapes (Dot/CornerSquare/CornerDot), logo opzionale, background.
  • Anteprima live e token di preview (firmato lato FE per la sola anteprima).
  • Azioni finali: salva e-label / salva nuovo lotto.
    • Il payload aggrega i valori di tutti gli step (ingredienti, nutrizionale, legal, packaging, QR, …).
    • Il salvataggio crea o aggiorna e-label e/o batch via BackendService.
    • In caso di creazione nuovo lotto: invio elabelId, etag, dati aggiornati; ritorna _id del batch/etichetta.

Navigazione wizard

  • Header con stepper (titoli localizzati).
  • Pulsanti Avanti/Indietro abilitati in base alla validità degli step:
    • elabelSelectVintageFormValidity$
    • elabelCreateIngredientsFormValidity$
    • elabelCreateSustainabilityFormValidity$

Interazione con Store

  • Usa USER_ACCES_SELECTORS.selectSelectedUserAccesses per contestualizzare permessi/company durante il flow.
  • Mostra/nasconde enterprise panel come la shell.

🔎 Detail Page (azioni su e-label/batch)​

File: elabel-detail.component.*

Cosa mostra

  • Header con back.
  • Informazioni principali di Wine/Vintage (immagine bottiglia, resolveVintageName, capacità/modello localizzati).
  • QR preview (config ricostruita).
  • Stato pubblicazione (ElabelStatusEnum).

Azioni tipiche

  • Publish / De-publish (pannelli modali di conferma).
  • Delete batch (pannello di conferma).
  • Navigazione a wine/vintage correlati se necessario.

Dati

  • Lettura :id da ActivatedRoute.
  • Fetch dettaglio via BackendService; form di sola lettura con FormControl e validazioni minime per inputs modificabili.

🔄 Flusso end-to-end (semplificato)​

flowchart TD
  A[Dashboard /elabel] -->|HomePage CTA| B[/dashboard/elabel/create/]
  B --> C[Step 1: lingua, wine, vintage]
  C -->|valid| D[Step 2: ingredienti & nutrizionale]
  D -->|valid| E[Step 3: legal, sostenibilità, impressum]
  E -->|valid| F[Step 4: QR style & preview]
  F -->|salva| G[POST/PUT BackendService → elabel/batch]
  G --> H{Success?}
  H -->|yes| I[/dashboard/elabel/:id (Detail)]
  H -->|no| J[Messaggio errore + retry]

  A --> K[Lista e-label + stats]
  K --> I

🔗 Dipendenze principali​

  • NgRx Store
    • AUTHENTICATION_SELECTORS → utente loggato.
    • USER_ACCES_SELECTORS → accessi, company selezionata, flag UI (es. enterprise panel).
  • ngx-qrcode-styling → rendering QR (anteprima e configurazione).
  • albi-ui → vertical tabs, list item, autocomplete, form controls, icone, ecc.
  • CDK DragDrop → ordering dinamico liste ingredienti/elementi.
  • TranslateService → etichette step e testi localizzati (IT/EN).
  • BackendService → CRUD e-label/batch, contatori/statistiche.

✅ Note operative per chi subentra​

  • Non aggirare i form del ElabelCreateFormService: è la fonte unica dei dati del wizard.
  • Ogni step valida i propri campi: abilitare “Avanti” solo quando valid.
  • Per aggiungere nuovi campi legal/sostenibilità o QR options:
    1. estendere i FormGroup nel service;
    2. aggiornare mapping nel salvataggio;
    3. rifinire UI/validazioni nello step pertinente.
  • Le azioni di publish/de-publish/delete vivono nel Detail e vanno sempre a backend.