Skip to content

Commit 4cad684

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 ad66c58 commit 4cad684

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;
@@ -247,6 +246,18 @@ export class TopicIdeationComponent {
247246
});
248247
}
249248

249+
get isCountryEstonia() {
250+
return this.topic.country === 'Estonia';
251+
}
252+
253+
get hasDemograficsField() {
254+
return {
255+
age: this.ideation.demographicsConfig?.age,
256+
gender: this.ideation.demographicsConfig?.gender,
257+
residence: this.ideation.demographicsConfig?.residence,
258+
};
259+
}
260+
250261
get sortedSelectedAges() {
251262
return this.ideaFilters.age
252263
.sort((a, b) => {
@@ -266,18 +277,6 @@ export class TopicIdeationComponent {
266277
this.ideaFilters.search = value;
267278
}
268279

269-
get isCountryEstonia() {
270-
return this.topic.country === 'Estonia';
271-
}
272-
273-
get hasDemograficsField() {
274-
return {
275-
age: this.ideation.demographicsConfig?.age,
276-
gender: this.ideation.demographicsConfig?.gender,
277-
residence: this.ideation.demographicsConfig?.residence
278-
};
279-
}
280-
281280
setType(type: string) {
282281
if (type === 'all' || typeof type !== 'string') type = '';
283282
this.ideaTypeFilter$.next(type);
@@ -597,9 +596,11 @@ export class TopicIdeationComponent {
597596
}
598597

599598
showMobileOverlay() {
600-
const filtersShow = Object.entries(this.mobileIdeaFilters).find(([key, value]) => {
601-
return !!value;
602-
});
599+
const filtersShow = Object.entries(this.mobileIdeaFilters).find(
600+
([key, value]) => {
601+
return !!value;
602+
}
603+
);
603604

604605
if (filtersShow) return true;
605606

0 commit comments

Comments
 (0)