FEATURE: Support sub-subcategories in new edit sidebar categories modal (#21994)
Why does this commit do?
This commit adds support for sub-subcategories in the new edit sidebar
categories modal added in fc296b9a81. Note
that sub-subcategories are enabled when `max_category_nesting` is set to
`3`.
This commit is contained in:
Alan Guo Xiang Tan
GitHub
parent
699f3e7014
commit
2191b879c6
|
|
@ -3,28 +3,31 @@
|
|||
@class="sidebar-categories-form-modal"
|
||||
>
|
||||
<form class="sidebar-categories-form">
|
||||
{{#each this.siteCategories as |category|}}
|
||||
{{#each this.categoryGroupings as |categories|}}
|
||||
<div
|
||||
class="sidebar-categories-form__row"
|
||||
style={{html-safe (border-color category.color "left")}}
|
||||
style={{html-safe (border-color categories.1.color "left")}}
|
||||
>
|
||||
|
||||
{{#each categories as |category|}}
|
||||
<div
|
||||
class="sidebar-categories-form__category-row"
|
||||
data-category-id={{category.id}}
|
||||
data-category-level={{category.level}}
|
||||
>
|
||||
<label
|
||||
class="sidebar-categories-form__category-label"
|
||||
for={{concat "sidebar-categories-form__input--" category.id}}
|
||||
>
|
||||
<div
|
||||
class="sidebar-categories-form__category-badge sidebar-categories-form__category-badge--parent-category"
|
||||
>
|
||||
<div class="sidebar-categories-form__category-badge">
|
||||
{{category-badge category}}
|
||||
</div>
|
||||
|
||||
{{#unless category.parentCategory}}
|
||||
<div class="sidebar-categories-form__category-description">
|
||||
{{dir-span category.description_excerpt htmlSafe="true"}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
</label>
|
||||
|
||||
<Input
|
||||
|
|
@ -35,37 +38,7 @@
|
|||
{{on "click" (action "toggleCategory" category.id)}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{{#if (gt category.subcategories.length 0)}}
|
||||
{{#each category.subcategories as |subcategory|}}
|
||||
<div
|
||||
class="sidebar-categories-form__category-row"
|
||||
data-category-id={{subcategory.id}}
|
||||
>
|
||||
<label
|
||||
class="sidebar-categories-form__category-label"
|
||||
for={{concat "sidebar-categories-form__input--" subcategory.id}}
|
||||
>
|
||||
<div
|
||||
class="sidebar-categories-form__category-badge sidebar-categories-form__category-badge--subcategory"
|
||||
>
|
||||
{{category-badge subcategory}}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
id={{concat "sidebar-categories-form__input--" subcategory.id}}
|
||||
class="sidebar-categories-form__input"
|
||||
@type="checkbox"
|
||||
@checked={{includes
|
||||
this.selectedSidebarCategoryIds
|
||||
subcategory.id
|
||||
}}
|
||||
{{on "click" (action "toggleCategory" subcategory.id)}}
|
||||
/>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,30 @@ export default class extends Component {
|
|||
...this.currentUser.sidebar_category_ids,
|
||||
];
|
||||
|
||||
@tracked siteCategories = this.site.categoriesList.filter((category) => {
|
||||
return !category.parent_category_id && !category.isUncategorizedCategory;
|
||||
});
|
||||
categoryGroupings = [];
|
||||
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
|
||||
this.site.sortedCategories.reduce(
|
||||
(categoryGrouping, category, index, arr) => {
|
||||
if (category.isUncategorizedCategory) {
|
||||
return categoryGrouping;
|
||||
}
|
||||
|
||||
categoryGrouping.push(category);
|
||||
|
||||
const nextCategory = arr[index + 1];
|
||||
if (!nextCategory || nextCategory.level === 0) {
|
||||
this.categoryGroupings.push(categoryGrouping);
|
||||
return [];
|
||||
}
|
||||
|
||||
return categoryGrouping;
|
||||
},
|
||||
[]
|
||||
);
|
||||
}
|
||||
|
||||
@action
|
||||
toggleCategory(categoryId) {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,11 @@ const Category = RestModel.extend({
|
|||
|
||||
@discourseComputed("parentCategory.level")
|
||||
level(parentLevel) {
|
||||
return (parentLevel || -1) + 1;
|
||||
if (!parentLevel) {
|
||||
return parentLevel === 0 ? 1 : 0;
|
||||
} else {
|
||||
return parentLevel + 1;
|
||||
}
|
||||
},
|
||||
|
||||
@discourseComputed("subcategories")
|
||||
|
|
|
|||
|
|
@ -21,22 +21,23 @@
|
|||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.sidebar-categories-form__category-row:not(:first-child) {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
|
||||
.sidebar-categories-form__input {
|
||||
align-self: center;
|
||||
}
|
||||
.sidebar-categories-form__category-row[data-category-level="0"] {
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.sidebar-categories-form__category-row:nth-child(2) {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.sidebar-categories-form__category-row:nth-child(n + 3) {
|
||||
.sidebar-categories-form__category-row[data-category-level="1"] {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.sidebar-categories-form__category-row[data-category-level="1"]:not(:nth-of-type(2)) {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.sidebar-categories-form__category-row[data-category-level="2"] {
|
||||
margin-left: 2em;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.sidebar-categories-form__category-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -53,4 +53,39 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
|
|||
expect(sidebar).to have_no_section_link(category_subcategory2.name)
|
||||
expect(sidebar).to have_no_section_link(category2.name)
|
||||
end
|
||||
|
||||
describe "when max_category_nesting has been set to 3" do
|
||||
before { SiteSetting.max_category_nesting = 3 }
|
||||
|
||||
it "allows a user to edit sub-subcategories to be included in the sidebar categories section" do
|
||||
category_subcategory_subcategory =
|
||||
Fabricate(:category, parent_category_id: category_subcategory.id)
|
||||
|
||||
category_subcategory_subcategory2 =
|
||||
Fabricate(:category, parent_category_id: category_subcategory.id)
|
||||
|
||||
category2_subcategory_subcategory =
|
||||
Fabricate(:category, parent_category_id: category2_subcategory.id)
|
||||
|
||||
visit "/latest"
|
||||
|
||||
expect(sidebar).to have_categories_section
|
||||
|
||||
modal = sidebar.click_edit_categories_button
|
||||
|
||||
expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form.title"))
|
||||
|
||||
modal
|
||||
.toggle_category_checkbox(category_subcategory_subcategory)
|
||||
.toggle_category_checkbox(category_subcategory_subcategory2)
|
||||
.toggle_category_checkbox(category2_subcategory_subcategory)
|
||||
.save
|
||||
|
||||
expect(modal).to be_closed
|
||||
|
||||
expect(sidebar).to have_section_link(category_subcategory_subcategory.name)
|
||||
expect(sidebar).to have_section_link(category_subcategory_subcategory2.name)
|
||||
expect(sidebar).to have_section_link(category2_subcategory_subcategory.name)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Reference in New Issue