Creiamo una app con Vue ed Electron — Parte 6

Validazione dei form con un Getter Vuex, ChartJs per visualizzare i colori sulla ruota cromatica, export dei colori in JSON e SCSS .

Eccoci al nostro sesto e penultimo appuntamento, nel precedente Articolo abbiamo lavorato alla ruota cromatica e l’elenco delle palette disponibili.

In questo articolo esploreremo solo le parti più salienti del lavoro, se vuoi visualizzare il codice finale puoi trovarlo qui
https://github.com/ChiaraPassaro/colorpalettesrangeapp

Cosa Vedremo:

1. Creare un form dinamico con validazione a due livelli
2. Come creare dei Vuex getters
3. Create un componente Select
4. Utilizzare ChartJs per visualizzare i colori su un grafico a ciambella
5. Utilizzare Prismjs per formattare SCSS e Json

Page Palette Singola

Modifichiamo il nostro store in modo da raggruppare tutte le pagine nella chiave pages e aggiungiamo la chiave complementary, che conterrà la nostra palette di prova.

Nella proprietà schemas invece aggiungiamo form che ci dirà se è necessario mostrare un form di configurazione.

Modifichiamo anche la page Palette, se form è presente mostreremo il componente FormComponent.

La proprietà form sarà una computed derivata dalle impostazioni presenti nello state.

La validazione

A questo punto una sola validazione per form non è più sufficiente poiché avremo più campi con specifiche differenti, rendiamo quindi validation un array di object.

Modifichiamo anche il metodo updateValue in InputComponent per generare un emit del messaggio di errore specifico.

In FormComponent intercettiamo l’emit.

Abbiamo adesso quindi una validazione a due livelli, una per il campo singolo e una per il form.

Nel caso specifico NumberValue * Step non può essere maggiore di 140.

Non è possibile effettuare questo calcolo direttamente nello State. Ci serve quindi qualcosa che effettui il calcolo per noi ad ogni cambiamento di valore.

Aggiungiamo al form una nuova proprietà:
validation, qui inseriamo il nome della funzione che ci permetterà di fare il check sul form, e l’errore da visualizzare.

Vuex Getters

Vuex ci mette a disposizione delle funzioni Getter che servono proprio per manipolare i dati presenti nello State.

Vuex allows us to define “getters” in the store. You can think of them as computed properties for stores. Like computed properties, a getter’s result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
https://vuex.vuejs.org/guide/getters.html

Come da indicazioni sulla documentazion ufficiale di Vuex possiamo pensare ai getters come delle computed, ma agiscono sui dati presenti nello Store.
Il getter cacherà i dati fin tanto che non saranno modificati.

Creiamo anche noi un getter che effettuerà il confronto ogni volta che viene aggiornato uno dei campi del nostro form.

Effettuiamo le seguenti modifiche al nostro FormComponent:

1. Aggiungiamo una computed formOk che controlla la presenza di una validazione per quel form e in caso avvia il getter.
2. In disabled aggiungiamo al nostro confronto questo valore.
3. Aggiungiamo a data la proprietà formError che conterrà il messaggio di errore presente nello state.
4. Nel template aggiugiamo un paragrafo per visualizzare l’errore

Ci siamo, possiamo finalmente generare la palette!

Partiamo dalla mutation GeneratePalette

Per generare i colori della palette scelta abbiamo bisogno di questi dati:
1. data.page
2. data.form

Nel componente FormComponent usiamo le actions in updateState e submit.

Visualizziamo i colori generati

Il componente ColorComponent è un semplice quadrato nel quale impostiamo il bg del colore generato e mostriamo il codice.

La prop che passeremo è una istanza di colorPalettesRange.

Ritorniamo a PaletteColors e modifichiamolo per aggiungere questo componente.

Usiamo una computed per prendere i dati che abbiamo conservato nello Store grazie alla mutation generatePalette.

Schemi senza Form

Alcuni schemi non hanno bisogno di valori aggiuntivi quindi non avremo un form ma solamente un button che avvierà la mutation generatePalette.

SplitComplementary

Aggiungiamo allo Store la pagina splitComplementary.

Inseriremo una proprietà submit in cui inseriremo tutti i dati necessari per generare il bottone e per avviare la Mutation.

Nella pagina Palette nel caso non ci sia il form visualizziamo un InputComponent Button.

Al click richiamerà il metodo submit che avvierà la Action.

Componente Select

Per generare una palette Monochrome abbiamo bisogno di un nuovo tipo di componente che ci consenta di selezionare il tipo di schema desiderato saturation / brightness

Creiamo quindi il componente SelectComponent che inseriremo in FormComponent.

FormComponent aggiornato per intercettare l’emit Change della Select.

Inseriti quindi tutti gli schemi nello store aggiungendo anche la proprietà description per ogni page, possiamo passare alla realizzazione della Ruota e della lista di Colori.

Il componente Chart

Per mostrare i colori sulla ruota utilizzeremo un grafico a torta di ChartJs.

Per importare vue-chartjs
npm install vue-chartjs chart.js@2 — save

https://www.chartjs.org/

Aggiorniamo la pagina PaletteWheel che ospiterà la Chart.

Per popolare il grafico dobbiamo passare colori e label, ne creeremo 1 per grado, inserendo un colore base con luminosità e saturazione fissi, poi sostituiamo nei corrispondenti gradi i colori generati dallo schema.

Aggiungiamo info alla pagina Colors

Inseriamo nel template della pagina PaletteColors le info

Prendiamo i dati dallo Store con delle computed

Refactoring!

Facciamo un po’ di refactoring prima di passare ad una parte più interessante…

PaletteWheel

PaletteColors

JSON and SCSS highlighting and export

Eccoci giunti alla parte finale, esporteremo i nostri dati in formato JSON e SCSS e li mostreremo in pagina con formattazione e colori adeguati.

Useremo a questo scopo PrismJs
https://prismjs.com/

`npm install prismjs`
`npm install babel-plugin-prismjs`

Per far funzionare correttamente questo plugin dobbiamo impostare il file babelrc.js

JSON

Impostato il plugin con i linguaggi che ci interessano e un tema possiamo realizzare un componente JsonList per visualizzare i nostri colori in formato JSON.
Per attivare Prism inseriamo la classe “language-json” sul tag pre che ospiterà il nostro codice generato con una computed.

Il metodo Copy ci consentirà di copiare il JSON generato.

Qui una referenza della API Clipboard
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

Avviamo questo metodo sul div.button-copy

SCSS

Anche in questo caso Prismjs ci aiuterà nella formattazione.
Il template è identico, cambia solo il tipo di linguaggio class=”language-scss”.
Cambia la logica di creazione del codice SCSS, creiamo una stringa con le variabili dei colori generati nei tre metodi HSL, RGB, HEX.

Attenzione alle indentazioni!
Usiamo i backtick per assicurarci che il codice sia visualizzato con la giusta indentazione.

Recap

Cosa abbiamo visto in questo articolo:

1. Creare un form dinamico con validazione a due livelli
2. Come creare dei Vuex getters
3. Create un componente Select
4. Utilizzare ChartJs per visualizzare i colori su un grafico a ciambella
5. Utilizzare Prismjs per formattare SCSS e Json

Nel prossimo articolo concluderemo il nostro lavoro trasformando il nostro lavoro in una App desktop tramite ElectronJs!