diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs index 56d6220104a..ef665e861fd 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.hbs @@ -12,6 +12,9 @@ "sidebar.categories_form_modal.filter_placeholder" }} @onFilterInput={{this.onFilterInput}} + @resetFilter={{this.resetFilter}} + @filterSelected={{this.filterSelected}} + @filterUnselected={{this.filterUnselected}} >
{{#if (gt this.filteredCategoriesGroupings.length 0)}} @@ -50,6 +53,9 @@ this.selectedSidebarCategoryIds category.id }} + disabled={{(not + (includes this.filteredCategoryIds category.id) + )}} {{on "click" (action "toggleCategory" category.id)}} /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.js index 222da5df22f..a856ba10b23 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/categories-form.js @@ -13,6 +13,9 @@ export default class extends Component { @service siteSettings; @tracked filter = ""; + @tracked filteredCategoryIds; + @tracked onlySelected = false; + @tracked onlyUnselected = false; @tracked selectedSidebarCategoryIds = [ ...this.currentUser.sidebar_category_ids, @@ -44,37 +47,71 @@ export default class extends Component { } get filteredCategoriesGroupings() { - if (this.filter.length === 0) { - return this.categoryGroupings; - } else { - return this.categoryGroupings.reduce((acc, categoryGrouping) => { - const filteredCategories = new Set(); + const filteredCategoryIds = new Set(); - categoryGrouping.forEach((category) => { - if (this.#matchesFilter(category, this.filter)) { - if (category.parentCategory?.parentCategory) { - filteredCategories.add(category.parentCategory.parentCategory); - } + const groupings = this.categoryGroupings.reduce((acc, categoryGrouping) => { + const filteredCategories = new Set(); - if (category.parentCategory) { - filteredCategories.add(category.parentCategory); - } - - filteredCategories.add(category); + const addCategory = (category) => { + if (this.#matchesFilter(category)) { + if (category.parentCategory?.parentCategory) { + filteredCategories.add(category.parentCategory.parentCategory); } - }); - if (filteredCategories.size > 0) { - acc.push(Array.from(filteredCategories)); + if (category.parentCategory) { + filteredCategories.add(category.parentCategory); + } + + filteredCategoryIds.add(category.id); + filteredCategories.add(category); } + }; - return acc; - }, []); - } + categoryGrouping.forEach((category) => { + if (this.onlySelected) { + if (this.selectedSidebarCategoryIds.includes(category.id)) { + addCategory(category); + } + } else if (this.onlyUnselected) { + if (!this.selectedSidebarCategoryIds.includes(category.id)) { + addCategory(category); + } + } else { + addCategory(category); + } + }); + + if (filteredCategories.size > 0) { + acc.push(Array.from(filteredCategories)); + } + + return acc; + }, []); + + this.filteredCategoryIds = Array.from(filteredCategoryIds); + return groupings; } - #matchesFilter(category, filter) { - return category.nameLower.includes(filter); + #matchesFilter(category) { + return this.filter.length === 0 || category.nameLower.includes(this.filter); + } + + @action + resetFilter() { + this.onlySelected = false; + this.onlyUnselected = false; + } + + @action + filterSelected() { + this.onlySelected = true; + this.onlyUnselected = false; + } + + @action + filterUnselected() { + this.onlySelected = false; + this.onlyUnselected = true; } @action diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs index 5dfc8e52219..5a8aecc81c3 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.hbs @@ -32,6 +32,16 @@ autofocus="true" /> + +
+ +
{{yield}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js index ff22c1c5b3e..ca6c6801274 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/modal.js @@ -1,9 +1,30 @@ +import I18n from "I18n"; import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; import { action } from "@ember/object"; export default class extends Component { @tracked filter = ""; + @tracked filterDropdownValue = "all"; + + filterDropdownContent = [ + { + id: "all", + name: I18n.t("sidebar.edit_navigation_modal_form.filter_dropdown.all"), + }, + { + id: "selected", + name: I18n.t( + "sidebar.edit_navigation_modal_form.filter_dropdown.selected" + ), + }, + { + id: "unselected", + name: I18n.t( + "sidebar.edit_navigation_modal_form.filter_dropdown.unselected" + ), + }, + ]; get modalHeaderAfterTitleElement() { return document.getElementById("modal-header-after-title"); @@ -13,4 +34,21 @@ export default class extends Component { onFilterInput(value) { this.args.onFilterInput(value); } + + @action + onFilterDropdownChange(value) { + this.filterDropdownValue = value; + + switch (value) { + case "all": + this.args.resetFilter(); + break; + case "selected": + this.args.filterSelected(); + break; + case "unselected": + this.args.filterUnselected(); + break; + } + } } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs index dbbf250ebce..36e143bfa8c 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.hbs @@ -10,6 +10,9 @@ @deselectAllText={{i18n "sidebar.tags_form_modal.subtitle.text"}} @inputFilterPlaceholder={{i18n "sidebar.tags_form_modal.filter_placeholder"}} @onFilterInput={{this.onFilterInput}} + @resetFilter={{this.resetFilter}} + @filterSelected={{this.filterSelected}} + @filterUnselected={{this.filterUnselected}} > {{#if this.tagsLoading}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.js index 760bdd0faa9..c149d1593fe 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-modal-form/tags-form.js @@ -13,6 +13,8 @@ export default class extends Component { @service store; @tracked filter = ""; + @tracked onlySelected = false; + @tracked onlyUnSelected = false; @tracked tags = []; @tracked tagsLoading = true; @tracked selectedTags = [...this.currentUser.sidebarTagNames]; @@ -40,17 +42,45 @@ export default class extends Component { } get filteredTags() { - if (this.filter.length === 0) { - return this.tags; - } else { - return this.tags.reduce((acc, tag) => { - if (tag.name.toLowerCase().includes(this.filter)) { + return this.tags.reduce((acc, tag) => { + if (this.onlySelected) { + if (this.selectedTags.includes(tag.name) && this.#matchesFilter(tag)) { acc.push(tag); } + } else if (this.onlyUnselected) { + if (!this.selectedTags.includes(tag.name) && this.#matchesFilter(tag)) { + acc.push(tag); + } + } else if (this.#matchesFilter(tag)) { + acc.push(tag); + } - return acc; - }, []); - } + return acc; + }, []); + } + + #matchesFilter(tag) { + return ( + this.filter.length === 0 || tag.name.toLowerCase().includes(this.filter) + ); + } + + @action + resetFilter() { + this.onlySelected = false; + this.onlyUnselected = false; + } + + @action + filterSelected() { + this.onlySelected = true; + this.onlyUnselected = false; + } + + @action + filterUnselected() { + this.onlySelected = false; + this.onlyUnselected = true; } @action diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss index 50d26b4c134..8a6925e33ad 100644 --- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss +++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-modal-form/modal.scss @@ -9,6 +9,27 @@ margin-bottom: 1em; width: 100%; + .sidebar__edit-navigation-modal-form__filter-dropdown { + margin-left: 0.5em; + + .select-kit-header { + background: var(--secondary); + color: var(--primary); + border: 1px solid var(--primary-low-mid); + font-size: var(--font-0); + + &:hover, + &:focus { + background: var(--secondary); + color: var(--primary); + + .d-icon { + color: var(--primary); + } + } + } + } + .sidebar__edit-navigation-modal-form__filter-input { display: flex; flex-direction: row; diff --git a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss index 66b8739b36e..fa66f27aed3 100644 --- a/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss +++ b/app/assets/stylesheets/mobile/components/sidebar/edit-navigation-modal-form/modal.scss @@ -2,4 +2,13 @@ .modal-inner-container { width: 35em; } + + .sidebar__edit-navigation-modal-form__filter { + flex-direction: column; + + .sidebar__edit-navigation-modal-form__filter-dropdown { + margin-left: 0; + width: 100%; + } + } } diff --git a/spec/system/editing_sidebar_categories_navigation_spec.rb b/spec/system/editing_sidebar_categories_navigation_spec.rb index 84cca565be9..3140b327f1a 100644 --- a/spec/system/editing_sidebar_categories_navigation_spec.rb +++ b/spec/system/editing_sidebar_categories_navigation_spec.rb @@ -135,6 +135,52 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do expect(modal).to have_no_categories end + it "allows a user to filter the categories in the modal by selection" do + Fabricate(:category_sidebar_section_link, linkable: category_subcategory, user: user) + Fabricate(:category_sidebar_section_link, linkable: category2, user: user) + + visit "/latest" + + expect(sidebar).to have_categories_section + + modal = sidebar.click_edit_categories_button + modal.filter_by_selected + + expect(modal).to have_categories([category, category_subcategory, category2]) + expect(modal).to have_checkbox(category, disabled: true) + expect(modal).to have_checkbox(category_subcategory) + expect(modal).to have_checkbox(category2) + + modal.filter("category subcategory") + + expect(modal).to have_categories([category, category_subcategory]) + expect(modal).to have_checkbox(category, disabled: true) + expect(modal).to have_checkbox(category_subcategory) + + modal.filter("").filter_by_unselected + + expect(modal).to have_categories( + [category, category_subcategory2, category2, category2_subcategory], + ) + + expect(modal).to have_checkbox(category) + expect(modal).to have_checkbox(category_subcategory2) + expect(modal).to have_checkbox(category2, disabled: true) + expect(modal).to have_checkbox(category2_subcategory) + + modal.filter_by_all + + expect(modal).to have_categories( + [category, category_subcategory, category_subcategory2, category2, category2_subcategory], + ) + + expect(modal).to have_checkbox(category) + expect(modal).to have_checkbox(category_subcategory) + expect(modal).to have_checkbox(category_subcategory2) + expect(modal).to have_checkbox(category2) + expect(modal).to have_checkbox(category2_subcategory) + end + describe "when max_category_nesting has been set to 3" do before_all { SiteSetting.max_category_nesting = 3 } diff --git a/spec/system/editing_sidebar_tags_navigation_spec.rb b/spec/system/editing_sidebar_tags_navigation_spec.rb index a8c044517df..71c35fa47e8 100644 --- a/spec/system/editing_sidebar_tags_navigation_spec.rb +++ b/spec/system/editing_sidebar_tags_navigation_spec.rb @@ -118,4 +118,30 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do expect(sidebar).to have_section_link(tag2.name) expect(sidebar).to have_section_link(tag3.name) end + + it "allows a user to filter the tag in the modal by selection" do + Fabricate(:tag_sidebar_section_link, linkable: tag1, user: user) + Fabricate(:tag_sidebar_section_link, linkable: tag2, user: user) + + visit "/latest" + + expect(sidebar).to have_tags_section + + modal = sidebar.click_edit_tags_button + modal.filter_by_selected + + expect(modal).to have_tag_checkboxes([tag1, tag2]) + + modal.filter("tag2") + + expect(modal).to have_tag_checkboxes([tag2]) + + modal.filter("").filter_by_unselected + + expect(modal).to have_tag_checkboxes([tag3]) + + modal.filter_by_all + + expect(modal).to have_tag_checkboxes([tag1, tag2, tag3]) + end end diff --git a/spec/system/page_objects/modals/sidebar_edit_categories.rb b/spec/system/page_objects/modals/sidebar_edit_categories.rb index 827f61d9f46..4e78c000d53 100644 --- a/spec/system/page_objects/modals/sidebar_edit_categories.rb +++ b/spec/system/page_objects/modals/sidebar_edit_categories.rb @@ -60,6 +60,12 @@ module PageObjects self end + + def has_checkbox?(category, disabled: false) + has_selector?( + ".sidebar-categories-form-modal .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input#{disabled ? "[disabled]" : ""}", + ) + end end end end diff --git a/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb b/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb index 159f83b9b00..9ec567fa2c9 100644 --- a/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb +++ b/spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb @@ -31,6 +31,38 @@ module PageObjects click_button(I18n.t("js.sidebar.edit_navigation_modal_form.deselect_button_text")) self end + + def filter_by_selected + dropdown_filter.select_row_by_name( + I18n.t("js.sidebar.edit_navigation_modal_form.filter_dropdown.selected"), + ) + + self + end + + def filter_by_unselected + dropdown_filter.select_row_by_name( + I18n.t("js.sidebar.edit_navigation_modal_form.filter_dropdown.unselected"), + ) + + self + end + + def filter_by_all + dropdown_filter.select_row_by_name( + I18n.t("js.sidebar.edit_navigation_modal_form.filter_dropdown.all"), + ) + + self + end + + private + + def dropdown_filter + PageObjects::Components::SelectKit.new( + ".sidebar__edit-navigation-modal-form__filter-dropdown", + ) + end end end end