refactor: Mods view (#134)

* feat: add UI skeleton for new mods interface

* fix: only apply app menu style to app menu items

* feat: add menu skeleton

* feat: add thunderstore mods view into mods view

* refactor: remove thunderstore mods view from router + menu bar

* refactor: move search input into mods view

* fix: adjust ts mods container padding

* refactor: center pagination components

* refactor: rework media queries to adapt cards container width

* fix: set mods view navigation min-width

* refactor: compute mods container width with CSS variables

* refactor: remove horizontal padding around ts mods container

This will allow them to take much screen space.

* feat: Thunderstore mods container is larger

* feat: add layouts for 5 to 8 Thunderstore mod columns

* feat: add some space to separate navigation menu subparts

* fix: move search pagination reset in ThunderstoreModsView component

* feat: retrieve Thunderstore mod categories when fetching mods

* feat: add mod categories selector component

* feat: mod categories selector now filters Thunderstore mods

* fix: reset pagination index if needed when selecting mod categories

* fix: first mod does not appear anymore while selecting any mod category

First mod's categories array was used as an accumulator (in a reduce call)
to regroup all mod categories; we now use an empty array as initial value
for the accumulator.

* feat: add a selector component to sort mods

* feat: set sort selector default value on view mount

* fix: set default sorting select value as selected in dropdown list

* feat: add date_updated field to ThunderstoreMod type

* feat: pass sorting value to ThunderstoreModsView as a prop

* feat: mods can be sorted by name and release date

* feat: mods can be sorted by most downloaded and top rated

* fix: don't display sorting select on local mods view

* refactor: remove local mods title

* refactor: export local mods view code in dedicated component

* refactor: export search value in a search-dedicated store

* fix: display "no matching mods" message when no mods match

This message was previously displayed only if no mods matched AND search
input was not empty; now that we have categories selector, we can have no
matching mods with an empty input.

* refactor: remove unused input prop

* fix: mods can be sorted by rating

* refactor: remove unused searchValue computed property

* style: adjust SortOptions import

* refactor: move selected mod categories into search store module

* refactor: move mod sorting into search store module

* refactor: export mods menu component to dedicated file

* fix: remove compare method initialization

* feat: local mods can be filtered with search input

* build: add ES2018 lib to typescript compiler options

* refactor: remove unused variable

* fix: retrieve SortOptions values from string input

* refactor: move Thunderstore mods view into dedicated folder

* style: add missing trailing newline to SortOptions.d.ts

2 files changed, 394 insertions, 0 deletions

diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
new file mode 100644
index 00000000..470ab4f7
--- /dev/null
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -0,0 +1,122 @@
+<template>
+    <el-scrollbar>
+        <div>
+            <p v-if="mods.length === 0">No mods were found.</p>
+            <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
+                <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
+                            :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
+                <el-popconfirm
+                    title="Are you sure to delete this mod?"
+                    @confirm="deleteMod(mod)"
+                >
+                    <template #reference>
+                        <el-button type="danger">Delete</el-button>
+                    </template>
+                </el-popconfirm>
+                {{ mod.name }}
+            </el-card>
+        </div>
+    </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { invoke } from '@tauri-apps/api';
+import { ElNotification } from 'element-plus';
+import { defineComponent } from 'vue';
+import { GameInstall } from '../../utils/GameInstall';
+import { NorthstarMod } from '../../utils/NorthstarMod';
+
+export default defineComponent({
+    name: 'LocalModsView',
+    computed: {
+        installedMods(): NorthstarMod[] {
+            return this.$store.state.installed_mods;
+        },
+        searchValue(): string {
+            return this.$store.getters.searchWords;
+        },
+        mods(): NorthstarMod[] {
+            if (this.searchValue.length === 0) {
+                return this.installedMods;
+            }
+
+            return this.installedMods.filter((mod: NorthstarMod) => {
+                return mod.name.toLowerCase().includes(this.searchValue);
+            });
+        }
+    },
+    data() {
+        return {
+            global_load_indicator: false,
+        };
+    },
+    methods: {
+        async updateWhichModsEnabled(mod: NorthstarMod) {
+            this.global_load_indicator = true;
+
+            // Setup up struct
+            let game_install = {
+                game_path: this.$store.state.game_path,
+                install_type: this.$store.state.install_type
+            } as GameInstall;
+
+            // enable/disable specific mod
+            try {
+                await invoke("set_mod_enabled_status", {
+                    gameInstall: game_install,
+                    modName: mod.name,
+                    // Need to set it to the opposite of current state,
+                    // as current state is only updated after command is run
+                    isEnabled: !mod.enabled,
+                })
+            }
+            catch (error) {
+                ElNotification({
+                    title: 'Error',
+                    message: `${error}`,
+                    type: 'error',
+                    position: 'bottom-right'
+                });
+                this.global_load_indicator = false;
+                return false;
+            }
+
+            this.global_load_indicator = false;
+            return true;
+        },
+        async deleteMod(mod: NorthstarMod) {
+            let game_install = {
+                game_path: this.$store.state.game_path,
+                install_type: this.$store.state.install_type
+            } as GameInstall;
+            await invoke("delete_northstar_mod", { gameInstall: game_install, nsmodName: mod.name })
+                .then((message) => {
+                    // Just a visual indicator that it worked
+                    ElNotification({
+                        title: `Success deleting ${mod.name}`,
+                        type: 'success',
+                        position: 'bottom-right'
+                    });
+                })
+                .catch((error) => {
+                    ElNotification({
+                        title: 'Error',
+                        message: error,
+                        type: 'error',
+                        position: 'bottom-right'
+                    });
+                })
+                .finally(() => {
+                    this.$store.commit('loadInstalledMods');
+                });
+        },
+    },
+    mounted() {
+        this.$store.commit('loadInstalledMods');
+    }
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
new file mode 100644
index 00000000..aaf15220
--- /dev/null
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -0,0 +1,272 @@
+<template>

+    <div class="fc-container" style="padding: 0">

+        <div v-if="mods.length === 0" class="fc__changelog__container">

+            <el-progress :show-text="false" :percentage="50" :indeterminate="true" />

+        </div>

+        <el-scrollbar v-else class="container" ref="scrollbar">

+            <div class="card-container">

+                <div class="pagination_container">

+                    <el-pagination

+                        v-if="shouldDisplayPagination"

+                        :currentPage="currentPageIndex + 1"

+                        layout="prev, pager, next"

+                        :page-size="modsPerPage"

+                        :total="modsList.length"

+                        @current-change="(e: number) => currentPageIndex = e - 1"

+                    />

+                </div>

+

+                <!-- Message displayed if no mod matched searched words -->

+                <div v-if="filteredMods.length === 0" class="modMessage">

+                    No matching mod has been found.<br/>

+                    Try another search!

+                </div>

+

+                <!-- Mod cards -->

+                <thunderstore-mod-card v-for="mod of currentPageMods" v-bind:key="mod.name" :mod="mod" />

+            </div>

+

+            <!-- Bottom pagination -->

+            <div class="card-container">

+                <div class="pagination_container">

+                    <el-pagination

+                        class="fc_bottom__pagination"

+                        v-if="shouldDisplayPagination"

+                        :currentPage="currentPageIndex + 1"

+                        layout="prev, pager, next"

+                        :page-size="modsPerPage"

+                        :total="modsList.length"

+                        @current-change="onBottomPaginationChange"

+                    />

+                </div>

+            </div>

+        </el-scrollbar>

+    </div>

+</template>

+

+<script lang="ts">

+import { defineComponent, ref } from 'vue';

+import { ThunderstoreMod } from "../../utils/thunderstore/ThunderstoreMod";

+import ThunderstoreModCard from "../../components/ThunderstoreModCard.vue";

+import { ElScrollbar, ScrollbarInstance } from "element-plus";

+import { SortOptions } from "../../utils/SortOptions.d";

+import { ThunderstoreModVersion } from '../../utils/thunderstore/ThunderstoreModVersion';

+

+export default defineComponent({

+    name: "ThunderstoreModsView",

+    components: {ThunderstoreModCard},

+    async mounted() {

+        this.$store.commit('fetchThunderstoreMods');

+    },

+    computed: {

+        searchValue(): string {

+            return this.$store.getters.searchWords;

+        },

+        selectedCategories(): Object[] {

+            return this.$store.state.search.selectedCategories;

+        },

+        modSorting(): SortOptions {

+            return Object.values(SortOptions)[Object.keys(SortOptions).indexOf(this.$store.state.search.sortValue)];

+        },

+        mods(): ThunderstoreMod[] {

+            return this.$store.state.thunderstoreMods;

+        },

+        filteredMods(): ThunderstoreMod[] {

+            if (this.searchValue.length === 0 && this.selectedCategories.length === 0) {

+                return this.mods;

+            }

+

+            return this.mods.filter((mod: ThunderstoreMod) => {

+                // Filter with search words (only if search field isn't empty)

+                const inputMatches: boolean = this.searchValue.length === 0

+                    || (mod.name.toLowerCase().includes(this.searchValue)

+                        || mod.owner.toLowerCase().includes(this.searchValue)

+                        || mod.versions[0].description.toLowerCase().includes(this.searchValue));

+

+                // 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;

+            });

+        },

+        modsList(): ThunderstoreMod[] {

+            // Use filtered mods if user is searching, vanilla list otherwise.

+            const mods: ThunderstoreMod[] = this.searchValue.length !== 0 || this.selectedCategories.length !== 0

+                ? this.filteredMods

+                : this.mods;

+

+            // Sort mods regarding user selected algorithm.

+            let compare: (a: ThunderstoreMod, b: ThunderstoreMod) => number;

+            switch(this.modSorting) {

+                case SortOptions.NAME_ASC:

+                    compare = (a: ThunderstoreMod, b: ThunderstoreMod) => a.name.localeCompare(b.name);

+                    break;

+                case SortOptions.NAME_DESC:

+                    compare = (a: ThunderstoreMod, b: ThunderstoreMod) => -1 * a.name.localeCompare(b.name);

+                    break;

+                case SortOptions.DATE_ASC:

+                    compare = (a: ThunderstoreMod, b: ThunderstoreMod) => a.date_updated.localeCompare(b.date_updated);

+                    break;

+                case SortOptions.DATE_DESC:

+                    compare = (a: ThunderstoreMod, b: ThunderstoreMod) => -1 * a.date_updated.localeCompare(b.date_updated);

+                    break;

+                case SortOptions.MOST_DOWNLOADED:

+                    compare = (a: ThunderstoreMod, b: ThunderstoreMod) => {

+                        const aTotal = a.versions.reduce((prev, next) => {

+                            return {downloads: prev.downloads + next.downloads} as ThunderstoreModVersion;

+                        }).downloads;

+                        const bTotal = b.versions.reduce((prev, next) => {

+                            return {downloads: prev.downloads + next.downloads} as ThunderstoreModVersion;

+                        }).downloads;

+                        return -1 * (aTotal - bTotal);

+                    };

+                    break;

+                case SortOptions.TOP_RATED:

+                    compare = (a: ThunderstoreMod, b: ThunderstoreMod) => -1 * (a.rating_score - b.rating_score);

+                    break;

+                default:

+                    throw new Error('Unknown mod sorting.');

+            }

+

+            return mods.sort(compare);

+        },

+        modsPerPage(): number {

+            return parseInt(this.$store.state.mods_per_page);

+        },

+        currentPageMods(): ThunderstoreMod[] {

+            // User might want to display all mods on one page.

+            const perPageValue = this.modsPerPage != 0 ? this.modsPerPage : this.modsList.length;

+

+            const startIndex = this.currentPageIndex * perPageValue;

+            const endIndexCandidate = startIndex + perPageValue;

+            const endIndex =  endIndexCandidate > this.modsList.length ? this.modsList.length : endIndexCandidate;

+            return this.modsList.slice(startIndex, endIndex);

+        },

+        shouldDisplayPagination(): boolean {

+            return this.modsPerPage != 0 && this.modsList.length > this.modsPerPage;

+        }

+    },

+    data() {

+        return {

+            modsBeingInstalled: [] as string[],

+            currentPageIndex: 0

+        };

+    },

+    methods: {

+        /**

+         * This updates current pagination and scrolls view to the top.

+         */

+        onBottomPaginationChange(index: number) {

+            this.currentPageIndex = index - 1;

+            (this.$refs.scrollbar as ScrollbarInstance).scrollTo({ top: 0, behavior: 'smooth' });

+        }

+    },

+    watch: {

+        searchValue(_: string, __: string) {

+            if (this.currentPageIndex !== 0) {

+                this.currentPageIndex = 0;

+            }

+        },

+        selectedCategories(_: string[], __: string[]) {

+            if (this.currentPageIndex !== 0) {

+                this.currentPageIndex = 0;

+            }

+        }

+    }

+});

+</script>

+

+<style scoped>

+.fc__changelog__container {

+    padding: 20px 30px;

+}

+

+.fc-container:deep(.el-scrollbar__view) {

+    padding-left: 0;

+    padding-right: 0;

+}

+

+.el-timeline-item__timestamp {

+    color: white !important;

+    user-select: none !important;

+}

+

+.search {

+    display: inline-block;

+    margin: 0 0 0 10px !important;

+}

+

+.modMessage {

+    color: white;

+    margin: 20px 5px;

+}

+

+.card-container {

+    margin: 0 auto;

+}

+

+.pagination_container {

+    margin: 5px auto;

+    padding: 0 5px;

+    max-width: 1000px;

+    justify-content: center;

+    display: flex;

+}

+

+.el-pagination {

+    margin: 0;

+}

+

+.fc_bottom__pagination {

+    padding-bottom: 20px !important;

+    padding-right: 10px;

+}

+

+/* Card container dynamic size */

+

+.card-container {

+    --thunderstore-mod-card-width: 178px;

+    --thunderstore-mod-card-margin: 5px;

+    --thunderstore-mod-card-columns-count: 1;

+

+    width: calc(var(--thunderstore-mod-card-width) * var(--thunderstore-mod-card-columns-count) + var(--thunderstore-mod-card-margin) * 2 * var(--thunderstore-mod-card-columns-count));

+}

+@media (min-width: 628px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 2;

+    }

+}

+@media (min-width: 836px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 3;

+    }

+}

+@media (min-width: 1006px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 4;

+    }

+}

+@media (min-width: 1196px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 5;

+    }

+}

+@media (min-width: 1386px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 6;

+    }

+}

+@media (min-width: 1576px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 7;

+    }

+}

+@media (min-width: 1766px) {

+    .card-container {

+        --thunderstore-mod-card-columns-count: 8;

+    }

+}

+</style>