Merge pull request #881 from ebkr/downloadmodmodal-refactor

Refactor DownloadModModal

src/components/views/DownloadModModal.vue

@@ -15,7 +15,7 @@
  </div>
  <button class="modal-close is-large" aria-label="close" @click="downloadingMod = false;"></button>
  </div>
- <div id="downloadModal" :class="['modal', {'is-active':showDownloadModal}]" v-if="!updateAllMods">
+ <div id="downloadModal" :class="['modal', {'is-active': isOpen}]" v-if="thunderstoreMod !== null">
  <div class="modal-background" @click="closeModal()"></div>
  <div class="modal-content">
  <div class='card'>
@@ -68,7 +68,7 @@
  </div>
  </div>
  </div>
- <div id="updateAllModal" :class="['modal', {'is-active':showDownloadModal}]" v-if="updateAllMods">
+ <div id="updateAllModal" :class="['modal', {'is-active': isOpen}]" v-if="thunderstoreMod === null">
  <div class="modal-background" @click="closeModal()"></div>
  <div class="modal-content">
  <div class='card'>
@@ -99,7 +99,7 @@
 
 <script lang="ts">
 
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Vue, Watch } from 'vue-property-decorator';
 import ThunderstoreMod from '../../model/ThunderstoreMod';
 import ManifestV2 from '../../model/ManifestV2';
 import ThunderstoreVersion from '../../model/ThunderstoreVersion';
@@ -193,14 +193,13 @@ let assignId = 0;
  });
  }
 
- @Prop()
- thunderstoreMod: ThunderstoreMod | null = null;
-
- @Prop()
- showDownloadModal: boolean = false;
+ get thunderstoreMod(): ThunderstoreMod | null {
+ return this.$store.state.modals.downloadModModalMod;
+ }
 
- @Prop({ default: true })
- updateAllMods: boolean | undefined;
+ get isOpen(): boolean {
+ return this.$store.state.modals.isDownloadModModalOpen;
+ }
 
  get thunderstorePackages(): ThunderstoreMod[] {
  return this.$store.state.thunderstoreModList || [];
@@ -210,7 +209,7 @@ let assignId = 0;
  return this.$store.state.localModList || [];
  }
 
- @Watch('thunderstoreMod')
+ @Watch('$store.state.modals.downloadModModalMod')
  async getModVersions() {
  this.currentVersion = null;
  if (this.thunderstoreMod !== null) {
@@ -229,7 +228,7 @@ let assignId = 0;
  }
 
  closeModal() {
- this.$emit('closed-modal');
+ this.$store.commit("closeDownloadModModal");
  }
 
  downloadThunderstoreMod() {

src/components/views/LocalModList.vue

@@ -37,14 +37,6 @@
  </div>
  </div>
 
- <DownloadModModal
- :show-download-modal="manifestModAsThunderstoreMod !== null"
- :thunderstore-mod="manifestModAsThunderstoreMod"
- :update-all-mods="false"
- @closed-modal="manifestModAsThunderstoreMod = null;"
- @error="emitError($event)"
- />
-
  <Modal v-show="showingDependencyList" v-if="selectedManifestMod !== null"
  @close-modal="showingDependencyList = null" :open="showingDependencyList">
  <template v-slot:title>
@@ -280,7 +272,6 @@ import Timeout = NodeJS.Timeout;
  private searchableModList: ManifestV2[] = [];
  private showingDependencyList: boolean = false;
  private selectedManifestMod: ManifestV2 | null = null;
- private manifestModAsThunderstoreMod: ThunderstoreMod | null = null;
  private dependencyListDisplayType: string = 'view';
 
  // Filtering
@@ -586,9 +577,9 @@ import Timeout = NodeJS.Timeout;
  this.thunderstorePackages
  );
  if (mod instanceof ThunderstoreMod) {
- this.manifestModAsThunderstoreMod = mod;
+ this.$store.commit("openDownloadModModal", mod);
  } else {
- this.manifestModAsThunderstoreMod = null;
+ this.$store.commit("closeDownloadModModal");
  }
  }
 
@@ -597,7 +588,7 @@ import Timeout = NodeJS.Timeout;
  (tsMod: ThunderstoreMod) => missingDependency.toLowerCase().startsWith(tsMod.getFullName().toLowerCase() + "-")
  );
  if (mod === undefined) {
- this.manifestModAsThunderstoreMod = null;
+ this.$store.commit("closeDownloadModModal");
  const error = new R2Error(
  `${missingDependency} could not be found`,
  'You may be offline, or the mod was removed from Thunderstore.',
@@ -606,7 +597,7 @@ import Timeout = NodeJS.Timeout;
  this.$emit('error', error);
  return;
  }
- this.manifestModAsThunderstoreMod = mod;
+ this.$store.commit("openDownloadModModal", mod);
  }
 
  getTooltipText(mod: ManifestV2) {

src/components/views/OnlineModList.vue

@@ -1,13 +1,5 @@
 <template>
  <div>
- <DownloadModModal
- :show-download-modal="modToDownload !== null"
- :thunderstore-mod="modToDownload"
- :update-all-mods="false"
- @closed-modal="modToDownload = null;"
- @error="emitError($event)"
- />
-
  <ExpandableCard
  v-for='(key, index) in pagedModList' :key="`online-${key.getFullName()}-${index}-${settings.getContext().global.expandedCards}`"
  :image="key.getVersions()[0].getIcon()"
@@ -102,8 +94,6 @@ export default class OnlineModList extends Vue {
 
  private settingsUpdateTimer: Timeout | null = null;
 
- private modToDownload: ThunderstoreMod | null = null;
-
  private updatedSettings() {
  this.cardExpanded = this.settings.getContext().global.expandedCards;
  this.darkTheme = this.settings.getContext().global.darkTheme;
@@ -129,7 +119,8 @@ export default class OnlineModList extends Vue {
  }
 
  showDownloadModal(mod: any) {
- this.modToDownload = new ThunderstoreMod().fromReactive(mod);
+ const modToDownload = new ThunderstoreMod().fromReactive(mod);
+ this.$store.commit("openDownloadModModal", modToDownload);
  }
 
  getReadableDate(date: Date): string {

src/pages/Manager.vue

@@ -129,16 +129,8 @@
 
  <CategoryFilterModal :onClose="sortThunderstoreModList" />
  <LocalFileImportModal :visible="importingLocalMod" @close-modal="importingLocalMod = false" @error="showError($event)"/>
-
- <DownloadModModal
- :show-download-modal="showUpdateAllModal"
- :update-all-mods="true"
- :thunderstore-mod="null"
- @closed-modal="showUpdateAllModal = false;"
- @error="showError($event)"
- />
-
- <GameRunningModal :activeGame="activeGame" />
+ <DownloadModModal @error="showError($event)" />
+ <GameRunningModal :activeGame="activeGame" />
 
  <div class='columns' id='content'>
  <div class="column non-selectable" :class="navbarClass">
@@ -231,7 +223,7 @@
  <template v-slot:above-list v-if="numberOfModsWithUpdates > 0 && !dismissedUpdateAll">
  <div class="margin-bottom">
  <div class="notification is-warning margin-right">
- <span>You have {{ numberOfModsWithUpdates }} available mod update{{ numberOfModsWithUpdates > 1 ? "s" : ""}}. Would you like to <a @click="showUpdateAllModal = true">update all</a>?</span>
+ <span>You have {{ numberOfModsWithUpdates }} available mod update{{ numberOfModsWithUpdates > 1 ? "s" : ""}}. Would you like to <a @click="$store.commit('openUpdateAllModsModal')">update all</a>?</span>
  <a class="float-right cursor-pointer" @click="$store.dispatch('dismissUpdateAll')"><i class="fas fa-times"></i></a>
  </div>
  </div>
@@ -352,7 +344,6 @@ import GameRunningModal from '../components/modals/GameRunningModal.vue';
  showRor2IncorrectDirectoryModal: boolean = false;
  launchParametersModel: string = '';
  showLaunchParameterModal: boolean = false;
- showUpdateAllModal: boolean = false;
  showDependencyStrings: boolean = false;
 
  importingLocalMod: boolean = false;
@@ -938,7 +929,7 @@ import GameRunningModal from '../components/modals/GameRunningModal.vue';
  this.setAllModsEnabled(false);
  break;
  case "UpdateAllMods":
- this.showUpdateAllModal = true;
+ this.$store.commit("openUpdateAllModsModal");
  break;
  case "ShowDependencyStrings":
  this.showDependencyStrings = true;

src/store/modules/ModalsModule.ts

@@ -1,11 +1,17 @@
+import ThunderstoreMod from "../../model/ThunderstoreMod";
+
 interface State {
+ downloadModModalMod: ThunderstoreMod | null;
  isCategoryFilterModalOpen: boolean;
+ isDownloadModModalOpen: boolean;
  isGameRunningModalOpen: boolean;
 }
 
 export default {
  state: (): State => ({
+ downloadModModalMod: null,
  isCategoryFilterModalOpen: false,
+ isDownloadModModalOpen: false,
  isGameRunningModalOpen: false,
  }),
 
@@ -14,6 +20,11 @@ export default {
  state.isCategoryFilterModalOpen = false;
  },
 
+ closeDownloadModModal: function(state: State): void {
+ state.isDownloadModModalOpen = false;
+ state.downloadModModalMod = null;
+ },
+
  closeGameRunningModal: function(state: State): void {
  state.isGameRunningModalOpen = false;
  },
@@ -22,8 +33,18 @@ export default {
  state.isCategoryFilterModalOpen = true;
  },
 
+ openDownloadModModal: function(state: State, mod: ThunderstoreMod): void {
+ state.downloadModModalMod = mod;
+ state.isDownloadModModalOpen = true;
+ },
+
  openGameRunningModal: function(state: State): void {
  state.isGameRunningModalOpen = true;
+ },
+
+ openUpdateAllModsModal: function(state: State): void {
+ state.downloadModModalMod = null;
+ state.isDownloadModModalOpen = true;
  }
  }
 }