Skip to content

Commit 38254e5

Browse files
jjaffeuxjjaffeux
committed
wip
1 parent 553d886 commit 38254e5

File tree

8 files changed

+120
-75
lines changed

8 files changed

+120
-75
lines changed

‎app/assets/javascripts/discourse/app/components/discovery/filter-navigation.gjs

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@ export default class DiscoveryFilterNavigation extends Component {
4141
get formData() {
4242
return {
4343
query: "",
44-
tags: [{ name: "rest-api" }],
44+
tags: [
45+
{ name: "foo", selected: true },
46+
{ name: "bar", selected: false },
47+
],
4548
};
4649
}
4750

@@ -142,6 +145,7 @@ export default class DiscoveryFilterNavigation extends Component {
142145
<Form
143146
@onSubmit={{this.updateFilter}}
144147
@data={{this.formData}}
148+
class="filter-navigation__form"
145149
as |form data|
146150
>
147151
<form.Field
@@ -260,7 +264,19 @@ export default class DiscoveryFilterNavigation extends Component {
260264
<field.Input />
261265
</form.Field>
262266

263-
<Tags @form={{form}} @data={{data}} />
267+
<details open>
268+
<summary>Tags</summary>
269+
270+
<div class="filter-navigation__tags-list">
271+
<Tags @form={{form}} @data={{data}} />
272+
</div>
273+
</details>
274+
275+
<form.Field name="tag">
276+
<field.Custom>
277+
<TagsList @onChange={{field.set}} />
278+
</field.Custom>
279+
</form.Field>
264280

265281
<form.Actions>
266282
<form.Submit @label="form_templates.filter" />

‎app/assets/javascripts/discourse/app/components/discovery/filter-navigation/tags.gjs

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,50 @@
11
import Component from "@glimmer/component";
22
import { fn } from "@ember/helper";
33
import { action } from "@ember/object";
4+
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
5+
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
46
import AsyncContent from "discourse/components/async-content";
57
import DButton from "discourse/components/d-button";
68
import { ajax } from "discourse/lib/ajax";
79

810
export default class DiscoveryFilterNavigationTags extends Component {
911
@action
10-
async loadTags({ query, tags }) {
11-
const data = { q: query || "" };
12-
const flattenedTags = tags.map((tag) => tag.name);
12+
async loadTags() {
13+
console.log("load tags?");
14+
const data = { q: "baz" || "" };
15+
const flattenedTags = this.args.data.tags.map((tag) => tag.name);
1316
const request = await ajax("/tags/filter/search", { data });
1417

15-
return request.results.filter(
16-
(result) => !flattenedTags.includes(result.name)
17-
);
18+
this.args.data.tags.forEach((tag, index) => {
19+
if (!tag.selected) {
20+
this.collection.remove(index);
21+
}
22+
});
23+
24+
request.results.filter((result) => {
25+
if (!flattenedTags.includes(result.name)) {
26+
this.collection.add(result);
27+
}
28+
});
29+
}
30+
31+
@action
32+
onRegisterApi(api) {
33+
this.collection = api;
34+
}
35+
36+
@action
37+
toggleTag(data) {
38+
data.selected = true;
1839
}
1940

2041
<template>
21-
<@form.Collection @name="tags" as |collection index collectionData|>
42+
<@form.Collection
43+
{{didInsert this.loadTags "baz"}}
44+
@onRegisterApi={{this.onRegisterApi}}
45+
@name="tags"
46+
as |collection index collectionData|
47+
>
2248
<collection.Field
2349
@name="name"
2450
@title="name"
@@ -28,22 +54,12 @@ export default class DiscoveryFilterNavigationTags extends Component {
2854
<field.Custom>
2955
<DButton
3056
@translatedLabel={{collectionData.name}}
31-
@action={{fn collection.remove index}}
32-
class="btn-primary"
57+
@action={{fn this.toggleTag collectionData}}
58+
@icon="tag"
59+
class={{if collectionData.selected "btn-primary"}}
3360
/>
3461
</field.Custom>
3562
</collection.Field>
3663
</@form.Collection>
37-
38-
<AsyncContent @asyncData={{fn this.loadTags @data}}>
39-
<:content as |tags|>
40-
{{#each tags as |tag|}}
41-
<DButton
42-
@translatedLabel={{tag.name}}
43-
@action={{fn @form.addItemToCollection "tags" tag}}
44-
/>
45-
{{/each}}
46-
</:content>
47-
</AsyncContent>
4864
</template>
4965
}

‎app/assets/javascripts/discourse/app/form-kit/components/fk/collection.gjs

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,25 @@ import FKObject from "discourse/form-kit/components/fk/object";
66
import element from "discourse/helpers/element";
77

88
export default class FKCollection extends Component {
9+
constructor() {
10+
super(...arguments);
11+
12+
this.args.onRegisterApi?.({
13+
remove: this.remove,
14+
add: this.add,
15+
});
16+
}
17+
918
@action
1019
remove(index) {
1120
this.args.remove(this.name, index);
1221
}
1322

23+
@action
24+
add(value) {
25+
this.args.add(this.name, value);
26+
}
27+
1428
get collectionData() {
1529
return this.args.data.get(this.name);
1630
}
@@ -27,8 +41,12 @@ export default class FKCollection extends Component {
2741

2842
<template>
2943
{{#let (element this.tagName) as |Wrapper|}}
30-
{{#each this.collectionData key="index" as |data index|}}
31-
<Wrapper class="form-kit__collection">
44+
<Wrapper
45+
class="form-kit__collection"
46+
@onRegisterApi={{@onRegisterApi}}
47+
...attributes
48+
>
49+
{{#each this.collectionData key="index" as |data index|}}
3250
{{yield
3351
(hash
3452
Field=(component
@@ -67,12 +85,14 @@ export default class FKCollection extends Component {
6785
remove=@remove
6886
)
6987
remove=this.remove
88+
add=this.add
7089
)
7190
index
7291
(get this.collectionData index)
7392
}}
74-
</Wrapper>
75-
{{/each}}
93+
94+
{{/each}}
95+
</Wrapper>
7696
{{/let}}
7797
</template>
7898
}

‎app/assets/javascripts/discourse/app/form-kit/components/fk/form.gjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ class FKForm extends Component {
106106
unregisterField: instance.unregisterField,
107107
triggerRevalidationFor: instance.triggerRevalidationFor,
108108
remove: instance.remove,
109+
add: instance.addItemToCollection,
109110
};
110111

111112
return curryComponent(klass, baseArguments, getOwner(this));

‎app/assets/stylesheets/common/components/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,4 @@
6262
@import "emoji-picker";
6363
@import "filter-input";
6464
@import "dropdown-menu";
65+
@import "filter-navigation-form";

‎app/assets/stylesheets/common/components/filter-navigation-form.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.filter-navigation__form {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.filter-navigation__tags-list {
7+
display: flex !important;
8+
gap: 0.5rem;
9+
flex-wrap: wrap;
10+
padding-block: 1rem;
11+
12+
.form-kit__collection {
13+
display: contents;
14+
15+
.form-kit__container-content {
16+
width: auto;
17+
}
18+
19+
.form-kit__field-custom {
20+
min-width: auto;
21+
22+
.form-kit__control-custom {
23+
width: auto;
24+
}
25+
}
26+
}
27+
}

‎app/assets/stylesheets/common/components/topic-query-filter.scss

Lines changed: 12 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
.topic-query-filter {
22
display: flex;
3+
flex-direction: row;
34
margin-right: auto;
45
margin-bottom: var(--nav-space);
56
width: 100%;
6-
flex-direction: column;
7-
padding: 1em;
8-
background-color: var(--primary-very-low);
9-
border: 1px solid var(--primary-low);
107

118
&__label {
129
background-color: var(--primary-low);
@@ -22,19 +19,6 @@
2219
flex: 1 1;
2320
}
2421

25-
&__header {
26-
display: flex;
27-
flex-direction: row;
28-
gap: 1em;
29-
justify-content: center;
30-
align-items: center;
31-
}
32-
33-
&__filter-term {
34-
width: 100%;
35-
margin-bottom: 0 !important;
36-
}
37-
3822
&__icon {
3923
position: absolute;
4024
left: 0.5em;
@@ -46,38 +30,18 @@
4630
margin-right: 0.5em;
4731
}
4832

49-
&__submit {
50-
margin-top: auto;
51-
display: flex;
52-
flex-direction: row;
33+
input.topic-query-filter__filter-term {
34+
margin: 0 0.5em 0 0;
35+
border-color: var(--primary-low-mid);
36+
padding-left: 1.75em;
37+
color: var(--primary);
5338
width: 100%;
54-
}
55-
56-
&__submit .form-kit__button {
57-
height: 2em;
58-
margin-right: 0.5em;
59-
}
60-
61-
&__submit .btn-icon {
62-
height: 2em;
63-
width: 2em;
64-
}
65-
66-
.form-kit {
67-
display: flex;
68-
flex-direction: row;
69-
flex-wrap: wrap;
70-
margin-top: 1em;
71-
}
72-
73-
.form-kit__control-custom .select-kit-header,
74-
.form-kit__control-custom .date-picker {
75-
padding-inline: 0.65em !important;
76-
height: 2em;
77-
max-width: unset;
78-
}
7939

80-
.form-kit__container-optional {
81-
display: none;
40+
&:focus {
41+
border-color: var(--tertiary);
42+
outline: none;
43+
outline-offset: 0;
44+
box-shadow: inset 0 0 0 1px var(--tertiary);
45+
}
8246
}
8347
}

‎app/assets/stylesheets/common/form-kit/_control-custom.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
width: 100%;
77
}
88

9-
.form-kit__control-custom > * {
9+
.form-kit__control-custom > div {
1010
width: 100% !important;
1111
}
1212
}

0 commit comments

Comments
 (0)