Merge pull request #84 from claudiodekker/master

Align implementation with Inertia.js 0.3.0

package.json

@@ -11,8 +11,9 @@
     },
     "dependencies": {
         "@fullhuman/postcss-purgecss": "^1.3.0",
-        "@inertiajs/inertia": "^0.1.7",
-        "@inertiajs/inertia-vue": "^0.1.2",
+        "@inertiajs/inertia": "^0.3.1",
+        "@inertiajs/inertia-vue": "^0.2.3",
+        "@inertiajs/progress": "^0.1.0",
         "cross-env": "^5.2.1",
         "eslint": "^5.16.0",
         "eslint-plugin-vue": "^5.2.3",

resources/js/Pages/Auth/Login.vue

@@ -49,12 +49,16 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-      this.$inertia.post(this.route('login.attempt'), {
+      const data = {
         email: this.form.email,
         password: this.form.password,
         remember: this.form.remember,
-      }).then(() => this.sending = false)
+      }
+
+      this.$inertia.post(this.route('login.attempt'), data, {
+        onStart: () => this.sending = true,
+        onFinish: () => this.sending = false,
+      })
     },
   },
 }

resources/js/Pages/Contacts/Create.vue

@@ -71,9 +71,10 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-      this.$inertia.post(this.route('contacts.store'), this.form)
-        .then(() => this.sending = false)
+      this.$inertia.post(this.route('contacts.store'), this.form, {
+        onStart: () => this.sending = true,
+        onFinish: () => this.sending = false,
+      })
     },
   },
 }

resources/js/Pages/Contacts/Edit.vue

@@ -83,9 +83,10 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-      this.$inertia.put(this.route('contacts.update', this.contact.id), this.form)
-        .then(() => this.sending = false)
+      this.$inertia.put(this.route('contacts.update', this.contact.id), this.form, {
+        onStart: () => this.sending = true,
+        onFinish: () => this.sending = false,
+      })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this contact?')) {

resources/js/Pages/Organizations/Create.vue

@@ -63,9 +63,10 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-      this.$inertia.post(this.route('organizations.store'), this.form)
-        .then(() => this.sending = false)
+      this.$inertia.post(this.route('organizations.store'), this.form, {
+        onStart: () => this.sending = true,
+        onFinish: () => this.sending = false,
+      })
     },
   },
 }

resources/js/Pages/Organizations/Edit.vue

@@ -111,9 +111,10 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-      this.$inertia.put(this.route('organizations.update', this.organization.id), this.form)
-        .then(() => this.sending = false)
+      this.$inertia.put(this.route('organizations.update', this.organization.id), this.form, {
+        onStart: () => this.sending = true,
+        onFinish: () => this.sending = false,
+      })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this organization?')) {

resources/js/Pages/Users/Create.vue

@@ -60,9 +60,7 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-
-      var data = new FormData()
+      const data = new FormData()
       data.append('first_name', this.form.first_name || '')
       data.append('last_name', this.form.last_name || '')
       data.append('email', this.form.email || '')
@@ -70,8 +68,10 @@ export default {
       data.append('owner', this.form.owner ? '1' : '0')
       data.append('photo', this.form.photo || '')
 
-      this.$inertia.post(this.route('users.store'), data)
-        .then(() => this.sending = false)
+      this.$inertia.post(this.route('users.store'), data, {
+        onStart: () => this.sending = true,
+        onFinish: () => this.sending = false,
+      })
     },
   },
 }

resources/js/Pages/Users/Edit.vue

@@ -75,8 +75,6 @@ export default {
   },
   methods: {
     submit() {
-      this.sending = true
-
       var data = new FormData()
       data.append('first_name', this.form.first_name || '')
       data.append('last_name', this.form.last_name || '')
@@ -86,14 +84,18 @@ export default {
       data.append('photo', this.form.photo || '')
       data.append('_method', 'put')
 
-      this.$inertia.post(this.route('users.update', this.user.id), data)
-        .then(() => {
-          this.sending = false
+      this.$inertia.post(this.route('users.update', this.user.id), data, {
+        onStart: () => this.sending = true,
+        onSuccess: () => {
           if (Object.keys(this.$page.errors).length === 0) {
             this.form.photo = null
             this.form.password = null
           }
-        })
+        },
+        onFinish: () => {
+          this.sending = false
+        },
+      })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this user?')) {

resources/js/app.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueMeta from 'vue-meta'
 import PortalVue from 'portal-vue'
 import { InertiaApp } from '@inertiajs/inertia-vue'
+import { InertiaProgress } from '@inertiajs/progress/src'
 
 Vue.config.productionTip = false
 Vue.mixin({ methods: { route: window.route } })
@@ -9,6 +10,8 @@ Vue.use(InertiaApp)
 Vue.use(PortalVue)
 Vue.use(VueMeta)
 
+InertiaProgress.init()
+
 let app = document.getElementById('app')
 
 new Vue({