Skip to content

Commit 361199f

Browse files
DiverVMilmartyrk
DiverVM
and
ilmartyrk
committed
Feature: Add search function to ideas [#1528] (#2326)
* New Crowdin updates (#2289) * New translations en.json (French) * New translations en.json (Spanish) * New translations en.json (Bulgarian) * New translations en.json (Czech) * New translations en.json (German) * New translations en.json (Dutch) * New translations en.json (Russian) * New translations en.json (Slovak) * New translations en.json (Albanian) * New translations en.json (Ukrainian) * New translations en.json (Indonesian) * New translations en.json (Estonian) * New translations en.json (Swahili) * New translations en.json (Somali) * New translations en.json (French) * New translations en.json (Spanish) * New translations en.json (Bulgarian) * New translations en.json (Czech) * New translations en.json (German) * New translations en.json (Dutch) * New translations en.json (Russian) * New translations en.json (Slovak) * New translations en.json (Albanian) * New translations en.json (Ukrainian) * New translations en.json (Indonesian) * New translations en.json (Estonian) * New translations en.json (Swahili) * New translations en.json (Somali) * New translations en.json (French) * New translations en.json (Spanish) * New translations en.json (Bulgarian) * New translations en.json (Czech) * New translations en.json (German) * New translations en.json (Dutch) * New translations en.json (Russian) * New translations en.json (Slovak) * New translations en.json (Albanian) * New translations en.json (Ukrainian) * New translations en.json (Indonesian) * New translations en.json (Estonian) * New translations en.json (Swahili) * New translations en.json (Somali) * add search field * clean * update filters * add mobile field * add icon --------- Co-authored-by: Ilmar Türk <[email protected]>
1 parent 4a79962 commit 361199f

File tree

2 files changed

+124
-188
lines changed

2 files changed

+124
-188
lines changed

‎src/app/ideation/components/topic-ideation/topic-ideation.component.html‎

Lines changed: 107 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -708,107 +708,133 @@
708708
</div>
709709
</cos-input>
710710

711-
<!-- here -->
712-
<cos-input *ngIf="hasDemograficsField.age" [placeholder]="'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_AGE' | translate"
713-
class="dropdown_input">
714-
<div class="dropdown" [cosDropdown]>
715-
<div class="selection">
716-
<div class="selected_item">
717-
<span *ngIf="!ideaFilters.age" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"></span>
718-
<span *ngIf="ideaFilters.age">
719-
{{ideaFilters.age}}
720-
</span>
721-
</div>
722-
<div><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
723-
xmlns="http://www.w3.org/2000/svg">
724-
<path d="M17 10L12 15L7 10" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
725-
</svg>
726-
</div>
727-
</div>
728-
<div class="options">
729-
<label class="checkbox" (click)="setAge('')">
730-
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
731-
<input
732-
type="checkbox"
733-
name="age"
734-
[checked]="ideaFilters.age.length === 0 || ideaFilters.age.length === AGE_LIMIT"
735-
(change)="setAge('')"
736-
/>
737-
<span class="checkmark"></span>
738-
</label>
739-
<label *ngFor="let number of [].constructor(AGE_LIMIT); let i = index" class="checkbox">
740-
<span>{{ i + 1 }}</span>
741-
<input
742-
type="checkbox"
743-
name="age"
744-
[checked]="ideaFilters.age.includes((i + 1).toString())"
745-
(change)="setAge(i + 1)"
746-
/>
747-
<span class="checkmark"></span>
748-
</label>
749-
</div>
750-
</div>
751-
</cos-input>
752-
753-
<cos-input *ngIf="hasDemograficsField.gender" [placeholder]="'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER' | translate"
754-
class="dropdown_input">
711+
<cos-input
712+
*ngIf="hasDemograficsField.gender"
713+
[placeholder]="
714+
'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER' | translate
715+
"
716+
class="dropdown_input"
717+
>
755718
<div class="dropdown" [cosDropdown]>
756719
<div class="selection">
757720
<div class="selected_item">
758-
<span *ngIf="!ideaFilters.gender" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"></span>
721+
<span
722+
*ngIf="!ideaFilters.gender"
723+
translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"
724+
></span>
759725
<span *ngIf="ideaFilters.gender === 'male'">
760-
{{'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_MALE'
761-
|
762-
translate}}</span>
726+
{{
727+
"VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_MALE"
728+
| translate
729+
}}</span
730+
>
763731
<span *ngIf="ideaFilters.gender === 'female'">
764-
{{'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_FEMALE'
765-
|
766-
translate}}</span>
732+
{{
733+
"VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_FEMALE"
734+
| translate
735+
}}</span
736+
>
767737
<span *ngIf="ideaFilters.gender === 'other'">
768-
{{'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_OTHER_PLACEHOLDER'
769-
|
770-
translate}}</span>
738+
{{
739+
"VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_OTHER_PLACEHOLDER"
740+
| translate
741+
}}</span
742+
>
771743
</div>
772-
<div><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
773-
xmlns="http://www.w3.org/2000/svg">
774-
<path d="M17 10L12 15L7 10" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
744+
<div>
745+
<svg
746+
width="24"
747+
height="24"
748+
viewBox="0 0 24 24"
749+
fill="none"
750+
xmlns="http://www.w3.org/2000/svg"
751+
>
752+
<path
753+
d="M17 10L12 15L7 10"
754+
stroke="#2C3B47"
755+
stroke-width="2"
756+
stroke-linecap="round"
757+
/>
775758
</svg>
776759
</div>
777760
</div>
778761
<div class="options">
779-
<div class="option" (click)="setGender('')" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL">
780-
</div>
781-
<div *ngFor="let gender of ['female', 'male', 'other']" class="option" (click)="setGender(gender)">
782-
{{ "VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_" + (gender === "other" ? gender + "_placeholder" : gender).toUpperCase() | translate }}
762+
<div
763+
class="option"
764+
(click)="setGender('')"
765+
translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"
766+
></div>
767+
<div
768+
*ngFor="let gender of ['female', 'male', 'other']"
769+
class="option"
770+
(click)="setGender(gender)"
771+
>
772+
{{
773+
"VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_" +
774+
(gender === "other"
775+
? gender + "_placeholder"
776+
: gender
777+
).toUpperCase() | translate
778+
}}
783779
</div>
784780
</div>
785781
</div>
786782
</cos-input>
787783

788-
<cos-input *ngIf="isCountryEstonia && hasDemograficsField.residence" [placeholder]="'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE' | translate"
789-
class="dropdown_input">
784+
<cos-input
785+
*ngIf="isCountryEstonia && hasDemograficsField.residence"
786+
[placeholder]="
787+
'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE'
788+
| translate
789+
"
790+
class="dropdown_input"
791+
>
790792
<div class="dropdown" [cosDropdown]>
791793
<div class="selection">
792794
<div class="selected_item">
793-
<span *ngIf="!ideaFilters.residence" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"></span>
795+
<span
796+
*ngIf="!ideaFilters.residence"
797+
translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"
798+
></span>
794799
<span *ngIf="ideaFilters.residence">
795-
{{ideaFilters.residence | titlecase}}
800+
{{ ideaFilters.residence | titlecase }}
796801
</span>
797802
</div>
798-
<div><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
799-
xmlns="http://www.w3.org/2000/svg">
800-
<path d="M17 10L12 15L7 10" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
803+
<div>
804+
<svg
805+
width="24"
806+
height="24"
807+
viewBox="0 0 24 24"
808+
fill="none"
809+
xmlns="http://www.w3.org/2000/svg"
810+
>
811+
<path
812+
d="M17 10L12 15L7 10"
813+
stroke="#2C3B47"
814+
stroke-width="2"
815+
stroke-linecap="round"
816+
/>
801817
</svg>
802818
</div>
803819
</div>
804820
<div class="options">
805-
<div class="option" (click)="setResidence('')" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL">
806-
</div>
807-
<div *ngFor="let residence of municipalities;" class="option" (click)="setResidence((residence.name))">
821+
<div
822+
class="option"
823+
(click)="setResidence('')"
824+
translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"
825+
></div>
826+
<div
827+
*ngFor="let residence of municipalities"
828+
class="option"
829+
(click)="setResidence(residence.name)"
830+
>
808831
{{ residence.name }}
809832
</div>
810-
<div class="option" (click)="setResidence('other')" translate="VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER_PLACEHOLDER">
811-
</div>
833+
<div
834+
class="option"
835+
(click)="setResidence('other')"
836+
translate="VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER_PLACEHOLDER"
837+
></div>
812838
</div>
813839
</div>
814840
</cos-input>
@@ -852,6 +878,13 @@
852878
<div class="options filter_options">
853879
<a
854880
class="filter_option"
881+
(click)="mobileIdeaFilters.type = true"
882+
>
883+
<span
884+
class="filter_option_text"
885+
translate="COMPONENTS.TOPIC_IDEATION.IDEA_FILTER_TYPE"
886+
></span>
887+
<span class="bold">
855888
<span
856889
*ngIf="!ideaFilters.type"
857890
translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"
@@ -872,6 +905,7 @@
872905
{{
873906
"COMPONENTS.TOPIC_IDEATION.FILTER_TYPE_MODERATED"
874907
| translate
908+
}}</span
875909
>
876910
</span>
877911
</a>
@@ -1523,105 +1557,6 @@
15231557
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"
15241558
></button>
15251559
</div>
1526-
1527-
<div class="options button_options" *ngIf="mobileIdeaFilters.age">
1528-
<a class="btn_medium_close icon" (click)="closeMobileFilter()">
1529-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1530-
<path
1531-
d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289Z"
1532-
fill="#2C3B47" />
1533-
</svg>
1534-
</a>
1535-
1536-
<div class="options_wrapper">
1537-
<label class="checkbox" (click)="setMobileAges('')">
1538-
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
1539-
<input
1540-
type="checkbox"
1541-
name="age"
1542-
[checked]="mobileAges.length === 0 || mobileAges.length === AGE_LIMIT"
1543-
(change)="setMobileAges('')"
1544-
/>
1545-
<span class="checkmark"></span>
1546-
</label>
1547-
<label *ngFor="let number of [].constructor(AGE_LIMIT); let i = index" class="checkbox">
1548-
<span>{{ i + 1 }}</span>
1549-
<input
1550-
type="checkbox"
1551-
name="age"
1552-
[checked]="mobileAges.includes((i + 1).toString())"
1553-
(change)="setMobileAges(i + 1)"
1554-
/>
1555-
<span class="checkmark"></span>
1556-
</label>
1557-
</div>
1558-
1559-
<button class="btn_medium_secondary"
1560-
(click)="setAge(mobileIdeaFilters.age);mobileIdeaFilters.age= false;"
1561-
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
1562-
</div>
1563-
1564-
<div class="options button_options" *ngIf="mobileIdeaFilters.gender">
1565-
<a class="btn_medium_close icon" (click)="closeMobileFilter()">
1566-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1567-
<path
1568-
d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289Z"
1569-
fill="#2C3B47" />
1570-
</svg>
1571-
</a>
1572-
1573-
<div class="options_wrapper">
1574-
<label class="checkbox" (click)="mobileIdeaFilters.gender = 'all';">
1575-
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
1576-
<input type="radio" name="gebder">
1577-
<span class="checkmark"></span>
1578-
</label>
1579-
1580-
<label *ngFor="let gender of ['female', 'male', 'other']" class="checkbox" (click)="mobileIdeaFilters.gender = gender;">
1581-
<span>{{ "VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_" + (gender === "other" ? gender + "_placeholder" : gender).toUpperCase() | translate }}</span>
1582-
<input type="radio" name="orderBy">
1583-
<span class="checkmark"></span>
1584-
</label>
1585-
</div>
1586-
1587-
<button class="btn_medium_secondary"
1588-
(click)="setGender(mobileIdeaFilters.gender);mobileIdeaFilters.gender= false;"
1589-
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
1590-
</div>
1591-
1592-
<div class="options button_options" *ngIf="mobileIdeaFilters.residence">
1593-
<a class="btn_medium_close icon" (click)="closeMobileFilter()">
1594-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1595-
<path
1596-
d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289Z"
1597-
fill="#2C3B47" />
1598-
</svg>
1599-
</a>
1600-
1601-
<div class="options_wrapper">
1602-
<label class="checkbox" (click)="mobileIdeaFilters.residence= 'all';">
1603-
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
1604-
<input type="radio" name="orderBy">
1605-
<span class="checkmark"></span>
1606-
</label>
1607-
1608-
<label *ngFor="let residence of municipalities; let i = index" class="checkbox" (click)="mobileIdeaFilters.residence= residence.name;">
1609-
<span>{{ residence.name }}</span>
1610-
<input type="radio" name="age">
1611-
<span class="checkmark"></span>
1612-
</label>
1613-
1614-
<label class="checkbox" (click)="mobileIdeaFilters.residence= 'other';">
1615-
<span>{{ 'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER_PLACEHOLDER' | translate | titlecase }}</span>
1616-
<input type="radio" name="age">
1617-
<span class="checkmark"></span>
1618-
</label>
1619-
</div>
1620-
1621-
<button class="btn_medium_secondary"
1622-
(click)="setResidence(mobileIdeaFilters.residence);mobileIdeaFilters.residence= false;"
1623-
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
1624-
</div>
16251560
</div>
16261561
</div>
16271562

‎src/app/ideation/components/topic-ideation/topic-ideation.component.ts‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import { LocationService } from '@services/location.service';
2929
selector: 'topic-ideation',
3030
templateUrl: './topic-ideation.component.html',
3131
styleUrls: ['./topic-ideation.component.scss'],
32-
standalone: false
3332
})
3433
export class TopicIdeationComponent {
3534
@Input() ideation!: any;
@@ -245,6 +244,18 @@ export class TopicIdeationComponent {
245244
});
246245
}
247246

247+
get isCountryEstonia() {
248+
return this.topic.country === 'Estonia';
249+
}
250+
251+
get hasDemograficsField() {
252+
return {
253+
age: this.ideation.demographicsConfig?.age,
254+
gender: this.ideation.demographicsConfig?.gender,
255+
residence: this.ideation.demographicsConfig?.residence,
256+
};
257+
}
258+
248259
get sortedSelectedAges() {
249260
return this.ideaFilters.age
250261
.sort((a, b) => {
@@ -264,18 +275,6 @@ export class TopicIdeationComponent {
264275
this.ideaFilters.search = value;
265276
}
266277

267-
get isCountryEstonia() {
268-
return this.topic.country === 'Estonia';
269-
}
270-
271-
get hasDemograficsField() {
272-
return {
273-
age: this.ideation.demographicsConfig?.age,
274-
gender: this.ideation.demographicsConfig?.gender,
275-
residence: this.ideation.demographicsConfig?.residence
276-
};
277-
}
278-
279278
setType(type: string) {
280279
if (type === 'all' || typeof type !== 'string') type = '';
281280
this.ideaTypeFilter$.next(type);
@@ -595,9 +594,11 @@ export class TopicIdeationComponent {
595594
}
596595

597596
showMobileOverlay() {
598-
const filtersShow = Object.entries(this.mobileIdeaFilters).find(([key, value]) => {
599-
return !!value;
600-
});
597+
const filtersShow = Object.entries(this.mobileIdeaFilters).find(
598+
([key, value]) => {
599+
return !!value;
600+
}
601+
);
601602

602603
if (filtersShow) return true;
603604

0 commit comments

Comments
 (0)