aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/ModsMenu.vue
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2023-06-11 01:17:41 +0200
committerGitHub <noreply@github.com>2023-06-11 01:17:41 +0200
commit7254c28aaf5e890114ec5726ad4869fbab44d776 (patch)
tree12bc693794dbcf8f06e260495960014a4d68aced /src-vue/src/components/ModsMenu.vue
parentf0edbfb315304dae1386bd5a10ce7fc6bd841043 (diff)
downloadFlightCore-7254c28aaf5e890114ec5726ad4869fbab44d776.tar.gz
FlightCore-7254c28aaf5e890114ec5726ad4869fbab44d776.zip
feat: Show outdated Thunderstore mods first (#385)
* feat: add isThunderstoreModOutdated method to utils * feat: display a badge on menu if there are some outdated thunderstore mods * feat: always display outdated mods first * feat: fetch Thunderstore mods on mods view mount To display the count of outdated Thunderstore mods on mods main page, we need to fetch them. * style: Update src-vue/src/components/ModsMenu.vue * style: Update src-vue/src/utils/thunderstore/version.ts * style: Update src-vue/src/views/mods/ThunderstoreModsView.vue * docs: improve outdated mods comment * docs: add comment regarding versions ordering
Diffstat (limited to 'src-vue/src/components/ModsMenu.vue')
-rw-r--r--src-vue/src/components/ModsMenu.vue25
1 files changed, 24 insertions, 1 deletions
diff --git a/src-vue/src/components/ModsMenu.vue b/src-vue/src/components/ModsMenu.vue
index 03eea787..66ecc71a 100644
--- a/src-vue/src/components/ModsMenu.vue
+++ b/src-vue/src/components/ModsMenu.vue
@@ -9,7 +9,15 @@
<el-icon><Folder /></el-icon>
<span>{{ $t('mods.menu.local') }}</span>
</el-menu-item>
- <el-menu-item index="2" @click="$emit('showLocalMods', false)">
+
+ <!-- Display a badge if there are some outdated Thunderstore mods -->
+ <el-menu-item v-if="outdatedThunderstoreModsCount !== 0" index="2" @click="$emit('showLocalMods', false)">
+ <el-badge :value="outdatedThunderstoreModsCount" class="item" type="warning">
+ <el-icon><Connection /></el-icon>
+ <span>{{ $t('mods.menu.online') }}</span>
+ </el-badge>
+ </el-menu-item>
+ <el-menu-item v-else index="2" @click="$emit('showLocalMods', false)">
<el-icon><Connection /></el-icon>
<span>{{ $t('mods.menu.online') }}</span>
</el-menu-item>
@@ -50,6 +58,8 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { SortOptions } from '../utils/SortOptions.d';
+import { isThunderstoreModOutdated } from "../utils/thunderstore/version";
+import { ThunderstoreMod } from "../../../src-tauri/bindings/ThunderstoreMod";
export default defineComponent({
name: 'ModsMenu',
@@ -63,6 +73,11 @@ export default defineComponent({
this.$store.state.search.sortValue = this.sortValues[3].value;
},
computed: {
+ outdatedThunderstoreModsCount(): number {
+ return this.$store.state.thunderstoreMods
+ .filter((mod: ThunderstoreMod) => isThunderstoreModOutdated(mod))
+ .length;
+ },
sortValues(): { label: string, value: string }[] {
return Object.keys(SortOptions).map((key: string) => ({
value: key,
@@ -115,4 +130,12 @@ export default defineComponent({
width: 100%;
margin-top: 5px;
}
+
+/* Outdated thunderstore mods count */
+.el-badge {
+ width: 100%;
+}
+.el-badge:deep(.el-badge__content) {
+ top: 28px !important;
+}
</style>