Use JQuery to interact with modal.

nascent-africa · Mar 16, 2021 · 62cb12d · 62cb12d
1 parent 75fb5b2
commit 62cb12d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 47 deletions.
diff --git a/stubs/inertia/resources/js/Pages/API/ApiTokenManager.vue b/stubs/inertia/resources/js/Pages/API/ApiTokenManager.vue
@@ -224,9 +224,9 @@
 
         deleteApiTokenForm: this.$inertia.form(),
 
-        displayingToken: false,
         managingPermissionsFor: null,
         apiTokenBeingDeleted: null,
+        bootstrap: null
       }
     },
 
@@ -235,22 +235,18 @@
         this.createApiTokenForm.post(route('api-tokens.store'), {
           preserveScroll: true,
           onSuccess: () => {
-            this.displayingToken = true
             this.createApiTokenForm.reset()
-
-            this.modal = new Bootstrap.Modal(document.getElementById('displayingTokenModal'))
-            this.modal.toggle()
+            this.bootstrap = $('#displayingTokenModal')
+            this.bootstrap.modal('toggle')
           }
         })
       },
 
       manageApiTokenPermissions(token) {
         this.updateApiTokenForm.permissions = token.abilities
-
         this.managingPermissionsFor = token
-
-        this.modal = new Bootstrap.Modal(document.getElementById('managingPermissionsForModal'))
-        this.modal.toggle()
+        this.bootstrap = $('#managingPermissionsForModal')
+        this.bootstrap.modal('toggle')
       },
 
       updateApiToken() {
@@ -263,9 +259,8 @@
 
       confirmApiTokenDeletion(token) {
         this.apiTokenBeingDeleted = token
-
-        this.modal = new Bootstrap.Modal(document.getElementById('apiTokenBeingDeletedModal'))
-        this.modal.toggle()
+        this.bootstrap = $('#apiTokenBeingDeletedModal')
+        this.bootstrap.modal('toggle')
       },
 
       deleteApiToken() {
@@ -274,10 +269,10 @@
           preserveState: true,
           onSuccess: () => {
             this.apiTokenBeingDeleted = null
-            this.modal.toggle()
+            this.bootstrap.modal('toggle')
           },
         })
       },
-    },
+    }
   }
 </script>
diff --git a/stubs/inertia/resources/js/Pages/Profile/DeleteUserForm.vue b/stubs/inertia/resources/js/Pages/Profile/DeleteUserForm.vue
@@ -73,9 +73,7 @@ export default {
 
   data() {
     return {
-      modal: null,
-      confirmingUserDeletion: false,
-
+      bootstrap: null,
       form: this.$inertia.form({
         password: '',
       })
@@ -86,8 +84,8 @@ export default {
     confirmUserDeletion() {
       this.form.password = '';
 
-      this.modal = new Bootstrap.Modal(document.getElementById('confirmingUserDeletionModal'))
-      this.modal.toggle()
+      this.bootstrap = $('#confirmingUserDeletionModal')
+      this.bootstrap.modal('toggle')
 
       setTimeout(() => this.$refs.password.focus(), 250)
     },
@@ -102,11 +100,9 @@ export default {
     },
 
     closeModal() {
-      this.confirmingUserDeletion = false
-
       this.form.reset()
 
-      this.modal.toggle()
+      this.bootstrap.modal('toggle')
     },
   },
 }

diff --git a/stubs/inertia/resources/js/Pages/Profile/LogoutOtherBrowserSessionsForm.vue b/stubs/inertia/resources/js/Pages/Profile/LogoutOtherBrowserSessionsForm.vue
@@ -112,8 +112,6 @@ export default {
 
   data() {
     return {
-      confirmingLogout: false,
-
       form: this.$inertia.form({
         password: '',
       })
@@ -124,8 +122,8 @@ export default {
     confirmLogout() {
       this.form.password = ''
 
-      this.modal = new Bootstrap.Modal(document.getElementById('confirmingLogoutModal'))
-      this.modal.toggle()
+      this.bootstrap = $('#confirmingLogoutModal')
+      this.bootstrap.modal('toggle')
 
       setTimeout(() => this.$refs.password.focus(), 250)
     },
@@ -140,10 +138,10 @@ export default {
     },
 
     closeModal() {
-      this.confirmingLogout = false
+      this.bootstrap.modal('toggle')
 
       this.form.reset()
     },
-  },
+  }
 }
 </script>
diff --git a/stubs/inertia/resources/js/Pages/Teams/DeleteTeamForm.vue b/stubs/inertia/resources/js/Pages/Teams/DeleteTeamForm.vue
@@ -30,7 +30,7 @@
         </template>
 
         <template #footer>
-          <jet-secondary-button data-dismiss="modal" @click="confirmingTeamDeletion = false">
+          <jet-secondary-button data-dismiss="modal">
             Cancel
           </jet-secondary-button>
 
@@ -63,8 +63,7 @@ export default {
 
   data() {
     return {
-      modal: null,
-      confirmingTeamDeletion: false,
+      bootstrap: null,
       deleting: false,
 
       form: this.$inertia.form()
@@ -73,14 +72,14 @@ export default {
 
   methods: {
     confirmTeamDeletion() {
-      this.confirmingTeamDeletion = true
-      this.modal = new Bootstrap.Modal(document.getElementById('confirmingTeamDeletionModal'))
-      this.modal.toggle()
+      this.bootstrap = $('#confirmingTeamDeletionModal')
+      this.bootstrap.modal('toggle')
     },
 
     deleteTeam() {
       this.form.delete(route('teams.destroy', this.team), {
-        errorBag: 'deleteTeam'
+        errorBag: 'deleteTeam',
+        onSuccess: () => this.bootstrap.modal('toggle')
       });
     },
   },

diff --git a/stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue b/stubs/inertia/resources/js/Pages/Teams/TeamMemberManager.vue
@@ -291,7 +291,7 @@ export default {
       managingRoleFor: null,
       confirmingLeavingTeam: false,
       teamMemberBeingRemoved: null,
-      modal: null
+      bootstrap: null
     }
   },
 
@@ -315,8 +315,8 @@ export default {
       this.updateRoleForm.role = teamMember.membership.role
       this.currentlyManagingRole = true
 
-      this.modal = new Bootstrap.Modal(document.getElementById('currentlyManagingRoleModal'))
-      this.modal.toggle()
+      this.bootstrap = $('#currentlyManagingRoleModal')
+      this.bootstrap.modal('toggle')
     },
 
     updateRole() {
@@ -328,8 +328,8 @@ export default {
 
     confirmLeavingTeam() {
       this.confirmingLeavingTeam = true
-      this.modal = new Bootstrap.Modal(document.getElementById('confirmingLeavingTeamModal'))
-      this.modal.toggle()
+      this.bootstrap = $('#confirmingLeavingTeamModal')
+      this.bootstrap.modal('toggle')
     },
 
     leaveTeam() {
@@ -340,8 +340,8 @@ export default {
 
     confirmTeamMemberRemoval(teamMember) {
       this.teamMemberBeingRemoved = teamMember
-      this.modal = new Bootstrap.Modal(document.getElementById('teamMemberBeingRemovedModal'))
-      this.modal.toggle()
+      this.bootstrap = $('#teamMemberBeingRemovedModal')
+      this.bootstrap.modal('toggle')
     },
 
     removeTeamMember() {
@@ -350,7 +350,7 @@ export default {
         preserveState: true,
       }).then(() => {
         this.teamMemberBeingRemoved = null
-        this.modal.toggle()
+        this.bootstrap.modal('toggle')
       })
     },
 

diff --git a/stubs/resources/js/bootstrap.js b/stubs/resources/js/bootstrap.js
@@ -9,11 +9,9 @@ window._ = require('lodash');
 try {
     window.Popper = require('popper.js').default;
     window.$ = window.jQuery = require('jquery');
-} catch (e) {}
-
-import * as Bootstrap from 'bootstrap'
 
-window.Bootstrap = Bootstrap;
+    require('bootstrap');
+} catch (e) {}
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests