From 8c76b808d9039097b3cbe371258c6cba500ab3db Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Mon, 18 Apr 2022 14:44:44 +0300
Subject: [PATCH] 1. Change selected fitlers in monitor base on filters in
 search. 2. Add label secondary with color of monitor

---
 src/app/monitor/monitor.component.html        | 45 +++++++------------
 src/app/monitor/monitor.component.ts          | 18 +++++---
 src/app/openaireLibrary                       |  2 +-
 .../searchResearchResults.component.ts        |  4 +-
 src/assets/monitor-dashboard-custom.css       |  3 ++
 src/assets/openaire-theme                     |  2 +-
 6 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 51d3479..ee8fe2e 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -1,35 +1,22 @@
-<ng-template #selected_filters_pills let-margin="margin">
-  <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-grid-margin">
-        <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <span
-            class="filter-tag" [class.uk-margin-small-left]="margin"
-            title="Remove {{periodFilter.selectedFromAndToValues}}">
-          <i uk-icon="close"></i>
-          <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
-        </span></a>
+<ng-template #selected_filters_pills>
+   <span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-width-auto">
+    <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
+      <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
+      <button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" [disabled]="loading">
+        <icon name="close" flex="true" ratio="0.7"></icon>
+      </button>
     </span>
+  </span>
   <ng-container *ngFor="let filter of filters ">
     <ng-container *ngIf="filter.countSelectedValues > 0">
-      <ng-container *ngFor="let value of filter.values; let i = index;  let end = last; ">
+      <ng-container *ngFor="let value of filter.values; let i = index;">
         <ng-container *ngIf="value.selected">
-             <span class="uk-grid-margin">
-              <span class="filter-tag" [class.uk-margin-small-left]="margin" [title]="'Remove '+value.name"
-                    (click)="value.selected = false; filter.radioValue=''; filter.countSelectedValues=
-                    filter.countSelectedValues -1;
-                    filterChanged({value:filter}) ">
-                <a [class.uk-disabled]="loading">
-                  <span class=" clickable" aria-hidden="true">
-                    <span class="uk-icon">
-                      <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                           icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6"
-                                                          d="M16,16 L4,4"></path><path fill="none"
-                                                                                       stroke="#000"
-                                                                                       stroke-width="1.6"
-                                                                                       d="M16,4 L4,16"></path></svg>
-                    </span>
-                  </span>
-                  <span class="uk-margin-small-left"
-                        [innerHtml]="(value.name.length > 34)?value.name.substring(0,34)+'...':value.name"></span>
-                </a>
+            <span class="uk-width-auto">
+              <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
+                <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
+                <button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" class="uk-close uk-icon" [disabled]="loading">
+                  <icon name="close" flex="true" ratio="0.7"></icon>
+                </button>
               </span>
             </span>
         </ng-container>
@@ -252,7 +239,7 @@
         <a *ngIf="countSelectedFilters() > 1"
            class="uk-text-small uk-width-1-2" (click)="clearAll()"> Clear All </a>
       </div>
-      <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
+      <div class="uk-grid uk-grid-small" uk-grid>
         <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
       </div>
       <div *ngIf="!user" class="uk-margin-top"><a class="uk-link" (click)="logIn()"> Sign in</a> to apply filters.</div>
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index f0a19fb..f848ec4 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -26,7 +26,7 @@ import {Subscriber, Subscription} from "rxjs";
 import {User} from "../openaireLibrary/login/utils/helper.class";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 import {RangeFilter} from "../openaireLibrary/utils/rangeFilter/rangeFilterHelperClasses.class";
-import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
+import {Filter, Value} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
 import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
 import {properties} from "../../environments/environment";
 import {IndexInfoService} from "../openaireLibrary/utils/indexInfo.service";
@@ -247,7 +247,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
           }
         }
       } else {
-        this.clearfFilter(filter);
+        this.clearFilter(filter);
       }
     }
     
@@ -282,14 +282,14 @@ export class MonitorComponent implements OnInit, OnDestroy {
   
   clearAll() {
     for (let filter of this.filters) {
-      this.clearfFilter(filter);
+      this.clearFilter(filter);
     }
     this.periodFilter.selectedFromValue = "";
     this.periodFilter.selectedToValue = "";
     this.validateYearRange(true)
   }
   
-  clearfFilter(filter: Filter) {
+  clearFilter(filter: Filter) {
     filter.countSelectedValues = 0;
     filter.radioValue = "";
     for (let value of filter.values) {
@@ -440,7 +440,15 @@ export class MonitorComponent implements OnInit, OnDestroy {
       this.periodFilter.selectedToValue = "";
       this.filter();
     }
-    
+  }
+  
+  clearFilterValue(filter: Filter, value: Value) {
+    value.selected = false;
+    filter.radioValue = '';
+    filter.countSelectedValues = filter.countSelectedValues - 1;
+    this.filterChanged({
+      value:filter
+    });
   }
   
   private setIndicators() {
diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index 7e9db1d..19bf9f7 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit 7e9db1d0dec3f8abdb716f082bcbe441304b95d6
+Subproject commit 19bf9f79685fa8628cd741fbfbb07991ccabf20d
diff --git a/src/app/search/searchPages/advanced/searchResearchResults.component.ts b/src/app/search/searchPages/advanced/searchResearchResults.component.ts
index e3f96d3..fc418d1 100644
--- a/src/app/search/searchPages/advanced/searchResearchResults.component.ts
+++ b/src/app/search/searchPages/advanced/searchResearchResults.component.ts
@@ -15,14 +15,14 @@ import {SearchForm} from "../../../openaireLibrary/searchPages/searchUtils/newSe
                                [includeOnlyResultsAndFilter]="false"
                                [showSwitchSearchLink]="true"
                                [openaireLink]="'https://'+(properties.environment != 'production'?'beta.':'')+'explore.openaire.eu/search/advanced/research-outcomes'"
-                               [piwikSiteId]="piwikSiteId"
+                               [piwikSiteId]="piwikSiteId" [searchForm]="searchForm"
       ></search-research-results>
   `
 })
 export class MonitorAdvancedSearchResearchResultsComponent {
   customFilter: SearchCustomFilter = null;
   initialized: boolean = false;
-  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: false};
   properties;
   piwikSiteId;
   constructor(private route: ActivatedRoute,
diff --git a/src/assets/monitor-dashboard-custom.css b/src/assets/monitor-dashboard-custom.css
index 395399b..6908b5d 100644
--- a/src/assets/monitor-dashboard-custom.css
+++ b/src/assets/monitor-dashboard-custom.css
@@ -36,6 +36,9 @@
   --text-primary-color: var(--monitor-color);
   --text-gradient-color: linear-gradient(110deg, var(--monitor-light-color) 0%, var(--monitor-dark-color) 100%);
 
+  /** Label */
+  --label-secondary: var(--monitor-color);
+
   /* List */
   --list-disc-color: var(--monitor-color);
 
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index a47c66f..c98b39a 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit a47c66f4802cb7af2ad12f1ad75516e94b20c328
+Subproject commit c98b39a5a5d45e3f9676be11d38b78d881f9f8d5