Add installationProgress to the Vuex store, update the value when ins…

…talling

and display it on the UI

src/components/mixins/DownloadMixin.vue

@@ -42,9 +42,9 @@ export default class DownloadMixin extends Vue {
         return this.$store.getters['profile/activeProfile'];
     }
 
-    async downloadCompletedCallback(downloadedMods: ThunderstoreCombo[]): Promise<void> {
+    async downloadCompletedCallback(downloadedMods: ThunderstoreCombo[], assignId: number): Promise<void> {
         try {
-            await installModsAndResolveConflicts(downloadedMods, this.profile.asImmutableProfile(), this.$store);
+            await installModsAndResolveConflicts(downloadedMods, this.profile.asImmutableProfile(), this.$store, assignId);
         } catch (e) {
             this.$store.commit('error/handleError', R2Error.fromThrownValue(e));
         }

src/components/profiles-modals/ImportProfileModal.vue

@@ -203,18 +203,20 @@ export default class ImportProfileModal extends mixins(ProfilesMixin) {
     async importProfile(targetProfileName: string, mods: ExportMod[], zipPath: string) {
         this.activeStep = 'PROFILE_IS_BEING_IMPORTED';
         this.importPhaseDescription = 'Downloading mods: 0%';
-        const progressCallback = (progress: number|string) => typeof progress === "number"
-            ? this.importPhaseDescription = `Downloading mods: ${Math.floor(progress)}%`
-            : this.importPhaseDescription = progress;
+        const progressCallback = (progressText: string) => this.importPhaseDescription = progressText;
         const game = this.$store.state.activeGame;
         const settings = this.$store.getters['settings'];
         const ignoreCache = settings.getContext().global.ignoreCache;
         const isUpdate = this.importUpdateSelection === 'UPDATE';
 
         try {
             const comboList = await ProfileUtils.exportModsToCombos(mods, game);
-            await ThunderstoreDownloaderProvider.instance.downloadImportedMods(comboList, ignoreCache, progressCallback);
-            await ProfileUtils.populateImportedProfile(comboList, mods, targetProfileName, isUpdate, zipPath, progressCallback);
+            await ThunderstoreDownloaderProvider.instance.downloadImportedMods(comboList, ignoreCache, (progress) => {
+                progressCallback(`Downloading mods: ${Math.floor(progress)}%`)
+            });
+            await ProfileUtils.populateImportedProfile(comboList, mods, targetProfileName, isUpdate, zipPath, (progress) => {
+                progressCallback(`Copying mods to profile: ${progress}%`)
+            });
         } catch (e) {
             await this.$store.dispatch('profiles/ensureProfileExists');
             this.closeModal();

src/components/views/DownloadModModal.vue

@@ -4,13 +4,20 @@
             <div class="modal-background" @click="setIsModProgressModalOpen(false);"></div>
             <div class='modal-content'>
                 <div class='notification is-info'>
-                    <h3 class='title'>Downloading {{$store.getters['download/currentDownload'].modName}}</h3>
-                    <p>{{Math.floor($store.getters['download/currentDownload'].downloadProgress)}}% complete</p>
+                    <h3 class='title'>Downloading and installing {{$store.getters['download/currentDownload'].modName}}</h3>
+                    <p>Downloading: {{Math.floor($store.getters['download/currentDownload'].downloadProgress)}}% complete</p>
                     <Progress
                         :max='100'
                         :value="$store.getters['download/currentDownload'].downloadProgress"
                         :className="['is-dark']"
                     />
+                    <p v-if="$store.getters['download/currentDownload'].installationProgress">Installation: {{$store.getters['download/currentDownload'].installationProgress}}% complete</p>
+                    <p v-else>Installation: waiting for download to finish</p>
+                    <Progress
+                        :max='100'
+                        :value="$store.getters['download/currentDownload'].installationProgress"
+                        :className="['is-dark']"
+                    />
                 </div>
             </div>
             <button class="modal-close is-large" aria-label="close" @click="setIsModProgressModalOpen(false);"></button>
@@ -147,7 +154,7 @@ import ProfileModList from '../../r2mm/mods/ProfileModList';
                     this.$store.commit('error/handleError', R2Error.fromThrownValue(e));
                     return;
                 }
-                await this.downloadCompletedCallback(downloadedMods);
+                await this.downloadCompletedCallback(downloadedMods, assignId);
                 this.setIsModProgressModalOpen(false);
             }, 1);
 

src/components/views/UpdateAllInstalledModsModal.vue

@@ -65,7 +65,7 @@ export default class UpdateAllInstalledModsModal extends mixins(DownloadMixin)
                 this.$store.commit('error/handleError', R2Error.fromThrownValue(e));
             }
         }, async (downloadedMods) => {
-            await this.downloadCompletedCallback(downloadedMods);
+            await this.downloadCompletedCallback(downloadedMods, assignId);
             this.setIsModProgressModalOpen(false);
         });
     }

src/store/modules/DownloadModule.ts

@@ -8,6 +8,7 @@ interface DownloadProgress {
     initialMods: string[];
     modName: string;
     downloadProgress: number;
+    installationProgress: number;
     failed: boolean;
 }
 
@@ -42,6 +43,7 @@ export const DownloadModule = {
                 initialMods,
                 modName: '',
                 downloadProgress: 0,
+                installationProgress: 0,
                 failed: false,
             };
             state.allDownloads = [...state.allDownloads, downloadObject];
@@ -52,7 +54,7 @@ export const DownloadModule = {
     getters: <GetterTree<State, RootState>>{
         activeDownloadCount(state) {
             const active = state.allDownloads.filter(
-                dl => !dl.failed && dl.downloadProgress < 100
+                dl => !dl.failed && dl.downloadProgress < 100 && dl.installationProgress < 100
             );
             return active.length;
         },

src/utils/ProfileUtils.ts

@@ -37,7 +37,7 @@ export async function exportModsToCombos(exportMods: ExportMod[], game: Game): P
 async function extractConfigsToImportedProfile(
     file: string,
     profileName: string,
-    progressCallback: (status: string) => void
+    progressCallback: (status: number) => void
 ) {
     const zipEntries = await ZipProvider.instance.getEntries(file);
     const excludedFiles = ["export.r2x", "mods.yml"];
@@ -54,17 +54,20 @@ async function extractConfigsToImportedProfile(
         }
 
         const progress = Math.floor(((index + 1) / zipEntries.length) * 100);
-        progressCallback(`Copying configs to profile: ${progress}%`);
+        progressCallback(progress);
     }
 }
 
 export async function installModsAndResolveConflicts(
     downloadedMods: ThunderstoreCombo[],
     profile: ImmutableProfile,
-    store: Store<any>
+    store: Store<any>,
+    assignId: number
 ): Promise<void> {
     await ProfileModList.requestLock(async () => {
-        const modList: ManifestV2[] = await installModsToProfile(downloadedMods, profile);
+        const modList: ManifestV2[] = await installModsToProfile(downloadedMods, profile, undefined, (installationProgress) => {
+            store.commit('download/updateDownload', {assignId, installationProgress});
+        });
         await store.dispatch('profile/updateModList', modList);
         throwForR2Error(await ConflictManagementProvider.instance.resolveConflicts(modList, profile));
     });
@@ -79,7 +82,7 @@ export async function installModsToProfile(
     comboList: ThunderstoreCombo[],
     profile: ImmutableProfile,
     disabledModsOverride?: string[],
-    progressCallback?: (status: string) => void
+    progressCallback?: (status: number) => void
 ): Promise<ManifestV2[]> {
     const profileMods = await ProfileModList.getModList(profile);
     if (profileMods instanceof R2Error) {
@@ -120,7 +123,7 @@ export async function installModsToProfile(
 
             if (typeof progressCallback === "function") {
                 const progress = Math.floor(((index + 1) / comboList.length) * 100);
-                progressCallback(`Copying mods to profile: ${progress}%`);
+                progressCallback(progress);
             }
         }
     } catch (e) {
@@ -200,8 +203,12 @@ export async function populateImportedProfile(
 
     try {
         const disabledMods = exportModList.filter((m) => !m.isEnabled()).map((m) => m.getName());
-        await installModsToProfile(comboList, profile, disabledMods, progressCallback);
-        await extractConfigsToImportedProfile(zipPath, profile.getProfileName(), progressCallback);
+        await installModsToProfile(comboList, profile, disabledMods, (progress) => {
+            progressCallback(`Copying mods to profile: ${progress}%`);
+        });
+        await extractConfigsToImportedProfile(zipPath, profile.getProfileName(), (progress) => {
+            progressCallback(`Copying configs to profile: ${progress}%`);
+        });
     } catch (e) {
         await FileUtils.recursiveRemoveDirectoryIfExists(profile.getProfilePath());
         throw e;