-
Notifications
You must be signed in to change notification settings - Fork 188
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Continue making Manager page less of a god-class component. This also partially fixes the problem where "allow NSFW" checkbox didn't react correctly to dark/light theme. The value is now read from correct place, so the checkbox is themed based on the theme that was active when user entered Manager page. However, if user changes the theme while on manager page, the checkbox theme is not updated yet. I wasn't sure how this should be solved, and it falls outside the scope of the ticket, so I just marked the issue with TODO comment. Refs TS-1309
- Loading branch information
1 parent
fcfc571
commit eb22e8c
Showing
3 changed files
with
169 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| <template> | ||
| <modal v-show="isOpen" :open="isOpen" :show-close="false"> | ||
| <template v-slot:title> | ||
| <p class="card-header-title">Filter mod categories</p> | ||
| </template> | ||
| <template v-slot:body> | ||
| <div class="input-group"> | ||
| <label>Categories</label> | ||
| <select class="select select--content-spacing" @change="selectCategory($event)"> | ||
| <option selected disabled> | ||
| Select a category | ||
| </option> | ||
| <option v-for="(key, index) in unselectedCategories" :key="`category--${key}-${index}`"> | ||
| {{ key }} | ||
| </option> | ||
| </select> | ||
| </div> | ||
| <br/> | ||
| <div class="input-group"> | ||
| <label>Selected categories:</label> | ||
| <div class="field has-addons" v-if="selectedCategories.length > 0"> | ||
| <div class="control" v-for="(key, index) in selectedCategories" :key="`${key}-${index}`"> | ||
| <span class="block margin-right"> | ||
| <a href="#" @click="unselectCategory(key)"> | ||
| <span class="tags has-addons"> | ||
| <span class="tag">{{ key }}</span> | ||
| <span class="tag is-danger"> | ||
| <i class="fas fa-times"></i> | ||
| </span> | ||
| </span> | ||
| </a> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div class="field has-addons" v-else> | ||
| <span class="tags"> | ||
| <span class="tag">No categories selected</span> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <hr/> | ||
| <div> | ||
| <input | ||
| v-model="allowNsfw" | ||
| id="nsfwCheckbox" | ||
| class="is-checkradio has-background-color" | ||
| type="checkbox" | ||
| :class="[{'is-dark': !isDarkTheme, 'is-white': isDarkTheme}]" | ||
| > | ||
| <label for="nsfwCheckbox">Allow NSFW (potentially explicit) mods</label> | ||
| </div> | ||
| <br/> | ||
| <div> | ||
| <div v-for="(key, index) in categoryFilterValues" :key="`cat-filter-${key}-${index}`"> | ||
| <input | ||
| name="categoryFilterCondition" | ||
| type="radio" | ||
| :id="`cat-filter-${key}-${index}`" | ||
| :value=key | ||
| :checked="index === 0 ? true : undefined" v-model="categoryFilterMode" | ||
| /> | ||
| <label :for="`cat-filter-${key}-${index}`"> | ||
| <span class="margin-right margin-right--half-width" /> | ||
| {{ key }} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <template v-slot:footer> | ||
| <button class="button is-info" @click="close"> | ||
| Apply filters | ||
| </button> | ||
| </template> | ||
| </modal> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Component, Prop, Vue } from "vue-property-decorator"; | ||
| import { Modal } from '../../components/all'; | ||
| import CategoryFilterMode from "../../model/enums/CategoryFilterMode"; | ||
| import GameManager from "../../model/game/GameManager"; | ||
| import ManagerSettings from "../../r2mm/manager/ManagerSettings"; | ||
| @Component({ | ||
| components: { Modal } | ||
| }) | ||
| export default class CategoryFilterModal extends Vue { | ||
| activeGame = GameManager.activeGame; | ||
| settings: ManagerSettings = new ManagerSettings(); | ||
| @Prop({default: () => null}) | ||
| private onClose!: () => Promise<void>; | ||
| get allowNsfw(): boolean { | ||
| return this.$store.state.modFilters.allowNsfw; | ||
| } | ||
| set allowNsfw(value: boolean) { | ||
| this.$store.commit("modFilters/setAllowNsfw", value); | ||
| } | ||
| get categoryFilterMode(): CategoryFilterMode { | ||
| return this.$store.state.modFilters.categoryFilterMode; | ||
| } | ||
| set categoryFilterMode(value: CategoryFilterMode) { | ||
| this.$store.commit("modFilters/setCategoryFilterMode", value); | ||
| } | ||
| get categoryFilterValues() { | ||
| return Object.values(CategoryFilterMode); | ||
| } | ||
| close() { | ||
| this.onClose(); | ||
| this.$store.commit("closeCategoryFilterModal"); | ||
| } | ||
| async created() { | ||
| this.settings = await ManagerSettings.getSingleton(this.activeGame); | ||
| } | ||
| // TODO: The value doesn't get updated if the theme is toggled while | ||
| // the modal in mounted. | ||
| get isDarkTheme(): boolean { | ||
| return this.settings.getContext().global.darkTheme; | ||
| } | ||
| get isOpen(): boolean { | ||
| return this.$store.state.modals.isCategoryFilterModalOpen; | ||
| } | ||
| selectCategory(event: Event) { | ||
| if (!(event.target instanceof HTMLSelectElement)) { | ||
| return; | ||
| } | ||
| this.$store.commit("modFilters/selectCategory", event.target.value); | ||
| event.target.selectedIndex = 0; | ||
| } | ||
| get selectedCategories(): string[] { | ||
| return this.$store.state.modFilters.selectedCategories; | ||
| } | ||
| unselectCategory(category: string) { | ||
| this.$store.commit("modFilters/unselectCategory", category); | ||
| } | ||
| get unselectedCategories(): string[] { | ||
| return this.$store.getters["modFilters/unselectedCategories"]; | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters