this works again

zodman · zodman · commit 3f8291508404 · 2020-11-17T21:53:11.000-06:00
diff --git a/app/settings.py b/app/settings.py
@@ -53,8 +53,8 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
-    'demo.middleware.DemoMiddleware',
     'inertia.middleware.InertiaMiddleware',
+    'demo.middleware.DemoMiddleware',
 ]
 
 ROOT_URLCONF = 'app.urls'
@@ -144,3 +144,4 @@
 VERSION=2
 CSRF_COOKIE_NAME = "XSRF-TOKEN"
 CSRF_HEADER_NAME = "HTTP_X_XSRF_TOKEN"
+INERTIA_SHARE=False
diff --git a/demo/middleware.py b/demo/middleware.py
@@ -8,7 +8,7 @@ def __init__(self, get_response):
         # One-time configuration and initialization.
 
     def __call__(self, request):
-        
+
         if request.user.is_authenticated: 
             share(request, 'auth', {
                     'user':{
@@ -29,7 +29,7 @@ def __call__(self, request):
                             'id':"request.user.id",
                             'name':"request.user.username",
                         },
-                        'id': "request.user.id",
+                        'id': "none",
                         'firt_name': "request.user.first_name",
                         'last_name': "request.user.last_name",
                         'email': "request.user.email",
diff --git a/demo/static/src/Pages/Auth/Login.vue b/demo/static/src/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,
+      })
     },
   },
 }
diff --git a/demo/static/src/Pages/Contacts/Create.vue b/demo/static/src/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,
+      })
     },
   },
 }
diff --git a/demo/static/src/Pages/Contacts/Edit.vue b/demo/static/src/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?')) {
diff --git a/demo/static/src/Pages/Organizations/Create.vue b/demo/static/src/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,
+      })
     },
   },
 }
diff --git a/demo/static/src/Pages/Organizations/Edit.vue b/demo/static/src/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?')) {
diff --git a/demo/static/src/Pages/Users/Create.vue b/demo/static/src/Pages/Users/Create.vue
@@ -60,18 +60,18 @@ 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 || '')
       data.append('password', this.form.password || '')
       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,
+      })
     },
   },
 }
diff --git a/demo/static/src/Pages/Users/Edit.vue b/demo/static/src/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,16 @@ 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,
+        onFinish: () => this.sending = false,
+        onSuccess: () => {
           if (Object.keys(this.$page.errors).length === 0) {
             this.form.photo = null
             this.form.password = null
           }
-        })
+        },
+      })
     },
     destroy() {
       if (confirm('Are you sure you want to delete this user?')) {
diff --git a/demo/static/src/Shared/FlashMessages.vue b/demo/static/src/Shared/FlashMessages.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
-    <div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
+    <div v-if="$page.props.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
       <div class="flex items-center">
         <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg>
-        <div class="py-4 text-white text-sm font-medium">{{ $page.flash.success }}</div>
+        <div class="py-4 text-white text-sm font-medium">{{ $page.props.flash.success }}</div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
         <svg class="block w-2 h-2 fill-green-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
       </button>
     </div>
-    <div v-if="($page.flash.error || Object.keys($page.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
+    <div v-if="($page.props.flash.error || Object.keys($page.props.errors).length > 0) && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
       <div class="flex items-center">
         <svg class="ml-4 mr-2 flex-shrink-0 w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
-        <div v-if="$page.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.flash.error }}</div>
+        <div v-if="$page.props.flash.error" class="py-4 text-white text-sm font-medium">{{ $page.props.flash.error }}</div>
         <div v-else class="py-4 text-white text-sm font-medium">
-          <span v-if="Object.keys($page.errors).length === 1">There is one form error.</span>
-          <span v-else>There are {{ Object.keys($page.errors).length }} form errors.</span>
+          <span v-if="Object.keys($page.props.errors).length === 1">There is one form error.</span>
+          <span v-else>There are {{ Object.keys($page.props.errors).length }} form.props.errors.</span>
         </div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
@@ -33,7 +33,7 @@ export default {
     }
   },
   watch: {
-    '$page.flash': {
+    '$page.props.flash': {
       handler() {
         this.show = true
       },
diff --git a/demo/static/src/Shared/Layout.vue b/demo/static/src/Shared/Layout.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <portal-target name="dropdown" slim />
-    <div class="flex flex-col">
-      <div class="h-screen flex flex-col" @click="hideDropdownMenus">
-        <div class="md:flex flex-shrink-0">
+    <div class="md:flex md:flex-col">
+      <div class="md:h-screen md:flex md:flex-col" @click="hideDropdownMenus">
+        <div class="md:flex md:flex-shrink-0">
           <div class="bg-indigo-900 md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
             <inertia-link class="mt-1" href="/">
               <logo class="fill-white" width="120" height="28" />
@@ -16,26 +16,26 @@
             </dropdown>
           </div>
           <div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
-            <div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
+            <div class="mt-1 mr-4">{{ $page.props.auth.user.account.name }}</div>
             <dropdown class="mt-1" placement="bottom-end">
               <div class="flex items-center cursor-pointer select-none group">
                 <div class="text-gray-700 group-hover:text-indigo-600 focus:text-indigo-600 mr-1 whitespace-no-wrap">
-                  <span>{{ $page.auth.user.first_name }}</span>
-                  <span class="hidden md:inline">{{ $page.auth.user.last_name }}</span>
+                  <span>{{ $page.props.auth.user.first_name }}</span>
+                  <span class="hidden md:inline">{{ $page.props.auth.user.last_name }}</span>
                 </div>
                 <icon class="w-5 h-5 group-hover:fill-indigo-600 fill-gray-700 focus:fill-indigo-600" name="cheveron-down" />
               </div>
               <div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
-                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
+                <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users.edit', $page.props.auth.user.id)">My Profile</inertia-link>
                 <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('users')">Manage Users</inertia-link>
                 <inertia-link class="block px-6 py-2 hover:bg-indigo-500 hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
               </div>
             </dropdown>
           </div>
         </div>
-        <div class="flex flex-grow overflow-hidden">
-          <main-menu :url="url()" class="bg-indigo-800 flex-shrink-0 w-56 p-12 hidden md:block overflow-y-auto" />
-          <div class="flex-1 px-4 py-8 md:p-12 overflow-y-auto" scroll-region>
+        <div class="md:flex md:flex-grow md:overflow-hidden">
+          <main-menu :url="url()" class="hidden md:block bg-indigo-800 flex-shrink-0 w-56 p-12 overflow-y-auto" />
+          <div class="md:flex-1 px-4 py-8 md:p-12 md:overflow-y-auto" scroll-region>
             <flash-messages />
             <slot />
           </div>
diff --git a/demo/static/src/app.js b/demo/static/src/app.js
@@ -1,14 +1,16 @@
-import { InertiaApp } from '@inertiajs/inertia-vue'
+import { App, plugin } from '@inertiajs/inertia-vue'
 import Vue from 'vue'
 import axios from "axios";
 import PortalVue from 'portal-vue'
+import { InertiaProgress } from '@inertiajs/progress/src'
+
 
 axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
 Vue.config.productionTip = true;
 
-Vue.use(InertiaApp);
+Vue.use(plugin);
 Vue.use(PortalVue);
 
 let customRoute = (...args) => {
@@ -18,6 +20,8 @@ let customRoute = (...args) => {
 
 Vue.mixin({ methods: { route: customRoute } });
 
+InertiaProgress.init();
+
 const app = document.getElementById('app');
 // we are getting the initialPage from a rendered json_script
 const page = JSON.parse(document.getElementById("page").textContent);
@@ -31,6 +35,7 @@ import ContactCreate from "./Pages/Contacts/Create";
 import ContactEdit from "./Pages/Contacts/Edit";
 import Login from "./Pages/Auth/Login";
 
+
 const pages = {
   'Login': Login,
   'Index': Index,
@@ -43,7 +48,7 @@ const pages = {
 }
 
 new Vue({
-  render: h => h(InertiaApp, {
+  render: h => h(App, {
     props: {
       initialPage: page,
       resolveComponent: (name) => {
diff --git a/demo/urls.py b/demo/urls.py
@@ -28,8 +28,11 @@
 
     path('organizations/edit/<int:id>', organization_edit,
          name='organizations.edit'),
+    path('organizations/update/<int:id>', organization_edit,
+         name='organizations.update'),
     path('organizations/destroy/<int:id>', organization_edit,
          name='organizations.destroy'),
+
     path('organizations/create/', organization_create,
          name='organizations.create'),
     path('organizations/store/', organization_create,
diff --git a/package.json b/package.json
@@ -23,8 +23,9 @@
   "license": "ISC",
   "dependencies": {
     "@babel/core": "^7.12.3",
-    "@inertiajs/inertia": "^0.6.2",
+    "@inertiajs/inertia": "^0.6.0",
     "@inertiajs/inertia-vue": "^0.4.2",
+    "@inertiajs/progress": "^0.2.2",
     "@vue/component-compiler-utils": "^3.2.0",
     "autoprefixer": "^9.8.6",
     "axios": "^0.21.0",
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -29,4 +29,7 @@ module.exports = {
     zIndex: ['responsive', 'focus'],
   },
   plugins: [],
+  purge: {
+      content: ['./demo/static/src/**/*.vue']
+  }
 }
