1.3.10 (#2323)

* #2034 (#2322)

* add filters

* update filter

---------

Co-authored-by: Viktar Maslouski <[email protected]>

* update age filter

* fix styles

* wip mobile

* update with multiple ages

* add not items found text

* updated

* update check

* chore:Update CHANGELOG.md

* 1.3.10

---------

Co-authored-by: Viktar Maslouski <[email protected]>

Author: ilmartyrk

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2025-06-18 - v1.3.10
+  * Fix: Issue #2034 -IDEAS: Add filters for demographic data
+  * Fix: Issue #2302 -IDEAS: Allow users to select multiple ages in age filter
+  * Fix: Issue #2303 -IDEAS: Display no results found message for idea filters
+  * Fix: Issue #2308 -IDEA GATHERING: Default no results found message when there are 0 ideas
+
 ## 2025-06-18 - v1.3.9
   * Fix: Issue #1487 - SEARCH: Add 'No results found" message to search, and signpost to Help
   * Fix: Issue #1490 - TOPICS: 'Read more' button not as it should look - text pokes out underneath and margins too big

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "citizenos-fe",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "scripts": {
     "dev": "node ./prebuild.js && ng serve --host",
     "ng": "ng",

package.json

@@ -219,17 +219,18 @@
 .idea_filters_wrap {
   display: flex;
   gap: 16px;
-  flex-direction: row;
+  flex-direction: column;
   padding: 24px 0;
   width: 100%;
 
   .options_row {
     display: flex;
+    flex-wrap: wrap;
     gap: 24px;
     width: 100%;
 
     .dropdown_input {
-      width: 100%;
+      width: calc(100% / 3 - 16px);
     }
   }
 }

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

@@ -9,6 +9,7 @@ import { of, take, map, BehaviorSubject, combineLatest, switchMap } from 'rxjs';
 import { ConfirmDialogComponent } from '@shared/components/confirm-dialog/confirm-dialog.component';
 import { TopicIdeaService } from '@services/topic-idea.service';
 import { Component, Input, NgZone } from '@angular/core';
+import { municipalities } from '@services/municipalitiy.service';
 
 import { CreateIdeaFolderComponent } from '../create-idea-folder/create-idea-folder.component';
 import { ActivatedRoute } from '@angular/router';
@@ -34,6 +35,7 @@ export class TopicIdeationComponent {
   @Input() ideation!: any;
   @Input() topic!: Topic;
 
+  AGE_LIMIT = 110;
   public FILTERS_ALL = 'all';
   STATUSES = this.TopicService.STATUSES;
   VISIBILITY = this.TopicService.VISIBILITY;
@@ -51,6 +53,9 @@ export class TopicIdeationComponent {
   allIdeas$: Idea[] = [];
   tabSelected = 'ideas';
   ideaFilters = {
+    age: <string[]>[],
+    gender: '',
+    residence: '',
     type: '',
     orderBy: '',
     participants: <User | any>''
@@ -59,12 +64,23 @@ export class TopicIdeationComponent {
   mobileIdeaFiltersList = false;
 
   mobileIdeaFilters: any = {
+    age: <string[]>[],
+    gender: '',
+    residence: '',
     type: '',
     orderBy: '',
     participants: <User | any>''
   }
 
+  mobileAges = <string[]>[];
+
+
+  municipalities = municipalities;
+
   ideaTypeFilter$ = new BehaviorSubject('');
+  ageFilter$ = new BehaviorSubject<(number | string)[]>([]);
+  genderFilter$ = new BehaviorSubject('');
+  residenceFilter$ = new BehaviorSubject('');
   orderFilter$ = new BehaviorSubject('');
   ideaParticipantsFilter$ = new BehaviorSubject(<User | string>'');
   searchIdeasInput = '';
@@ -90,9 +106,9 @@ export class TopicIdeationComponent {
   ) { }
 
   ngOnInit(): void {
-    this.ideas$ = combineLatest([this.ideaTypeFilter$, this.orderFilter$, this.ideaParticipantsFilter$, this.folderFilter$, this.ideaSearchFilter$, this.TopicIdeaService.reload$])
+    this.ideas$ = combineLatest([this.ideaTypeFilter$, this.orderFilter$, this.ideaParticipantsFilter$, this.folderFilter$, this.ideaSearchFilter$, this.TopicIdeaService.reload$, this.ageFilter$, this.genderFilter$, this.residenceFilter$])
       .pipe(
-        switchMap(([typeFilter, orderFilter, participantFilter, folderFilter, search, load]) => {
+        switchMap(([typeFilter, orderFilter, participantFilter, folderFilter, search, load, age, gender, residence]) => {
           this.TopicIdeaService.reset();
           this.TopicIdeaService.setParam('topicId', this.topic.id);
           this.TopicIdeaService.setParam('ideationId', this.topic.ideationId);
@@ -122,7 +138,15 @@ export class TopicIdeationComponent {
             this.TopicIdeaService.setParam('search', search);
           }
 
-          if (typeFilter || orderFilter || participantFilter || folderFilter || search) {
+          if (age || gender || residence) {
+            this.TopicIdeaService.setParam('demographics', JSON.stringify({
+              ...(age && Array.isArray(age) && age.length && { age: age.map(String) }),
+              ...(gender && { gender }),
+              ...(residence && { residence })
+            }));
+          }
+
+          if (typeFilter || orderFilter || participantFilter || folderFilter || search || age?.length > 0 || gender || residence) {
             this.filtersSet = true;
           } else {
             this.filtersSet = false;
@@ -172,12 +196,62 @@ export class TopicIdeationComponent {
     })
   }
 
+  get isCountryEstonia() {
+    return this.topic.country === 'Estonia';
+  }
+
+  get hasDemograficsField() {
+    return {
+      age: this.ideation.demographicsConfig?.age,
+      gender: this.ideation.demographicsConfig?.gender,
+      residence: this.ideation.demographicsConfig?.residence
+    };
+  }
+
+  get sortedSelectedAges() {
+    return this.ideaFilters.age.sort((a, b) => {
+      const ageA = parseInt(a, 10);
+      const ageB = parseInt(b, 10);
+      return ageA - ageB;
+    }
+    ).join(', ');
+  }
+
   setType(type: string) {
     if (type === 'all' || typeof type !== 'string') type = '';
     this.ideaTypeFilter$.next(type);
     this.ideaFilters.type = type;
   }
 
+  setAge(_age: number | string) {
+    const age = _age.toString();
+    if (age === 'all' || age === '') {
+      this.ageFilter$.next([]);
+      this.ideaFilters.age = [];
+      return;
+    }
+
+    const idx = this.ideaFilters.age.indexOf(age);
+    if (idx > -1) {
+      this.ideaFilters.age.splice(idx, 1);
+    } else {
+      this.ideaFilters.age.push(age);
+    }
+    this.ageFilter$.next([...this.ideaFilters.age]);
+  }
+
+  setGender(value: string) {
+    if (value === 'all') value = '';
+    this.genderFilter$.next(value);
+    this.ideaFilters.gender = value;
+  }
+
+  setResidence(value: string) {
+    if (value === 'all') value = '';
+    this.residenceFilter$.next(value);
+    this.ideaFilters.residence = value;
+  }
+
   userIndex() {
     let userIndex = this.users.findIndex((user) => user.id === this.ideaFilters.participants?.id)
     return userIndex + 1;
@@ -233,8 +307,12 @@ export class TopicIdeationComponent {
   doClearFilters() {
     this.setType('');
     this.orderBy('');
+    this.setAge('');
+    this.setGender('');
+    this.setResidence('');
     this.setParticipant();
     this.filtersSet = false;
+    this.mobileAges = [];
   }
 
   saveIdeation() {
@@ -405,6 +483,9 @@ export class TopicIdeationComponent {
 
   showMobileOverlay() {
     const filtersShow = Object.entries(this.mobileIdeaFilters).find(([key, value]) => {
+      if (key === 'age') {
+        return Array.isArray(value) && value.length > 0;
+      }
       return !!value;
     });
 

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

@@ -42,6 +42,7 @@ export class TopicIdeaService extends ItemsListService {
     showModerated: <boolean | string | null>null,
     favourite: <boolean | string | null>null,
     limit: <number>15,
+    demographics: <null>null,
   };
 
   params$ = new BehaviorSubject(this.params);

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

@@ -815,6 +815,7 @@
       "OPTION_DELETE_FOLDER": "Delete folder",
       "BTN_CREATE_NEW_FOLDER": "Create new folder",
       "NO_FOLDERS_HEADING": "There are no idea folders yet",
+      "NO_ITEMS_FOUND": "No results found with these filters. Try adjusting your filters and search again.",
       "NO_FOLDERS_DESC": "Topic admins can create folders to group ideas that fit in the same category."
     },
     "TOUR": {
@@ -2363,9 +2364,11 @@
       "DEMOGRAPHICS_DATA_GENDER_FEMALE": "Female",
       "DEMOGRAPHICS_DATA_GENDER_PLACEHOLDER": "Your gender (optional)",
       "DEMOGRAPHICS_DATA_GENDER_OTHER": "Other - please specify",
+      "DEMOGRAPHICS_DATA_GENDER_OTHER_PLACEHOLDER": "Other",
       "DEMOGRAPHICS_DATA_RESIDENCE": "Municipality",
       "DEMOGRAPHICS_DATA_RESIDENCE_OTHER": "Other - please specify",
       "DEMOGRAPHICS_DATA_RESIDENCE_PLACEHOLDER": "Your municipality (optional)",
+      "DEMOGRAPHICS_DATA_RESIDENCE_OTHER_PLACEHOLDER": "Other",
       "PREVIEW_INFO": "<b>This is a preview of your topic!</b> You can still edit your topic at any point prior to starting a vote.",
       "BTN_IDEATION_ACTIONS": "Manage idea gathering",
       "NO_IDEAS_HEADING": "There are no ideas yet",

src/app/services/topic-idea.service.ts

@@ -361,6 +361,8 @@ input {
       justify-content: space-between;
       background-color: var(--color-background);
       border-radius: 16px;
+      gap: 8px;
+      text-align: right;
 
       .filter_option_text {
         color: var(--color-text);