MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

1. Search Pages: Download link, search from bg with dark option. 2. Input add a no value selected option for select type. Search input toggle if input has no value. 3. Sidebar: Add uk-nav

This commit is contained in:
Konstantinos Triantafyllou 2022-04-15 11:08:12 +03:00
parent aa210384bc
commit 73b6704124
13 changed files with 104 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -2,7 +2,7 @@
<div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
<ul class="uk-list uk-nav-parent-icon" uk-nav>
<ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
<li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-open]="isTheActiveMenuItem(item)"
@ -23,7 +23,7 @@
</div>
<ng-template [ngIf]="specialMenuItem">
<div class="menu_section uk-margin-large-top">
<ul class="uk-list">
<ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling">
@ -39,9 +39,4 @@
</div>
</ng-template>
</div>
<!-- <div *ngIf="!isSmallScreen" id="sidebar_switcher_toggle" class="clickable"
(click)="toggleOpen($event)">
<span class="uk-position-center" *ngIf="!open" uk-icon="icon:chevron-right; ratio: 1.5"></span>
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
</div>-->
</aside>

2
searchPages/searchDataProviders.component.ts
View File

@ -34,7 +34,7 @@ import {properties} from "../../../environments/environment";
[openaireLink]=openaireLink
[includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
[piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
[searchFormClass]="type!='deposit'?'datasourcesSearchForm':''"
[searchForm]="{class: '', dark: false}"
[entitiesSelection]="type=='all'" [showSwitchSearchLink]="showSwitchSearchLink"
[filters]="filters"
[simpleView]="simpleView" formPlaceholderText="Search by name, description, subject..."

1
searchPages/searchOrganizations.component.ts
View File

@ -30,7 +30,6 @@ import {properties} from "../../../environments/environment";
[oldTotalResults]="oldTotalResults"
[openaireLink]=openaireLink
[piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
searchFormClass="organizationsSearchForm"
[includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
[sort]="false"
[filters]="filters"

1
searchPages/searchProjects.component.ts
View File

@ -30,7 +30,6 @@ import {properties} from "../../../environments/environment";
[oldTotalResults]="oldTotalResults"
[openaireLink]=openaireLink
[piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
searchFormClass="projectsSearchForm"
[includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
[filters]="filters"
[rangeFilters]="rangeFilters" [rangeFields]="rangeFields"

1
searchPages/searchResearchResults.component.ts
View File

@ -31,7 +31,6 @@ import {ContextsService} from "../claims/claim-utils/service/contexts.service";
[oldTotalResults]="oldTotalResults"
[openaireLink]=openaireLink
[piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
searchFormClass="publicationsSearchForm"
[filters]="filters" [quickFilter]="quickFilter"
[rangeFilters]="rangeFilters" [rangeFields]="rangeFields"
[simpleView]="simpleView" formPlaceholderText="Search by title, author, abstract, DOI, orcid..."

2
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -133,7 +133,7 @@
</form>
<div *ngIf="simpleView">
<form>
<div class="uk-margin-small-bottom uk-flex uk-flex-right" *ngIf="showSwitchSearchLink">
<div class="uk-margin-small-bottom 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

1
searchPages/searchUtils/advancedSearchForm.component.ts
View File

@ -24,6 +24,7 @@ export class AdvancedSearchFormComponent {
@Input() advancedSearchLinkParameters;
@Input() simpleView: boolean = false;
@Input() formPlaceholderText = "Type Keywords...";
@Input() dark: boolean;
@Output() queryChange = new EventEmitter();
@Input() resultTypes;
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };

146
searchPages/searchUtils/newSearchPage.component.html
View File

@ -14,7 +14,7 @@
<ng-container *ngIf="type.selected">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
[class.uk-disabled]="disabled">
[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>
@ -29,7 +29,7 @@
<ng-container *ngIf="filter.selectedFromAndToValues">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled">
[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>
@ -44,7 +44,7 @@
<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" (click)="removeFilter(value, filter)"
<a [attr.uk-tooltip]="'Remove ' + value.name" class="uk-link-reset" (click)="removeFilter(value, filter)"
[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>
@ -114,15 +114,15 @@
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId')?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section uk-section-small' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
'uk-padding-remove-bottom uk-section uk-section-small' : '')
+(simpleView?'':' advancedSearchFormBackground ')" [ngClass]="searchForm.class">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
<div class="uk-container uk-container-large">
<div *ngIf="showBreadcrumb" class="uk-container uk-container-large" [class.uk-light]="searchForm.dark">
<div class="uk-padding-small uk-padding-remove-bottom">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative">
@ -136,6 +136,7 @@
[selectedFields]="selectedFields"
(queryChange)="queryChanged($event)"
[isDisabled]="disabled"
[dark]="searchForm.dark"
[simpleSearchLink]="simpleSearchLink"
[advancedSearchLink]="advancedSearchLink"
[advancedSearchLinkParameters]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
@ -152,14 +153,12 @@
</div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription"></schema2jsonld>
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
<div id="tm-main" class="uk-margin-large-top" [class.uk-margin-top]="stickyForm">
<ng-template #loading>
<loading></loading>
</ng-template>
<ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large">
<div class="uk-container uk-container-large">
<div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
@ -168,7 +167,7 @@
<a href="#mobile-filters" uk-toggle (click)="showOffCanvas=true;">
<span class="uk-icon uk-margin-small-right uk-margin-small-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="settings">
data-svg="settings">
<ellipse fill="none" stroke="#000" cx="6.11" cy="3.55" rx="2.11" ry="2.15"></ellipse>
<ellipse fill="none" stroke="#000" cx="6.11" cy="15.55" rx="2.11" ry="2.15"></ellipse>
<circle fill="none" stroke="#000" cx="13.15" cy="9.55" r="2.15"></circle>
@ -185,49 +184,47 @@
)</span></span>
</a>
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
<!-- TODO - Kostis check offcanvas-white -->
<div class="uk-offcanvas-bar offcanvas-white">
<a class="uk-offcanvas-close uk-link-text" (click)="showOffCanvas=false">
<div class="uk-offcanvas-bar">
<a class="uk-offcanvas-close uk-icon uk-close" (click)="showOffCanvas=false">
<icon name="close" visuallyHidden="close Filters"></icon>
</a>
<div *ngIf="showOffCanvas" class="uk-width-1-1">
<div *ngIf="showOffCanvas">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="includeOnlyResultsAndFilter"
class="uk-margin-medium-top uk-margin-medium-bottom">
<div *ngIf="includeOnlyResultsAndFilter" class="uk-margin-medium-top uk-margin-medium-bottom">
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
[routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +'uk-link uk-float-right '">Advanced
search
</a>
</div>
<div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
<div class="uk-grid uk-margin-large-bottom" uk-grid>
<div *ngIf="showRefine && (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|| (!hideFilters &&
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
)
)"
class="uk-width-1-4@m search-filters uk-visible@m">
class="uk-width-1-4@m search-filters uk-visible@m">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
<div class="uk-width-expand@m uk-with-1-1@s">
<!-- Results only for Custom Filter? -->
<div *ngIf="customFilter && !customFilter.isHiddenFilter &&
customFilter.selected == false && customFilter.promptToAddFilter"
class="uk-alert uk-animation-slide-top-small">
class="uk-alert uk-animation-slide-top-small">
Do you want to see results only for {{customFilter.valueName}}? <a
(click)="addCustomFilter();">Click here</a>.
</div>
<!-- Related results for Custom Filter Alert -->
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
class="uk-alert uk-text-center uk-margin-small-top ">
<span *ngIf="customFilter">The following results are related to <span class="portal-color"
class="uk-alert uk-text-center uk-margin-small-top ">
<span *ngIf="customFilter">The following results are related to <span class="uk-text-primary uk-text-bold"
>{{customFilter.valueName}}</span>.</span>
Are you interested to view more results? Visit
<a
@ -235,46 +232,45 @@
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>.
</div>
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<!-- Total results, number of pages -->
<h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
</ng-container>
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
<span>{{oldTotalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h6>
<!-- Download results -->
<div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
</div>
<!-- No Dashboard Filters -->
<div
*ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
<!-- Total results, number of pages -->
<h6 class="uk-margin-remove">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
</ng-container>
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
<span>{{oldTotalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h6>
<!-- Download results -->
<div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)" class="uk-margin-small-bottom uk-margin-small-top">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
</div>
<div *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))) &&
(searchUtils.status !== errorCodes.LOADING || !loadPaging)">
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
</div>
<div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
<div
*ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-small uk-margin-right" *ngIf="searchUtils.totalResults >= 50 || disabled">
<div input type="select" placeholder="Results per page" inputClass="flat x-small"
[options]="['5','10','20','50']" [(value)]="searchUtils.size" [disabled]="disabled"
(valueChange)="sizeChanged($event)"></div>
</div>
<div class="uk-width-small uk-margin-right" *ngIf="searchUtils.totalResults >= 50 || disabled">
<div input type="select" placeholder="Results per page" inputClass="flat x-small"
[options]="['5','10','20','50']" [(value)]="searchUtils.size" [disabled]="disabled"
(valueChange)="sizeChanged($event)"></div>
</div>
<search-sorting *ngIf="sort"
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)"
@ -283,21 +279,21 @@
</div>
</div>
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
<div
*ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)"
class="uk-margin">
<search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[results]="results"
[status]=searchUtils.status
[type]="entityType"
[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
[results]="results"
[status]=searchUtils.status
[type]="entityType"
[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
</search-result>
<deposit-result *ngIf="usedBy == 'deposit'"
[results]="results"
@ -327,13 +323,13 @@
</div>
<div class="uk-margin-medium-top">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING"
class="uk-margin-small-top uk-grid uk-child-width-1-2">
class="uk-margin-small-top uk-grid uk-child-width-1-2">
<!-- Last Index Info-->
<div class="">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
@ -361,8 +357,6 @@
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

5
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -59,7 +59,10 @@ export class NewSearchPageComponent {
@Input() customFilter: SearchCustomFilter;
@Input() sort: boolean = true;
@Input() sortedByChanged: string = "";
@Input() searchFormClass: string = "searchForm";
@Input() searchForm = {
class: 'search-form',
dark: true
};
//From simple:
@Input() rangeFilters: RangeFilter[] = [];
@Input() rangeFields: string[][] = [];

18
searchPages/searchUtils/searchDownload.component.ts
View File

@ -14,20 +14,12 @@ import {properties} from "../../../../environments/environment";
@Component({
selector: 'search-download',
template: `
<a [attr.uk-tooltip]="'title: Download'
+ ((totalResults > csvLimit)?' the first 2000 ':' ')
+ 'results;'" [class]="isDisabled ? 'uk-disabled uk-link-muted' : 'uk-link-text'"
<button [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results;'"
class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled" [disabled]="isDisabled"
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
<span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="download"
ratio="1">
<polyline fill="none" stroke="#000" points="14,10 9.5,14.5 5,10"></polyline>
<rect x="3" y="17" width="13" height="1"></rect>
<line fill="none" stroke="#000" x1="9.5" y1="13.91" x2="9.5" y2="3"></line>
</svg>
</span>
Download Results
</a>
<icon name="download" [flex]="true"></icon>
<span class="uk-margin-small-left">Download Results</span>
</button>
<modal-loading></modal-loading>
<modal-alert #AlertModalCsvError></modal-alert>
`

3
searchPages/searchUtils/searchDownload.module.ts
View File

@ -5,10 +5,11 @@ import { FormsModule } from '@angular/forms';
import {SearchDownloadComponent} from './searchDownload.component';
import {LoadingModalModule} from '../../utils/modal/loadingModal.module';
import {AlertModalModule} from '../../utils/modal/alertModal.module';
import {IconsModule} from "../../utils/icons/icons.module";
@NgModule({
imports: [
CommonModule, FormsModule, LoadingModalModule, AlertModalModule
CommonModule, FormsModule, LoadingModalModule, AlertModalModule, IconsModule
],
declarations: [
SearchDownloadComponent

11
sharedComponents/input/input.component.ts
View File

@ -48,7 +48,7 @@ declare var UIkit;
<div [id]="id">
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
[class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
[class.active]="(formAsControl?.value || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
[class.active]="(formAsControl?.value || type === 'select' || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
[class.danger]="(formControl.invalid && (formControl.touched || searchControl?.touched)) || (searchControl?.invalid && searchControl?.touched)">
<div #inputBox class="input-box" [class.select]="type === 'select'" click-outside-or-esc
[class.static]="placeholderInfo?.static" (clickOutside)="click($event)">
@ -65,8 +65,13 @@ declare var UIkit;
[rows]="rows" [formControl]="formAsControl"></textarea>
</ng-template>
<ng-template [ngIf]="type === 'select'">
<div *ngIf="formControl.value || !placeholderInfo?.static" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
<div *ngIf="!formControl.value && placeholderInfo?.static" class="input placeholder uk-text-truncate">{{placeholderInfo.label}}</div>
<ng-container *ngIf="placeholderInfo?.static">
<div *ngIf="!formControl.value" class="placeholder uk-text-truncate">{{placeholderInfo.label}}</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)" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
</ng-container>
</ng-template>
<ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"

16
sharedComponents/search-input/search-input.component.ts
View File

@ -26,12 +26,12 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
[disabled]="disabled" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
</div>
<div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto">
<a class="uk-link-text" (click)="reset()">
<button class="uk-close uk-icon" (click)="reset()">
<icon name="close" [flex]="true"></icon>
</a>
</button>
</div>
<div class="uk-width-auto">
<div class="search-icon" [class.disabled]="disabled" (click)="search()">
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
<icon name="search" [flex]="true" ratio="1.3"></icon>
</div>
</div>
@ -62,7 +62,7 @@ export class SearchInputComponent implements OnInit {
if(this.input.focused) {
if(event.code === 'Enter') {
event.preventDefault();
this.search();
this.search(event);
}
}
}
@ -85,9 +85,13 @@ export class SearchInputComponent implements OnInit {
}
}
public search() {
public search(event) {
if(!this.disabled) {
this.searchEmitter.emit();
if(this.expandable) {
this.expand(!this.expanded);
}
event.stopPropagation();
}
}
@ -100,7 +104,7 @@ export class SearchInputComponent implements OnInit {
}
get hidden(): boolean {
return !this.expanded && ((this.searchControl && !this.searchControl.value) || (!this.searchControl && !this.value));
return !this.expanded && (!this.searchControl?.value && !this.value);
}
/** @deprecated all*/