Merge pull request #1459 from ebkr/import-modal-refactoring-continued

ImportProfileModal improvements

src/components/profiles-modals/ImportProfileModal.vue

@@ -36,12 +36,20 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
     private importUpdateSelection: "IMPORT" | "UPDATE" | null = null;
     private percentageImported: number = 0;
     private profileImportCode: string = '';
-    private isProfileBeingImported: boolean = false;
     private listenerId: number = 0;
     private newProfileName: string = '';
     private profileImportFilePath: string | null = null;
     private profileImportContent: ExportFormat | null = null;
-    private activeStep: 'IMPORT_UPDATE_SELECTION' | 'FILE_SELECTION' | 'FILE_CODE_SELECTION' | 'IMPORT_CODE' | 'IMPORT_FILE' | 'ADDING_PROFILE' | 'REVIEW_IMPORT' | 'NO_PACKAGES_IN_IMPORT' = 'IMPORT_UPDATE_SELECTION';
+    private activeStep:
+        'IMPORT_UPDATE_SELECTION'
+        | 'FILE_CODE_SELECTION'
+        | 'IMPORT_CODE'
+        | 'IMPORT_FILE'
+        | 'ADDING_PROFILE'
+        | 'REVIEW_IMPORT'
+        | 'NO_PACKAGES_IN_IMPORT'
+        | 'PROFILE_IS_BEING_IMPORTED'
+    = 'IMPORT_UPDATE_SELECTION';
 
     async created() {
         fs = FsProvider.instance;
@@ -98,25 +106,27 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
 
     // User selects importing from file from the UI.
     importProfileFromFile() {
-        this.activeStep = 'FILE_SELECTION';
-        InteractionProvider.instance.selectFile({
-            title: 'Import Profile',
-            filters: [{
-                name: "*",
-                extensions: ["r2z"]
-            }],
-            buttonLabel: 'Import'
-        }).then((value: string[]) => {
-            if(value.length === 0) {
-                this.closeModal();
-            }
-            this.importProfileHandler(value);
-        })
+        this.activeStep = 'IMPORT_FILE';
+        process.nextTick(() => {
+            InteractionProvider.instance.selectFile({
+                title: 'Import Profile',
+                filters: [{
+                    name: "*",
+                    extensions: ["r2z"]
+                }],
+                buttonLabel: 'Import'
+            }).then((value: string[]) => {
+                if (value.length === 0) {
+                    this.closeModal();
+                }
+                this.importProfileHandler(value);
+            });
+        });
     }
 
     async importProfileHandler(files: string[] | null) {
         if (files === null || files.length === 0) {
-            this.isProfileBeingImported = false;
+            this.closeModal();
             return;
         }
 
@@ -175,6 +185,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
             (async () => {
                 let profileName: string = event.detail;
                 if (profileName !== '') {
+                    this.activeStep = 'PROFILE_IS_BEING_IMPORTED';
                     if (this.importUpdateSelection === 'UPDATE') {
                         profileName = "_profile_update";
                         if (await fs.exists(path.join(Profile.getDirectory(), profileName))) {
@@ -184,7 +195,6 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
                         await this.$store.dispatch('profiles/setSelectedProfile', { profileName: profileName, prewarmCache: true });
                     }
                     if (parsed.getMods().length > 0) {
-                        this.isProfileBeingImported = true;
                         setTimeout(async () => {
                             await this.downloadImportedProfileMods(parsed.getMods(), async () => {
                                 if (files[0].endsWith('.r2z')) {
@@ -234,7 +244,6 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
     downloadProgressCallback(progress: number, modName: string, status: number, err: R2Error | null) {
         if (status == StatusEnum.FAILURE) {
             this.closeModal();
-            this.isProfileBeingImported = false;
             if (err instanceof R2Error) {
                 this.$store.commit('error/handleError', err);
             }
@@ -257,7 +266,7 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
             } catch (e) {
                 this.$store.commit('error/handleError', e);
                 keepIterating = false;
-                this.isProfileBeingImported = false;
+                this.closeModal();
                 return;
             }
 
@@ -275,7 +284,6 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         if (callback !== undefined) {
             callback();
         }
-        this.isProfileBeingImported = false;
     }
 
     // Called when the name for the imported profile is given and confirmed by the user.
@@ -337,6 +345,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>
@@ -406,16 +423,6 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
         </template>
     </ModalCard>
 
-    <ModalCard v-else-if="isProfileBeingImported" 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:body>
-            <p>This may take a while, as mods are being downloaded.</p>
-            <p>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>
@@ -455,10 +462,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">
-        <template v-slot:body>
-            <h3 class="title">Loading file</h3>
-            <p>A file selection window will appear. Once a profile has been selected it may take a few moments.</p>
+    <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>
 </template>