Manager subview components

src/components/modals/CategoryFilterModal.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Vue } from "vue-property-decorator";
 
 import { Modal } from '../../components/all';
 import CategoryFilterMode from '../../model/enums/CategoryFilterMode';
@@ -100,9 +100,6 @@ import ManagerSettings from '../../r2mm/manager/ManagerSettings';
 export default class CategoryFilterModal extends Vue {
  settings: ManagerSettings = new ManagerSettings();
 
- @Prop({default: () => null})
- private onClose!: () => Promise<void>;
-
  get allowNsfw(): boolean {
  return this.$store.state.modFilters.allowNsfw;
  }
@@ -132,7 +129,6 @@ export default class CategoryFilterModal extends Vue {
  }
 
  close() {
- this.onClose();
  this.$store.commit("closeCategoryFilterModal");
  }
 

src/components/views/InstalledModView.vue

@@ -0,0 +1,69 @@
+<template>
+ <div>
+ <div v-if="localModList.length === 0" class="relative-position full-height--minus-em">
+ <div class="absolute-center text-center top">
+ <div class="margin-right">
+ <div>
+ <i class="fas fa-exclamation fa-5x"></i>
+ </div>
+ <br/>
+ <h3 class="title is-4">Looks like you don't have any mods installed</h3>
+ <h4 class="subtitle is-5">
+ Click the Online tab on the left, or click
+ <a @click="$router.push({name: 'manager.online'})">here</a>.
+ </h4>
+ </div>
+ </div>
+ </div>
+ <template v-else-if="localModList.length > 0">
+ <LocalModList
+ @error="$emit('error', $event)">
+ <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="$store.commit('openUpdateAllModsModal')">update all</a>?
+ </span>
+ <a class="float-right cursor-pointer" @click="$store.dispatch('dismissUpdateAll')">
+ <i class="fas fa-times" />
+ </a>
+ </div>
+ </div>
+ </template>
+ </LocalModList>
+ </template>
+ </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import ManifestV2 from "../../model/ManifestV2";
+import LocalModListProvider from "../../providers/components/loaders/LocalModListProvider";
+import ThunderstoreDownloaderProvider from "../../providers/ror2/downloading/ThunderstoreDownloaderProvider";
+
+@Component({
+ components: {
+ LocalModList: LocalModListProvider.provider,
+ }
+})
+
+export default class InstalledModView extends Vue {
+ get dismissedUpdateAll() {
+ return this.$store.state.dismissedUpdateAll;
+ }
+
+ get localModList(): ManifestV2[] {
+ return this.$store.state.localModList;
+ }
+
+ get numberOfModsWithUpdates(): number {
+ return ThunderstoreDownloaderProvider.instance.getLatestOfAllToUpdate(
+ this.$store.state.localModList,
+ this.$store.state.thunderstoreModList
+ ).length;
+ }
+};
+</script>

src/components/views/LocalModList.vue

@@ -208,7 +208,7 @@
 
 <script lang="ts">
 
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Vue, Watch } from 'vue-property-decorator';
 import ManifestV2 from '../../model/ManifestV2';
 import ProfileModList from '../../r2mm/mods/ProfileModList';
 import R2Error from '../../model/errors/R2Error';
@@ -247,8 +247,7 @@ import Timeout = NodeJS.Timeout;
  })
  export default class LocalModList extends Vue {
 
- @Prop({required: true})
- private settings!: ManagerSettings;
+ settings: ManagerSettings = new ManagerSettings();
 
  private cardExpanded: boolean = false;
  private darkTheme: boolean = false;
@@ -628,8 +627,9 @@ import Timeout = NodeJS.Timeout;
  }
 
  async created() {
- this.contextProfile = Profile.getActiveProfile();
  this.activeGame = GameManager.activeGame;
+ this.settings = await ManagerSettings.getSingleton(this.activeGame);
+ this.contextProfile = Profile.getActiveProfile();
  this.filterModList();
  if (this.settingsUpdateTimer !== null) {
  clearInterval(this.settingsUpdateTimer);

src/components/views/OnlineModList.vue

@@ -64,6 +64,7 @@
 import { Prop, Vue } from 'vue-property-decorator';
 import Component from 'vue-class-component';
 import ThunderstoreMod from '../../model/ThunderstoreMod';
+import GameManager from '../../model/game/GameManager';
 import ManagerSettings from '../../r2mm/manager/ManagerSettings';
 import { ExpandableCard, Link } from '../all';
 import DownloadModModal from './DownloadModModal.vue';
@@ -85,8 +86,7 @@ export default class OnlineModList extends Vue {
  @Prop()
  pagedModList!: ThunderstoreMod[];
 
- @Prop({required: true})
- private settings!: ManagerSettings;
+ settings: ManagerSettings = new ManagerSettings();
 
  private cardExpanded: boolean = false;
  private darkTheme: boolean = false;
@@ -137,7 +137,9 @@ export default class OnlineModList extends Vue {
  this.$emit('error', error);
  }
 
- created() {
+ async created() {
+ this.settings = await ManagerSettings.getSingleton(GameManager.activeGame);
+
  if (this.settingsUpdateTimer !== null) {
  clearInterval(this.settingsUpdateTimer);
  }

src/components/views/OnlineModView.vue

@@ -0,0 +1,221 @@
+<template>
+ <div>
+ <div class="inherit-background-colour sticky-top sticky-top--search non-selectable">
+ <div class="is-shadowless is-square">
+ <div class="no-padding-left card-header-title">
+ <div class="input-group input-group--flex margin-right">
+ <label for="thunderstore-search-filter">Search</label>
+ <input
+ v-model="thunderstoreSearchFilter"
+ id="thunderstore-search-filter"
+ class="input"
+ type="text"
+ placeholder="Search for a mod"
+ />
+ </div>
+ <div class="input-group margin-right">
+ <label for="thunderstore-sort">Sort</label>
+ <select v-model="sortingStyleModel"
+ id="thunderstore-sort"
+ class="select select--content-spacing margin-right margin-right--half-width"
+ >
+ <option v-for="(key) in getSortOptions()" v-bind:key="key">{{key}}</option>
+ </select>
+ <select v-model="sortingDirectionModel"
+ class="select select--content-spacing"
+ :disabled="sortingStyleModel === 'Default'"
+ >
+ <option v-for="(key) in getSortDirections()" v-bind:key="key">{{key}}</option>
+ </select>
+ </div>
+ <div class="input-group">
+ <div class="input-group input-group--flex">
+ <label for="thunderstore-category-filter">Additional filters</label>
+ <button
+ id="thunderstore-category-filter"
+ class="button"
+ @click="$store.commit('openCategoryFilterModal')"
+ >
+ Filter categories
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <OnlineModList
+ :local-mod-list="localModList"
+ :paged-mod-list="pagedThunderstoreModList"
+ @error="$emit('error', $event)"
+ />
+ <div class="in-mod-list" v-if="getPaginationSize() > 1">
+ <p class="notification margin-right">
+ Use the numbers below to change page
+ </p>
+ </div>
+ <div class="in-mod-list" v-else-if="getPaginationSize() === 0">
+ <p class="notification margin-right">
+ No mods with that name found
+ </p>
+ </div>
+ <br/>
+ <div class="pagination">
+ <div class="smaller-font">
+ <a v-for="index in getPaginationSize()" :key="`pagination-${index}`"
+ :class="['pagination-link', {'is-current': index === pageNumber}]"
+ @click="updatePageNumber(index)">
+ {{index}}
+ </a>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+import Component from "vue-class-component";
+import { Vue, Watch } from "vue-property-decorator";
+
+import CategoryFilterMode from "../../model/enums/CategoryFilterMode";
+import SortingDirection from "../../model/enums/SortingDirection";
+import SortingStyle from "../../model/enums/SortingStyle";
+import ManifestV2 from "../../model/ManifestV2";
+import ThunderstoreMod from "../../model/ThunderstoreMod";
+import OnlineModListProvider from "../../providers/components/loaders/OnlineModListProvider";
+import ArrayUtils from "../../utils/ArrayUtils";
+
+@Component({
+ components: {
+ OnlineModList: OnlineModListProvider.provider,
+ }
+})
+
+export default class OnlineModView extends Vue {
+ readonly pageSize = 140;
+ pagedThunderstoreModList: ThunderstoreMod[] = [];
+ pageNumber = 1;
+ searchableThunderstoreModList: ThunderstoreMod[] = [];
+ sortedThunderstoreModList: ThunderstoreMod[] = [];
+ sortingDirectionModel = SortingDirection.STANDARD;
+ sortingStyleModel = SortingStyle.DEFAULT;
+ thunderstoreSearchFilter = "";
+
+ get localModList(): ManifestV2[] {
+ return this.$store.state.localModList;
+ }
+
+ get thunderstoreModList(): ThunderstoreMod[] {
+ return this.$store.state.thunderstoreModList;
+ }
+
+ getPaginationSize() {
+ return Math.ceil(this.searchableThunderstoreModList.length / this.pageSize);
+ }
+
+ getSortDirections() {
+ return Object.values(SortingDirection);
+ }
+
+ getSortOptions() {
+ return Object.values(SortingStyle);
+ }
+
+ @Watch("pageNumber")
+ changePage() {
+ this.pagedThunderstoreModList = this.searchableThunderstoreModList.slice(
+ (this.pageNumber - 1) * this.pageSize,
+ this.pageNumber * this.pageSize
+ );
+ }
+
+ @Watch("thunderstoreSearchFilter")
+ onThunderstoreFilterUpdate() {
+ this.pageNumber = 1;
+ this.filterThunderstoreModList();
+ }
+
+ @Watch("$store.state.modFilters.allowNsfw")
+ @Watch("$store.state.modFilters.categoryFilterMode")
+ @Watch("$store.state.modFilters.selectedCategories")
+ filterThunderstoreModList() {
+ const allowNsfw = this.$store.state.modFilters.allowNsfw;
+ const categoryFilterMode = this.$store.state.modFilters.categoryFilterMode;
+ const filterCategories = this.$store.state.modFilters.selectedCategories;
+ const showDeprecatedPackages = this.$store.state.modFilters.showDeprecatedPackages;
+
+ const lowercaseSearchFilter = this.thunderstoreSearchFilter.toLowerCase();
+ this.searchableThunderstoreModList = this.sortedThunderstoreModList;
+ if (lowercaseSearchFilter.trim().length > 0) {
+ this.searchableThunderstoreModList = this.sortedThunderstoreModList.filter((x: ThunderstoreMod) => {
+ return x.getFullName().toLowerCase().indexOf(lowercaseSearchFilter) >= 0
+ || x.getVersions()[0].getDescription().toLowerCase().indexOf(lowercaseSearchFilter) >= 0;
+ });
+ }
+ if (!allowNsfw) {
+ this.searchableThunderstoreModList = this.searchableThunderstoreModList.filter(mod => !mod.getNsfwFlag());
+ }
+ if (!showDeprecatedPackages) {
+ this.searchableThunderstoreModList = this.searchableThunderstoreModList.filter(mod => !mod.isDeprecated());
+ }
+ if (filterCategories.length > 0) {
+ this.searchableThunderstoreModList = this.searchableThunderstoreModList.filter((x: ThunderstoreMod) => {
+ switch(categoryFilterMode) {
+ case CategoryFilterMode.OR:
+ return ArrayUtils.includesSome(x.getCategories(), filterCategories);
+ case CategoryFilterMode.AND:
+ return ArrayUtils.includesAll(x.getCategories(), filterCategories);
+ case CategoryFilterMode.EXCLUDE:
+ return !ArrayUtils.includesSome(x.getCategories(), filterCategories);
+ }
+ })
+ }
+ this.changePage();
+ }
+
+ @Watch("sortingDirectionModel")
+ @Watch("sortingStyleModel")
+ @Watch("thunderstoreModList")
+ sortThunderstoreModList() {
+ const sortDescending = this.sortingDirectionModel == SortingDirection.STANDARD;
+ const sortedList = [...this.thunderstoreModList];
+ sortedList.sort((a: ThunderstoreMod, b: ThunderstoreMod) => {
+ let result: boolean;
+ switch (this.sortingStyleModel) {
+ case SortingStyle.LAST_UPDATED:
+ result = sortDescending ? a.getDateUpdated() < b.getDateUpdated() : a.getDateUpdated() > b.getDateUpdated();
+ break;
+ case SortingStyle.ALPHABETICAL:
+ result = sortDescending ? a.getName().localeCompare(b.getName()) > 0 : a.getName().localeCompare(b.getName()) < 0;
+ break;
+ case SortingStyle.DOWNLOADS:
+ result = sortDescending ? a.getDownloadCount() < b.getDownloadCount() : a.getDownloadCount() > b.getDownloadCount();
+ break;
+ case SortingStyle.RATING:
+ result = sortDescending ? a.getRating() < b.getRating() : a.getRating() > b.getRating();
+ break;
+ case SortingStyle.DEFAULT:
+ result = true;
+ break;
+ default:
+ result = true;
+ break;
+ }
+ return result ? 1 : -1;
+ });
+ this.sortedThunderstoreModList = sortedList;
+ this.filterThunderstoreModList();
+ }
+
+ updatePageNumber(page: number) {
+ this.pageNumber = page;
+ window.scrollTo({
+ top: 0,
+ left: 0,
+ behavior: "auto"
+ });
+ }
+
+ async created() {
+ this.sortThunderstoreModList();
+ }
+};
+</script>