Skip to content

Commit 0352de2

Browse files
DiverVMDiverVM
authored
Merge pull request #2239 from citizenos/#2034
Feature: Add filters for demographic data [#2034]
2 parents 499821c + 633f16f commit 0352de2

File tree

5 files changed

+264
-5
lines changed

5 files changed

+264
-5
lines changed

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

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,7 @@
209209
</div>
210210
</div>
211211
</cos-input>
212+
212213
<cos-input [placeholder]="'COMPONENTS.TOPIC_IDEATION.IDEA_FILTER_ORDER' | translate"
213214
class="dropdown_input">
214215
<div class="dropdown" [cosDropdown]>
@@ -248,6 +249,7 @@
248249
</div>
249250
</div>
250251
</cos-input>
252+
251253
<cos-input [placeholder]="'COMPONENTS.TOPIC_IDEATION.IDEA_FILTER_PARTICIPANTS' | translate"
252254
class="dropdown_input">
253255
<div class="dropdown" [cosDropdown]>
@@ -290,7 +292,97 @@
290292
</div>
291293
</div>
292294
</cos-input>
295+
296+
<cos-input *ngIf="hasDemograficsField.age" [placeholder]="'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_AGE' | translate"
297+
class="dropdown_input">
298+
<div class="dropdown" [cosDropdown]>
299+
<div class="selection">
300+
<div class="selected_item">
301+
<span *ngIf="!ideaFilters.age" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"></span>
302+
<span *ngIf="ideaFilters.age">
303+
{{ideaFilters.age}}
304+
</span>
305+
</div>
306+
<div><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
307+
xmlns="http://www.w3.org/2000/svg">
308+
<path d="M17 10L12 15L7 10" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
309+
</svg>
310+
</div>
311+
</div>
312+
<div class="options">
313+
<div class="option" (click)="setAge('')" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL">
314+
</div>
315+
<div *ngFor="let number of [].constructor(AGE_LIMIT); let i = index" class="option" (click)="setAge((i + 1))">
316+
{{ i + 1 }}
317+
</div>
318+
</div>
319+
</div>
320+
</cos-input>
321+
322+
<cos-input *ngIf="hasDemograficsField.gender" [placeholder]="'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER' | translate"
323+
class="dropdown_input">
324+
<div class="dropdown" [cosDropdown]>
325+
<div class="selection">
326+
<div class="selected_item">
327+
<span *ngIf="!ideaFilters.gender" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"></span>
328+
<span *ngIf="ideaFilters.gender === 'male'">
329+
{{'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_MALE'
330+
|
331+
translate}}</span>
332+
<span *ngIf="ideaFilters.gender === 'female'">
333+
{{'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_FEMALE'
334+
|
335+
translate}}</span>
336+
<span *ngIf="ideaFilters.gender === 'other'">
337+
{{'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_OTHER_PLACEHOLDER'
338+
|
339+
translate}}</span>
340+
</div>
341+
<div><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
342+
xmlns="http://www.w3.org/2000/svg">
343+
<path d="M17 10L12 15L7 10" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
344+
</svg>
345+
</div>
346+
</div>
347+
<div class="options">
348+
<div class="option" (click)="setGender('')" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL">
349+
</div>
350+
<div *ngFor="let gender of ['female', 'male', 'other']" class="option" (click)="setGender(gender)">
351+
{{ "VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_" + (gender === "other" ? gender + "_placeholder" : gender).toUpperCase() | translate }}
352+
</div>
353+
</div>
354+
</div>
355+
</cos-input>
356+
357+
<cos-input *ngIf="isCountryEstonia && hasDemograficsField.residence" [placeholder]="'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE' | translate"
358+
class="dropdown_input">
359+
<div class="dropdown" [cosDropdown]>
360+
<div class="selection">
361+
<div class="selected_item">
362+
<span *ngIf="!ideaFilters.residence" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL"></span>
363+
<span *ngIf="ideaFilters.residence">
364+
{{ideaFilters.residence | titlecase}}
365+
</span>
366+
</div>
367+
<div><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
368+
xmlns="http://www.w3.org/2000/svg">
369+
<path d="M17 10L12 15L7 10" stroke="#2C3B47" stroke-width="2" stroke-linecap="round" />
370+
</svg>
371+
</div>
372+
</div>
373+
<div class="options">
374+
<div class="option" (click)="setResidence('')" translate="COMPONENTS.TOPIC_IDEATION.FILTER_ALL">
375+
</div>
376+
<div *ngFor="let residence of municipalities;" class="option" (click)="setResidence((residence.name))">
377+
{{ residence.name }}
378+
</div>
379+
<div class="option" (click)="setResidence('other')" translate="VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER_PLACEHOLDER">
380+
</div>
381+
</div>
382+
</div>
383+
</cos-input>
293384
</div>
385+
294386
<!--MOBILE_TOPIC_FILTERS-->
295387
<div class="dropdown mobile_filters_selection mobile_show"
296388
[ngClass]="{'dropdown_active': mobileIdeaFiltersList}">
@@ -323,6 +415,7 @@
323415
translate}}</span>
324416
</span>
325417
</a>
418+
326419
<a class="filter_option" (click)="mobileIdeaFilters.orderBy = true">
327420
<span class="filter_option_text" translate="COMPONENTS.TOPIC_IDEATION.IDEA_FILTER_ORDER"></span>
328421
<span class="bold">
@@ -340,13 +433,30 @@
340433
translate}}</span>
341434
</span>
342435
</a>
436+
343437
<a class="filter_option" (click)="mobileIdeaFilters.participants = true">
344438
<span class="filter_option_text" translate="COMPONENTS.TOPIC_IDEATION.IDEA_FILTER_PARTICIPANTS"></span>
345439
<span class="bold">{{(ideaFilters.participants.name)?
346440
ideaFilters.participants.name :
347441
'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' |
348442
translate | titlecase}}</span>
349443
</a>
444+
445+
<a class="filter_option" (click)="mobileIdeaFilters.age = true">
446+
<span class="filter_option_text" translate="VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_AGE"></span>
447+
<span class="bold">{{(ideaFilters.age) ? ideaFilters.age : 'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate}}</span>
448+
</a>
449+
450+
<a class="filter_option" (click)="mobileIdeaFilters.gender = true">
451+
<span class="filter_option_text" translate="VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER"></span>
452+
<span class="bold">{{(ideaFilters.gender) ? (ideaFilters.gender | titlecase) : 'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate}}</span>
453+
</a>
454+
455+
<a *ngIf="isCountryEstonia" class="filter_option" (click)="mobileIdeaFilters.residence = true">
456+
<span class="filter_option_text" translate="VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE"></span>
457+
<span class="bold">{{(ideaFilters.residence) ? (ideaFilters.residence | titlecase) : 'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate}}</span>
458+
</a>
459+
350460
<button (click)="doClearFilters()" class="btn_medium_plain">
351461
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
352462
<path
@@ -496,8 +606,99 @@
496606
(click)="setParticipant(mobileIdeaFilters.participants);mobileIdeaFilters.participants= false;"
497607
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
498608
</div>
609+
610+
<div class="options button_options" *ngIf="mobileIdeaFilters.age">
611+
<a class="btn_medium_close icon" (click)="closeMobileFilter()">
612+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
613+
<path
614+
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"
615+
fill="#2C3B47" />
616+
</svg>
617+
</a>
618+
619+
<div class="options_wrapper">
620+
<label class="checkbox" (click)="mobileIdeaFilters.age = 'all';">
621+
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
622+
<input type="radio" name="orderBy">
623+
<span class="checkmark"></span>
624+
</label>
625+
626+
<label *ngFor="let number of [].constructor(AGE_LIMIT); let i = index" class="checkbox" (click)="mobileIdeaFilters.age = i + 1;">
627+
<span>{{ i + 1 }}</span>
628+
<input type="radio" name="age">
629+
<span class="checkmark"></span>
630+
</label>
631+
</div>
632+
633+
<button class="btn_medium_secondary"
634+
(click)="setAge(mobileIdeaFilters.age);mobileIdeaFilters.age= false;"
635+
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
636+
</div>
637+
638+
<div class="options button_options" *ngIf="mobileIdeaFilters.gender">
639+
<a class="btn_medium_close icon" (click)="closeMobileFilter()">
640+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
641+
<path
642+
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"
643+
fill="#2C3B47" />
644+
</svg>
645+
</a>
646+
647+
<div class="options_wrapper">
648+
<label class="checkbox" (click)="mobileIdeaFilters.gender = 'all';">
649+
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
650+
<input type="radio" name="gebder">
651+
<span class="checkmark"></span>
652+
</label>
653+
654+
<label *ngFor="let gender of ['female', 'male', 'other']" class="checkbox" (click)="mobileIdeaFilters.gender = gender;">
655+
<span>{{ "VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_GENDER_" + (gender === "other" ? gender + "_placeholder" : gender).toUpperCase() | translate }}</span>
656+
<input type="radio" name="orderBy">
657+
<span class="checkmark"></span>
658+
</label>
659+
</div>
660+
661+
<button class="btn_medium_secondary"
662+
(click)="setGender(mobileIdeaFilters.gender);mobileIdeaFilters.gender= false;"
663+
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
664+
</div>
665+
666+
<div class="options button_options" *ngIf="mobileIdeaFilters.residence">
667+
<a class="btn_medium_close icon" (click)="closeMobileFilter()">
668+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
669+
<path
670+
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"
671+
fill="#2C3B47" />
672+
</svg>
673+
</a>
674+
675+
<div class="options_wrapper">
676+
<label class="checkbox" (click)="mobileIdeaFilters.residence= 'all';">
677+
<span [innerHTML]="'COMPONENTS.TOPIC_IDEATION.FILTER_ALL' | translate | titlecase"></span>
678+
<input type="radio" name="orderBy">
679+
<span class="checkmark"></span>
680+
</label>
681+
682+
<label *ngFor="let residence of municipalities; let i = index" class="checkbox" (click)="mobileIdeaFilters.residence= residence.name;">
683+
<span>{{ residence.name }}</span>
684+
<input type="radio" name="age">
685+
<span class="checkmark"></span>
686+
</label>
687+
688+
<label class="checkbox" (click)="mobileIdeaFilters.residence= 'other';">
689+
<span>{{ 'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER_PLACEHOLDER' | translate | titlecase }}</span>
690+
<input type="radio" name="age">
691+
<span class="checkmark"></span>
692+
</label>
693+
</div>
694+
695+
<button class="btn_medium_secondary"
696+
(click)="setResidence(mobileIdeaFilters.residence);mobileIdeaFilters.residence= false;"
697+
translate="COMPONENTS.TOPIC_IDEATION.BTN_APPLY"></button>
698+
</div>
499699
</div>
500700
</div>
701+
501702
<div class="selected_participant_wrap" *ngIf="ideaFilters.participants.name">
502703
<div class="participant_row">
503704
<div class="row_label">

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -219,17 +219,18 @@
219219
.idea_filters_wrap {
220220
display: flex;
221221
gap: 16px;
222-
flex-direction: row;
222+
flex-direction: column;
223223
padding: 24px 0;
224224
width: 100%;
225225

226226
.options_row {
227227
display: flex;
228+
flex-wrap: wrap;
228229
gap: 24px;
229230
width: 100%;
230231

231232
.dropdown_input {
232-
width: 100%;
233+
width: calc(100% / 3 - 16px);
233234
}
234235
}
235236
}

0 commit comments

Comments
 (0)