aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/components/ModsMenu.vue
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2023-01-14 01:18:48 +0100
committerGitHub <noreply@github.com>2023-01-14 01:18:48 +0100
commit20c3880721cd0f0bd0a2b48a1463b49c514a849b (patch)
tree8bdce436ad295ab550dda3b65f2515c83bec7965 /src-vue/src/components/ModsMenu.vue
parentbcdab67ee1e0c34dbbf0e6c5d294b8a163ebeeff (diff)
downloadFlightCore-20c3880721cd0f0bd0a2b48a1463b49c514a849b.tar.gz
FlightCore-20c3880721cd0f0bd0a2b48a1463b49c514a849b.zip
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
Diffstat (limited to 'src-vue/src/components/ModsMenu.vue')
-rw-r--r--src-vue/src/components/ModsMenu.vue118
1 files changed, 118 insertions, 0 deletions
diff --git a/src-vue/src/components/ModsMenu.vue b/src-vue/src/components/ModsMenu.vue
new file mode 100644
index 00000000..9b62fcfa
--- /dev/null
+++ b/src-vue/src/components/ModsMenu.vue
@@ -0,0 +1,118 @@
+<template>
+ <nav class="fc_mods__menu">
+ <el-menu
+ default-active="1"
+ text-color="#fff"
+ >
+ <h5>Mods</h5>
+ <el-menu-item index="1" @click="$emit('showLocalMods', true)">
+ <el-icon><Folder /></el-icon>
+ <span>Local</span>
+ </el-menu-item>
+ <el-menu-item index="2" @click="$emit('showLocalMods', false)">
+ <el-icon><Connection /></el-icon>
+ <span>Online</span>
+ </el-menu-item>
+
+ <!-- Search inputs -->
+ <h5>Filter</h5>
+ <el-input v-model="$store.state.search.searchValue" placeholder="Search" clearable />
+ <el-select
+ v-if="!showingLocalMods"
+ v-model="$store.state.search.sortValue"
+ placeholder="Sort mods"
+ >
+ <el-option
+ v-for="item of sortValues"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-select
+ v-if="!showingLocalMods"
+ v-model="$store.state.search.selectedCategories"
+ multiple
+ placeholder="Select categories"
+ >
+ <el-option
+ v-for="item in $store.state.thunderstoreModsCategories"
+ :key="item"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+
+ </el-menu>
+ </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { SortOptions } from '../utils/SortOptions.d';
+
+export default defineComponent({
+ name: 'ModsMenu',
+ props: {
+ showingLocalMods: {
+ required: true,
+ type: Boolean
+ }
+ },
+ mounted() {
+ this.$store.state.search.sortValue = this.sortValues[3].value;
+ },
+ computed: {
+ sortValues(): {label: string, value: string}[] {
+ return Object.keys(SortOptions).map((key: string) => ({
+ value: key,
+ label: Object.values(SortOptions)[Object.keys(SortOptions).indexOf(key)]
+ }));
+ }
+ }
+})
+</script>
+
+<style scoped>
+.fc_mods__menu {
+ display: flex;
+ max-width: 222px;
+ min-width: 222px;
+ padding: 10px;
+}
+
+.fc_mods__menu h5 {
+ margin: 8px 0 16px 5px;
+}
+
+.fc_mods__menu h5:not(:first-child){
+ margin-top: 32px;
+}
+
+.fc_mods__menu > .el-menu {
+ background-color: transparent;
+ border: none;
+ width: 100%;
+}
+
+.fc_mods__menu > .el-menu > .el-menu-item {
+ height: 32px;
+ margin-bottom: 5px;
+ border-radius: 5px;
+ color: #e2e6e7;
+}
+
+.fc_mods__menu > .el-menu > .el-menu-item:hover {
+ background-color: #4e4e4e3b;
+}
+
+.fc_mods__menu > .el-menu > .el-menu-item.is-active {
+ color: white;
+ background-color: #4e4e4e7a;
+}
+
+.el-select {
+ width: 100%;
+ margin-top: 5px;
+}
+</style>