From 68e0aa98a83b3db6d8ab558394f3019b8b515bc6 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 25 Oct 2022 17:21:53 +0300
Subject: [PATCH] update advanced search form

---
 .../advancedSearchForm.component.html         | 223 +++++++++---------
 .../searchUtils/newSearchPage.component.html  |   2 +-
 2 files changed, 118 insertions(+), 107 deletions(-)

diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html
index c2954641..2f922846 100644
--- a/searchPages/searchUtils/advancedSearchForm.component.html
+++ b/searchPages/searchUtils/advancedSearchForm.component.html
@@ -17,117 +17,128 @@
   <div [class.dark]="dark">
     <form (ngSubmit)="queryChanged()" class="uk-card uk-card-default uk-box-shadow-medium">
     <button type="submit" class="uk-hidden"></button>
-    <div class="uk-card-body uk-height-medium uk-overflow-auto">
-      <table class="uk-table uk-text-small uk-table-responsive uk-table-small uk-margin-remove">
-        <tr>
-          <td class="uk-text-bold uk-text-uppercase uk-width-2-5">Searching Fields</td>
-          <td class="uk-text-bold uk-text-uppercase uk-width-1-3">Terms</td>
-        </tr>
-        <tr *ngFor="let selectedField of selectedFields; let i = index">
-          <td>
-            <div class="uk-grid uk-flex-middle uk-child-width-1-2@m uk-child-width-1-1">
-              <div input [(value)]="selectedField.id" inputClass="border-bottom"
-                   [options]="fieldIdsOptions" (valueChange)="fieldIdsChanged(i,selectedField.id)" type="select"></div>
-              <div input [(value)]="selectedField.includes" inputClass="border-bottom" [options]="getNotOperators(selectedField)" type="select"></div>
-            </div>
-           <!-- <mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
-                          (ngModelChange)="fieldIdsChanged(i,selectedField.id)">&lt;!&ndash;(click)="fieldIdsChanged(i)"  &ndash;&gt;
-            <mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
-          </mat-select>--></td>
-          <td *ngIf="selectedField.type == 'keyword' || selectedField.type == 'identifier'">
-            <div class="uk-inline uk-width-expand">
-              <a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
-                 (click)="selectedField.value = ''"
-                 uk-icon="icon: close"></a>
-              <input type="text" class="form-control uk-input"
-                     placeholder="Type keywords..."
-                     [(ngModel)]="selectedField.value" name="value[{{i}}]">
-            </div>
-
-
-          </td>
-          <td *ngIf="selectedField.type == 'date'">
-            <date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
-                         [validDateTo]=validDateTo></date-filter>
-          </td>
-          <td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
-            <static-autocomplete [properties]=properties *ngIf=" selectedField.id" [vocabularyId]=selectedField.param
-                                 [fieldId]=selectedField.id
-                                 [list]=this.fieldList[selectedField.id] [entityName]="entityType"
-                                 [selectedValue]=selectedField.value [showSelected]=true
-                                 [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
-                                 [multipleSelections]=false
-                                 (selectedValueChanged)="valueChanged($event,i)"
-                                 (listUpdated)="listUpdated($event,selectedField.id)"
-                                  [id]="'autocomplete-'+i"></static-autocomplete>
-          </td>
-          <td *ngIf="  selectedField.id &&  selectedField.type == 'refine'" class="uk-width-1-3">
-            <static-autocomplete [properties]=properties [list]=this.fieldList[selectedField.id]
-                                 [fieldId]=selectedField.id [entityName]="entityType" [fieldName]=[selectedField.id]
-                                 [selectedValue]=selectedField.value [showSelected]=true
-                                 [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
-                                 [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"
-                                 (listUpdated)="listUpdated($event,selectedField.id)"
-                                 (updateValueLabel)="updatedValueLabel($event, i)"
-                                 [id]="'autocomplete-'+i"></static-autocomplete>
-          </td>
-          <td *ngIf="selectedField.type == 'entity'">
-            <entities-autocomplete [properties]=properties [fieldId]=selectedField.id [entityType]=selectedField.param
-                                   [selectedValue]=selectedField.value [showSelected]=true
-                                   [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
-                                   [multipleSelections]=false
-                                   (selectedValueChanged)="valueChanged($event,i)"
-                                   (updateValueLabel)="updatedValueLabel($event, i)"
-                                   [id]="'autocomplete-'+i">
-            </entities-autocomplete>
-          </td>
-
-          <td *ngIf="selectedField.type == 'boolean'" class="input-group">
-               <span class="input-group-addon">
-                  <input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param
-                         value="true">Yes<br>
-              </span>
-            <span class="input-group-addon">
-                <input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param
-                       value="false">No<br>
-              </span>
-          </td>
-          <td class="uk-width-small">
-            <div *ngIf="i+1 <selectedFields.length" [(value)]="selectedFields[i+1].operatorId" (valueChange)="fieldOperatorChanged(i+1, $event, $event)"
-                 input [options]="operators" inputClass="border-bottom" type="select"></div>
-<!--            <div *ngIf="i+1 <selectedFields.length && onlyAndSupported(i)">and</div>-->
-          </td>
-          <td [class.uk-invisible]="selectedFields.length === 1">
-            <button class="uk-icon uk-close"
-                  (click)="removeField(i)">
-              <icon name="close" [flex]="true" [ratio]="1.2"></icon>
-            </button>
-          </td>
-        </tr>
-      </table>
-      <div class="uk-margin-small-top">
-        <button type="button" (click)="addField()" class="uk-button uk-button-link uk-flex uk-flex-middle">
-          <icon name="add" [flex]="true"></icon>
-          <span class="uk-margin-small-left">Add rule</span>
-        </button>
-      </div>
-      <div class=" uk-text-center uk-margin-small-top">
-        <div *ngIf="!validDateFrom && validDateTo" class="uk-text-danger">
-          Please check your <u>from</u> date
-        </div>
-        <div *ngIf="!validDateTo && validDateFrom" class="uk-text-danger">
-          Please check your <u>to</u> date
-        </div>
-        <div *ngIf="!validDateFrom && !validDateTo" class="uk-text-danger">
-          Please check your dates
-        </div>
-      </div>
-    </div>
+		<div class="uk-grid uk-grid-small uk-grid-divider uk-flex-between" uk-grid>
+			<div class="uk-width-expand">
+				<div class="uk-padding-small uk-padding-remove-left uk-overflow-auto" style="height: 200px; overflow-x: hidden; direction: rtl; scrollbar-gutter: stable;">
+					<div style="direction: ltr;">
+						<table class="uk-table uk-text-small uk-table-responsive uk-table-small uk-margin-remove">
+							<tr>
+								<td class="uk-text-bold uk-text-uppercase uk-width-1-3">Searching Fields</td>
+								<td class="uk-text-bold uk-text-uppercase uk-width-2-5">Terms</td>
+							</tr>
+							<tr *ngFor="let selectedField of selectedFields; let i = index">
+								<td>
+									<div class="uk-grid uk-flex-middle uk-child-width-1-2@m uk-child-width-1-1">
+										<div input [(value)]="selectedField.id" inputClass="border-bottom"
+												 [options]="fieldIdsOptions" (valueChange)="fieldIdsChanged(i,selectedField.id)" type="select"></div>
+										<div input [(value)]="selectedField.includes" inputClass="border-bottom" [options]="getNotOperators(selectedField)" type="select"></div>
+									</div>
+								 <!-- <mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
+																(ngModelChange)="fieldIdsChanged(i,selectedField.id)">&lt;!&ndash;(click)="fieldIdsChanged(i)"  &ndash;&gt;
+									<mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
+								</mat-select>--></td>
+								<td *ngIf="selectedField.type == 'keyword' || selectedField.type == 'identifier'">
+									<div class="uk-inline uk-width-expand">
+										<a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
+											 (click)="selectedField.value = ''"
+											 uk-icon="icon: close"></a>
+										<input type="text" class="form-control uk-input"
+													 placeholder="Type keywords..."
+													 [(ngModel)]="selectedField.value" name="value[{{i}}]">
+									</div>
+			
+			
+								</td>
+								<td *ngIf="selectedField.type == 'date'">
+									<date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
+															 [validDateTo]=validDateTo></date-filter>
+								</td>
+								<td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
+									<static-autocomplete [properties]=properties *ngIf=" selectedField.id" [vocabularyId]=selectedField.param
+																			 [fieldId]=selectedField.id
+																			 [list]=this.fieldList[selectedField.id] [entityName]="entityType"
+																			 [selectedValue]=selectedField.value [showSelected]=true
+																			 [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
+																			 [multipleSelections]=false
+																			 (selectedValueChanged)="valueChanged($event,i)"
+																			 (listUpdated)="listUpdated($event,selectedField.id)"
+																				[id]="'autocomplete-'+i"></static-autocomplete>
+								</td>
+								<td *ngIf="  selectedField.id &&  selectedField.type == 'refine'" class="uk-width-1-3">
+									<static-autocomplete [properties]=properties [list]=this.fieldList[selectedField.id]
+																			 [fieldId]=selectedField.id [entityName]="entityType" [fieldName]=[selectedField.id]
+																			 [selectedValue]=selectedField.value [showSelected]=true
+																			 [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
+																			 [multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"
+																			 (listUpdated)="listUpdated($event,selectedField.id)"
+																			 (updateValueLabel)="updatedValueLabel($event, i)"
+																			 [id]="'autocomplete-'+i"></static-autocomplete>
+								</td>
+								<td *ngIf="selectedField.type == 'entity'">
+									<entities-autocomplete [properties]=properties [fieldId]=selectedField.id [entityType]=selectedField.param
+																				 [selectedValue]=selectedField.value [showSelected]=true
+																				 [placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
+																				 [multipleSelections]=false
+																				 (selectedValueChanged)="valueChanged($event,i)"
+																				 (updateValueLabel)="updatedValueLabel($event, i)"
+																				 [id]="'autocomplete-'+i">
+									</entities-autocomplete>
+								</td>
+			
+								<td *ngIf="selectedField.type == 'boolean'" class="input-group">
+										 <span class="input-group-addon">
+												<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param
+															 value="true">Yes<br>
+										</span>
+									<span class="input-group-addon">
+											<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param
+														 value="false">No<br>
+										</span>
+								</td>
+								<td class="uk-width-small">
+									<div *ngIf="i+1 <selectedFields.length" [(value)]="selectedFields[i+1].operatorId" (valueChange)="fieldOperatorChanged(i+1, $event, $event)"
+											 input [options]="operators" inputClass="border-bottom" type="select"></div>
+								</td>
+								<td [class.uk-invisible]="selectedFields.length === 1">
+									<button class="uk-icon uk-close"
+												(click)="removeField(i)">
+										<icon name="close" [flex]="true" [ratio]="1.2"></icon>
+									</button>
+								</td>
+							</tr>
+						</table>
+						<!-- <div class="uk-margin-small-top">
+							<button type="button" (click)="addField()" class="uk-button uk-button-link uk-flex uk-flex-middle">
+								<icon name="add" [flex]="true"></icon>
+								<span class="uk-margin-small-left">Add rule</span>
+							</button>
+						</div> -->
+						<div class=" uk-text-center uk-margin-small-top">
+							<div *ngIf="!validDateFrom && validDateTo" class="uk-text-danger">
+								Please check your <u>from</u> date
+							</div>
+							<div *ngIf="!validDateTo && validDateFrom" class="uk-text-danger">
+								Please check your <u>to</u> date
+							</div>
+							<div *ngIf="!validDateFrom && !validDateTo" class="uk-text-danger">
+								Please check your dates
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="uk-flex uk-flex-column uk-flex-center uk-margin-right">
+				<button type="button" (click)="addField()" class="uk-icon-button uk-icon-button-xsmall uk-flex uk-flex-middle">
+					<icon name="add" [flex]="true"></icon>
+				</button>
+			</div>
+		</div>
     <a (click)="queryChanged()" class="uk-card-footer uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
       <button class="uk-button uk-button-text">
         <span class="uk-flex uk-flex-middle">
           <icon name="search" [flex]="true"></icon>
           <span class="uk-margin-small-left">Search</span>
+					<span *ngIf="selectedFields.length >= 2" class="uk-margin-xsmall-left">({{selectedFields.length}} Rules)</span>
         </span>
       </button>
     </a>
diff --git a/searchPages/searchUtils/newSearchPage.component.html b/searchPages/searchUtils/newSearchPage.component.html
index c330844b..6e3c1081 100644
--- a/searchPages/searchUtils/newSearchPage.component.html
+++ b/searchPages/searchUtils/newSearchPage.component.html
@@ -129,7 +129,7 @@
         </div>
       </div>
       <div class="uk-position-relative">
-        <div class="uk-container uk-container-small uk-section uk-section-small uk-margin-bottom" id="searchForm">
+        <div class="uk-container 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 [class]="'uk-width-1-1'+(simpleView?' uk-width-auto@m' : '')"><div id="searchImage"></div></div>
             <advanced-search-form class="uk-width-expand uk-padding uk-padding-remove-vertical"