[Library|Trunk]

Saarch page for dashboard:

- add alert modal  when removing the dashboard filter
- add message to re-add dashboard filter if not already applied
- add esc directive for the filters 



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59217 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -7,8 +7,8 @@
     <img *ngIf="headerLogoUrl" class="logo " [src]="headerLogoUrl">
     <div *ngIf="!headerLogoUrl" class="portalLogo logo" ></div>
   </a>
-  <div *ngIf="items.length > 0" class="menu_section uk-margin-top">
+  <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top">
-    <ul>
+    <ul class="uk-margin-large-top">
       <li *ngIf="headerName"><a
         class="uk-disabled"><span class="menu_title uk-text-muted uk-text-uppercase">{{headerName}}</span></a></li>
       <ng-template ngFor [ngForOf]="items" let-item let-i="index">
@@ -45,7 +45,7 @@
       </ng-template>
     </ul>
     <ng-template [ngIf]="searchLink">
-       <ul class="searchLink">
+       <ul class="searchLink uk-margin-large-top">
         <li [class.current_section]="isTheActiveUrl(searchLink)" title="Search for Research Results" >
           <a [routerLink]="searchLink" [queryParams]="searchParams">
             <span class="menu_icon"><i class="material-icons">search</i></span>

searchPages/searchUtils/newSearchPage.component.html

@@ -93,7 +93,8 @@
         Clear All
       </a>
     </div>
-    <div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum  > 0"
+    <div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum  > 0 || (customFilter && customFilter.selected
+     == true)"
          class="uk-margin-small-top  uk-margin-medium-bottom">
       <ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
     </div>
@@ -142,7 +143,7 @@
 
 
 <div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
-    ' image-front-topbar uk-section-default uk-position-relative ' :
+    ' image-front-topbar   uk-position-relative ' :
     (' uk-section uk-padding-remove-bottom  uk-padding-remove-top ' + (usedBy
     == 'deposit' ? ' uk-padding-remove-top ' : ' '))"
      uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
@@ -277,13 +278,20 @@
                   <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
                 </div>
                 <div class="uk-width-expand@m uk-with-1-1@s">
-                  <div *ngIf="properties.isDashboard && selectedRangeFilters+selectedFilters + selectedTypesNum  > 0"
+                  <div *ngIf="properties.isDashboard"
                     class="uk-width-1-1 uk-margin-top  uk-margin-medium-bottom ">
                     <div class="uk-flex uk-flex-bottom">
                       <span class="uk-margin-small-right">Filters: </span>
                       <ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
                     </div>
                   </div>
+                  <div *ngIf="customFilter && !customFilter.isHiddenFilter &&
+                  customFilter.selected == false"
+                       class="uk-alert uk-animation-slide-top-small">
+                    Do you want to see results only for {{customFilter.valueName}}? <a
+                    (click)="addCustomFilter();">Click
+                    here {{customFilterEnabled}}</a>.
+                  </div>
                   <div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"><a
                         class="uk-margin-top   uk-button uk-button-text"
                         [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
@@ -401,7 +409,7 @@
 </div>
 <div *ngIf="properties.isDashboard" id="style_switcher" class="filters_switcher"
      [class.switcher_active]="filterToggle">
-  <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle">
+  <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle" [style.display]="(filterToggle?'none':'inherit')">
     <i class="  uk-text-muted">
       <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
            viewBox="0 0 24 24"
@@ -415,13 +423,15 @@
       </svg>
     </i>
   </div>
-  <div class="uk-padding-small uk-padding-remove-top">
+  <div lass="uk-padding-small uk-padding-remove-top" click-outside-or-esc
+       (clickOutside)="(filterToggle)?filterToggle = false:filterToggle" [clickClose]="false" >
     <div class="uk-text-right" ><a (click)="filterToggle=!filterToggle"> <i
       class=" material-icons md-icon"></i>
     </a></div>
-    <div class="uk-padding-small uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
+    <div class="uk-padding uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
       <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
     </div>
   </div>
 </div>
 </div>
+<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

searchPages/searchUtils/newSearchPage.component.ts

@@ -21,6 +21,7 @@ import {ZenodoInformationClass} from "../../deposit/utils/zenodoInformation.clas
 import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
 import {HelperFunctions} from "../../utils/HelperFunctions.class";
 import {properties} from "../../../../environments/environment";
+import {AlertModal} from "../../utils/modal/alert";
 
 declare var UIkit: any;
 
@@ -113,6 +114,10 @@ export class NewSearchPageComponent {
   //Dashboard
   filterToggle = false;
   customFilterEnabled:boolean =  false;
+  @ViewChild('removeCustomFilter') removeCustomFilter: AlertModal;
+  currentValueToRemove;
+  currentFilterToRemove;
+  isCustomFilterSelected:boolean = true;
   constructor(private route: ActivatedRoute,
               private location: Location,
               private _meta: Meta,
@@ -265,9 +270,6 @@ export class NewSearchPageComponent {
   }
 
   goTo(page: number = 1, scroll:boolean = true) {
-    if(this.properties.isDashboard && this.filterToggle){
-      this.filterToggle=false;
-    }
     if(this.offcanvasElement) {
       UIkit.offcanvas(this.offcanvasElement.nativeElement).hide();
     }
@@ -384,6 +386,9 @@ export class NewSearchPageComponent {
   */
   public checkSelectedFilters(filters: Filter[]) {
     this.filters = filters;
+    if(this.customFilter && !this.customFilter.isHiddenFilter) {
+      this.customFilter.selected = null;
+    }
     for (var i = 0; i < filters.length; i++) {
       var filter: Filter = filters[i];
       filter.countSelectedValues = 0;
@@ -398,6 +403,11 @@ export class NewSearchPageComponent {
 
           }
         }
+        if(this.customFilter.queryFieldName == filter.filterId && values.indexOf(StringUtils.quote(this.customFilter.valueId)) != -1){
+          this.customFilter.selected = true;
+        }else{
+          this.customFilter.selected = false;
+        }
       } else if (this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected) {
         for (let filterValue of filter.values) {
           if (filterValue.id == this.quickFilter.value) {
@@ -416,6 +426,11 @@ export class NewSearchPageComponent {
         this.quickFilter.filter = filter;
       }
     }
+    if (this.parameterNames.indexOf("cf") != -1 && this.parameterValues[this.parameterNames.indexOf("cf")] == "true") {
+      this.customFilter.selected = true;
+    }else if(this.customFilter && this.customFilter.selected == null){
+      this.customFilter.selected = false;
+    }
     this.filterFilterValues(this.filters);
     this.updateDescription();
     return filters;
@@ -559,7 +574,13 @@ export class NewSearchPageComponent {
     this.goTo(1);
   }
 
-  public removeFilter(value: Value, filter: Filter) {
+  public removeFilter(value: Value, filter: Filter, forceRemove:boolean = false) {
+    this.currentValueToRemove = value;
+    this.currentFilterToRemove = filter;
+    if(!forceRemove && this.customFilter && this.customFilter.queryFieldName ==filter.filterId && this.customFilter.valueId == value.id ){
+      this.openRemoveCustomFilterModal();
+      return;
+    }
     filter.countSelectedValues--;
     this.selectedFilters--;
     if (value.selected == true) {
@@ -573,6 +594,18 @@ export class NewSearchPageComponent {
     }
     this.goTo(1);
   }
+  public openRemoveCustomFilterModal() {
+    this.removeCustomFilter.alertTitle = 'Remove filter';
+    this.removeCustomFilter.message = 'You are about to see results that are not related to '+ this.customFilter.valueName + '. Do you want to proceed?';
+    this.removeCustomFilter.okButtonText = 'Yes';
+    this.removeCustomFilter.cancelButtonText = 'No';
+    this.removeCustomFilter.open();
+  }
+
+  closeCustomFilterModal() {
+    this.removeFilter(this.currentValueToRemove, this.currentFilterToRemove, true);
+    this.isCustomFilterSelected = false;
+  }
 
   public removeRangeFilter(filter: RangeFilter) {
     filter.selectedFromValue = null;
@@ -616,6 +649,28 @@ export class NewSearchPageComponent {
     }
   }
 
+  /**
+   * Set selected the value of the custom filter.
+   */
+  addCustomFilter() {
+    this.customFilter.selected = true;
+    if(this.refineFields.indexOf(this.customFilter.queryFieldName) == -1  ){
+      this.customFilterEnabled = true;
+    }else {
+      for (let filter of this.filters) {
+        if (this.customFilter.queryFieldName == filter.filterId) {
+          for (let value of filter.values) {
+            if (value.id == this.customFilter.valueId) {
+              value.selected = true;
+              filter.countSelectedValues++;
+            }
+          }
+        }
+      }
+    }
+    this.filterChanged(null);
+
+  }
   // for loading
   public openLoading() {
     this.loading.open();

searchPages/searchUtils/newSearchPage.module.ts

@@ -26,6 +26,8 @@ import {SearchResultsInDepositModule} from "../../deposit/searchResultsInDeposit
 import {AdvancedSearchFormModule} from "./advancedSearchForm.module";
 import {QuickSelectionsModule} from "./quick-selections.module";
 import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
+import {AlertModalModule} from "../../utils/modal/alertModal.module";
+import {ClickModule} from "../../utils/click/click.module";
 
 @NgModule({
   imports: [
@@ -34,7 +36,7 @@ import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
     SearchPagingModule, SearchResultsPerPageModule, SearchSortingModule, SearchDownloadModule, ModalModule,
     SearchFilterModule, RangeFilterModule,
     PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
-    SearchResultsInDepositModule, AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule
+    SearchResultsInDepositModule, AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule
   ],
   declarations: [
     NewSearchPageComponent

searchPages/searchUtils/searchUtils.class.ts

@@ -16,12 +16,14 @@ export class SearchCustomFilter{
  valueId:string; //gr
  valueName:string; // Greece
  isHiddenFilter:boolean;
+ selected:boolean;
  constructor( fieldName:string, queryFieldName:string, valueId:string, valueName:string ){
    this.isHiddenFilter = true;
    this.fieldName = fieldName;
    this.queryFieldName = queryFieldName;
    this.valueId = valueId;
    this.valueName = valueName;
+   this.selected = null;
  }
   // public setFilter(filter:SearchCustomFilter){
   //  if(!filter){

utils/click/click-outside-or-esc.directive.ts

@@ -16,7 +16,8 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
   public targetId = null;
   @Input()
   public escClose = true;
-
+  @Input()
+  public clickClose = true;
   @Output('clickOutside') clickOutside: EventEmitter<Object>;
 
   constructor(private _elRef: ElementRef) {
@@ -72,6 +73,7 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
         }
         element = element.parentElement;
       }
+      if(this.clickClose) {
         this.clickOutside.emit({
           target: (event.target || null),
           value: true
@@ -79,3 +81,4 @@ export class ClickOutsideOrEsc implements OnInit, OnDestroy {
       }
     }
   }
+}