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

Change search page base on new mocks for portal results

This commit is contained in:
Konstantinos Triantafyllou 2022-02-14 18:02:00 +02:00
parent e5a644f2ae
commit db58e5c3e8
8 changed files with 50 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -140,11 +140,8 @@
(selectionChange)=" simpleEntityChanged($event)" (selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection> [onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
</div> </div>
<div *ngIf="selectedFields[0]" class="uk-inline"> <div *ngIf="selectedFields[0]" class="uk-inline uk-link">
<!--<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip" <a class="uk-form-icon uk-form-icon-flip uk-link-reset"
(click)="selectedFields[0].value = ''"
uk-icon="icon: close"></a>-->
<a class="uk-form-icon uk-form-icon-flip"
(click)="simpleKeywordChanged(null)" type="submit"> (click)="simpleKeywordChanged(null)" type="submit">
<icon name="search" flex="true"></icon> <icon name="search" flex="true"></icon>
</a> </a>

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

@ -4,7 +4,7 @@
refineFields.indexOf(customFilter.queryFieldName) == refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)"> -1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto"> <span class="uk-width-auto">
<span class="uk-label uk-flex uk-flex-middle"> <span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span> <span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span> </span>
</span> </span>
@ -14,9 +14,9 @@
<ng-container *ngIf="type.selected"> <ng-container *ngIf="type.selected">
<span class="uk-width-auto"> <span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled"> <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle"> <span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span> <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -29,9 +29,9 @@
<span class="uk-width-auto"> <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]="disabled"> [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle"> <span class="filter-taguk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span> <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" ratio="0.5" flex="true"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -43,9 +43,9 @@
<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-auto"> <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"> <a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle"> <span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span> <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon> <icon name="close" flex="true" ratio="0.7"></icon>
</span> </span>
</a> </a>
</span> </span>
@ -73,7 +73,7 @@
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span> <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> <span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
</div> </div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-large"> <ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'"> <li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline" <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled" [isDisabled]="disabled"
@ -110,19 +110,18 @@
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+ [attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ? (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)"> ' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div style="box-sizing: border-box; " <div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
[class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (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--> <!-- TODO - Kostis until here-->
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div class="uk-padding-small"> <div class="uk-padding-small uk-padding-remove-bottom">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</div> </div>
<div class="uk-position-relative uk-margin-medium-bottom"> <div class="uk-position-relative">
<div class="uk-container uk-container-large uk-section" id="searchForm"> <div class="uk-container uk-container-large uk-section" id="searchForm">
<advanced-search-form <advanced-search-form
[entityType]="entityType" [entityType]="entityType"
@ -147,7 +146,7 @@
</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="uk-margin-medium-top" [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 ">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">

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

@ -58,7 +58,7 @@ export class NewSearchPageComponent {
@Input() customFilter: SearchCustomFilter; @Input() customFilter: SearchCustomFilter;
@Input() sort: boolean = true; @Input() sort: boolean = true;
@Input() sortedByChanged: string = ""; @Input() sortedByChanged: string = "";
@Input() searchFormClass: string = "searchForm"; @Input() searchFormClass: string = "uk-background-muted";
//From simple: //From simple:
@Input() rangeFilters: RangeFilter[] = []; @Input() rangeFilters: RangeFilter[] = [];
@Input() rangeFields: string[][] = []; @Input() rangeFields: string[][] = [];

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

@ -8,19 +8,19 @@
<span>Subscribed</span> <span>Subscribed</span>
</div> </div>
<div *ngIf="type === 'community' && result.status === 'manager'" <div *ngIf="type === 'community' && result.status === 'manager'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon> <icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" class="uk-display-block"></icon>
<span class="space uk-text-small uk-text-capitalize">restricted</span> <span class="uk-text-small uk-text-capitalize">restricted</span>
</div> </div>
<div *ngIf="type === 'community' && result.status === 'hidden'" <div *ngIf="type === 'community' && result.status === 'hidden'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
<icon [name]="visibilityIcon.get('PRIVATE')"></icon> <icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" class="uk-display-block"></icon>
<span class="space uk-text-small uk-text-capitalize">private</span> <span class="uk-text-small uk-text-capitalize">private</span>
</div> </div>
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'" <div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
<icon [name]="visibilityIcon.get(result.visibility)"></icon> <icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" class="uk-display-block"></icon>
<span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span> <span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
</div> </div>
</div> </div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid> <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
@ -64,18 +64,22 @@
{{result.description}} {{result.description}}
</p> </p>
</div> </div>
<div class="uk-text-small uk-flex uk-flex-middle"> <div class="uk-text-small">
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span> <div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span> <span class="uk-text-muted">Creation Date: </span>
<span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span> <span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span *ngIf="type === 'community' && showType && result.type" class="uk-margin-left"> <span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
<span class="uk-text-muted">Type:</span> </div>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span> <div class="uk-flex uk-flex-middle">
</span> <span *ngIf="type === 'community' && showType && result.type">
<span *ngIf="type === 'stakeholder' && result.type" class="uk-margin-left"> <span class="uk-text-muted">Type:</span>
<span class="uk-text-muted">Type:</span> <span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span> </span>
</span> <span *ngIf="type === 'stakeholder' && result.type">
<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> </div>
</div> </div>

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

@ -22,7 +22,7 @@ export class PortalSearchResultComponent implements OnInit{
@Input() properties: EnvProperties; @Input() properties: EnvProperties;
@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", 'visibility_off'],
["RESTRICTED", 'group'] ["RESTRICTED", 'group']
]); ]);
public urlParam: string; public urlParam: string;

16
searchPages/searchUtils/portal-search-result.module.ts
View File

@ -1,18 +1,16 @@
import { NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import { CommonModule } from '@angular/common'; import {CommonModule} from '@angular/common';
import { FormsModule } from '@angular/forms'; import {FormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import {ErrorMessagesModule} from '../../utils/errorMessages.module'; import {ErrorMessagesModule} from '../../utils/errorMessages.module';
import {PortalSearchResultComponent} from "./portal-search-result.component"; import {PortalSearchResultComponent} from "./portal-search-result.component";
import {AlertModalModule} from "../../utils/modal/alertModal.module"; import {AlertModalModule} from "../../utils/modal/alertModal.module";
import {ManageModule} from "../../utils/manage/manage.module"; import {ManageModule} from "../../utils/manage/manage.module";
import {IconsModule} from "../../utils/icons/icons.module"; import {IconsModule} from "../../utils/icons/icons.module";
import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module"; import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
import {IconsService} from "../../utils/icons/icons.service"; import {IconsService} from "../../utils/icons/icons.service";
import {group, lock} from "../../utils/icons/icons"; import {lock} from "../../utils/icons/icons";
import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module"; import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
// import {IconsService} from "../../utils/icons/icons.service";
// import {group, lock} from "../../utils/icons/icons";
@NgModule({ @NgModule({
imports: [ imports: [
@ -31,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
}) })
export class PortalSearchResultModule { export class PortalSearchResultModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([group, lock]) this.iconsService.registerIcons([lock])
} }
} }

2
utils/breadcrumbs/breadcrumbs.component.ts
View File

@ -8,7 +8,7 @@ export interface Breadcrumb {
@Component({ @Component({
selector: 'breadcrumbs', selector: 'breadcrumbs',
template: ` template: `
<ul class="uk-breadcrumb" [ngClass]="addClass" [class.uk-light]="light"> <ul class="uk-breadcrumb uk-margin-remove-bottom" [ngClass]="addClass" [class.uk-light]="light">
<li *ngFor="let breadcrumb of breadcrumbs"> <li *ngFor="let breadcrumb of breadcrumbs">
<a class="uk-text-capitalize" *ngIf="breadcrumb.route" [routerLink]="breadcrumb.route">{{breadcrumb.name}}</a> <a class="uk-text-capitalize" *ngIf="breadcrumb.route" [routerLink]="breadcrumb.route">{{breadcrumb.name}}</a>
<span class="uk-text-capitalize" *ngIf="!breadcrumb.route">{{breadcrumb.name}}</span> <span class="uk-text-capitalize" *ngIf="!breadcrumb.route">{{breadcrumb.name}}</span>

2
utils/icons/icons.component.ts
View File

@ -22,7 +22,7 @@ import {IconsService} from "./icons.service";
selector: 'icon', selector: 'icon',
template: ` template: `
<span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span> <span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span [class.uk-flex]="flex" [ngClass]="customClass"> <span [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
<span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span> <span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
</span> </span>
<span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span> <span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>