finish organization landing page

landingPages/landing-utils/projects-in-modal.component.ts

@@ -15,17 +15,21 @@ import {OpenaireEntities} from '../../utils/properties/searchFields';
   selector: 'projectsInModal',
   template: `
 		<div *ngIf="fetchProjects.funders.length > 1" class="uk-margin-medium-bottom">
-      <div class="uk-margin-small-bottom uk-text-meta">Filter by Funder:</div>
+			<ng-container *ngFor="let filter of fetchProjects.filters">
-      <ul class="uk-list uk-list-divider uk-margin-remove">
+				<div class="uk-inline">
-        <li *ngFor="let filter of fetchProjects.filters ">
+					<button class="uk-button uk-button-default uk-button-small uk-margin-small-bottom" type="button">
-            <label *ngFor="let value of filter.values" class="uk-animation-fade uk-margin-small-right">
+						{{filter.title}} <span uk-icon="chevron-down"></span>
-               <input [(ngModel)]="value.selected" type="checkbox"
+					</button>
-                      (ngModelChange)="filterChange(value.selected)"
+					<div uk-dropdown="mode: click" class="uk-width-large uk-overflow-auto" style="max-width:460px !important; ">
-											class="uk-checkbox"/>
+						<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
-               <span class="uk-text-bold"> {{value.name}}</span>
+							<search-filter [filter]="filter"
-            </label>
+								[showResultCount]=true filterValuesNum="0"
-        </li>
+								(onFilterChange)="filterChange($event)" [actionRoute]="false">
-      </ul>
+							</search-filter>
+						</div>
+					</div>
+				</div>
+			</ng-container>
 		</div>
     <errorMessages [status]="[fetchProjects.searchUtils.status]" [type]="'projects'"
                    tab_error_class=true></errorMessages>

landingPages/landing-utils/projects-in-modal.module.ts

@@ -13,12 +13,14 @@ import {PagingModule} from '../../utils/paging.module';
 import {ErrorMessagesModule} from '../../utils/errorMessages.module';
 import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module";
 import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
+import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.module';
 
 @NgModule({
   imports: [
     RouterModule, CommonModule, FormsModule,
     ProjectsServiceModule, TabResultModule,
-    PagingModule, ErrorMessagesModule, NoLoadPaging, SearchResultsModule
+    PagingModule, ErrorMessagesModule, NoLoadPaging,
+		SearchResultsModule, SearchFilterModule
   ],
   declarations: [
     ProjectsInModalComponent

landingPages/landing-utils/showIdentifiers.component.ts

@@ -23,7 +23,7 @@ import {properties} from "../../../../environments/environment";
                [class.uk-margin-bottom]="modal">
             <p class="uk-margin-remove">
               <span #content [id]="key" [class.uk-flex]="modal">
-                <span class="uk-text-meta uk-text-uppercase">{{key}}: </span>
+                <span class="uk-text-meta uk-text-small uk-text-uppercase">{{key}}: </span>
                 <span [class.uk-margin-small-left]="modal">
                   <ng-container *ngFor="let item of identifiers.get(key) let j=index">
                     <a *ngIf="key == 'doi' || key == 'pmc' || key == 'pmid' || key == 'handle'"

landingPages/organization/organization.component.html

@@ -25,7 +25,7 @@
 								<li class="uk-text-center"
                   [title]="'Download reports'"
                   [attr.uk-tooltip]="'pos: right; cls: uk-active landing-action-tooltip landing-action-tooltip-portal uk-text-small uk-padding-small'">
-                  <a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="openDownloadReportsModal()">
+                  <a class="uk-link-text uk-text-bold uk-text-uppercase" (click)="buildFunderOptions(); openDownloadReportsModal()">
                     <span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
                       <icon name="download" visuallyHidden="download"></icon>
                     </span>
@@ -273,7 +273,7 @@
 					<div class="subtitle uk-flex uk-flex-middle">
 						<span class="uk-text-nowrap">Funder report</span>
 						<div input type="select" placeholder="Select a funder to download report" inputClass="flat x-small" class="uk-width-1-1 uk-margin-small-left"
-							[options]="fetchProjects.funders" [(value)]="funder">
+							[options]="funderOptions" [(value)]="funder">
 						</div>
 					</div>
 					<div class="uk-animation-slide-top-small uk-margin-top" *ngIf="funder && funder != ''">

landingPages/organization/organization.component.ts

@@ -25,6 +25,7 @@ import {IndexInfoService} from "../../utils/indexInfo.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
 import {OpenaireEntities} from '../../utils/properties/searchFields';
+import {Option} from '../../sharedComponents/input/input.component';
 
 @Component({
   selector: 'organization',
@@ -95,6 +96,8 @@ export class OrganizationComponent {
   private funderId: string;
   private funderCount: number;
 
+	public funderOptions: Option[] = [];
+
 	public offset: number;
 	public stickyHeader: boolean = false;
 	public graph_offset: number = 0;
@@ -761,6 +764,16 @@ export class OrganizationComponent {
     }
   }
 
+	public buildFunderOptions() {
+		this.funderOptions = [];
+		if(this.fetchProjects.funders && this.fetchProjects.funders.length > 0) {
+			for(let funder of this.fetchProjects.funders) {
+				this.funderOptions.push({"label": funder.name, "value": funder});
+			}
+			this.funder = this.funderOptions[0];
+		}
+	}
+
   public scroll() {
     HelperFunctions.scroll();
   }

searchPages/searchUtils/searchFilter.component.ts

@@ -76,6 +76,7 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   
   ngOnChanges(changes: SimpleChanges) {
     if (changes.filter) {
+			console.log(this.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 = "";

utils/result-preview/result-preview.component.html

@@ -12,17 +12,18 @@
 						Enermaps tool
 					</a></p>
 				</div>
-
 			</div>
 			<div class="uk-width-expand">
-  <div>
+				<!-- 1st section (small title, mail title and deposit link) -->
-    <!-- deposit searchPage URL -->
+				<div class="section1 uk-margin-bottom">
+					<!-- Deposit searchPage URL -->
 					<span class="uk-width-expand uk-flex-right">
 						<a *ngIf="result.websiteURL && promoteWebsiteURL" href="{{result.websiteURL}}" target="_blank" type="submit"
 							class="  uk-float-right uk-button uk-button-primary uk-padding uk-padding-remove-vertical uk-margin-small-left">
 							<span><span>Visit repository to deposit</span><span uk-icon="arrow-right"></span></span>
 						</a>
 					</span>
+					<!-- Small subtitle above title -->
 					<div class="uk-text-small uk-margin-small-bottom">
 						<span *ngIf="type" class="uk-text-capitalize type">{{type}}</span>
 						<span *ngIf="type && beforeTitle.length > 0"> . </span>
@@ -35,7 +36,7 @@
 						</span>
 					</div>
 					<!-- Title -->
-    <div class="uk-margin-small-bottom">
+					<div>
 						<h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
 							<a *ngIf="!externalUrl && result.id && !(result.resultType == 'dataprovider' && result.compatibilityUNKNOWN) "
 								(click)="onClick()" [queryParams]="createParam()"
@@ -52,7 +53,6 @@
 									[no title available]
 								</div>
 							</a>
-
 							<a *ngIf="externalUrl && result.id && !(result.resultType == 'dataprovider' && result.compatibilityUNKNOWN) "
 								(click)="onClick()"
 								target="_blank" [href]="externalUrl+result.id" class="custom-external uk-link uk-link-heading uk-width-expand">
@@ -83,40 +83,14 @@
 									[no title available]
 								</div>
 							</div>
-        <hr *ngIf="result.websiteURL && promoteWebsiteURL">
+							<hr class="uk-margin-remove-bottom" *ngIf="result.websiteURL && promoteWebsiteURL">
 						</h2>
 					</div>
-    <!-- Funder -->
-    <div *ngIf="result.funderShortname || result.code" class="uk-margin-small-bottom">
-  <span *ngIf="result.funderShortname">
-    <span class="uk-text-meta">Funder: </span>
-    {{result.funderShortname}}
-  </span>
-      <span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
-    <span class="uk-text-meta">{{openaireEntities.PROJECT}} Code: </span>
-        {{result.code}}
-  </span>
-      <!--      Currently not parsed -->
-      <!--      <span *ngIf="result.callIdentifier" [class.uk-margin-left]="(result.funderShortname || result.code)">-->
-      <!--    <span class="uk-text-muted">Call for proposal: </span>-->
-      <!--        {{result.callIdentifier}}-->
-      <!--  </span>-->
-    </div>
-    <!-- Funder Budget -->
-    <div *ngIf="result.budget || result.contribution" class="uk-margin-small-bottom">
-      <span *ngIf="result.budget">
-        <span class="uk-text-meta">Overall Budget: </span>
-        {{result.budget | number}}
-        <span *ngIf="result.currency">{{result.currency}}</span>
-      </span>
-      <span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
-        <span class="uk-text-meta">Funder Contribution: </span>
-        {{result.contribution | number}}
-        <span *ngIf="result.currency">{{result.currency}}</span>
-      </span>
 				</div>
+				<!-- 2nd section (labels only) -->
+				<div class="section2 uk-margin-bottom">
 					<!-- Labels -->
-    <div class="uk-margin-small-bottom">
+					<div>
 						<span
 								*ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
 								class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
@@ -169,6 +143,38 @@
 							Not yet registered
 						</span>{{' '}}
 					</div>
+				</div>
+				<!-- 3rd section (funders, budget, authors, PIDs, publisher etc.) -->
+				<div class="section3 uk-text-small uk-margin-bottom">
+					<!-- Funder -->
+					<div *ngIf="result.funderShortname || result.code" class="uk-margin-small-bottom">
+						<span *ngIf="result.funderShortname">
+							<span class="uk-text-meta">Funder: </span>
+							{{result.funderShortname}}
+						</span>
+						<span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
+							<span class="uk-text-meta">{{openaireEntities.PROJECT}} Code: </span>
+								{{result.code}}
+						</span>
+						<!--      Currently not parsed -->
+						<!--      <span *ngIf="result.callIdentifier" [class.uk-margin-left]="(result.funderShortname || result.code)">-->
+						<!--    <span class="uk-text-muted">Call for proposal: </span>-->
+						<!--        {{result.callIdentifier}}-->
+						<!--  </span>-->
+					</div>
+					<!-- Funder Budget -->
+					<div *ngIf="result.budget || result.contribution" class="uk-margin-small-bottom">
+						<span *ngIf="result.budget">
+							<span class="uk-text-meta">Overall Budget: </span>
+							{{result.budget | number}}
+							<span *ngIf="result.currency">{{result.currency}}</span>
+						</span>
+						<span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
+							<span class="uk-text-meta">Funder Contribution: </span>
+							{{result.contribution | number}}
+							<span *ngIf="result.currency">{{result.currency}}</span>
+						</span>
+					</div>
 					<!-- Authors -->
 					<div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
 						<span class="uk-text-meta">Authors:&nbsp;</span>
@@ -247,13 +253,6 @@
 							<span>{{(i == result.subjects.slice(0, 10).length - 1 && result.subjects.length > 10) ? "..." : ""}}</span>
 						</span>
 					</div>
-  </div>
-  <!-- Description -->
-  <div *ngIf="result.description" class="uk-margin-small-bottom multi-line-ellipsis lines-3">
-    <p class="uk-text-meta">
-      {{result.description}}
-    </p>
-  </div>
 					<!-- Download from-->
 					<div *ngIf="result.hostedBy_collectedFrom && result.hostedBy_collectedFrom.length > 0"
 						class="uk-margin-small-bottom">
@@ -285,9 +284,19 @@
 						</div>
 					</div>
 				</div>
+				<!-- 4th section (description) -->
+				<div class="section4 uk-text-small">
+					<!-- Description -->
+					<div *ngIf="result.description" class="multi-line-ellipsis lines-3">
+						<p class="uk-text-meta">
+							{{result.description}}
+						</p>
 					</div>
 				</div>
-  <!--&& loggedIn -->
+			</div>
+		</div>
+	</div>
+	<!--&& loggedIn (card footer)-->
 	<div *ngIf="(result.pop_inf && result.DOI) ||
 		((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
 		((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"