Merge branch 'ui-redesign' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-redesign

dmp-backend/web/src/main/java/eu/eudat/controllers/DashBoardController.java

@@ -4,6 +4,7 @@ import eu.eudat.logic.managers.DashBoardManager;
 import eu.eudat.logic.security.claims.ClaimedAuthorities;
 import eu.eudat.logic.services.ApiContext;
 import eu.eudat.models.data.dashboard.recent.RecentActivity;
+import eu.eudat.models.data.dashboard.recent.model.RecentActivityModel;
 import eu.eudat.models.data.dashboard.searchbar.SearchBarItem;
 import eu.eudat.models.data.dashboard.statistics.DashBoardStatistics;
 import eu.eudat.models.data.helpers.responses.ResponseItem;
@@ -15,6 +16,7 @@ import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
+import javax.transaction.Transactional;
 import java.io.IOException;
 import java.util.List;
 
@@ -42,6 +44,14 @@ public class DashBoardController extends BaseController {
         return ResponseEntity.status(HttpStatus.OK).body(new ResponseItem<DashBoardStatistics>().status(ApiMessageCode.NO_MESSAGE).payload(statistics));
     }
 
+    @RequestMapping(method = RequestMethod.GET, value = {"/dashboard/recentActivity"}, produces = "application/json")
+    @Transactional
+    public ResponseEntity<ResponseItem<List<RecentActivityModel>>> getNewRecentActivity(@RequestParam(name = "numOfActivities", required = false, defaultValue = "5") Integer numberOfActivities,
+                                                                                        @ClaimedAuthorities(claims = {Authorities.ADMIN, Authorities.MANAGER, Authorities.USER, Authorities.ANONYMOUS}) Principal principal) {
+        List<RecentActivityModel> statistics = dashBoardManager.getNewRecentActivity(principal, numberOfActivities);
+        return ResponseEntity.status(HttpStatus.OK).body(new ResponseItem<List<RecentActivityModel>>().status(ApiMessageCode.NO_MESSAGE).payload(statistics));
+    }
+
     @RequestMapping(method = RequestMethod.GET, value = {"/user/recentActivity"}, produces = "application/json")
     public ResponseEntity<ResponseItem<RecentActivity>> getRecentActivity(@RequestParam(name = "numOfActivities", required = false, defaultValue = "5") Integer numberOfActivities, Principal principal) {
         RecentActivity statistics = dashBoardManager.getRecentActivity(principal, numberOfActivities);

dmp-backend/web/src/main/java/eu/eudat/logic/managers/DashBoardManager.java

@@ -11,21 +11,27 @@ import eu.eudat.elastic.entities.Dmp;
 import eu.eudat.logic.builders.model.models.RecentActivityDataBuilder;
 import eu.eudat.logic.services.ApiContext;
 import eu.eudat.logic.services.operations.DatabaseRepository;
+import eu.eudat.models.HintedModelFactory;
 import eu.eudat.models.data.dashboard.recent.RecentActivity;
 import eu.eudat.models.data.dashboard.recent.RecentActivityData;
+import eu.eudat.models.data.dashboard.recent.model.RecentActivityModel;
+import eu.eudat.models.data.dashboard.recent.model.RecentDatasetModel;
+import eu.eudat.models.data.dashboard.recent.model.RecentDmpModel;
 import eu.eudat.models.data.dashboard.searchbar.SearchBarItem;
 import eu.eudat.models.data.dashboard.statistics.DashBoardStatistics;
+import eu.eudat.models.data.listingmodels.DataManagementPlanListingModel;
+import eu.eudat.models.data.listingmodels.DatasetListingModel;
 import eu.eudat.models.data.security.Principal;
+import eu.eudat.queryable.QueryableList;
 import eu.eudat.types.searchbar.SearchBarItemType;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
 
+import javax.transaction.Transactional;
 import java.io.IOException;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.UUID;
+import java.util.*;
 import java.util.concurrent.CompletableFuture;
 import java.util.stream.Collectors;
 
@@ -175,6 +181,55 @@ public class DashBoardManager {
         return activity;
     }
 
+    @Transactional
+    public List<RecentActivityModel> getNewRecentActivity(Principal principal, Integer numberofactivities) {
+       List<RecentActivityModel> recentActivityModels = new ArrayList<>();
+        DMPDao dataManagementPlanRepository = databaseRepository.getDmpDao();
+        DatasetDao datasetRepository = databaseRepository.getDatasetDao();
+        UserInfo user = new UserInfo();
+        user.setId(principal.getId());
+        DatasetCriteria datasetCriteria = new DatasetCriteria();
+        datasetCriteria.setAllVersions(false);
+        DataManagementPlanCriteria dataManagementPlanCriteria = new DataManagementPlanCriteria();
+        dataManagementPlanCriteria.setAllVersions(false);
+
+        QueryableList<DMP> dmpList;
+        QueryableList<Dataset> datasetList;
+
+        if (principal.getId() != null) {
+            List<Integer> roles = new LinkedList<>();
+            dmpList = dataManagementPlanRepository.getAuthenticated(dataManagementPlanRepository.getWithCriteria(dataManagementPlanCriteria), principal.getId(), roles);
+            datasetList =  datasetRepository.getAuthenticated(datasetRepository.getWithCriteria(datasetCriteria), user, roles);
+        } else {
+            dataManagementPlanCriteria.setIsPublic(true);
+            dataManagementPlanCriteria.setOnlyPublic(true);
+            datasetCriteria.setIsPublic(true);
+            dmpList = dataManagementPlanRepository.getWithCriteria(dataManagementPlanCriteria);
+            datasetList = datasetRepository.getWithCriteria(datasetCriteria);
+        }
+
+        CompletableFuture<List<RecentActivityModel>> dmps = dmpList
+                .withHint(HintedModelFactory.getHint(DataManagementPlanListingModel.class))
+                .orderBy((builder, root) -> builder.desc(root.get("modified")))
+                .take(numberofactivities)
+                .selectAsync(item -> {
+                    return new RecentDmpModel().fromEntity(item);
+                })
+                .whenComplete((dmpActivities, throwable) -> recentActivityModels.addAll(dmpActivities));
+
+        CompletableFuture<List<RecentActivityModel>> datasets = datasetList
+                .withHint(HintedModelFactory.getHint(DatasetListingModel.class))
+                .orderBy((builder, root) -> builder.desc(root.get("modified")))
+                .take(numberofactivities)
+                .selectAsync(item -> {
+                    return new RecentDatasetModel().fromEntity(item);
+                })
+                .whenComplete((datasetActivities, throwable) -> recentActivityModels.addAll(datasetActivities));
+
+        CompletableFuture.allOf(dmps, datasets).join();
+        return recentActivityModels.stream().sorted(Comparator.comparing(RecentActivityModel::getModified)).collect(Collectors.toList());
+    }
+
     public List<SearchBarItem> searchUserData(String like, Principal principal) {
         UserInfo user = new UserInfo();
         user.setId(principal.getId());

dmp-backend/web/src/main/java/eu/eudat/logic/managers/DatasetManager.java

@@ -186,7 +186,7 @@ public class DatasetManager {
 
 
         CompletableFuture<List<DatasetListingModel>> itemsFuture = pagedItems.
-                selectAsync(item -> new DatasetListingModel().fromDataModel(item)).whenComplete((resultList, throwable) -> {
+                selectAsync(this::mapModel).whenComplete((resultList, throwable) -> {
             dataTable.setData(resultList);
         });
 
@@ -240,7 +240,7 @@ public class DatasetManager {
         DataTableData<DatasetListingModel> dataTable = new DataTableData<>();
 
         CompletableFuture<List<DatasetListingModel>> itemsFuture = pagedItems.
-                selectAsync(item -> new DatasetListingModel().fromDataModel(item)).whenComplete((resultList, throwable) -> {
+                selectAsync(this::mapModel).whenComplete((resultList, throwable) -> {
             dataTable.setData(resultList);
         });
 
@@ -1024,4 +1024,16 @@ public class DatasetManager {
             dstTags.add(tag);
         }
     }
+
+    private DatasetListingModel mapModel(Dataset item) {
+        DatasetListingModel listingModel = new DatasetListingModel().fromDataModel(item);
+        DatasetProfileCriteria criteria = new DatasetProfileCriteria();
+        criteria.setGroupIds(Collections.singletonList(item.getProfile().getGroupId()));
+        List<DatasetProfile> profiles = apiContext.getOperationsContext().getDatabaseRepository().getDatasetProfileDao().getWithCriteria(criteria).toList();
+        boolean islast = false;
+        profiles = profiles.stream().sorted(Comparator.comparing(DatasetProfile::getVersion)).collect(Collectors.toList());
+        islast = profiles.get(0).getId().equals(item.getProfile().getId());
+        listingModel.setProfileLatestVersion(islast);
+        return listingModel;
+    }
 }

dmp-backend/web/src/main/java/eu/eudat/models/data/dashboard/recent/model/RecentActivityModel.java

@@ -0,0 +1,125 @@
+package eu.eudat.models.data.dashboard.recent.model;
+
+import java.util.Date;
+
+public abstract class RecentActivityModel<T> {
+	private String id;
+	private String title;
+	private String description;
+	private Date created;
+	private Date modified;
+	private int status;
+	private int version;
+	private String grant;
+	private String grantAbbreviation;
+	private String grantId;
+	private Date finalizedAt;
+	private Date publishedAt;
+	private String profile;
+
+	public String getId() {
+		return id;
+	}
+
+	public void setId(String id) {
+		this.id = id;
+	}
+
+	public String getTitle() {
+		return title;
+	}
+
+	public void setTitle(String title) {
+		this.title = title;
+	}
+
+	public String getDescription() {
+		return description;
+	}
+
+	public void setDescription(String description) {
+		this.description = description;
+	}
+
+	public Date getCreated() {
+		return created;
+	}
+
+	public void setCreated(Date created) {
+		this.created = created;
+	}
+
+	public Date getModified() {
+		return modified;
+	}
+
+	public void setModified(Date modified) {
+		this.modified = modified;
+	}
+
+	public int getStatus() {
+		return status;
+	}
+
+	public void setStatus(int status) {
+		this.status = status;
+	}
+
+	public int getVersion() {
+		return version;
+	}
+
+	public void setVersion(int version) {
+		this.version = version;
+	}
+
+	public String getGrant() {
+		return grant;
+	}
+
+	public void setGrant(String grant) {
+		this.grant = grant;
+	}
+
+	public String getGrantAbbreviation() {
+		return grantAbbreviation;
+	}
+
+	public void setGrantAbbreviation(String grantAbbreviation) {
+		this.grantAbbreviation = grantAbbreviation;
+	}
+
+	public String getGrantId() {
+		return grantId;
+	}
+
+	public void setGrantId(String grantId) {
+		this.grantId = grantId;
+	}
+
+	public Date getFinalizedAt() {
+		return finalizedAt;
+	}
+
+	public void setFinalizedAt(Date finalizedAt) {
+		this.finalizedAt = finalizedAt;
+	}
+
+	public Date getPublishedAt() {
+		return publishedAt;
+	}
+
+	public void setPublishedAt(Date publishedAt) {
+		this.publishedAt = publishedAt;
+	}
+
+	public String getProfile() {
+		return profile;
+	}
+
+	public void setProfile(String profile) {
+		this.profile = profile;
+	}
+
+	public abstract RecentActivityModel fromEntity(T entity);
+}

dmp-backend/web/src/main/java/eu/eudat/models/data/dashboard/recent/model/RecentDatasetModel.java

@@ -0,0 +1,100 @@
+package eu.eudat.models.data.dashboard.recent.model;
+
+import eu.eudat.data.entities.Dataset;
+import eu.eudat.logic.utilities.helpers.LabelBuilder;
+import eu.eudat.models.data.dataset.DataRepository;
+import eu.eudat.models.data.dataset.Service;
+import eu.eudat.models.data.listingmodels.DatasetListingModel;
+
+import java.util.Date;
+import java.util.stream.Collectors;
+
+public class RecentDatasetModel extends RecentActivityModel<Dataset> {
+	private String dmp;
+	private String dmpId;
+	private String dataRepositories;
+	private String registries;
+	private String services;
+
+	public String getDmp() {
+		return dmp;
+	}
+
+	public void setDmp(String dmp) {
+		this.dmp = dmp;
+	}
+
+	public String getDmpId() {
+		return dmpId;
+	}
+
+	public void setDmpId(String dmpId) {
+		this.dmpId = dmpId;
+	}
+
+	public String getDataRepositories() {
+		return dataRepositories;
+	}
+
+	public void setDataRepositories(String dataRepositories) {
+		this.dataRepositories = dataRepositories;
+	}
+
+	public String getRegistries() {
+		return registries;
+	}
+
+	public void setRegistries(String registries) {
+		this.registries = registries;
+	}
+
+	public String getServices() {
+		return services;
+	}
+
+	public void setServices(String services) {
+		this.services = services;
+	}
+
+	@Override
+	public RecentActivityModel fromEntity(Dataset entity) {
+		this.setId(entity.getId().toString());
+		this.setTitle(entity.getLabel());
+		this.setDescription(entity.getDescription());
+		this.setCreated(entity.getCreated());
+		this.setModified(entity.getModified());
+		this.setStatus(entity.getStatus());
+		this.setVersion(entity.getDmp() != null ? entity.getDmp().getVersion(): 0);
+		this.setFinalizedAt(entity.getFinalizedAt());
+		this.setGrantAbbreviation(entity.getDmp() != null ? entity.getDmp().getGrant().getAbbreviation() : "");
+		this.setPublishedAt(entity.getDmp() != null ? entity.getDmp().getPublishedAt() : new Date());
+		this.setGrantId(entity.getDmp() != null ? entity.getDmp().getGrant().getId().toString() : "");
+		this.setProfile(entity.getProfile() != null ? entity.getProfile().getLabel() : "");
+		this.setGrant(entity.getDmp() != null ? entity.getDmp().getGrant().getLabel() : "");
+		this.setDataRepositories(entity.getDatasetDataRepositories() != null  && !entity.getDatasetDataRepositories().isEmpty()? LabelBuilder.getLabel(entity.getDatasetDataRepositories().stream().map(item -> new DataRepository().fromDataModel(item.getDataRepository())).collect(Collectors.toList())) : "");
+		this.setDmp( entity.getDmp() != null ? entity.getDmp().getLabel() : "");
+		this.setDmpId(entity.getDmp() != null ? entity.getDmp().getId().toString() : "");
+		this.setRegistries(LabelBuilder.getLabel(entity.getRegistries().stream().map(item -> new eu.eudat.models.data.dataset.Registry().fromDataModel(item)).collect(Collectors.toList())));
+		this.setServices(LabelBuilder.getLabel(entity.getServices().stream().map(item -> new Service().fromDataModel(item.getService())).collect(Collectors.toList())));
+		return this;
+	}
+
+	public RecentDatasetModel fromDmpEntity(Dataset entity) {
+		this.setId(entity.getId().toString());
+		this.setTitle(entity.getLabel());
+		this.setDescription(entity.getDescription());
+		this.setCreated(entity.getCreated());
+		this.setModified(entity.getModified());
+		this.setStatus(entity.getStatus());
+		this.setVersion(entity.getDmp() != null ? entity.getDmp().getVersion(): 0);
+		this.setFinalizedAt(entity.getFinalizedAt());
+		this.setGrantAbbreviation(entity.getDmp() != null ? entity.getDmp().getGrant().getAbbreviation() : "");
+		this.setPublishedAt(entity.getDmp() != null ? entity.getDmp().getPublishedAt() : new Date());
+		this.setGrantId(entity.getDmp() != null ? entity.getDmp().getGrant().getId().toString() : "");
+		this.setProfile(entity.getProfile() != null ? entity.getProfile().getLabel() : "");
+		this.setGrant(entity.getDmp() != null ? entity.getDmp().getGrant().getLabel() : "");
+		this.setDmp( entity.getDmp() != null ? entity.getDmp().getLabel() : "");
+		this.setDmpId(entity.getDmp() != null ? entity.getDmp().getId().toString() : "");
+		return this;
+	}
+}

dmp-backend/web/src/main/java/eu/eudat/models/data/dashboard/recent/model/RecentDmpModel.java

@@ -0,0 +1,114 @@
+package eu.eudat.models.data.dashboard.recent.model;
+
+import eu.eudat.data.entities.DMP;
+import eu.eudat.logic.utilities.helpers.LabelBuilder;
+import eu.eudat.models.data.dmp.AssociatedProfile;
+import eu.eudat.models.data.dmp.Organisation;
+import eu.eudat.models.data.listingmodels.UserInfoListingModel;
+
+import javax.transaction.Transactional;
+import java.util.List;
+import java.util.Map;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+public class RecentDmpModel extends RecentActivityModel<DMP> {
+	private String doi;
+	private Map<String, Object> extraProperties;
+	private List<RecentDatasetModel> datasets;
+	private List<AssociatedProfile> associatedProfiles;
+	private String organisations;
+	private UUID groupId;
+	private List<UserInfoListingModel> users;
+	private Boolean isPublic;
+
+
+	public String getDoi() {
+		return doi;
+	}
+
+	public void setDoi(String doi) {
+		this.doi = doi;
+	}
+
+	public Map<String, Object> getExtraProperties() {
+		return extraProperties;
+	}
+
+	public void setExtraProperties(Map<String, Object> extraProperties) {
+		this.extraProperties = extraProperties;
+	}
+
+	public List<RecentDatasetModel> getDatasets() {
+		return datasets;
+	}
+
+	public void setDatasets(List<RecentDatasetModel> datasets) {
+		this.datasets = datasets;
+	}
+
+	public List<AssociatedProfile> getAssociatedProfiles() {
+		return associatedProfiles;
+	}
+
+	public void setAssociatedProfiles(List<AssociatedProfile> associatedProfiles) {
+		this.associatedProfiles = associatedProfiles;
+	}
+
+	public String getOrganisations() {
+		return organisations;
+	}
+
+	public void setOrganisations(String organisations) {
+		this.organisations = organisations;
+	}
+
+	public UUID getGroupId() {
+		return groupId;
+	}
+
+	public void setGroupId(UUID groupId) {
+		this.groupId = groupId;
+	}
+
+	public List<UserInfoListingModel> getUsers() {
+		return users;
+	}
+
+	public void setUsers(List<UserInfoListingModel> users) {
+		this.users = users;
+	}
+
+	public Boolean getPublic() {
+		return isPublic;
+	}
+
+	public void setPublic(Boolean aPublic) {
+		isPublic = aPublic;
+	}
+
+	@Override
+	@Transactional
+	public RecentActivityModel fromEntity(DMP entity) {
+		this.setId(entity.getId().toString());
+		this.setTitle(entity.getLabel());
+		this.setDescription(entity.getDescription());
+		this.setCreated(entity.getCreated());
+		this.setModified(entity.getModified());
+		this.setStatus(entity.getStatus());
+		this.setVersion(entity.getVersion());
+		this.datasets = entity.getDataset().stream().map(dataset -> new RecentDatasetModel().fromDmpEntity(dataset)).collect(Collectors.toList());
+		this.associatedProfiles = entity.getAssociatedDmps().stream().map(item -> new AssociatedProfile().fromData(item)).collect(Collectors.toList());
+		this.setFinalizedAt(entity.getFinalizedAt());
+		this.setGrant(entity.getGrant().getLabel());
+		this.setGrantAbbreviation(entity.getGrant().getAbbreviation());
+		this.setGrantId(entity.getGrant().getId().toString());
+		this.groupId = entity.getGroupId();
+		this.isPublic = entity.isPublic();
+		this.organisations = LabelBuilder.getLabel(entity.getOrganisations().stream().map(item -> new Organisation().fromDataModel(item)).collect(Collectors.toList()));
+		if (entity.getProfile() != null) this.setProfile(entity.getProfile().getLabel());
+		this.setPublishedAt(entity.getPublishedAt());
+		this.users = entity.getUsers().stream().map(x -> new UserInfoListingModel().fromDataModel(x)).collect(Collectors.toList());
+		return this;
+	}
+}

dmp-backend/web/src/main/java/eu/eudat/models/data/listingmodels/DatasetListingModel.java

@@ -6,7 +6,9 @@ import eu.eudat.models.data.dataset.DataRepository;
 import eu.eudat.models.data.dataset.Service;
 import eu.eudat.logic.utilities.helpers.LabelBuilder;
 
+import java.util.ArrayList;
 import java.util.Date;
+import java.util.List;
 import java.util.stream.Collectors;
 
 
@@ -29,6 +31,9 @@ public class DatasetListingModel implements DataModel<Dataset, DatasetListingMod
     private Date finalizedAt;
     private Date dmpPublishedAt;
     private int version;
+    private List<UserInfoListingModel> users;
+    private Boolean isPublic;
+    private Boolean isProfileLatestVersion;
 
     public String getId() {
         return id;
@@ -156,6 +161,30 @@ public class DatasetListingModel implements DataModel<Dataset, DatasetListingMod
         this.version = version;
     }
 
+    public List<UserInfoListingModel> getUsers() {
+        return users;
+    }
+
+    public void setUsers(List<UserInfoListingModel> users) {
+        this.users = users;
+    }
+
+    public Boolean getPublic() {
+        return isPublic;
+    }
+
+    public void setPublic(Boolean aPublic) {
+        isPublic = aPublic;
+    }
+
+    public Boolean getProfileLatestVersion() {
+        return isProfileLatestVersion;
+    }
+
+    public void setProfileLatestVersion(Boolean profileLatestVersion) {
+        isProfileLatestVersion = profileLatestVersion;
+    }
+
     @Override
     public DatasetListingModel fromDataModel(Dataset entity) {
         this.id = entity.getId() != null ? entity.getId().toString() : "";
@@ -176,6 +205,8 @@ public class DatasetListingModel implements DataModel<Dataset, DatasetListingMod
         this.finalizedAt = entity.getFinalizedAt();
         this.dmpPublishedAt = entity.getDmp().getPublishedAt();
         this.version = entity.getDmp().getVersion();
+        this.users = entity.getDmp() != null ? entity.getDmp().getUsers().stream().map(x -> new UserInfoListingModel().fromDataModel(x)).collect(Collectors.toList()) : new ArrayList<>();
+        this.isPublic = entity.getDmp() != null ? entity.getDmp().isPublic() : false;
         return this;
     }
 

dmp-frontend/src/app/app.component.html

@@ -4,7 +4,7 @@
 		<mat-sidenav #sidenav mode="side" opened class="sidenav" [fixedInViewport]="true" [fixedTopGap]="80">
 			<app-sidebar></app-sidebar>
 		</mat-sidenav>
-		<mat-sidenav-content>
+		<mat-sidenav-content class="sidenav-content">
 			<div>
 				<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
 			</div>

dmp-frontend/src/app/app.component.scss

@@ -28,6 +28,10 @@
 	opacity: 1;
 }
 
+.sidenav-content {
+	background-color: whitesmoke;
+}
+
 .sidebar-shadow {
   box-shadow: 0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15);
   z-index: 100;

dmp-frontend/src/app/core/model/dataset/dataset-listing.ts

@@ -11,10 +11,13 @@ export interface DatasetListingModel {
 	registries: String;
 	services: String;
 	description: String;
-	status: Number;
+	status: number;
 	created: Date;
 	modified: Date;
 	finalizedAt: Date;
 	dmpPublishedAt?: Date;
 	version: number;
+	users: any[];
+	public: boolean;
+	isProfileLatestVersion: boolean;
 }

dmp-frontend/src/app/core/model/dmp/dmp-listing.ts

@@ -1,4 +1,5 @@
 import { DmpStatus } from "../../common/enum/dmp-status";
+import { DmpAssociatedProfileModel } from '../dmp-profile/dmp-associated-profile';
 
 export interface DmpListingModel {
 	id: string;
@@ -17,7 +18,7 @@ export interface DmpListingModel {
 	groupId: string;
 	version: number;
 	datasets: any[];
-	associatedProfiles: any[];
+	associatedProfiles: DmpAssociatedProfileModel[];
 	users: any[];
 	public: boolean;
 }

dmp-frontend/src/app/core/model/dmp/dmp-overview.ts

@@ -1,5 +1,4 @@
 import { OrganizationModel } from "../organisation/organization";
-import { DatasetUrlListing } from "../dataset/dataset-url-listing";
 import { UserInfoListingModel } from "../user/user-info-listing";
 import { DmpAssociatedProfileModel } from "../dmp-profile/dmp-associated-profile";
 import { ResearcherModel } from "../researcher/researcher";

dmp-frontend/src/app/core/model/recent-activity/recent-activity.model.ts

@@ -0,0 +1,16 @@
+export class RecentActivityModel {
+	id: String;
+	title: String;
+	description: String;
+	created: Date;
+	modified: Date;
+	status: number;
+	version: number;
+	grant: String;
+	grantAbbreviation: String;
+	grantId: String;
+	finalizedAt: Date;
+	publishedAt: Date;
+	profile: String;
+}
+

dmp-frontend/src/app/core/model/recent-activity/recent-dataset-activity.model.ts

@@ -0,0 +1,9 @@
+import { RecentActivityModel } from "./recent-activity.model";
+
+export class RecentDatasetModel extends RecentActivityModel {
+	dmp: String;
+	dmpId: String;
+	dataRepositories: String;
+	registries: String;
+	services: String;
+}

dmp-frontend/src/app/core/model/recent-activity/recent-dmp-activity.model.ts

@@ -0,0 +1,15 @@
+import { RecentActivityModel } from './recent-activity.model';
+import { RecentDatasetModel } from './recent-dataset-activity.model';
+import { DmpAssociatedProfileModel } from '../dmp-profile/dmp-associated-profile';
+import { UserInfoListingModel } from '../user/user-info-listing';
+
+export class RecentDmpModel extends RecentActivityModel {
+	doi: String;
+	extraProperties: Map<String, any>;
+	datasets: RecentDatasetModel[];
+	associatedProfiles: DmpAssociatedProfileModel[];
+	organisations: String;
+	groupId: string;
+	users: UserInfoListingModel[];
+	isPublic: boolean;
+}

dmp-frontend/src/app/core/services/dashboard/dashboard.service.ts

@@ -5,6 +5,7 @@ import { environment } from '../../../../environments/environment';
 import { DashboardStatisticsModel } from '../../model/dashboard/dashboard-statistics-model';
 import { BaseHttpService } from '../http/base-http.service';
 import { ConfigurationService } from '../configuration/configuration.service';
+import { RecentActivityModel } from '@app/core/model/recent-activity/recent-activity.model';
 
 @Injectable()
 export class DashboardService {
@@ -24,4 +25,8 @@ export class DashboardService {
 	getUserStatistics(): Observable<DashboardStatisticsModel> {
 		return this.http.get<DashboardStatisticsModel>(this.actionUrl + 'me/getStatistics', { headers: this.headers });
 	}
+
+	getRecentAcitvity(): Observable<RecentActivityModel[]> {
+		return this.http.get<RecentActivityModel[]>(this.actionUrl + 'recentActivity', {headers: this.headers});
+	}
 }

dmp-frontend/src/app/ui/dashboard/dashboard.component.html

@@ -1,4 +1,4 @@
-<div class="main-content dashboard-main-container" [class.non-auth-main-container]="!this.isAuthenticated()">
+<div class="main-content dashboard-main-container h-100" [class.non-auth-main-container]="!this.isAuthenticated()">
 	<div *ngIf="this.isAuthenticated()" class="container-fluid">
 		<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount === 0
 				&& dashboardStatisticsData?.totalDataSetCount === 0
@@ -7,21 +7,21 @@
 			<div class="main-content">
 				<div class="col-md-8">
 					<div class="card" [style.display]="isVisible ? 'block' : 'none'">
-					  <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
-					  <p class="card-title mb-0">What is a DMP in ARGOS</p>
-					  <p class="card-content mb-0">A Data Management Plan (DMP) is a living document describing the datasets that are generated and/ or re-used
-						during and after a research lifetime. DMPs aim to provide researchers with essential information to re-produce,
-						re-distribute and re-purpose research results thus assuring for their validity and exploitation.</p>
-					  <p class="card-content pt-3 mb-0">
-						New with DMPs? Visit <a><u>OpenAIRE’s Guide for Researchers</u></a> to learn more about how to create one!
-					  </p>
-					  <div class="d-flex">
-						<button type="button" class="col-auto align-self-center normal-btn">Start your first DMP</button>
-						<img class="col-auto ml-auto" src="../../assets/img/laptop.png" width="116" height="139">
-					  </div>
+						<!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> -->
+						<p class="card-title mb-0">What is a DMP in ARGOS</p>
+						<p class="card-content mb-0">A Data Management Plan (DMP) is a living document describing the datasets that are generated and/ or re-used
+							during and after a research lifetime. DMPs aim to provide researchers with essential information to re-produce,
+							re-distribute and re-purpose research results thus assuring for their validity and exploitation.</p>
+						<p class="card-content pt-3 mb-0">
+							New with DMPs? Visit <a><u>OpenAIRE’s Guide for Researchers</u></a> to learn more about how to create one!
+						</p>
+						<div class="d-flex">
+							<button type="button" class="col-auto align-self-center normal-btn">Start your first DMP</button>
+							<img class="col-auto ml-auto" src="../../assets/img/laptop.png" width="116" height="139">
+						</div>
 					</div>
-				  </div>
-				  <div class="col-md-4">
+				</div>
+				<div class="col-md-4">
 					<div class="personal-usage">Personal usage</div>
 					<div class="counter-zero">0</div>
 					<a href="#" class="link">DMP's</a>
@@ -31,7 +31,7 @@
 					<a href="#" class="link-disabled">Grants</a>
 					<div class="counter-zero">0</div>
 					<a href="#" class="link-disabled">Related organizations</a>
-				  </div>
+				</div>
 			</div>
 		</div>
 		<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount !== 0
@@ -42,48 +42,49 @@
 			<div class="main-content">
 				<div class="col">
 					<div class="card" [style.display]="isVisible ? 'block' : 'none'">
-						<a class="col-auto d-flex" (click)="closeCard()"><span
-								class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
-						<p class="card-content mb-0 pt-0">A DMP in Argos consists of key information about research,
-							such as purpose,
-							objectives and researchers involved, but also about documentation of research datasets,
-							namely <b> Dataset
-								Descriptions</b>, that highlight the steps followed and the means used across data
-							management activities.</p>
+						<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
+						<p class="card-content mb-0 pt-0">
+							{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
+							<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
+							{{'DASHBOARD.DMP-ABOUT-END' | translate}}</p>
 						<div class="d-flex pt-4 pb-4 mt-3 mb-3">
-							<button type="button" class="col-auto align-self-center yellow-btn">Add Dataset
-								Description</button>
+							<button type="button" class="col-auto align-self-center yellow-btn">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
 						</div>
 					</div>
 					<div class="latest-activity-title">Latest activity</div>
 					<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
-						<!-- +counter -->
 						<mat-tab label="All">
-							<div class="col-auto"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
 							<app-recent-edited-activity></app-recent-edited-activity>
 						</mat-tab>
-						<mat-tab label="Drafts"></mat-tab>
-						<mat-tab label="DMPs"></mat-tab>
-						<mat-tab label="Dataset Descriptions"></mat-tab>
+						<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{this.totalDraftDatasets}})">
+							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+							<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
+						</mat-tab>
+						<mat-tab label="{{'DASHBOARD.DMPS' | translate}}  ({{this.totalDmps}})">
+							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+							<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
+						</mat-tab>
+						<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{this.totalDatasets}})">
+							<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
+							<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
+						</mat-tab>
 					</mat-tab-group>
-					<div class="d-flex justify-content-center">
-						<button type="button" class="btn-load-more">Load more</button>
-					</div>
 				</div>
 				<div class="col-auto">
-					<div class="personal-usage">Personal usage</div>
+					<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
 					<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
 						{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
-					<a [routerLink]="['/plans']" class="link">DMP's</a>
+					<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a>
 					<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
 						{{dashboardStatisticsData?.totalDataSetCount}}</div>
-					<a [routerLink]="['/datasets']" class="link">Dataset Descriptions</a>
+					<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</a>
 					<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
 						{{dashboardStatisticsData?.totalGrantCount}}</div>
-					<a href="#" class="link-disabled">Grants</a>
+					<a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
 					<div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}">
 						{{dashboardStatisticsData?.totalOrganisationCount}}</div>
-					<a href="#" class="link-disabled">Related organizations</a>
+					<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
 				</div>
 			</div>
 

dmp-frontend/src/app/ui/dashboard/dashboard.component.scss

@@ -1,7 +1,7 @@
 .main-content {
 	background-color: #f5f5f5;
 	padding-top: 3.68rem;
-	padding-bottom: 10rem;
+	padding-bottom: 3rem;
 	// padding-left: 3.31rem;
 	padding-left: 1rem;
 	margin: 0;

dmp-frontend/src/app/ui/dashboard/dashboard.component.ts

@@ -8,8 +8,6 @@ import { SearchBarItem } from '@app/core/model/dashboard/search-bar-item';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
 import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
 import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
-import { ExploreDatasetCriteriaModel } from '@app/core/query/explore-dataset/explore-dataset-criteria';
-import { ExploreDmpCriteriaModel } from '@app/core/query/explore-dmp/explore-dmp-criteria';
 import { GrantCriteria } from '@app/core/query/grant/grant-criteria';
 import { RequestItem } from '@app/core/query/request-item';
 import { AuthService } from '@app/core/services/auth/auth.service';
@@ -55,6 +53,11 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 	dmpListingItems: DmpListingModel[] = [];
 	datasetListingItems: DatasetListingModel[] = [];
 
+	totalDatasets: number;
+	totalDmps: number;
+	totalDraftDatasets: number;
+
+
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
@@ -187,6 +190,18 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 		this.isVisible = false;
 	}
 
+	onCountDmps(event): void {
+		this.totalDmps = event;
+	}
+
+	onCountDatasets(event): void {
+		this.totalDatasets = event;
+	}
+
+	onCountDraftDatasets(event): void {
+		this.totalDraftDatasets = event;
+	}
+
 	// viewAllPublicDmpsClicked() {
 	// 	this.router.navigate(['/explore-plans']);
 	// }

dmp-frontend/src/app/ui/dashboard/dashboard.module.ts

@@ -14,15 +14,17 @@ import { RecentVisitedActivityComponent } from '@app/ui/dashboard/recent-visited
 import { WizardComponent } from '@app/ui/dashboard/wizard/wizard.component';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
-import { GuestModule } from '../guest/guest.module';
-import { GuestComponent } from '../guest/guest.component';
+import { RecentEditedDatasetActivityComponent } from './recent-edited-dataset-activity/recent-edited-dataset-activity.component';
+import { DatasetCopyDialogModule } from '../dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
+import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/recent-edited-dmp-activity.component';
 
 @NgModule({
 	imports: [
 		CommonUiModule,
 		DashboardRoutingModule,
 		ExportMethodDialogModule,
-		ConfirmationDialogModule
+		ConfirmationDialogModule,
+		DatasetCopyDialogModule
 	],
 	declarations: [
 		DashboardComponent,
@@ -35,7 +37,9 @@ import { GuestComponent } from '../guest/guest.component';
 		RecentEditedActivityComponent,
 		DraftsComponent,
 		DmpInfoCounterComponent,
-		DatasetInfoCounterComponent
+		DatasetInfoCounterComponent,
+		RecentEditedDatasetActivityComponent,
+		RecentEditedDmpActivityComponent
 	],
 	entryComponents: [
 		QuickWizardCreateAdd

dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css

@@ -1,4 +1,181 @@
-.grey {
+.latest-activity-title {
+	text-align: left;
+	font-weight: 300;
+	font-family: "Roboto", sans-serif;
+	font-size: 1.25rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+	padding-bottom: 1.2rem;
+}
+
+.dmp-card,
+.dataset-card {
+	min-width: 712px;
+	/* min-height: 308px; */
+	background: #ffffff 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #0000001a;
+	border-radius: 4px;
+	opacity: 1;
+	margin-top: 2.43rem;
+	margin-bottom: 1rem;
+}
+
+.remove-border-bottom ::ng-deep .mat-tab-header {
+	border-bottom: none;
+}
+
+input[type="text"] {
+	background: #fafafa 0% 0% no-repeat padding-box;
+	border: 1px solid #d1d1d1;
+	border-radius: 4px;
+	opacity: 1;
+	width: 347px;
+	height: 56px;
+	font-family: Arial, FontAwesome;
+	padding-left: 15px;
+}
+
+.edited-date {
+	text-align: left;
+	font-weight: 300;
+	font-family: "Roboto", sans-serif;
+	line-height: 2.4;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+}
+
+.dmp-label {
+	background: #129d99 0% 0% no-repeat padding-box;
+	border-radius: 4px 0px;
+	opacity: 1;
+	width: 67px;
+	height: 37px;
+	color: #ffffff;
+	line-height: 2.4;
+	opacity: 0.75;
+}
+
+.dataset-label {
+	width: 158px;
+	height: 37px;
+	background: #f7dd72 0% 0% no-repeat padding-box;
+	border-radius: 4px 0px;
+	text-align: left;
+	line-height: 2.8;
+	font-size: 0.875rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.75;
+}
+
+.dmp-title,
+.dataset-title {
+	text-align: left;
+	font-weight: 500;
+	font-family: "Roboto", sans-serif;
+	font-size: 1rem;
+	opacity: 0.81;
+	padding-top: 0.75rem;
+	padding-bottom: 0.55rem;
+	color: #212121;
+}
+
+.dataset-subtitle,
+.dmp-subtitle {
+	display: flex;
+	flex-direction: row;
+	text-align: left;
+	font-weight: 400;
+	font-family: "Roboto", sans-serif;
+	font-size: 0.875rem;
+	opacity: 1;
+	align-items: center;
+	color: #848484;
+}
+
+.dmp-title-draft {
+	text-align: left;
+	font-weight: 500;
+	font-family: "Roboto", sans-serif;
+	font-size: 1rem;
+	opacity: 0.81;
+	padding-top: 0.75rem;
+	padding-bottom: 0.55rem;
+	color: #f16868;
+}
+
+.icon-align {
+	display: inline-flex;
+	vertical-align: middle;
+	padding-bottom: 0.4rem;
+}
+
+.dataset-card-actions,
+.dmp-card-actions {
+	display: flex;
+	flex-direction: row;
+	border-top: 1px solid #dbdbdb;
+	line-height: 4;
+	color: #848484;
+}
+
+.dataset-card-actions a,
+.dmp-card-actions a {
+	color: #848484 !important;
+	text-decoration: none !important;
+}
+
+.dataset-card-actions a:hover,
+.dmp-card-actions a:hover {
+	color: #129d99 !important;
+}
+
+.dmp-dataset-descriptions-title {
+	color: #000000;
+	opacity: 0.6;
+	padding-top: 1.5rem;
+	padding-bottom: 0.8rem;
+}
+
+.dmp-dataset-descriptions-name {
+	color: #000000;
+	opacity: 0.6;
+	font-weight: 700;
+}
+
+.show-more {
+	color: black !important;
+}
+
+.show-more:hover {
+	color: #129d99 !important;
+}
+
+.btn-load-more {
+	border: 2px solid #212121;
+	border-radius: 30px;
+	opacity: 1;
+	width: 132px;
+	height: 40px;
+	margin-top: 4.125rem;
+}
+
+.btn-load-more:hover {
+	background-color: black;
+	color: white;
+}
+
+.draft {
+	color: #f16868;
+}
+
+.pointer {
+	cursor: pointer;
+}
+
+/* .grey {
   color: rgb(162, 162, 162);
 }
 
@@ -66,4 +243,4 @@ td:hover .draft-desc:after {
 
 .view-all:hover {
   color: rgb(46, 117, 182) !important;
-}
+} */

dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html

@@ -1,4 +1,69 @@
-<div class="card card-draft">
+<div *ngFor="let activity of datasetDrafts">
+	<div class="dataset-card">
+		<div>
+			<!-- <div [routerLink]="['../datasets/overview/' + activity.id]"> -->
+			<div class="d-flex flex-direction-row">
+				<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
+				<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
+			</div>
+			<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div>
+			<div class="dataset-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>{{'DATASET-LISTING.STATES.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">{{'DATASET-LISTING.COLUMNS.GRANT' | translate}}: {{activity.grant}}</span>
+			</div>
+			<div class="d-flex flex-direction-row pt-3 pb-3">
+				<div class="col-auto dataset-subtitle">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
+					<div class="col-auto dmp-label ml-4">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
+				</div>
+				<!-- <div class="col-auto dmp-label">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div> -->
+				<div class="col dmp-title">{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{activity.dmp}}</div>
+			</div>
+		</div>
+		<div class="dataset-card-actions">
+			<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DATASET-LISTING.ACTIONS.EXPORT' | translate}}</a>
+			<a class="col-auto border-right pointer"><span class="material-icons icon-align pr-2">group_add</span>{{'DATASET-LISTING.ACTIONS.INVITE-COLLABORATORS' | translate}}</a>
+			<a class="col-auto pointer" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
+			<!-- <a class="col-auto" [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode"><span class="material-icons icon-align pl-2">more_horiz</span></a> -->
+		</div>
+		<mat-menu #actionsMenu="matMenu">
+			<button mat-menu-item (click)="openDmpSearchDialogue(activity.id)" class="menu-item">
+				<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
+			</button>
+			<button mat-menu-item (click)="openConfirm(activity.id)" class="menu-item">
+				<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
+			</button>
+			<!-- <button mat-menu-item *ngIf="needsUpdate(activity)" class="menu-item" (click)="openUpdateDatasetProfileDialogue(activity.id);">
+						<mat-icon>update</mat-icon>
+						{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}
+					</button> -->
+		</mat-menu>
+
+		<mat-menu #exportMenu="matMenu" xPosition="before">
+			<button mat-menu-item (click)="downloadPDF(activity)">
+				<i class="fa fa-file-pdf-o pr-2"></i>
+				<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
+			</button>
+			<button mat-menu-item (click)="downloadDOCX(activity)">
+				<i class="fa fa-file-word-o pr-2"></i>
+				<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
+			</button>
+			<button mat-menu-item (click)="downloadXML(activity)">
+				<i class="fa fa-file-code-o pr-2"></i>
+				<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
+			</button>
+		</mat-menu>
+	</div>
+</div>
+<div class="d-flex justify-content-center">
+	<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+</div>
+
+<!-- <div class="card card-draft">
 	<div class="card-header card-header-plain">
 		<div class="card-desc">
 			<h4 class="card-title">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</h4>
@@ -16,9 +81,6 @@
 								<i class="material-icons-outlined grey">library_books</i>
 							</div>
 							<div class="col-md-10">
-								<!-- <div class="drafts-more-btn">
-									<i class="material-icons more-icon">more_horiz</i>
-								</div> -->
 								<div class="draft-title">
 									{{'GENERAL.NAMES.DATASET' | translate}}: {{ dataset.label }} {{'DRAFTS.FOR-DMP' | translate}} {{ dataset.dmp }} {{'DRAFTS.FOR-GRANT' | translate}} {{ dataset.grant }}
 								</div>
@@ -35,4 +97,4 @@
 			</tbody>
 		</table>
 	</div>
-</div>
+</div> -->

dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { DatasetService } from '../../../core/services/dataset/dataset.service';
 import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
 import { DatasetCriteria } from '../../../core/query/dataset/dataset-criteria';
@@ -7,32 +7,61 @@ import { AuthService } from '../../../core/services/auth/auth.service';
 import { RecentActivityType } from '../../../core/common/enum/recent-activity-type';
 import { Router} from '@angular/router';
 import { DmpStatus } from '../../../core/common/enum/dmp-status';
+import { Principal } from '@app/core/model/auth/principal';
+import { TranslateService } from '@ngx-translate/core';
+import { takeUntil } from 'rxjs/operators';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
+import { FormControl } from '@angular/forms';
+import { BaseComponent } from '@common/base/base.component';
+import { MatDialog } from '@angular/material';
+import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
+import { SnackBarNotificationLevel } from '@app/core/services/notification/ui-notification-service';
+import * as FileSaver from 'file-saver';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
 
 @Component({
 	selector: 'app-drafts',
 	templateUrl: './drafts.component.html',
 	styleUrls: ['./drafts.component.css']
 })
-export class DraftsComponent implements OnInit {
+export class DraftsComponent extends BaseComponent implements OnInit {
+
+	@Input() routerLink: string;
+	@Output() totalCountDraftDatasets: EventEmitter<any> = new EventEmitter();
+
 	datasetDrafts: DatasetListingModel[];
 	datasetDraftsTypeEnum = RecentActivityType;
-	@Input() routerLink: string;
 	status: number;
 
+	totalCount: number;
+	startIndex: number = 4;
+	pageSize: number = 5;
+
 	constructor(
 		private router: Router,
 		private datasetService: DatasetService,
-		private authentication: AuthService
-	) { }
+		private authentication: AuthService,
+		private language: TranslateService,
+		public dialog: MatDialog,
+		private datasetWizardService: DatasetWizardService,
+		public enumUtils: EnumUtils,
+		private uiNotificationService: UiNotificationService
+	) {
+		super();
+	}
 
 	ngOnInit() {
 		const fields: Array<string> = [];
 		fields.push('-modified');
-		const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 2, { fields: fields });
+		const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
 		dmpDataTableRequest.criteria = new DatasetCriteria();
 		dmpDataTableRequest.criteria.status = DmpStatus.Draft;
 		this.datasetService.getPaged(dmpDataTableRequest).subscribe(response => {
 			this.datasetDrafts = response.data;
+			this.totalCount = response.totalCount;
+			this.totalCountDraftDatasets.emit(this.totalCount);
 		});
 	}
 
@@ -63,4 +92,147 @@ export class DraftsComponent implements OnInit {
 		if (!this.isAuthenticated()) { return; }
 		this.router.navigate(['/datasets'], { queryParams: { status: 0 } });
 	}
+
+	roleDisplay(value: any) {
+		const principal: Principal = this.authentication.current();
+		let role: number;
+		if (principal) {
+			value.forEach(element => {
+				if (principal.id === element.id) {
+					role = element.role;
+				}
+			});
+		}
+		if (role === 0) {
+			return this.language.instant('DMP-LISTING.OWNER');
+		}
+		else if (role === 1) {
+			return this.language.instant('DMP-LISTING.MEMBER');
+		}
+		else {
+			return this.language.instant('DMP-LISTING.OWNER');
+		}
+	}
+
+	openDmpSearchDialogue(dataset: DatasetListingModel) {
+		const formControl = new FormControl();
+		const dialogRef = this.dialog.open(DatasetCopyDialogueComponent, {
+			width: '500px',
+			restoreFocus: false,
+			data: {
+				formControl: formControl,
+				datasetId: dataset.id,
+				datasetProfileId: dataset.profile,
+				datasetProfileExist: false,
+				confirmButton: this.language.instant('DATASET-WIZARD.DIALOGUE.COPY'),
+				cancelButton: this.language.instant('DATASET-WIZARD.DIALOGUE.CANCEL')
+			}
+		});
+
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
+				if (result && result.datasetProfileExist) {
+					const newDmpId = result.formControl.value.id
+					this.router.navigate(['/datasets/copy/' + result.datasetId], { queryParams: { newDmpId: newDmpId } });
+				}
+			});
+	}
+
+	openConfirm(id: string): void {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this.datasetWizardService.delete(id)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
+						complete => this.onCallbackSuccess(),
+						error => this.onCallbackError(error)
+					);
+			}
+		});
+	}
+
+	onCallbackSuccess(id?: String): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		id ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', id]); }) : this.router.navigate(['/datasets']);
+	}
+
+	onCallbackError(error: any) {
+		// this.setErrorModel(error.error);
+	}
+
+	downloadPDF(dataset: DatasetListingModel): void {
+		this.datasetWizardService.downloadPDF(dataset.id as string)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/pdf' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadDOCX(dataset: DatasetListingModel): void {
+		this.datasetWizardService.downloadDOCX(dataset.id as string)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/msword' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+
+	}
+
+	downloadXML(dataset: DatasetListingModel): void {
+		this.datasetWizardService.downloadXML(dataset.id as string)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	getFilenameFromContentDispositionHeader(header: string): string {
+		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
+
+		const matches = header.match(regex);
+		let filename: string;
+		for (let i = 0; i < matches.length; i++) {
+			const match = matches[i];
+			if (match.includes('filename="')) {
+				filename = match.substring(10, match.length - 1);
+				break;
+			} else if (match.includes('filename=')) {
+				filename = match.substring(9);
+				break;
+			}
+		}
+		return filename;
+	}
+
+	public loadMore() {
+		const fields: Array<string> = ["-modified"];
+		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
+
+		request.criteria = new DatasetCriteria();
+		request.criteria.like = "";
+
+		this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) { return []; }
+			this.datasetDrafts = this.datasetDrafts.concat(result.data);
+		});
+		this.startIndex = this.startIndex + this.pageSize;
+	}
 }

dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css

@@ -171,6 +171,9 @@ input[type="text"] {
 	color: #f16868;
 }
 
+.pointer {
+	cursor: pointer;
+}
 
 /* th {
   text-transform: uppercase;

dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html

@@ -1,51 +1,80 @@
 <div *ngIf="dmpActivities != null">
 	<div *ngFor="let activity of dmpActivities">
 		<!-- if dmp -->
-		<div *ngIf="true" class="dmp-card">
-			<div class="d-flex flex-direction-row">
-				<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
-				<div class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | date: "longDate" }}</div>
+		<div class="dmp-card">
+			<div [routerLink]="['../plans/overview/' + activity.id]" class="pointer">
+				<div class="d-flex flex-direction-row">
+					<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
+					<div class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | date: "longDate" }}</div>
+				</div>
+				<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{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-DATASETS' | 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">{{dataset.label}},</div>
+						<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last">{{dataset.label}}</div>
+					</div>
+				</div>
+				<a class="d-flex justify-content-center pb-3 show-more" *ngIf="activity.datasets.length > 3" [routerLink]="['../plans/overview/' + activity.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
 			</div>
-			<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{activity.label}}</div>
-			<div class="dmp-subtitle">
-				<span class="col-auto">Owner</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">Version 1</span>
-				<span>.</span>
-				<span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{activity.grant}}</span>
-			</div>
-			<div class="col-auto dmp-dataset-descriptions-title">Contained Dataset Descriptions (5)
-			</div>
-			<!-- <div *ngFor="; let i = index" > -->
-			<!-- <div *ngIf="i < 3"></div> -->
-			<div class="col-auto dmp-dataset-descriptions-name">Dataset description: Horizon 2020
-				for Grant DMP of Dataset description</div>
-			<!-- </div> -->
-			<a href="#" class="d-flex justify-content-center pt-3 pb-3 show-more"><u>Show
-					more</u></a>
 			<div class="dmp-card-actions">
-				<a href="#" class="col-auto border-right"><span
-						class="material-icons icon-align pr-2">open_in_new</span>Export</a>
-				<a href="#" class="col-auto border-right"><span
-						class="material-icons icon-align">add</span>Add dataset description</a>
-				<a href="#" class="col-auto border-right"><span
-						class="material-icons icon-align pr-2">group_add</span>Invite
-					collaborators</a>
-				<a href="#" class="col-auto border-right"><span
-						class="material-icons icon-align pr-2">filter_none</span>Clone</a>
-				<a href="#" class="col-auto"><span
-						class="material-icons icon-align pl-2">more_horiz</span></a>
+				<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" (click)="addDataset(activity.id)"><span class="material-icons icon-align">add</span>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</a>
+				<a class="col-auto border-right pointer" (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" (click)="cloneClicked(activity)"><span class="material-icons icon-align pr-2">filter_none</span>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</a>
+				<a class="col-auto pointer" [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-TYPES.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-TYPES.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-TYPES.XML' | translate}}</span>
+				</button>
+				<button mat-menu-item (click)="downloadJson(activity.id)">
+					<i class="fa fa-file-o pr-2"></i>
+					<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
+				</button>
+			</mat-menu>
+			<mat-menu #actionsMenu="matMenu" xPosition="before">
+				<button *ngIf="isUserOwner(activity)" mat-menu-item (click)="newVersion(activity.id, activity.label)">
+					<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
+				</button>
+				<button mat-menu-item (click)="viewVersions(activity.groupId, activity.label)">
+					<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+				</button>
+				<button mat-menu-item *ngIf="isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteClicked()" class="menu-item">
+					<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
+				</button>
+			</mat-menu>
 		</div>
 	</div>
+	<div class="d-flex justify-content-center">
+		<button type="button" class="btn-load-more">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+	</div>
 </div>
 
 <!-- if dataset -->
-<div *ngIf="true" class="dataset-card">
+<!-- <div *ngIf="true" class="dataset-card">
 	<div class="d-flex flex-direction-row">
 		<div class="col-auto dataset-label">Dataset Description</div>
 		<div class="col-auto ml-auto edited-date">Edited: 9 May 2020</div>
@@ -56,7 +85,6 @@
 		<span class="col-auto">Owner</span>
 		<span>.</span>
 		<span class="col-auto"><span class="material-icons icon-align">done</span>Finalized</span>
-		<!-- <span><span class="material-icons">create</span>Draft</span> -->
 		<span>.</span>
 		<span class="col-auto">Grant: NEANIAS Project</span>
 	</div>
@@ -67,16 +95,15 @@
 			DMP plan</div>
 	</div>
 	<div class="dataset-card-actions">
-		<a href="#" class="col-auto border-right"><span
-				class="material-icons icon-align pr-2">open_in_new</span>Export</a>
-		<a href="#" class="col-auto border-right"><span
-				class="material-icons icon-align pr-2">group_add</span>Invite
+		<a href="#" class="col-auto border-right"><span class="material-icons icon-align pr-2">open_in_new</span>Export</a>
+		<a href="#" class="col-auto border-right"><span class="material-icons icon-align pr-2">group_add</span>Invite
 			collaborators</a>
-		<a href="#" class="col-auto"><span
-				class="material-icons icon-align pl-2">more_horiz</span></a>
+		<a href="#" class="col-auto"><span class="material-icons icon-align pl-2">more_horiz</span></a>
 	</div>
-</div>
+</div> -->
 
+
+<!-- Old version of dashboard -->
 <!-- <div class="card">
 	<div class="card-header card-header-plain">
 		<div class="card-desc">

dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts

@@ -15,6 +15,11 @@ import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from '@ngx-translate/core';
 import * as FileSaver from 'file-saver';
 import { takeUntil } from 'rxjs/operators';
+import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
+import { DmpStatus } from '@app/core/common/enum/dmp-status';
+import { DatasetService } from '@app/core/services/dataset/dataset.service';
+import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
+import { Role } from '@app/core/common/enum/role';
 
 @Component({
 	selector: 'app-recent-edited-activity',
@@ -23,6 +28,8 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class RecentEditedActivityComponent extends BaseComponent implements OnInit {
 	dmpActivities: DmpListingModel[];
+	datasetActivities: DatasetListingModel[];
+	// allRecentActivities: RecentActivity[] = [];
 	recentActivityTypeEnum = RecentActivityType;
 	isDraft: boolean;
 
@@ -31,6 +38,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		public enumUtils: EnumUtils,
 		private authentication: AuthService,
 		private dmpService: DmpService,
+		private datasetService: DatasetService,
 		private language: TranslateService,
 		private dialog: MatDialog,
 		private uiNotificationService: UiNotificationService
@@ -48,14 +56,42 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 				.getPaged(dmpDataTableRequest, "listing")
 				.subscribe(response => {
 					this.dmpActivities = response.data;
+					// this.dmpActivities.forEach(dmpActivity => {
+					// 	const recentActivity: RecentActivity = {
+					// 		activityData: dmpActivity,
+					// 		activityType: RecentActivityType.Dmp
+					// 	};
+					// 	this.allRecentActivities.push(recentActivity)
+					// })
 				});
-		}
+
+			// const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
+			// datasetDataTableRequest.criteria = new DatasetCriteria();
+			// datasetDataTableRequest.criteria.like = "";
+			// this.datasetService
+			// 	.getPaged(datasetDataTableRequest)
+			// 	.subscribe(response => {
+			// 		this.datasetActivities = response.data;
+			// 		this.datasetActivities.forEach(datasetActivity => {
+			// 			const recentActivity: RecentActivity = {
+			// 				activityData: datasetActivity,
+			// 				activityType: RecentActivityType.Dataset
+			// 			};
+			// 			this.allRecentActivities.push(recentActivity)
+			// 		})
+			// 	});
+			}
 	}
 
 	public isAuthenticated(): boolean {
 		return !!this.authentication.current();
 	}
 
+	isUserOwner(activity: DmpListingModel): boolean {
+		const principal: Principal = this.authentication.current();
+		if (principal) return principal.id === activity.users.find(x => x.role === Role.Owner).id;
+	}
+
 	editClicked(dmp: DmpListingModel) {
 		this.router.navigate(['/plans/edit/' + dmp.id]);
 	}
@@ -87,6 +123,22 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		});
 	}
 
+	openShareDialog(rowId: any, rowName: any) {
+		const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {
+			// height: '250px',
+			// width: '700px',
+			restoreFocus: false,
+			data: {
+				dmpId: rowId,
+				dmpName: rowName
+			}
+		});
+	}
+
+	isDraftDmp(activity: DmpListingModel) {
+		return activity.status == DmpStatus.Draft;
+	}
+
 	onCallbackSuccess(): void {
 		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
 		this.router.navigate(['/plans']);
@@ -210,6 +262,22 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		return filename;
 	}
 
+	addDataset(activityId: String) {
+		this.router.navigate(['/datasets/new/' + activityId]);
+	}
+
+	newVersion(id: String, label: String) {
+		this.router.navigate(['/plans/new_version/' + id, { dmpLabel: label }]);
+	}
+
+	viewVersions(rowId: String, rowLabel: String, activity: DmpListingModel) {
+		if (activity.public && !this.isUserOwner) {
+			this.router.navigate(['/explore-plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
+		} else {
+			this.router.navigate(['/plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
+		}
+	}
+
 	// advancedClicked(dmp: DmpListingModel) {
 	// 	const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
 	// 		maxWidth: '500px',

dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.html

@@ -0,0 +1,68 @@
+
+<div *ngIf="datasetActivities != null">
+	<div *ngFor="let activity of datasetActivities">
+		<div class="dataset-card">
+			<div>
+			<!-- <div [routerLink]="['../datasets/overview/' + activity.id]"> -->
+				<div class="d-flex flex-direction-row">
+					<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
+					<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
+				</div>
+				<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div>
+				<div class="dataset-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>{{'DATASET-LISTING.STATES.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">{{'DATASET-LISTING.COLUMNS.GRANT' | translate}}: {{activity.grant}}</span>
+				</div>
+				<div class="d-flex flex-direction-row pt-3 pb-3">
+					<div class="col-auto dataset-subtitle">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
+						<div class="col-auto dmp-label ml-4">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
+					</div>
+					<!-- <div class="col-auto dmp-label">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div> -->
+					<div class="col dmp-title">{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{activity.dmp}}</div>
+				</div>
+			</div>
+			<div class="dataset-card-actions">
+				<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DATASET-LISTING.ACTIONS.EXPORT' | translate}}</a>
+				<a class="col-auto border-right pointer"><span class="material-icons icon-align pr-2">group_add</span>{{'DATASET-LISTING.ACTIONS.INVITE-COLLABORATORS' | translate}}</a>
+				<a class="col-auto pointer" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
+				<!-- <a class="col-auto" [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode"><span class="material-icons icon-align pl-2">more_horiz</span></a> -->
+			</div>
+			<mat-menu #actionsMenu="matMenu">
+				<button mat-menu-item (click)="openDmpSearchDialogue(activity.id)" class="menu-item">
+					<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
+				</button>
+				<button mat-menu-item (click)="openConfirm(activity.id)" class="menu-item">
+					<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
+				</button>
+				<!-- <button mat-menu-item *ngIf="needsUpdate(activity)" class="menu-item" (click)="openUpdateDatasetProfileDialogue(activity.id);">
+					<mat-icon>update</mat-icon>
+					{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}
+				</button> -->
+			</mat-menu>
+
+			<mat-menu #exportMenu="matMenu" xPosition="before">
+				<button mat-menu-item (click)="downloadPDF(activity)">
+					<i class="fa fa-file-pdf-o pr-2"></i>
+					<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
+				</button>
+				<button mat-menu-item (click)="downloadDOCX(activity)">
+					<i class="fa fa-file-word-o pr-2"></i>
+					<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
+				</button>
+				<button mat-menu-item (click)="downloadXML(activity)">
+					<i class="fa fa-file-code-o pr-2"></i>
+					<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
+				</button>
+			</mat-menu>
+		</div>
+	</div>
+	<div class="d-flex justify-content-center">
+		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+	</div>
+</div>
+

dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.scss

@@ -0,0 +1,176 @@
+.latest-activity-title {
+	text-align: left;
+	font-weight: 300;
+	font-family: "Roboto", sans-serif;
+	font-size: 1.25rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+	padding-bottom: 1.2rem;
+}
+
+.dmp-card,
+.dataset-card {
+	min-width: 712px;
+	/* min-height: 308px; */
+	background: #ffffff 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #0000001a;
+	border-radius: 4px;
+	opacity: 1;
+	margin-top: 2.43rem;
+	margin-bottom: 1rem;
+}
+
+.remove-border-bottom ::ng-deep .mat-tab-header {
+	border-bottom: none;
+}
+
+input[type="text"] {
+	background: #fafafa 0% 0% no-repeat padding-box;
+	border: 1px solid #d1d1d1;
+	border-radius: 4px;
+	opacity: 1;
+	width: 347px;
+	height: 56px;
+	font-family: Arial, FontAwesome;
+	padding-left: 15px;
+}
+
+.edited-date {
+	text-align: left;
+	font-weight: 300;
+	font-family: "Roboto", sans-serif;
+	line-height: 2.4;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+}
+
+.dmp-label {
+	background: #129d99 0% 0% no-repeat padding-box;
+	border-radius: 4px 0px;
+	opacity: 1;
+	width: 67px;
+	height: 37px;
+	color: #ffffff;
+	line-height: 2.4;
+	opacity: 0.75;
+}
+
+.dataset-label {
+	width: 158px;
+	height: 37px;
+	background: #f7dd72 0% 0% no-repeat padding-box;
+	border-radius: 4px 0px;
+	text-align: left;
+	line-height: 2.8;
+	font-size: 0.875rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.75;
+}
+
+.dmp-title,
+.dataset-title {
+	text-align: left;
+	font-weight: 500;
+	font-family: "Roboto", sans-serif;
+	font-size: 1rem;
+	opacity: 0.81;
+	padding-top: 0.75rem;
+	padding-bottom: 0.55rem;
+	color: #212121;
+}
+
+.dataset-subtitle,
+.dmp-subtitle {
+	display: flex;
+	flex-direction: row;
+	text-align: left;
+	font-weight: 400;
+	font-family: "Roboto", sans-serif;
+	font-size: 0.875rem;
+	opacity: 1;
+	align-items: center;
+	color: #848484;
+}
+
+.dmp-title-draft {
+	text-align: left;
+	font-weight: 500;
+	font-family: "Roboto", sans-serif;
+	font-size: 1rem;
+	opacity: 0.81;
+	padding-top: 0.75rem;
+	padding-bottom: 0.55rem;
+	color: #f16868;
+}
+
+.icon-align {
+	display: inline-flex;
+	vertical-align: middle;
+	padding-bottom: 0.4rem;
+}
+
+.dataset-card-actions,
+.dmp-card-actions {
+	display: flex;
+	flex-direction: row;
+	border-top: 1px solid #dbdbdb;
+	line-height: 4;
+	color: #848484;
+}
+
+.dataset-card-actions a,
+.dmp-card-actions a {
+	color: #848484 !important;
+	text-decoration: none !important;
+}
+
+.dataset-card-actions a:hover,
+.dmp-card-actions a:hover {
+	color: #129d99 !important;
+}
+
+.dmp-dataset-descriptions-title {
+	color: #000000;
+	opacity: 0.6;
+	padding-top: 1.5rem;
+	padding-bottom: 0.8rem;
+}
+
+.dmp-dataset-descriptions-name {
+	color: #000000;
+	opacity: 0.6;
+	font-weight: 700;
+}
+
+.show-more {
+	color: black !important;
+}
+
+.show-more:hover {
+	color: #129d99 !important;
+}
+
+.btn-load-more {
+	border: 2px solid #212121;
+	border-radius: 30px;
+	opacity: 1;
+	width: 132px;
+	height: 40px;
+	margin-top: 4.125rem;
+}
+
+.btn-load-more:hover {
+	background-color: black;
+	color: white;
+}
+
+.draft {
+	color: #f16868;
+}
+
+.pointer {
+	cursor: pointer;
+}

dmp-frontend/src/app/ui/dashboard/recent-edited-dataset-activity/recent-edited-dataset-activity.component.ts

@@ -0,0 +1,245 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
+import { DatasetService } from '@app/core/services/dataset/dataset.service';
+import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
+import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
+import { AuthService } from '@app/core/services/auth/auth.service';
+import { BaseComponent } from '@common/base/base.component';
+import { Principal } from '@app/core/model/auth/principal';
+import { TranslateService } from '@ngx-translate/core';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { FormControl } from '@angular/forms';
+import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
+import { MatDialog } from '@angular/material';
+import { takeUntil } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
+import * as FileSaver from 'file-saver';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
+import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { SnackBarNotificationLevel } from '@common/modules/notification/ui-notification-service';
+import { DatasetStatus } from '@app/core/common/enum/dataset-status';
+
+@Component({
+	selector: 'app-recent-edited-dataset-activity',
+	templateUrl: './recent-edited-dataset-activity.component.html',
+	styleUrls: ['./recent-edited-dataset-activity.component.scss']
+})
+export class RecentEditedDatasetActivityComponent extends BaseComponent implements OnInit {
+
+	@Output() totalCountDatasets: EventEmitter<any> = new EventEmitter();
+
+	datasetActivities: DatasetListingModel[];
+	totalCount: number;
+	startIndex: number = 4;
+	pageSize: number = 5;
+	// publicMode = false;
+
+	constructor(
+		private authentication: AuthService,
+		private datasetService: DatasetService,
+		private language: TranslateService,
+		public enumUtils: EnumUtils,
+		public dialog: MatDialog,
+		public router: Router,
+		private datasetWizardService: DatasetWizardService,
+		private uiNotificationService: UiNotificationService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		if (this.isAuthenticated()) {
+			const fields: Array<string> = ["-modified"];
+			const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
+			datasetDataTableRequest.criteria = new DatasetCriteria();
+			datasetDataTableRequest.criteria.like = "";
+			this.datasetService
+				.getPaged(datasetDataTableRequest)
+				.subscribe(response => {
+					this.datasetActivities = response.data;
+					this.totalCount = response.totalCount;
+					this.totalCountDatasets.emit(this.totalCount);
+				});
+		}
+	}
+
+	public loadMore() {
+		const fields: Array<string> = ["-modified"];
+		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
+
+		request.criteria = new DatasetCriteria();
+		request.criteria.like = "";
+
+		this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) { return []; }
+			this.datasetActivities = this.datasetActivities.concat(result.data);
+		});
+		this.startIndex = this.startIndex + this.pageSize;
+	}
+
+	public isAuthenticated(): boolean {
+		return !!this.authentication.current();
+	}
+
+	roleDisplay(value: any) {
+		const principal: Principal = this.authentication.current();
+		let role: number;
+		if (principal) {
+			value.forEach(element => {
+				if (principal.id === element.id) {
+					role = element.role;
+				}
+			});
+		}
+		if (role === 0) {
+			return this.language.instant('DMP-LISTING.OWNER');
+		}
+		else if (role === 1) {
+			return this.language.instant('DMP-LISTING.MEMBER');
+		}
+		else {
+			return this.language.instant('DMP-LISTING.OWNER');
+		}
+	}
+
+	openDmpSearchDialogue(dataset: DatasetListingModel) {
+		const formControl = new FormControl();
+		const dialogRef = this.dialog.open(DatasetCopyDialogueComponent, {
+			width: '500px',
+			restoreFocus: false,
+			data: {
+				formControl: formControl,
+				datasetId: dataset.id,
+				datasetProfileId: dataset.profile,
+				datasetProfileExist: false,
+				confirmButton: this.language.instant('DATASET-WIZARD.DIALOGUE.COPY'),
+				cancelButton: this.language.instant('DATASET-WIZARD.DIALOGUE.CANCEL')
+			}
+		});
+
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed))
+			.subscribe(result => {
+				if (result && result.datasetProfileExist) {
+					const newDmpId = result.formControl.value.id
+					this.router.navigate(['/datasets/copy/' + result.datasetId], { queryParams: { newDmpId: newDmpId } });
+				}
+			});
+	}
+
+	openConfirm(id: string): void {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this.datasetWizardService.delete(id)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
+						complete => this.onCallbackSuccess(),
+						error => this.onCallbackError(error)
+					);
+			}
+		});
+	}
+
+	getFilenameFromContentDispositionHeader(header: string): string {
+		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
+
+		const matches = header.match(regex);
+		let filename: string;
+		for (let i = 0; i < matches.length; i++) {
+			const match = matches[i];
+			if (match.includes('filename="')) {
+				filename = match.substring(10, match.length - 1);
+				break;
+			} else if (match.includes('filename=')) {
+				filename = match.substring(9);
+				break;
+			}
+		}
+		return filename;
+	}
+
+	downloadPDF(dataset: DatasetListingModel): void {
+		this.datasetWizardService.downloadPDF(dataset.id as string)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/pdf' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadDOCX(dataset: DatasetListingModel): void {
+		this.datasetWizardService.downloadDOCX(dataset.id as string)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/msword' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+
+	}
+
+	downloadXML(dataset: DatasetListingModel): void {
+		this.datasetWizardService.downloadXML(dataset.id as string)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	onCallbackSuccess(id?: String): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		id ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', id]); }) : this.router.navigate(['/datasets']);
+	}
+
+	onCallbackError(error: any) {
+		this.setErrorModel(error.error);
+	}
+
+	openUpdateDatasetProfileDialogue(id: string) {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('DATASET-EDITOR.VERSION-DIALOG.QUESTION'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: false
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this.uiNotificationService.snackBarNotification(this.language.instant('DATASET-WIZARD.MESSAGES.SUCCESS-UPDATE-DATASET-PROFILE'), SnackBarNotificationLevel.Success);
+				this.router.navigate(['/datasets/profileupdate/' + id]);
+			}
+		});
+	}
+
+	public setErrorModel(validationErrorModel: ValidationErrorModel) {
+	}
+
+	needsUpdate(activity: DatasetListingModel) {
+		if (activity.isProfileLatestVersion || (activity.status === DatasetStatus.Finalized)
+			|| (activity.isProfileLatestVersion == undefined && activity.status == undefined)) {
+			return false;
+		}
+		else {
+			return true;
+		}
+	}
+}

dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.css

@@ -0,0 +1,243 @@
+.latest-activity-title {
+	text-align: left;
+	font-weight: 300;
+	font-family: "Roboto", sans-serif;
+	font-size: 1.25rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+	padding-bottom: 1.2rem;
+}
+
+.dmp-card,
+.dataset-card {
+	min-width: 712px;
+	/* min-height: 308px; */
+	background: #ffffff 0% 0% no-repeat padding-box;
+	box-shadow: 0px 3px 6px #0000001a;
+	border-radius: 4px;
+	opacity: 1;
+	margin-top: 2.43rem;
+	margin-bottom: 1rem;
+}
+
+.remove-border-bottom ::ng-deep .mat-tab-header {
+	border-bottom: none;
+}
+
+input[type="text"] {
+	background: #fafafa 0% 0% no-repeat padding-box;
+	border: 1px solid #d1d1d1;
+	border-radius: 4px;
+	opacity: 1;
+	width: 347px;
+	height: 56px;
+	font-family: Arial, FontAwesome;
+	padding-left: 15px;
+}
+
+.edited-date {
+	text-align: left;
+	font-weight: 300;
+	font-family: "Roboto", sans-serif;
+	line-height: 2.4;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+}
+
+.dmp-label {
+	background: #129d99 0% 0% no-repeat padding-box;
+	border-radius: 4px 0px;
+	opacity: 1;
+	width: 67px;
+	height: 37px;
+	color: #ffffff;
+	line-height: 2.4;
+	opacity: 0.75;
+}
+
+.dataset-label {
+	width: 158px;
+	height: 37px;
+	background: #f7dd72 0% 0% no-repeat padding-box;
+	border-radius: 4px 0px;
+	text-align: left;
+	line-height: 2.8;
+	font-size: 0.875rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.75;
+}
+
+.dmp-title,
+.dataset-title {
+	text-align: left;
+	font-weight: 500;
+	font-family: "Roboto", sans-serif;
+	font-size: 1rem;
+	opacity: 0.81;
+	padding-top: 0.75rem;
+	padding-bottom: 0.55rem;
+	color: #212121;
+}
+
+.dataset-subtitle,
+.dmp-subtitle {
+	display: flex;
+	flex-direction: row;
+	text-align: left;
+	font-weight: 400;
+	font-family: "Roboto", sans-serif;
+	font-size: 0.875rem;
+	opacity: 1;
+	align-items: center;
+	color: #848484;
+}
+
+.dmp-title-draft {
+	text-align: left;
+	font-weight: 500;
+	font-family: "Roboto", sans-serif;
+	font-size: 1rem;
+	opacity: 0.81;
+	padding-top: 0.75rem;
+	padding-bottom: 0.55rem;
+	color: #f16868;
+}
+
+.icon-align {
+	display: inline-flex;
+	vertical-align: middle;
+	padding-bottom: 0.4rem;
+}
+
+.dataset-card-actions,
+.dmp-card-actions {
+	display: flex;
+	flex-direction: row;
+	border-top: 1px solid #dbdbdb;
+	line-height: 4;
+	color: #848484;
+}
+
+.dataset-card-actions a,
+.dmp-card-actions a {
+	color: #848484 !important;
+	text-decoration: none !important;
+}
+
+.dataset-card-actions a:hover,
+.dmp-card-actions a:hover {
+	color: #129d99 !important;
+}
+
+.dmp-dataset-descriptions-title {
+	color: #000000;
+	opacity: 0.6;
+	padding-top: 1.5rem;
+	padding-bottom: 0.8rem;
+}
+
+.dmp-dataset-descriptions-name {
+	color: #000000;
+	opacity: 0.6;
+	font-weight: 700;
+}
+
+.show-more {
+	color: black !important;
+}
+
+.show-more:hover {
+	color: #129d99 !important;
+}
+
+.btn-load-more {
+	border: 2px solid #212121;
+	border-radius: 30px;
+	opacity: 1;
+	width: 132px;
+	height: 40px;
+	margin-top: 4.125rem;
+}
+
+.btn-load-more:hover {
+	background-color: black;
+	color: white;
+}
+
+.draft {
+	color: #f16868;
+}
+
+.pointer {
+	cursor: pointer;
+}
+
+/* th {
+  text-transform: uppercase;
+}
+
+a {
+  color: #212529;
+}
+
+.table-row {
+  cursor: pointer;
+  display: table-row;
+}
+
+.is-public {
+  padding-left: 5px;
+  padding-right: 5px;
+  border: 1px solid #00b29f3b;
+  color: #00b29f;
+  background-color: #00b29f0f;
+  border-radius: 10em;
+  text-align: center;
+}
+
+.template-name {
+  padding-left: 0.5em;
+  border: 1px solid rgb(218, 227, 243);
+  color: rgb(43, 104, 209);
+  background-color: rgb(236, 241, 249);
+  border-radius: 10em;
+  text-align: center;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip {
+  padding: 0.1em 1em;
+  margin-bottom: 1em;
+  margin-left: 2.5em;
+  margin-right: 2.5em;
+  border-radius: 10em;
+  background-color: #0d7489;
+  color: #fff;
+  text-transform: uppercase;
+  text-align: center;
+  font-weight: 500;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mat-icon-button :hover {
+  color: rgb(120, 173, 220);
+}
+
+.view-all {
+  margin-left: auto;
+  margin-bottom: 0px !important;
+  color: #6aa4d9;
+}
+
+.view-all:hover {
+  color: rgb(46, 117, 182) !important;
+} */

dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html

@@ -0,0 +1,208 @@
+<div *ngIf="dmpActivities != null">
+	<div *ngFor="let activity of dmpActivities">
+		<!-- if dmp -->
+		<div class="dmp-card">
+			<div [routerLink]="['../plans/overview/' + activity.id]" class="pointer">
+				<div class="d-flex flex-direction-row">
+					<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
+					<div class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | date: "longDate" }}</div>
+				</div>
+				<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{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-DATASETS' | 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">{{dataset.label}},</div>
+						<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last">{{dataset.label}}</div>
+					</div>
+				</div>
+				<a class="d-flex justify-content-center pb-3 show-more" *ngIf="activity.datasets.length > 3" [routerLink]="['../plans/overview/' + activity.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
+			</div>
+			<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" (click)="addDataset(activity.id)"><span class="material-icons icon-align">add</span>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</a>
+				<a class="col-auto border-right pointer" (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" (click)="cloneClicked(activity)"><span class="material-icons icon-align pr-2">filter_none</span>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</a>
+				<a class="col-auto pointer" [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-TYPES.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-TYPES.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-TYPES.XML' | translate}}</span>
+				</button>
+				<button mat-menu-item (click)="downloadJson(activity.id)">
+					<i class="fa fa-file-o pr-2"></i>
+					<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
+				</button>
+			</mat-menu>
+			<mat-menu #actionsMenu="matMenu" xPosition="before">
+				<button *ngIf="isUserOwner(activity)" mat-menu-item (click)="newVersion(activity.id, activity.label)">
+					<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
+				</button>
+				<button mat-menu-item (click)="viewVersions(activity.groupId, activity.label)">
+					<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
+				</button>
+				<button mat-menu-item *ngIf="isDraftDmp(activity) && isUserOwner(activity)" (click)="deleteClicked()" class="menu-item">
+					<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
+				</button>
+			</mat-menu>
+		</div>
+	</div>
+	<div class="d-flex justify-content-center">
+		<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+	</div>
+</div>
+
+<!-- if dataset -->
+<!-- <div *ngIf="true" class="dataset-card">
+	<div class="d-flex flex-direction-row">
+		<div class="col-auto dataset-label">Dataset Description</div>
+		<div class="col-auto ml-auto edited-date">Edited: 9 May 2020</div>
+	</div>
+	<div class="col-auto dataset-title">Dataset description: Horizon 2020 for Grant DMP of
+		Dataset description</div>
+	<div class="dataset-subtitle">
+		<span class="col-auto">Owner</span>
+		<span>.</span>
+		<span class="col-auto"><span class="material-icons icon-align">done</span>Finalized</span>
+		<span>.</span>
+		<span class="col-auto">Grant: NEANIAS Project</span>
+	</div>
+	<div class="d-flex flex-direction-row pt-3 pb-3">
+		<div class="col-auto dataset-subtitle">Part of</div>
+		<div class="col-auto dmp-label">DMP</div>
+		<div class="col-auto dmp-title">DMP for: Horizon 2020 for Grant DMP of the NEANIAS
+			DMP plan</div>
+	</div>
+	<div class="dataset-card-actions">
+		<a href="#" class="col-auto border-right"><span class="material-icons icon-align pr-2">open_in_new</span>Export</a>
+		<a href="#" class="col-auto border-right"><span class="material-icons icon-align pr-2">group_add</span>Invite
+			collaborators</a>
+		<a href="#" class="col-auto"><span class="material-icons icon-align pl-2">more_horiz</span></a>
+	</div>
+</div> -->
+
+
+<!-- Old version of dashboard -->
+<!-- <div class="card">
+	<div class="card-header card-header-plain">
+		<div class="card-desc">
+			<h4 class="card-title">
+				{{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}}
+			</h4>
+		</div>
+		<a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['/plans/']">
+			{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
+	</div>
+	<div class="card-body table-responsive">
+		<table class="table table-hover">
+			<thead class="text-default">
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.GRANT' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
+				<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.EDITED' | translate }}</th>
+				<th></th>
+			</thead>
+			<tbody *ngIf="dmpActivities != null">
+				<a *ngFor="let activity of dmpActivities" class="table-row" [routerLink]="['../plans/overview/' + activity.id]">
+					<td>{{ activity.label }}</td>
+					<td>
+						<div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name">
+							{{ activity.profile }}
+						</div>
+						<div *ngIf="!(activity.profile)" class="template-name">--</div>
+					</td>
+					<td>{{ activity.grant }}</td>
+					<td>{{ roleDisplay(activity.users)}}</td>
+					<td>{{ activity.organisations }}</td>
+					<td *ngIf="activity.status === 1 && activity.public === true">
+						<div class="is-public">
+							{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}
+						</div>
+					</td>
+					<td *ngIf="activity.status === 1 && activity.public === false" class="text-center">
+						{{ enumUtils.toDmpStatusString(activity.status) }}
+					</td>
+					<td *ngIf="activity.status === 0" class="text-center">
+						{{ enumUtils.toDmpStatusString(activity.status) }}
+					</td>
+					<td>
+						{{ activity.modifiedTime | date: "shortDate" }}
+					</td>
+					<td>
+						<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.preventDefault(); $event.stopPropagation();">
+							<mat-icon class="more-horiz">more_horiz</mat-icon>
+						</button>
+						<mat-menu #actionsMenu="matMenu">
+							<button mat-menu-item (click)="editClicked(activity)" class="menu-item">
+								<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
+							</button>
+							<button mat-menu-item (click)="cloneClicked(activity)" class="menu-item">
+								<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
+							</button>
+							<button mat-menu-item (click)="deleteClicked(activity)" class="menu-item">
+								<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
+							</button>
+							<button mat-menu-item [matMenuTriggerFor]="exportMethod" class="menu-item">
+								<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.EXP-AS' | translate }}
+							</button>
+						</mat-menu>
+						<mat-menu #exportMethod>
+							<button mat-menu-item (click)="downloadPDF(activity.id)">
+								<i class="fa fa-file-pdf-o pr-2"></i>
+								<span>{{'GENERAL.FILE-TYPES.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-TYPES.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-TYPES.XML' | translate}}</span>
+							</button>
+							<button mat-menu-item (click)="downloadJson(activity.id)">
+								<i class="fa fa-file-o pr-2"></i>
+								<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
+							</button>
+						</mat-menu>
+					</td>
+				</a>
+			</tbody>
+			<tbody *ngIf="dmpActivities == null">
+				<tr>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+					<td></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div> -->

dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts

@@ -0,0 +1,328 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { RecentActivityType } from '@app/core/common/enum/recent-activity-type';
+import { Principal } from '@app/core/model/auth/principal';
+import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
+import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
+import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
+import { AuthService } from '@app/core/services/auth/auth.service';
+import { DmpService } from '@app/core/services/dmp/dmp.service';
+import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
+import { BaseComponent } from '@common/base/base.component';
+import { TranslateService } from '@ngx-translate/core';
+import * as FileSaver from 'file-saver';
+import { takeUntil } from 'rxjs/operators';
+import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
+import { DmpStatus } from '@app/core/common/enum/dmp-status';
+import { DatasetService } from '@app/core/services/dataset/dataset.service';
+import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
+import { Role } from '@app/core/common/enum/role';
+
+@Component({
+	selector: 'app-recent-edited-dmp-activity',
+	templateUrl: './recent-edited-dmp-activity.component.html',
+	styleUrls: ['./recent-edited-dmp-activity.component.css']
+})
+export class RecentEditedDmpActivityComponent extends BaseComponent implements OnInit {
+
+	@Output() totalCountDmps: EventEmitter<any> = new EventEmitter();
+
+	dmpActivities: DmpListingModel[];
+	datasetActivities: DatasetListingModel[];
+	// allRecentActivities: RecentActivity[] = [];
+	recentActivityTypeEnum = RecentActivityType;
+	isDraft: boolean;
+
+	totalCount: number;
+	startIndex: number = 4;
+	pageSize: number = 5;
+
+	constructor(
+		private router: Router,
+		public enumUtils: EnumUtils,
+		private authentication: AuthService,
+		private dmpService: DmpService,
+		private datasetService: DatasetService,
+		private language: TranslateService,
+		private dialog: MatDialog,
+		private uiNotificationService: UiNotificationService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		if (this.isAuthenticated()) {
+			const fields: Array<string> = ["-modified"];
+			const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, 5, { fields: fields });
+			dmpDataTableRequest.criteria = new DmpCriteria();
+			dmpDataTableRequest.criteria.like = "";
+			this.dmpService
+				.getPaged(dmpDataTableRequest, "listing")
+				.subscribe(response => {
+					this.dmpActivities = response.data;
+					this.totalCount = response.totalCount;
+					this.totalCountDmps.emit(this.totalCount);
+					// this.dmpActivities.forEach(dmpActivity => {
+					// 	const recentActivity: RecentActivity = {
+					// 		activityData: dmpActivity,
+					// 		activityType: RecentActivityType.Dmp
+					// 	};
+					// 	this.allRecentActivities.push(recentActivity)
+					// })
+				});
+
+			// const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
+			// datasetDataTableRequest.criteria = new DatasetCriteria();
+			// datasetDataTableRequest.criteria.like = "";
+			// this.datasetService
+			// 	.getPaged(datasetDataTableRequest)
+			// 	.subscribe(response => {
+			// 		this.datasetActivities = response.data;
+			// 		this.datasetActivities.forEach(datasetActivity => {
+			// 			const recentActivity: RecentActivity = {
+			// 				activityData: datasetActivity,
+			// 				activityType: RecentActivityType.Dataset
+			// 			};
+			// 			this.allRecentActivities.push(recentActivity)
+			// 		})
+			// 	});
+			}
+	}
+
+	public isAuthenticated(): boolean {
+		return !!this.authentication.current();
+	}
+
+	isUserOwner(activity: DmpListingModel): boolean {
+		const principal: Principal = this.authentication.current();
+		if (principal) return principal.id === activity.users.find(x => x.role === Role.Owner).id;
+	}
+
+	editClicked(dmp: DmpListingModel) {
+		this.router.navigate(['/plans/edit/' + dmp.id]);
+	}
+
+	cloneClicked(dmp: DmpListingModel) {
+		this.router.navigate(['/plans/clone/' + dmp.id]);
+	}
+
+	deleteClicked(dmp: DmpListingModel) {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this.dmpService.delete(dmp.id)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(
+						complete => { this.onCallbackSuccess() },
+						error => this.onDeleteCallbackError(error)
+					);
+			}
+		});
+	}
+
+	openShareDialog(rowId: any, rowName: any) {
+		const dialogRef = this.dialog.open(DmpInvitationDialogComponent, {
+			// height: '250px',
+			// width: '700px',
+			restoreFocus: false,
+			data: {
+				dmpId: rowId,
+				dmpName: rowName
+			}
+		});
+	}
+
+	isDraftDmp(activity: DmpListingModel) {
+		return activity.status == DmpStatus.Draft;
+	}
+
+	onCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		this.router.navigate(['/plans']);
+	}
+
+	onDeleteCallbackError(error) {
+		this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
+	}
+
+	redirect(id: string, type: RecentActivityType) {
+		switch (type) {
+			case RecentActivityType.Grant: {
+				this.router.navigate(["grants/edit/" + id]);
+				return;
+			}
+			case RecentActivityType.Dataset: {
+				this.router.navigate(["datasets/edit/" + id]);
+				return;
+			}
+			case RecentActivityType.Dmp: {
+				this.router.navigate(["plans/overview/" + id]);
+				return;
+			}
+			default:
+				throw new Error("Unsupported Activity Type ");
+		}
+	}
+
+	// navigateToUrl() {
+	// 	this.router.navigate(["plans/"]);
+	// }
+
+	roleDisplay(value: any) {
+		const principal: Principal = this.authentication.current();
+		let role: number;
+		if (principal) {
+			value.forEach(element => {
+				if (principal.id === element.id) {
+					role = element.role;
+				}
+			});
+		}
+		if (role === 0) {
+			return this.language.instant('DMP-LISTING.OWNER');
+		}
+		else if (role === 1) {
+			return this.language.instant('DMP-LISTING.MEMBER');
+		}
+		else {
+			return this.language.instant('DMP-LISTING.OWNER');
+		}
+	}
+
+	// dmpProfileDisplay(value: any) {
+	// 	if (value != null) {
+	// 		return value;
+	// 	}
+	// 	else {
+	// 		return "--";
+	// 	}
+	// }
+
+	downloadXml(id: string) {
+		this.dmpService.downloadXML(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/xml' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadDocx(id: string) {
+		this.dmpService.downloadDocx(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/msword' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadPDF(id: string) {
+		this.dmpService.downloadPDF(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/pdf' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+
+				FileSaver.saveAs(blob, filename);
+			});
+	}
+
+	downloadJson(id: string) {
+		this.dmpService.downloadJson(id)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'application/json' });
+				const filename = this.getFilenameFromContentDispositionHeader(response.headers.get('Content-Disposition'));
+				FileSaver.saveAs(blob, filename);
+			})
+	}
+
+	getFilenameFromContentDispositionHeader(header: string): string {
+		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
+
+		const matches = header.match(regex);
+		let filename: string;
+		for (let i = 0; i < matches.length; i++) {
+			const match = matches[i];
+			if (match.includes('filename="')) {
+				filename = match.substring(10, match.length - 1);
+				break;
+			} else if (match.includes('filename=')) {
+				filename = match.substring(9);
+				break;
+			}
+		}
+		return filename;
+	}
+
+	addDataset(activityId: String) {
+		this.router.navigate(['/datasets/new/' + activityId]);
+	}
+
+	newVersion(id: String, label: String) {
+		this.router.navigate(['/plans/new_version/' + id, { dmpLabel: label }]);
+	}
+
+	viewVersions(rowId: String, rowLabel: String, activity: DmpListingModel) {
+		if (activity.public && !this.isUserOwner) {
+			this.router.navigate(['/explore-plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
+		} else {
+			this.router.navigate(['/plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
+		}
+	}
+
+	public loadMore() {
+		const fields: Array<string> = ["-modified"];
+		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
+
+		request.criteria = new DmpCriteria();
+		request.criteria.like = "";
+
+		this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (!result) { return []; }
+			this.dmpActivities = this.dmpActivities.concat(result.data);
+		});
+		this.startIndex = this.startIndex + this.pageSize;
+	}
+
+	// advancedClicked(dmp: DmpListingModel) {
+	// 	const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
+	// 		maxWidth: '500px',
+	// 		data: {
+	// 			message: "Download as:",
+	// 			XMLButton: "XML",
+	// 			documentButton: "Document",
+	// 			pdfButton: "PDF",
+	// 			jsonButton: "JSON"
+
+	// 		}
+	// 	});
+	// 	dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+	// 		if (result == "pdf") {
+	// 			this.downloadPDF(dmp.id);
+	// 		} else if (result == "xml") {
+	// 			this.downloadXml(dmp.id);
+	// 		} else if (result == "doc") {
+	// 			this.downloadDocx(dmp.id);
+	// 		} else if (result == "json") {
+	// 			this.downloadJson(dmp.id)
+	// 		}
+	// 	});
+	// }
+}

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonUiModule } from '@common/ui/common-ui.module';
+
+import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
+import { CommonFormsModule } from '@common/forms/common-forms.module';
+import { DatasetCopyDialogueComponent } from './dataset-copy-dialogue.component';
+
+@NgModule({
+	imports: [
+		CommonUiModule,
+		CommonFormsModule,
+		AutoCompleteModule
+	],
+	declarations: [
+		DatasetCopyDialogueComponent
+	],
+	entryComponents: [
+		DatasetCopyDialogueComponent
+	]
+})
+export class DatasetCopyDialogModule { }

dmp-frontend/src/app/ui/dataset/dataset.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 import { ExportMethodDialogModule } from '@app/library/export-method-dialog/export-method-dialog.module';
 import { UrlListingModule } from '@app/library/url-listing/url-listing.module';
-import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
 import { DatasetEditorComponent } from '@app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component';
 import { DatasetWizardComponent } from '@app/ui/dataset/dataset-wizard/dataset-wizard.component';
 import { DatasetExternalReferencesEditorComponent } from '@app/ui/dataset/dataset-wizard/external-references/dataset-external-references-editor.component';
@@ -23,6 +22,7 @@ import { FormValidationErrorsDialogModule } from '@common/forms/form-validation-
 import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/confirmation-dialog.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
+import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
 
 @NgModule({
 	imports: [
@@ -37,7 +37,8 @@ import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
 		TableOfContentsModule,
 		AngularStickyThingsModule,
 		DatasetRoutingModule,
-		FormValidationErrorsDialogModule
+		FormValidationErrorsDialogModule,
+		DatasetCopyDialogModule
 	],
 	declarations: [
 		DatasetListingComponent,
@@ -49,7 +50,6 @@ import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
 		DatasetExternalDatasetDialogEditorComponent,
 		DatasetExternalRegistryDialogEditorComponent,
 		DatasetExternalServiceDialogEditorComponent,
-		DatasetCopyDialogueComponent,
 		DatasetUploadDialogue,
 		DatasetListingItemComponent
 	],
@@ -58,7 +58,6 @@ import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
 		DatasetExternalDatasetDialogEditorComponent,
 		DatasetExternalRegistryDialogEditorComponent,
 		DatasetExternalServiceDialogEditorComponent,
-		DatasetCopyDialogueComponent,
 		DatasetUploadDialogue
 	]
 })

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts

@@ -62,7 +62,6 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 	}
 
 	ngOnInit() {
-		console.log(this.router.url);
 		this.isPublic = this.router.url.startsWith('/explore-plans');
 		if (!this.isPublic && isNullOrUndefined(this.authService.current())) {
 			this.router.navigateByUrl("/explore-plans");

dmp-frontend/src/app/ui/grant/listing/criteria/grant-criteria.component.html

@@ -20,10 +20,8 @@
 				<mat-datepicker #periodEndPicker></mat-datepicker>
 				<mat-error>{{'GENERAL.VALIDATION.GRANT-START-AFTER-END' | translate}}</mat-error>
 			</mat-form-field>
-
-
 			<mat-form-field class="col-10 filter-category">
-				<mat-select placeholder=" {{ 'CRITERIA.GRANTS.GRANT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.grantStateType" (ngModelChange)="controlModified()">
+				<mat-select placeholder=" {{ 'CRITERIA.GRANTS.GRANT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.grantStateType" (ngModelChange)="controlModified()" required>
 					<mat-option [value]="null">
 						{{ 'CRITERIA.GRANTS.TYPES.NONE' | translate}}
 					</mat-option>

dmp-frontend/src/app/ui/guest/guest.component.ts

@@ -54,7 +54,6 @@ export class GuestComponent implements OnInit {
     const dialogRef = this.dialog.open(SignInDialogComponent);
 
     dialogRef.afterClosed().subscribe(result => {
-      console.log(`Dialog result: ${result}`);
     });
   }
 

dmp-frontend/src/app/ui/navbar/navbar.component.html

@@ -20,7 +20,7 @@
 					</mat-menu>
 				</div>
 
-				<app-search></app-search>
+				<!-- <app-search></app-search> -->
 
 				<ul class="navbar-nav">
 					<!-- Login -->

dmp-frontend/src/assets/i18n/en.json

@@ -77,6 +77,7 @@
 		"ACTIONS": {
 			"VIEW-ALL": "View All",
 			"SHOW-MORE": "Show more",
+			"LOAD-MORE": "Load more",
 			"SHOW-LESS": "Show less",
 			"LOG-IN": "Log in"
 		},
@@ -392,6 +393,8 @@
 		"MEMBER": "Member",
 		"CREATOR": "Creator",
 		"EDITED": "Edited",
+		"VERSION": "Version",
+		"CONTAINED-DATASETS": "Contained Dataset Descriptions",
 		"COLUMNS": {
 			"NAME": "Name",
 			"GRANT": "Grant",
@@ -412,6 +415,7 @@
 			"INVITE": "Invite Contributors",
 			"INVITE-SHORT": "Invite",
 			"ADD-DATASET": "Add Dataset Description To DMP",
+			"ADD-DATASET-DESCRIPTION": "Add dataset description",
 			"ADD-DATASET-SHORT": "Add Dataset",
 			"DATASETS": "List All DMP Dataset Descriptions",
 			"NEW-VERSION": "New Version",
@@ -559,6 +563,7 @@
 	},
 	"DATASET-LISTING": {
 		"TITLE": "Dataset Descriptions",
+		"DATASET-DESCRIPTION": "Dataset Description",
 		"SELECT-DATASETS-TO-CLONE": "Select which datasets to include in the new DMP. Selected datasets will be editable.",
 		"SELECT-DATASETS-NONE": "Not available Dataset Descriptions for this DMP.",
 		"COLUMNS": {
@@ -584,7 +589,13 @@
 			"MAKE-IT-PUBLIC": "Make it public",
 			"VIEW": "View",
 			"NEW": "New Dataset Description",
-			"CREATE-NEW": "Create new Dataset Description"
+			"CREATE-NEW": "Create new Dataset Description",
+			"EXPORT": "Export",
+			"INVITE-COLLABORATORS": "Invite collaborators"
+		},
+		"STATES": {
+			"EDITED": "Edited",
+			"PUBLIC": "Public"
 		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
@@ -594,7 +605,9 @@
 			"DMP": "DMP",
 			"GRANT": "Grant",
 			"TEMPLATES-INVOLVED": "Dataset Description Template",
-			"VERSION": "DMP Version"
+			"VERSION": "DMP Version",
+			"PART-OF": "Part of",
+			"DMP-FOR": "DMP for"
 		}
 	},
 	"DATASET-PUBLIC-LISTING": {
@@ -1116,7 +1129,19 @@
 		"MY-DATASETS": "My Dataset Descriptions",
 		"DATASETS": "Dataset Descriptions",
 		"SEARCH": "SEARCH...",
-		"DATA-MANAGEMENT-PLANS": "DATA MANAGEMENT PLANS"
+		"DATA-MANAGEMENT-PLANS": "DATA MANAGEMENT PLANS",
+		"PERSONAL-USAGE": "Personal Usage",
+		"DMPS": "DMPs",
+		"DATASET-DESCRIPTIONS": "Dataset Descriptions",
+		"GRANTS": "Grants",
+		"RELATED-ORGANISATIONS": "Related Organisations",
+		"DRAFTS": "Drafts",
+		"DMP-ABOUT-BEG": "A DMP in Argos consists of key information about research, such as purpose, objectives and researchers involved, but also about documentation of research datasets, namely",
+		"DMP-ABOUT-END": ", that highlight the steps followed and the means used across data management activities.",
+		"ACTIONS": {
+			"ADD-DATASET-DESCRIPTION": "Add Dataset Description",
+			"ADD-DMP-DESCRIPTION": "Add DMP Description"
+		}
 	},
 	"USER-DIALOG": {
 		"USER-PROFILE": "My Profile",

dmp-frontend/src/assets/i18n/es.json

@@ -392,6 +392,8 @@
 		"MEMBER": "Miembro",
 		"CREATOR": "Creator",
 		"EDITED": "Editado en",
+		"VERSION": "Versión",
+		"CONTAINED-DATASETS": "Descripción del Dataset contenidos",
 		"COLUMNS": {
 			"NAME": "Nombre",
 			"GRANT": "Subvención",
@@ -411,8 +413,8 @@
 			"EDIT": "Editar",
 			"INVITE": "Invitar a participantes",
 			"INVITE-SHORT": "Invitar",
-			"ADD-DATASET": "Añadir la descripción del Dataset al PGD",
 			"ADD-DATASET-SHORT": "Añadir Dataset",
+			"ADD-DATASET-DESCRIPTION": "Añadir la descripción del Dataset",
 			"DATASETS": "List All PGD Dataset Descriptions",
 			"NEW-VERSION": "Nueva versión",
 			"START-NEW-VERSION": "Inicio Nueva versión",
@@ -559,6 +561,7 @@
 	},
 	"DATASET-LISTING": {
 		"TITLE": "Descripciones del Dataset",
+		"DATASET-DESCRIPTION": "Descripción  del Dataset",
 		"SELECT-DATASETS-TO-CLONE": "Seleccione qué datasets incluye en el nuevo PDG. Los datasets será editables.",
 		"SELECT-DATASETS-NONE": "Las descripciones del Dataset no está disponibles para este PGD.",
 		"COLUMNS": {
@@ -584,7 +587,13 @@
 			"MAKE-IT-PUBLIC": "Hacer público",
 			"VIEW": "Vista",
 			"NEW": "Nueva descripción del Dataset",
-			"CREATE-NEW": "Crear una nueva descripción del Dataset"
+			"CREATE-NEW": "Crear una nueva descripción del Dataset",
+			"EXPORT": "Exportar",
+			"INVITE-COLLABORATORS": "Invitar a colaboradores"
+		},
+		"STATES": {
+			"EDITED": "Editado",
+			"PUBLIC": "Publicado"
 		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
@@ -1107,7 +1116,17 @@
 		"MY-DATASETS": "Mis descripciones del Dataset",
 		"DATASETS": "descripciones del Dataset",
 		"SEARCH": "BUSCAR...",
-		"DATA-MANAGEMENT-PLANS": "PLANES DE GESTIÓN DE DATOS"
+		"DATA-MANAGEMENT-PLANS": "PLANES DE GESTIÓN DE DATOS",
+		"PERSONAL-USAGE": "Uso Personal",
+		"DMPS": "DMPs",
+		"DATASET-DESCRIPTIONS": "Descripciones del dataset",
+		"GRANTS": "Subvenciones",
+		"RELATED-ORGANISATIONS": "Organizaciones Relacionadas",
+		"DRAFTS": "Borradores",
+		"ACTIONS": {
+			"ADD-DATASET-DESCRIPTION": "Agregar Dataset Descripción",
+			"ADD-DMP-DESCRIPTION": "Agregar DMP Descripción"
+		}
 	},
 	"USER-DIALOG": {
 		"USER-PROFILE": "Mi perfil",

dmp-frontend/src/assets/i18n/gr.json

@@ -392,6 +392,8 @@
 		"MEMBER": "Μέλος",
 		"CREATOR": "Συντάκτης",
 		"EDITED": "Επεξεργάστηκε",
+		"VERSION": "Έκδοση",
+		"CONTAINED-DATASETS": "Δεδομένα που συμπεριλαμβάνει",
 		"COLUMNS": {
 			"NAME": "Τίτλος",
 			"GRANT": "Επιχορήγηση",
@@ -412,7 +414,8 @@
 			"INVITE": "Πρόσκληση Συνεργατών",
 			"INVITE-SHORT": "Πρόσκληση",
 			"ADD-DATASET": "Προσθήκη Περιγραφής Συνόλου Δεδομένων στο Σχέδιο Διαχείρισης Δεδομένων",
-			"ADD-DATASET-SHORT": "Προσθήκη Περιγραφής Συνόλου Δεδομένων",
+			"ADD-DATASET-SHORT": "Προσθήκη Συνόλου Δεδομένων",
+			"ADD-DATASET-DESCRIPTION": "Προσθήκη Περιγραφής Συνόλου Δεδομένων",
 			"DATASETS": "Κατάλογος όλων των Περιγραφών Συνόλου Δεδομένων",
 			"NEW-VERSION": "Νέα Έκδοση",
 			"START-NEW-VERSION": "Νέα Έκδοση",
@@ -555,6 +558,7 @@
 	},
 	"DATASET-LISTING": {
 		"TITLE": "Περιγραφές Συνόλων Δεδομένων",
+		"DATASET-DESCRIPTION": "Περιγραφή Δεδομένων",
 		"SELECT-DATASETS-TO-CLONE": "Επιλογή των συνόλων δεδομένων που θα συμπεριληφθούν στο νέο Σχέδιο Διαχείρισης Δεδομένων. Τα επιλεγμένα σύνολα δεδομένα θα είναι επεξεργάσιμα.",
 		"SELECT-DATASETS-NONE": "Μη διαθέσιμες Περιγραφές Συνόλου Δεδομένων για αυτό το Σχέδιο Διαχείρισης Δεδομένων",
 		"COLUMNS": {
@@ -580,7 +584,13 @@
 			"MAKE-IT-PUBLIC": "Δημοσιοποιήστε",
 			"VIEW": "Προβολή",
 			"NEW": "Νέα Περιγραφή Συνόλου Δεδομένων",
-			"CREATE-NEW": "Δημιουργία νέας Περιγραφής Συνόλου Δεδομένων"
+			"CREATE-NEW": "Δημιουργία νέας Περιγραφής Συνόλου Δεδομένων",
+			"EXPORT": "Εξαγωγή",
+			"INVITE-COLLABORATORS": "Προσκάλεσε συνεργάτες"
+		},
+		"STATES": {
+			"EDITED": "Επεξεργάστηκε",
+			"PUBLIC": "Δημοσιευμένο"
 		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
@@ -1094,7 +1104,17 @@
 		"MY-DATASETS": "Οι Περιγραφές Συνόλων Δεδομένων μου",
 		"DATASETS": "Περιγραφές Συνόλων Δεδομένων",
 		"SEARCH": "ΑΝΑΖΗΤΗΣΗ...",
-		"DATA-MANAGEMENT-PLANS": "ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ"
+		"DATA-MANAGEMENT-PLANS": "ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ",
+		"PERSONAL-USAGE": "Προσωπική Χρήση",
+		"DMPS": "DMPs",
+		"DATASET-DESCRIPTIONS": "Περιγραφές Dataset",
+		"GRANTS": "Grants",
+		"RELATED-ORGANISATIONS": "Σχετικοί Οργανισμοί",
+		"DRAFTS": "Προσχέδια",
+		"ACTIONS": {
+			"ADD-DATASET-DESCRIPTION": "Προσθήκη Περιγραφή Dataset",
+			"ADD-DMP-DESCRIPTION": "Προσθήκη Περιγραφή DMP"
+		}
 	},
 	"USER-DIALOG": {
 		"USER-PROFILE": "Το Προφίλ μου",

dmp-frontend/src/styles.scss

@@ -163,7 +163,7 @@
 .main-content {
 	background-color: #f5f5f5;
 	padding-top: 3.68rem;
-	padding-bottom: 10rem;
+	padding-bottom: 3rem;
 	// padding-left: 3.31rem;
 	padding-left: 1rem;
 	margin: 0;