Merge pull request #1801 from citizenos/#1653-add-close-filter

#1653 add close filter
citizenos · Jan 15, 2025 · 293e2fd · 293e2fd
2 parents cb55e59 + 487c948
commit 293e2fd
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 77 deletions.
diff --git a/src/app/my-groups/my-groups.component.html b/src/app/my-groups/my-groups.component.html
@@ -475,9 +475,13 @@
           translate="BTN_APPLY"></button>
       </div>
       <div class="options button_options" *ngIf="mobileFilters.country">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="countrySearch"
-          (search)="searchCountry($event)" [placeholder]="'VIEWS.MY_GROUPS.FILTER_COUNTRY' | translate">
-        </typeahead>
+        <search-filter
+          [term]="countrySearch"
+          [placeholder]="'VIEWS.MY_GROUPS.FILTER_COUNTRY' | translate"
+          [search]="searchCountry.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
+
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.country = 'all'">
             <span translate="VIEWS.MY_GROUPS.FILTER_ALL"></span>
@@ -493,13 +497,17 @@
           </ng-container>
         </div>
         <button class="btn_medium_secondary"
-          (click)="setCountry(mobileFilters.country.trim()); mobileFilters.country= false;"
+          (click)="setCountry(mobileFilters.country.trim()); closeMobileFilter();"
           translate="BTN_APPLY"></button>
       </div>
       <div class="options button_options" *ngIf="mobileFilters.language">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="languageSearch"
-          (search)="searchLanguage($event)" [placeholder]="'VIEWS.MY_GROUPS.FILTER_LANGUAGE' | translate">
-        </typeahead>
+        <search-filter
+          [term]="languageSearch"
+          [placeholder]="'VIEWS.MY_GROUPS.FILTER_LANGUAGE' | translate"
+          [search]="searchLanguage.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
+
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.language = 'all'">
             <span translate="VIEWS.MY_GROUPS.FILTER_ALL"></span>
@@ -514,8 +522,9 @@
             </label>
           </ng-container>
         </div>
+
         <button class="btn_medium_secondary"
-          (click)="setLanguage(mobileFilters.language.trim()); mobileFilters.language = false;"
+          (click)="setLanguage(mobileFilters.language.trim()); closeMobileFilter();"
           translate="BTN_APPLY"></button>
       </div>
     </div>

diff --git a/src/app/my-groups/my-groups.component.ts b/src/app/my-groups/my-groups.component.ts
@@ -191,8 +191,17 @@ export class MyGroupsComponent implements OnInit {
     const filtersShow = Object.entries(this.mobileFilters).find(([key, value]) => {
       return !!value;
     })
-    if (filtersShow)
-      this.mobileFilters[filtersShow[0]] = false;
+
+    if (filtersShow) {
+      const filterName = filtersShow[0]
+      this.mobileFilters[filterName] = false;
+      if (filterName === 'language') {
+        this.languageSearch$.next(this.languageSearch);
+      }
+      if (filterName === 'country') {
+        this.countrySearch$.next(this.countrySearch);
+      }
+    }
   }
 
   doClearFilters() {

diff --git a/src/app/my-topics/my-topics.component.html b/src/app/my-topics/my-topics.component.html
@@ -522,20 +522,24 @@
         </div>
 
         <button class="btn_medium_secondary"
-          (click)="setCategory(mobileFilters.category);mobileFilters.category= false;"
+          (click)="setCategory(mobileFilters.category); closeMobileFilter();"
           translate="COMPONENTS.PUBLIC_TOPICS.BTN_APPLY"></button>
       </div>
 
       <div class="options button_options" *ngIf="mobileFilters.country">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="countrySearch"
-          (search)="searchCountry($event)" [placeholder]="'VIEWS.MY_TOPICS.FILTER_COUNTRY' | translate">
-        </typeahead>
+        <search-filter
+          [term]="countrySearch"
+          [placeholder]="'VIEWS.MY_TOPICS.FILTER_COUNTRY' | translate"
+          [search]="searchCountry.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.country = 'all'">
             <span translate="VIEWS.MY_TOPICS.FILTER_ALL"></span>
             <input type="radio" name="country">
             <span class="checkmark"></span>
           </label>
+
           <ng-container *ngIf="countries$ | async as countries">
             <label class="checkbox" *ngFor="let country of countries" (click)="mobileFilters.country = country.name;">
               <span>{{country.name}}</span>
@@ -544,21 +548,26 @@
             </label>
           </ng-container>
         </div>
-        <button class="btn_medium_secondary" (click)="setCountry(mobileFilters.country);mobileFilters.country= false;"
+
+        <button class="btn_medium_secondary" (click)="setCountry(mobileFilters.country); closeMobileFilter();"
           translate="VIEWS.MY_TOPICS.BTN_APPLY"></button>
       </div>
 
       <div class="options button_options" *ngIf="mobileFilters.language">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="languageSearch"
-          (search)="searchLanguage($event)" [placeholder]="'VIEWS.MY_TOPICS.FILTER_LANGUAGE' | translate">
-        </typeahead>
+        <search-filter
+          [term]="languageSearch"
+          [placeholder]="'VIEWS.MY_TOPICS.FILTER_LANGUAGE' | translate"
+          [search]="searchLanguage.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
 
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.language = 'all'">
             <span translate="VIEWS.MY_GROUPS.FILTER_ALL"></span>
             <input type="radio" name="language">
             <span class="checkmark"></span>
           </label>
+
           <ng-container *ngIf="languages$ | async as languages">
             <label class="checkbox" *ngFor="let language of languages" (click)="mobileFilters.language = language.name;">
               <span>{{language.name}}</span>
@@ -569,7 +578,7 @@
         </div>
 
         <button class="btn_medium_secondary"
-          (click)="setLanguage(mobileFilters.language); mobileFilters.language= false;"
+          (click)="setLanguage(mobileFilters.language); closeMobileFilter();"
           translate="VIEWS.MY_TOPICS.BTN_APPLY"></button>
       </div>
     </div>

diff --git a/src/app/my-topics/my-topics.component.ts b/src/app/my-topics/my-topics.component.ts
@@ -185,8 +185,16 @@ export class MyTopicsComponent {
     const filtersShow = Object.entries(this.mobileFilters).find(([key, value]) => {
       return !!value;
     })
-    if (filtersShow)
-      this.mobileFilters[filtersShow[0]] = false;
+    if (filtersShow) {
+      const filterName = filtersShow[0]
+      this.mobileFilters[filterName] = false;
+      if (filterName === 'language') {
+        this.languageSearch$.next(this.languageSearch);
+      }
+      if (filterName === 'country') {
+        this.countrySearch$.next(this.countrySearch);
+      }
+    }
   }
 
   searchCountry(event: any) {

diff --git a/src/app/public-groups/components/groups/groups.component.html b/src/app/public-groups/components/groups/groups.component.html
@@ -392,19 +392,13 @@
           translate="BTN_APPLY"></button>
       </div>
       <div class="options button_options" *ngIf="mobileFilters.country">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="countrySearch"
-          (search)="searchCountry($event)" [placeholder]="'VIEWS.PUBLIC_GROUPS.FILTERS.COUNTRY' | translate">
-          <!--ng-container *ngIf="countries$ | async as countries">
-            <div class="options" [ngClass]="{'active': !countries.length}">
-              <ng-container *ngIf="countries$ | async as listCountry">
-                <div class="option" (click)="setCountry('');" translate="TXT_TOPIC_STATUS_ALL"></div>
-                <div class="option" [typeaheadItem]="country.name" *ngFor="let country of listCountry" (click)="setCountry(country.name)">
-                  <div class="item_text_wrap">{{country.name}}</div>
-                </div>
-              </ng-container>
-            </div>
-          </ng-container-->
-        </typeahead>
+        <search-filter
+          [term]="countrySearch"
+          [placeholder]="'VIEWS.PUBLIC_GROUPS.FILTERS.COUNTRY' | translate"
+          [search]="searchCountry.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
+
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.country = 'all'">
             <span translate="VIEWS.PUBLIC_GROUPS.FILTERS.ALL"></span>
@@ -419,24 +413,19 @@
             </label>
           </ng-container>
         </div>
+
         <button class="btn_medium_secondary"
-          (click)="setCountry(mobileFilters.country.trim());mobileFilters.country= false;"
+          (click)="setCountry(mobileFilters.country.trim()); closeMobileFilter();"
           translate="BTN_APPLY"></button>
       </div>
       <div class="options button_options" *ngIf="mobileFilters.language">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="languageSearch"
-          (search)="searchLanguage($event)" [placeholder]="'VIEWS.PUBLIC_GROUPS.FILTERS.LANGUAGE' | translate">
-          <!--ng-container *ngIf="countries$ | async as countries">
-            <div class="options" [ngClass]="{'active': !countries.length}">
-              <ng-container *ngIf="countries$ | async as listCountry">
-                <div class="option" (click)="setCountry('');" translate="TXT_TOPIC_STATUS_ALL"></div>
-                <div class="option" [typeaheadItem]="country.name" *ngFor="let country of listCountry" (click)="setCountry(country.name)">
-                  <div class="item_text_wrap">{{country.name}}</div>
-                </div>
-              </ng-container>
-            </div>
-          </ng-container-->
-        </typeahead>
+        <search-filter
+          [term]="languageSearch"
+          [placeholder]="'VIEWS.PUBLIC_GROUPS.FILTERS.LANGUAGE' | translate"
+          [search]="searchLanguage.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
+
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.language = 'all'">
             <span translate="VIEWS.PUBLIC_GROUPS.FILTERS.ALL"></span>
@@ -451,26 +440,11 @@
             </label>
           </ng-container>
         </div>
+
         <button class="btn_medium_secondary"
-          (click)="setLanguage(mobileFilters.language.trim());mobileFilters.language= false;"
+          (click)="setLanguage(mobileFilters.language.trim()); closeMobileFilter();"
           translate="BTN_APPLY"></button>
       </div>
-      <!--div class="options button_options" *ngIf="mobileFilters.country">
-        <label class="checkbox" *ngFor="let country of countries" (click)="setCountry(country.name)">
-          <span>{{country.name}}</span>
-          <input type="radio" name="country" (click)="setCountry(country.name)">
-          <span class="checkmark"></span>
-        </label>
-        <button class="btn_medium_secondary" (click)="mobileFilters.country = false;" translate="BTN_APPLY"></button>
-      </!--div>
-      <div-- class="options button_options" *ngIf="mobileFilters.language">
-        <label class="checkbox" *ngFor="let language of languages" (click)="setLanguage(language.name)">
-          <span>{{language.name}}</span>
-          <input type="radio" name="language" (click)="setLanguage(language.name)">
-          <span class="checkmark"></span>
-        </label>
-        <button class="btn_medium_secondary" (click)="mobileFilters.language = false;" translate="BTN_APPLY"></button>
-      </div-->
     </div>
   </div>
   <div class="groups_content">

diff --git a/src/app/public-groups/components/groups/groups.component.ts b/src/app/public-groups/components/groups/groups.component.ts
@@ -194,8 +194,16 @@ export class GroupsComponent implements OnInit {
     const filtersShow = Object.entries(this.mobileFilters).find(([key, value]) => {
       return !!value;
     })
-    if (filtersShow)
-      this.mobileFilters[filtersShow[0]] = false;
+    if (filtersShow) {
+      const filterName = filtersShow[0]
+      this.mobileFilters[filterName] = false;
+      if (filterName === 'language') {
+        this.languageSearch$.next(this.languageSearch);
+      }
+      if (filterName === 'country') {
+        this.countrySearch$.next(this.countrySearch);
+      }
+    }
   }
 
   showMobileOverlay () {

diff --git a/src/app/public-topics/components/topics/topics.component.html b/src/app/public-topics/components/topics/topics.component.html
@@ -325,9 +325,12 @@
           translate="COMPONENTS.PUBLIC_TOPICS.BTN_APPLY"></button>
       </div>
       <div class="options button_options" *ngIf="mobileFilters.country">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="countrySearch"
-          (search)="searchCountry($event)" [placeholder]="'COMPONENTS.PUBLIC_TOPICS.FILTER_COUNTRY' | translate">
-        </typeahead>
+        <search-filter
+          [term]="countrySearch"
+          [placeholder]="'COMPONENTS.PUBLIC_TOPICS.FILTER_COUNTRY' | translate"
+          [search]="searchCountry.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
 
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.country = 'all'">
@@ -343,13 +346,18 @@
             </label>
           </ng-container>
         </div>
-        <button class="btn_medium_secondary" (click)="setCountry(mobileFilters.country);mobileFilters.country= false;"
+
+        <button class="btn_medium_secondary" (click)="setCountry(mobileFilters.country); closeMobileFilter();"
           translate="COMPONENTS.PUBLIC_TOPICS.BTN_APPLY"></button>
       </div>
       <div class="options button_options" *ngIf="mobileFilters.language">
-        <typeahead class="dropdown dropdown_input" activeClass="dropdown_active" [term]="languageSearch"
-          (search)="searchLanguage($event)" [placeholder]="'COMPONENTS.PUBLIC_TOPICS.FILTER_LANGUAGE' | translate">
-        </typeahead>
+        <search-filter
+          [term]="languageSearch"
+          [placeholder]="'COMPONENTS.PUBLIC_TOPICS.FILTER_LANGUAGE' | translate"
+          [search]="searchLanguage.bind(this)"
+          [close]="closeMobileFilter.bind(this)"
+        />
+
         <div class="options_wrapper">
           <label class="checkbox" (click)="mobileFilters.language = 'all'">
             <span translate="TXT_TOPIC_STATUS_ALL"></span>
@@ -364,8 +372,9 @@
             </label>
           </ng-container>
         </div>
+
         <button class="btn_medium_secondary"
-          (click)="setLanguage(mobileFilters.language);mobileFilters.language= false;"
+          (click)="setLanguage(mobileFilters.language); closeMobileFilter();"
           translate="COMPONENTS.PUBLIC_TOPICS.BTN_APPLY"></button>
       </div>
     </div>

diff --git a/src/app/public-topics/components/topics/topics.component.ts b/src/app/public-topics/components/topics/topics.component.ts
@@ -222,8 +222,16 @@ export class TopicsComponent implements OnInit {
     const filtersShow = Object.entries(this.mobileFilters).find(([key, value]) => {
       return !!value;
     })
-    if (filtersShow)
-      this.mobileFilters[filtersShow[0]] = false;
+    if (filtersShow) {
+      const filterName = filtersShow[0]
+      this.mobileFilters[filterName] = false;
+      if (filterName === 'language') {
+        this.languageSearch$.next(this.languageSearch);
+      }
+      if (filterName === 'country') {
+        this.countrySearch$.next(this.countrySearch);
+      }
+    }
   }
 
   showMobileOverlay() {

diff --git a/src/app/shared/components/search-filter/search-filter.component.html b/src/app/shared/components/search-filter/search-filter.component.html
@@ -0,0 +1,10 @@
+<typeahead class="dropdown dropdown_input dropdown_wrapper" activeClass="dropdown_active" [term]="term"
+  (search)="search($event)" [placeholder]="placeholder">
+  <a class="btn_medium_close icon" (click)="close()">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        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"
+        fill="#2C3B47" />
+    </svg>
+  </a>
+</typeahead>
diff --git a/src/app/shared/components/search-filter/search-filter.component.scss b/src/app/shared/components/search-filter/search-filter.component.scss
@@ -0,0 +1,5 @@
+.dropdown_wrapper {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
diff --git a/src/app/shared/components/search-filter/search-filter.component.spec.ts b/src/app/shared/components/search-filter/search-filter.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchFilterComponent } from './search-filter.component';
+
+describe('SearchFilterComponent', () => {
+  let component: SearchFilterComponent;
+  let fixture: ComponentFixture<SearchFilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SearchFilterComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/search-filter/search-filter.component.ts b/src/app/shared/components/search-filter/search-filter.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'search-filter',
+  templateUrl: './search-filter.component.html',
+  styleUrls: ['./search-filter.component.scss'],
+})
+
+export class SearchFilterComponent {
+  @Input() term!: string;
+  @Input() placeholder!: string;
+  @Input() search!: (event: string | null) => void;
+  @Input() close!: () => void;
+}