import axios from "axios" ; import * as M from "materialize-css" ; import Vue from "vue" ; new Vue ( { computed : { hazGuitars ( ) { return this . isLoading === false && this . guitars . length > 0 ; } , noGuitars ( ) { return this . isLoading === false && this . guitars . length === 0 ; } } , data : { brand : "" , color : "" , guitars : [ ] , isLoading : true , model : "" , selectedGuitar : "" , selectedGuitarId : 0 , year : "" } , el : "#app" , methods : { addGuitar : function ( ) { const guitar = { brand : this . brand , color : this . color , model : this . model , year : this . year } ; axios . post ( "/api/guitars/add" , guitar ) . then ( ( ) => { this . $refs . year . focus ( ) ; this . brand = "" ; this . color = "" ; this . model = "" ; this . year = "" ; this . loadGuitars ( ) ; } ) . catch ( ( err ) => { console . log ( err ) ; } ) ; } , confirmDeleteGuitar : function ( id ) { const guitar = this . guitars . find ( ( g ) => g . id === id ) ; this . selectedGuitar = `${ guitar . year } ${ guitar . brand } ${ guitar . model }` ; this . selectedGuitarId = guitar . id ; const dc = this . $refs . deleteConfirm ; const modal = M . Modal . init ( dc ) ; modal . open ( ) ; } , deleteGuitar : function ( id ) { axios . delete ( `/api/guitars/remove/${ id }` ) . then ( this . loadGuitars ) . catch ( ( err ) => { console . log ( err ) ; } ) ; } , loadGuitars : function ( ) { axios . get ( "/api/guitars/all" ) . then ( ( res ) => { this . isLoading = false ; this . guitars = res . data ; } ) . catch ( ( err ) => { console . log ( err ) ; } ) ; } } , mounted : function ( ) { return this . loadGuitars ( ) ; } } ) ;