Reorder conditional Modals in ImportProfileModal to match the UX flow

ebkr · Oct 2, 2024 · 574918b · 574918b
1 parent 2ff3703
commit 574918b
Showing 1 changed file with 16 additions and 15 deletions.
diff --git a/src/components/profiles-modals/ImportProfileModal.vue b/src/components/profiles-modals/ImportProfileModal.vue
@@ -109,7 +109,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
     // User selects importing from file from the UI.
     importProfileFromFile() {
         this.activeStep = 'IMPORT_FILE';
-        setImmediate(() => {
+        process.nextTick(() => {
             InteractionProvider.instance.selectFile({
                 title: 'Import Profile',
                 filters: [{
@@ -122,7 +122,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
                     this.closeModal();
                 }
                 this.importProfileHandler(value);
-            })
+            });
         });
     }
 
@@ -280,6 +280,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
             if (installResult instanceof R2Error) {
                 this.$store.commit('error/handleError', installResult);
                 keepIterating = false;
+                this.closeModal();
                 return;
             }
             for (const imported of modList) {
@@ -357,6 +358,15 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         </template>
     </ModalCard>
 
+    <ModalCard v-else-if="activeStep === 'IMPORT_FILE'" key="IMPORT_FILE" :is-active="isOpen" @close-modal="closeModal">
+        <template v-slot:header>
+            <h2 class="modal-title">Loading file</h2>
+        </template>
+        <template v-slot:footer>
+            <p>A file selection window will appear. Once a profile has been selected it may take a few moments.</p>
+        </template>
+    </ModalCard>
+
     <ModalCard v-else-if="activeStep === 'IMPORT_CODE'" key="IMPORT_CODE" :is-active="isOpen" @close-modal="closeModal">
         <template v-slot:header>
             <h2 class="modal-title">Enter the profile code</h2>
@@ -426,16 +436,6 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         </template>
     </ModalCard>
 
-    <ModalCard v-else-if="activeStep === 'PROFILE_IS_BEING_IMPORTED'" key="PROFILE_IS_BEING_IMPORTED" :is-active="isOpen" :canClose="false">
-        <template v-slot:header>
-            <h2 class="modal-title">{{percentageImported}}% imported</h2>
-        </template>
-        <template v-slot:footer>
-            <p>This may take a while, as mods are being downloaded.<br>
-                Please do not close {{appName}}.</p>
-        </template>
-    </ModalCard>
-
     <ModalCard v-else-if="activeStep === 'ADDING_PROFILE'" key="ADDING_PROFILE" :is-active="isOpen" @close-modal="closeModal">
         <template v-slot:header>
             <h2 v-if="importUpdateSelection === 'IMPORT'" class="modal-title">Import a profile</h2>
@@ -475,12 +475,13 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         </template>
     </ModalCard>
 
-    <ModalCard v-else-if="activeStep === 'IMPORT_FILE'" key="IMPORT_FILE" :is-active="isOpen" @close-modal="closeModal">
+    <ModalCard v-else-if="activeStep === 'PROFILE_IS_BEING_IMPORTED'" key="PROFILE_IS_BEING_IMPORTED" :is-active="isOpen" :canClose="false">
         <template v-slot:header>
-            <h2 class="modal-title">Loading file</h2>
+            <h2 class="modal-title">{{percentageImported}}% imported</h2>
         </template>
         <template v-slot:footer>
-            <p>A file selection window will appear. Once a profile has been selected it may take a few moments.</p>
+            <p>This may take a while, as mods are being downloaded.<br>
+                Please do not close {{appName}}.</p>
         </template>
     </ModalCard>
 </template>