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
Barra di navigazione principale.
| 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 |
Barra di ricerca principale.
| 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 |
Dialog di conferma o attesa.
| 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 |
Visualizza un messaggio di notifica o errore in forma di popup.
| 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 |
Layout principale dell'applicazione.
| Nome | Descrizione |
|---|
| NavBar | Barra di navigazione |
| Nome | Descrizione |
|---|
| content | Contenuto principale del layout |
Contenitore con stile card.
| Nome | Descrizione |
|---|
| content | Contenuto principale della card |
Campo di input alfanumerico per testi estesi.
| 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 |
Consente di selezionare una data all'interno di un form.
| 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 |
Campo di input alfanumerico per testi brevi.
| 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 |
Visualizza una lista di note.
| 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 |
Visualizza l'anteprima di una nota.
| 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 |
Form per la compilazione di una nota.
| 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 |
Consente di visualizzare il dettaglio di una nota.
| Nome | Tipo | Valore di Default | Descrizione |
|---|
| date | date | | data della nota |
| description | string | | descrizione della nota |
| title | string | | titolo della nota |
Terminata l'analisi dei componenti passiamo ad analizzare la composizione delle pagine dell'applicazione.
| 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 |
| 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 |
| Nome | Descrizione |
|---|
| MainLayout | Layout principale dell'applicazione |
| NavBar | Barra di navigazione principale |
| CardContainer | Contenitore con stile card. |
| NoteForm | Visualizza il form di una nota |
| Nome | Descrizione |
|---|
| MainLayout | Layout principale dell'applicazione |
| NavBar | Barra di navigazione principale |
| CardContainer | Contenitore con stile card. |
| NoteForm | Visualizza il form di una nota |
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 |
%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2048%2024'%20style='enable-background:new%200%200%2048%2024;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill:%23128E8F;}%20.st1{fill:%23FFFFFF;}%20%3c/style%3e%3cpath%20class='st0'%20d='M24,24c13.3,0,24-10.7,24-24H0C0,13.3,10.7,24,24,24z'/%3e%3cpath%20class='st1'%20d='M24,15.3L18.7,10L24,4.7l1,0.9l-3.7,3.7h8.1v1.3h-8.1l3.7,3.7L24,15.3z'/%3e%3c/svg%3e)
