Update search componenents with new theme
This commit is contained in:
parent
71800f06c9
commit
78ee2e4bcd
|
|
@ -131,36 +131,28 @@
|
|||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div *ngIf="simpleView">
|
||||
<form [class]="((isDisabled )?'uk-disabled ':'') + ' uk-margin-medium-bottom uk-margin-top' ">
|
||||
<div class="uk-grid uk-margin-small-left uk-flex" [class.uk-flex-center]="entityType != 'community' && entityType !== 'stakeholder'">
|
||||
<div
|
||||
[class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'">
|
||||
<form [class.uk-disabled]="isDisabled">
|
||||
<div class="uk-grid uk-grid-small uk-flex uk-flex-center" uk-grid>
|
||||
<div *ngIf="entitiesSelection">
|
||||
<entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
|
||||
[properties]="properties"
|
||||
(selectionChange)=" simpleEntityChanged($event)"
|
||||
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
|
||||
</div>
|
||||
<div class="uk-padding-remove-left uk-margin-small-top">
|
||||
<div *ngIf="selectedFields[0]" class="uk-inline">
|
||||
<div>
|
||||
<div *ngIf="selectedFields[0]" class="uk-inline">
|
||||
<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
|
||||
(click)="selectedFields[0].value = ''"
|
||||
uk-icon="icon: close"></a>
|
||||
<input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
|
||||
[placeholder]="formPlaceholderText" aria-describedby="sizing-addon2"
|
||||
[(ngModel)]="selectedFields[0].value" name="keyword">
|
||||
[placeholder]="formPlaceholderText" role="searchbox"
|
||||
[(ngModel)]="selectedFields[0].value" name="keyword"/>
|
||||
</div>
|
||||
<!-- <div class=" uk-width-xlarge@l uk-width-large@m uk-width-medium" [class.quickSelectionsBox]="(resultTypes || quickFilter)">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties">
|
||||
</quick-selections>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="uk-padding-remove-left uk-margin-small-top">
|
||||
<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">
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -3,20 +3,20 @@
|
|||
<ng-container *ngIf="customFilter && ((customFilterEnabled &&
|
||||
refineFields.indexOf(customFilter.queryFieldName) ==
|
||||
-1) ||customFilter.isHiddenFilter)">
|
||||
<span class="uk-width-small">
|
||||
<span class="uk-width-auto">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{customFilter.valueName}}</span>
|
||||
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
|
||||
</span>
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
|
||||
<ng-container *ngIf="type.selected">
|
||||
<span class="uk-width-small">
|
||||
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disableForms || disableRefineForms">
|
||||
<span class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{type.name}}</span>
|
||||
<icon name="close" flex="true"></icon>
|
||||
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
|
||||
<icon name="close" ratio="0.5" flex="true"></icon>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -26,12 +26,12 @@
|
|||
<ng-container *ngIf="selectedRangeFilters > 0">
|
||||
<ng-container *ngFor="let filter of rangeFilters ">
|
||||
<ng-container *ngIf="filter.selectedFromAndToValues">
|
||||
<span class="uk-width-small">
|
||||
<span class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
|
||||
[class.uk-disabled]="disableForms || disableRefineForms">
|
||||
[class.uk-disabled]="disabled">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
|
||||
<icon name="close" flex="true"></icon>
|
||||
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
|
||||
<icon name="close" ratio="0.5" flex="true"></icon>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
<ng-container *ngFor="let filter of filters ">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<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-small">
|
||||
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disableForms || disableRefineForms">
|
||||
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand uk-text-nowrap uk-text-truncate">{{value.name}}</span>
|
||||
<icon name="close" flex="true"></icon>
|
||||
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
|
||||
<icon name="close" ratio="0.5" flex="true"></icon>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
|
|
@ -55,69 +55,54 @@
|
|||
</h1>
|
||||
</ng-template>
|
||||
<ng-template #filters_column>
|
||||
<div [class.filterLoading]="(disableForms || disableRefineForms)">
|
||||
<div class="uk-width-1-1 uk-margin-top" >
|
||||
<div class="uk-grid uk-flex uk-flex-bottom">
|
||||
<!-- *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum > 0)
|
||||
|| (filters.length > 0 && (results.length > 0 || disableForms))"-->
|
||||
<h6 class="uk-text-bold">
|
||||
Filters
|
||||
</h6>
|
||||
<a *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum)>1" (click)="clearFilters()"
|
||||
[class]="((disableForms || disableRefineForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
|
||||
<div [class.filterLoading]="disabled">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<h4 class="uk-margin-right uk-margin-remove-bottom">Filters</h4>
|
||||
<a *ngIf="(selectedRangeFilters + selectedFilters + selectedTypesNum)>0"
|
||||
(click)="clearFilters()" class="uk-text-small"
|
||||
[class.uk-disabled]="disabled" [class.uk-link-muted]="disabled">
|
||||
Clear All
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected
|
||||
== true || customFilter.isHiddenFilter))"
|
||||
class="uk-margin-small-top uk-margin-medium-bottom">
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
|
||||
<div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
|
||||
class="uk-margin-top" role="alert">
|
||||
<loading></loading>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
|
||||
class="'uk-animation-fade uk-margin-top uk-width-1-1" role="alert">
|
||||
<span class="loading-gif uk-align-center" ></span>
|
||||
</div>
|
||||
<div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
|
||||
class="uk-margin-top uk-text-meta">
|
||||
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
|
||||
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
|
||||
</div>
|
||||
<ul *ngIf="!showUnknownFilters"
|
||||
[class]="'uk-list uk-list-divider' + (selectedRangeFilters == 0 && selectedFilters == 0 ? ' uk-margin-small-top' : '')">
|
||||
<!-- searchUtils.refineStatus == errorCodes.DONE &&-->
|
||||
<ng-container *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
|
||||
<li>
|
||||
<div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
|
||||
class="uk-margin-top uk-text-meta">
|
||||
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
|
||||
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
|
||||
</div>
|
||||
<ul *ngIf="!showUnknownFilters" class="uk-list filters">
|
||||
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
|
||||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[isDisabled]="disabled"
|
||||
[filter]="filters[0]" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
|
||||
[actionRoute]="true"></search-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
<li *ngIf="resultTypes && (filters.length > 0)">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
|
||||
[isDisabled]="disableForms || disableRefineForms" [vertical]="true"
|
||||
[properties]="properties" [actionRoute]="true">
|
||||
</quick-selections>
|
||||
</li>
|
||||
<ng-container *ngFor="let filter of rangeFilters">
|
||||
<li>
|
||||
<range-filter [isDisabled]="disableForms || disableRefineForms" [filter]="filter"
|
||||
<li *ngIf="resultTypes && (filters.length > 0)">
|
||||
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
|
||||
[isDisabled]="disabled" [vertical]="true"
|
||||
[properties]="properties" [actionRoute]="true">
|
||||
</quick-selections>
|
||||
</li>
|
||||
<li *ngFor="let filter of rangeFilters">
|
||||
<range-filter [isDisabled]="disabled" [filter]="filter"
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
|
||||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[filter]="filter" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
|
||||
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
|
||||
[isDisabled]="disabled"
|
||||
[filter]="filter" [showResultCount]=showResultCount
|
||||
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
<!-- TODO - Kostis Clean up -->
|
||||
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
|
||||
(stickyForm?'':' uk-position-relative ') :
|
||||
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
|
||||
|
|
@ -130,21 +115,22 @@
|
|||
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
|
||||
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
|
||||
+(simpleView?'':' advancedSearchFormBackground ')">
|
||||
<!-- TODO - Kostis until here-->
|
||||
<div class="uk-width-1-1">
|
||||
<breadcrumbs *ngIf="showBreadcrumb && entityType!='community'"
|
||||
addClass=" uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top"
|
||||
[breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-padding-small">
|
||||
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-position-relative">
|
||||
<div [class]="'uk-container '+(customFilter && customFilter.queryFieldName ==
|
||||
'communityId'?' uk-margin-large-bottom ':'uk-margin-top')+
|
||||
(entityType === 'community' ||entityType === 'stakeholder'?' uk-position-relative':'')" id="searchForm">
|
||||
<div class="uk-container uk-container-large uk-section" id="searchForm">
|
||||
<advanced-search-form
|
||||
[entityType]="entityType"
|
||||
[fieldIds]="fieldIds"
|
||||
[fieldIdsMap]="fieldIdsMap"
|
||||
[selectedFields]="selectedFields"
|
||||
(queryChange)="queryChanged($event)"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[isDisabled]="disabled"
|
||||
[simpleSearchLink]="simpleSearchLink"
|
||||
[advancedSearchLink]="advancedSearchLink"
|
||||
[advancedSearchLinkParameters]
|
||||
|
|
@ -154,9 +140,6 @@
|
|||
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
|
||||
>
|
||||
</advanced-search-form>
|
||||
<div *ngIf="entityType === 'community' || entityType === 'stakeholder' " class="uk-position-center-right uk-visible@m">
|
||||
<img src="assets/common-assets/common/search.svg" class="uk-align-center" width="141" height="171" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,23 +147,16 @@
|
|||
</div>
|
||||
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
|
||||
[searchAction]=false [description]="metaDescription" ></schema2jsonld>
|
||||
|
||||
|
||||
<div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm">
|
||||
<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 ">
|
||||
<!-- <breadcrumbs *ngIf="showBreadcrumb && entityType!='community'"-->
|
||||
<!-- addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>-->
|
||||
<div class="uk-container uk-container-large">
|
||||
<div>
|
||||
<breadcrumbs *ngIf="showBreadcrumb && entityType=='community'"
|
||||
addClass=" " [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
<div [class]="(showRefine && !properties.isDashboard)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
|
||||
<div *ngIf="showRefine && !dashboard" class="uk-offcanvas-content uk-hidden@m uk-margin-top">
|
||||
|
||||
<a href="#offcanvas-usage" uk-toggle>
|
||||
<div *ngIf="showRefine && !dashboard" class="uk-hidden@m uk-margin-top">
|
||||
<a href="#mobile-filters" uk-toggle>
|
||||
<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">
|
||||
|
|
@ -197,18 +173,13 @@
|
|||
</span>
|
||||
<span>Filters <span
|
||||
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}})</span></span>
|
||||
<!-- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1">-->
|
||||
<!-- <rect x="6" y="4" width="12" height="1"></rect><rect x="6" y="9" width="12" height="1"></rect>-->
|
||||
<!-- <rect x="6" y="14" width="12" height="1"></rect>-->
|
||||
<!-- <rect x="2" y="4" width="2" height="1"></rect>-->
|
||||
<!-- <rect x="2" y="9" width="2" height="1"></rect>-->
|
||||
<!-- <rect x="2" y="14" width="2" height="1"></rect>-->
|
||||
<!-- </svg>-->
|
||||
</a>
|
||||
|
||||
<div #offcanvas_element id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;">
|
||||
<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">
|
||||
<button class="uk-offcanvas-close" type="button" uk-close></button>
|
||||
<a class="uk-offcanvas-close uk-link-text">
|
||||
<icon name="close" visuallyHidden="close Filters"></icon>
|
||||
</a>
|
||||
<div class="uk-width-1-1">
|
||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||
</div>
|
||||
|
|
@ -222,7 +193,7 @@
|
|||
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
|
||||
[routerLink]="advancedSearchLink" style="z-index:1;"
|
||||
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
|
||||
[class]="((disableForms || disableRefineForms)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
|
||||
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
|
||||
search
|
||||
</a>
|
||||
<!-- <quick-selections [resultTypes]="resultTypes"
|
||||
|
|
@ -231,16 +202,8 @@
|
|||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties">
|
||||
</quick-selections>-->
|
||||
|
||||
</div>
|
||||
<div class="uk-grid helper-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
|
||||
<!-- <div *ngIf="searchUtils.status == errorCodes.LOADING && filters.length == 0;-->
|
||||
<!-- else elseGridBlock"-->
|
||||
<!-- class="'uk-animation-fade uk-margin-top uk-width-1-1" role="alert">-->
|
||||
<!-- <span class="loading-gif uk-align-center" ></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <ng-template #elseGridBlock>-->
|
||||
<div *ngIf="showRefine && !properties.isDashboard
|
||||
&& (results.length > 0
|
||||
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|
||||
|
|
@ -282,28 +245,32 @@
|
|||
<div class="uk-width-expand@m uk-grid uk-grid-medium uk-margin-small-bottom">
|
||||
<search-results-per-page [size]="searchUtils.size"
|
||||
(sizeChange)="sizeChanged($event)"
|
||||
[isDisabled]="disableForms || disableRefineForms">
|
||||
[isDisabled]="disabled">
|
||||
</search-results-per-page>
|
||||
<search-sorting *ngIf="sort"
|
||||
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
|
||||
(sortByChange)="sortByChanged($event)"
|
||||
[isDisabled]="disableForms || disableRefineForms">
|
||||
[isDisabled]="disabled">
|
||||
</search-sorting>
|
||||
</div>
|
||||
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
|
||||
<search-download
|
||||
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[isDisabled]="disableForms || disableRefineForms"
|
||||
[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))"
|
||||
class="uk-margin-small-top uk-margin-medium-bottom">
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
|
||||
</div>
|
||||
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
||||
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
|
||||
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
|
||||
[isDisabled]="disableForms || disableRefineForms">
|
||||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin-large-bottom">
|
||||
|
|
@ -352,7 +319,7 @@
|
|||
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
||||
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
|
||||
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
|
||||
[isDisabled]="disableForms || disableRefineForms">
|
||||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf=" showIndexInfo && searchUtils.status !== errorCodes.LOADING"
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ declare var UIkit: any;
|
|||
templateUrl: 'newSearchPage.component.html'
|
||||
})
|
||||
export class NewSearchPageComponent {
|
||||
@ViewChild('offcanvas_element') offcanvasElement: ElementRef;
|
||||
@ViewChild('mobileFilters') mobileFilters: ElementRef;
|
||||
@Input() piwikSiteId = null;
|
||||
@Input() hasPrefix: boolean = true;
|
||||
@Input() prefix: string = "OpenAIRE | ";
|
||||
|
|
@ -205,6 +205,10 @@ export class NewSearchPageComponent {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.disableForms || this.disableRefineForms
|
||||
}
|
||||
|
||||
updateMeta(title:string) {
|
||||
let filterArray = [];
|
||||
|
|
@ -294,8 +298,8 @@ export class NewSearchPageComponent {
|
|||
}
|
||||
|
||||
goTo(page: number = 1, scroll:boolean = true) {
|
||||
if(this.offcanvasElement && (typeof document !== 'undefined')) {
|
||||
UIkit.offcanvas(this.offcanvasElement.nativeElement).hide();
|
||||
if(this.mobileFilters && (typeof document !== 'undefined')) {
|
||||
UIkit.offcanvas(this.mobileFilters.nativeElement).hide();
|
||||
}
|
||||
|
||||
this.searchUtils.page = page;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import {AlertModalModule} from "../../utils/modal/alertModal.module";
|
|||
import {ClickModule} from "../../utils/click/click.module";
|
||||
import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/searchResultsForOrcid.module";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
import {LoadingModule} from "../../utils/loading/loading.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -38,7 +39,7 @@ import {IconsModule} from "../../utils/icons/icons.module";
|
|||
SearchFilterModule, RangeFilterModule,
|
||||
PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
|
||||
SearchResultsInDepositModule, SearchResultsForOrcidModule,
|
||||
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule
|
||||
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule
|
||||
],
|
||||
declarations: [
|
||||
NewSearchPageComponent
|
||||
|
|
|
|||
|
|
@ -1,36 +1,31 @@
|
|||
<ul [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .portalSearchCard; row: false">
|
||||
<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .uk-card-default; row: false">
|
||||
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
|
||||
<li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto">
|
||||
<div class="uk-card portalSearchCard uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.disabled]="!hasPermission(result)">
|
||||
<div class="badges">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.disabled]="!hasPermission(result)">
|
||||
<div role="alert">
|
||||
<div *ngIf="type === 'community' && result.isSubscribed"
|
||||
class="portal-card-badge uk-text-center">
|
||||
class="uk-alert-primary uk-padding-small uk-position-top-left uk-text-center">
|
||||
<span>Subscribed</span>
|
||||
</div>
|
||||
<!-- <div *ngIf="type === 'community' && result.status == 'manager'"
|
||||
class="private-card-badge uk-text-center ">
|
||||
<span>Private</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div *ngIf="type === 'community' && result.status === 'manager'"
|
||||
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
|
||||
<span class="space uk-text-small uk-text-capitalize">restricted</span>
|
||||
</div>
|
||||
<div *ngIf="type === 'community' && result.status === 'hidden'"
|
||||
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get('PRIVATE')"></icon>
|
||||
<span class="space uk-text-small uk-text-capitalize">private</span>
|
||||
</div>
|
||||
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
|
||||
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get(result.visibility)"></icon>
|
||||
<span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
|
||||
<div *ngIf="type === 'community' && result.status === 'manager'"
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
|
||||
<span class="space uk-text-small uk-text-capitalize">restricted</span>
|
||||
</div>
|
||||
<div *ngIf="type === 'community' && result.status === 'hidden'"
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get('PRIVATE')"></icon>
|
||||
<span class="space uk-text-small uk-text-capitalize">private</span>
|
||||
</div>
|
||||
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
|
||||
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
|
||||
<icon [name]="visibilityIcon.get(result.visibility)"></icon>
|
||||
<span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
|
||||
target="_blank"
|
||||
class="uk-width-1-5@s">
|
||||
target="_blank" class="uk-width-1-5@s">
|
||||
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
|
||||
</a>
|
||||
<a *ngIf="!directLink && hasPermission(result)"
|
||||
|
|
@ -42,58 +37,50 @@
|
|||
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
|
||||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-text-large uk-grid" uk-grid>
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" target="_blank"
|
||||
[class]="(result.isManager)?'uk-width-3-4@s portal-link':'portal-link'">
|
||||
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</a>
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" [class]="(result.isManager)?'uk-width-3-4@s':''"
|
||||
class="portal-link">
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</a>
|
||||
<div *ngIf="!hasPermission(result)" [class.uk-width-3-4@s]="result.isManager">
|
||||
<h5 *ngIf="!hasPermission(result)">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</div>
|
||||
</h5>
|
||||
</div>
|
||||
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-text-large uk-grid">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" target="_blank"
|
||||
[class.uk-width-3-4@s]="result.isManager" class="portal-link">
|
||||
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
|
||||
{{(result.name) ? result.name : result.index_shortName}}
|
||||
</a>
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" [class.uk-width-3-4@s]="result.isManager"
|
||||
class="portal-link">
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
|
||||
{{(result.name) ? result.name : result.index_shortName}}
|
||||
</a>
|
||||
<div *ngIf="!hasPermission(result)" [class.uk-width-3-4@s]="result.isManager">
|
||||
<h5 *ngIf="!hasPermission(result)">
|
||||
{{(result.name) ? result.name : result.index_shortName}}
|
||||
</div>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="uk-margin-small-top uk-text-small">
|
||||
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date:</span>
|
||||
<span class="space" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
|
||||
<span class="space" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
|
||||
<span *ngIf="type === 'community' && showType && result.type && result.type != ''" class="uk-margin-left">
|
||||
<span class="uk-text-muted">Type:</span>
|
||||
<span
|
||||
class="space uk-text-capitalize">{{(result.type == 'ri') ? 'Research Initiative' : 'Research Community'}}</span>
|
||||
</span>
|
||||
<span *ngIf="type === 'stakeholder' && result.type && result.type != ''" class="uk-margin-left">
|
||||
<span class="uk-text-muted">Type:</span>
|
||||
<span
|
||||
class="space uk-text-capitalize">{{(result.type == 'ri') ? 'research initiative' : result.type}}</span>
|
||||
</span>
|
||||
<div *ngIf="result.description" class="uk-margin-bottom multi-line-ellipsis lines-2">
|
||||
<p class="uk-text-justify">
|
||||
{{result.description}}
|
||||
</p>
|
||||
</div>
|
||||
<div *ngIf="result.description">
|
||||
<div class="text-justify descriptionText uk-text-small uk-text-muted uk-margin-auto-right">
|
||||
<!-- [title]="result.description">-->
|
||||
{{_formatDescription(result.description)}}
|
||||
</div>
|
||||
<div class="uk-text-small uk-flex uk-flex-middle">
|
||||
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span>
|
||||
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
|
||||
<span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
|
||||
<span *ngIf="type === 'community' && showType && result.type" class="uk-margin-left">
|
||||
<span class="uk-text-muted">Type:</span>
|
||||
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
|
||||
</span>
|
||||
<span *ngIf="type === 'stakeholder' && result.type" class="uk-margin-left">
|
||||
<span class="uk-text-muted">Type:</span>
|
||||
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<manage *ngIf="type === 'community' && result.isManager" [communityId]="result.communityId"
|
||||
class="uk-margin-large-right"></manage>
|
||||
<manage *ngIf="type === 'stakeholder' && result.isManager" [alias]="result.alias"
|
||||
class="uk-margin-large-right"></manage>
|
||||
</div>
|
||||
<div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
|
||||
<manage [communityId]="result.communityId" [alias]="result.alias"></manage>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -105,20 +92,6 @@
|
|||
</modal-alert>
|
||||
<ng-template #resultPreview let-result="result">
|
||||
<div class="uk-flex uk-flex-center">
|
||||
<img *ngIf="result.logoUrl"
|
||||
[src]="result | logoUrl"
|
||||
alt="{{(result.title)?result.title:result.shortTitle}} logo" loading="lazy">
|
||||
<span *ngIf="!result.logoUrl" class="uk-icon">
|
||||
<svg viewBox="0 0 20 20" class="uk-width-1-1" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
cx="7.7" cy="8.6"
|
||||
r="3.5"></circle> <path
|
||||
fill="none" stroke="#000" stroke-width="1.1"
|
||||
d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="1.1"
|
||||
d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
|
||||
</span>
|
||||
<img *ngIf="result.logoUrl" [src]="result | logoUrl" [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {CommunityInfo} from "../../connect/community/communityInfo";
|
|||
import {Router} from "@angular/router";
|
||||
import {LocalStorageService} from "../../services/localStorage.service";
|
||||
import {Stakeholder, StakeholderInfo, Visibility} from "../../monitor/entities/stakeholder";
|
||||
import {StringUtils} from "../../utils/string-utils.class";
|
||||
|
||||
@Component({
|
||||
selector: 'portal-search-result',
|
||||
|
|
@ -21,13 +20,11 @@ export class PortalSearchResultComponent implements OnInit{
|
|||
@Input() showLoading: boolean = false;
|
||||
@Input() custom_class: string = "search-results";
|
||||
@Input() properties: EnvProperties;
|
||||
@Input() maxCharacters: number = 150;
|
||||
@ViewChild('AlertModal') modal;
|
||||
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
|
||||
["PRIVATE", 'lock'],
|
||||
["RESTRICTED", 'group']
|
||||
]);
|
||||
|
||||
public urlParam: string;
|
||||
public errorCodes: ErrorCodes = new ErrorCodes();
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
|
|
@ -50,6 +47,18 @@ export class PortalSearchResultComponent implements OnInit{
|
|||
});
|
||||
}
|
||||
|
||||
mapType(type: string) {
|
||||
if(type === 'ri') {
|
||||
return 'Research Initiative';
|
||||
} else if(type === 'community') {
|
||||
return 'Research Community'
|
||||
} else if(type === 'organization') {
|
||||
return 'Institution';
|
||||
} else {
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
hasPermission(result: CommunityInfo & StakeholderInfo) {
|
||||
if(this.type === "community") {
|
||||
return result.status === "all" || (result.status === "manager" && result.isManager);
|
||||
|
|
@ -67,11 +76,6 @@ export class PortalSearchResultComponent implements OnInit{
|
|||
return this.properties.environment != "development";
|
||||
}
|
||||
|
||||
public _formatDescription(description) {
|
||||
let descr: string = StringUtils.HTMLToString(description);
|
||||
return (((descr).length > this.maxCharacters) ? (descr.substring(0, (this.maxCharacters - ('...').length)) + "...") : descr);
|
||||
}
|
||||
|
||||
public confirmModalOpen(result: CommunityInfo & Stakeholder) {
|
||||
this.selected = result;
|
||||
this.modal.cancelButton = true;
|
||||
|
|
@ -90,15 +94,13 @@ export class PortalSearchResultComponent implements OnInit{
|
|||
}
|
||||
|
||||
public getCommunityPageUrl(communityInfo: CommunityInfo): string {
|
||||
let url = '';
|
||||
if (this.isProduction()) {
|
||||
url = 'https://' + this.getEnvironmentPrefix() + communityInfo.communityId + '.openaire.eu';
|
||||
return 'https://' + this.getEnvironmentPrefix() + communityInfo.communityId + '.openaire.eu';
|
||||
} else {
|
||||
url = this.router.createUrlTree(['/'], {
|
||||
return this.router.createUrlTree(['/'], {
|
||||
queryParams: {'communityId': communityInfo.communityId}
|
||||
}).toString();
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
public getStakeholderPageUrl(stakeholder: Stakeholder) {
|
||||
|
|
|
|||
|
|
@ -29,12 +29,9 @@ import {ActivatedRoute, Router} from "@angular/router";
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="vertical && (resultTypes || quickFilter)"
|
||||
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-margin-small-bottom uk-list uk-list-divider'">
|
||||
<search-filter
|
||||
[isDisabled]="isDisabled"
|
||||
[filter]="resultTypes" [showResultCount]='false'
|
||||
(onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
|
||||
<div *ngIf="vertical && (resultTypes || quickFilter)" [class.uk-disabled]="isDisabled">
|
||||
<search-filter [isDisabled]="isDisabled" [filter]="resultTypes" [showResultCount]='false'
|
||||
(onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
|
||||
</div>
|
||||
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,99 +1,93 @@
|
|||
<div *ngIf= "filter.values.length >0" class="uk-margin-small-bottom">
|
||||
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom">
|
||||
<h6 class="uk-margin-bottom-remove" title = "{{filter.title}}">{{_formatTitle(filter.title,filter.values.length)}}</h6>
|
||||
<a *ngIf="filter.countSelectedValues>0" (click)="clearFilter()"
|
||||
[class]="((isDisabled)?'uk-disabled':'') + ' portal-link '">
|
||||
Clear
|
||||
</a>
|
||||
<div *ngIf="filter.values.length >0">
|
||||
<div class="uk-flex uk-flex-middle uk-margin-bottom">
|
||||
<h6 [title]="filter.title"
|
||||
class="uk-margin-right uk-margin-remove-bottom">{{_formatTitle(filter.title, filter.values.length)}}</h6>
|
||||
<a *ngIf="filter.countSelectedValues>0" class="uk-text-small" (click)="clearFilter()" [class.uk-disabled]="isDisabled">Clear</a>
|
||||
</div>
|
||||
<div aria-expanded="false">
|
||||
<div>
|
||||
<ng-container>
|
||||
<div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div title = "{{value.name}}">
|
||||
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
|
||||
</div>
|
||||
<div aria-expanded="false">
|
||||
<div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
|
||||
class="uk-animation-fade uk-text-small uk-margin-small-bottom">
|
||||
<div [title]="value.name">
|
||||
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf=" addShowMore && (filter.values.length) > filterValuesNum">
|
||||
<a
|
||||
[class]="((isDisabled)?'uk-disabled uk-link-muted ':' portal-link ') + ' uk-margin-small-top'"
|
||||
[attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
|
||||
<span *ngIf="!isOpen">+ View all</span>
|
||||
<!-- <span *ngIf="isOpen">- View less</span>-->
|
||||
</a>
|
||||
|
||||
<div hidden [id]="'toggle-'+filter.filterId" class="uk-text-small uk-margin-small-bottom">
|
||||
<div class="">
|
||||
<span class="uk-text-meta uk-margin-small-left">Top 100 values are
|
||||
shown in the filters</span>
|
||||
<div class="uk-grid uk-margin-small-left uk-flex uk-flex-bottom">
|
||||
<input class="uk-input uk-margin-small-top uk-form-small uk-width-2-3@m uk-width-3-5@s text-input-box "
|
||||
name="filter-keyword"
|
||||
placeholder="Search..." type="text" [(ngModel)]="keyword">
|
||||
|
||||
<span *ngIf="showResultCount === true"
|
||||
class="uk-width-1-3@m uk-width-2-5@s uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
|
||||
<span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
|
||||
<select [(ngModel)]="sortBy"
|
||||
class=" uk-width-expand uk-select uk-hidden@m uk-form-small"
|
||||
id="form-horizontal-select" name="select_order">
|
||||
<option value="num">Results number</option>
|
||||
<option value="name">Name</option>
|
||||
</select>
|
||||
<mat-select [(ngModel)]="sortBy"
|
||||
class="uk-width-expand matSelection uk-visible@m"
|
||||
id="form-horizontal-select1" name="select_order"
|
||||
[disableOptionCentering]="true" panelClass="matSelectionPanel">
|
||||
<mat-option value="num">Results number</mat-option>
|
||||
<mat-option value="name">Name</mat-option>
|
||||
</mat-select>
|
||||
</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf=" addShowMore && (filter.values.length) > filterValuesNum">
|
||||
<a
|
||||
[class]="((isDisabled)?'uk-disabled uk-link-muted ':' portal-link ') + ' uk-margin-small-top'"
|
||||
[attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
|
||||
<span *ngIf="!isOpen">+ View all</span>
|
||||
<!-- <span *ngIf="isOpen">- View less</span>-->
|
||||
</a>
|
||||
|
||||
<div hidden [id]="'toggle-'+filter.filterId" class="uk-text-small uk-margin-small-bottom">
|
||||
<div class="">
|
||||
<span class="uk-text-meta uk-margin-small-left">Top 100 values are
|
||||
shown in the filters</span>
|
||||
<div class="uk-grid uk-margin-small-left uk-flex uk-flex-bottom">
|
||||
<input class="uk-input uk-margin-small-top uk-form-small uk-width-2-3@m uk-width-3-5@s text-input-box "
|
||||
name="filter-keyword"
|
||||
placeholder="Search..." type="text" [(ngModel)]="keyword">
|
||||
|
||||
<span *ngIf = "showResultCount === true"
|
||||
class="uk-width-1-3@m uk-width-2-5@s uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
|
||||
<span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
|
||||
<select [(ngModel)]="sortBy"
|
||||
class=" uk-width-expand uk-select uk-hidden@m uk-form-small"
|
||||
id="form-horizontal-select" name="select_order">
|
||||
<option value="num">Results number</option>
|
||||
<option value="name">Name</option>
|
||||
</select>
|
||||
<mat-select [(ngModel)]="sortBy"
|
||||
class="uk-width-expand matSelection uk-visible@m"
|
||||
id="form-horizontal-select1" name="select_order"
|
||||
[disableOptionCentering]="true" panelClass="matSelectionPanel">
|
||||
<mat-option value="num">Results number</mat-option>
|
||||
<mat-option value="name">Name</mat-option>
|
||||
</mat-select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-overflow-auto uk-height-max-small uk-padding-remove
|
||||
uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
|
||||
<ng-container *ngFor="let value of sort(filter.values)">
|
||||
<div *ngIf="filterKeywords(value.name)" title = "{{value.name}}"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<ng-container *ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"
|
||||
[attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
|
||||
<span *ngIf="isOpen">- View less</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-overflow-auto uk-height-max-small uk-padding-remove
|
||||
uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
|
||||
<ng-container *ngFor="let value of sort(filter.values)">
|
||||
<div *ngIf="filterKeywords(value.name)" title="{{value.name}}"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="input_label_wrapper; context: {filter: filter, value: value}"></ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"
|
||||
[attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
|
||||
<span *ngIf="isOpen">- View less</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #input_label let-filter="filter" let-value="value">
|
||||
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'"
|
||||
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled' : ''">
|
||||
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[name]="filter.filterId" [value]="value.id" [(ngModel)]="filter.radioValue"
|
||||
(ngModelChange)="uniqueFilterChange(value)"/>
|
||||
{{' '+_formatName(value)}}
|
||||
<span *ngIf = "showResultCount === true" >
|
||||
{{' ('+(value.number|number)+')'}}
|
||||
<span *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'" class="uk-flex uk-flex-middle"
|
||||
[class.uk-disabled]="isDisabled || (showResultCount && value.number === 0)">
|
||||
<span>
|
||||
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)"/>
|
||||
<input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[name]="filter.filterId" [value]="value.id" [(ngModel)]="filter.radioValue"
|
||||
(ngModelChange)="uniqueFilterChange(value)"/>
|
||||
</span>
|
||||
</label>
|
||||
<span class="uk-margin-small-left">
|
||||
{{_formatName(value)}}
|
||||
<span *ngIf="showResultCount">({{value.number|number}})</span>
|
||||
</span>
|
||||
</span>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #input_label_wrapper let-filter="filter" let-value="value">
|
||||
<a *ngIf="actionRoute" class="filterLabel" [routerLink]="getRoute()"
|
||||
[queryParams]="getParams(filter,value)"
|
||||
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled uk-link-muted' : ''">
|
||||
<a *ngIf="actionRoute" [routerLink]="getRoute()"
|
||||
[queryParams]="getParams(filter,value)" class="uk-link-muted"
|
||||
[class.uk-disabled]="disabled(value.number)" [class.uk-link-text]="!disabled(value.number)">
|
||||
<ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
|
||||
</a>
|
||||
<ng-container *ngIf="!actionRoute">
|
||||
|
|
|
|||
|
|
@ -7,292 +7,308 @@ import {
|
|||
OnChanges,
|
||||
SimpleChanges
|
||||
} from '@angular/core';
|
||||
import { Filter, Value} from './searchHelperClasses.class';
|
||||
import {Filter, Value} from './searchHelperClasses.class';
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {SearchFields} from "../../utils/properties/searchFields";
|
||||
|
||||
@Component({
|
||||
selector: 'search-filter',
|
||||
templateUrl: 'searchFilter.component.html'
|
||||
selector: 'search-filter',
|
||||
templateUrl: 'searchFilter.component.html'
|
||||
})
|
||||
|
||||
export class SearchFilterComponent implements OnInit, OnChanges{
|
||||
|
||||
@Input() filter:Filter;
|
||||
@Input() showResultCount:boolean = true;
|
||||
@Input() isDisabled:boolean = false;
|
||||
@Input() addShowMore:boolean = true;
|
||||
export class SearchFilterComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input() filter: Filter;
|
||||
@Input() showResultCount: boolean = true;
|
||||
@Input() isDisabled: boolean = false;
|
||||
@Input() addShowMore: boolean = true;
|
||||
@Input() showMoreInline: boolean = true;
|
||||
@Input() filterValuesNum: number = 6;
|
||||
public showAll:boolean = false;
|
||||
public _maxCharacters:number =28;
|
||||
|
||||
public showAll: boolean = false;
|
||||
public _maxCharacters: number = 28;
|
||||
|
||||
@Output() toggleModal = new EventEmitter();
|
||||
|
||||
|
||||
@Output() modalChange = new EventEmitter();
|
||||
@Output() onFilterChange = new EventEmitter();
|
||||
keyword = "";
|
||||
sortBy = "name";
|
||||
queryParams = {};
|
||||
paramPosition = 0;
|
||||
@Input() actionRoute:boolean = false;
|
||||
@Input() actionRoute: boolean = false;
|
||||
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
|
||||
sub;
|
||||
public isOpen:boolean=false;
|
||||
|
||||
constructor (private _router: Router, private route: ActivatedRoute) {
|
||||
}
|
||||
public isOpen: boolean = false;
|
||||
|
||||
constructor(private _router: Router, private route: ActivatedRoute) {
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if(this.sub){
|
||||
if (this.sub) {
|
||||
this.sub.unsubscribe();
|
||||
}
|
||||
}
|
||||
ngOnInit() {
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
this.queryParams = Object.assign({}, params);
|
||||
this.paramPosition = SearchFields.getParameterOrder(this.filter.filterId, this.getEntries(params));
|
||||
|
||||
ngOnInit() {
|
||||
this.sub = this.route.queryParams.subscribe(params => {
|
||||
this.queryParams = Object.assign({}, params);
|
||||
this.paramPosition = SearchFields.getParameterOrder(this.filter.filterId, this.getEntries(params));
|
||||
});
|
||||
this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
|
||||
if (this.filter.filterType == "radio") {
|
||||
this.filter.radioValue = "";
|
||||
this.filter.values.forEach(value => {
|
||||
if (value.selected) {
|
||||
this.filter.radioValue = value.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes.filter) {
|
||||
this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
|
||||
if(this.filter.filterType == "radio"){
|
||||
if (this.filter.filterType == "radio") {
|
||||
this.filter.radioValue = "";
|
||||
this.filter.values.forEach(value => {
|
||||
if(value.selected){
|
||||
if (value.selected) {
|
||||
this.filter.radioValue = value.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if(changes.filter) {
|
||||
this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
|
||||
if(this.filter.filterType == "radio"){
|
||||
this.filter.radioValue = "";
|
||||
this.filter.values.forEach(value => {
|
||||
if(value.selected){
|
||||
this.filter.radioValue = value.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public _formatTitle(title,length){
|
||||
return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title)+" ("+(length>95?"100":length)+")";
|
||||
public _formatTitle(title, length) {
|
||||
return (((title + " (" + length + ")").length > this._maxCharacters) ? (title.substring(0, (this._maxCharacters - (" (" + length + ")").length - ('...').length)) + "...") : title) + " (" + (length > 95 ? "100" : length) + ")";
|
||||
}
|
||||
|
||||
public _formatName(value) {
|
||||
//let maxLineLength = 24;
|
||||
let maxLineLength = 35;
|
||||
|
||||
//1 space after checkbox
|
||||
//3 space before number + parenthesis
|
||||
if (!this.showResultCount && value.name.length + 1 > maxLineLength) {
|
||||
return value.name.substr(0, maxLineLength - 3 - 1) + '...';
|
||||
}
|
||||
public _formatName(value){
|
||||
//let maxLineLength = 24;
|
||||
let maxLineLength = 35;
|
||||
|
||||
//1 space after checkbox
|
||||
//3 space before number + parenthesis
|
||||
if(!this.showResultCount && value.name.length+1 > maxLineLength ){
|
||||
return value.name.substr(0, maxLineLength -3 -1)+'...';
|
||||
}
|
||||
if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){
|
||||
return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...';
|
||||
}
|
||||
|
||||
return value.name;
|
||||
if (value.name.length + value.number.toLocaleString().length + 1 + 3 > maxLineLength) {
|
||||
return value.name.substr(0, (maxLineLength - 3 - 4 - value.number.toLocaleString().length)) + '...';
|
||||
}
|
||||
|
||||
filterKeywords(value){
|
||||
if(this.keyword.length > 0){
|
||||
if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
|
||||
return false;
|
||||
}
|
||||
|
||||
return value.name;
|
||||
}
|
||||
|
||||
filterKeywords(value) {
|
||||
if (this.keyword.length > 0) {
|
||||
if (value.toLowerCase().indexOf(this.keyword.toLowerCase()) == -1) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
filterChange(selected:boolean){
|
||||
if(selected){
|
||||
this.filter.countSelectedValues++;
|
||||
}else{
|
||||
this.filter.countSelectedValues--;
|
||||
}
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
filterChange(selected: boolean) {
|
||||
if (selected) {
|
||||
this.filter.countSelectedValues++;
|
||||
} else {
|
||||
this.filter.countSelectedValues--;
|
||||
}
|
||||
uniqueFilterChange(value: Value) {
|
||||
let tmp = value.selected;
|
||||
value.selected = !tmp;
|
||||
|
||||
if(value.selected){
|
||||
this.filter.countSelectedValues = 1;
|
||||
}else{
|
||||
this.filter.countSelectedValues = 0;
|
||||
}
|
||||
|
||||
this.filter.values.forEach(value => {
|
||||
value.selected = (value.id == this.filter.radioValue);
|
||||
});
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
}
|
||||
clearFilter() {
|
||||
for (var i=0; i < this.filter.values.length; i++){
|
||||
this.filter.values[i].selected = false;
|
||||
}
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
}
|
||||
|
||||
uniqueFilterChange(value: Value) {
|
||||
let tmp = value.selected;
|
||||
value.selected = !tmp;
|
||||
|
||||
if (value.selected) {
|
||||
this.filter.countSelectedValues = 1;
|
||||
} else {
|
||||
this.filter.countSelectedValues = 0;
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
this.filter.radioValue = "";
|
||||
}
|
||||
|
||||
getSelectedAndTopValues(filter, topNum: number = 6):any{
|
||||
|
||||
this.filter.values.forEach(value => {
|
||||
value.selected = (value.id == this.filter.radioValue);
|
||||
});
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
}
|
||||
|
||||
clearFilter() {
|
||||
for (var i = 0; i < this.filter.values.length; i++) {
|
||||
this.filter.values[i].selected = false;
|
||||
}
|
||||
this.filter.countSelectedValues = 0;
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
this.filter.radioValue = "";
|
||||
}
|
||||
|
||||
getSelectedAndTopValues(filter, topNum: number = 6): any {
|
||||
var values = [];
|
||||
|
||||
for (let i=0; i < topNum; i++){
|
||||
if(filter.values.length <= i) {
|
||||
|
||||
for (let i = 0; i < topNum; i++) {
|
||||
if (filter.values.length <= i) {
|
||||
break;
|
||||
}
|
||||
values.push(filter.values[i]);
|
||||
}
|
||||
|
||||
if(filter.countSelectedValues >0){
|
||||
for (let i=topNum; i < filter.values.length; i++){
|
||||
if(filter.values[i].selected){
|
||||
|
||||
if (filter.countSelectedValues > 0) {
|
||||
for (let i = topNum; i < filter.values.length; i++) {
|
||||
if (filter.values[i].selected) {
|
||||
values.push(filter.values[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
getSelectedValues(filter, sortBy:string = "num"):any{
|
||||
var selected = [];
|
||||
if(filter.countSelectedValues >0){
|
||||
for (var i=0; i < filter.values.length; i++){
|
||||
if(filter.values[i].selected){
|
||||
selected.push(filter.values[i]);
|
||||
}
|
||||
|
||||
getSelectedValues(filter, sortBy: string = "num"): any {
|
||||
var selected = [];
|
||||
if (filter.countSelectedValues > 0) {
|
||||
for (var i = 0; i < filter.values.length; i++) {
|
||||
if (filter.values[i].selected) {
|
||||
selected.push(filter.values[i]);
|
||||
}
|
||||
}
|
||||
if(sortBy == "name"){
|
||||
|
||||
selected.sort((n1,n2)=> {
|
||||
if (n1.name > n2.name) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return selected;
|
||||
|
||||
}
|
||||
getNotSelectedValues(filter, sortBy:string = "num"):any{
|
||||
var notSselected = [];
|
||||
for (var i=0; i < filter.values.length; i++){
|
||||
if(!filter.values[i].selected){
|
||||
notSselected.push(filter.values[i]);
|
||||
if (sortBy == "name") {
|
||||
|
||||
selected.sort((n1, n2) => {
|
||||
if (n1.name > n2.name) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
if(sortBy == "name"){
|
||||
|
||||
notSselected.sort((n1,n2)=> {
|
||||
if (n1.name > n2.name) {
|
||||
return 1;
|
||||
}
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return notSselected;
|
||||
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
sort(values: Value[]) {
|
||||
let sorted: Value[] = values.slice();
|
||||
if(this.sortBy == "name"){
|
||||
|
||||
sorted.sort((n1,n2)=> {
|
||||
if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
return selected;
|
||||
|
||||
}
|
||||
|
||||
getNotSelectedValues(filter, sortBy: string = "num"): any {
|
||||
var notSselected = [];
|
||||
for (var i = 0; i < filter.values.length; i++) {
|
||||
if (!filter.values[i].selected) {
|
||||
notSselected.push(filter.values[i]);
|
||||
}
|
||||
return sorted;
|
||||
}
|
||||
|
||||
|
||||
if (sortBy == "name") {
|
||||
|
||||
notSselected.sort((n1, n2) => {
|
||||
if (n1.name > n2.name) {
|
||||
return 1;
|
||||
}
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return notSselected;
|
||||
}
|
||||
|
||||
sort(values: Value[]) {
|
||||
let sorted: Value[] = values.slice();
|
||||
if (this.sortBy == "name") {
|
||||
|
||||
sorted.sort((n1, n2) => {
|
||||
if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return sorted;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
}
|
||||
|
||||
getFilterName(value){
|
||||
let name = value.name +" ("+ value.number.format()+")";
|
||||
|
||||
disabled(value) {
|
||||
return this.isDisabled || (this.showResultCount && value === 0);
|
||||
}
|
||||
|
||||
getFilterName(value) {
|
||||
let name = value.name + " (" + value.number.format() + ")";
|
||||
console.log(name);
|
||||
return name;
|
||||
}
|
||||
getRoute(){
|
||||
return this._router.url.split("?")[0];
|
||||
|
||||
getRoute() {
|
||||
return this._router.url.split("?")[0];
|
||||
}
|
||||
getParams(filter:Filter, value:Value){
|
||||
let params = Object.assign({}, this.queryParams);
|
||||
/* let qf=false;
|
||||
if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){
|
||||
params['qf']="false";
|
||||
qf=true;
|
||||
}*/
|
||||
if(params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','),value.id)==-1 /*&& !qf*/) {
|
||||
//has other values of this filter --> add this value
|
||||
params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"';
|
||||
}else if(params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','),value.id)!=-1) {
|
||||
// has this filter and the value -- > remove it
|
||||
|
||||
let values = params[filter.filterId].split(',');
|
||||
values.splice(this.checkIfValueIndexOf(values,value.id), 1);
|
||||
params[filter.filterId] =values.join(',');
|
||||
if(values.length == 0){
|
||||
delete params[filter.filterId];
|
||||
}
|
||||
} else /*if(!qf)*/{
|
||||
//has no filter, no value --> add the value
|
||||
//check the order
|
||||
let keyValues = this.getEntries(params);
|
||||
keyValues.splice(this.paramPosition,0, [filter.filterId,'"' + encodeURIComponent(value.id) + '"']); // insert key value at paramPosition.
|
||||
params = keyValues.reduce((o, key) => Object.assign(o, {[key[0]]:key[1]}), {});
|
||||
// params[filter.filterId] = '"' + encodeURIComponent(value.id) + '"' ;
|
||||
|
||||
getParams(filter: Filter, value: Value) {
|
||||
let params = Object.assign({}, this.queryParams);
|
||||
/* let qf=false;
|
||||
if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){
|
||||
params['qf']="false";
|
||||
qf=true;
|
||||
}*/
|
||||
if (params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','), value.id) == -1 /*&& !qf*/) {
|
||||
//has other values of this filter --> add this value
|
||||
params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"';
|
||||
} else if (params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','), value.id) != -1) {
|
||||
// has this filter and the value -- > remove it
|
||||
|
||||
let values = params[filter.filterId].split(',');
|
||||
values.splice(this.checkIfValueIndexOf(values, value.id), 1);
|
||||
params[filter.filterId] = values.join(',');
|
||||
if (values.length == 0) {
|
||||
delete params[filter.filterId];
|
||||
}
|
||||
delete params['page'];
|
||||
return params;
|
||||
} else /*if(!qf)*/{
|
||||
//has no filter, no value --> add the value
|
||||
//check the order
|
||||
let keyValues = this.getEntries(params);
|
||||
keyValues.splice(this.paramPosition, 0, [filter.filterId, '"' + encodeURIComponent(value.id) + '"']); // insert key value at paramPosition.
|
||||
params = keyValues.reduce((o, key) => Object.assign(o, {[key[0]]: key[1]}), {});
|
||||
// params[filter.filterId] = '"' + encodeURIComponent(value.id) + '"' ;
|
||||
}
|
||||
delete params['page'];
|
||||
return params;
|
||||
}
|
||||
checkIfValueIndexOf(array, value){
|
||||
let encodedValue = encodeURIComponent(value);
|
||||
if(array.indexOf(encodedValue)!=-1){
|
||||
return array.indexOf(encodedValue);
|
||||
}
|
||||
if(array.indexOf('"'+encodedValue+'"')!=-1){
|
||||
return array.indexOf('"'+encodedValue+'"');
|
||||
}
|
||||
return -1;
|
||||
|
||||
checkIfValueIndexOf(array, value) {
|
||||
let encodedValue = encodeURIComponent(value);
|
||||
if (array.indexOf(encodedValue) != -1) {
|
||||
return array.indexOf(encodedValue);
|
||||
}
|
||||
if (array.indexOf('"' + encodedValue + '"') != -1) {
|
||||
return array.indexOf('"' + encodedValue + '"');
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
getEntries(obj) {
|
||||
if (!Object.entries) {
|
||||
|
||||
|
||||
var ownProps = Object.keys(obj),
|
||||
i = ownProps.length,
|
||||
resArray = new Array(i); // preallocate the Array
|
||||
while (i--)
|
||||
resArray[i] = [ownProps[i], obj[ownProps[i]]];
|
||||
return resArray;
|
||||
}else{
|
||||
} else {
|
||||
return Object.entries(obj);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,23 +4,24 @@ import {properties} from "../../../../environments/environment";
|
|||
@Component({
|
||||
selector: 'manage',
|
||||
template: `
|
||||
<a *ngIf="communityId" [href]="properties.adminPortalURL + '/' + communityId"
|
||||
[class]=" ((buttonSizeSmall)?'uk-button-small':'')+' uk-button portal-button'"
|
||||
target="_blank">
|
||||
Manage
|
||||
</a>
|
||||
<a *ngIf="alias" [href]="properties.domain + properties.baseLink + '/dashboard/admin/' + alias"
|
||||
[class]=" ((buttonSizeSmall)?'uk-button-small':'')+' uk-button portal-button'"
|
||||
target="_blank">
|
||||
Manage
|
||||
</a>
|
||||
<a [href]="link" class="uk-button uk-button-text uk-text-uppercase" target="_blank">Manage</a>
|
||||
`
|
||||
})
|
||||
|
||||
export class ManageComponent {
|
||||
@Input() communityId:string;
|
||||
@Input() alias: string;
|
||||
@Input() buttonSizeSmall = true;
|
||||
properties: EnvProperties = properties;
|
||||
constructor() {}
|
||||
constructor() {
|
||||
}
|
||||
|
||||
get link(): string {
|
||||
if(this.communityId) {
|
||||
return this.properties.adminPortalURL + '/' + this.communityId;
|
||||
} else if(this.alias) {
|
||||
return this.properties.domain + properties.baseLink + '/dashboard/admin/' + this.alias;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue