From 995e73a1b5ad422d1229d5bbf5f811b2f1d0729f Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 1 Jul 2022 15:44:05 +0300
Subject: [PATCH] Fix dropdown-filter bug with hide()

---
 .../dropdown-filter.component.ts              | 19 ++++++++++--------
 utils/icons/icons.ts                          | 20 +++----------------
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/utils/dropdown-filter/dropdown-filter.component.ts b/utils/dropdown-filter/dropdown-filter.component.ts
index dc18d62c..5a276133 100644
--- a/utils/dropdown-filter/dropdown-filter.component.ts
+++ b/utils/dropdown-filter/dropdown-filter.component.ts
@@ -1,15 +1,16 @@
-import {Component, Input, ViewChild} from "@angular/core";
+import {Component, ElementRef, Input, ViewChild} from "@angular/core";
 
 declare var UIkit;
 
 @Component({
   selector: 'dropdown-filter',
   template: `
-  <button class="uk-button uk-button-default uk-flex uk-flex-middle">
+  <button class="uk-button uk-button-default uk-flex uk-flex-middle"
+          [class.uk-disabled]="disabled" [disabled]="disabled">
     <span>{{name}}<span *ngIf="count > 0">({{count}})</span></span>
-    <icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen(dropdown)?'less':'more')"></icon>
+    <icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon>
   </button>
-  <div #dropdown class="uk-dropdown" [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
+  <div #dropdownElement class="uk-dropdown" [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
     <ng-content></ng-content>
   </div>
   `
@@ -21,13 +22,15 @@ export class DropdownFilterComponent {
   public count: number = 0;
   @Input()
   public dropdownClass: string;
-  @ViewChild("dropdown") dropdown;
+  @Input()
+  public disabled = false;
+  @ViewChild("dropdownElement") dropdownElement: ElementRef;
   
-  isOpen(element) {
-    return UIkit.dropdown(element).isActive();
+  get isOpen() {
+    return this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive();
   }
   
   closeDropdown() {
-    UIkit.dropdown(this.dropdown).hide();
+    UIkit.dropdown(this.dropdownElement.nativeElement).hide();
   }
 }
diff --git a/utils/icons/icons.ts b/utils/icons/icons.ts
index a62fe561..cf839749 100644
--- a/utils/icons/icons.ts
+++ b/utils/icons/icons.ts
@@ -210,26 +210,12 @@ export const orcid_bin = {
 
 export const link = {
   name: 'link',
-  data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="link"><path\n' +
-    '                      fill="none" stroke="#000" stroke-width="1.1"\n' +
-    '                      d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"></path><path\n' +
-    '                      fill="none" stroke="#000" stroke-width="1.1"\n' +
-    '                      d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"></path><path\n' +
-    '                      fill="none" stroke="#000" stroke-width="1.1"\n' +
-    '                      d="M7.925,11.875 L11.925,7.975"></path>\n' +
-    '                    </svg>'
+  data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="link"><path fill="none" stroke="#000" stroke-width="1.1" d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M7.925,11.875 L11.925,7.975"></path></svg>'
 }
 
 /** Add new icon under this line to be sure that it will be added on preview */
 
 export const quotes = {
   name: 'quotes',
-  data: '<svg width="20"\n' +
-    '                         height="20"\n' +
-    '                         viewBox="0 0 20 20"\n' +
-    '                         xmlns="http://www.w3.org/2000/svg"\n' +
-    '                         data-svg="quote-right">\n' +
-    '                      <path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path>\n' +
-    '                      <path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path>\n' +
-    '                    </svg>'
-}
\ No newline at end of file
+  data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="quote-right"><path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path><path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path></svg>'
+}