From dfbf3aebde6cf024e6b6cd87d58af239cf3d63dc Mon Sep 17 00:00:00 2001
From: Rémy Raes <contact@remyraes.com>
Date: Thu, 8 Jun 2023 01:53:46 +0200
Subject: fix: Don't show deprecated mods (#382)

* fix: don't show deprecated mods
* feat: add setting to settings view
* feat: display deprecated mod cards in red
---
 src-vue/src/components/ThunderstoreModCard.vue  | 15 ++++++++++++++-
 src-vue/src/i18n/lang/en.json                   |  3 +++
 src-vue/src/plugins/modules/search.ts           |  2 +-
 src-vue/src/views/SettingsView.vue              | 20 ++++++++++++++++++++
 src-vue/src/views/mods/ThunderstoreModsView.vue |  5 ++++-
 5 files changed, 42 insertions(+), 3 deletions(-)

(limited to 'src-vue')

diff --git a/src-vue/src/components/ThunderstoreModCard.vue b/src-vue/src/components/ThunderstoreModCard.vue
index a0e8c481..c25b19a2 100644
--- a/src-vue/src/components/ThunderstoreModCard.vue
+++ b/src-vue/src/components/ThunderstoreModCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-card :body-style="{ padding: '0px' }">
+    <el-card :body-style="getBodyStyle" :style="getCardStyle">
         <img
             :src="latestVersion.icon"
             class="image"
@@ -89,6 +89,14 @@ export default defineComponent({
         isBeingUpdated: false
     }),
     computed: {
+        getBodyStyle(): Object {
+            return this.mod.is_deprecated ? { 'background-color': 'rgba(255, 0, 0, 0.42)' } : {};
+        },
+
+        getCardStyle(): Object {
+            return this.mod.is_deprecated ? { 'border': '1px solid red' } : {};
+        },
+
         latestVersion(): ThunderstoreModVersion {
             return this.mod.versions[0];
         },
@@ -264,6 +272,11 @@ export default defineComponent({
     display: inline-block;
     max-width: 178px;
     margin: 5px;
+    --el-card-padding: 0;
+}
+
+.deprecated {
+    background-color: red !important;
 }
 
 .author {
diff --git a/src-vue/src/i18n/lang/en.json b/src-vue/src/i18n/lang/en.json
index db2308e2..202d7bdd 100644
--- a/src-vue/src/i18n/lang/en.json
+++ b/src-vue/src/i18n/lang/en.json
@@ -106,6 +106,9 @@
         "enable_test_channels": "Enable testing release channels",
         "dev_mode_enabled_title": "Watch out!",
         "dev_mode_enabled_text": "Developer mode enabled.",
+        "show_deprecated_mods": "Show deprecated Thunderstore mods",
+        "show_deprecated_mods_desc1": "This allows you to see deprecated mods in the online mods collection.",
+        "show_deprecated_mods_desc2": "Watch out, such mods are usually deprecated for a good reason.",
 
         "repair": {
             "title": "Repair",
diff --git a/src-vue/src/plugins/modules/search.ts b/src-vue/src/plugins/modules/search.ts
index 16260387..e590b94b 100644
--- a/src-vue/src/plugins/modules/search.ts
+++ b/src-vue/src/plugins/modules/search.ts
@@ -8,6 +8,7 @@ export const searchModule = {
         searchValue: '',
         // Selected mod categories
         selectedCategories: [],
+        showDeprecatedMods: false,
         sortValue: {label: '', value: ''}
     }),
     getters: {
@@ -16,4 +17,3 @@ export const searchModule = {
         }
     }
   }
-  
\ No newline at end of file
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 2f2f5019..c4e94c80 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -40,6 +40,18 @@
                     </el-input>
                 </div>
 
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.show_deprecated_mods') }}</h3>
+                    <h6>
+                        {{ $t('settings.show_deprecated_mods_desc1') }}<br/>
+                        {{ $t('settings.show_deprecated_mods_desc2') }}
+                    </h6>
+                    <span>
+                        {{ $t('settings.show_deprecated_mods') }}
+                        <el-switch v-model="showDeprecatedMods"></el-switch>
+                    </span>
+                </div>
+
                 <!-- Interface localization -->
                 <div class="fc_parameter__panel">
                     <h3>{{ $t('settings.language') }}</h3>
@@ -96,6 +108,14 @@ export default defineComponent({
         }
     },
     computed: {
+        showDeprecatedMods: {
+            get(): boolean {
+                return this.$store.state.search.showDeprecatedMods;
+            },
+            set(value: boolean) {
+                this.$store.state.search.showDeprecatedMods = value;
+            }
+        },
         flightcoreVersion(): string {
             return this.$store.state.flightcore_version;
         },
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 58a00367..538a895f 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -86,13 +86,16 @@ export default defineComponent({
                         mod.versions[0].description.toLowerCase().includes(this.searchValue)
                     );
 
+                // Filter out deprecated mods
+                const showDeprecated = !mod.is_deprecated || this.$store.state.search.showDeprecatedMods;
+
                 // Filter with categories (only if some categories are selected)
                 const categoriesMatch: boolean = this.selectedCategories.length === 0
                     || mod.categories
                         .filter((category: string) => this.selectedCategories.includes(category))
                         .length === this.selectedCategories.length;
 
-                return inputMatches && categoriesMatch;
+                return inputMatches && categoriesMatch && showDeprecated;
             });
         },
         modsList(): ThunderstoreMod[] {
-- 
cgit v1.2.3