Advanced form: apply new design (not completed). Entities selection for advanced form

searchPages/searchUtils/advancedSearchForm.component.html

@@ -1,18 +1,20 @@
-<div *ngIf="!simpleView">
+<ng-container *ngIf="!simpleView">
+  <div class="uk-margin-small-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
+    <div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
+      <span class="uk-margin-small-right uk-text-small" [class.uk-light]="dark">Advanced search in</span>
+      <span *ngIf="disableSelect" class="uk-text-small uk-text-bold" [class.uk-light]="dark">{{entities.getLabel(entityType)}}</span>
+      <entities-selection #entities [class.uk-hidden]="disableSelect" class="uk-width-expand" [simpleView]="false"
+                          [currentEntity]="entityType" [customFilter]="customFilter" (disableSelectEmitter)="disableSelectChange($event)"></entities-selection>
+    </div>
+    <div class="uk-width-expand uk-text-small uk-flex uk-flex-center uk-flex-right@m" [class.uk-light]="dark">
       <a *ngIf="showSwitchSearchLink && simpleSearchLink && simpleSearchLink.length > 0"
-     routerLinkActive="router-link-active"
+         [routerLink]=simpleSearchLink
-     [routerLink]=simpleSearchLink style="z-index:1;"
          [queryParams]="customFilter?customFilter.getParameters():{}"
-     [class]="(isDisabled)?'uk-float-right uk-disabled uk-link-muted  portal-link   uk-margin-right ':'uk-float-right  portal-link   uk-margin-right '">Quick search
+         [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Simple Search</a>
-  </a>
+    </div>
-  <h6 class="uk-margin-small-bottom">
+  </div>
-    Advanced search in
+  <div class="uk-card uk-card-default" [class.dark]="dark">
-    <entities-selection [simpleView]="false" [currentEntity]="entityType"
+    <form *ngIf="!simpleView"
-                        [properties]="properties" [customFilter]="customFilter" ></entities-selection>
-
-  </h6>
-</div>
-<form *ngIf="!simpleView"
           [class]="((isDisabled )?'uk-disabled ':'')
        +' advancedSearchForm uk-tile  uk-padding-small uk-margin-medium-bottom'">
       <div>
@@ -130,9 +132,12 @@
                 class=" uk-button  uk-padding uk-padding-remove-top uk-padding-remove-bottom portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom " style="position: absolute;bottom: -19px;left: 45%;"> Search
         </button>
       </div>
-</form>
+    </form>
-<div *ngIf="simpleView">
+  </div>
-  <div class="uk-margin-small-bottom uk-flex uk-flex-right" [class.uk-light]="dark" *ngIf="showSwitchSearchLink">
+</ng-container>
+<div *ngIf="simpleView" class="uk-flex uk-flex-center uk-flex-wrap">
+  <div class="uk-width-xlarge@l uk-width-large">
+    <div class="uk-margin-small-bottom uk-text-small uk-flex uk-flex-right" [class.uk-light]="dark" *ngIf="showSwitchSearchLink">
       <a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
          [routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters"
          [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
@@ -162,18 +167,19 @@
         </div>
       </ng-container>
     </div>
-  <div class="uk-flex uk-flex-center uk-width-xlarge@l uk-width-large uk-child-width-1-1">
+    <div class="uk-flex uk-flex-center uk-child-width-1-1">
       <ng-container *ngIf="entitiesSelection">
-      <advanced-search-input [class.uk-hidden]="entities.disableSelect" [dark]="dark" [disabled]="isDisabled" (searchEmitter)="simpleKeywordChanged()">
+        <advanced-search-input [class.uk-hidden]="disableSelect" [dark]="dark" [disabled]="isDisabled" (searchEmitter)="simpleKeywordChanged()">
-        <entities-selection #entities [simpleView]="true" [currentEntity]="entityType"
+          <entities-selection [simpleView]="true" [currentEntity]="entityType"
-                            (selectionChange)="simpleEntityChanged($event)"
+                              (selectionChange)="simpleEntityChanged($event)" (disableSelectEmitter)="disableSelectChange($event)"
                               [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
           <div input placeholder="Scholary works" [hint]="formPlaceholderText" [(value)]="selectedFields[0].value"></div>
         </advanced-search-input>
-      <div *ngIf="selectedFields[0] && entities.disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
+        <div *ngIf="selectedFields[0] && disableSelect" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
              [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div>
       </ng-container>
       <div *ngIf="selectedFields[0] && !entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
            [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()"></div>
     </div>
+  </div>
 </div>

searchPages/searchUtils/advancedSearchForm.component.ts

@@ -28,6 +28,7 @@ export class AdvancedSearchFormComponent {
   @Output() queryChange = new EventEmitter();
   @Input() resultTypes;
   @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
+  public disableSelect: boolean = false;
   validDateFrom: boolean = true;
   validDateTo: boolean = true;
   @Input() customFilter: SearchCustomFilter;
@@ -106,6 +107,10 @@ export class AdvancedSearchFormComponent {
     }
   }
   
+  disableSelectChange(value) {
+    this.disableSelect = value;
+  }
+  
   addField() {
     this.newFieldId = this.fieldIds[0];
     var type = this.fieldIdsMap[this.newFieldId].type;

searchPages/searchUtils/entitiesSelection.component.ts

@@ -11,10 +11,14 @@ import {OpenaireEntities} from "../../utils/properties/searchFields";
 @Component({
   selector: 'entities-selection',
   template: `
-    <ng-container *ngIf="simpleView">
+    <ng-container *ngIf="simpleView && entities.length > 0">
       <div #input input placeholder="Type" hint="What type of content?" inputClass="advanced-search"
            [options]="entities" [(value)]="selectedEntity" (valueChange)="entityChanged()" type="select"></div>
     </ng-container>
+    <ng-container *ngIf="!simpleView && entities.length > 0">
+      <div #input input inputClass="inner small"
+           [options]="entities" [(value)]="selectedEntity" (valueChange)="entityChanged()" type="select"></div>
+    </ng-container>
   `
 })
 export class EntitiesSelectionComponent {
@@ -24,9 +28,9 @@ export class EntitiesSelectionComponent {
   @Input() currentEntity = "result";
   @Input() simpleView: boolean = true;
   @Input() onChangeNavigate: boolean = true;
-  @Input() disableSelect: boolean = false;
   @Output() selectionChange = new EventEmitter();
   @ViewChild('input') input: InputComponent;
+  @Output() disableSelectEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   public entities: Option[] = [];
   public properties: EnvProperties = properties;
   private subscriptions: Subscription[] = [];
@@ -53,7 +57,9 @@ export class EntitiesSelectionComponent {
             }
           }
           if(this.onlyresults) {
+            if(this.simpleView) {
               this.entities.push({label: 'All ' + OpenaireEntities.RESULTS.toLowerCase(), value: 'all'});
+            }
             if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults] && showEntity["publication"]) {
               this.entities.push({label: OpenaireEntities.PUBLICATIONS, value: 'publications'});
             }
@@ -67,12 +73,13 @@ export class EntitiesSelectionComponent {
               this.entities.push({label: OpenaireEntities.OTHER, value: 'other'});
             }
           } else {
+            if(this.simpleView) {
               this.entities.push({label: 'All Content', value: 'all'});
+            }
             if(showPage[this.simpleView ? this.properties.searchLinkToResults : this.properties.searchLinkToAdvancedResults]
               && (showEntity["publication"] || showEntity["dataset"] || showEntity["software"] || showEntity["orp"])) {
               this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'});
             }
-  
             if(showPage[this.simpleView ? this.properties.searchLinkToProjects : this.properties.searchLinkToAdvancedProjects] && showEntity["project"]) {
               this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'});
             }
@@ -90,28 +97,36 @@ export class EntitiesSelectionComponent {
               this.entities = this.entities.filter(option => option.value !== 'project' && option.value !== 'dataprovider');
             }
           }
-          this.disableSelect = this.entities.length == 1;
+          console.log(this.entities);
+          this.disableSelectEmitter.emit(this.entities.length == 1);
         }
       }));
-    } else if ((this.customFilter && this.customFilter.queryFieldName == "community") && this.properties.adminToolsCommunity === "monitor") {
+    } else if (((this.customFilter && this.customFilter.queryFieldName == "community") && this.properties.adminToolsCommunity === "monitor") ||
-      this.disableSelect = true;
+      (this.customFilter && (this.customFilter.queryFieldName == "relfunder" || this.customFilter.queryFieldName == "funder")) ||
-    } else if (this.customFilter && (this.customFilter.queryFieldName == "relfunder" || this.customFilter.queryFieldName == "funder")) {
+      (this.customFilter && this.customFilter.queryFieldName == "relorganizationid")) {
-      this.disableSelect = true;
+      this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'});
-    } else if (this.customFilter && this.customFilter.queryFieldName == "relorganizationid") {
+      this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'});
-      this.disableSelect = true;
+      this.entities.push({label: OpenaireEntities.ORGANIZATIONS, value: 'organization'});
+      this.entities.push({label: OpenaireEntities.DATASOURCES, value: 'dataprovider'});
+      this.disableSelectEmitter.emit(true);
     } else {
       if(this.onlyresults) {
+        if(this.simpleView) {
           this.entities.push({label: 'All ' + OpenaireEntities.RESULTS.toLowerCase(), value: 'all'});
+        }
         this.entities.push({label: OpenaireEntities.PUBLICATIONS, value: 'publications'});
         this.entities.push({label: OpenaireEntities.DATASETS, value: 'datasets'});
         this.entities.push({label: OpenaireEntities.SOFTWARE, value: 'software'});
         this.entities.push({label: OpenaireEntities.OTHER, value: 'other'});
       } else {
+        if(this.simpleView) {
           this.entities.push({label: 'All Content', value: 'all'});
+        }
         this.entities.push({label: OpenaireEntities.RESULTS, value: 'result'});
         this.entities.push({label: OpenaireEntities.PROJECTS, value: 'project'});
         this.entities.push({label: OpenaireEntities.ORGANIZATIONS, value: 'organization'});
         this.entities.push({label: OpenaireEntities.DATASOURCES, value: 'dataprovider'});
+        this.disableSelectEmitter.emit(false);
       }
     }
     this.selectedEntity = this.currentEntity;
@@ -128,6 +143,10 @@ export class EntitiesSelectionComponent {
     }
   }
   
+  getLabel(value: string) {
+    return this.entities.find(entity => entity.value === value)?.label;
+  }
+  
   entityChanged() {
     if (!this.simpleView || this.onChangeNavigate) {
       this.router.navigate([this.getUrl(this.simpleView)], {queryParams: this.customFilter ? this.customFilter.getParameters() : {}});

searchPages/searchUtils/newSearchPage.component.html

@@ -4,7 +4,7 @@
     refineFields.indexOf(customFilter.queryFieldName) ==
     -1) ||customFilter.isHiddenFilter)">
         <span class="uk-width-auto">
-          <span class="uk-label uk-flex uk-flex-middle">
+          <span class="uk-label uk-label-secondary uk-flex uk-flex-middle">
             <span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
           </span>
         </span>
@@ -13,13 +13,12 @@
       <ng-container *ngFor="let type of resultTypes.values; let i = index;  let end = last; ">
         <ng-container *ngIf="type.selected">
           <span class="uk-width-auto">
-            <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
+            <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
-							[class.uk-disabled]="disabled" class="uk-link-reset">
-              <span class="uk-label uk-flex uk-flex-middle">
               <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
-                  <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
+              <button [class.uk-disabled]="disabled" class="uk-close uk-icon" [disabled]="disabled">
+                <icon name="close" flex="true" ratio="0.7"></icon>
+              </button>
               </span>
-            </a>
           </span>
         </ng-container>
       </ng-container>
@@ -28,13 +27,12 @@
       <ng-container *ngFor="let filter of rangeFilters ">
         <ng-container *ngIf="filter.selectedFromAndToValues">
           <span class="uk-width-auto">
-            <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
+            <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
-							[class.uk-disabled]="disabled" class="uk-link-reset">
-              <span class="uk-label uk-flex uk-flex-middle">
               <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
-                  <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
+              <button [class.uk-disabled]="disabled" class="uk-close uk-icon" [disabled]="disabled">
+                <icon name="close" flex="true" ratio="0.7"></icon>
+              </button>
               </span>
-            </a>
           </span>
         </ng-container>
       </ng-container>
@@ -44,13 +42,12 @@
         <ng-container *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; ">
               <span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
                     class="uk-width-auto">
-                <a [attr.uk-tooltip]="'Remove ' + value.name" class="uk-link-reset" (click)="removeFilter(value, filter)"
+                <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
-									[class.uk-disabled]="disabled">
-                  <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
-                      <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
+                  <button [class.uk-disabled]="disabled" class="uk-close uk-icon" [disabled]="disabled">
+                    <icon name="close" flex="true" ratio="0.7"></icon>
+                  </button>
                 </span>
-                </a>
               </span>
         </ng-container>
       </ng-container>
@@ -119,10 +116,10 @@
         </div>
       </div>
       <div class="uk-position-relative">
-        <div class="uk-container uk-container-large uk-section uk-section-small uk-margin-bottom" id="searchForm">
+        <div class="uk-container uk-container-small uk-section uk-section-small uk-margin-bottom" id="searchForm">
           <div class="uk-grid uk-flex uk-flex-middle uk-flex-center" uk-grid>
             <div id="searchImage"></div>
-            <advanced-search-form
+            <advanced-search-form class="uk-width-expand"
                 [entityType]="entityType"
                 [fieldIds]="fieldIds"
                 [fieldIdsMap]="fieldIdsMap"

sharedComponents/input/input.component.ts

@@ -19,15 +19,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
 import {properties} from "../../../../environments/environment";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
 
-export type InputType =
+export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips';
-  'text'
-  | 'URL'
-  | 'logoURL'
-  | 'autocomplete'
-  | 'autocomplete_soft'
-  | 'textarea'
-  | 'select'
-  | 'chips';
 
 export interface Option {
   icon?: string,
@@ -74,12 +66,12 @@ declare var UIkit;
             </ng-template>
             <ng-template [ngIf]="type === 'select'">
               <ng-container *ngIf="placeholderInfo?.static">
-                <div *ngIf="!formControl.value" class="placeholder uk-text-truncate">{{placeholderInfo.label}}</div>
+                <div *ngIf="!getLabel(formControl.value)" class="placeholder uk-text-truncate">{{placeholderInfo.label}}</div>
+                <div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
               <ng-container *ngIf="!placeholderInfo?.static">
                 <div *ngIf="!getLabel(formControl.value)" class="input uk-text-truncate">No value selected</div>
-                <div *ngIf="getLabel(formControl.value)"
+                <div *ngIf="getLabel(formControl.value)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
-                     class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
               </ng-container>
             </ng-template>
             <ng-template [ngIf]="type === 'autocomplete'">