ExpandableCard: access some props directly from Vuex

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,11 +14,8 @@
  :scroll-sensitivity="100">
  <local-mod-card
  v-for='(mod, index) in draggableList'
- :key="`local-${mod.getName()}-${profileName}-${index}-${cardExpanded}`"
- :mod="mod"
- :expandedByDefault="cardExpanded"
- :showSort="$store.getters['profile/canSortMods']"
- :funkyMode="funkyMode" />
+ :key="`local-${mod.getName()}-${profileName}-${index}`"
+ :mod="mod" />
  </draggable>
 
  <slot name="below-list"></slot>
@@ -32,10 +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 Profile from '../../model/Profile';
-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';
@@ -55,11 +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 draggableList() {
  return this.$store.getters['profile/visibleModList'];
@@ -90,11 +80,7 @@ import SearchAndSort from './LocalModList/SearchAndSort.vue';
  }
 
  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

@@ -21,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[] = [];
 
@@ -178,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,
  }

src/store/modules/ProfileModule.ts

@@ -18,6 +18,8 @@ import SearchUtils from '../../utils/SearchUtils';
 
 interface State {
  activeProfile: Profile | null;
+ expandedByDefault: boolean;
+ funkyMode: boolean;
  modList: ManifestV2[];
  order?: SortNaming;
  direction?: SortDirection;
@@ -33,6 +35,8 @@ export default {
 
  state: (): State => ({
  activeProfile: null,
+ expandedByDefault: false,
+ funkyMode: false,
  modList: [],
  order: undefined,
  direction: undefined,
@@ -121,6 +125,14 @@ export default {
  state.activeProfile = profile;
  },
 
+ setExpandedByDefault(state: State, value: boolean) {
+ state.expandedByDefault = value;
+ },
+
+ setFunkyMode(state: State, value: boolean) {
+ state.funkyMode = value;
+ },
+
  // Avoid calling this directly, prefer updateModList action to
  // ensure TSMM specific code gets called.
  setModList(state: State, list: ManifestV2[]) {
@@ -260,6 +272,12 @@ export default {
  return profileName;
  },
 
+ async loadModCardSettings({commit, rootGetters}) {
+ const settings: ManagerSettings = rootGetters['settings'];
+ commit('setExpandedByDefault', settings.getContext().global.expandedCards);
+ commit('setFunkyMode', settings.getContext().global.funkyModeEnabled);
+ },
+
  async loadOrderingSettings({commit, rootGetters}) {
  const settings: ManagerSettings = rootGetters['settings'];
  commit('setOrder', settings.getInstalledSortBy());