From 2f65202142d48bfd51508e20f9ac0d8cb4368990 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Thu, 25 Nov 2021 11:57:49 +0200
Subject: [PATCH] resultLanding: add view more/less button for more than 3
 communities

---
 landingPages/landing-utils/relatedTo.component.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/landingPages/landing-utils/relatedTo.component.ts b/landingPages/landing-utils/relatedTo.component.ts
index c41f4bff..974b191e 100644
--- a/landingPages/landing-utils/relatedTo.component.ts
+++ b/landingPages/landing-utils/relatedTo.component.ts
@@ -16,7 +16,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
 		</div>
 		<!-- If there are any communities with dashboard -->
 		<ng-container *ngIf="gateways && gateways.length > 0">
-			<div class="uk-padding-small uk-margin-small-top uk-flex">
+			<div class="uk-padding-small uk-flex">
 				<div class="uk-width-2-3">
 					<div class="uk-text-muted">Communities with gateway</div>
 					<ul class="custom-list">
@@ -39,7 +39,7 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
 				<div>
 					<div *ngIf="gateways && gateways.length > 0" class="uk-text-muted">Other Communities</div>
 					<ul class="custom-list" [ngClass]="{'uk-padding-remove uk-margin-remove': !gateways || gateways.length == 0}">
-						<li *ngFor="let community of otherCommunities; let i = index">
+						<li *ngFor="let community of otherCommunities.slice(0, showNum); let i = index">
 							{{community.labelContext}}
 							<span *ngIf="community.labelCategory && (currentCommunity == community.idContext)">
 								<span uk-icon="icon: arrow-right"></span> {{community.labelCategory}}
@@ -48,6 +48,12 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
 								: {{community.labelConcept}}
 							</span>
 						</li>
+						<div *ngIf="showNum > threshold" class="uk-text-right">
+							<a (click)="showNum = threshold;">View less</a>
+						</div>
+						<div *ngIf="otherCommunities.length > threshold && showNum == threshold" class="uk-text-right">
+							<a (click)="showNum = otherCommunities.length;">View more</a>
+						</div>
 					</ul>
 				</div>
 			</div>
@@ -156,8 +162,8 @@ import {HelperFunctions} from "../../utils/HelperFunctions.class";
 export class RelatedToComponent implements OnInit {
   @Input() contexts: { "idContext": string, "labelContext": string, "labelCategory": string, "labelConcept": string, "link": string, "logo": string }[];
 
-  public threshold: number = 5;
-  public showNum: number = 5;
+  public threshold: number = 3;
+  public showNum: number = 3;
 	public gateways = [];
 	public otherCommunities = [];
 	public currentCommunity = ConnectHelper.getCommunityFromDomain(properties.domain);