Merge pull request #1249 from ebkr/local-mod-card

Make LocalModCard more self-sustained

src/components/ExpandableCard.vue

@@ -7,7 +7,7 @@
  <div class='card-header-icon mod-logo' v-if="image !== ''">
  <figure class='image is-48x48 image-parent'>
  <img :src='image' alt='Mod Logo' class='image-overlap'/>
- <img v-if="funkyMode" src='../assets/funky_mode.png' alt='Mod Logo' class='image-overlap'/>
+ <img v-if="$store.state.profile.funkyMode" src='../assets/funky_mode.png' alt='Mod Logo' class='image-overlap'/>
  </figure>
  </div>
  <span ref="title" class='card-header-title'><slot name='title'></slot></span>
@@ -56,21 +56,19 @@
  id: string | undefined;
 
  @Prop({default: false})
- funkyMode: boolean | undefined;
-
- @Prop({default: false})
- expandedByDefault: boolean | undefined;
-
- @Prop({default: false})
- showSort: boolean | undefined;
+ allowSorting: boolean | undefined;
 
  @Prop({default: true})
  enabled: boolean | undefined;
 
  // Keep track of visibility
  visible: boolean | undefined = false;
 
- @Watch('expandedByDefault')
+ get showSort() {
+ return this.allowSorting && this.$store.getters["profile/canSortMods"];
+ }
+
+ @Watch('$store.state.profile.expandedByDefault')
  visibilityChanged(current: boolean) {
  this.visible = current;
  }
@@ -80,7 +78,8 @@
  }
 
  async created() {
- this.visible = this.expandedByDefault;
+ await this.$store.dispatch('profile/loadModCardSettings');
+ this.visible = this.$store.state.profile.expandedByDefault;
  }
  }
 </script>

src/components/views/LocalModList.vue

@@ -14,14 +14,8 @@
  :scroll-sensitivity="100">
  <local-mod-card
  v-for='(mod, index) in draggableList'
- :key="`local-${mod.getName()}-${profileName}-${index}-${cardExpanded}`"
- :mod="mod"
- @enableMod="enableMod"
- @updateMod="updateMod"
- @downloadDependency="downloadDependency"
- :expandedByDefault="cardExpanded"
- :showSort="$store.getters['profile/canSortMods']"
- :funkyMode="funkyMode" />
+ :key="`local-${mod.getName()}-${profileName}-${index}`"
+ :mod="mod" />
  </draggable>
 
  <slot name="below-list"></slot>
@@ -35,15 +29,7 @@ import { Component, Vue } from 'vue-property-decorator';
 import ManifestV2 from '../../model/ManifestV2';
 import ProfileModList from '../../r2mm/mods/ProfileModList';
 import R2Error from '../../model/errors/R2Error';
-import ManagerSettings from '../../r2mm/manager/ManagerSettings';
-import ModBridge from '../../r2mm/mods/ModBridge';
-import Dependants from '../../r2mm/mods/Dependants';
-import ProfileInstallerProvider from '../../providers/ror2/installing/ProfileInstallerProvider';
-import { LogSeverity } from '../../providers/ror2/logging/LoggerProvider';
 import Profile from '../../model/Profile';
-import ThunderstoreMod from '../../model/ThunderstoreMod';
-import GameManager from '../../model/game/GameManager';
-import Game from '../../model/game/Game';
 import ConflictManagementProvider from '../../providers/generic/installing/ConflictManagementProvider';
 import Draggable from 'vuedraggable';
 import AssociatedModsModal from './LocalModList/AssociatedModsModal.vue';
@@ -63,15 +49,7 @@ import SearchAndSort from './LocalModList/SearchAndSort.vue';
  }
  })
  export default class LocalModList extends Vue {
- private activeGame: Game | null = null;
  private contextProfile: Profile | null = null;
- settings: ManagerSettings = new ManagerSettings();
- private cardExpanded: boolean = false;
- private funkyMode: boolean = false;
-
- get thunderstorePackages(): ThunderstoreMod[] {
- return this.$store.state.thunderstoreModList || [];
- }
 
  get draggableList() {
  return this.$store.getters['profile/visibleModList'];
@@ -101,75 +79,8 @@ import SearchAndSort from './LocalModList/SearchAndSort.vue';
  }
  }
 
- getDependencyList(mod: ManifestV2): Set<ManifestV2> {
- return Dependants.getDependencyList(mod, this.$store.state.profile.modList);
- }
-
- async enableMod(mod: ManifestV2) {
- try {
- const result = await this.performEnable([...this.getDependencyList(mod), mod]);
- if (result instanceof R2Error) {
- throw result;
- }
- } catch (e) {
- this.$store.commit('error/handleError', {
- error: R2Error.fromThrownValue(e),
- severity: LogSeverity.ACTION_STOPPED
- });
- }
- }
-
- async performEnable(mods: ManifestV2[]): Promise<R2Error | void> {
- for (let mod of mods) {
- const enableErr: R2Error | void = await ProfileInstallerProvider.instance.enableMod(mod, this.contextProfile!);
- if (enableErr instanceof R2Error) {
- this.$store.commit('error/handleError', enableErr);
- return enableErr;
- }
- }
- const updatedList = await ProfileModList.updateMods(mods, this.contextProfile!, (updatingMod: ManifestV2) => {
- updatingMod.enable();
- });
- if (updatedList instanceof R2Error) {
- this.$store.commit('error/handleError', updatedList);
- return updatedList;
- }
- await this.updateModListAfterChange(updatedList);
- }
-
- updateMod(mod: ManifestV2) {
- const tsMod = ModBridge.getCachedThunderstoreModFromMod(mod);
-
- if (tsMod instanceof ThunderstoreMod) {
- this.$store.commit("openDownloadModModal", tsMod);
- } else {
- this.$store.commit("closeDownloadModModal");
- }
- }
-
- downloadDependency(missingDependency: string) {
- const tsMod: ThunderstoreMod | undefined = this.thunderstorePackages.find(
- (m: ThunderstoreMod) => missingDependency.toLowerCase().startsWith(m.getFullName().toLowerCase() + "-")
- );
- if (tsMod === undefined) {
- this.$store.commit("closeDownloadModModal");
- const error = new R2Error(
- `${missingDependency} could not be found`,
- 'You may be offline, or the mod was removed from Thunderstore.',
- 'The dependency may not yet be published to Thunderstore and may be available elsewhere.'
- );
- this.$store.commit('error/handleError', error);
- return;
- }
- this.$store.commit("openDownloadModModal", tsMod);
- }
-
  async created() {
- this.activeGame = GameManager.activeGame;
  this.contextProfile = Profile.getActiveProfile();
- this.settings = await ManagerSettings.getSingleton(this.activeGame);
- this.cardExpanded = this.settings.getContext().global.expandedCards;
- this.funkyMode = this.settings.getContext().global.funkyModeEnabled;
  }
  }
 

src/components/views/LocalModList/LocalModCard.vue

@@ -4,6 +4,7 @@ import { ExpandableCard, Link } from '../../all';
 import DonateButton from '../../buttons/DonateButton.vue';
 import R2Error from '../../../model/errors/R2Error';
 import ManifestV2 from '../../../model/ManifestV2';
+import ThunderstoreMod from '../../../model/ThunderstoreMod';
 import { LogSeverity } from '../../../providers/ror2/logging/LoggerProvider';
 import Dependants from '../../../r2mm/mods/Dependants';
 import ModBridge from '../../../r2mm/mods/ModBridge';
@@ -20,15 +21,6 @@ export default class LocalModCard extends Vue {
  @Prop({required: true})
  readonly mod!: ManifestV2;
 
- @Prop({required: true})
- readonly expandedByDefault!: boolean;
-
- @Prop({required: true})
- readonly showSort!: boolean;
-
- @Prop({required: true})
- readonly funkyMode!: boolean;
-
  disabledDependencies: ManifestV2[] = [];
  missingDependencies: string[] = [];
 
@@ -99,8 +91,20 @@ export default class LocalModCard extends Vue {
  }
  }
 
- enableMod(mod: ManifestV2) {
- this.$emit('enableMod', mod);
+ async enableMod(mod: ManifestV2) {
+ const dependencies = Dependants.getDependencyList(mod, this.localModList);
+
+ try {
+ await this.$store.dispatch(
+ 'profile/enableModsOnActiveProfile',
+ { mods: [...dependencies, mod] }
+ );
+ } catch (e) {
+ this.$store.commit('error/handleError', {
+ error: R2Error.fromThrownValue(e),
+ severity: LogSeverity.ACTION_STOPPED
+ });
+ }
  }
 
  async uninstallMod() {
@@ -125,11 +129,26 @@ export default class LocalModCard extends Vue {
  }
 
  updateMod() {
- this.$emit('updateMod', this.mod);
+ if (this.tsMod !== undefined) {
+ this.$store.commit('openDownloadModModal', this.tsMod);
+ }
  }
 
- downloadDependency(dependency: string) {
- this.$emit('downloadDependency', dependency);
+ downloadDependency(dependencyString: string) {
+ const packages: ThunderstoreMod[] = this.$store.state.thunderstoreModList;
+ const lowerCaseName = dependencyStringToModName(dependencyString).toLowerCase();
+ const dependency = packages.find((m) => m.getFullName().toLowerCase() === lowerCaseName);
+
+ if (dependency === undefined) {
+ const error = new R2Error(
+ `${dependencyString} could not be found`,
+ 'You may be offline, or the mod was removed from Thunderstore.',
+ 'The dependency may not yet be published to Thunderstore and may be available elsewhere.'
+ );
+ this.$store.commit('error/handleError', error);
+ return;
+ }
+ this.$store.commit('openDownloadModModal', dependency);
  }
 
  viewAssociatedMods() {
@@ -150,11 +169,9 @@ function dependencyStringToModName(x: string) {
  <expandable-card
  :description="mod.getDescription()"
  :enabled="mod.isEnabled()"
- :expandedByDefault="expandedByDefault"
- :funkyMode="funkyMode"
  :id="`${mod.getAuthorName()}-${mod.getName()}-${mod.getVersionNumber()}`"
  :image="mod.getIcon()"
- :showSort="showSort">
+ :allowSorting="true">
 
  <template v-slot:title>
  <span class="non-selectable">

src/components/views/OnlineModList.vue

@@ -4,9 +4,7 @@
  v-for='(key, index) in pagedModList' :key="`online-${key.getFullName()}-${index}-${settings.getContext().global.expandedCards}`"
  :image="getImageUrl(key)"
  :id="index"
- :description="key.getVersions()[0].getDescription()"
- :funkyMode="funkyMode"
- :expandedByDefault="cardExpanded">
+ :description="key.getVersions()[0].getDescription()">
  <template v-slot:title>
  <span v-if="key.isPinned()">
  <span class="tag is-info margin-right margin-right--half-width"

src/pages/Manager.vue

@@ -139,7 +139,7 @@
 <script lang='ts'>
 import Vue from 'vue';
 import Component from 'vue-class-component';
-import { ExpandableCard, Hero, Link, Modal, Progress } from '../components/all';
+import { Hero, Link, Modal, Progress } from '../components/all';
 
 import ThunderstoreMod from '../model/ThunderstoreMod';
 import ThunderstoreCombo from '../model/ThunderstoreCombo';
@@ -182,7 +182,6 @@ import CategoryFilterModal from '../components/modals/CategoryFilterModal.vue';
  DownloadModModal,
  'hero': Hero,
  'progress-bar': Progress,
- 'ExpandableCard': ExpandableCard,
  'link-component': Link,
  'modal': Modal,
  }