From 180cedf6dbc20a8e079aa7f663c7b8605a190548 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Thu, 23 Aug 2018 15:50:41 -0400
Subject: [PATCH] Add global mixin for modal

This allows the modal to be used anywhere in the component hierarchy,
rather than requiring it to be in the top level.
---
 js/index.js        | 26 ++++++--------------------
 js/mixins/modal.js | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 js/mixins/modal.js

diff --git a/js/index.js b/js/index.js
index fa8d072a..359844cc 100644
--- a/js/index.js
+++ b/js/index.js
@@ -10,9 +10,12 @@ import poc from './components/forms/poc'
 import financial from './components/forms/financial'
 import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
+import Modal from './mixins/modal'
 
 Vue.use(VTooltip)
 
+Vue.mixin(Modal)
+
 const app = new Vue({
   el: '#app-root',
   components: {
@@ -25,28 +28,11 @@ const app = new Vue({
     financial,
     NewProject
   },
-  methods: {
-    closeModal: function(name) {
-      this.modals[name] = false
-    },
-    openModal: function (name) {
-      this.modals[name] = true
-    }
-  },
-  data: function() {
-    return {
-      modals: {
-        styleguideModal: false,
-        pendingFinancialVerification: false,
-        pendingCCPOApproval: false,
-      }
-    }
-  },
   mounted: function() {
-    const modalOpen = document.querySelector("#modalOpen");
+    const modalOpen = document.querySelector("#modalOpen")
     if (modalOpen) {
-      const modal = modalOpen.getAttribute("data-modal");
-      this.modals[modal] = true;
+      const modal = modalOpen.getAttribute("data-modal")
+      this.openModal(modal)
     }
   },
   delimiters: ['!{', '}']
diff --git a/js/mixins/modal.js b/js/mixins/modal.js
new file mode 100644
index 00000000..7da9caaa
--- /dev/null
+++ b/js/mixins/modal.js
@@ -0,0 +1,20 @@
+export default {
+  methods: {
+    closeModal: function(name) {
+      this.modals[name] = false
+    },
+    openModal: function (name) {
+      this.modals[name] = true
+    }
+  },
+  data: function() {
+    return {
+      modals: {
+        styleguideModal: false,
+        newProjectConfirmation: false,
+        pendingFinancialVerification: false,
+        pendingCCPOApproval: false,
+      }
+    }
+  }
+}