/* global Vue, axios */ var studentListApi = '//localhost:8080/api/students'; var studentApi = ({id}) => `//localhost:8080/api/students/${id}`; const app = Vue.createApp({ // bind dataStore variables to models computed: Vuex.mapState({ student: 'selectedStudent', mode: 'mode', editing: state => state.mode == Modes.EDIT }), mounted() { // If user hits the back button at the wrong time then the view page can end up displaying an empty student. // If this is the case then restore the old student. if(location.pathname.split('/').pop() == 'view.html' && !this.student.id) { dataStore.commit('view', dataStore.state.oldStudent) } }, methods: { save() { if (this.mode == Modes.EDIT) { // send PUT request to service to update student axios.put(studentApi({id: this.student.id}), this.student) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } else { // send POST request to service to create student axios.post(studentListApi, this.student) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } }, edit() { dataStore.commit('edit', this.student); window.location = 'add.html'; }, remove() { // send DELETE request to service to delete student axios.delete(studentApi({id: this.student.id})) .then(() => { window.location = 'list.html'; }) .catch(error => { console.error(error); alert("An error occurred - check the console for details."); }); } } }); // import data store import { dataStore, Modes } from './data-store.js' app.use(dataStore); // import page header component import { PageHeader } from './page-header.js'; app.component('pageheader', PageHeader); app.mount('#content');