From a556aef2cd71226974e8aa0249a336d739abf544 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Mon, 8 Apr 2024 18:03:26 +0300
Subject: [PATCH] stlyling fixes on dashboard > activity cards

---
 .../ui/dashboard/drafts/drafts.component.html |  79 ++++---
 .../recent-edited-activity.component.html     |  10 +-
 ...edited-description-activity.component.html |  76 ++++---
 .../recent-edited-dmp-activity.component.html | 208 +++++++++---------
 4 files changed, 202 insertions(+), 171 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html
index 5c35bdd72..ec841d1d7 100644
--- a/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html
@@ -1,36 +1,47 @@
-<div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems == null">
-	<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
-</div>
-<div *ngIf="listingItems != null" id="results" #results>
-	<div class="d-flex flex-direction-row pt-4">
-		<!-- Sort by -->
-		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
-		<mat-form-field appearance="outline" class="sort-form col-auto">
-			<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-				<mat-option [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
-				<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
-			</mat-select>
-		</mat-form-field>
-		<!-- End of Sort by -->
-		<!-- Search Filter-->
-		<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
-			<mat-icon matSuffix>search</mat-icon>
-			<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
-			<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
-		</mat-form-field>
-		<!-- End of Search Filter -->
-	</div>
-	<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
-		<button type="button" class="btn-load-more" (click)="loadLess()">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
-	</div>
-	<div *ngFor="let item of listingItems; let i = index">
-		<app-dmp-listing-item-component *ngIf="item.dmp" [showDivider]="i != (listingItems.length - 1)" [dmp]="item.dmp" [isPublic]="false"></app-dmp-listing-item-component>
-		<app-description-listing-item-component *ngIf="item.description" [showDivider]="i != (listingItems.length - 1)" [description]="item.description" [isPublic]="false"  ></app-description-listing-item-component>
-	</div>
-	<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && listingItems.length < pageSize">
-		{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
-	</div>
-	<div *ngIf="listingItems && listingItems.length > 0 && (listingItems.length >= startIndex + pageSize)" class="d-flex justify-content-center">
-		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+<div class="container-fluid">
+	<div class="row">
+
+		<div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems == null">
+			<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
+		</div>
+		<div *ngIf="listingItems != null" id="results" class="col-12" #results>
+			<div class="row pt-4">
+				<!-- Sort by -->
+				<div class="col-12 col-xl-auto d-flex align-items-center">
+					<span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
+				</div>
+				<div class="col-12 col-xl-auto">
+					<mat-form-field appearance="outline" class="sort-form w-100">
+						<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
+							<mat-option [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
+							<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
+						</mat-select>
+					</mat-form-field>
+				</div>
+				<!-- End of Sort by -->
+				<!-- Search Filter-->
+				<div class="col-12 col-xl-auto ml-auto">
+					<mat-form-field appearance="outline" class="search-form w-100" floatLabel="never">
+						<mat-icon matSuffix>search</mat-icon>
+						<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+						<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+					</mat-form-field>
+				</div>
+				<!-- End of Search Filter -->
+			</div>
+			<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
+				<button type="button" class="btn-load-more" (click)="loadLess()">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
+			</div>
+			<div *ngFor="let item of listingItems; let i = index">
+				<app-dmp-listing-item-component *ngIf="item.dmp" [showDivider]="i != (listingItems.length - 1)" [dmp]="item.dmp" [isPublic]="false"></app-dmp-listing-item-component>
+				<app-description-listing-item-component *ngIf="item.description" [showDivider]="i != (listingItems.length - 1)" [description]="item.description" [isPublic]="false"  ></app-description-listing-item-component>
+			</div>
+			<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && listingItems.length < pageSize">
+				{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
+			</div>
+			<div *ngIf="listingItems && listingItems.length > 0 && (listingItems.length >= startIndex + pageSize)" class="d-flex justify-content-center">
+				<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
index 61b454d57..c47511969 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
@@ -6,10 +6,10 @@
 		<div *ngIf="listingItems != null" id="results" class="col-12" #results>
 			<div class="row pt-4">
 				<!-- Sort by -->
-				<div class="col-12 col-xl-auto">
-					<span class="mb-1">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
+				<div class="col-12 col-xl-auto d-flex align-items-center">
+					<span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 				</div>
-				<div class="col-12 col-xl">
+				<div class="col-12 col-xl-auto">
 					<mat-form-field appearance="outline" class="w-100 sort-form">
 						<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
 							<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
@@ -21,8 +21,8 @@
 				</div>
 				<!-- End of Sort by -->
 				<!-- Search Filter-->
-				<div class="col-12 col-xl">
-					<mat-form-field appearance="outline" class="w-100 search-form ml-auto pr-0" floatLabel="never">
+				<div class="col-12 col-xl-auto ml-auto">
+					<mat-form-field appearance="outline" class="w-100 search-form pr-0" floatLabel="never">
 						<mat-icon matSuffix>search</mat-icon>
 						<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
 						<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-description-activity/recent-edited-description-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-description-activity/recent-edited-description-activity.component.html
index 62c190f78..4de578a83 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-description-activity/recent-edited-description-activity.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-description-activity/recent-edited-description-activity.component.html
@@ -1,35 +1,45 @@
-<div *ngIf="listingItems != null" id="descriptions" #descriptions>
-	<div class="d-flex flex-direction-row pt-4">
-		<!-- Sort by -->
-		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
-		<mat-form-field appearance="outline" class="sort-form col-auto">
-			<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-				<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
-				<!-- <mat-option *ngIf="publicMode" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
-				<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
-				<mat-option *ngIf="!publicMode" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
-				<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
-			</mat-select>
-		</mat-form-field>
-		<!-- End of Sort by -->
-		<!-- Search Filter-->
-		<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
-			<mat-icon matSuffix>search</mat-icon>
-			<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
-			<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
-		</mat-form-field>
-		<!-- End of Search Filter -->
-	</div>
-	<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
-		<button type="button" class="btn-load-more" (click)="loadLess()">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
-	</div>
-	<div *ngFor="let item of listingItems; let i = index">
-		<app-description-listing-item-component *ngIf="item" [showDivider]="i != (listingItems.length - 1)" [description]="item" [isPublic]="false"  ></app-description-listing-item-component>
-	</div>
-	<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && listingItems.length < pageSize">
-		{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
-	</div>
-	<div *ngIf="listingItems && listingItems.length > 0 && listingItems.length >= pageSize" class="d-flex justify-content-center">
-		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+<div class="container-fluid">
+	<div class="row">
+		<div *ngIf="listingItems != null" id="descriptions" class="col-12" #descriptions>
+			<div class="row pt-4">
+				<!-- Sort by -->
+				<div class="col-12 col-xl-auto d-flex align-items-center">
+					<span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
+				</div>
+				<div class="col-12 col-xl-auto">
+					<mat-form-field appearance="outline" class="sort-form w-100">
+						<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
+							<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
+							<!-- <mat-option *ngIf="publicMode" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
+							<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
+							<mat-option *ngIf="!publicMode" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
+							<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
+						</mat-select>
+					</mat-form-field>
+				</div>
+				<!-- End of Sort by -->
+				<!-- Search Filter-->
+				<div class="col-12 col-xl-auto ml-auto">
+					<mat-form-field appearance="outline" class="search-form w-100" floatLabel="never">
+						<mat-icon matSuffix>search</mat-icon>
+						<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+						<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+					</mat-form-field>
+				</div>
+				<!-- End of Search Filter -->
+			</div>
+			<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
+				<button type="button" class="btn-load-more" (click)="loadLess()">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
+			</div>
+			<div *ngFor="let item of listingItems; let i = index">
+				<app-description-listing-item-component *ngIf="item" [showDivider]="i != (listingItems.length - 1)" [description]="item" [isPublic]="false"  ></app-description-listing-item-component>
+			</div>
+			<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && listingItems.length < pageSize">
+				{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
+			</div>
+			<div *ngIf="listingItems && listingItems.length > 0 && listingItems.length >= pageSize" class="d-flex justify-content-center">
+				<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+			</div>
+		</div>
 	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html
index 169d2f49d..b69459305 100644
--- a/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html
+++ b/dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html
@@ -1,107 +1,117 @@
-<div *ngIf="listingItems != null" id="dmps" #dmps>
-	<div class="d-flex flex-direction-row pt-4">
-		<!-- Sort by -->
-		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
-		<mat-form-field appearance="outline" class="sort-form col-auto">
-			<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-				<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
-				<!-- <mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
-				<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
-				<mat-option *ngIf="!publicMode" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
-				<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
-			</mat-select>
-		</mat-form-field>
-		<!-- End of Sort by -->
-		<!-- Search Filter-->
-		<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
-			<mat-icon matSuffix>search</mat-icon>
-			<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
-			<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
-		</mat-form-field>
-		<!-- End of Search Filter -->
-	</div>
-	<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
-		<button type="button" class="btn-load-more" (click)="loadLess()">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>		<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
-	</div>
-	<div *ngFor="let item of listingItems; let i = index">
-		<app-dmp-listing-item-component *ngIf="item" [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="false"></app-dmp-listing-item-component>
-	</div>
-	<!-- <div *ngFor="let activity of listingItems">
-		<div class="dmp-card">
-			<a [routerLink]="navigateToUrl(activity.id)" class="pointer">
-				<div class="d-flex flex-direction-row">
-					<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
-					<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | dateTimeCultureFormatter: "d MMMM y" }}</div>
-					<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
+<div class="container-fluid">
+	<div class="row">
+		<div *ngIf="listingItems != null" id="dmps" class="col-12" #dmps>
+			<div class="row pt-4">
+				<!-- Sort by -->
+				<div class="col-12 col-xl-auto d-flex align-items-center">
+					<span class="mb-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 				</div>
-				<div class="col-auto" [ngClass]="{'dmp-title': activity.status === 1, 'dmp-title-draft': activity.status === 0}">{{activity.label}}</div>
-				<div class="dmp-subtitle">
-					<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
-					<span>.</span>
-					<span class="col-auto" *ngIf="activity.status === 1 && activity.public === true"><span class="material-icons icon-align">public</span>{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}</span>
-					<span *ngIf="activity.status === 1 && activity.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
-					<span *ngIf="activity.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
-					<span>.</span>
-					<span class="col-auto">{{'DMP-LISTING.VERSION' | translate}} {{activity.version}}</span>
-					<span>.</span>
-					<span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{activity.grant}}</span>
+				<div class="col-12 col-xl-auto">
+					<mat-form-field appearance="outline" class="sort-form w-100">
+						<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
+							<mat-option *ngIf="!publicMode" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
+							<!-- <mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
+							<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
+							<mat-option *ngIf="!publicMode" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
+							<!-- <mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option> -->
+						</mat-select>
+					</mat-form-field>
 				</div>
-				<div class="col-auto dmp-dataset-descriptions-title">{{'DMP-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ activity.datasets.length }})
+				<!-- End of Sort by -->
+				<!-- Search Filter-->
+				<div class="col-12 col-xl-auto ml-auto">
+					<mat-form-field appearance="outline" class="search-form w-100" floatLabel="never">
+						<mat-icon matSuffix>search</mat-icon>
+						<input matInput placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+						<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+					</mat-form-field>
 				</div>
-				<div *ngFor="let dataset of activity.datasets; let i = index; let last = last" [ngClass]="{'pb-3': i === activity.datasets.length - 1}">
-					<div *ngIf="i < 3">
-						<div class="col-auto dmp-dataset-descriptions-name" *ngIf="!last && i !== 2">{{dataset.label}},</div>
-						<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{dataset.label}}</div>
-					</div>
-				</div>
-				<a class="d-flex justify-content-center pb-3 show-more" *ngIf="activity.datasets.length > 3" [routerLink]="navigateToUrl(activity.id)"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
-			</a>
-			<div class="dmp-card-actions">
-				<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a>
-				<a class="col-auto border-right pointer" *ngIf="isDraftDmp(activity)" [routerLink]="['/plans/edit/' + activity.id]" target="_blank"><span class="material-icons icon-align">add</span>{{'DMP-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}</a>
-				<a class="col-auto border-right pointer" *ngIf="isUserOwner(activity)" (click)="openShareDialog(activity.id, activity.label)"><span class="material-icons icon-align pr-2">group_add</span>{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</a>
-				<a class="col-auto border-right pointer" *ngIf="isAuthenticated()" (click)="cloneOrNewVersionClicked(activity, false)"><span class="material-icons icon-align pr-2">filter_none</span>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</a>
-				<a class="col-auto border-right pointer" *ngIf="!isAuthenticated()" (click)="viewVersions(activity.groupId, activity.label, activity)"><span class="material-icons icon-align pr-2">library_books</span>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}</a>
-
-				<a class="col-auto border-right pointer" *ngIf="!isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteClicked(activity.id)"><span class="material-icons icon-align pr-2">delete</span>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}</a>
-				<a class="col-auto pointer" *ngIf="isAuthenticated()" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
+				<!-- End of Search Filter -->
 			</div>
+			<div *ngIf="listingItems && listingItems.length > 0 && pageSize > pageLessSize" class="d-flex justify-content-center">
+				<button type="button" class="btn-load-more" (click)="loadLess()">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>		<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
+			</div>
+			<div *ngFor="let item of listingItems; let i = index">
+				<app-dmp-listing-item-component *ngIf="item" [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="false"></app-dmp-listing-item-component>
+			</div>
+			<!-- <div *ngFor="let activity of listingItems">
+				<div class="dmp-card">
+					<a [routerLink]="navigateToUrl(activity.id)" class="pointer">
+						<div class="d-flex flex-direction-row">
+							<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
+							<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | dateTimeCultureFormatter: "d MMMM y" }}</div>
+							<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
+						</div>
+						<div class="col-auto" [ngClass]="{'dmp-title': activity.status === 1, 'dmp-title-draft': activity.status === 0}">{{activity.label}}</div>
+						<div class="dmp-subtitle">
+							<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
+							<span>.</span>
+							<span class="col-auto" *ngIf="activity.status === 1 && activity.public === true"><span class="material-icons icon-align">public</span>{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}</span>
+							<span *ngIf="activity.status === 1 && activity.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
+							<span *ngIf="activity.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
+							<span>.</span>
+							<span class="col-auto">{{'DMP-LISTING.VERSION' | translate}} {{activity.version}}</span>
+							<span>.</span>
+							<span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{activity.grant}}</span>
+						</div>
+						<div class="col-auto dmp-dataset-descriptions-title">{{'DMP-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ activity.datasets.length }})
+						</div>
+						<div *ngFor="let dataset of activity.datasets; let i = index; let last = last" [ngClass]="{'pb-3': i === activity.datasets.length - 1}">
+							<div *ngIf="i < 3">
+								<div class="col-auto dmp-dataset-descriptions-name" *ngIf="!last && i !== 2">{{dataset.label}},</div>
+								<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{dataset.label}}</div>
+							</div>
+						</div>
+						<a class="d-flex justify-content-center pb-3 show-more" *ngIf="activity.datasets.length > 3" [routerLink]="navigateToUrl(activity.id)"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
+					</a>
+					<div class="dmp-card-actions">
+						<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a>
+						<a class="col-auto border-right pointer" *ngIf="isDraftDmp(activity)" [routerLink]="['/plans/edit/' + activity.id]" target="_blank"><span class="material-icons icon-align">add</span>{{'DMP-LISTING.ACTIONS.ADD-DESCRIPTION-SHORT' | translate}}</a>
+						<a class="col-auto border-right pointer" *ngIf="isUserOwner(activity)" (click)="openShareDialog(activity.id, activity.label)"><span class="material-icons icon-align pr-2">group_add</span>{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}</a>
+						<a class="col-auto border-right pointer" *ngIf="isAuthenticated()" (click)="cloneOrNewVersionClicked(activity, false)"><span class="material-icons icon-align pr-2">filter_none</span>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</a>
+						<a class="col-auto border-right pointer" *ngIf="!isAuthenticated()" (click)="viewVersions(activity.groupId, activity.label, activity)"><span class="material-icons icon-align pr-2">library_books</span>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}</a>
 
-			<mat-menu #exportMenu="matMenu" xPosition="before">
-				<button mat-menu-item (click)="downloadPDF(activity.id)">
-					<i class="fa fa-file-pdf-o pr-2"></i>
-					<span>{{'GENERAL.FILE-TRANSFOMER.PDF' | translate}}</span>
-				</button>
-				<button mat-menu-item (click)="downloadDocx(activity.id)">
-					<i class="fa fa-file-word-o pr-2"></i>
-					<span>{{'GENERAL.FILE-TRANSFOMER.DOC' | translate}}</span>
-				</button>
-				<button mat-menu-item (click)="downloadXml(activity.id)">
-					<i class="fa fa-file-code-o pr-2"></i>
-					<span>{{'GENERAL.FILE-TRANSFOMER.XML' | translate}}</span>
-				</button>
-				<button mat-menu-item (click)="downloadJson(activity.id)">
-					<i class="fa fa-file-o pr-2"></i>
-					<span>{{'GENERAL.FILE-TRANSFOMER.JSON' | translate}}</span>
-				</button>
-			</mat-menu>
-			<mat-menu #actionsMenu="matMenu" xPosition="before">
-				<button *ngIf="isUserOwner(activity)" mat-menu-item (click)="cloneOrNewVersionClicked(activity, true)">
-					<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
-				</button>
-				<button mat-menu-item (click)="viewVersions(activity.groupId, activity.label, activity)">
-					<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
-				</button>
-				<button mat-menu-item *ngIf="isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteClicked(activity.id)" class="menu-item">
-					<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
-				</button>
-			</mat-menu>
+						<a class="col-auto border-right pointer" *ngIf="!isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteClicked(activity.id)"><span class="material-icons icon-align pr-2">delete</span>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}</a>
+						<a class="col-auto pointer" *ngIf="isAuthenticated()" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
+					</div>
+
+					<mat-menu #exportMenu="matMenu" xPosition="before">
+						<button mat-menu-item (click)="downloadPDF(activity.id)">
+							<i class="fa fa-file-pdf-o pr-2"></i>
+							<span>{{'GENERAL.FILE-TRANSFOMER.PDF' | translate}}</span>
+						</button>
+						<button mat-menu-item (click)="downloadDocx(activity.id)">
+							<i class="fa fa-file-word-o pr-2"></i>
+							<span>{{'GENERAL.FILE-TRANSFOMER.DOC' | translate}}</span>
+						</button>
+						<button mat-menu-item (click)="downloadXml(activity.id)">
+							<i class="fa fa-file-code-o pr-2"></i>
+							<span>{{'GENERAL.FILE-TRANSFOMER.XML' | translate}}</span>
+						</button>
+						<button mat-menu-item (click)="downloadJson(activity.id)">
+							<i class="fa fa-file-o pr-2"></i>
+							<span>{{'GENERAL.FILE-TRANSFOMER.JSON' | translate}}</span>
+						</button>
+					</mat-menu>
+					<mat-menu #actionsMenu="matMenu" xPosition="before">
+						<button *ngIf="isUserOwner(activity)" mat-menu-item (click)="cloneOrNewVersionClicked(activity, true)">
+							<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
+						</button>
+						<button mat-menu-item (click)="viewVersions(activity.groupId, activity.label, activity)">
+							<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+						</button>
+						<button mat-menu-item *ngIf="isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteClicked(activity.id)" class="menu-item">
+							<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
+						</button>
+					</mat-menu>
+				</div>
+			</div> -->
+			<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && listingItems.length < pageSize">
+				{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
+			</div>
+			<div *ngIf="listingItems && listingItems.length > 0 && listingItems.length >= pageSize" class="d-flex justify-content-center">
+				<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+			</div>
 		</div>
-	</div> -->
-	<div class="text-muted d-flex justify-content-center mt-5" *ngIf="listingItems && listingItems.length > 0 && listingItems.length < pageSize">
-		{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
-	</div>
-	<div *ngIf="listingItems && listingItems.length > 0 && listingItems.length >= pageSize" class="d-flex justify-content-center">
-		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
 	</div>
 </div>