Nodopiano Playbook

Nodopiano Lista Infermieri

Fare riferimento a vue-lista-infermieri per la parte Javascript in Vue.

Plugin di Wordpress per visualizzare la lista degli infermieri che agiscono sul territorio, insieme alla funzionalità di ricerca e alla paginazione.

Guida all'utente

Utilizzo

Per utilizzare il plugin, è sufficiente inserire lo shortcode [lista-infermieri] all'interno di una qualsiasi pagina e configurare le opzioni. NOTA: non è presente alcuno stile CSS, con lo scopo di aumentare la flessibilità dell'importazione del plugin in qualsiasi progetto.

Opzioni

Il plugin contiene una pagina di opzioni chiamata Nodopiano Lista Infermieri e che contiene le seguenti opzioni:

  • Url chiamate API: quale URL consultare per ricevere l'elenco degli infermieri
  • JSON dei campi da leggere dalla risposta delle API: quali campi leggere nella risposta delle chiamate API. Deve essere strutturato come array JSON. Ad esempio:
    [
  "name",
  "email"
]
  • JSON della traduzione dei campi: corrisponde alla traduzione dei campi specificati sopra in nomi leggibili. Deve essere strutturato come oggetto JSON. Ad esempio:
    {
  "name": "Nome e cognome",
  "email": "Indirizzo Email"
}
  • Url chiamate API delle prestazioni: quale URL consultare per ottenere l'elenco delle prestazioni degli infermieri sul territorio
  • Url chiamate API delle zone: quale URL consultare per ottenere l'elenco delle zone in cui agiscono gli infermieri sul territorio
  • Messaggio per i risultati vuoti: il messaggio da visualizzare quando la lista di risultati corrisponde ad un array vuoto
  • Barre di paginazione: quale barra di paginazione mostrare. Si possono spuntare entrambe le caselle, come nessuna.

Guida allo Sviluppo

ATTENZIONE: Questo plugin usa vue-lista-infermieri come submodule. Per clonare questo repositori e poter utilizzare il submodule, è necessario usare il comando git clone --recurse-submodules o usare consecutivamente (dopo aver clonato questo repository):

git submodule init
git submodule update

Struttura del progetto

  • np-lista-infermieri.php: è il file principale, che inizializza la classe ListaInfermieri
  • Cartella plugin-update-checker-master/: contiene il plugin che controlla la presenza di aggiornamenti del plugin
  • Cartella Templates/: contiene i templates HTML in PHP per shortcode (shortcode.php) e pagina di opzioni (options_page.php)
  • Cartella ListaInfermieri/: contiene i file per la gestione e la creazione del plugin
    • ListaInfermieri.php: gestisce la registrazione degli hook e la creazione del plugin
    • Search.php: gestisce la ricerca dei dati
    • Options.php: gestisce il passaggio delle opzioni del plugin alla vista Vue

vue-lista-infermieri

Componenti in VUE per il plugin

Questa parte del plugin è stata scritta in un repository separato per facilitarne lo sviluppo. L'istanza di Vue è divisa in tre componenti:

  • ListaInfermieri: componente principale che wrappa gli altri due componenti
  • SearchForm: componente che esegue la ricerca dei dati
  • TableList: componente che mostra i risultati della ricerca. Wrappa il componente 'vue-table-component'

ListaInfermieri

Wrappa tutta l'istanza. Prende le opzioni tramite una POST tramite axios a /wp-admin/admin-ajax.php. L'action richiesta è lista_infermieri_options, che risponde con:

  • emptyMessage: Corrisponde al messaggio da mostrare quando il risultato della ricerca è un array vuoto
  • fields: Corrisponde all'array di campi che la tabella deve mostrare dai risultati della ricerca
  • labels: Corrisponde all'oggetto che traduce i campi dell'Array fields nel nome visibile (es. { name: "Nome e cognome" })
  • services: Corrisponde all'oggetto di prestazioni degli infermieri sul territorio (es. { prestazione1: "Prestazione 1", prestazione2: "Prestazione 2" })
  • showPagination: Corrisponde all'oggetto che determina quale barra di paginazione (top e/o bottom) usare (es. { "top": true, "bottom", false })
  • workingAreas: Corrisponde all'oggetto di zone in cui agiscono gli infermieri (es. { zona1: "Zona 1", zona2: "Zona 2" })

Passa fields, labels a TableList, services e workingAreas a SearchForm. Si occupa anche di trasmettere la comunicazione della pagina selezionata e il numero di pagine tra SearchForm e PaginationBar. Se il numero di pagine massimo è 1, nasconde PaginationBar.

PaginationBar

Si occupa della selezione della pagina. Accetta le seguenti props:

  • value: La pagina selezionata, v-model
  • pages: Numero di pagine da visualizzare

Classi

  • pagination-bar: classe wrapper del componente
  • pagination-bar__button: classe dei pulsanti
  • pagination-bar__button--selected: classe del pulsante selezionato

SearchForm

Effettua la ricerca dei risultati. Si compone di tre campi di input: la ricerca per test, la selezione della zona e la selezione della prestazione. Ha le seguenti props:

  • value: Il risultato della ricerca è un v-model, per semplificare l'emissione di eventi e passagi di props
  • page: La pagina corrente (per la paginazione)
  • services: L'elenco delle prestazioni sul territorio. Si aspetta un oggetto, che internamente trasforma in un array di oggetti
  • workingAreas: L'elenco delle zone in cui è suddiviso il territorio. Si aspetta un oggetto, che internamente trasforma in un array di oggetti

Esegue al suo interno una POST tramite axios a /wp-admin/admin-ajax.php. Passa alla chiamata come request:

{
  action: 'lista_infermieri_search',
  searchFilter: this.searchFilter,
  page: this.page
}

dove this.searchFilter è un oggetto interno a SearchForm così costruito:

{
  search: '', //Stringa: corrisponde all'input di testo
  service: '', //Stringa: corrisponde alla prestrazione selezionata tra le prestazioni passate
  workingArea: '' //Stringa: corrisponde alla zona selezionata tra le zone passate
}

e page è la pagina selezionata. La chiamata API ritorna l'oggetto

{
  result: [], //Array dei risultati
  pages: 1 //Numero di pagine in cui è stato diviso il risultato
}

e emette l'evento update:pages con il nuovo numero di pagine.

Classi

  • search-form: classe wrapper del componente
  • search-form__form-group: classe del gruppo label + input del form
  • search-form__form-group__label: classe della label del gruppo form
  • search-form__form-group__input: classe dell'elemento input del gruppo form

TableList

Si occupa solo di wrappare il componente vue-table-component. Accetta le seguenti props:

  • dataList: l'array di oggetti da mostrare (il risultato della ricerca)
  • emptyMessage: il messaggio da mostrare quando dataList = []
  • fields: i campi da mostrare presenti all'interno di dataList
  • labels: l'oggetto che traduce ogni elemento dell'array fields in una label Arriva pronto ad essere responsive utilizzando il mixing scss (responsive-table)[https://gitlab.com/nodopianogit/npm-buzz/blob/master/src/scss/buzz/mixins/_responsive-tables.scss]

Classi

  • table-list: classe wrapper del componente
  • table-component: classe wrapper di vue-table-component
  • table-component__table-wrapper: classe wrapper della tabella di vue-table-component
  • table-component__table: classe della tabella
  • table-component__table__head: classe del thead della tabella
  • table-component__table__th: classe della casella th nel thead della tabella
  • table-component__th--sort: classe della casella sortabile th
  • table-component__th--sort-asc: classe della casella sortabile th se applicata la modalità asc
  • table-component__th--sort-desc: classe della casella sortabile th se applicata la modalità asc
  • table-component__table__body: classe del tbody della tabella

Estrazione dei file JS

RICHIEDE YARN INSTALLATO NEL SISTEMA

  1. Eseguire lo script extract_js.sh
  2. Copiare i file contenuti all'interno dellla cartella js_compiled dentro la cartella js del plugin di wordpress

Spostamento dei file JS

Se i progetti sono strutturati a partire dalla cartella code come previsto dallo standard Nodopiano e la cartella di sviluppo del plugin è ~/code/ipasvi/wp_html/wp-content/plugins/np-lista-infermieri, si può eseguire lo script move_to_wp.sh per spostare i file js estratti precedentemente nella cartella js del plugin.

NOTA: Utilizzo di qs all'interno del progetto

Il pacchetto NPM QS è essenziale per permettere la comunicazione tra il modulo Axios e wp-ajax. Come descritto da questo articolo, qs permette di trasformare la richiesta POST di Axios dal formato JSON a application/x-www-form-urlencoded.

// Esempio di chiamata axios strutturata per Wordpress
import qs from 'qs'

axios.post(
  '/wp-admin/admin-ajax.php',
  qs.stringify({
    action: 'my_action', //Hook di Wordpress
  })
);