From fc5fcfaedec0376965f368ad8756bcfb13254deb Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Thu, 7 Jul 2022 10:54:12 +0300
Subject: [PATCH] [Connect & Library | new-theme]: 1.
 projects-in-modal.module.ts: Imported DropdownFilterModule. 2.
 projects-in-modal.component.ts: Use common <dropdown-filter> instead of
 custom uk-button and uk-dropdown. 3. full-screen-modal.component.ts: [Bug
 fix] In ngOnDestroy added check for observer - error in ssr.

---
 .../projects-in-modal.component.ts            | 32 +++++++++----------
 .../landing-utils/projects-in-modal.module.ts |  3 +-
 .../full-screen-modal.component.ts            |  2 +-
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/landingPages/landing-utils/projects-in-modal.component.ts b/landingPages/landing-utils/projects-in-modal.component.ts
index 088d68c1..a2b055e7 100644
--- a/landingPages/landing-utils/projects-in-modal.component.ts
+++ b/landingPages/landing-utils/projects-in-modal.component.ts
@@ -14,23 +14,21 @@ import {OpenaireEntities} from '../../utils/properties/searchFields';
 @Component({
   selector: 'projectsInModal',
   template: `
-		<div *ngIf="fetchProjects.funders.length > 1" class="uk-margin-medium-bottom">
-			<ng-container *ngFor="let filter of fetchProjects.filters">
-				<div class="uk-inline">
-					<button class="uk-button uk-button-default uk-button-small uk-margin-small-bottom" type="button">
-						{{filter.title}}<span *ngIf="filter.countSelectedValues>0"> ({{filter.countSelectedValues}})</span> <span uk-icon="chevron-down"></span>
-					</button>
-					<div uk-dropdown="mode: click" class="uk-width-large uk-overflow-auto" style="max-width:460px !important; ">
-						<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
-							<search-filter [filter]="filter"
-								[showResultCount]=true filterValuesNum="0"
-								(onFilterChange)="filterChange($event)" [actionRoute]="false">
-							</search-filter>
-						</div>
-					</div>
-				</div>
-			</ng-container>
-		</div>
+    <div *ngIf="fetchProjects.funders.length > 1" class="uk-margin-medium-bottom">
+      <ng-container *ngFor="let filter of fetchProjects.filters">
+        <div class="uk-inline">
+          <dropdown-filter #dropdownFilter dropdownClass="uk-width-large uk-padding-small uk-margin-medium-bottom"
+                           [name]="filter.title" [count]="filter.countSelectedValues">
+            <div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
+              <search-filter [filter]="filter"
+                             [showResultCount]=true filterValuesNum="0"
+                             (onFilterChange)="filterChange($event)" [actionRoute]="false">
+              </search-filter>
+            </div>
+          </dropdown-filter>
+        </div>
+      </ng-container>
+    </div>
     <errorMessages [status]="[fetchProjects.searchUtils.status]" [type]="openaireEntities.PROJECTS"
                    tab_error_class=true></errorMessages>
     <div *ngIf="fetchProjects.searchUtils.status == errorCodes.DONE">
diff --git a/landingPages/landing-utils/projects-in-modal.module.ts b/landingPages/landing-utils/projects-in-modal.module.ts
index b4585b68..a2fd0aec 100644
--- a/landingPages/landing-utils/projects-in-modal.module.ts
+++ b/landingPages/landing-utils/projects-in-modal.module.ts
@@ -13,13 +13,14 @@ import {ErrorMessagesModule} from '../../utils/errorMessages.module';
 import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module";
 import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
 import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.module';
+import {DropdownFilterModule} from "../../utils/dropdown-filter/dropdown-filter.module";
 
 @NgModule({
   imports: [
     RouterModule, CommonModule, FormsModule,
     ProjectsServiceModule,
     PagingModule, ErrorMessagesModule, NoLoadPaging,
-		SearchResultsModule, SearchFilterModule
+    SearchResultsModule, SearchFilterModule, DropdownFilterModule
   ],
   declarations: [
     ProjectsInModalComponent
diff --git a/utils/modal/full-screen-modal/full-screen-modal.component.ts b/utils/modal/full-screen-modal/full-screen-modal.component.ts
index 42e0b3d8..15b4a144 100644
--- a/utils/modal/full-screen-modal/full-screen-modal.component.ts
+++ b/utils/modal/full-screen-modal/full-screen-modal.component.ts
@@ -99,7 +99,7 @@ export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
   }
   
   ngOnDestroy() {
-    if(this.observer instanceof ResizeObserver) {
+    if(this.observer && this.observer instanceof ResizeObserver) {
       this.observer.disconnect();
     }
   }