Form per registrare uno strumento

Questa lezione appartiene al Modulo 11 — Collegare la UI ai casi d’uso.

Obiettivo della lezione

Implementare il form HTML per registrare un nuovo strumento nel Registro e collegarlo al caso d’uso registraStrumento, rispettando il confine tra presentazione e logica applicativa.

Alla fine il form legge i dati inseriti dall’utente, li valida in modo minimo, chiama il caso d’uso e mostra un messaggio di conferma o di errore senza che il caso d’uso sappia nulla del DOM.

Perché serve nel percorso

La UI è il bordo del sistema: il suo unico compito è raccogliere input, tradurli in un comando per il caso d’uso e mostrare il risultato. Se la logica finisce nel form handler, il caso d’uso diventa inutile e il progetto torna fragile.

Nel Registro del laboratorio

Il form per registrare uno strumento deve raccogliere: nome, categoria e — opzionalmente — uno stato iniziale (di solito disponibile).

Struttura HTML:

<!-- src/presentation/formRegistraStrumento.html (o dentro index.html) -->
<form id="form-registra-strumento">
  <div>
    <label for="nome-strumento">Nome strumento</label>
    <input id="nome-strumento" name="nome" type="text" required minlength="2" maxlength="80" />
  </div>
  <div>
    <label for="categoria-strumento">Categoria</label>
    <select id="categoria-strumento" name="categoria" required>
      <option value="">— seleziona —</option>
      <option value="Elettronica">Elettronica</option>
      <option value="Misura">Misura</option>
      <option value="Informatica">Informatica</option>
      <option value="Utensile">Utensile</option>
    </select>
  </div>
  <button type="submit">Registra strumento</button>
  <p id="messaggio-registra-strumento" aria-live="polite"></p>
</form>

Handler JavaScript:

// src/presentation/formRegistraStrumento.js
import { registraStrumento } from "../application/registraStrumento.js";
import { archivioStrumenti } from "../infrastructure/archivioStrumentiLocalStorage.js";

const form = document.getElementById("form-registra-strumento");
const messaggio = document.getElementById("messaggio-registra-strumento");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const nome = form.elements["nome"].value.trim();
  const categoria = form.elements["categoria"].value;

  // Validazione UI: feedback immediato per campi vuoti
  if (!nome) {
    mostraMessaggio("Inserisci il nome dello strumento.", "errore");
    return;
  }
  if (!categoria) {
    mostraMessaggio("Seleziona una categoria.", "errore");
    return;
  }

  try {
    registraStrumento({ nome, categoria }, archivioStrumenti);
    mostraMessaggio(`Strumento "${nome}" registrato.`, "successo");
    form.reset();
  } catch (err) {
    mostraMessaggio(traduciErrore(err.message), "errore");
  }
});

function mostraMessaggio(testo, tipo) {
  messaggio.textContent = testo;
  messaggio.className = tipo; // classe CSS "successo" o "errore"
}

function traduciErrore(codice) {
  const dizionario = {
    NOME_STRUMENTO_NON_VALIDO: "Il nome dello strumento non è valido.",
    NOME_STRUMENTO_TROPPO_LUNGO: "Il nome è troppo lungo (massimo 80 caratteri).",
    CATEGORIA_NON_VALIDA: "La categoria selezionata non è valida."
  };
  return dizionario[codice] || "Si è verificato un errore. Riprova.";
}

Procedura guidata

1. Verifica che il form HTML sia presente nella pagina con gli ID corretti.
2. Verifica che registraStrumento in src/application/ esista e accetti { nome, categoria } come primo argomento.
3. Collega il file JS al form con addEventListener("submit", ...).
4. Testa il caso felice: inserisci nome e categoria, invia il form, verifica il messaggio.
5. Testa la validazione UI: invia il form con il nome vuoto — deve apparire il messaggio di errore senza chiamare il caso d’uso.
6. Testa il caso d’uso: passa un nome di 1 carattere — deve arrivare l’errore dal caso d’uso, tradotto in italiano.

Attività in classe

Il form è collegato ma manca la pulizia dopo il successo. Aggiungi questo comportamento:

• dopo una registrazione riuscita, svuota i campi (form.reset());
• dopo una registrazione riuscita, aggiorna la lista degli strumenti nella pagina (se la lista è visibile);
• dopo un errore, mantieni i valori inseriti dall’utente (non chiamare form.reset()).

Implementa il comportamento e compila la scheda:

## Form registra strumento

HTML modificato (sì/no):

JS aggiunto in:

Caso felice testato:

Caso di errore testato:

Lista aggiornata dopo il submit:

Spiegazione guidata per studiare

Il form handler ha tre responsabilità, tutte legittime per la UI:

1. Leggere l’input dall’utente (valori dei campi).
2. Chiamare il caso d’uso con i dati letti.
3. Mostrare il risultato — successo o errore tradotto.

Quello che il form handler non deve fare:

• generare l’ID dello strumento (lo fa il caso d’uso o il dominio);
• controllare se il nome è duplicato (lo fa il caso d’uso);
• scrivere direttamente in localStorage (lo fa l’infrastruttura).

Questo confine è importante perché se il form diventa la CLI, un’API REST o un’interfaccia vocale domani, il caso d’uso non cambia.

La funzione traduciErrore sta nella UI perché la traduzione dei codici tecnici in italiano leggibile è una responsabilità della presentazione, non del dominio.

Passo per passo nel progetto

1. Apri la pagina HTML del Registro e aggiungi il form con gli ID corretti.
2. Crea (o apri) src/presentation/formRegistraStrumento.js.
3. Aggiungi l’import di registraStrumento e dell’archivio.
4. Scrivi il addEventListener("submit", ...) con event.preventDefault().
5. Leggi nome e categoria dai campi, applica .trim() al testo libero.
6. Aggiungi la validazione UI per i campi vuoti prima di chiamare il caso d’uso.
7. Chiama registraStrumento nel blocco try/catch.
8. Mostra il messaggio di successo o di errore tradotto con mostraMessaggio.
9. Chiama form.reset() solo dopo il successo.

Prova di comprensione

• Perché si chiama event.preventDefault() nell’handler del submit?
• Qual è la differenza tra la validazione UI (nel form handler) e la validazione del caso d’uso?
• Chi genera l’ID del nuovo strumento — il form, il caso d’uso o il dominio?
• Dove deve stare la funzione traduciErrore — nel form, nel caso d’uso o nel dominio?

Errori da evitare

• scrivere la logica di validazione solo nell’HTML (attributi required, minlength) senza gestirla anche nel JS — l’HTML può essere aggirato;
• chiamare localStorage.setItem direttamente nel form handler invece di passare per il caso d’uso;
• mostrare il messaggio tecnico dell’errore direttamente (err.message) invece di tradurlo;
• dimenticare form.reset() dopo il successo — l’utente si ritrova i vecchi valori nel form.

Prodotto da consegnare

Il form HTML funzionante con il file JS collegato, testato per il caso felice (nome e categoria validi), per la validazione UI (campo vuoto), e per un errore del caso d’uso (nome troppo corto). Il messaggio di conferma appare nell’elemento aria-live.

Checklist di chiusura

• il form ha un elemento aria-live per i messaggi
• il submit chiama event.preventDefault()
• il form handler non scrive in localStorage direttamente
• dopo il successo il form viene svuotato
• gli errori tecnici sono tradotti in italiano leggibile
• la validazione UI precede la chiamata al caso d’uso

Risultato atteso

Ho implementato il form per registrare uno strumento in src/presentation/formRegistraStrumento.js.
Il form legge nome e categoria, chiama registraStrumento e mostra il risultato.
Ho testato il caso felice, la validazione UI e un errore del caso d'uso.
La funzione traduciErrore converte i codici tecnici in messaggi italiani.
Il prossimo passo sarebbe aggiornare la lista degli strumenti dopo ogni registrazione.