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

Update search componenents with new theme

This commit is contained in:
Konstantinos Triantafyllou 2022-01-20 11:19:44 +02:00
parent 71800f06c9
commit 78ee2e4bcd
10 changed files with 482 additions and 535 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,36 +131,28 @@
</button> </button>
</div> </div>
</form> </form>
<div *ngIf="simpleView"> <div *ngIf="simpleView">
<form [class]="((isDisabled )?'uk-disabled ':'') + ' uk-margin-medium-bottom uk-margin-top' "> <form [class.uk-disabled]="isDisabled">
<div class="uk-grid uk-margin-small-left uk-flex" [class.uk-flex-center]="entityType != 'community' && entityType !== 'stakeholder'"> <div class="uk-grid uk-grid-small uk-flex uk-flex-center" uk-grid>
<div <div *ngIf="entitiesSelection">
[class]="((entitiesSelection)?'':'uk-width-small@s')+' uk-margin-small-top uk-padding-remove-left'">
<entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType" <entities-selection *ngIf="entitiesSelection" [simpleView]="true" [currentEntity]="entityType"
[properties]="properties" [properties]="properties"
(selectionChange)=" simpleEntityChanged($event)" (selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection> [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
</div> </div>
<div class="uk-padding-remove-left uk-margin-small-top"> <div>
<div *ngIf="selectedFields[0]" class="uk-inline"> <div *ngIf="selectedFields[0]" class="uk-inline">
<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip" <a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
(click)="selectedFields[0].value = ''" (click)="selectedFields[0].value = ''"
uk-icon="icon: close"></a> uk-icon="icon: close"></a>
<input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium" <input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
[placeholder]="formPlaceholderText" aria-describedby="sizing-addon2" [placeholder]="formPlaceholderText" role="searchbox"
[(ngModel)]="selectedFields[0].value" name="keyword"> [(ngModel)]="selectedFields[0].value" name="keyword"/>
</div> </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>
<div class="uk-padding-remove-left uk-margin-small-top"> <div>
<button (click)="simpleKeywordChanged(null)" type="submit" <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 Search
</button> </button>
<div class="uk-margin-small-top" *ngIf="showSwitchSearchLink"> <div class="uk-margin-small-top" *ngIf="showSwitchSearchLink">

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

@ -3,20 +3,20 @@
<ng-container *ngIf="customFilter && ((customFilterEnabled && <ng-container *ngIf="customFilter && ((customFilterEnabled &&
refineFields.indexOf(customFilter.queryFieldName) == refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)"> -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-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>
</span> </span>
</ng-container> </ng-container>
<ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0"> <ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0">
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; "> <ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
<ng-container *ngIf="type.selected"> <ng-container *ngIf="type.selected">
<span class="uk-width-small"> <span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disableForms || disableRefineForms"> <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-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> <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" flex="true"></icon> <icon name="close" ratio="0.5" flex="true"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -26,12 +26,12 @@
<ng-container *ngIf="selectedRangeFilters > 0"> <ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters "> <ng-container *ngFor="let filter of rangeFilters ">
<ng-container *ngIf="filter.selectedFromAndToValues"> <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)" <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-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> <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" flex="true"></icon> <icon name="close" ratio="0.5" flex="true"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -41,11 +41,11 @@
<ng-container *ngFor="let filter of filters "> <ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0"> <ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "> <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"> <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]="disableForms || disableRefineForms"> <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-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> <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" flex="true"></icon> <icon name="close" ratio="0.5" flex="true"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -55,69 +55,54 @@
</h1> </h1>
</ng-template> </ng-template>
<ng-template #filters_column> <ng-template #filters_column>
<div [class.filterLoading]="(disableForms || disableRefineForms)"> <div [class.filterLoading]="disabled">
<div class="uk-width-1-1 uk-margin-top" > <div class="uk-flex uk-flex-middle">
<div class="uk-grid uk-flex uk-flex-bottom"> <h4 class="uk-margin-right uk-margin-remove-bottom">Filters</h4>
<!-- *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum > 0) <a *ngIf="(selectedRangeFilters + selectedFilters + selectedTypesNum)>0"
|| (filters.length > 0 && (results.length > 0 || disableForms))"--> (click)="clearFilters()" class="uk-text-small"
<h6 class="uk-text-bold"> [class.uk-disabled]="disabled" [class.uk-link-muted]="disabled">
Filters
</h6>
<a *ngIf="(selectedRangeFilters+selectedFilters + selectedTypesNum)>1" (click)="clearFilters()"
[class]="((disableForms || disableRefineForms)?'uk-disabled uk-link-muted':'')+' portal-link ' + 'uk-width-1-2'">
Clear All Clear All
</a> </a>
</div> </div>
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected <div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
== true || customFilter.isHiddenFilter))" class="uk-margin-top" role="alert">
class="uk-margin-small-top uk-margin-medium-bottom"> <loading></loading>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
</div> </div>
</div> <div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
<div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0" class="uk-margin-top uk-text-meta">
class="'uk-animation-fade uk-margin-top uk-width-1-1" role="alert"> <span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
<span class="loading-gif uk-align-center" ></span> <span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
</div> </div>
<div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0" <ul *ngIf="!showUnknownFilters" class="uk-list filters">
class="uk-margin-top uk-text-meta"> <li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<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>
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disableForms || disableRefineForms" [isDisabled]="disabled"
[filter]="filters[0]" [showResultCount]=showResultCount [filter]="filters[0]" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter" (onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
[actionRoute]="true"></search-filter> [actionRoute]="true"></search-filter>
</li> </li>
</ng-container> <li *ngIf="resultTypes && (filters.length > 0)">
<li *ngIf="resultTypes && (filters.length > 0)"> <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)" [isDisabled]="disabled" [vertical]="true"
[isDisabled]="disableForms || disableRefineForms" [vertical]="true" [properties]="properties" [actionRoute]="true">
[properties]="properties" [actionRoute]="true"> </quick-selections>
</quick-selections> </li>
</li> <li *ngFor="let filter of rangeFilters">
<ng-container *ngFor="let filter of rangeFilters"> <range-filter [isDisabled]="disabled" [filter]="filter"
<li>
<range-filter [isDisabled]="disableForms || disableRefineForms" [filter]="filter"
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter> (onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
</li> </li>
</ng-container> <ng-container *ngFor="let filter of filters ">
<ng-container *ngFor="let filter of filters "> <li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'"> <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" [isDisabled]="disabled"
[isDisabled]="disableForms || disableRefineForms" [filter]="filter" [showResultCount]=showResultCount
[filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter> </li>
</li> </ng-container>
</ng-container> </ul>
</ul>
</div> </div>
</ng-template> </ng-template>
<!-- TODO - Kostis Clean up -->
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ? <div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
(stickyForm?'':' uk-position-relative ') : (stickyForm?'':' uk-position-relative ') :
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' + (+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
@ -130,21 +115,22 @@
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ? + (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '') ' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
+(simpleView?'':' advancedSearchFormBackground ')"> +(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<breadcrumbs *ngIf="showBreadcrumb && entityType!='community'" <div class="uk-container uk-container-large">
addClass=" uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" <div class="uk-padding-small">
[breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative"> <div class="uk-position-relative">
<div [class]="'uk-container '+(customFilter && customFilter.queryFieldName == <div class="uk-container uk-container-large uk-section" id="searchForm">
'communityId'?' uk-margin-large-bottom ':'uk-margin-top')+
(entityType === 'community' ||entityType === 'stakeholder'?' uk-position-relative':'')" id="searchForm">
<advanced-search-form <advanced-search-form
[entityType]="entityType" [entityType]="entityType"
[fieldIds]="fieldIds" [fieldIds]="fieldIds"
[fieldIdsMap]="fieldIdsMap" [fieldIdsMap]="fieldIdsMap"
[selectedFields]="selectedFields" [selectedFields]="selectedFields"
(queryChange)="queryChanged($event)" (queryChange)="queryChanged($event)"
[isDisabled]="disableForms || disableRefineForms" [isDisabled]="disabled"
[simpleSearchLink]="simpleSearchLink" [simpleSearchLink]="simpleSearchLink"
[advancedSearchLink]="advancedSearchLink" [advancedSearchLink]="advancedSearchLink"
[advancedSearchLinkParameters] [advancedSearchLinkParameters]
@ -154,9 +140,6 @@
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter" [showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
> >
</advanced-search-form> </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> </div>
</div> </div>
@ -164,23 +147,16 @@
</div> </div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription" ></schema2jsonld> [searchAction]=false [description]="metaDescription" ></schema2jsonld>
<div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm"> <div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm">
<div uk-grid> <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="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 class="uk-container uk-container-large">
<div> <div>
<breadcrumbs *ngIf="showBreadcrumb && entityType=='community'"
addClass=" " [breadcrumbs]="breadcrumbs"></breadcrumbs>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper> [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 [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"> <div *ngIf="showRefine && !dashboard" class="uk-hidden@m uk-margin-top">
<a href="#mobile-filters" uk-toggle>
<a href="#offcanvas-usage" uk-toggle>
<span class="uk-icon uk-margin-small-right uk-margin-small-left"> <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" <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="settings"> data-svg="settings">
@ -197,18 +173,13 @@
</span> </span>
<span>Filters <span <span>Filters <span
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}})</span></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> </a>
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
<div #offcanvas_element id="offcanvas-usage" uk-offcanvas overlay style="z-index:10000;"> <!-- TODO - Kostis check offcanvas-white -->
<div class="uk-offcanvas-bar 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"> <div class="uk-width-1-1">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container> <ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div> </div>
@ -222,7 +193,7 @@
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active" <a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;" [routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)" [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 search
</a> </a>
<!-- <quick-selections [resultTypes]="resultTypes" <!-- <quick-selections [resultTypes]="resultTypes"
@ -231,16 +202,8 @@
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null" [quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
[properties]="properties"> [properties]="properties">
</quick-selections>--> </quick-selections>-->
</div> </div>
<div class="uk-grid helper-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom"> <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 <div *ngIf="showRefine && !properties.isDashboard
&& (results.length > 0 && (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (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"> <div class="uk-width-expand@m uk-grid uk-grid-medium uk-margin-small-bottom">
<search-results-per-page [size]="searchUtils.size" <search-results-per-page [size]="searchUtils.size"
(sizeChange)="sizeChanged($event)" (sizeChange)="sizeChanged($event)"
[isDisabled]="disableForms || disableRefineForms"> [isDisabled]="disabled">
</search-results-per-page> </search-results-per-page>
<search-sorting *ngIf="sort" <search-sorting *ngIf="sort"
[entityType]="entityType" [sortBy]="searchUtils.sortBy" [entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)" (sortByChange)="sortByChanged($event)"
[isDisabled]="disableForms || disableRefineForms"> [isDisabled]="disabled">
</search-sorting> </search-sorting>
</div> </div>
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom"> <div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
<search-download <search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'" *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disableForms || disableRefineForms" [isDisabled]="disabled"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
[piwikSiteId]="piwikSiteId"> [piwikSiteId]="piwikSiteId">
</search-download> </search-download>
</div> </div>
</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" <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl" [(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues" [(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
[isDisabled]="disableForms || disableRefineForms"> [isDisabled]="disabled">
</search-paging> </search-paging>
</div> </div>
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin-large-bottom"> <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" <search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl" [(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues" [(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
[isDisabled]="disableForms || disableRefineForms"> [isDisabled]="disabled">
</search-paging> </search-paging>
</div> </div>
<div *ngIf=" showIndexInfo && searchUtils.status !== errorCodes.LOADING" <div *ngIf=" showIndexInfo && searchUtils.status !== errorCodes.LOADING"

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

@ -32,7 +32,7 @@ declare var UIkit: any;
templateUrl: 'newSearchPage.component.html' templateUrl: 'newSearchPage.component.html'
}) })
export class NewSearchPageComponent { export class NewSearchPageComponent {
@ViewChild('offcanvas_element') offcanvasElement: ElementRef; @ViewChild('mobileFilters') mobileFilters: ElementRef;
@Input() piwikSiteId = null; @Input() piwikSiteId = null;
@Input() hasPrefix: boolean = true; @Input() hasPrefix: boolean = true;
@Input() prefix: string = "OpenAIRE | "; @Input() prefix: string = "OpenAIRE | ";
@ -205,6 +205,10 @@ export class NewSearchPageComponent {
} }
}); });
} }
get disabled() {
return this.disableForms || this.disableRefineForms
}
updateMeta(title:string) { updateMeta(title:string) {
let filterArray = []; let filterArray = [];
@ -294,8 +298,8 @@ export class NewSearchPageComponent {
} }
goTo(page: number = 1, scroll:boolean = true) { goTo(page: number = 1, scroll:boolean = true) {
if(this.offcanvasElement && (typeof document !== 'undefined')) { if(this.mobileFilters && (typeof document !== 'undefined')) {
UIkit.offcanvas(this.offcanvasElement.nativeElement).hide(); UIkit.offcanvas(this.mobileFilters.nativeElement).hide();
} }
this.searchUtils.page = page; this.searchUtils.page = page;

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

@ -29,6 +29,7 @@ import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {ClickModule} from "../../utils/click/click.module"; import {ClickModule} from "../../utils/click/click.module";
import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/searchResultsForOrcid.module"; import {SearchResultsForOrcidModule} from "../../orcid/recommend-orcid-links/searchResultsForOrcid.module";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {LoadingModule} from "../../utils/loading/loading.module";
@NgModule({ @NgModule({
imports: [ imports: [
@ -38,7 +39,7 @@ import {IconsModule} from "../../utils/icons/icons.module";
SearchFilterModule, RangeFilterModule, SearchFilterModule, RangeFilterModule,
PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule, PiwikServiceModule, HelperModule, Schema2jsonldModule, SEOServiceModule, SearchResultsModule,
SearchResultsInDepositModule, SearchResultsForOrcidModule, SearchResultsInDepositModule, SearchResultsForOrcidModule,
AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule AdvancedSearchFormModule, QuickSelectionsModule, BreadcrumbsModule, AlertModalModule, ClickModule, IconsModule, LoadingModule
], ],
declarations: [ declarations: [
NewSearchPageComponent NewSearchPageComponent

127
searchPages/searchUtils/portal-search-result.component.html
View File

@ -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> <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
<li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto"> <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="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 class="badges"> <div role="alert">
<div *ngIf="type === 'community' && result.isSubscribed" <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> <span>Subscribed</span>
</div> </div>
<!-- <div *ngIf="type === 'community' && result.status == 'manager'" <div *ngIf="type === 'community' && result.status === 'manager'"
class="private-card-badge uk-text-center "> class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<span>Private</span> <icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
</div> --> <span class="space uk-text-small uk-text-capitalize">restricted</span>
</div> </div>
<div *ngIf="type === 'community' && result.status === 'manager'" <div *ngIf="type === 'community' && result.status === 'hidden'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon> <icon [name]="visibilityIcon.get('PRIVATE')"></icon>
<span class="space uk-text-small uk-text-capitalize">restricted</span> <span class="space uk-text-small uk-text-capitalize">private</span>
</div> </div>
<div *ngIf="type === 'community' && result.status === 'hidden'" <div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')"></icon> <icon [name]="visibilityIcon.get(result.visibility)"></icon>
<span class="space uk-text-small uk-text-capitalize">private</span> <span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
</div> </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> </div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid> <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)" <a *ngIf="directLink && hasPermission(result)" [href]="(type === 'community')?getCommunityPageUrl(result):getStakeholderPageUrl(result)"
target="_blank" target="_blank" class="uk-width-1-5@s">
class="uk-width-1-5@s">
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container> <ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</a> </a>
<a *ngIf="!directLink && hasPermission(result)" <a *ngIf="!directLink && hasPermission(result)"
@ -42,58 +37,50 @@
<ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container> <ng-container *ngTemplateOutlet="resultPreview; context: {result: result}"></ng-container>
</div> </div>
<div class="uk-width-expand"> <div class="uk-width-expand">
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-text-large uk-grid" uk-grid> <div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" target="_blank" <a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
[class]="(result.isManager)?'uk-width-3-4@s portal-link':'portal-link'">
{{(result.title) ? result.title : result.shortTitle}} {{(result.title) ? result.title : result.shortTitle}}
</a> </a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" [class]="(result.isManager)?'uk-width-3-4@s':''" <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
class="portal-link">
{{(result.title) ? result.title : result.shortTitle}} {{(result.title) ? result.title : result.shortTitle}}
</a> </a>
<div *ngIf="!hasPermission(result)" [class.uk-width-3-4@s]="result.isManager"> <h5 *ngIf="!hasPermission(result)">
{{(result.title) ? result.title : result.shortTitle}} {{(result.title) ? result.title : result.shortTitle}}
</div> </h5>
</div> </div>
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-text-large uk-grid"> <div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" target="_blank" <a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
[class.uk-width-3-4@s]="result.isManager" class="portal-link">
{{(result.name) ? result.name : result.index_shortName}} {{(result.name) ? result.name : result.index_shortName}}
</a> </a>
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" [class.uk-width-3-4@s]="result.isManager" <a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
class="portal-link">
{{(result.name) ? result.name : result.index_shortName}} {{(result.name) ? result.name : result.index_shortName}}
</a> </a>
<div *ngIf="!hasPermission(result)" [class.uk-width-3-4@s]="result.isManager"> <h5 *ngIf="!hasPermission(result)">
{{(result.name) ? result.name : result.index_shortName}} {{(result.name) ? result.name : result.index_shortName}}
</div> </h5>
</div> </div>
<div class="uk-margin-small-top uk-text-small"> <div *ngIf="result.description" class="uk-margin-bottom multi-line-ellipsis lines-2">
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date:</span> <p class="uk-text-justify">
<span class="space" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span> {{result.description}}
<span class="space" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span> </p>
<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> </div>
<div *ngIf="result.description"> <div class="uk-text-small uk-flex uk-flex-middle">
<div class="text-justify descriptionText uk-text-small uk-text-muted uk-margin-auto-right"> <span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span>
<!-- [title]="result.description">--> <span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
{{_formatDescription(result.description)}} <span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
</div> <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>
</div> </div>
<manage *ngIf="type === 'community' && result.isManager" [communityId]="result.communityId" </div>
class="uk-margin-large-right"></manage> <div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
<manage *ngIf="type === 'stakeholder' && result.isManager" [alias]="result.alias" <manage [communityId]="result.communityId" [alias]="result.alias"></manage>
class="uk-margin-large-right"></manage>
</div> </div>
</div> </div>
</li> </li>
@ -105,20 +92,6 @@
</modal-alert> </modal-alert>
<ng-template #resultPreview let-result="result"> <ng-template #resultPreview let-result="result">
<div class="uk-flex uk-flex-center"> <div class="uk-flex uk-flex-center">
<img *ngIf="result.logoUrl" <img *ngIf="result.logoUrl" [src]="result | logoUrl" [alt]="((result.title)?result.title:result.shortTitle) + ' logo'" loading="lazy">
[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>
</div> </div>
</ng-template> </ng-template>

26
searchPages/searchUtils/portal-search-result.component.ts
View File

@ -6,7 +6,6 @@ import {CommunityInfo} from "../../connect/community/communityInfo";
import {Router} from "@angular/router"; import {Router} from "@angular/router";
import {LocalStorageService} from "../../services/localStorage.service"; import {LocalStorageService} from "../../services/localStorage.service";
import {Stakeholder, StakeholderInfo, Visibility} from "../../monitor/entities/stakeholder"; import {Stakeholder, StakeholderInfo, Visibility} from "../../monitor/entities/stakeholder";
import {StringUtils} from "../../utils/string-utils.class";
@Component({ @Component({
selector: 'portal-search-result', selector: 'portal-search-result',
@ -21,13 +20,11 @@ export class PortalSearchResultComponent implements OnInit{
@Input() showLoading: boolean = false; @Input() showLoading: boolean = false;
@Input() custom_class: string = "search-results"; @Input() custom_class: string = "search-results";
@Input() properties: EnvProperties; @Input() properties: EnvProperties;
@Input() maxCharacters: number = 150;
@ViewChild('AlertModal') modal; @ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([ visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'], ["PRIVATE", 'lock'],
["RESTRICTED", 'group'] ["RESTRICTED", 'group']
]); ]);
public urlParam: string; public urlParam: string;
public errorCodes: ErrorCodes = new ErrorCodes(); public errorCodes: ErrorCodes = new ErrorCodes();
public routerHelper: RouterHelper = new RouterHelper(); 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) { hasPermission(result: CommunityInfo & StakeholderInfo) {
if(this.type === "community") { if(this.type === "community") {
return result.status === "all" || (result.status === "manager" && result.isManager); return result.status === "all" || (result.status === "manager" && result.isManager);
@ -67,11 +76,6 @@ export class PortalSearchResultComponent implements OnInit{
return this.properties.environment != "development"; 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) { public confirmModalOpen(result: CommunityInfo & Stakeholder) {
this.selected = result; this.selected = result;
this.modal.cancelButton = true; this.modal.cancelButton = true;
@ -90,15 +94,13 @@ export class PortalSearchResultComponent implements OnInit{
} }
public getCommunityPageUrl(communityInfo: CommunityInfo): string { public getCommunityPageUrl(communityInfo: CommunityInfo): string {
let url = '';
if (this.isProduction()) { if (this.isProduction()) {
url = 'https://' + this.getEnvironmentPrefix() + communityInfo.communityId + '.openaire.eu'; return 'https://' + this.getEnvironmentPrefix() + communityInfo.communityId + '.openaire.eu';
} else { } else {
url = this.router.createUrlTree(['/'], { return this.router.createUrlTree(['/'], {
queryParams: {'communityId': communityInfo.communityId} queryParams: {'communityId': communityInfo.communityId}
}).toString(); }).toString();
} }
return url;
} }
public getStakeholderPageUrl(stakeholder: Stakeholder) { public getStakeholderPageUrl(stakeholder: Stakeholder) {

9
searchPages/searchUtils/quick-selections.component.ts
View File

@ -29,12 +29,9 @@ import {ActivatedRoute, Router} from "@angular/router";
</span> </span>
</div> </div>
</div> </div>
<div *ngIf="vertical && (resultTypes || quickFilter)" <div *ngIf="vertical && (resultTypes || quickFilter)" [class.uk-disabled]="isDisabled">
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-margin-small-bottom uk-list uk-list-divider'"> <search-filter [isDisabled]="isDisabled" [filter]="resultTypes" [showResultCount]='false'
<search-filter (onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
[isDisabled]="isDisabled"
[filter]="resultTypes" [showResultCount]='false'
(onFilterChange)="changed()" [actionRoute]="actionRoute"></search-filter>
</div> </div>
` `

168
searchPages/searchUtils/searchFilter.component.html
View File

@ -1,99 +1,93 @@
<div *ngIf= "filter.values.length >0" class="uk-margin-small-bottom"> <div *ngIf="filter.values.length >0">
<div class="uk-margin-small-top uk-margin-bottom uk-grid uk-flex uk-flex-bottom"> <div class="uk-flex uk-flex-middle uk-margin-bottom">
<h6 class="uk-margin-bottom-remove" title = "{{filter.title}}">{{_formatTitle(filter.title,filter.values.length)}}</h6> <h6 [title]="filter.title"
<a *ngIf="filter.countSelectedValues>0" (click)="clearFilter()" class="uk-margin-right uk-margin-remove-bottom">{{_formatTitle(filter.title, filter.values.length)}}</h6>
[class]="((isDisabled)?'uk-disabled':'') + ' portal-link '"> <a *ngIf="filter.countSelectedValues>0" class="uk-text-small" (click)="clearFilter()" [class.uk-disabled]="isDisabled">Clear</a>
Clear
</a>
</div> </div>
<div aria-expanded="false"> <div aria-expanded="false">
<div> <div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)"
<ng-container> class="uk-animation-fade uk-text-small uk-margin-small-bottom">
<div *ngFor="let value of getSelectedAndTopValues(filter, filterValuesNum)" <div [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 title = "{{value.name}}"> </div>
<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> </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>
<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>
</div> </div>
<ng-template #input_label let-filter="filter" let-value="value"> <ng-template #input_label let-filter="filter" let-value="value">
<label *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'" <span *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'" class="uk-flex uk-flex-middle"
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled' : ''"> [class.uk-disabled]="isDisabled || (showResultCount && value.number === 0)">
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox" <span>
[disabled]="isDisabled || (showResultCount && value.number === 0)" <input *ngIf="filter.filterType == 'checkbox'" type="checkbox" class="uk-checkbox"
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" /> [disabled]="isDisabled || (showResultCount && value.number === 0)"
<input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio" [(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)"/>
[disabled]="isDisabled || (showResultCount && value.number === 0)" <input *ngIf="filter.filterType == 'radio'" type="radio" class="uk-radio"
[name]="filter.filterId" [value]="value.id" [(ngModel)]="filter.radioValue" [disabled]="isDisabled || (showResultCount && value.number === 0)"
(ngModelChange)="uniqueFilterChange(value)"/> [name]="filter.filterId" [value]="value.id" [(ngModel)]="filter.radioValue"
{{' '+_formatName(value)}} (ngModelChange)="uniqueFilterChange(value)"/>
<span *ngIf = "showResultCount === true" >
{{' ('+(value.number|number)+')'}}
</span> </span>
</label> <span class="uk-margin-small-left">
{{_formatName(value)}}
<span *ngIf="showResultCount">({{value.number|number}})</span>
</span>
</span>
</ng-template> </ng-template>
<ng-template #input_label_wrapper let-filter="filter" let-value="value"> <ng-template #input_label_wrapper let-filter="filter" let-value="value">
<a *ngIf="actionRoute" class="filterLabel" [routerLink]="getRoute()" <a *ngIf="actionRoute" [routerLink]="getRoute()"
[queryParams]="getParams(filter,value)" [queryParams]="getParams(filter,value)" class="uk-link-muted"
[class]="(isDisabled || (showResultCount && value.number === 0)) ? 'uk-disabled 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> <ng-container *ngTemplateOutlet="input_label; context: {filter: filter, value: value}"></ng-container>
</a> </a>
<ng-container *ngIf="!actionRoute"> <ng-container *ngIf="!actionRoute">

442
searchPages/searchUtils/searchFilter.component.ts
View File

@ -7,292 +7,308 @@ import {
OnChanges, OnChanges,
SimpleChanges SimpleChanges
} from '@angular/core'; } from '@angular/core';
import { Filter, Value} from './searchHelperClasses.class'; import {Filter, Value} from './searchHelperClasses.class';
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
import {SearchFields} from "../../utils/properties/searchFields"; import {SearchFields} from "../../utils/properties/searchFields";
@Component({ @Component({
selector: 'search-filter', selector: 'search-filter',
templateUrl: 'searchFilter.component.html' templateUrl: 'searchFilter.component.html'
}) })
export class SearchFilterComponent implements OnInit, OnChanges{ export class SearchFilterComponent implements OnInit, OnChanges {
@Input() filter:Filter; @Input() filter: Filter;
@Input() showResultCount:boolean = true; @Input() showResultCount: boolean = true;
@Input() isDisabled:boolean = false; @Input() isDisabled: boolean = false;
@Input() addShowMore:boolean = true; @Input() addShowMore: boolean = true;
@Input() showMoreInline: boolean = true; @Input() showMoreInline: boolean = true;
@Input() filterValuesNum: number = 6; @Input() filterValuesNum: number = 6;
public showAll:boolean = false; public showAll: boolean = false;
public _maxCharacters:number =28; public _maxCharacters: number = 28;
@Output() toggleModal = new EventEmitter(); @Output() toggleModal = new EventEmitter();
@Output() modalChange = new EventEmitter(); @Output() modalChange = new EventEmitter();
@Output() onFilterChange = new EventEmitter(); @Output() onFilterChange = new EventEmitter();
keyword = ""; keyword = "";
sortBy = "name"; sortBy = "name";
queryParams = {}; queryParams = {};
paramPosition = 0; paramPosition = 0;
@Input() actionRoute:boolean = false; @Input() actionRoute: boolean = false;
@Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string }; @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
sub; sub;
public isOpen:boolean=false; public isOpen: boolean = false;
constructor (private _router: Router, private route: ActivatedRoute) { constructor(private _router: Router, private route: ActivatedRoute) {
} }
ngOnDestroy() { ngOnDestroy() {
if(this.sub){ if (this.sub) {
this.sub.unsubscribe(); this.sub.unsubscribe();
} }
} }
ngOnInit() {
this.sub = this.route.queryParams.subscribe(params => { ngOnInit() {
this.queryParams = Object.assign({}, params); this.sub = this.route.queryParams.subscribe(params => {
this.paramPosition = SearchFields.getParameterOrder(this.filter.filterId, this.getEntries(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')); 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.radioValue = "";
this.filter.values.forEach(value => { this.filter.values.forEach(value => {
if(value.selected){ if (value.selected) {
this.filter.radioValue = value.id 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){ public _formatTitle(title, length) {
return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title)+" ("+(length>95?"100":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){ if (value.name.length + value.number.toLocaleString().length + 1 + 3 > maxLineLength) {
//let maxLineLength = 24; return value.name.substr(0, (maxLineLength - 3 - 4 - value.number.toLocaleString().length)) + '...';
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;
} }
filterKeywords(value){ return value.name;
if(this.keyword.length > 0){ }
if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
return false; filterKeywords(value) {
} if (this.keyword.length > 0) {
if (value.toLowerCase().indexOf(this.keyword.toLowerCase()) == -1) {
return false;
} }
return true;
} }
filterChange(selected:boolean){ return true;
if(selected){ }
this.filter.countSelectedValues++;
}else{ filterChange(selected: boolean) {
this.filter.countSelectedValues--; if (selected) {
} this.filter.countSelectedValues++;
this.onFilterChange.emit({ } else {
value: this.filter this.filter.countSelectedValues--;
});
} }
uniqueFilterChange(value: Value) { this.onFilterChange.emit({
let tmp = value.selected; value: this.filter
value.selected = !tmp; });
}
if(value.selected){
this.filter.countSelectedValues = 1; uniqueFilterChange(value: Value) {
}else{ let tmp = value.selected;
this.filter.countSelectedValues = 0; value.selected = !tmp;
}
if (value.selected) {
this.filter.values.forEach(value => { this.filter.countSelectedValues = 1;
value.selected = (value.id == this.filter.radioValue); } else {
});
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.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 = []; var values = [];
for (let i=0; i < topNum; i++){ for (let i = 0; i < topNum; i++) {
if(filter.values.length <= i) { if (filter.values.length <= i) {
break; break;
} }
values.push(filter.values[i]); values.push(filter.values[i]);
} }
if(filter.countSelectedValues >0){ if (filter.countSelectedValues > 0) {
for (let i=topNum; i < filter.values.length; i++){ for (let i = topNum; i < filter.values.length; i++) {
if(filter.values[i].selected){ if (filter.values[i].selected) {
values.push(filter.values[i]); values.push(filter.values[i]);
} }
} }
} }
return values; return values;
} }
getSelectedValues(filter, sortBy:string = "num"):any{ getSelectedValues(filter, sortBy: string = "num"): any {
var selected = []; var selected = [];
if(filter.countSelectedValues >0){ if (filter.countSelectedValues > 0) {
for (var i=0; i < filter.values.length; i++){ for (var i = 0; i < filter.values.length; i++) {
if(filter.values[i].selected){ if (filter.values[i].selected) {
selected.push(filter.values[i]); 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{ if (sortBy == "name") {
var notSselected = [];
for (var i=0; i < filter.values.length; i++){ selected.sort((n1, n2) => {
if(!filter.values[i].selected){ if (n1.name > n2.name) {
notSselected.push(filter.values[i]); return 1;
} }
}
if (n1.name < n2.name) {
if(sortBy == "name"){ return -1;
}
notSselected.sort((n1,n2)=> {
if (n1.name > n2.name) { return 0;
return 1; });
}
if (n1.name < n2.name) {
return -1;
}
return 0;
});
}
return notSselected;
} }
return selected;
sort(values: Value[]) {
let sorted: Value[] = values.slice(); }
if(this.sortBy == "name"){
getNotSelectedValues(filter, sortBy: string = "num"): any {
sorted.sort((n1,n2)=> { var notSselected = [];
if (n1.name.toLowerCase() > n2.name.toLowerCase()) { for (var i = 0; i < filter.values.length; i++) {
return 1; if (!filter.values[i].selected) {
} notSselected.push(filter.values[i]);
if (n1.name < n2.name) {
return -1;
}
return 0;
});
} }
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() { toggle() {
this.isOpen = !this.isOpen; this.isOpen = !this.isOpen;
} }
getFilterName(value){ disabled(value) {
let name = value.name +" ("+ value.number.format()+")"; return this.isDisabled || (this.showResultCount && value === 0);
}
getFilterName(value) {
let name = value.name + " (" + value.number.format() + ")";
console.log(name); console.log(name);
return 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); getParams(filter: Filter, value: Value) {
/* let qf=false; let params = Object.assign({}, this.queryParams);
if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){ /* let qf=false;
params['qf']="false"; if(this.quickFilter && this.quickFilter.filterId == filter.filterId && this.quickFilter.selected && value.id == this.quickFilter.value){
qf=true; 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 if (params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','), value.id) == -1 /*&& !qf*/) {
params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"'; //has other values of this filter --> add this value
}else if(params[filter.filterId] && this.checkIfValueIndexOf(params[filter.filterId].split(','),value.id)!=-1) { params[filter.filterId] = params[filter.filterId] + ',' + '"' + encodeURIComponent(value.id) + '"';
// has this filter and the value -- > remove it } 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); let values = params[filter.filterId].split(',');
params[filter.filterId] =values.join(','); values.splice(this.checkIfValueIndexOf(values, value.id), 1);
if(values.length == 0){ params[filter.filterId] = values.join(',');
delete params[filter.filterId]; 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) + '"' ;
} }
delete params['page']; } else /*if(!qf)*/{
return params; //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); checkIfValueIndexOf(array, value) {
if(array.indexOf(encodedValue)!=-1){ let encodedValue = encodeURIComponent(value);
return array.indexOf(encodedValue); if (array.indexOf(encodedValue) != -1) {
} return array.indexOf(encodedValue);
if(array.indexOf('"'+encodedValue+'"')!=-1){ }
return array.indexOf('"'+encodedValue+'"'); if (array.indexOf('"' + encodedValue + '"') != -1) {
} return array.indexOf('"' + encodedValue + '"');
return -1; }
return -1;
} }
getEntries(obj) { getEntries(obj) {
if (!Object.entries) { if (!Object.entries) {
var ownProps = Object.keys(obj), var ownProps = Object.keys(obj),
i = ownProps.length, i = ownProps.length,
resArray = new Array(i); // preallocate the Array resArray = new Array(i); // preallocate the Array
while (i--) while (i--)
resArray[i] = [ownProps[i], obj[ownProps[i]]]; resArray[i] = [ownProps[i], obj[ownProps[i]]];
return resArray; return resArray;
}else{ } else {
return Object.entries(obj); return Object.entries(obj);
} }
} }

25
utils/manage/manage.component.ts
View File

@ -4,23 +4,24 @@ import {properties} from "../../../../environments/environment";
@Component({ @Component({
selector: 'manage', selector: 'manage',
template: ` template: `
<a *ngIf="communityId" [href]="properties.adminPortalURL + '/' + communityId" <a [href]="link" class="uk-button uk-button-text uk-text-uppercase" target="_blank">Manage</a>
[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>
` `
}) })
export class ManageComponent { export class ManageComponent {
@Input() communityId:string; @Input() communityId:string;
@Input() alias: string; @Input() alias: string;
@Input() buttonSizeSmall = true;
properties: EnvProperties = properties; 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;
}
}
} }