Fix some issues in input and search input. Add search input in search-page.

searchPages/searchUtils/advancedSearchForm.component.html

@@ -132,42 +132,20 @@
   </div>
 </form>
 <div *ngIf="simpleView">
-  <form [class.uk-disabled]="isDisabled">
+  <form>
-    <div class="uk-grid uk-grid-small uk-flex uk-flex-center" uk-grid>
+    <div class="uk-margin-small-bottom uk-flex uk-flex-right" *ngIf="showSwitchSearchLink">
-      <div *ngIf="entitiesSelection">
+      <a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink"
-        <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
+         [routerLink]="advancedSearchLink" [queryParams]="advancedSearchLinkParameters"
-                            [properties]="properties"
+         [ngClass]="(isDisabled)?'uk-disabled uk-link-muted':null">Advanced search
-                            (selectionChange)=" simpleEntityChanged($event)"
-                            [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
-      </div>
-      <div *ngIf="selectedFields[0]" class="uk-inline uk-link">
-        <a class="uk-form-icon uk-form-icon-flip uk-link-reset"
-           (click)="simpleKeywordChanged(null)" type="submit">
-          <icon name="search" flex="true"></icon>
-        </a>
-        <input type="text" class="uk-input uk-width-large@m uk-width-medium"
-               [placeholder]="formPlaceholderText" role="searchbox"
-               [(ngModel)]="selectedFields[0].value" name="keyword"/>
-      </div>
-      <!-- TODO Check link to advance-->
-      <!--<div>
-        <button (click)="simpleKeywordChanged(null)" type="submit"
-                class="uk-button  portal-button uk-margin-small-left uk-text-bold uk-padding uk-padding-remove-top uk-padding-remove-bottom">
-          Search
-        </button>
-        <div class="uk-margin-small-top" *ngIf="showSwitchSearchLink">
-          <a *ngIf ="this.entityType !='all' && this.entityType == this.selectedEntity && advancedSearchLink" routerLinkActive="router-link-active"
-             [routerLink]="advancedSearchLink" style="z-index:1;" [queryParams]="advancedSearchLinkParameters"
-             [class]="(isDisabled)?'  uk-disabled uk-link-muted  portal-link   uk-margin-left ':' portal-link   uk-margin-left '">Advanced search
       </a>
       <a *ngIf =" this.entityType !='all' && this.entityType != this.selectedEntity && selectedEntityAdvancedUrl "
-             routerLinkActive="router-link-active"
+         [routerLink]="selectedEntityAdvancedUrl"
-             [routerLink]="selectedEntityAdvancedUrl" style="z-index:1;"
          [queryParams]="{q:this.selectedFields[0].value,op:'and'}"
-             [class]="(isDisabled)?'  uk-disabled uk-link-muted  portal-link   uk-margin-left ':' portal-link   uk-margin-left '">Advanced search
+         [ngClass]="(isDisabled)?'uk-disabled  uk-link-muted':null">Advanced search
       </a>
-          <a *ngIf="this.entityType=='all'"  class="portal-link  uk-margin-left">Advanced Search</a>
+      <ng-container *ngIf="this.entityType=='all'">
-          <div *ngIf="this.entityType =='all'" uk-dropdown class="uk-dropdown default-dropdown">
+        <a>Advanced Search</a>
+        <div uk-dropdown class="uk-dropdown">
           <ul class="uk-list uk-margin-remove-bottom">
             <li><a
                 [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="advancedSearchLinkParameters"
@@ -184,8 +162,17 @@
               Organizations</a></li>
           </ul>
         </div>
+      </ng-container>
     </div>
-      </div>-->
+    <div class="uk-flex uk-flex-center">
+      <div *ngIf="entitiesSelection">
+        <entities-selection [simpleView]="true" [currentEntity]="entityType"
+                            [properties]="properties"
+                            (selectionChange)=" simpleEntityChanged($event)"
+                            [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
+      </div>
+      <div *ngIf="selectedFields[0] && entitiesSelection" search-input [disabled]="isDisabled" [(value)]="selectedFields[0].value"
+           [placeholder]="formPlaceholderText" (searchEmitter)="simpleKeywordChanged()" class="uk-width-xlarge@l uk-width-large"></div>
     </div>
   </form>
 </div>

searchPages/searchUtils/advancedSearchForm.component.ts

@@ -42,14 +42,17 @@ export class AdvancedSearchFormComponent {
   @Input() entitiesSelection: boolean;
   @Input() showSwitchSearchLink: boolean = true;
   sub;
+  
   constructor(private route: ActivatedRoute, private router: Router) {
   
   }
+  
   ngOnDestroy() {
     if (this.sub instanceof Subscriber) {
       this.sub.unsubscribe();
     }
   }
+  
   ngOnInit() {
     this.selectedEntity = this.entityType;
     
@@ -61,12 +64,14 @@ export class AdvancedSearchFormComponent {
     this.newFieldId = this.fieldIds[0];
     this.newFieldName = this.fieldIdsMap[this.newFieldId].name;
   }
+  
   simpleEntityChanged($event) {
     this.selectedEntity = $event.entity;
     this.selectedEntitySimpleUrl = $event.simpleUrl;
     this.selectedEntityAdvancedUrl = $event.advancedUrl;
   }
-  simpleKeywordChanged($event){
+  
+  simpleKeywordChanged() {
     // this.selectedFields[0].value = $event.value;
     if (this.selectedEntity == this.entityType) {
       this.queryChanged();
@@ -74,6 +79,7 @@ export class AdvancedSearchFormComponent {
       this.router.navigate([this.selectedEntitySimpleUrl], {queryParams: {q: this.selectedFields[0].value, op: "and"}});
     }
   }
+  
   queryChanged() {
     this.validDateFrom = true;
     this.validDateTo = true;
@@ -95,9 +101,7 @@ export class AdvancedSearchFormComponent {
     
     if (this.validDateFrom && this.validDateTo) {
       
-        this.queryChange.emit({
+      this.queryChange.emit({});
-
-        });
     }
   }
   
@@ -128,6 +132,7 @@ export class AdvancedSearchFormComponent {
     this.selectedFields[index].operatorId = operatorId;
     this.selectedFields[index].operatorName = operatorName;
   }
+  
   validateDate(index: number, value: string) {
     this.selectedFields[index].valid = Dates.isValidYear(value);
   }
@@ -150,12 +155,15 @@ export class AdvancedSearchFormComponent {
       this.selectedFields[index].value = "true";
     }
   }
+  
   valueChanged($event, index: number) {
     this.selectedFields[index].value = $event.value;
   }
+  
   updatedValueLabel($event, index: number) {
     this.selectedFields[index].valueLabel = $event.value;
   }
+  
   listUpdated($event, fieldId: number) {
     this.fieldList[fieldId] = $event.value;
   }

searchPages/searchUtils/advancedSearchForm.module.ts

@@ -12,11 +12,12 @@ import {QuickSelectionsModule} from "./quick-selections.module";
 import {EntitiesSelectionModule} from "./entitiesSelection.module";
 import { MatSelectModule } from "@angular/material/select";
 import {IconsModule} from "../../utils/icons/icons.module";
+import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
 
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule
+    CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule
   ],
   declarations: [
     AdvancedSearchFormComponent,

sharedComponents/input/input.component.ts

@@ -95,9 +95,9 @@ declare var UIkit;
                 </div>
               </div>
             </ng-template>
-            <div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
+            <div *ngIf="(formControl.disabled && disabledIcon) || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
                  class="uk-margin-left icon">
-              <icon *ngIf="formControl.disabled" [name]="'lock'" [flex]="true"></icon>
+              <icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
               <ng-template [ngIf]="formControl.enabled">
                 <icon *ngIf="!formControl.value && icon" [name]="icon" [flex]="true"></icon>
                 <icon *ngIf="!icon && type === 'select' && selectArrow" name="arrow_drop_down" [flex]="true"></icon>
@@ -169,6 +169,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   @Input('type') type: InputType = 'text';
   @Input() validators: ValidatorFn[] | ValidatorFn;
   @Input() disabled: boolean = false;
+  @Input() disabledIcon: string = 'lock';
   @Input() value: any | any[];
   @Output() valueChange = new EventEmitter<any | any[]>();
   @Input('hint') hint: string;
@@ -304,6 +305,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       if (changes.formControl || changes.validators || changes.options) {
         this.reset();
       }
+      if(changes.disabled) {
+        if(this.disabled) {
+          this.formControl.disable();
+        } else {
+          this.formControl.enable();
+        }
+      }
     }
   }
   
@@ -359,6 +367,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       this.required = (validator && validator.required);
     }
     this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
+      if(this.formControl.enabled) {
         value = (value === '') ? null : value;
         if (this.type === 'logoURL') {
           this.secure = (!value || value.includes('https://'));
@@ -375,7 +384,10 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
             this.open(true);
           }
         }
+        if((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) {
           this.valueChange.emit(this.formControl.value);
+        }
+      }
     }));
     if (this.input) {
       this.input.nativeElement.disabled = this.formControl.disabled;

sharedComponents/search-input/search-input.component.ts

@@ -20,17 +20,17 @@ import {InputComponent} from "../input/input.component";
       <div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
         <div class="uk-flex uk-flex-middle">
           <div class="uk-width-expand">
-            <div #input  [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search"
+            <div #input  [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null"
-                 [placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
+                 [placeholder]="{label: placeholder, static: true}" [(value)]="value" (valueChange)="valueChange.emit($event)"
                  [disabled]="disabled" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
           </div>
-          <div [class.uk-hidden]="!searchControl?.value && !value" class="uk-width-auto">
+          <div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto">
             <a class="uk-link-text" (click)="reset()">
               <icon name="close" [flex]="true"></icon>
             </a>
           </div>
           <div class="uk-width-auto">
-            <div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
+            <div class="search-icon" [class.disabled]="disabled" (click)="search()">
               <icon name="search" [flex]="true" ratio="1.3"></icon>
             </div>
           </div>
@@ -44,8 +44,8 @@ export class SearchInputComponent implements OnInit {
   @Input() searchInputClass: string = 'inner';
   @Input() searchControl: AbstractControl;
   @Input() value: string;
-  @Input() options: string[] = [];
   @Output() valueChange = new EventEmitter<string>();
+  @Input() options: string[] = [];
   @Input() placeholder: string;
   @Input() expandable: boolean = false;
   @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
@@ -61,7 +61,7 @@ export class SearchInputComponent implements OnInit {
     if(this.input.focused) {
       if(event.code === 'Enter') {
         event.preventDefault();
-        this.search(event);
+        this.search();
       }
     }
   }
@@ -85,22 +85,22 @@ export class SearchInputComponent implements OnInit {
     }
   }
   
-  public  search(event) {
+  public search() {
     if(!this.disabled) {
-      if (this.expandable) {
-        this.expand(!this.expanded);
-        event.stopPropagation();
-      }
       this.searchEmitter.emit();
     }
   }
   
   public reset() {
+    if(this.searchControl){
       this.searchControl.setValue('');
+    } else {
+      this.valueChange.emit('');
+    }
   }
   
   get hidden(): boolean {
-    return !this.expanded && !this.searchControl.value;
+    return !this.expanded && ((this.searchControl && !this.searchControl.value) || (!this.searchControl && !this.value));
   }
   
   /** @deprecated all*/