Estrapolazione delle proprietà dei componenti Grazie alle fasi di progettazione UX viste nelle precedenti parti possiamo ora individuare l'elenco dei componenti, specificando per ciascuno:
Proprietà Elenco dei dati che arriveranno in ingresso al componente per la personalizzazione dello stesso Eventi Elenco dei dati inviati dal componente per comunicare con il componente genitore Slots Elenco degli spazi riempibili esternamente dal componente, per comporre l'interfaccia Componenti incorporati Elenco dei componenti che vengono usati all'interno del componente stesso Componenti globali NavBar
Nome Tipo Valore di Default Descrizione actions array({id, icon}) elenco delle azioni isBackEnabled boolean specifica se il back è abilitato title string titolo visualizzato
Nome Parametri Descrizione actionClick action click su una azione backClick click sul pulsante di back
SearchBar
Nome Tipo Valore di Default Descrizione placeholder string Search... testo placeholder value string valore del campo input
Nome Parametri Descrizione input value cambio del valore di input
Nome Tipo Valore di Default Descrizione text string Do you really want to proceed testo del dialog type string Confirm tipo di dialog (confirm, locking)
Nome Parametri Descrizione cancelClick value click sul tasto annulla deleteClick value click sul tasto elimina
SnackBar
Nome Tipo Valore di Default Descrizione text string testo del messaggio type string success tipo di messaggio (success, danger)
Nome Parametri Descrizione emitButtonClick click sul tasto
Componenti di posizionamento MainLayout
Nome Descrizione NavBar Barra di navigazione
Nome Descrizione content Contenuto principale del layout
CardContainer
Nome Descrizione content Contenuto principale della card
TextArea
Nome Tipo Valore di Default Descrizione value string valore del campo input isDisabled boolean specifica se il campo è disabilitato isError boolean specifica se è presente un errore sul campo label string testo della label del campo input
Nome Parametri Descrizione input value cambio del valore di input
Nome Tipo Valore di Default Descrizione value string valore del campo input isDisabled boolean specifica se il campo è disabilitato isError boolean specifica se è presente un errore sul campo label string testo della label del campo input
Nome Parametri Descrizione input value cambio del valore di input
TextInput
Nome Tipo Valore di Default Descrizione value string valore del campo input isDisabled boolean specifica se il campo è disabilitato isError boolean specifica se è presente un errore sul campo label string testo della label del campo input
Nome Parametri Descrizione input value cambio del valore di input
Componenti di progetto NoteList
Nome Tipo Valore di Default Descrizione isLoading boolean specifica se la lista è in fase di caricamento items array({id, title, date, description}) elementi della lista
Nome Parametri Descrizione clickItem item click su un elemento della lista
Nome Descrizione NoteListItem Elemento per visualizzare l'anteprima di una nota
NoteListItem
Nome Tipo Valore di Default Descrizione date date data della nota description string descrizione della nota title string titolo della nota
Nome Parametri Descrizione click item click sull'elemento
Nome Tipo Valore di Default Descrizione date date data della nota description string descrizione della nota title string titolo della nota
Nome Parametri Descrizione submit item submit del form
NoteDetail
Nome Tipo Valore di Default Descrizione date date data della nota description string descrizione della nota title string titolo della nota
Composizione delle pagine Terminata l'analisi dei componenti passiamo ad analizzare la composizione delle pagine dell'applicazione.
NoteIndex Nome Descrizione MainLayout Layout principale dell'applicazione NavBar Barra di navigazione principale SearchBar Barra di ricerca delle note NoteList Visualizza una lista di note PopupDialog Mostra un messaggio di notifica o di errore
NoteDetail Nome Descrizione MainLayout Layout principale dell'applicazione NavBar Barra di navigazione principale CardContainer Contenitore con stile card. NoteDetail Visualizza le informazioni di dettaglio di una nota
NoteCreate Nome Descrizione MainLayout Layout principale dell'applicazione NavBar Barra di navigazione principale CardContainer Contenitore con stile card. NoteForm Visualizza il form di una nota
NoteEdit Nome Descrizione MainLayout Layout principale dell'applicazione NavBar Barra di navigazione principale CardContainer Contenitore con stile card. NoteForm Visualizza il form di una nota
Data Layer Note Per l'entità Note individuata il relativo modello dovrà presentare i seguenti campi e sarà necessario esporre le seguenti chiamate:
Nome Tipo Valore di Default Descrizione id string id della nota date date data della nota description string descrizione della nota title string titolo della nota
Nome Parametri in ingresso Valore di Ritorno Descrizione create note oggetto nota creato crea una nuova nota delete id oggetto nota eliminato elimina la nota specificata get id oggetto nota specificato restituisce le informazioni relative ad una specifica nota list array di note lista tutte le note presenti con le relative informazioni search keyword array di note cerca tutte le note presenti nel cui titolo o descrizione è presente la keyword update id, note oggetto nota aggiornato aggiorna la nota specificata con i nuovi valori dei campi
Barra di navigazione principale.
Barra di ricerca principale.
Dialog di conferma o attesa.
Visualizza un messaggio di notifica o errore in forma di popup.
Layout principale dell'applicazione.
Contenitore con stile card.
Campo di input alfanumerico per testi estesi.
Consente di selezionare una data all'interno di un form.
Campo di input alfanumerico per testi brevi.
Visualizza una lista di note.
Visualizza l'anteprima di una nota.
Form per la compilazione di una nota.
Consente di visualizzare il dettaglio di una nota.
