Replace modal mixin with modalData() for async modal components

src/components/form-draft/status.vue

@@ -41,11 +41,11 @@ except according to the terms contained in the LICENSE file.
                 </i18n-t>
                 <div id="form-draft-status-standard-buttons-container">
                   <form-version-standard-buttons :version="formDraft.get()"
-                    @view-xml="showModal('viewXml')"/>
+                    @view-xml="viewXml.show()"/>
                 </div>
                 <div>
                   <button id="form-draft-status-upload-button" type="button"
-                    class="btn btn-primary" @click="showModal('upload')">
+                    class="btn btn-primary" @click="upload.show()">
                     <span class="icon-upload"></span>{{ $t('currentDraft.action.upload') }}&hellip;
                   </button>
                 </div>
@@ -63,25 +63,24 @@ except according to the terms contained in the LICENSE file.
           </template>
           <template #body>
             <button id="form-draft-status-publish-button" type="button"
-              class="btn btn-primary" @click="showModal('publish')">
+              class="btn btn-primary" @click="publish.show()">
               <span class="icon-check"></span>{{ $t('actions.action.publish') }}&hellip;
             </button>
             <button id="form-draft-status-abandon-button" type="button"
-              class="btn btn-danger" @click="showModal('abandon')">
+              class="btn btn-danger" @click="abandon.show()">
               <span class="icon-trash"></span>{{ $t('actions.action.abandon') }}&hellip;
             </button>
           </template>
         </page-section>
       </div>
     </div>
 
-    <form-version-view-xml v-bind="viewXml" @hide="hideModal('viewXml')"/>
-    <form-new v-bind="upload" @hide="hideModal('upload')"
-      @success="afterUpload"/>
-    <form-draft-publish v-bind="publish" @hide="hideModal('publish')"
+    <form-version-view-xml v-bind="viewXml" @hide="viewXml.hide()"/>
+    <form-new v-bind="upload" @hide="upload.hide()" @success="afterUpload"/>
+    <form-draft-publish v-bind="publish" @hide="publish.hide()"
       @success="afterPublish"/>
     <form-draft-abandon v-if="form.dataExists" v-bind="abandon"
-      @hide="hideModal('abandon')" @success="afterAbandon"/>
+      @hide="abandon.hide()" @success="afterAbandon"/>
   </div>
 </template>
 
@@ -99,11 +98,11 @@ import PageSection from '../page/section.vue';
 import SummaryItem from '../summary-item.vue';
 import DatasetSummary from '../dataset/summary.vue';
 
-import modal from '../../mixins/modal';
 import useRoutes from '../../composables/routes';
 import { afterNextNavigation } from '../../util/router';
 import { apiPaths } from '../../util/request';
 import { loadAsync } from '../../util/load-async';
+import { modalData } from '../../util/reactivity';
 import { noop } from '../../util/util';
 import { useRequestData } from '../../request-data';
 
@@ -122,7 +121,6 @@ export default {
     SummaryItem,
     DatasetSummary
   },
-  mixins: [modal({ viewXml: 'FormVersionViewXml' })],
   inject: ['alert'],
   props: {
     projectId: {
@@ -146,18 +144,10 @@ export default {
   data() {
     return {
       // Modals
-      viewXml: {
-        state: false
-      },
-      upload: {
-        state: false
-      },
-      publish: {
-        state: false
-      },
-      abandon: {
-        state: false
-      }
+      viewXml: modalData('FormVersionViewXml'),
+      upload: modalData(),
+      publish: modalData(),
+      abandon: modalData()
     };
   },
   created() {
@@ -175,7 +165,7 @@ export default {
     afterUpload() {
       this.$emit('fetch-draft');
       this.formDraftDatasetDiff.reset();
-      this.hideModal('upload');
+      this.upload.hide();
       this.alert.success(this.$t('alert.upload'));
     },
     afterPublish() {

src/components/form-version/list.vue

@@ -11,10 +11,10 @@ except according to the terms contained in the LICENSE file.
 -->
 <template>
   <div>
-    <form-version-table @view-xml="showModal('viewXml')"/>
+    <form-version-table @view-xml="viewXml.show()"/>
     <loading :state="formVersions.initiallyLoading"/>
 
-    <form-version-view-xml v-bind="viewXml" @hide="hideModal('viewXml')"/>
+    <form-version-view-xml v-bind="viewXml" @hide="viewXml.hide()"/>
   </div>
 </template>
 
@@ -24,9 +24,9 @@ import { defineAsyncComponent } from 'vue';
 import FormVersionTable from './table.vue';
 import Loading from '../loading.vue';
 
-import modal from '../../mixins/modal';
 import { apiPaths } from '../../util/request';
 import { loadAsync } from '../../util/load-async';
+import { modalData } from '../../util/reactivity';
 import { noop } from '../../util/util';
 import { useRequestData } from '../../request-data';
 
@@ -37,7 +37,6 @@ export default {
     FormVersionViewXml: defineAsyncComponent(loadAsync('FormVersionViewXml')),
     Loading
   },
-  mixins: [modal({ viewXml: 'FormVersionViewXml' })],
   props: {
     projectId: {
       type: String,
@@ -54,9 +53,7 @@ export default {
   },
   data() {
     return {
-      viewXml: {
-        state: false
-      }
+      viewXml: modalData('FormVersionViewXml')
     };
   },
   created() {

src/components/form/overview.vue

@@ -14,8 +14,7 @@ except according to the terms contained in the LICENSE file.
     <div class="row">
       <div class="col-xs-6">
         <loading :state="initiallyLoading"/>
-        <form-overview-right-now v-if="dataExists"
-          @view-xml="showModal('viewXml')"/>
+        <form-overview-right-now v-if="dataExists" @view-xml="viewXml.show()"/>
       </div>
       <div v-if="formDraft.dataExists" id="form-overview-draft" class="col-xs-6">
         <page-section v-if="formDraft.isDefined()">
@@ -35,7 +34,7 @@ except according to the terms contained in the LICENSE file.
                 </i18n-t>
                 <div>
                   <form-version-standard-buttons :version="formDraft.get()"
-                    @view-xml="showModal('viewXml')"/>
+                    @view-xml="viewXml.show()"/>
                 </div>
               </template>
             </summary-item>
@@ -52,7 +51,7 @@ except according to the terms contained in the LICENSE file.
         </page-section>
       </div>
     </div>
-    <form-version-view-xml v-bind="viewXml" @hide="hideModal('viewXml')"/>
+    <form-version-view-xml v-bind="viewXml" @hide="viewXml.hide()"/>
   </div>
 </template>
 
@@ -67,11 +66,11 @@ import PageSection from '../page/section.vue';
 import SummaryItem from '../summary-item.vue';
 import Loading from '../loading.vue';
 
-import modal from '../../mixins/modal';
-import { loadAsync } from '../../util/load-async';
-import { useRequestData } from '../../request-data';
 import { apiPaths } from '../../util/request';
+import { loadAsync } from '../../util/load-async';
+import { modalData } from '../../util/reactivity';
 import { noop } from '../../util/util';
+import { useRequestData } from '../../request-data';
 
 export default {
   name: 'FormOverview',
@@ -85,7 +84,6 @@ export default {
     SummaryItem,
     Loading
   },
-  mixins: [modal({ viewXml: 'FormVersionViewXml' })],
   props: {
     projectId: {
       type: String,
@@ -102,10 +100,7 @@ export default {
   },
   data() {
     return {
-      // Modals
-      viewXml: {
-        state: false
-      }
+      viewXml: modalData('FormVersionViewXml')
     };
   },
   created() {

src/components/navbar.vue

@@ -28,7 +28,7 @@ except according to the terms contained in the LICENSE file.
           <navbar-links v-if="loggedIn"/>
           <div class="navbar-right">
             <a v-show="showsAnalyticsNotice" id="navbar-analytics-notice"
-              href="#" @click.prevent="showModal('analyticsIntroduction')">
+              href="#" @click.prevent="analyticsIntroduction.show()">
               {{ $t('analyticsNotice') }}
             </a>
             <ul class="nav navbar-nav">
@@ -41,7 +41,7 @@ except according to the terms contained in the LICENSE file.
       </div>
     </nav>
     <analytics-introduction v-if="config.showsAnalytics" v-bind="analyticsIntroduction"
-      @hide="hideModal('analyticsIntroduction')"/>
+      @hide="analyticsIntroduction.hide()"/>
   </div>
 </template>
 
@@ -53,9 +53,9 @@ import NavbarHelpDropdown from './navbar/help-dropdown.vue';
 import NavbarLinks from './navbar/links.vue';
 import NavbarLocaleDropdown from './navbar/locale-dropdown.vue';
 
-import modal from '../mixins/modal';
 import useRoutes from '../composables/routes';
 import { loadAsync } from '../util/load-async';
+import { modalData } from '../util/reactivity';
 import { useRequestData } from '../request-data';
 
 export default {
@@ -67,7 +67,6 @@ export default {
     NavbarLinks,
     NavbarLocaleDropdown
   },
-  mixins: [modal({ analyticsIntroduction: 'AnalyticsIntroduction' })],
   inject: ['config'],
   setup() {
     // The component does not assume that this data will exist when the
@@ -78,9 +77,7 @@ export default {
   },
   data() {
     return {
-      analyticsIntroduction: {
-        state: false
-      }
+      analyticsIntroduction: modalData('AnalyticsIntroduction')
     };
   },
   computed: {

src/mixins/modal.js

@@ -19,16 +19,8 @@ methods for toggling a modal.
 The component using this mixin must define a data property for each modal that
 it contains. The property should be an object that has a property named `state`
 that indicates whether the modal should be shown.
-
-If a component loads a modal component asynchronously, then when the component
-uses the mixin, it should specify the name of the modal component along with the
-name of the associated property. For example:
-
-  modal({ submissionOptions: 'ProjectSubmissionOptions' })
 */
 
-import { loadedAsync } from '../util/load-async';
-
 // @vue/component
 const mixin = {
   methods: {
@@ -41,16 +33,4 @@ const mixin = {
   }
 };
 
-const mixinForAsyncModals = (asyncModals) => ({
-  methods: {
-    showModal(name) {
-      const componentName = asyncModals[name];
-      if (componentName == null || loadedAsync(componentName))
-        this[name].state = true;
-    },
-    hideModal: mixin.methods.hideModal
-  }
-});
-
-export default (asyncModals = undefined) =>
-  (asyncModals == null ? mixin : mixinForAsyncModals(asyncModals));
+export default () => mixin;