feat(dialog): remove vue-modal-dialogs dep, update all dependents to …

…use stubbed useDialog hook, fix errors - vue-modal-dialogs doesn't support vue3
CrisisCleanup · Aug 5, 2022 · 57f2e71 · 57f2e71
1 parent 887656f
commit 57f2e71
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -137,7 +137,6 @@
     "vue-json-edit": "^1.4.3",
     "vue-json-viewer": "^2.2.19",
     "vue-marquee-text-component": "^1.2.0",
-    "vue-modal-dialogs": "^3.0.0",
     "vue-moment": "^4.1.0",
     "vue-native-websocket": "^2.0.14",
     "vue-numeral-filter": "^2.0.0",

diff --git a/src/components/IncidentApprovalTable.vue b/src/components/IncidentApprovalTable.vue
@@ -87,13 +87,14 @@
 </template>
 
 <script>
-import { create } from 'vue-modal-dialogs';
-import Table from '@/components/Table';
-import MessageBox from '@/components/dialogs/MessageBox';
+import Table from '@/components/Table.vue';
+import MessageBox from '@/components/dialogs/MessageBox.vue';
+import { useDialog } from '@/use/useDialogs';
 
-const messageBox = create(MessageBox);
+const messageBox = useDialog({ component: MessageBox });
 export default {
   name: 'IncidentApprovalTable',
+  // eslint-disable-next-line vue/no-reserved-component-names
   components: { Table },
   props: {
     requests: {
@@ -111,7 +112,7 @@ export default {
   methods: {
     async showContacts(request) {
       const contact = request.requested_by_contact;
-      await messageBox({
+      await messageBox.reveal({
         title: this.$t('incidentApprovalTable.requester'),
         content: `
           <div>${contact.first_name} ${contact.last_name}</div>

diff --git a/src/components/OrganizationApprovalTable.vue b/src/components/OrganizationApprovalTable.vue
@@ -81,21 +81,22 @@
 </template>
 
 <script>
-import { create } from 'vue-modal-dialogs';
-import Table from '@/components/Table';
+import Table from '@/components/Table.vue';
 import Organization from '@/models/Organization';
 import User from '@/models/User';
-import OrganizationApprovalDialog from '@/components/dialogs/OrganizationApprovalDialog';
-import MessageBox from '@/components/dialogs/MessageBox';
+import OrganizationApprovalDialog from '@/components/dialogs/OrganizationApprovalDialog.vue';
+import MessageBox from '@/components/dialogs/MessageBox.vue';
 import { DialogsMixin } from '../mixins';
 import Incident from '../models/Incident';
+import { useDialog } from '@/use/useDialogs';
 
-const messageBox = create(MessageBox);
-const responseDialog = create(OrganizationApprovalDialog);
+const messageBox = useDialog({ component: MessageBox });
+const responseDialog = useDialog({ component: OrganizationApprovalDialog });
 
 export default {
   name: 'OrganizationApprovalTable',
   mixins: [DialogsMixin],
+  // eslint-disable-next-line vue/no-reserved-component-names
   components: { Table },
   props: {
     organizations: {
@@ -139,7 +140,7 @@ export default {
     async showContacts(organization) {
       const contacts = await this.getOrganizationContacts(organization.id);
       const contact = contacts.length ? contacts[0] : null;
-      await messageBox({
+      await messageBox.reveal({
         title: this.$t('adminOrganization.organization_contact'),
         content: `
           <div>${contact.first_name} ${contact.last_name}</div>
@@ -151,7 +152,7 @@ export default {
       });
     },
     async approveOrganization(organizationId) {
-      const result = await responseDialog({
+      const result = await responseDialog.reveal({
         title: this.$t('actions.approve_organization'),
         content: this.$t('orgApprovalTable.give_approve_reason'),
       });
@@ -161,7 +162,7 @@ export default {
       }
     },
     async rejectOrganization(organizationId) {
-      const result = await responseDialog({
+      const result = await responseDialog.reveal({
         title: this.$t('actions.reject_organization'),
         content: this.$t('orgApprovalTable.give_reject_reason'),
       });

diff --git a/src/components/admin/OrganizationsTable.vue b/src/components/admin/OrganizationsTable.vue
@@ -81,17 +81,18 @@
 </template>
 
 <script>
-import { create } from 'vue-modal-dialogs';
-import Table from '@/components/Table';
+import Table from '@/components/Table.vue';
 import Organization from '@/models/Organization';
 import User from '@/models/User';
-import OrganizationApprovalDialog from '@/components/dialogs/OrganizationApprovalDialog';
+import OrganizationApprovalDialog from '@/components/dialogs/OrganizationApprovalDialog.vue';
 import { cachedGet } from '@/utils/promise';
+import { useDialog } from '@/use/useDialogs';
 
-const responseDialog = create(OrganizationApprovalDialog);
+const responseDialog = useDialog({ component: OrganizationApprovalDialog });
 
 export default {
   name: 'OrganizationsTable',
+  // eslint-disable-next-line vue/no-reserved-component-names
   components: { Table },
   props: {
     organizations: {
@@ -135,7 +136,7 @@ export default {
       return response.data.results;
     },
     async approveOrganization(organizationId) {
-      const result = await responseDialog({
+      const result = await responseDialog.reveal({
         title: this.$t('actions.approve_organization'),
         content: this.$t('orgTable.give_approve_reason'),
       });
@@ -145,7 +146,7 @@ export default {
       }
     },
     async rejectOrganization(organizationId) {
-      const result = await responseDialog({
+      const result = await responseDialog.reveal({
         title: this.$t('actions.reject_organization'),
         content: this.$t('orgTable.give_reject_reason'),
       });

diff --git a/src/components/phone/AgentBoard/Status.vue b/src/components/phone/AgentBoard/Status.vue
@@ -40,12 +40,12 @@
 import VueTypes from 'vue-types';
 import { ref } from 'vue';
 import _ from 'lodash';
-import { create } from 'vue-modal-dialogs';
 import { unwrap } from '@/utils/wrap';
 import useController from '@/use/phone/useController';
 import useContact from '@/use/phone/useContact';
 import ModelSelectInput from '@/components/forms/ModelSelectInput.vue';
 import MessageBox from '@/components/dialogs/MessageBox.vue';
+import { useDialog } from '@/use/useDialogs';
 
 export default {
   name: 'BoardStatus',
@@ -67,8 +67,8 @@ export default {
         context.root.$log.debug(
           'agent tried to end contact w/o making any changes!',
         );
-        const confirmDialog = create(MessageBox);
-        const resp = await confirmDialog({
+        const confirmDialog = useDialog({ component: MessageBox });
+        const resp = await confirmDialog.reveal({
           title: context.root.$t('phoneDashboard.are_you_sure'),
           content: context.root.$t(
             'phoneDashboard.confirm_changes_to_worksite',

diff --git a/src/components/phone/AgentCard.vue b/src/components/phone/AgentCard.vue
@@ -87,7 +87,6 @@
 </template>
 
 <script>
-import { create } from 'vue-modal-dialogs';
 import { reactive, ref, onMounted, watch, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { getModule } from 'vuex-module-decorators';
@@ -110,6 +109,7 @@ import useIncident from '@/use/worksites/useIncident';
 import { EventBus } from '@/event-bus';
 import ControllerStore from '@/store/modules/phone/controller';
 import Avatar from '@/components/Avatar.vue';
+import { useDialog } from '@/use/useDialogs';
 
 const useValidations = ({ currentUser }) => {
   const editCardState = useToggle();
@@ -222,8 +222,8 @@ export default {
       if (wasOnline) {
         await agent.value.toggleOnline(false);
       }
-      const compDialog = create(ComponentDialog);
-      const modalAction = await compDialog({
+      const compDialog = useDialog({ component: ComponentDialog });
+      const modalAction = await compDialog.reveal({
         title: context.root.$t('phoneDashboard.enter_phone_number'),
         component: OutboundDialer,
         actionText: context.root.$t('actions.dial'),

diff --git a/src/mixins/dialogs.js b/src/mixins/dialogs.js
@@ -1,15 +1,8 @@
-import { create } from 'vue-modal-dialogs';
-import MessageBox from '@/components/dialogs/MessageBox';
-import MessageResponseDialog from '@/components/dialogs/MessageResponseDialog';
-import SelectionDialog from '@/components/dialogs/SelectionDialog';
-import ComponentDialog from '@/components/dialogs/ComponentDialog';
-const confirm = create(MessageBox);
-const prompt = create(MessageResponseDialog);
-const selection = create(SelectionDialog);
-const component = create(ComponentDialog);
+import useDialogs from '@/use/useDialogs';
 
 export const DialogsMixin = {
   created() {
+    const { confirm, component, prompt, selection } = useDialogs();
     this.$confirm = confirm;
     this.$component = component;
     this.$prompt = prompt;

diff --git a/src/pages/CaseForm.vue b/src/pages/CaseForm.vue
@@ -437,25 +437,25 @@
 <script>
 import * as turf from '@turf/turf';
 import * as moment from 'moment';
-import { create } from 'vue-modal-dialogs';
 import { sortBy, uniqueId } from 'lodash';
 import Worksite from '@/models/Worksite';
 import GeocoderService from '@/services/geocoder.service';
 import { What3wordsService } from '@/services/what3words.service';
 import { getErrorMessage } from '@/utils/errors';
-import WorksiteSearchInput from '@/components/WorksiteSearchInput';
+import WorksiteSearchInput from '@/components/WorksiteSearchInput.vue';
 import Incident from '@/models/Incident';
 import { buildForm, groupBy, nest } from '@/utils/form';
-import MessageBox from '@/components/dialogs/MessageBox';
-import WorksiteImageSection from '@/components/WorksiteImageSection';
-import WorksiteReportSection from '@/components/WorksiteReportSection';
+import MessageBox from '@/components/dialogs/MessageBox.vue';
+import WorksiteImageSection from '@/components/WorksiteImageSection.vue';
+import WorksiteReportSection from '@/components/WorksiteReportSection.vue';
 import { StorageService } from '@/services/storage.service';
-import SectionHeading from '../components/SectionHeading';
+import SectionHeading from '../components/SectionHeading.vue';
 import { EventBus } from '../event-bus';
 import { ValidateMixin } from '../mixins';
-import WorksiteNotes from './WorksiteNotes';
+import WorksiteNotes from './WorksiteNotes.vue';
+import { useDialog } from '@/use/useDialogs';
 
-const messageBox = create(MessageBox);
+const messageBox = useDialog(MessageBox);
 
 const AUTO_CONTACT_FREQUENCY_OPTIONS = [
   'formOptions.often',
@@ -778,7 +778,7 @@ export default {
       const incidents = response.response.data.results;
       let result;
       if (incidents.length > 0) {
-        result = await messageBox({
+        result = await messageBox.reveal({
           title: this.$t('caseForm.incorrect_location'),
           content: this.$t('caseForm.suggested_incident', {
             incident: incidents[0].name,
@@ -796,7 +796,7 @@ export default {
           },
         });
       } else {
-        result = await messageBox({
+        result = await messageBox.reveal({
           title: this.$t('caseForm.case_outside_incident'),
           content: this.$t('caseForm.warning_case_outside_incident', {
             incident: this.currentIncident.name,

diff --git a/src/pages/Location.vue b/src/pages/Location.vue
@@ -274,18 +274,19 @@
 </template>
 
 <script>
-import { create } from 'vue-modal-dialogs';
 import Location from '@/models/Location';
 import LocationType from '@/models/LocationType';
 import Organization from '@/models/Organization';
 import Incident from '@/models/Incident';
-import LocationTool from '@/components/LocationTool';
+import LocationTool from '@/components/LocationTool.vue';
 import { forceFileDownload } from '@/utils/downloads';
 import { getErrorMessage } from '@/utils/errors';
-import MessageBox from '@/components/dialogs/MessageBox';
-const messageBox = create(MessageBox);
+import MessageBox from '@/components/dialogs/MessageBox.vue';
+import { useDialog } from '@/use/useDialogs';
+const messageBox = useDialog({ component: MessageBox });
 
 export default {
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'Location',
   components: { LocationTool },
   data() {
@@ -414,7 +415,7 @@ export default {
         this.currentLocation.name = `${this.selectedOrganization.name} ${this.currentLocation.location_type.name_t}`;
       }
       if (this.isPrimaryResponseArea && value.primary_location) {
-        const result = await messageBox({
+        const result = await messageBox.reveal({
           title: this.$t('locationVue.existing_location'),
           content: this.$t('locationVue.location_already_exists_organization', {
             organization: value.name,
@@ -452,7 +453,7 @@ export default {
           (location) => location.type === this.currentLocation.type,
         );
         if (existingLocation) {
-          const result = await messageBox({
+          const result = await messageBox.reveal({
             title: this.$t('locationVue.existing_location'),
             content: this.$t('locationVue.location_already_exists_incident', {
               incident: incident.name,

diff --git a/src/pages/organization/UserView.vue b/src/pages/organization/UserView.vue
@@ -99,15 +99,13 @@
   </div>
 </template>
 <script>
-import { create } from 'vue-modal-dialogs';
 import User from '@/models/User';
 import Role from '@/models/Role';
-import MessageBox from '@/components/dialogs/MessageBox';
-import UserEditModal from './UserEditModal';
+import MessageBox from '@/components/dialogs/MessageBox.vue';
+import UserEditModal from './UserEditModal.vue';
 import { getErrorMessage } from '../../utils/errors';
-import UserRolesSelect from '../../components/UserRolesSelect';
-
-const messageBox = create(MessageBox);
+import UserRolesSelect from '@/components/UserRolesSelect.vue';
+import { useDialog } from '@/use/useDialogs';
 
 export default {
   name: 'UserView',
@@ -141,20 +139,24 @@ export default {
       }
     },
     async orphanUser() {
-      const result = await messageBox({
-        title: this.$t('actions.remove_user'),
-        content: this.$t('userView.remove_user_warning'),
-        actions: {
-          cancel: {
-            text: this.$t('actions.cancel'),
-            buttonClass: 'px-2 py-1 mx-2 border border-black',
-          },
-          delete: {
-            text: this.$t('actions.delete'),
-            buttonClass: 'px-2 py-1 mx-2 bg-crisiscleanup-red-700 text-white',
+      const messageBox = useDialog({
+        component: MessageBox,
+        props: {
+          title: this.$t('actions.remove_user'),
+          content: this.$t('userView.remove_user_warning'),
+          actions: {
+            cancel: {
+              text: this.$t('actions.cancel'),
+              buttonClass: 'px-2 py-1 mx-2 border border-black',
+            },
+            delete: {
+              text: this.$t('actions.delete'),
+              buttonClass: 'px-2 py-1 mx-2 bg-crisiscleanup-red-700 text-white',
+            },
           },
         },
       });
+      const result = await messageBox();
       if (result === 'delete') {
         await User.api().orphan(this.selectedUser.id);
         await this.$router.push(`/organization/users`);

diff --git a/src/use/useDialogs.ts b/src/use/useDialogs.ts
@@ -1,12 +1,38 @@
-import { create } from 'vue-modal-dialogs';
+import type { Component } from 'vue';
 import MessageBox from '@/components/dialogs/MessageBox.vue';
 import MessageResponseDialog from '@/components/dialogs/MessageResponseDialog.vue';
 import SelectionDialog from '@/components/dialogs/SelectionDialog.vue';
 import ComponentDialog from '@/components/dialogs/ComponentDialog.vue';
-const confirm = create(MessageBox as any);
-const prompt = create(MessageResponseDialog as any);
-const selection = create(SelectionDialog as any);
-const component = create(ComponentDialog as any);
+
+export interface UseDialogProps {
+  component: Component;
+  props?: Record<string, unknown>;
+}
+
+export interface UseDialogReturn {
+  confirm: () => boolean;
+  cancel: () => void;
+  reveal: (...args) => any;
+}
+
+/**
+ * NOTE: This hook is stubbed out temporarily. Doesn't work!
+ * @param options
+ */
+export function useDialog(options: UseDialogProps): UseDialogReturn {
+  const { component } = options;
+  console.log(`useDialog stub for ${component.name}`);
+  return {
+    confirm: () => true,
+    cancel: () => {},
+    reveal: (...args) => null,
+  };
+}
+
+const confirm = useDialog({ component: MessageBox });
+const prompt = useDialog({ component: MessageResponseDialog });
+const selection = useDialog({ component: SelectionDialog });
+const component = useDialog({ component: ComponentDialog });
 
 export default () => {
   return {