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

# Conflicts:
#	dmp-frontend/src/assets/i18n/es.json

dmp-backend/data/src/main/java/eu/eudat/data/dao/entities/DMPDaoImpl.java

@@ -52,13 +52,12 @@ public class DMPDaoImpl extends DatabaseAccess<DMP> implements DMPDao {
 			query.where((builder, root) -> root.get("groupId").in(criteria.getGroupIds()));
 		if (criteria.getStatus() != null) {
 			if (criteria.getStatus() == DMP.DMPStatus.FINALISED.getValue()) {
-				query.where((builder, root) -> builder.and(builder.equal(root.get("status"), DMP.DMPStatus.FINALISED.getValue()), builder.notEqual(root.get("isPublic"), true)));
+				query.where((builder, root) -> builder.equal(root.get("status"), DMP.DMPStatus.FINALISED.getValue()));
 			} else if (criteria.getStatus() == DMP.DMPStatus.ACTIVE.getValue()) {
 				query.where((builder, root) -> builder.equal(root.get("status"), DMP.DMPStatus.ACTIVE.getValue()));
 			}
 		}
-		if (criteria.getIsPublic())
+		query.where(((builder, root) -> builder.equal(root.get("isPublic"), criteria.getIsPublic())));
-			query.where(((builder, root) -> builder.equal(root.get("isPublic"), true)));
         /*if (criteria.getRole() != null) {
             if (criteria.getRole().equals(UserDMP.UserDMPRoles.OWNER.getValue())) {
                 query.where((builder, root) -> builder.equal(root.join("users", JoinType.LEFT).get("role"), UserDMP.UserDMPRoles.OWNER.getValue()));

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

@@ -1,14 +1,18 @@
 package eu.eudat.logic.managers;
 
-import eu.eudat.criteria.RecentActivityCriteria;
+import eu.eudat.data.dao.criteria.DataManagementPlanCriteria;
-import eu.eudat.data.dao.criteria.*;
+import eu.eudat.data.dao.criteria.DatasetCriteria;
+import eu.eudat.data.dao.criteria.GrantCriteria;
+import eu.eudat.data.dao.criteria.OrganisationCriteria;
 import eu.eudat.data.dao.entities.DMPDao;
 import eu.eudat.data.dao.entities.DatasetDao;
-import eu.eudat.data.dao.entities.OrganisationDao;
 import eu.eudat.data.dao.entities.GrantDao;
-import eu.eudat.data.entities.*;
+import eu.eudat.data.dao.entities.OrganisationDao;
+import eu.eudat.data.entities.DMP;
+import eu.eudat.data.entities.Dataset;
+import eu.eudat.data.entities.Grant;
+import eu.eudat.data.entities.UserInfo;
 import eu.eudat.data.query.PaginationService;
-import eu.eudat.data.query.items.table.dmp.DataManagmentPlanPublicTableRequest;
 import eu.eudat.elastic.entities.Dmp;
 import eu.eudat.logic.builders.model.models.RecentActivityDataBuilder;
 import eu.eudat.logic.services.ApiContext;
@@ -22,8 +26,6 @@ import eu.eudat.models.data.dashboard.recent.model.RecentDmpModel;
 import eu.eudat.models.data.dashboard.recent.tablerequest.RecentActivityTableRequest;
 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;
@@ -47,7 +49,9 @@ public class DashBoardManager {
             { "modified", Comparator.comparing(o -> ((RecentActivityModel)o).getModified()).reversed()},
             { "created", Comparator.comparing(o -> ((RecentActivityModel)o).getCreated()).reversed()},
             { "label", Comparator.comparing(o -> ((RecentActivityModel)o).getTitle())},
-            { "status", Comparator.comparing(o -> ((RecentActivityModel)o).getStatus())}
+            { "status", Comparator.comparing(o -> ((RecentActivityModel)o).getStatus()).reversed()},
+            { "finalizedAt", Comparator.comparing(o -> ((RecentActivityModel)o).getFinalizedAt(), Comparator.nullsLast(Comparator.naturalOrder())).reversed()},
+            { "publishedAt", Comparator.comparing(o -> ((RecentActivityModel)o).getPublishedAt(), Comparator.nullsLast(Comparator.naturalOrder())).reversed()}
     }).collect(Collectors.toMap(data -> (String) data[0], data -> (Comparator<RecentActivityModel>)data[1]));
 
     private ApiContext apiContext;
@@ -62,17 +66,12 @@ public class DashBoardManager {
     public DashBoardStatistics getStatistics() {
         DashBoardStatistics statistics = new DashBoardStatistics();
 
-        DataManagmentPlanPublicTableRequest publicTableRequest = new DataManagmentPlanPublicTableRequest();
+        DataManagementPlanCriteria publicCriteria = new DataManagementPlanCriteria();
-
+        publicCriteria.setIsPublic(true);
-        DataManagementPlanPublicCriteria publicCriteria = new DataManagementPlanPublicCriteria();
+        publicCriteria.setOnlyPublic(true);
-
         publicCriteria.setAllVersions(false);
 
-        publicTableRequest.setCriteria(publicCriteria);
+        List<DMP> dmps = apiContext.getOperationsContext().getDatabaseRepository().getDmpDao().getWithCriteria(publicCriteria).toList();
-
-        publicTableRequest.setQuery(databaseRepository.getDmpDao().asQueryable());
-
-        List<DMP> dmps = publicTableRequest.applyCriteria().toList();
 
 //        DataManagementPlanCriteria dataManagementPlanCriteria = new DataManagementPlanCriteria();
         OrganisationCriteria organisationCriteria = new OrganisationCriteria();
@@ -199,7 +198,9 @@ public class DashBoardManager {
         DMPDao dataManagementPlanRepository = databaseRepository.getDmpDao();
         DatasetDao datasetRepository = databaseRepository.getDatasetDao();
         UserInfo user = new UserInfo();
+        if (isAuthenticated) {
             user.setId(principal.getId());
+        }
         DatasetCriteria datasetCriteria = new DatasetCriteria();
         datasetCriteria.setLike(tableRequest.getCriteria().getLike());
         datasetCriteria.setAllVersions(false);
@@ -265,6 +266,13 @@ public class DashBoardManager {
         }
 
         PaginationService.applyOrder(dmpList, tableRequest.getOrderings());
+        for (int i = 0; i< tableRequest.getOrderings().getFields().length; i++) {
+            if (tableRequest.getOrderings().getFields()[i].contains("publishedAt")) {
+                String newField = tableRequest.getOrderings().getFields()[i].toCharArray()[0] + "dmp:publishedAt|join|";
+                tableRequest.getOrderings().getFields()[i] = newField;
+            }
+        }
+        PaginationService.applyOrder(datasetList, tableRequest.getOrderings());
 
         /*CompletableFuture future = CompletableFuture.runAsync(() -> */{
             recentActivityModels.addAll(dmpList
@@ -297,13 +305,11 @@ public class DashBoardManager {
         int pos = -1;
         for (int i = (recentActivityModels.size() / 2); i < recentActivityModels.size(); i++) {
             RecentActivityModel recentActivityModel = recentActivityModels.remove(i);
-
             while (pos < recentActivityModels.size()) {
                 pos++;
                 if (pos % 2 != 0) {
                     break;
                 }
-
             }
             recentActivityModels.add(pos, recentActivityModel);
         }

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

@@ -419,6 +419,9 @@ public class DataManagementPlanManager {
                 apiContext.getOperationsContext().getDatabaseRepository().getDatasetDao()
                           .asQueryable().where((builder, root) -> root.get("id").in(dataManagementPlan.getDatasetsToBeFinalized()))
                           .update(root -> root.<Integer>get("status"), Dataset.Status.FINALISED.getValue());
+                apiContext.getOperationsContext().getDatabaseRepository().getDatasetDao()
+                          .asQueryable().where((builder, root) -> root.get("id").in(dataManagementPlan.getDatasetsToBeFinalized()))
+                          .update(root -> root.<Date>get("finalizedat"), new Date());
 
                 List<UUID> datasetsToBeCanceled = new LinkedList<>();
                 for (DatasetWizardModel dataset : dataManagementPlan.getDatasets()) {
@@ -894,8 +897,15 @@ public class DataManagementPlanManager {
             apiContext.getOperationsContext().getDatabaseRepository().getDatasetDao()
                       .asQueryable().where((builder, root) -> root.get("id").in(datasetsToBeFinalized.getUuids()))
                       .update(root -> root.<Integer>get("status"), Dataset.Status.FINALISED.getValue());
+            apiContext.getOperationsContext().getDatabaseRepository().getDatasetDao()
+                      .asQueryable().where((builder, root) -> root.get("id").in(datasetsToBeFinalized.getUuids()))
+                      .update(root -> root.<Date>get("finalizedAt"), new Date());
             List<Dataset> finalizedDatasets = dmp.getDataset().stream().filter(dataset -> datasetsToBeFinalized.getUuids().contains(dataset.getId())).collect(Collectors.toList());
-            finalizedDatasets.forEach(dataset -> dataset.setStatus(Dataset.Status.FINALISED.getValue()));
+            finalizedDatasets.forEach(dataset ->{
+                dataset.setStatus(Dataset.Status.FINALISED.getValue());
+                dataset.setFinalizedAt(new Date());
+                dataset.setModified(new Date());
+            } );
             indexDatasets.addAll(finalizedDatasets);
             List<UUID> datasetsToBeCanceled = new LinkedList<>();
             for (Dataset dataset : dmp.getDataset()) {

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

@@ -180,8 +180,8 @@ public class DatasetManager {
                 });
             }
             String[] strings = new String[1];
-            strings[0] = "-dmp:publishedAt|join|";
+            //strings[0] = "-dmp:publishedAt|join|";
-            datasetTableRequest.getOrderings().setFields(strings);
+            //datasetTableRequest.getOrderings().setFields(strings);
             authItems = items;
             pagedItems = PaginationManager.applyPaging(items, datasetTableRequest);
         }

dmp-backend/web/src/main/java/eu/eudat/models/data/components/commons/datafield/AutoCompleteData.java

@@ -128,7 +128,10 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
         if (data != null) {
             this.multiAutoComplete = (Boolean) ((Map<Boolean, Object>) data).get("multiAutoComplete");
 
-            List<Map<String, Object>> dataList = (List<Map<String, Object>>) ((Map<String, Object>) data).get("autoCompleteSingleDataList");
+            List<Map<String, Object>> dataList = (List<Map<String, Object>>) ((Map<String, Object>) data).get("autocompleteSingle");
+            if (dataList == null) {
+                dataList = (List<Map<String, Object>>) ((Map<String, Object>) data).get("autoCompleteSingleDataList");
+            }
 
             this.autoCompleteSingleDataList = new ArrayList<>();
 
@@ -174,14 +177,15 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
         List<Map<String, Object>> autoCompletes = new ArrayList<>();
         NodeList autoCompleteSingles = item.getChildNodes();
         for (int i = 0; i < autoCompleteSingles.getLength(); i++) {
-            if (autoCompleteSingles.item(i) instanceof Element && !((Element) autoCompleteSingles.item(i)).getTagName().equals("option")) {
+            if (autoCompleteSingles.item(i) instanceof Element) {
+                if (!((Element) autoCompleteSingles.item(i)).getTagName().equals("option")) {
                     Element node = (Element) autoCompleteSingles.item(i);
                     if (!node.hasChildNodes()) {
                         node.appendChild(node);
                     }
 
                     autoCompletes.add(singleToMap(node));
-            } else if (((Element) autoCompleteSingles.item(i)).getTagName().equals("option")) {
+                } else {
                     Element node = item.getOwnerDocument().createElement("autocompleteSingle");
                     node.appendChild(autoCompleteSingles.item(i));
                     node.setAttribute("url", item.getAttribute("url"));
@@ -189,6 +193,7 @@ public class AutoCompleteData extends ComboBoxData<AutoCompleteData> {
                     autoCompletes.add(singleToMap(node));
                 }
             }
+        }
         dataMap.put("autocompleteSingle", autoCompletes);
         //dataMap.put("optionsRoot", item != null ? item.getAttribute("optionsRoot") : "");
         //Element optionElement = (Element) item.getElementsByTagName("option").item(0);

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

@@ -177,6 +177,9 @@ public class DataManagementPlanOverviewModel implements DataModel<DMP, DataManag
         this.label = entity.getLabel();
         this.groupId = entity.getGroupId();
         this.status = entity.getStatus();
+        if (entity.getResearchers() != null) {
+            this.researchers = entity.getResearchers().stream().map(item -> new Researcher().fromDataModel(item)).collect(Collectors.toList());
+        }
         return this;
     }
 
@@ -192,7 +195,9 @@ public class DataManagementPlanOverviewModel implements DataModel<DMP, DataManag
         this.datasets = entity.getDataset().stream().filter(dataset -> !dataset.getStatus().equals(Dataset.Status.DELETED.getValue()) && !dataset.getStatus().equals(Dataset.Status.CANCELED.getValue())).map(x-> new DatasetOverviewModel().fromDataModel(x)).collect(Collectors.toList());
         this.users = entity.getUsers().stream().map(x -> new UserInfoListingModel().fromDataModel(x)).collect(Collectors.toList());
         this.description = entity.getDescription();
+        if (entity.getResearchers() != null) {
             this.researchers = entity.getResearchers().stream().map(item -> new Researcher().fromDataModel(item)).collect(Collectors.toList());
+        }
 
         if (entity.getAssociatedDmps() != null && !entity.getAssociatedDmps().isEmpty()) {
             this.associatedProfiles = new LinkedList<>();

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

@@ -204,7 +204,11 @@ public class DatasetListingModel implements DataModel<Dataset, DatasetListingMod
         this.registries = LabelBuilder.getLabel(entity.getRegistries().stream().map(item -> new eu.eudat.models.data.dataset.Registry().fromDataModel(item)).collect(Collectors.toList()));
         this.dataRepositories = LabelBuilder.getLabel(entity.getDatasetDataRepositories().stream().map(item -> new DataRepository().fromDataModel(item.getDataRepository())).collect(Collectors.toList()));
         this.services = LabelBuilder.getLabel(entity.getServices().stream().map(item -> new Service().fromDataModel(item.getService())).collect(Collectors.toList()));
+        if (entity.getFinalizedAt() == null && entity.getStatus() == Dataset.Status.FINALISED.getValue()) {
+            this.finalizedAt = entity.getDmp().getFinalizedAt();
+        } else {
             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<>();

dmp-frontend/package.json

@@ -32,6 +32,7 @@
     "moment-timezone": "^0.5.26",
     "ngx-cookie-service": "^2.2.0",
     "ngx-cookieconsent": "^2.2.3",
+    "ngx-guided-tour": "^1.1.10",
     "rxjs": "^6.3.2",
     "tinymce": "^5.1.6",
     "tslib": "^1.10.0",

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

@@ -24,3 +24,5 @@
 </div>
 <app-notification *ngIf="!onlySplash"></app-notification>
 <router-outlet *ngIf="onlySplash"></router-outlet>
+
+<ngx-guided-tour></ngx-guided-tour>

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

@@ -100,17 +100,8 @@ export class AppComponent implements OnInit {
 					return appTitle;
 				})
 			).subscribe((ttl: string) => {
-				if (ttl.length > 0) {
+				this.translateTitle(ttl);
-					this.translate.get(ttl).subscribe((translated: string) => {
+				this.translate.onLangChange.subscribe(() => this.translateTitle(ttl));
-						this.translate.get('GENERAL.TITLES.PREFIX').subscribe((titlePrefix: string) => {
-							this.titleService.setTitle(titlePrefix + translated);
-						});
-					});
-				} else {
-					this.translate.get('GENERAL.TITLES.GENERAL').subscribe((translated: string) => {
-						this.titleService.setTitle(translated);
-					});
-				}
 			});
 
 		this.statusChangeSubscription = this.ccService.statusChange$.subscribe((event: NgcStatusChangeEvent) => {
@@ -140,6 +131,20 @@ export class AppComponent implements OnInit {
 			})
 	}
 
+	translateTitle(ttl: string) {
+		if (ttl.length > 0) {
+			this.translate.get(ttl).subscribe((translated: string) => {
+				this.translate.get('GENERAL.TITLES.PREFIX').subscribe((titlePrefix: string) => {
+					this.titleService.setTitle(titlePrefix + translated);
+				});
+			});
+		} else {
+			this.translate.get('GENERAL.TITLES.GENERAL').subscribe((translated: string) => {
+				this.titleService.setTitle(translated);
+			});
+		}
+	}
+
 	ngOnDestroy() {
 		this.statusChangeSubscription.unsubscribe();
 	}

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

@@ -32,6 +32,7 @@ import { BaseHttpService } from './core/services/http/base-http.service';
 import { ConfigurationService } from './core/services/configuration/configuration.service';
 import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldDefaultOptions } from '@angular/material';
+import { GuidedTourModule } from './library/guided-tour/guided-tour.module';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) {
@@ -105,7 +106,8 @@ const appearance: MatFormFieldDefaultOptions = {
 		NavbarModule,
 		SidebarModule,
 		NgcCookieConsentModule.forRoot(cookieConfig),
-		Oauth2DialogModule
+		Oauth2DialogModule,
+		GuidedTourModule.forRoot()
 	],
 	declarations: [
 		AppComponent,

dmp-frontend/src/app/core/common/enum/recent-activity-order.ts

@@ -2,5 +2,8 @@ export enum RecentActivityOrder {
 	LABEL = "label",
 	CREATED = "created",
 	MODIFIED = "modified",
+	FINALIZED = "finalizedAt",
+	PUBLISHED = "publishedAt",
+	DATASETPUBLISHED = "dmp:publishedAt|join|",
 	STATUS = "status"
 }

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

@@ -2,7 +2,7 @@ import { DatasetProfileModel } from './dataset-profile';
 
 export interface DatasetListingModel {
 	id: string;
-	label: String;
+	label: string;
 	dmp: String;
 	dmpId: String;
 	grant: String;

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

@@ -3,7 +3,7 @@ import { DmpAssociatedProfileModel } from '../dmp-profile/dmp-associated-profile
 
 export interface DmpListingModel {
 	id: string;
-	label: String;
+	label: string;
 	description: String;
 	status: DmpStatus;
 	grant: String;

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

@@ -4,7 +4,7 @@ import { DatasetProfileModel } from '../dataset/dataset-profile';
 
 export class RecentActivityModel {
 	id: string;
-	title: String;
+	title: string;
 	description: String;
 	created: Date;
 	modified: Date;

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

@@ -2,11 +2,12 @@ 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';
+import { DatasetUrlListing } from '../dataset/dataset-url-listing';
 
 export class RecentDmpModel extends RecentActivityModel {
 	doi: String;
 	extraProperties: Map<String, any>;
-	datasets: any[];
+	datasets: DatasetUrlListing[];
 	associatedProfiles: DmpAssociatedProfileModel[];
 	organisations: String;
 	groupId: string;

dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts

@@ -109,6 +109,9 @@ export class EnumUtils {
 			case RecentActivityOrder.CREATED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.CREATED');
 			case RecentActivityOrder.LABEL: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.LABEL');
 			case RecentActivityOrder.MODIFIED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.MODIFIED');
+			case RecentActivityOrder.FINALIZED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.FINALIZED');
+			case RecentActivityOrder.PUBLISHED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.PUBLISHED');
+			case RecentActivityOrder.DATASETPUBLISHED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.PUBLISHED');
 			case RecentActivityOrder.STATUS: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.STATUS');
 		}
 	}

dmp-frontend/src/app/library/guided-tour/guided-tour.component.html

@@ -0,0 +1,42 @@
+<!-- custom add: isStepUnique -->
+<div *ngIf="currentTourStep && !isOrbShowing">
+    <div class="guided-tour-user-input-mask" (click)="backdropClick($event)"></div>
+    <div class="guided-tour-spotlight-overlay" 
+        [style.top.px]="overlayTop" 
+        [style.left.px]="overlayLeft"
+        [style.height.px]="currentTourStep.isStepUnique ? overlayWidth : overlayHeight" 
+        [style.width.px]="overlayWidth">
+    </div>
+</div>
+<div *ngIf="currentTourStep && !isOrbShowing">
+    <div #tourStep *ngIf="currentTourStep" 
+        class="tour-step tour-{{ currentTourStep.orientation }}" 
+        [ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
+        [style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
+        [style.left.px]="(currentTourStep.selector && selectedElementRect ? leftPosition : null)"
+        [style.width.px]="(currentTourStep.selector && selectedElementRect ? calculatedTourStepWidth : null)"
+        [style.transform]="(currentTourStep.selector && selectedElementRect ? transform : null)">
+        <div *ngIf="currentTourStep.selector" class="tour-arrow"></div>
+        <div class="tour-block d-flex">
+            <div class="col-11">
+                <h3 class="tour-title" *ngIf="currentTourStep.title && currentTourStep.selector">
+                    {{currentTourStep.title}}
+                </h3>
+                <h2 class="tour-title" *ngIf="currentTourStep.title && !currentTourStep.selector">
+                    {{ currentTourStep.title }}
+                </h2>
+                <div class="tour-buttons">
+                    <button *ngIf="!guidedTourService.onResizeMessage" class="next-button"
+                        (click)="guidedTourService.nextStep()">
+                        {{ nextText }}
+                    </button>
+                    <button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
+                        (click)="guidedTourService.skipTour()" class="skip-button link-button">
+                        {{ skipText }}
+                    </button>
+                </div>
+            </div>
+            <div class="argos-present-img col-2"></div>
+        </div>
+    </div>
+</div>

dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss

@@ -0,0 +1,246 @@
+ngx-guided-tour {
+  .guided-tour-user-input-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      display: block;
+      height: 100%;
+      width: 100%;
+      max-height: 100vh;
+      text-align: center;
+      opacity: 0;
+  }
+
+  .guided-tour-spotlight-overlay {
+      position: fixed;
+      box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5);
+      border-radius: 44px; /*custom add*/
+  }
+
+  .tour-orb {
+      position: fixed;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+
+      .tour-orb-ring {
+          width: 35px;
+          height: 35px;
+          position: relative;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          animation: pulse 2s linear infinite;
+
+          &:after {
+              content: '';
+              display: inline-block;
+              height: 100%;
+              width: 100%;
+              border-radius: 50%;
+          }
+      }
+
+      @keyframes pulse {
+          from {
+              transform: translate(-50%, -50%) scale(0.45);
+              opacity: 1.0;
+          }
+          to {
+              transform: translate(-50%, -50%) scale(1);
+              opacity: 0.0;
+          }
+      }
+  }
+
+  .tour-step {
+      position: fixed;
+      &.page-tour-step {
+        //   max-width: 400px;
+          max-width: 1043px; /*custom add*/
+          width: 50%;
+          left: 50%;
+          top: 50%;
+          border-radius: 5px;
+          transform: translate(-50%, -50%)
+      }
+      &.tour-bottom, &.tour-bottom-right, &.tour-bottom-left {
+          .tour-arrow::before {
+              position: absolute;
+          }
+          .tour-block {
+              margin-top: 10px;
+          }
+      }
+
+      &.tour-top, &.tour-top-right, &.tour-top-left {
+          margin-bottom: 10px;
+
+          .tour-arrow::before {
+              position: absolute;
+              bottom: 0;
+          }
+          .tour-block {
+              margin-bottom: 10px;
+          }
+      }
+
+      &.tour-bottom , &.tour-top {
+          .tour-arrow::before {
+            //   transform: translateX(-50%);
+            //   left: 50%;
+            /*custom add*/
+            transform: scale(2); 
+            left: 494px; 
+          }
+          /*custom add*/
+          margin-top: 20px;
+          margin-left: 10px; 
+      }
+
+      &.tour-bottom-right, &.tour-top-right {
+          .tour-arrow::before {
+              transform: translateX(-100%);
+              left: calc(100% - 5px);
+          }
+      }
+
+      &.tour-bottom-left, &.tour-top-left {
+          .tour-arrow::before {
+              left:  5px;
+          }
+      }
+
+      &.tour-left {
+          .tour-arrow::before {
+              position: absolute;
+              left: 100%;
+              transform: translateX(-100%);
+              top: 5px;
+          }
+          .tour-block {
+              margin-right: 10px;
+          }
+      }
+
+      &.tour-right {
+          margin-left: 10px; /*custom add*/
+          .tour-arrow::before {
+              transform: scale(1.5); /*custom add*/
+              position: absolute;
+              left: 0;
+              top: 5px;
+          }
+          .tour-block {
+              margin-top: -15px; /*custom add*/
+              margin-left: 10px;
+          }
+      }
+
+      .tour-block {
+        //   padding: 15px 25px;
+
+          /*custom add*/
+          padding: 15px 25px 15px 0px;
+          max-height: 348px;
+          border-radius: 5px;
+      }
+
+      .tour-title {
+        //   font-weight: bold !important;
+        //   padding-bottom: 20px;
+
+        /*custom add*/
+          font-weight: lighter !important;
+          font-size: 16px !important;
+          padding: 28px 74px 0px 65px;
+          overflow: auto;
+          text-align: left;
+          color: #212121;
+          line-height: 26px;
+          white-space:pre-line;
+          height: 210px;
+      }
+
+      h3.tour-title {
+          font-size: 20px;
+      }
+      h2.tour-title {
+          font-size: 30px;
+      }
+
+      .tour-buttons {
+          overflow: hidden; // clearfix
+          padding: 10px 70px 30px 65px; /*custom add*/ 
+
+          button.link-button {
+              padding-left: 0;
+              font-size: 15px;
+              font-weight: bold;
+              max-width: none !important;
+              cursor: pointer;
+              text-align: center;
+              white-space: nowrap;
+              vertical-align: middle;
+              border: 1px solid transparent;
+              line-height: 1.5;
+              background-color: transparent;
+              position: relative;
+              outline: none;
+              padding: 0 15px;
+              -webkit-appearance: button;
+          }
+
+          button.skip-button.link-button {
+            //   padding-left: 0;
+              border-left: 0;
+
+              /*custom add*/ 
+              padding: 0;
+              float: right;
+              width: 133px;
+              height: 40px;
+              border: 1px solid #129D99;
+              background: #FFFFFF 0% 0% no-repeat padding-box;
+              color: #129D99;
+          }
+
+          .next-button {
+              cursor: pointer;
+            //   border-radius: 1px;
+            //   float: right;
+              border: none;
+              outline: none;
+            //   padding-left: 10px;
+            //   padding-right: 10px;
+
+              /*custom add*/ 
+              float: left;
+              padding: 10px 0px;;
+              width: 101px;
+              background: #129D99 0% 0% no-repeat padding-box;
+          }
+
+          /*custom add*/
+          button.skip-button.link-button, .next-button {
+            font-size: 14px;
+            font-weight: bold;
+            letter-spacing: 0.35px;
+            height: 40px;
+            box-shadow: 0px 3px 6px #1E202029;
+            border-radius: 30px;
+          }
+      }
+
+      /*custom add*/
+      .argos-present-img {
+        background: url("../../../assets/splash/assets/img/argos\ present.png") no-repeat;
+        min-width: 176px;
+        height: 220px;
+        position: relative;
+        top: 110px;
+        left: -85px;
+        border-top: none;
+      }
+  }
+}

dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts

@@ -0,0 +1,399 @@
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation, TemplateRef, Inject, ChangeDetectorRef } from '@angular/core';
+import { fromEvent, Subscription } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import { Orientation, TourStep } from './guided-tour.constants';
+import { GuidedTourService } from './guided-tour.service';
+import { WindowRefService } from "./windowref.service";
+
+@Component({
+    selector: 'ngx-guided-tour',
+    templateUrl: './guided-tour.component.html',
+    styleUrls: ['./guided-tour.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class GuidedTourComponent implements AfterViewInit, OnDestroy {
+    @Input() public topOfPageAdjustment?= 0;
+    @Input() public tourStepWidth?= 1043;
+    @Input() public minimalTourStepWidth?= 500;
+    @Input() public skipText?= 'Leave Tour';
+    @Input() public nextText?= 'Got it!';
+    @ViewChild('tourStep', { static: false }) public tourStep: ElementRef;
+    public highlightPadding = 4;
+    public currentTourStep: TourStep = null;
+    public selectedElementRect: DOMRect = null;
+    public isOrbShowing = false;
+
+    private resizeSubscription: Subscription;
+    private scrollSubscription: Subscription;
+
+    constructor(
+        public guidedTourService: GuidedTourService,
+        private windowRef: WindowRefService,
+        private changeDetectorRef: ChangeDetectorRef, /*custom add*/
+        @Inject(DOCUMENT) private dom: any
+    ) { }
+
+    private get maxWidthAdjustmentForTourStep(): number {
+        return this.tourStepWidth - this.minimalTourStepWidth;
+    }
+
+    private get widthAdjustmentForScreenBound(): number {
+        if (!this.tourStep) {
+            return 0;
+        }
+        let adjustment = 0;
+        if (this.calculatedLeftPosition < 0) {
+            adjustment = -this.calculatedLeftPosition;
+        }
+        if (this.calculatedLeftPosition > this.windowRef.nativeWindow.innerWidth - this.tourStepWidth) {
+            adjustment = this.calculatedLeftPosition - (this.windowRef.nativeWindow.innerWidth - this.tourStepWidth);
+        }
+
+        return Math.min(this.maxWidthAdjustmentForTourStep, adjustment);
+    }
+
+    public get calculatedTourStepWidth() {
+        return this.tourStepWidth - this.widthAdjustmentForScreenBound;
+    }
+
+    public ngAfterViewInit(): void {
+        this.guidedTourService.guidedTourCurrentStepStream.subscribe((step: TourStep) => {
+            this.currentTourStep = step;
+            if (step && step.selector) {
+                const selectedElement = this.dom.querySelector(step.selector);
+                if (selectedElement) {
+                    this.handleOrb(); /*custom add*/
+                    this.scrollToAndSetElement();
+                } else {
+                    this.selectedElementRect = null;
+                }
+            } else {
+                this.selectedElementRect = null;
+            }
+        });
+
+        this.guidedTourService.guidedTourOrbShowingStream.subscribe((value: boolean) => {
+            this.isOrbShowing = value;
+        });
+
+        this.resizeSubscription = fromEvent(this.windowRef.nativeWindow, 'resize').subscribe(() => {
+            this.updateStepLocation();
+        });
+
+        this.scrollSubscription = fromEvent(this.windowRef.nativeWindow, 'scroll').subscribe(() => {
+            this.updateStepLocation();
+        });
+    }
+
+    /*custom add*/
+    ngAfterContentChecked() {
+        this.changeDetectorRef.detectChanges();
+    }
+
+    public ngOnDestroy(): void {
+        this.resizeSubscription.unsubscribe();
+        this.scrollSubscription.unsubscribe();
+    }
+
+    public scrollToAndSetElement(): void {
+        this.updateStepLocation();
+        // Allow things to render to scroll to the correct location
+        setTimeout(() => {
+            if (!this.isOrbShowing && !this.isTourOnScreen()) {
+                if (this.selectedElementRect && this.isBottom()) {
+                    // Scroll so the element is on the top of the screen.
+                    const topPos = ((this.windowRef.nativeWindow.scrollY + this.selectedElementRect.top) - this.topOfPageAdjustment)
+                        - (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)
+                        + this.getStepScreenAdjustment();
+                    try {
+                        this.windowRef.nativeWindow.scrollTo({
+                            left: null,
+                            top: topPos,
+                            behavior: 'smooth'
+                        });
+                    } catch (err) {
+                        if (err instanceof TypeError) {
+                            this.windowRef.nativeWindow.scroll(0, topPos);
+                        } else {
+                            throw err;
+                        }
+                    }
+                } else {
+                    // Scroll so the element is on the bottom of the screen.
+                    const topPos = (this.windowRef.nativeWindow.scrollY + this.selectedElementRect.top + this.selectedElementRect.height)
+                        - this.windowRef.nativeWindow.innerHeight
+                        + (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)
+                        - this.getStepScreenAdjustment();
+                    try {
+                        this.windowRef.nativeWindow.scrollTo({
+                            left: null,
+                            top: topPos,
+                            behavior: 'smooth'
+                        });
+                    } catch (err) {
+                        if (err instanceof TypeError) {
+                            this.windowRef.nativeWindow.scroll(0, topPos);
+                        } else {
+                            throw err;
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    public handleOrb(): void {
+        this.guidedTourService.activateOrb();
+        if (this.currentTourStep && this.currentTourStep.selector) {
+            this.scrollToAndSetElement();
+        }
+    }
+
+    private isTourOnScreen(): boolean {
+        return this.tourStep
+            && this.elementInViewport(this.dom.querySelector(this.currentTourStep.selector))
+            && this.elementInViewport(this.tourStep.nativeElement);
+    }
+
+    private elementInViewport(element: HTMLElement): boolean {
+        let top = element.offsetTop;
+        const height = element.offsetHeight;
+
+        while (element.offsetParent) {
+            element = (element.offsetParent as HTMLElement);
+            top += element.offsetTop;
+        }
+        if (this.isBottom()) {
+            return (
+                top >= (this.windowRef.nativeWindow.pageYOffset
+                    + this.topOfPageAdjustment
+                    + (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)
+                    + this.getStepScreenAdjustment())
+                && (top + height) <= (this.windowRef.nativeWindow.pageYOffset + this.windowRef.nativeWindow.innerHeight)
+            );
+        } else {
+            return (
+                top >= (this.windowRef.nativeWindow.pageYOffset + this.topOfPageAdjustment - this.getStepScreenAdjustment())
+                && (top + height + (this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0)) <= (this.windowRef.nativeWindow.pageYOffset + this.windowRef.nativeWindow.innerHeight)
+            );
+        }
+    }
+
+    public backdropClick(event: Event): void {
+        if (this.guidedTourService.preventBackdropFromAdvancing) {
+            event.stopPropagation();
+        } else {
+            this.guidedTourService.nextStep();
+        }
+    }
+
+    public updateStepLocation(): void {
+        if (this.currentTourStep && this.currentTourStep.selector) {
+            const selectedElement = this.dom.querySelector(this.currentTourStep.selector);
+            if (selectedElement && typeof selectedElement.getBoundingClientRect === 'function') {
+                this.selectedElementRect = (selectedElement.getBoundingClientRect() as DOMRect);
+            } else {
+                this.selectedElementRect = null;
+            }
+        } else {
+            this.selectedElementRect = null;
+        }
+    }
+
+    private isBottom(): boolean {
+        return this.currentTourStep.orientation
+            && (this.currentTourStep.orientation === Orientation.Bottom
+                || this.currentTourStep.orientation === Orientation.BottomLeft
+                || this.currentTourStep.orientation === Orientation.BottomRight);
+    }
+
+    public get topPosition(): number {
+        const paddingAdjustment = this.getHighlightPadding();
+
+        if (this.isBottom()) {
+            return this.selectedElementRect.top + this.selectedElementRect.height + paddingAdjustment;
+        }
+
+        return this.selectedElementRect.top - this.getHighlightPadding();
+    }
+
+    public get orbTopPosition(): number {
+        if (this.isBottom()) {
+            return this.selectedElementRect.top + this.selectedElementRect.height;
+        }
+
+        if (
+            this.currentTourStep.orientation === Orientation.Right
+            || this.currentTourStep.orientation === Orientation.Left
+        ) {
+            return (this.selectedElementRect.top + (this.selectedElementRect.height / 2));
+        }
+
+        return this.selectedElementRect.top;
+    }
+
+    private get calculatedLeftPosition(): number {
+        const paddingAdjustment = this.getHighlightPadding();
+
+        if (
+            this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.BottomRight
+        ) {
+            return (this.selectedElementRect.right - this.tourStepWidth);
+        }
+
+        if (
+            this.currentTourStep.orientation === Orientation.TopLeft
+            || this.currentTourStep.orientation === Orientation.BottomLeft
+        ) {
+            return (this.selectedElementRect.left);
+        }
+
+        if (this.currentTourStep.orientation === Orientation.Left) {
+            return this.selectedElementRect.left - this.tourStepWidth - paddingAdjustment;
+        }
+
+        if (this.currentTourStep.orientation === Orientation.Right) {
+            return (this.selectedElementRect.left + this.selectedElementRect.width + paddingAdjustment);
+        }
+
+        return (this.selectedElementRect.right - (this.selectedElementRect.width / 2) - (this.tourStepWidth / 2));
+    }
+
+    public get leftPosition(): number {
+        if (this.calculatedLeftPosition >= 0) {
+            return this.calculatedLeftPosition;
+        }
+        const adjustment = Math.max(0, -this.calculatedLeftPosition)
+        const maxAdjustment = Math.min(this.maxWidthAdjustmentForTourStep, adjustment);
+        return this.calculatedLeftPosition + maxAdjustment;
+    }
+
+    public get orbLeftPosition(): number {
+        if (
+            this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.BottomRight
+        ) {
+            return this.selectedElementRect.right;
+        }
+
+        if (
+            this.currentTourStep.orientation === Orientation.TopLeft
+            || this.currentTourStep.orientation === Orientation.BottomLeft
+        ) {
+            return this.selectedElementRect.left;
+        }
+
+        if (this.currentTourStep.orientation === Orientation.Left) {
+            return this.selectedElementRect.left;
+        }
+
+        if (this.currentTourStep.orientation === Orientation.Right) {
+            return (this.selectedElementRect.left + this.selectedElementRect.width);
+        }
+
+        return (this.selectedElementRect.right - (this.selectedElementRect.width / 2));
+    }
+
+    public get transform(): string {
+        if (
+            !this.currentTourStep.orientation
+            || this.currentTourStep.orientation === Orientation.Top
+            || this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.TopLeft
+        ) {
+            return 'translateY(-100%)';
+        }
+        return null;
+    }
+
+    public get orbTransform(): string {
+        if (
+            !this.currentTourStep.orientation
+            || this.currentTourStep.orientation === Orientation.Top
+            || this.currentTourStep.orientation === Orientation.Bottom
+            || this.currentTourStep.orientation === Orientation.TopLeft
+            || this.currentTourStep.orientation === Orientation.BottomLeft
+        ) {
+            return 'translateY(-50%)';
+        }
+
+        if (
+            this.currentTourStep.orientation === Orientation.TopRight
+            || this.currentTourStep.orientation === Orientation.BottomRight
+        ) {
+            return 'translate(-100%, -50%)';
+        }
+
+        if (
+            this.currentTourStep.orientation === Orientation.Right
+            || this.currentTourStep.orientation === Orientation.Left
+        ) {
+            return 'translate(-50%, -50%)';
+        }
+
+        return null;
+    }
+
+    public get overlayTop(): number {
+        if (this.selectedElementRect) {
+            // return this.selectedElementRect.top - this.getHighlightPadding();
+
+            /*custom add*/
+            let customTopOffset = 0;
+            if (this.currentTourStep.customTopOffset) {
+                customTopOffset = this.currentTourStep.customTopOffset;
+            }
+            return this.selectedElementRect.top - this.getHighlightPadding() - customTopOffset;
+        }
+        return 0;
+    }
+
+    public get overlayLeft(): number {
+        if (this.selectedElementRect) {
+            return this.selectedElementRect.left - this.getHighlightPadding();
+        }
+        return 0;
+    }
+
+    public get overlayHeight(): number {
+        if (this.selectedElementRect) {
+            return this.selectedElementRect.height + (this.getHighlightPadding() * 2);
+        }
+        return 0;
+    }
+
+    public get overlayWidth(): number {
+        if (this.selectedElementRect) {
+            return (this.selectedElementRect.width + (this.getHighlightPadding() * 2)) * 0.95;
+        }
+        return 0;
+    }
+
+    private getHighlightPadding(): number {
+        let paddingAdjustment = this.currentTourStep.useHighlightPadding ? this.highlightPadding : 0;
+        if (this.currentTourStep.highlightPadding) {
+            paddingAdjustment = this.currentTourStep.highlightPadding;
+        }
+        return paddingAdjustment;
+    }
+
+    // This calculates a value to add or subtract so the step should not be off screen.
+    private getStepScreenAdjustment(): number {
+        if (
+            this.currentTourStep.orientation === Orientation.Left
+            || this.currentTourStep.orientation === Orientation.Right
+        ) {
+            return 0;
+        }
+
+        const scrollAdjustment = this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0;
+        const tourStepHeight = typeof this.tourStep.nativeElement.getBoundingClientRect === 'function' ? this.tourStep.nativeElement.getBoundingClientRect().height : 0;
+        const elementHeight = this.selectedElementRect.height + scrollAdjustment + tourStepHeight;
+
+        if ((this.windowRef.nativeWindow.innerHeight - this.topOfPageAdjustment) < elementHeight) {
+            return elementHeight - (this.windowRef.nativeWindow.innerHeight - this.topOfPageAdjustment);
+        }
+        return 0;
+    }
+}

dmp-frontend/src/app/library/guided-tour/guided-tour.constants.ts

@@ -0,0 +1,74 @@
+
+export interface TourStep {
+    /** Selector for element that will be highlighted */
+    selector?: string;
+    /** Tour title text */
+    title?: string;
+    /** Tour step text */
+    content: string;
+    /** Where the tour step will appear next to the selected element */
+    orientation?: Orientation | OrientationConfiguration[];
+    /** Action that happens when the step is opened */
+    action?: () => void;
+    /** Action that happens when the step is closed */
+    closeAction?: () => void;
+    /** Skips this step, this is so you do not have create multiple tour configurations based on user settings/configuration */
+    skipStep?: boolean;
+    /** Adds some padding for things like sticky headers when scrolling to an element */
+    scrollAdjustment?: number;
+    /** Adds default padding around tour highlighting. Does not need to be true for highlightPadding to work */
+    useHighlightPadding?: boolean;
+    /** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */
+    highlightPadding?: number;
+
+    /** CUSTOM ADD: True if the tour has no other step */
+    isStepUnique?: boolean;
+    /** CUSTOM ADD: Adds offset in pixels to the calculated overlayTop */
+    customTopOffset?: number;
+}
+
+export interface GuidedTour {
+    /** Identifier for tour */
+    tourId: string;
+    /** Use orb to start tour */
+    useOrb?: boolean;
+    /** Steps fo the tour */
+    steps: TourStep[];
+    /** Function will be called when tour is skipped */
+    skipCallback?: (stepSkippedOn: number) => void;
+    /** Function will be called when tour is completed */
+    completeCallback?: () => void;
+    /** Minimum size of screen in pixels before the tour is run, if the tour is resized below this value the user will be told to resize */
+    minimumScreenSize?: number;
+    /** Dialog shown if the window width is smaller than the defined minimum screen size. */
+    resizeDialog?: {
+        /** Resize dialog title text */
+        title?: string;
+        /** Resize dialog text */
+        content: string;
+    }
+    /**
+     * Prevents the tour from advancing by clicking the backdrop.
+     * This should only be set if you are completely sure your tour is displaying correctly on all screen sizes otherwise a user can get stuck.
+     */
+    preventBackdropFromAdvancing?: boolean;
+}
+
+export interface OrientationConfiguration {
+    /** Where the tour step will appear next to the selected element */
+    orientationDirection: Orientation;
+    /** When this orientation configuration starts in pixels */
+    maximumSize?: number;
+}
+
+export class Orientation {
+    public static readonly Bottom = 'bottom';
+    public static readonly BottomLeft = 'bottom-left';
+    public static readonly BottomRight = 'bottom-right';
+    public static readonly Center = 'center';
+    public static readonly Left = 'left';
+    public static readonly Right = 'right';
+    public static readonly Top = 'top';
+    public static readonly TopLeft = 'top-left';
+    public static readonly TopRight = 'top-right';
+}

dmp-frontend/src/app/library/guided-tour/guided-tour.module.ts

@@ -0,0 +1,21 @@
+import { GuidedTourService } from './guided-tour.service';
+import { GuidedTourComponent } from './guided-tour.component';
+import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WindowRefService } from './windowref.service';
+
+@NgModule({
+  declarations: [GuidedTourComponent],
+  imports: [CommonModule],
+  providers: [WindowRefService],
+  exports: [GuidedTourComponent],
+  entryComponents: [GuidedTourComponent],
+})
+export class GuidedTourModule {
+  public static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: GuidedTourModule,
+      providers: [ErrorHandler, GuidedTourService],
+    };
+  }
+}

dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts

@@ -0,0 +1,229 @@
+import { debounceTime } from 'rxjs/operators';
+import { ErrorHandler, Inject, Injectable } from '@angular/core';
+import { Observable, Subject, fromEvent } from 'rxjs';
+import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants';
+import { cloneDeep } from 'lodash';
+import { DOCUMENT } from "@angular/common";
+import { WindowRefService } from "./windowref.service";
+
+@Injectable()
+export class GuidedTourService {
+    public guidedTourCurrentStepStream: Observable<TourStep>;
+    public guidedTourOrbShowingStream: Observable<boolean>;
+
+    private _guidedTourCurrentStepSubject = new Subject<TourStep>();
+    private _guidedTourOrbShowingSubject = new Subject<boolean>();
+    private _currentTourStepIndex = 0;
+    private _currentTour: GuidedTour = null;
+    private _onFirstStep = true;
+    private _onLastStep = true;
+    private _onResizeMessage = false;
+
+    constructor(
+        public errorHandler: ErrorHandler,
+        private windowRef: WindowRefService,
+        @Inject(DOCUMENT) private dom
+    ) {
+        this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable();
+        this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable();
+
+        fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => {
+            if (this._currentTour && this._currentTourStepIndex > -1) {
+                if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) {
+                    this._onResizeMessage = true;
+                    const dialog = this._currentTour.resizeDialog || {
+                        title: 'Please resize',
+                        content: 'You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour.'
+                    };
+
+                    this._guidedTourCurrentStepSubject.next(dialog);
+                } else {
+                    this._onResizeMessage = false;
+                    this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                }
+            }
+        });
+    }
+
+    public nextStep(): void {
+        if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
+            this._currentTour.steps[this._currentTourStepIndex].closeAction();
+        }
+        if (this._currentTour.steps[this._currentTourStepIndex + 1]) {
+            this._currentTourStepIndex++;
+            this._setFirstAndLast();
+            if (this._currentTour.steps[this._currentTourStepIndex].action) {
+                this._currentTour.steps[this._currentTourStepIndex].action();
+                // Usually an action is opening something so we need to give it time to render.
+                setTimeout(() => {
+                    if (this._checkSelectorValidity()) {
+                        this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                    } else {
+                        this.nextStep();
+                    }
+                });
+            } else {
+                if (this._checkSelectorValidity()) {
+                    this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                } else {
+                    this.nextStep();
+                }
+            }
+        } else {
+            if (this._currentTour.completeCallback) {
+                this._currentTour.completeCallback();
+            }
+            this.resetTour();
+        }
+    }
+
+    public backStep(): void {
+        if (this._currentTour.steps[this._currentTourStepIndex].closeAction) {
+            this._currentTour.steps[this._currentTourStepIndex].closeAction();
+        }
+        if (this._currentTour.steps[this._currentTourStepIndex - 1]) {
+            this._currentTourStepIndex--;
+            this._setFirstAndLast();
+            if (this._currentTour.steps[this._currentTourStepIndex].action) {
+                this._currentTour.steps[this._currentTourStepIndex].action();
+                setTimeout(() => {
+                    if (this._checkSelectorValidity()) {
+                        this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                    } else {
+                        this.backStep();
+                    }
+                });
+            } else {
+                if (this._checkSelectorValidity()) {
+                    this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+                } else {
+                    this.backStep();
+                }
+            }
+        } else {
+            this.resetTour();
+        }
+    }
+
+    public skipTour(): void {
+        if (this._currentTour.skipCallback) {
+            this._currentTour.skipCallback(this._currentTourStepIndex);
+        }
+        this.resetTour();
+    }
+
+    public resetTour(): void {
+        this.dom.body.classList.remove('tour-open');
+        this._currentTour = null;
+        this._currentTourStepIndex = 0;
+        this._guidedTourCurrentStepSubject.next(null);
+    }
+
+    public startTour(tour: GuidedTour): void {
+        this._currentTour = cloneDeep(tour);
+        this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep);
+        this._currentTourStepIndex = 0;
+        this._setFirstAndLast();
+        this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb);
+        if (
+            this._currentTour.steps.length > 0
+            && (!this._currentTour.minimumScreenSize
+                || (this.windowRef.nativeWindow.innerWidth >= this._currentTour.minimumScreenSize))
+        ) {
+            if (!this._currentTour.useOrb) {
+                this.dom.body.classList.add('tour-open');
+            }
+            if (this._currentTour.steps[this._currentTourStepIndex].action) {
+                this._currentTour.steps[this._currentTourStepIndex].action();
+            }
+            if (this._checkSelectorValidity()) {
+                this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex));
+            } else {
+                this.nextStep();
+            }
+        }
+    }
+
+    public activateOrb(): void {
+        this._guidedTourOrbShowingSubject.next(false);
+        this.dom.body.classList.add('tour-open');
+    }
+
+    private _setFirstAndLast(): void {
+        this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex;
+        this._onFirstStep = this._currentTourStepIndex === 0;
+    }
+
+    private _checkSelectorValidity(): boolean {
+        if (this._currentTour.steps[this._currentTourStepIndex].selector) {
+            const selectedElement = this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector);
+            if (!selectedElement) {
+                this.errorHandler.handleError(
+                    // If error handler is configured this should not block the browser.
+                    new Error(`Error finding selector ${this._currentTour.steps[this._currentTourStepIndex].selector} on step ${this._currentTourStepIndex + 1} during guided tour: ${this._currentTour.tourId}`)
+                );
+                return false;
+            }
+        }
+        return true;
+    }
+
+    public get onLastStep(): boolean {
+        return this._onLastStep;
+    }
+
+    public get onFirstStep(): boolean {
+        return this._onFirstStep;
+    }
+
+    public get onResizeMessage(): boolean {
+        return this._onResizeMessage;
+    }
+
+    public get currentTourStepDisplay(): number {
+        return this._currentTourStepIndex + 1;
+    }
+
+    public get currentTourStepCount(): number {
+        return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0;
+    }
+
+    public get preventBackdropFromAdvancing(): boolean {
+        return this._currentTour && this._currentTour.preventBackdropFromAdvancing;
+    }
+
+    private getPreparedTourStep(index: number): TourStep {
+        return this.setTourOrientation(this._currentTour.steps[index]);
+    }
+
+    private setTourOrientation(step: TourStep): TourStep {
+        const convertedStep = cloneDeep(step);
+        if (
+            convertedStep.orientation
+            && !(typeof convertedStep.orientation === 'string')
+            && (convertedStep.orientation as OrientationConfiguration[]).length
+        ) {
+            (convertedStep.orientation as OrientationConfiguration[]).sort((a: OrientationConfiguration, b: OrientationConfiguration) => {
+                if (!b.maximumSize) {
+                    return 1;
+                }
+                if (!a.maximumSize) {
+                    return -1;
+                }
+                return b.maximumSize - a.maximumSize;
+            });
+
+            let currentOrientation: Orientation = Orientation.Top;
+            (convertedStep.orientation as OrientationConfiguration[]).forEach(
+                (orientationConfig: OrientationConfiguration) => {
+                    if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) {
+                        currentOrientation = orientationConfig.orientationDirection;
+                    }
+                }
+            );
+
+            convertedStep.orientation = currentOrientation;
+        }
+        return convertedStep;
+    }
+}

dmp-frontend/src/app/library/guided-tour/windowref.service.ts

@@ -0,0 +1,38 @@
+import { Inject, Injectable, PLATFORM_ID } from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
+
+function getWindow(): any {
+    return window;
+}
+
+function getMockWindow(): any {
+    return {
+        innerWidth: 0,
+        innerHeight: 0,
+        scrollY: 0,
+        scrollX: 0,
+        pageYOffset: 0,
+        pageXOffset: 0,
+        scroll: () => {},
+        scrollTo: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+    }
+}
+
+@Injectable()
+export class WindowRefService {
+    private readonly isBrowser: boolean = false;
+
+    get nativeWindow(): any {
+        if (this.isBrowser) {
+            return getWindow();
+        } else {
+            return getMockWindow();
+        }
+    }
+
+    constructor(@Inject(PLATFORM_ID) platformId) {
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html

@@ -54,7 +54,7 @@
 		<mat-expansion-panel *ngFor="let section of dataModel.sections; let i=index;" #panel>
 			<mat-expansion-panel-header>
 				<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</mat-panel-title>
-				<div class="row">
+				<div class="row deleteBtn">
 					<!-- <span class="col">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</span> -->
 					<button mat-icon-button type="button" class="deleteBtn col-auto" (click)="DeleteSectionInSection(i);" [disabled]="viewOnly">
 						<mat-icon>delete</mat-icon>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.scss

@@ -4,5 +4,5 @@
 	}
 }
 .deleteBtn{
-	margin-right:0.7em;
+	margin-right:2em;
 }

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.html

@@ -55,7 +55,7 @@
 							<mat-expansion-panel-header>
 								<mat-panel-title>{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}
 								</mat-panel-title>
-								<button mat-icon-button type="button" (click)="DeleteSection(i);" [disabled]="viewOnly">
+								<button mat-icon-button type="button" class="deleteBtn" (click)="DeleteSection(i);" [disabled]="viewOnly">
 									<mat-icon>delete</mat-icon>
 								</button>
 							</mat-expansion-panel-header>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/dataset-profile-editor.component.scss

@@ -3,3 +3,7 @@
 		width: 100%;
 	}
 }
+
+.deleteBtn{
+	margin-right:2em;
+}

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

@@ -1,9 +1,7 @@
 <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
+		<div *ngIf="this.dashboardStatisticsData">
-				&& dashboardStatisticsData?.totalDataSetCount === 0
+			<div *ngIf="!this.hasDmps()">
-				&& dashboardStatisticsData?.totalGrantCount === 0
-				&& dashboardStatisticsData?.totalOrganisationCount === 0">
 				<div class="main-content">
 					<div class="col-auto">
 						<div class="card" [style.display]="isVisible ? 'block' : 'none'">
@@ -32,10 +30,7 @@
 					</div>
 				</div>
 			</div>
-		<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount !== 0
+			<div *ngIf="this.hasDmps()">
-				|| dashboardStatisticsData?.totalDataSetCount !== 0
-				|| dashboardStatisticsData?.totalGrantCount !== 0
-				|| dashboardStatisticsData?.totalOrganisationCount !== 0">
 				<div class="main-content">
 					<div class="col">
 						<div class="card col-auto mt-0" [style.display]="isVisible ? 'block' : 'none'">
@@ -89,15 +84,87 @@
 						<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
 					</div>
 				</div>
-
 			</div>
 		</div>
 	</div>
 
-
+	<!-- Home screen on log out -->
-
+	<div class="col p-0" *ngIf="!this.isAuthenticated()">
-
+		<div class="col-auto">
-
+			<div class="row">
+				<div class="col header-text-container">
+					<h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
+					<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
+				</div>
+			</div>
+			<div class="main-content">
+				<div class="col">
+					<div class="row">
+						<div class="col d-flex flex-column">
+							<div class="card non-auth-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>
+								<div class="d-flex flex-column align-items-center non-auth-title-container">
+									<h4 class="pt-4">{{'DASHBOARD.TITLE' | translate}}</h4>
+									<p class="col-auto app-info">{{'DASHBOARD.INFO-TEXT' | translate}}</p>
+								</div>
+							</div>
+							<div *ngIf="hasDmps()" class="col activity">
+								<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
+								<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
+									<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
+										<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
+										<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
+									</mat-tab>
+									<mat-tab label="{{'DASHBOARD.PUBLIC-DMPS' | translate}}  ({{totalDmps}})">
+										<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
+										<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
+									</mat-tab>
+									<mat-tab label="{{'DASHBOARD.PUBLIC-DATASETS' | translate}} ({{totalDatasets}})">
+										<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
+										<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
+										<!-- <div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
+												<button mat-raised-button class="add-dataset" [routerLink]="['/datasets/new']">
+													<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
+												</button>
+											</div> -->
+									</mat-tab>
+								</mat-tab-group>
+							</div>
+						</div>
+						<div class="col-auto">
+							<div *ngIf="!hasDmps()" class="ml-auto pl-4 personal-usage-block">
+								<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
+								<div class="counter-zero">0</div>
+								<a>{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
+								<div class="counter-zero">0</div>
+								<a>{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
+								<div class="counter-zero">0</div>
+								<a class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
+								<div class="counter-zero">0</div>
+								<a class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
+							</div>
+							<div *ngIf="hasDmps()" class="ml-auto stats">
+								<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">{{'DASHBOARD.PUBLIC-DMPS' | translate}}</a>
+								<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
+									{{dashboardStatisticsData?.totalDataSetCount}}</div>
+								<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.PUBLIC-DATASETS' | translate}}</a>
+								<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
+									{{dashboardStatisticsData?.totalGrantCount}}</div>
+								<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">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
 
 
 

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

@@ -3,6 +3,7 @@
   padding-top: 4.68rem;
   padding-bottom: 3rem;
   // padding-left: 3.31rem;
+  //   padding-left: 0rem;
   padding-left: 1rem;
   margin: 0;
   display: flex;
@@ -15,7 +16,10 @@
   border-radius: 4px;
   max-width: 712px;
   min-width: 17.5rem;
+  margin-top: 0rem;
   margin-bottom: 3.75rem;
+  //   margin-left: 3rem;
+  //   min-height: 40vh;
   /* height: 407px; */
   opacity: 1;
 }
@@ -107,7 +111,7 @@
   letter-spacing: 0px;
   color: #212121;
   opacity: 0.85;
-  padding-top: 2rem;
+  padding-top: 2.5rem;
   padding-bottom: 0.5rem;
 }
 
@@ -143,6 +147,10 @@
   padding-bottom: 1.2rem;
 }
 
+.activity {
+  padding-left: 3rem;
+}
+
 .dmp-card,
 .dataset-card {
   min-width: 712px;
@@ -333,6 +341,33 @@ input[type="text"] {
   margin-bottom: 1.5rem;
 }
 
+.header-text-container {
+  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(35, 188, 186, 1) 100%, rgba(0, 212, 255, 1) 100%);
+  color: white;
+  height: fit-content;
+  padding-left: 5.8em;
+  padding-right: 10em;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+.personal-usage-block {
+  padding: 0rem 7em 0rem 3rem;
+}
+
+.non-auth-main-container {
+  padding-left: 0;
+}
+
+.non-auth-card {
+  margin-left: 3rem;
+}
+
+.app-info {
+  font-size: 1rem;
+  padding: 1rem 2rem;
+}
+
 ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,
 .mat-tab-nav-bar.mat-primary .mat-ink-bar {
   background: #129d99;
@@ -350,6 +385,15 @@ input[type="text"] {
   font-weight: 700;
 }
 
+::ng-deep .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}
+
 /* ::ng-deep .mat-tab-group {
 	height: 100%;
   }

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

@@ -82,7 +82,6 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 
 
 	ngOnInit() {
-
 		// if (this.isAuthenticated()) {
 		// 	this.userService.getRecentActivity()
 		// 		.pipe(takeUntil(this._destroyed))
@@ -111,8 +110,8 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 					//let data = results['payload'];
 					this.dashboardStatisticsData = results;
 				});
-			this.getPublicDmps();
+			// this.getPublicDmps();
-			this.getPublicDatasets();
+			// this.getPublicDatasets();
 		} else {
 			this.dashboardService.getUserStatistics()
 				.pipe(takeUntil(this._destroyed))
@@ -224,6 +223,17 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
 		}
 	}
 
+	public hasDmps(): boolean {
+		if (this.dashboardStatisticsData) {
+			return this.dashboardStatisticsData.totalDataManagementPlanCount !== 0
+				|| this.dashboardStatisticsData.totalDataSetCount !== 0
+				|| this.dashboardStatisticsData.totalGrantCount !== 0
+				|| this.dashboardStatisticsData.totalOrganisationCount !== 0;
+		} else {
+			return false;
+		}
+	}
+
 	// viewAllPublicDmpsClicked() {
 	// 	this.router.navigate(['/explore-plans']);
 	// }

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

@@ -26,7 +26,7 @@
 					<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="col-auto dataset-title">{{activity.label}}</div>
 				<div class="dataset-subtitle">
 					<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
 					<span>.</span>

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

@@ -69,7 +69,7 @@ export class DraftsComponent extends BaseComponent implements OnInit {
 		// const fields: Array<string> = [];
 		// fields.push('-modified');
 		this.formGroup.get('order').setValue(this.order.MODIFIED);
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
 		dmpDataTableRequest.criteria = new DatasetCriteria();
 		dmpDataTableRequest.criteria.status = DmpStatus.Draft;
@@ -301,7 +301,7 @@ export class DraftsComponent extends BaseComponent implements OnInit {
 	refresh(): void {
 		// const fields: Array<string> = [];
 		// fields.push('-modified');
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		this.startIndex = 0;
 		const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
 		dmpDataTableRequest.criteria = new DatasetCriteria();
@@ -317,7 +317,7 @@ export class DraftsComponent extends BaseComponent implements OnInit {
 	public loadMore() {
 		this.startIndex = this.startIndex + this.pageSize;
 		// const fields: Array<string> = ["-modified"];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
 		request.criteria = new DatasetCriteria();
 		request.criteria.status = DmpStatus.Draft;

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

@@ -199,6 +199,15 @@ input[type="text"] {
 	padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
 
+.empty-list {
+	text-align: center;
+	font-weight: 300;
+	font-size: 1.25rem;
+	letter-spacing: 0px;
+	color: #212121;
+	opacity: 0.6;
+  }
+
 /* th {
   text-transform: uppercase;
 }

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

@@ -1,12 +1,16 @@
+<div class="col-md-12 d-flex justify-content-center" *ngIf="allRecentActivities == null">
+	<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
+</div>
 <div *ngIf="allRecentActivities != null">
 	<div class="d-flex flex-direction-row pt-4">
 		<!-- Sort by -->
 		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 		<mat-form-field appearance="outline" class="sort-form col-auto">
 			<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-				<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+				<mat-option *ngIf="!publicMode" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+				<mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option>
 				<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
-				<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
+				<mat-option *ngIf="!publicMode" [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
 				<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
 			</mat-select>
 		</mat-form-field>
@@ -22,10 +26,12 @@
 	<div *ngFor="let activity of allRecentActivities">
 		<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()">
 			<div class="dmp-card">
-				<a [routerLink]="['../plans/overview/' + activity.id]" class="pointer">
+				<!-- <a (click)="redirect(activity.id, activity.type)" class="pointer"> -->
+				<a [routerLink]="navigateToUrl(activity.id, activity.type)" 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.modified | date: "longDate" }}</div>
+						<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modified | date: "longDate" }}</div>
+						<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | date: "longDate" }}</div>
 					</div>
 					<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{activity.title}}</div>
 					<div class="dmp-subtitle">
@@ -47,7 +53,8 @@
 							<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{dataset.label}}</div>
 						</div>
 					</div>
-					<a class="d-flex justify-content-center pb-3 show-more" *ngIf="getDatasets(activity).length > 3" [routerLink]="['../plans/overview/' + activity.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
+					<!-- <a class="d-flex justify-content-center pb-3 show-more" *ngIf="getDatasets(activity).length > 3" (click)="redirect(activity.id, activity.type)"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a> -->
+					<a class="d-flex justify-content-center pb-3 show-more" *ngIf="getDatasets(activity).length > 3" [routerLink]="navigateToUrl(activity.id, activity.type)"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
 				</a>
 				<div class="dmp-card-actions">
 					<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a>
@@ -90,12 +97,14 @@
 		</div>
 		<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dataset.valueOf()">
 			<div class="dataset-card">
-				<a [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
+				<!-- <a (click)="redirect(activity.id, activity.type)" class="pointer"> -->
+				<a [routerLink]="navigateToUrl(activity.id, activity.type)" class="pointer">
 					<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 *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
+						<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.publishedAt | date:"longDate"}}</div>
 					</div>
-					<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.title}}</div>
+					<div class="col-auto dataset-title">{{activity.title}}</div>
 					<div class="dataset-subtitle">
 						<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
 						<span>.</span>

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

@@ -32,6 +32,7 @@ import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dat
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
 import { Location } from '@angular/common';
 import { LockService } from '@app/core/services/lock/lock.service';
+import { DatasetUrlListing } from '@app/core/model/dataset/dataset-url-listing';
 
 @Component({
 	selector: 'app-recent-edited-activity',
@@ -54,6 +55,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		like: new FormControl(),
 		order: new FormControl()
 	});
+	publicMode = false;
 
 	order = RecentActivityOrder;
 
@@ -76,8 +78,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	ngOnInit() {
 		if (this.isAuthenticated()) {
 			this.formGroup.get('order').setValue(this.order.MODIFIED);
-			const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+			const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
-			// const fields: Array<string> = ["-modified"];
 			const allDataTableRequest: DataTableMultiTypeRequest<RecentActivityCriteria> = new DataTableMultiTypeRequest(0, 0, 5, { fields: fields });
 			allDataTableRequest.criteria = new RecentActivityCriteria();
 			allDataTableRequest.criteria.like = "";
@@ -101,10 +102,33 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 			this.formGroup.get('order').valueChanges
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(x => this.refresh());
+		} else {
+			this.publicMode = true;
+			this.formGroup.get('order').setValue(this.order.PUBLISHED);
+			const allDataTableRequest = this.setPublicDataTableRequest();
+			this.dashboardService
+				.getRecentActivity(allDataTableRequest)
+				.subscribe(response => {
+					this.allRecentActivities = response;
+					this.allRecentActivities.forEach(recentActivity => {
+						if (recentActivity.type === RecentActivityType.Dataset) {
+							this.datasetOffset = this.datasetOffset + 1;
+						} else if (recentActivity.type === RecentActivityType.Dmp) {
+							this.dmpOffset = this.dmpOffset + 1;
+						}
+					});
+					this.totalCountRecentEdited.emit(this.allRecentActivities.length);
+				});
+			this.formGroup.get('like').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
+			this.formGroup.get('order').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
 		}
 	}
 
-	getDatasets(activity: RecentDmpModel): RecentDatasetModel[] {
+	getDatasets(activity: RecentDmpModel): DatasetUrlListing[] {
 		return activity.datasets;
 	}
 
@@ -120,6 +144,17 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		return activity.dmpId;
 	}
 
+	private setPublicDataTableRequest(fields?: Array<string>): DataTableMultiTypeRequest<RecentActivityCriteria> {
+		const criteria = new RecentActivityCriteria();
+		criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		if (!fields) {
+			fields = new Array<string>('-publishedAt');
+		}
+		const dataTableRequest: DataTableMultiTypeRequest<RecentActivityCriteria> = new DataTableMultiTypeRequest(this.dmpOffset, this.datasetOffset, this.pageSize, { fields: fields });
+		dataTableRequest.criteria = criteria;
+		return dataTableRequest;
+	}
+
 	// getPublic(activity: RecentDmpModel): boolean {
 	// 	return activity.isPublic;
 	// }
@@ -229,11 +264,19 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 				return;
 			}
 			case RecentActivityType.Dataset: {
-				this.router.navigate(["datasets/edit/" + id]);
+				if (this.isAuthenticated()) {
+					this.router.navigate(['../datasets/overview/' + id]);
+				} else {
+					this.router.navigate(['../explore/publicOverview', id]);
+				}
 				return;
 			}
 			case RecentActivityType.Dmp: {
-				this.router.navigate(["plans/overview/" + id]);
+				if (this.isAuthenticated()) {
+					this.router.navigate(['../plans/overview/' + id]);
+				} else {
+					this.router.navigate(['../explore-plans/publicOverview', id]);
+				}
 				return;
 			}
 			default:
@@ -241,9 +284,29 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 		}
 	}
 
-	// navigateToUrl() {
+	navigateToUrl(id: string, type: RecentActivityType): string[] {
-	// 	this.router.navigate(["plans/"]);
+		switch (type) {
-	// }
+			case RecentActivityType.Grant: {
+				return ["grants/edit/" + id];
+			}
+			case RecentActivityType.Dataset: {
+				if (this.isAuthenticated()) {
+					return ['../datasets/overview/' + id];
+				} else {
+					return ['../explore/publicOverview', id];
+				}
+			}
+			case RecentActivityType.Dmp: {
+				if (this.isAuthenticated()) {
+					return ['../plans/overview/' + id];
+				} else {
+					return ['../explore-plans/publicOverview', id];
+				}
+			}
+			default:
+				throw new Error("Unsupported Activity Type ");
+		}
+	}
 
 	roleDisplay(value: any) {
 		const principal: Principal = this.authentication.current();
@@ -458,7 +521,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	}
 
 	refresh(): void {
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		// const fields: Array<string> = ["-modified"];
 		this.startIndex = 0;
 		const allDataTableRequest: DataTableMultiTypeRequest<RecentActivityCriteria> = new DataTableMultiTypeRequest(0, 0, this.pageSize, { fields: fields });
@@ -481,7 +544,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 	}
 
 	public loadMore() {
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		// const fields: Array<string> = ["-modified"];
 		const request = new DataTableMultiTypeRequest<RecentActivityCriteria>(this.dmpOffset, this.datasetOffset, this.pageSize, { fields: fields });
 		request.criteria = new RecentActivityCriteria();
@@ -532,7 +595,7 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 					index2++;
 				}
 			} else if (order === 'label') {
-				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].title < arr2[index2].title))) {
+				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].title.localeCompare(arr2[index2].title)))) {
 					merged[current] = arr1[index1];
 					index1++;
 				} else {
@@ -547,6 +610,14 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
 					merged[current] = arr2[index2];
 					index2++;
 				}
+			} else if (order === "publishedAt") {
+				if (!isArr1Depleted && (isArr2Depleted || (new Date(arr1[index1].publishedAt) > new Date(arr2[index2].publishedAt)))) {
+					merged[current] = arr1[index1];
+					index1++;
+				} else {
+					merged[current] = arr2[index2];
+					index2++;
+				}
 			}
 			current++;
 		}

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

@@ -4,9 +4,10 @@
 		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 		<mat-form-field appearance="outline" class="sort-form col-auto">
 			<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-				<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+				<mat-option *ngIf="!publicMode" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+				<mat-option *ngIf="publicMode" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option>
 				<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
-				<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
+				<mat-option *ngIf="!publicMode" [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
 				<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
 			</mat-select>
 		</mat-form-field>
@@ -21,12 +22,13 @@
 	</div>
 	<div *ngFor="let activity of datasetActivities">
 		<div class="dataset-card">
-			<a [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
+			<a [routerLink]="goToOverview(activity.id)" class="pointer">
 				<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 *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
+					<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.dmpPublishedAt | date:"longDate"}}</div>
 				</div>
-				<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div>
+				<div class="col-auto dataset-title">{{activity.label}}</div>
 				<div class="dataset-subtitle">
 					<span class="col-auto">{{ roleDisplay(activity.users) }}</span>
 					<span>.</span>

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

@@ -43,7 +43,7 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 		like: new FormControl(),
 		order: new FormControl()
 	});
-	// publicMode = false;
+	publicMode = false;
 
 	order = RecentActivityOrder;
 
@@ -66,7 +66,7 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 		if (this.isAuthenticated()) {
 			// const fields: Array<string> = ["-modified"];
 			this.formGroup.get('order').setValue(this.order.MODIFIED);
-			const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+			const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 			const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
 			datasetDataTableRequest.criteria = new DatasetCriteria();
 			datasetDataTableRequest.criteria.like = "";
@@ -83,16 +83,46 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 			this.formGroup.get('order').valueChanges
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(x => this.refresh());
+		} else {
+			this.publicMode = true;
+			this.formGroup.get('order').setValue(this.order.DATASETPUBLISHED);
+			const dataTableRequest = this.setPublicDataTableRequest();
+			this.datasetService.getPaged(dataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(response => {
+				this.datasetActivities = response.data;
+				this.totalCount = response.totalCount;
+				this.totalCountDatasets.emit(this.datasetActivities.length);
+			});
+			this.formGroup.get('like').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
+			this.formGroup.get('order').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
 		}
 	}
 
+	setPublicDataTableRequest(fields?: Array<string>): DataTableRequest<DatasetCriteria> {
+		const datasetCriteria = new DatasetCriteria();
+		datasetCriteria.allVersions = false;
+		datasetCriteria.isPublic = true;
+		datasetCriteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		if (!fields) {
+			fields = new Array<string>('-dmp:publishedAt|join|');
+		}
+		const dataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
+		dataTableRequest.criteria = datasetCriteria;
+		return dataTableRequest;
+	}
+
 	refresh(): void {
-		// const fields: Array<string> = ["-modified"];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
 		this.startIndex = 0;
-		const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
+
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
+		const datasetDataTableRequest = this.isAuthenticated() ? new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields);
+		if (this.isAuthenticated()) {
 			datasetDataTableRequest.criteria = new DatasetCriteria();
-		datasetDataTableRequest.criteria.like = this.formGroup.get("like").value;
+			datasetDataTableRequest.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		}
 		this.datasetService
 			.getPaged(datasetDataTableRequest)
 			.subscribe(response => {
@@ -104,12 +134,13 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 
 	public loadMore() {
 		this.startIndex = this.startIndex + this.pageSize;
-		// const fields: Array<string> = ["-modified"];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
-		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
 
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
+		const request = this.isAuthenticated() ? new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields);
+		if (this.isAuthenticated()) {
 			request.criteria = new DatasetCriteria();
 			request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		}
 
 		this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (!result) { return []; }
@@ -128,6 +159,14 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 		if (principal) return principal.id === activity.users.find(x => x.role === Role.Owner).id;
 	}
 
+	goToOverview(id: string): string[] {
+		if (this.isAuthenticated()) {
+			return ['../datasets/overview/' + id];
+		} else {
+			return ['../explore/publicOverview', id];
+		}
+	}
+
 	roleDisplay(value: any) {
 		const principal: Principal = this.authentication.current();
 		let role: number;
@@ -345,10 +384,8 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 		let current = 0;
 
 		while (current < (arr1.length + arr2.length)) {
-
 			let isArr1Depleted = index1 >= arr1.length;
 			let isArr2Depleted = index2 >= arr2.length;
-
 			if (order === 'modified') {
 				if (!isArr1Depleted && (isArr2Depleted || (new Date(arr1[index1].modified) > new Date(arr2[index2].modified)))) {
 					merged[current] = arr1[index1];
@@ -366,7 +403,7 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 					index2++;
 				}
 			} else if (order === 'label') {
-				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label < arr2[index2].label))) {
+				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label.localeCompare(arr2[index2].label)))) {
 					merged[current] = arr1[index1];
 					index1++;
 				} else {
@@ -381,6 +418,14 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
 					merged[current] = arr2[index2];
 					index2++;
 				}
+			} else if (order === 'dmp:publishedAt|join|') {
+				if (!isArr1Depleted && (isArr2Depleted || (new Date(arr1[index1].dmpPublishedAt) > new Date(arr2[index2].dmpPublishedAt)))) {
+					merged[current] = arr1[index1];
+					index1++;
+				} else {
+					merged[current] = arr2[index2];
+					index2++;
+				}
 			}
 			current++;
 		}

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

@@ -4,9 +4,10 @@
 		<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 		<mat-form-field appearance="outline" class="sort-form col-auto">
 			<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-				<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+				<mat-option *ngIf="!publicMode" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+				<mat-option *ngIf="publicMode" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option>
 				<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
-				<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
+				<mat-option *ngIf="!publicMode" [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
 				<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
 			</mat-select>
 		</mat-form-field>
@@ -21,10 +22,11 @@
 	</div>
 	<div *ngFor="let activity of dmpActivities">
 		<div class="dmp-card">
-			<a [routerLink]="['../plans/overview/' + activity.id]" class="pointer">
+			<a [routerLink]="navigateToUrl(activity.id)" class="pointer">
 				<div class="d-flex flex-direction-row">
 					<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
-					<div class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | date: "longDate" }}</div>
+					<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | date: "longDate" }}</div>
+					<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | date: "longDate" }}</div>
 				</div>
 				<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{activity.label}}</div>
 				<div class="dmp-subtitle">
@@ -46,7 +48,7 @@
 						<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{dataset.label}}</div>
 					</div>
 				</div>
-				<a class="d-flex justify-content-center pb-3 show-more" *ngIf="activity.datasets.length > 3" [routerLink]="['../plans/overview/' + activity.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
+				<a class="d-flex justify-content-center pb-3 show-more" *ngIf="activity.datasets.length > 3" [routerLink]="navigateToUrl(activity.id)"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
 			</a>
 			<div class="dmp-card-actions">
 				<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a>

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

@@ -24,6 +24,7 @@ import { FormBuilder, FormControl } from '@angular/forms';
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
 import { Location } from '@angular/common';
 import { LockService } from '@app/core/services/lock/lock.service';
+import { ExploreDmpCriteriaModel } from '@app/core/query/explore-dmp/explore-dmp-criteria';
 
 @Component({
 	selector: 'app-recent-edited-dmp-activity',
@@ -46,6 +47,7 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 		like: new FormControl(),
 		order: new FormControl()
 	});
+	publicMode = false;
 
 	order = RecentActivityOrder;
 
@@ -68,7 +70,7 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 		if (this.isAuthenticated()) {
 			// const fields: Array<string> = ["-modified"];
 			this.formGroup.get('order').setValue(this.order.MODIFIED);
-			const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+			const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 			const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, 5, { fields: fields });
 			dmpDataTableRequest.criteria = new DmpCriteria();
 			dmpDataTableRequest.criteria.like = "";
@@ -94,7 +96,6 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 			this.formGroup.get('order').valueChanges
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(x => this.refresh());
-
 			// const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
 			// datasetDataTableRequest.criteria = new DatasetCriteria();
 			// datasetDataTableRequest.criteria.like = "";
@@ -110,6 +111,22 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 			// 			this.allRecentActivities.push(recentActivity)
 			// 		})
 			// 	});
+		} else {
+			this.publicMode = true;
+			this.formGroup.get('order').setValue(this.order.PUBLISHED);
+			const dataTableRequest = this.setPublicDataTableRequest();
+			this.dmpService.getPaged(dataTableRequest, "listing").pipe(takeUntil(this._destroyed)).subscribe(response => {
+				if (!response) { return []; }
+				this.dmpActivities = response.data;
+				this.totalCount = response.totalCount;
+				this.totalCountDmps.emit(this.dmpActivities.length);
+			});
+			this.formGroup.get('like').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
+			this.formGroup.get('order').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => this.refresh());
 		}
 	}
 
@@ -117,6 +134,20 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 		return !!this.authentication.current();
 	}
 
+	private setPublicDataTableRequest(fields?: Array<string>): DataTableRequest<DmpCriteria> {
+		const dmpCriteria = new DmpCriteria();
+		dmpCriteria.allVersions = false;
+		dmpCriteria.isPublic = true;
+		dmpCriteria.onlyPublic = true;
+		dmpCriteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		if (!fields) {
+			fields = new Array<string>('-publishedAt');
+		}
+		const dataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
+		dataTableRequest.criteria = dmpCriteria;
+		return dataTableRequest;
+	}
+
 	isUserOwner(activity: DmpListingModel): boolean {
 		const principal: Principal = this.authentication.current();
 		if (principal) return principal.id === activity.users.find(x => x.role === Role.Owner).id;
@@ -212,28 +243,21 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 		this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
 	}
 
-	redirect(id: string, type: RecentActivityType) {
+	redirect(id: string) {
-		switch (type) {
+		if (this.isAuthenticated()) {
-			case RecentActivityType.Grant: {
+			this.router.navigate(['../plans/overview/' + id]);
-				this.router.navigate(["grants/edit/" + id]);
+		} else {
-				return;
+			this.router.navigate(['../explore-plans/publicOverview', id]);
-			}
-			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() {
+	navigateToUrl(id: string): string[] {
-	// 	this.router.navigate(["plans/"]);
+		if (this.isAuthenticated()) {
-	// }
+			return ['../plans/overview/' + id];
+		} else {
+			return ['../explore-plans/publicOverview', id];
+		}
+	}
 
 	roleDisplay(value: any) {
 		const principal: Principal = this.authentication.current();
@@ -344,12 +368,13 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 	}
 
 	refresh(): void {
-		// const fields: Array<string> = ["-modified"];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
 		this.startIndex = 0;
-		const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
+		const dmpDataTableRequest = this.isAuthenticated() ? new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields);
+		if (this.isAuthenticated()) {
 			dmpDataTableRequest.criteria = new DmpCriteria();
-		dmpDataTableRequest.criteria.like = this.formGroup.get("like").value;
+			dmpDataTableRequest.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		}
 		this.dmpService
 			.getPaged(dmpDataTableRequest, "listing")
 			.subscribe(response => {
@@ -361,12 +386,13 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 
 	public loadMore() {
 		this.startIndex = this.startIndex + this.pageSize;
-		// const fields: Array<string> = ["-modified"];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
-		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
 
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
+		const request = this.isAuthenticated() ? new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields }) : this.setPublicDataTableRequest(fields);
+		if (this.isAuthenticated()) {
 			request.criteria = new DmpCriteria();
 			request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
+		}
 
 		this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (!result) { return []; }
@@ -405,7 +431,7 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 					index2++;
 				}
 			} else if (order === 'label') {
-				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label < arr2[index2].label))) {
+				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label.localeCompare(arr2[index2].label)))) {
 					merged[current] = arr1[index1];
 					index1++;
 				} else {
@@ -420,6 +446,14 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
 					merged[current] = arr2[index2];
 					index2++;
 				}
+			} else if (order === "publishedAt") {
+				if (!isArr1Depleted && (isArr2Depleted || (new Date(arr1[index1].publishedAt) > new Date(arr2[index2].publishedAt)))) {
+					merged[current] = arr1[index1];
+					index1++;
+				} else {
+					merged[current] = arr2[index2];
+					index2++;
+				}
 			}
 			current++;
 		}

dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.scss

@@ -0,0 +1,8 @@
+::ng-deep .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}

dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component.ts

@@ -7,6 +7,7 @@ import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
 @Component({
 	selector: 'dataset-criteria-dialog-component',
 	templateUrl: './dataset-criteria-dialog.component.html',
+	styleUrls: ['./dataset-criteria-dialog.component.scss']
 })
 
 export class DatasetCriteriaDialogComponent implements OnInit {

dmp-frontend/src/app/ui/dataset/listing/criteria/dataset-criteria.component.scss

@@ -21,7 +21,8 @@
 
 .filters-title {
   width: 93px;
-  color: #089dbb;
+  //   color: #089dbb;
+  color: #23bcba;
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -32,3 +33,12 @@
 .style-icon {
   color: #adadad;
 }
+
+::ng-deep .search-form .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html

@@ -27,13 +27,20 @@
 						<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 						<mat-form-field appearance="outline" class="sort-form col-auto pr-0">
 							<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-								<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+								<mat-option *ngIf="!isPublic" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+								<mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option>
 								<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
-								<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
+								<mat-option *ngIf="!isPublic" [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
 								<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
 							</mat-select>
 						</mat-form-field>
 						<!-- End of Sort by -->
+						<div class="d-flex flex-row ml-auto">
+							<!-- Guided Tour -->
+							<div class="center-content" [style.display]=" (!isVisible && isAuthenticated()) ? 'block' : 'none'" (click)="restartTour()">
+								{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}	
+							</div>					
+							<!-- End of Guided Tour -->
 							<!-- Search Filter-->
 							<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
 								<mat-icon matSuffix>search</mat-icon>
@@ -43,6 +50,7 @@
 							<!-- End of Search Filter -->
 						</div>
 					</div>
+				</div>
 				<div class="col-md-12 col-sm-12 col-md-9">
 					<div *ngFor="let item of listingItems; let i = index">
 						<app-dataset-listing-item-component [isPublic]="isPublic" [dataset]="item" [showDivider]="i != (listingItems.length - 1)"></app-dataset-listing-item-component>

dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss

@@ -137,6 +137,19 @@
   height: 45px;
 }
 
+.center-content {
+  width: 100%;
+  min-width: 10rem;
+  margin: auto;
+  padding: 0 15px;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.02rem;
+  color: #2D72D6;
+  cursor: pointer;
+}
+
 .search-form {
   // font-size: 12px;
   text-align: left;

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

@@ -24,6 +24,8 @@ import { MatDialog } from '@angular/material';
 import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
+import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
+import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
 
 @Component({
 	selector: 'app-dataset-listing-component',
@@ -59,6 +61,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 
 	scrollbar: boolean;
 	order = RecentActivityOrder;
+	dmpText: string;
+	datasetText: string;
 
 	constructor(
 		private datasetService: DatasetService,
@@ -68,14 +72,20 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 		private dmpService: DmpService,
 		private language: TranslateService,
 		private authService: AuthService,
-		public enumUtils: EnumUtils
+		public enumUtils: EnumUtils,
+		private authentication: AuthService,
+		private guidedTourService: GuidedTourService
 	) {
 		super();
 	}
 
 	ngOnInit() {
 		this.isPublic = this.router.url === '/explore';
+		if (this.isPublic) {
+			this.formGroup.get('order').setValue(this.order.DATASETPUBLISHED);
+		} else {
 			this.formGroup.get('order').setValue(this.order.MODIFIED);
+		}
 		if (!this.isPublic && isNullOrUndefined(this.authService.current())) {
 			this.router.navigateByUrl("/explore");
 		}
@@ -133,6 +143,29 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 		this.scrollbar = this.hasScrollbar();
 	}
 
+	public dashboardTour: GuidedTour = {
+        tourId: 'dmp-dataset-tour',
+        useOrb: true,
+        steps: [
+            {
+				selector: '.dmp-tour',
+                content: 'Step 1',
+				orientation: Orientation.Right,
+				isStepUnique: false
+            },
+            {
+                selector: '.dataset-tour',
+                content: 'Step 2',
+				orientation: Orientation.Right,
+				isStepUnique: false
+            }
+        ]
+	};
+
+	public isAuthenticated(): boolean {
+		return !(!this.authentication.current());
+	}
+
 	controlModified(): void {
 		// this.clearErrorModel();
 		// if (this.refreshCallback != null &&
@@ -152,7 +185,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 		// let fields: Array<string> = new Array();
 		// fields.push('-modified');
 		//if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
 		this.criteria.isPublic = this.isPublic;
 		request.criteria = this.criteria;
@@ -168,7 +201,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 	public loadMore() {
 		this.startIndex = this.startIndex + this.pageSize;
 		// const fields: Array<string> = ["-modified"];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
 		this.criteria.isPublic = this.isPublic;
 		request.criteria = this.criteria;
@@ -306,7 +339,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 					index2++;
 				}
 			} else if (order === 'label') {
-				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label < arr2[index2].label))) {
+				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label.localeCompare(arr2[index2].label)))) {
 					merged[current] = arr1[index1];
 					index1++;
 				} else {
@@ -321,12 +354,42 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
 					merged[current] = arr2[index2];
 					index2++;
 				}
+			} else if (order === 'dmp:publishedAt|join|') {
+				if (!isArr1Depleted && (isArr2Depleted || (new Date(arr1[index1].dmpPublishedAt) > new Date(arr2[index2].dmpPublishedAt)))) {
+					merged[current] = arr1[index1];
+					index1++;
+				} else {
+					merged[current] = arr2[index2];
+					index2++;
+				}
 			}
 			current++;
 		}
 		return merged;
 	}
 
+	public setDashboardTourDmpText(): void {
+		this.dmpText = this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
+		this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
+		this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
+		this.language.instant('DMP-LISTING.GET-IDEA');
+		this.dashboardTour.steps[0].title = this.dmpText;
+	}
+
+	public setDashboardTourDatasetText(): void {
+		this.datasetText = this.language.instant('DATASET-LISTING.TEXT-INFO') +
+		this.language.instant('DATASET-LISTING.LINK-PUBLIC-DATASETS') + ' ' +
+		this.language.instant('DATASET-LISTING.TEXT-INFO-REST') + '\n\n' +
+		this.language.instant('DATASET-LISTING.TEXT-INFO-PAR');
+		this.dashboardTour.steps[1].title = this.datasetText;
+	}
+
+	public restartTour(): void {
+		this.setDashboardTourDmpText();
+		this.setDashboardTourDatasetText();
+		this.guidedTourService.startTour(this.dashboardTour);
+	}
+
 	// rowClicked(dataset: DatasetListingModel) {
 	// 	this.router.navigate(['/datasets/edit/' + dataset.id]);
 	// }

dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html

@@ -1,10 +1,11 @@
 <div class="dataset-card">
-	<a [routerLink]="isPublic ? ['/datasets/publicOverview/' + dataset.id] : ['/datasets/overview/' + dataset.id]" class="pointer">
+	<a [routerLink]="getItemLink()" class="pointer">
 		<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}}: {{dataset.modified | date:"longDate"}}</div>
+			<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{dataset.modified | date:"longDate"}}</div>
+			<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{dataset.dmpPublishedAt | date:"longDate"}}</div>
 		</div>
-		<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{dataset.label}}</div>
+		<div class="col-auto dataset-title">{{dataset.label}}</div>
 		<div class="dataset-subtitle">
 			<span *ngIf="isUserDatasetRelated()" class="col-auto">{{ roleDisplay(dataset.users) }}</span>
 			<span *ngIf="isUserDatasetRelated()">.</span>

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

@@ -78,7 +78,8 @@ export class DatasetListingItemComponent extends BaseComponent implements OnInit
 	}
 
 	getItemLink(): string[] {
-		return this.isPublic ? [`/datasets/publicEdit/${this.dataset.id}`] : [`/datasets/edit/${this.dataset.id}`];
+		// return this.isPublic ? [`/datasets/publicEdit/${this.dataset.id}`] : [`/datasets/edit/${this.dataset.id}`];
+		return this.isPublic ? ['/datasets/publicOverview/' + this.dataset.id] : ['/datasets/overview/' + this.dataset.id];
 	}
 
 	getDmpLink(): string[] {

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html

@@ -65,7 +65,7 @@
 					</div>
 					<div class="row header">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}</div>
 					<div class="row ">
-						<button class="dmp-btn" (click)="dmpClicked(dataset.dmp.id)">
+						<button class="dmp-btn" (click)="dmpClicked(dataset.dmp)">
 							<div class="dmp-btn-label">
 								{{ this.dataset.dmp.label }}
 							</div>

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.scss

@@ -13,20 +13,22 @@
   width: 2.5em;
   height: 2.5em;
   color: #212121;
-  background-color: #F7DD72;
+  background-color: #f7dd72;
 }
 
-.mat-mini-fab-icon, .status-icon {
+.mat-mini-fab-icon,
+.status-icon {
   font-size: 1.2em;
 }
 
-.actions-btn:hover {
+.actions-btn:hover,
-  background-color: #129D99;
+.finalize-btn:hover {
-  color: #FFFFFF;
+  background-color: #129d99;
+  color: #ffffff;
 }
 
 .status-icon {
-  color: #A7A7A7;
+  color: #a7a7a7;
 }
 
 .check-icon {
@@ -48,7 +50,7 @@
 }
 
 .id-btn {
-  background: url('../../../../assets/images/NoPath.png') no-repeat center;
+  background: url("../../../../assets/images/NoPath.png") no-repeat center;
   width: 1em;
   margin-right: 0.3em;
   align-self: center;
@@ -57,14 +59,15 @@
 .dmp-btn {
   width: 35em;
   min-height: 2.3em;
-  background-color: #129D99;
+  background-color: #129d99;
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
   border: none;
 }
 
-.dmp-btn, .dmp-btn > mat-icon {
+.dmp-btn,
+.dmp-btn > mat-icon {
   color: #ffffff;
   opacity: 0.8;
 }
@@ -73,22 +76,23 @@
   width: 31.6em;
   padding: 0 1em;
   background-color: #ffffff00;
-  color: #129D99;
+  color: #129d99;
   font-weight: 700;
 }
 
 .frame-btn {
   border: 1px solid #212121;
   color: black;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
 .finalize-btn {
-  border: 1px solid #F7DD72;
+  //   border: 1px solid #F7DD72;
-  background: #F5DB71;
+  background: #f5db71;
 }
 
-.frame-btn, .finalize-btn {
+.frame-btn,
+.finalize-btn {
   box-shadow: 0px 2px 6px #00000029;
 }
 
@@ -103,15 +107,15 @@
 .invite-btn {
   width: 9.4em;
   height: 2.9em;
-  background: #FFFFFF;
+  background: #ffffff;
-  box-shadow: 0px 3px 6px #1E202029;
+  box-shadow: 0px 3px 6px #1e202029;
   border: 2px solid #212121;
   border-radius: 30px;
 }
 
 .account_btn {
   background: white;
-  color: #D5D5D5;
+  color: #d5d5d5;
   border: none;
   height: 2.9em;
 }
@@ -121,7 +125,7 @@
 .dataset-logo {
   width: 6em;
   height: 2.6em;
-  background: #F7DD72;
+  background: #f7dd72;
   border-radius: 4px;
   font-size: 0.875em;
   // color: #212121;
@@ -137,7 +141,8 @@
   font-size: 1em;
 }
 
-.label-txt, .label2-txt {
+.label-txt,
+.label2-txt {
   color: #848484;
   font-weight: 400;
 }
@@ -155,7 +160,7 @@
   font-size: 0.875em;
   color: #008887;
   padding-right: 0.5em;
-  align-self: center;;
+  align-self: center;
 }
 
 .header {
@@ -164,7 +169,8 @@
   margin-bottom: 0.5em;
 }
 
-.dataset-label, .header {
+.dataset-label,
+.header {
   font-size: 1.25em;
   color: #212121;
 }
@@ -179,7 +185,7 @@
 .dmp-btn-label {
   margin-right: 1em;
   overflow: hidden;
-  color: #FFFFFF;
+  color: #ffffff;
   opacity: 0.8;
   text-align: left;
 }
@@ -194,7 +200,7 @@
 .doi-txt {
   font-size: 0.8em;
   letter-spacing: 0.009em;
-  color: #7D7D7D;
+  color: #7d7d7d;
   width: 12em;
   height: 1em;
   overflow: hidden;
@@ -204,8 +210,8 @@
 
 .doi-panel {
   height: 3.5em;
-  background: #FAFAFA;
+  background: #fafafa;
-  border: 1px solid #D1D1D1;
+  border: 1px solid #d1d1d1;
   border-radius: 4px;
   flex-direction: row;
   justify-content: space-between;
@@ -216,7 +222,7 @@
 }
 
 .frame {
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 1px 5px #00000026;
   border-radius: 4px;
   overflow: hidden;
@@ -226,7 +232,8 @@
   color: #000000;
 }
 
-.frame-txt, .finalize-txt {
+.frame-txt,
+.finalize-txt {
   font-size: 0.75em;
   font-weight: bold;
   letter-spacing: 0px;
@@ -235,7 +242,7 @@
 }
 
 .hr-line {
-  border: 1px solid #DBDBDB;
+  border: 1px solid #dbdbdb;
   // width: 274px;
   // width: 17em;
   width: 100%;
@@ -257,22 +264,29 @@
 
 .authors-role {
   font-size: 0.875em;
-  color: #A8A8A8;
+  color: #a8a8a8;
   height: 1.4em;
   margin-bottom: 0px;
 }
 
 // ********CENTER ELEMENTS********
 
-.mat-mini-fab, .mat-mini-fab-icon, .actions-btn,
+.mat-mini-fab,
-.status-icon, .dataset-logo, .frame-btn, .finalize-btn {
+.mat-mini-fab-icon,
+.actions-btn,
+.status-icon,
+.dataset-logo,
+.frame-btn,
+.finalize-btn {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.dataset-label, .dmp-btn,
+.dataset-label,
- .doi-panel, .researcher {
+.dmp-btn,
+.doi-panel,
+.researcher {
   display: flex;
   align-items: center;
 }

dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.ts

@@ -28,10 +28,9 @@ import { DatasetCopyDialogueComponent } from '../dataset-wizard/dataset-copy-dia
 import { DmpService } from '@app/core/services/dmp/dmp.service';
 import { ResearcherModel } from '@app/core/model/researcher/researcher';
 import { LockService } from '@app/core/services/lock/lock.service';
-import { DatasetsToBeFinalized } from '@app/core/model/dataset/datasets-toBeFinalized';
-import { DatasetModel } from '@app/core/model/dataset/dataset';
 import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard';
 import { DmpStatus } from '@app/core/common/enum/dmp-status';
+import { DmpOverviewModel } from '@app/core/model/dmp/dmp-overview';
 
 
 @Component({
@@ -42,7 +41,7 @@ import { DmpStatus } from '@app/core/common/enum/dmp-status';
 export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 
 	dataset: DatasetOverviewModel;
-  datasetWizardEditorModel: DatasetWizardEditorModel;
+	// datasetWizardEditorModel: DatasetWizardEditorModel;
 	datasetWizardModel: DatasetWizardModel;
 	isNew = true;
 	isFinalized = false;
@@ -90,9 +89,8 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.dataset = data;
-              this.getDmpResearchers();
+							this.researchers = this.dataset.dmp.researchers;
-              this.getDmpUsers();
+							this.users = this.dataset.dmp.users;
-              this.getDatasetWizardModel(this.dataset.id);
 							this.checkLockStatus(this.dataset.id);
 							this.setIsUserOwner();
 							const breadCrumbs = [];
@@ -116,11 +114,8 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.dataset = data;
-              this.getDmpResearchers();
+							this.researchers = this.dataset.dmp.researchers;
-              this.getDmpUsers();
+							this.users = this.dataset.dmp.users;
-              this.getDatasetWizardModel(this.dataset.id);
-              this.checkLockStatus(this.dataset.id);
-              this.setIsUserOwner();
 							const breadCrumbs = [];
 							breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: "/explore" });
 							breadCrumbs.push({ parentComponentName: 'DatasetListingComponent', label: this.dataset.label, url: '/datasets/publicOverview/' + this.dataset.id });
@@ -137,15 +132,6 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 			});
 	}
 
-  getDatasetWizardModel(id: string) {
-    this.datasetWizardService.getSingle(id)
-      .pipe(takeUntil(this._destroyed))
-      .subscribe(data => {
-        this.datasetWizardEditorModel = new DatasetWizardEditorModel().fromModel(data);
-        this.datasetWizardModel = data;
-      });
-  }
-
 	checkLockStatus(id: string) {
 		this.lockService.checkLockStatus(id).pipe(takeUntil(this._destroyed))
 			.subscribe(lockStatus => this.lockStatus = lockStatus);
@@ -170,20 +156,6 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 		this.router.navigateByUrl('/reload', { skipLocationChange: true }).then(() => this.router.navigate([path]));
 	}
 
-  getDmpResearchers() {
-    this.dmpService.getSingle(this.dataset.dmp.id).pipe(takeUntil(this._destroyed))
-      .subscribe(data => {
-        this.researchers = data.researchers;
-      });
-  }
-
-  getDmpUsers() {
-    this.dmpService.getSingle(this.dataset.dmp.id).pipe(takeUntil(this._destroyed))
-      .subscribe(data => {
-        this.users = data.users;
-      });
-  }
-
 	setIsUserOwner() {
 		if (this.dataset) {
 			const principal: Principal = this.authentication.current();
@@ -192,8 +164,10 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 	}
 
 	isUserAuthor(userId: string): boolean {
+		if (this.isAuthenticated()) {
 			const principal: Principal = this.authentication.current();
 			return userId === principal.id;
+		} else return false;
 	}
 
 	isUserDatasetRelated() {
@@ -263,11 +237,12 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 
 	editClicked(dataset: DatasetOverviewModel) {
 		if (dataset.public) {
-      let url = this.router.createUrlTree(['/datasets/publicEdit/', dataset.id])
+			let url = this.router.createUrlTree(['/datasets/publicEdit/', dataset.id]);
-      window.open(url.toString(), '_blank')
+			window.open(url.toString(), '_blank');
 		} else {
-      let url = this.router.createUrlTree(['/datasets/edit/', dataset.id])
+			// let url = this.router.createUrlTree(['/datasets/edit/', dataset.id]);
-      window.open(url.toString(), '_blank')
+			let url = this.router.createUrlTree(['/plans/edit/', dataset.dmp.id], { queryParams: { dataset: dataset.id } });
+			window.open(url.toString(), '_blank');
 		}
 	}
 
@@ -295,8 +270,12 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 		});
 	}
 
-  dmpClicked(dmpId: String) {
+	dmpClicked(dmp: DmpOverviewModel) {
-    this.router.navigate(['/plans/overview/' + dmpId]);
+		if (this.isPublicView) {
+			this.router.navigate(['/explore-plans/publicOverview/' + dmp.id]);
+		} else {
+			this.router.navigate(['/plans/overview/' + dmp.id]);
+		}
 	}
 
 	onDeleteCallbackSuccess(): void {
@@ -397,7 +376,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 			data: {
 				formControl: formControl,
 				datasetId: this.dataset.id,
-        datasetProfileId: this.datasetWizardEditorModel.profile,
+				datasetProfileId: this.dataset.datasetTemplate.id,
 				datasetProfileExist: false,
 				confirmButton: this.language.instant('DATASET-WIZARD.DIALOGUE.COPY'),
 				cancelButton: this.language.instant('DATASET-WIZARD.DIALOGUE.CANCEL')
@@ -484,7 +463,10 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 		});
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (result) {
-        this.getDatasetWizardModel(this.dataset.id);
+				this.datasetWizardService.getSingle(dataset.id)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(data => {
+					this.datasetWizardModel = data;
 					this.datasetWizardModel.status = DatasetStatus.Finalized;
 					this.datasetWizardService.createDataset(this.datasetWizardModel)
 					.pipe(takeUntil(this._destroyed))
@@ -492,6 +474,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 						data => this.onUpdateCallbackSuccess(),
 						error => this.onUpdateCallbackError(error)
 					);
+				});
 			}
 		});
 	}
@@ -512,7 +495,10 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 		});
 		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
 			if (result) {
-        this.getDatasetWizardModel(this.dataset.id);
+				this.datasetWizardService.getSingle(dataset.id)
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(data => {
+					this.datasetWizardModel = data;
 					this.datasetWizardModel.status = DatasetStatus.Draft;
 					this.datasetWizardService.createDataset(this.datasetWizardModel)
 					.pipe(takeUntil(this._destroyed))
@@ -520,6 +506,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
 						data => this.onUpdateCallbackSuccess(),
 						error => this.onUpdateCallbackError(error)
 					);
+				});
 			}
 		});
 	}

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

@@ -83,7 +83,6 @@ import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/d
 		DmpCloneComponent,
 		AddOrganizationComponent,
 		DmpCriteriaDialogComponent,
-		AddOrganizationComponent,
 		AddCostComponent,
 		CostListingComponent,
 		StartNewDmpDialogComponent,

dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.html

@@ -7,7 +7,9 @@
 		<div class="row">
 			<div class="col-12">
 				<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
-				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link" target="_blank" [routerLink]="['/overview/' + dmpId]">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
+				<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 1 }}" (click)="restartTour(formGroup.get('id').value + 1)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
 				<div class="title-form">
 					<mat-form-field appearance="outline">
 						<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
@@ -23,7 +25,9 @@
 		<div class="row">
 			<div class="col-12">
 				<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
-				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link" target="_blank" [routerLink]="['/overview/' + dmpId]">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
+				<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
+				<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
 				<div class="description-form">
 					<mat-form-field appearance="outline">
 						<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
@@ -48,8 +52,9 @@
 			</div>
 		</div>
 		<app-dataset-external-references-editor-component [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
-		<app-dataset-description [form]="formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules')" [datasetProfileId]="formGroup.get('profile').value">
+		<app-dataset-description [form]="formGroup.get('datasetProfileDefinition')" [datasetProfileId]="formGroup.get('profile').value"></app-dataset-description>
-		</app-dataset-description>
+		<!-- <app-dataset-description [form]="formGroup.get('datasetProfileDefinition')" [visibilityRules]="formGroup.get('datasetProfileDefinition').get('rules')" [datasetProfileId]="formGroup.get('profile').value">
+		</app-dataset-description> -->
 
 		<!-- Tags field -->
 		<!-- <div class="row">

dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts

@@ -27,6 +27,8 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-
 import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
 import { DatasetWizardEditorModel, ExternalTagEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
+import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
 
 
 @Component({
@@ -57,6 +59,7 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 	// isLinear = false;
 	lock: LockModel;
 	lockStatus: Boolean;
+	dmpText: string;
 
 	@Input() formGroup: FormGroup;
 	@Input() dmpId: string;
@@ -79,13 +82,17 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 		private formService: FormService,
 		private lockService: LockService,
 		private location: Location,
-		private authService: AuthService
+		private authService: AuthService,
+		private guidedTourService: GuidedTourService
 	) {
 		super();
 	}
 
 	ngOnInit() {
-		if (this.datasetId) {
+		if (this.formGroup.get('status').value === 1) {
+			this.formGroup.disable();
+		}
+		if (this.datasetId) { // never gets in here
 			this.datasetWizardService.getSingle(this.datasetId)
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(data => {
@@ -133,6 +140,40 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 		}
 	}
 
+	public dashboardTourDmp: GuidedTour = {
+		tourId: 'only-dmp-tour',
+		useOrb: true,
+		steps: [
+			{
+				title: this.dmpText,
+				content: 'Step 1',
+				orientation: Orientation.Bottom,
+				highlightPadding: 3,
+				isStepUnique: true,
+				customTopOffset: 8
+			}
+		]
+	};
+
+	getDmpText(): string {
+		return this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
+		this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
+		this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
+		this.language.instant('DMP-LISTING.GET-IDEA');
+	}
+
+	setDashboardTourDmp(label: string): void {
+		this.dashboardTourDmp.steps[0].title = this.getDmpText();
+		this.dashboardTourDmp.steps[0].selector = '.dmp-tour-' + label;
+	}
+
+	public restartTour(label: string): void {
+		this.setDashboardTourDmp(label);
+		console.log(this.dashboardTourDmp.steps[0].selector);
+		this.guidedTourService.startTour(this.dashboardTourDmp);
+
+	}
+
 	registerFormListeners() {
 		this.formGroup.get('dmp').valueChanges
 			.pipe(takeUntil(this._destroyed))

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html

@@ -12,17 +12,25 @@
 					<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
 				</div>
 				<div class="profile-form">
-					<mat-form-field appearance="outline">
+					<mat-form-field *ngIf="!isNewDataset">
-						<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
+						<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
 							{{formGroup.get('profiles').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-						<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="availableProfiles($event)">
+						<button matSuffix class="input-btn" [disabled]="formGroup.get('profiles').disabled" (click)="allAvailableProfiles($event)">
 							<mat-icon class="icon-btn">view_list</mat-icon>
 						</button>
 					</mat-form-field>
+					<mat-form-field *ngIf="isNewDataset">
+						<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile" (click)="loadDatasetProfiles()">
+							<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
+								{{profile.label}}
+							</mat-option>
+						</mat-select>
+						<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
+					</mat-form-field>
 				</div>
 				<div class="col pb-3 d-flex">
 					<span class="not-found">{{'DMP-EDITOR.DATASET-INFO.FIND' | translate}}</span>

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts

@@ -18,6 +18,8 @@ import { DmpProfileService } from '@app/core/services/dmp/dmp-profile.service';
 import { AvailableProfilesComponent } from '../available-profiles/available-profiles.component';
 import { DmpEditorModel } from '../dmp-editor.model';
 import { Router } from '@angular/router';
+import { RequestItem } from '@app/core/query/request-item';
+import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
 
 @Component({
 	selector: 'dataset-info',
@@ -32,9 +34,12 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 	@Input() isPublic: boolean;
 	@Input() isFinalized: boolean;
 	@Input() isNewVersion: boolean;
+	@Input() isNewDataset: boolean;
 	@Input() isClone: boolean;
 	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
 
+	availableProfiles: DatasetProfileModel[] = [];
+
 	selectedDmpProfileDefinition: DmpProfileDefinition;
 	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
 
@@ -42,6 +47,7 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 		private language: TranslateService,
 		private configurationService: ConfigurationService,
 		private externalSourcesService: ExternalSourcesService,
+		private datasetWizardService: DatasetWizardService,
 		private dialog: MatDialog,
 		private _service: DmpService,
 		private dmpProfileService: DmpProfileService,
@@ -73,8 +79,11 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 			this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
 		}
 
+		// this.loadDatasetProfiles();
+
 		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
 			.subscribe(x => {
+				console.log('value changes')
 				this.profilesAutoCompleteConfiguration = {
 					filterFn: this.filterProfiles.bind(this),
 					initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
@@ -114,7 +123,24 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 			})
 	}
 
-	availableProfiles(event: MouseEvent) {
+	loadDatasetProfiles() {
+		console.log(this.formGroup);
+		console.log(this.dmp);
+		const datasetProfileRequestItem: RequestItem<DatasetProfileCriteria> = new RequestItem();
+		datasetProfileRequestItem.criteria = new DatasetProfileCriteria();
+		console.log(this.formGroup.value.id);
+		datasetProfileRequestItem.criteria.id = this.formGroup.value.id;
+		if (datasetProfileRequestItem.criteria.id) {
+			this.datasetWizardService.getAvailableProfiles(datasetProfileRequestItem)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(items => {
+				this.availableProfiles = items;
+			});
+		}
+		console.log(this.availableProfiles);
+	}
+
+	allAvailableProfiles(event: MouseEvent) {
 		event.stopPropagation();
 		const dialogRef = this.dialog.open(AvailableProfilesComponent, {
 			data: {

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

@@ -1,8 +1,8 @@
 <div class="main-content">
-	<div *ngIf="dmp" class="container-fluid">
+	<div class="container-fluid">
 		<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
 			<!-- DMP Header -->
-			<div [hidden]="this.step >= 3" class="fixed-editor-header">
+			<div [hidden]="this.step >= stepsBeforeDatasets" *ngIf="!isNewDataset" class="fixed-editor-header">
 				<div class="card editor-header">
 					<div class="col">
 						<div class="row">
@@ -22,29 +22,33 @@
 										{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
 									</button>
 								</div>
+								<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 			<!-- Dataset Header -->
-			<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + 3" class="fixed-editor-header">
+			<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="(this.step !== i + stepsBeforeDatasets) && !isNewDataset" class="fixed-editor-header">
-				<div class="card dataset-editor-header">
+				<div class="card dataset-editor-header" [style.height]="isNewDataset ? 'auto' : '113px'">
 					<div class="col">
 						<div class="row">
-							<div class="col info">
+							<div class="col info" *ngIf="!isNewDataset">
 								<div class="dataset-title">{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}</div>
 								<div class="dataset-subtitle">{{ dataset.get('label').value }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
 								<div class="d-flex flex-direction-row pt-2">
 									<div class="col-auto dataset-part-of">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
 										<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
 									</div>
-									<div class="col-auto dmp-title">{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{ formGroup.get('label').value }}</div>
+									<div class="col-auto dmp-title">{{ formGroup.get('label').value }}</div>
 									<div class="col d-flex align-items-center">
 										<a [routerLink]="['/overview/' + formGroup.get('id').value]" target="_blank" class="pointer"><span class="material-icons">open_in_new</span></a>
 									</div>
 								</div>
 							</div>
+							<div class="col info" *ngIf="isNewDataset">
+								<div class="dataset-title">{{'DMP-EDITOR.TITLE.CREATE-DATASET' | translate}}</div>
+							</div>
 							<div class="row">
 								<div class="col-auto d-flex align-items-center p-0">
 									<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
@@ -52,7 +56,8 @@
 									</button>
 								</div>
 								<div class="col-auto d-flex align-items-center">
-									<button *ngIf="(dataset.get('status').value == 0 || isNew) && !lockStatus" mat-raised-button class="dataset-save-btn" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
+									<button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
+									<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
 									<!-- <div *ngIf="!isNew && formGroup.enabled && !lockStatus">
 										<button *ngIf="!isFinalized" mat-raised-button type="submit" class="dataset-save-btn">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
 									</div> -->
@@ -63,17 +68,23 @@
 				</div>
 			</div>
 			<div class="row editor-content">
-				<div class="col-auto stepper">
+				<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets || isNewDataset, 'dataset-stepper': this.step >= stepsBeforeDatasets && !isNewDataset}">
 					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
 					<div class="stepper-options">
 						<ol class="stepper-list">
-							<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
+							<li *ngIf="!isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
-							<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
+							<li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
-							<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
+
-							<li *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" (click)="changeStep(i + 3)" [ngClass]="{'active-dataset': this.step === i + 3}">
+							<li *ngIf="!isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
+							<li *ngIf="isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
+
+							<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
+
+							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
 								<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
+								<span *ngIf="dataset.value.status === 1" class="finalized-label"><mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}</span>
 								<ul class="dataset-list">
-									<li [ngClass]="{'active': this.step === i + 3}">{{ dataset.get('label').value }} (8)</li>
+									<li [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
 								</ul>
 							</li>
 						</ol>
@@ -83,17 +94,25 @@
 							<span class="material-icons">chevron_left</span>
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
-						<div mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < 3, 'dataset-next': this.step >= 3 }" (click)="nextStep()">
+						<div *ngIf="!isNewDataset" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
+							<span class="material-icons">chevron_right</span>
+							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+						</div>
+						<div *ngIf="isNewDataset" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep }" (click)="nextStep()">
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
 					</div>
 				</div>
 				<div class="col-auto form">
-					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></main-info>
+					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></main-info>
-					<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
+
-					<dataset-info [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
+					<funding-info *ngIf="!isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
-					<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + 3">
+
+					<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></dataset-info>
+					<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></dataset-info>
+
+					<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
 						<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="datasetFormChanged($event)"></dataset-editor-details>
 					</div>
 				</div>

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

@@ -219,7 +219,7 @@ a:hover {
   color: #000000;
 }
 
-.stepper {
+.dataset-stepper {
   position: fixed;
   //   height: 100%;
   display: flex;
@@ -228,6 +228,15 @@ a:hover {
   overflow-y: auto;
 }
 
+.dmp-stepper {
+  position: fixed;
+  //   height: 100%;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 190px);
+  overflow-y: auto;
+}
+
 .stepper-title {
   text-align: left;
   font-weight: 300;
@@ -367,14 +376,29 @@ a:hover {
   white-space: nowrap;
 }
 
-::ng-deep .mat-tab-labels {
+.status-icon {
-  justify-content: space-between;
+  font-size: 1.2em;
+  color: #a7a7a7;
+  vertical-align: text-top;
 }
 
-::ng-deep .mat-tab-label-content {
+.cursor-default {
-  text-transform: uppercase;
+  cursor: default;
 }
 
+.finalized-label {
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+// ::ng-deep .mat-tab-labels {
+//   justify-content: space-between;
+// }
+
+// ::ng-deep .mat-tab-label-content {
+//   text-transform: uppercase;
+// }
+
 ::ng-deep .mat-ink-bar {
   background-color: #00b29f !important;
   //   background-color: #0070c0 !important;

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

@@ -41,6 +41,10 @@ import { LockModel } from '@app/core/model/lock/lock.model';
 import { Guid } from '@common/types/guid';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model';
+import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
+import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
+import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
+import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
 
 @Component({
 	selector: 'app-dmp-editor-component',
@@ -56,22 +60,29 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	isNew = true;
 	isPublic = false;
 	isFinalized = false;
+	hasChanges = false;
+	isNewDataset = false;
+	isUserOwner: boolean = true;
+
 	dmp: DmpEditorModel;
 	formGroup: FormGroup = null;
 	formGroupRawValue: any;
-	hasChanges = false;
+	datasetId: string = null;
-
+	datasets = new FormArray([]);
-	selectedTab = 0;
 	createNewVersion;
+
 	associatedUsers: Array<UserModel>;
 	people: Array<UserInfoListingModel>;
 	filteredOptions: DmpProfileListing[];
 	selectedDmpProfileDefinition: DmpProfileDefinition;
+
 	DynamicDmpFieldResolverComponent: any;
-	isUserOwner: boolean = true;
 	lock: LockModel;
 	lockStatus: Boolean;
+
+	selectedTab = 0;
 	step: number = 0;
+	stepsBeforeDatasets: number = 3;
 	maxStep: number = 3;
 
 	constructor(
@@ -92,6 +103,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	}
 
 	ngOnInit() {
+		if (this.router.url.toString().localeCompare('/new/dataset') === 0) {
+			this.isNewDataset = true;
+			this.stepsBeforeDatasets = 2;
+			this.maxStep = 2;
+		};
 		this.route.params
 			.pipe(takeUntil(this._destroyed))
 			.subscribe((params: Params) => {
@@ -99,6 +115,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 				const publicId = params['publicId'];
 				const queryParams = this.route.snapshot.queryParams;
 				const tabToNav = queryParams['tab'];
+				this.datasetId = queryParams['dataset'];
+				// if (queryParams['step']) {	this.step = queryParams['step']; }
 
 				const grantRequestItem: RequestItem<GrantCriteria> = new RequestItem();
 				grantRequestItem.criteria = new GrantCriteria();
@@ -111,6 +129,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 				// 	displayFn: (item) => item['label'],
 				// 	titleFn: (item) => item['label']
 				// };
+
 				switch (tabToNav) {
 					case 'general':
 						this.selectedTab = 0;
@@ -139,6 +158,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								this.dmp.extraProperties = new ExtraPropertiesFormModel();
 								this.dmp.fromModel(data);
 								this.formGroup = this.dmp.buildForm();
+
+								this.datasets = this.formGroup.get('datasets') as FormArray;
 								this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
 								this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
 
@@ -148,6 +169,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 									this.formGroup.disable();
 								}
 
+								if (this.datasetId) {
+									this.step = this.formGroup.get('datasets')['controls'].findIndex((dataset) => { return this.datasetId === dataset.get('id').value; }) + this.stepsBeforeDatasets;
+								}
+
 								//this.registerFormEventsForDmpProfile(this.dmp.definition);
 								if (!this.editMode || this.dmp.status === DmpStatus.Finalized || lockStatus) {
 									this.isFinalized = true;
@@ -200,6 +225,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							this.dmp.fromModel(data);
 							this.formGroup = this.dmp.buildForm();
 
+							// this.formGroup.get('datasets')['controls'].forEach(element => {
+							// 	this.datasets.push(element);
+							// });
+							this.datasets = this.formGroup.get('datasets') as FormArray;
 							this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
 							this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
 
@@ -230,6 +259,24 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							// }
 							// })
 						});
+				} else if (this.isNewDataset) {
+					this.dmp = new DmpEditorModel();
+					this.dmp.grant = new GrantTabModel();
+					this.dmp.project = new ProjectFormModel();
+					this.dmp.funder = new FunderFormModel();
+					this.dmp.extraProperties = new ExtraPropertiesFormModel();
+					this.dmp.extraProperties.visible = false;
+					this.dmp.extraProperties.contact = this.authService.current().id;
+					const datasetWizardEditorModel = new DatasetWizardEditorModel();
+					this.dmp.datasets.push(datasetWizardEditorModel);
+					this.formGroup = this.dmp.buildForm();
+
+					this.datasets = this.formGroup.get('datasets') as FormArray;
+
+					this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+					this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
+
+					this.registerFormEventsForNewItem();
 				} else {
 					this.dmp = new DmpEditorModel();
 					this.dmp.grant = new GrantTabModel();
@@ -374,7 +421,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 					if (showAddDatasetDialog) {
 						this.addDatasetOpenDialog(complete);
 					}
-					else { this.onCallbackSuccess(complete) }
+					else if (this.step < this.stepsBeforeDatasets) { this.onCallbackSuccess(complete) }
+					else { this.onCallbackSuccess(complete, this.datasetId) }
 				},
 				error => {
 					this.formGroup.get('status').setValue(DmpStatus.Draft);
@@ -398,9 +446,13 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 
 	}
 
-	onCallbackSuccess(id?: String): void {
+	onCallbackSuccess(id?: String, datasetId?: string): void {
 		this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
-		id != null ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', id]); }) : this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
+		if (id != null) {
+			datasetId ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', id], { queryParams: { dataset: datasetId } }); }) : this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', id]); })
+		} else {
+			this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
+		}
 	}
 
 	onCallbackError(error: any) {
@@ -629,16 +681,23 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => this.lock.id = Guid.parse(result));
 	}
 
-	public changeStep(index: number) {
+	public changeStep(index: number, dataset?: FormControl) {
 		this.step = index;
+		if (dataset) { this.datasetId = dataset.get('id').value };
 	}
 
 	public nextStep() {
 		this.step = this.step < this.maxStep ? this.step + 1 : this.step;
+		if (this.step >= this.stepsBeforeDatasets) {
+			this.datasetId = this.datasets.at(this.step - this.stepsBeforeDatasets).get('id').value;
+		}
 	}
 
 	public previousStep() {
 		this.step = this.step !== 0 ? this.step - 1 : this.step;
+		if (this.step >= this.stepsBeforeDatasets) {
+			this.datasetId = this.datasets.at(this.step - this.stepsBeforeDatasets).get('id').value;
+		}
 	}
 
 	public isDirty(): boolean {

dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html

@@ -9,30 +9,35 @@
 				<div class="heading">1.1 {{'DMP-EDITOR.FIELDS.NAME' | translate}}*</div>
 				<div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
 				<div class="title-form">
-					<mat-form-field appearance="outline">
+					<mat-form-field *ngIf="!isNewDataset">
 						<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
 						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
 							{{formGroup.get('label').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="formGroup.get('label').hasError('required')">
 							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>
+					<mat-form-field *ngIf="isNewDataset">
+						<app-single-auto-complete [required]="true" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"></app-single-auto-complete>
+						<!-- <app-single-auto-complete [required]="true" [formControl]="formGroup" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
+						</app-single-auto-complete> -->
+					</mat-form-field>
 				</div>
 			</div>
 		</div>
 		<!-- Description field -->
-		<div class="row">
+		<div class="row" *ngIf="!isNewDataset">
 			<div class="col-12">
 				<div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
 				<div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
 				<div class="description-form">
-					<mat-form-field appearance="outline">
+					<mat-form-field>
 						<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
 					</mat-form-field>
 				</div>
 			</div>
 		</div>
 		<!-- Researchers field-->
-		<div class="row">
+		<div class="row" *ngIf="!isNewDataset">
 			<div class="col-12">
 				<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
 				<div class="hint">
@@ -40,7 +45,7 @@
 					<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
 				</div>
 				<div class="author-form">
-					<mat-form-field appearance="outline">
+					<mat-form-field>
 						<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
@@ -55,7 +60,7 @@
 			</div>
 		</div>
 		<!-- Organizations Field -->
-		<div class="row">
+		<div class="row" *ngIf="!isNewDataset">
 			<div class="col-12">
 				<div class="heading">1.4 {{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}</div>
 				<div class="hint">
@@ -63,7 +68,7 @@
 					<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
 				</div>
 				<div class="organizations-form">
-					<mat-form-field appearance="outline">
+					<mat-form-field>
 						<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">

dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts

@@ -12,6 +12,12 @@ import { isNullOrUndefined } from 'util';
 import { MatDialog } from '@angular/material';
 import { AddOrganizationComponent } from '../add-organization/add-organization.component';
 import { AddResearcherComponent } from '../add-researcher/add-researcher.component';
+import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
+import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
+import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
+import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
+import { DmpStatus } from '@app/core/common/enum/dmp-status';
+import { DmpService } from '@app/core/services/dmp/dmp.service';
 
 @Component({
 	selector: 'main-info',
@@ -22,6 +28,7 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
 
 	@Input() formGroup: FormGroup = null;
 	@Input() isNewVersion: boolean;
+	@Input() isNewDataset: boolean;
 	@Input() isUserOwner: boolean;
 	@Input() isClone: boolean;
 	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
@@ -41,10 +48,19 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
 		subtitleFn: (item) => item['tag'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['tag'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'))
 	};
 
+	dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
+		filterFn: this.searchDmp.bind(this),
+		initialItems: (extraData) => this.searchDmp(''),
+		displayFn: (item) => this.getDatasetDisplay(item),
+		titleFn: (item) => item['label'],
+		subtitleFn: (item) => this.language.instant('DATASET-WIZARD.FIRST-STEP.SUB-TITLE') + new Date(item['creationTime']).toISOString()
+	};
+
 	constructor(
 		private language: TranslateService,
 		private configurationService: ConfigurationService,
 		private externalSourcesService: ExternalSourcesService,
+		private dmpService: DmpService,
 		private dialog: MatDialog
 	) {
 		super();
@@ -136,4 +152,22 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
 			}
 		});
 	}
+
+	searchDmp(query: string): Observable<DmpListingModel[]> {
+		const fields: Array<string> = new Array<string>();
+		fields.push('-created');
+		const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
+		dmpDataTableRequest.criteria = new DmpCriteria();
+		dmpDataTableRequest.criteria.like = query;
+		dmpDataTableRequest.criteria.status = DmpStatus.Draft;
+		return this.dmpService.getPaged(dmpDataTableRequest, "autocomplete").pipe(map(x => x.data));
+	}
+
+	getDatasetDisplay(item: any): string {
+		// if (!this.isPublic) {
+		// 	return (item['status'] ? this.language.instant('TYPES.DATASET-STATUS.FINALISED').toUpperCase() : this.language.instant('TYPES.DATASET-STATUS.DRAFT').toUpperCase()) + ': ' + item['label'];
+		// }
+		// else { return item['label']; }
+		return item['label'] ? item['label'] : null;
+	}
 }

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.html

@@ -7,7 +7,7 @@
 			<h1 mat-dialog-title class="title">{{'DMP-LISTING.ACTIONS.INVITE-AUTHORS' | translate}}</h1>
 		</div>
 		<div mat-dialog-content class="row content">
-			<mat-form-field class="col pt-0 pb-2 mb-4" appearance="standard">
+			<mat-form-field class="col pt-0 pb-2 mb-4 search" appearance="standard">
 				<app-multiple-auto-complete [formControl]="formGroup.get('users')"
 					placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
 					[configuration]="usersAutoCompleteConfiguration">

dmp-frontend/src/app/ui/dmp/invitation/dmp-invitation-dialog.component.scss

@@ -28,25 +28,39 @@
     border-radius: 4px;
 }
 
-::ng-deep .mat-dialog-container {
+
+.search {
+    ::ng-deep {
+        .mat-dialog-container {
             border-radius: 8px;
         }
-
+        .mat-form-field-underline {
-::ng-deep .mat-form-field-underline {
             display: none;
         }
-
+        .mat-form-field-wrapper {
-::ng-deep .mat-form-field-wrapper {
             padding: 0em !important;
         }
-
+        .mat-form-field-infix {
-::ng-deep .mat-form-field-infix {
             border: none;
         }
-
+        .align-arrow-right {
-::ng-deep .align-arrow-right {
             display: none;
         }
+    }
+}
+
+.select-role {
+    ::ng-deep {
+        .mat-form-field-outline-start, 
+        .mat-form-field-outline-gap, 
+        .mat-form-field-outline-end {
+            border: none !important;
+        }
+        .mat-form-field-wrapper {
+            padding: 0em !important;
+        }
+    }
+}
 
 .invite-btn {
     width: 6.64em;
@@ -61,7 +75,7 @@
 }
 
 .select-role {
-    width: 16% !important;
+    width: 20% !important;
     font-size: 14px;
     color: #848484;
     height: min-content;

dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss

@@ -28,8 +28,6 @@
   margin-bottom: 12px;
 }
 
-
-
 .filters {
   border: 1px solid #e4e4e4;
   border-radius: 5px;
@@ -37,7 +35,8 @@
 
 .filters-title {
   width: 93px;
-  color: #089dbb;
+  //   color: #089dbb;
+  color: #23bcba;
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -110,3 +109,12 @@
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
   background-color: #2e74b649;
 }
+
+::ng-deep .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
+}

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

@@ -22,22 +22,34 @@
 						<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
 						<mat-form-field appearance="outline" class="sort-form col-auto">
 							<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
-								<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+								<mat-option *ngIf="!isPublic" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
+								<mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option>
 								<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
-								<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
+								<mat-option *ngIf="!isPublic" [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
 								<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
 							</mat-select>
 						</mat-form-field>
 						<!-- End of Sort by -->
+						<div class="d-flex flex-row ml-auto">
+							<!-- Guided Tour -->
+							<div class="center-content"
+								[style.display]="!isVisible && isAuthenticated()? 'block' : 'none'" (click)="restartTour()">
+								{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}
+							</div>
+							<!-- End of Guided Tour -->
 							<!-- Search Filter-->
-						<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
+							<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0"
+								floatLabel="never">
 								<mat-icon matSuffix>search</mat-icon>
-							<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
+								<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria"
-							<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
+									[formControl]="formGroup.get('like')">
+								<mat-error *ngIf="formGroup.get('like').hasError('backendError')">
+									{{formGroup.get('like').getError('backendError').message}}</mat-error>
 							</mat-form-field>
 							<!-- End of Search Filter -->
 						</div>
 					</div>
+				</div>
 				<div class="col-md-12 col-sm-12 col-md-9">
 					<div *ngFor="let item of listingItems; let i = index">
 						<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>

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

@@ -241,6 +241,19 @@
   padding: 0.3rem 0rem 0.6rem 0rem !important;
 }
 
+.center-content {
+  width: 100%;
+  min-width: 10rem;
+  margin: auto;
+  padding: 0 15px;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.02rem;
+  color: #2D72D6;
+  cursor: pointer;
+}
+
 // .bot-paginator {
 // 	margin-top: auto;
 // }

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

@@ -26,7 +26,8 @@ import { AuthService } from '@app/core/services/auth/auth.service';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
 import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
-
+import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
+import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
 
 @Component({
 	selector: 'app-dmp-listing-component',
@@ -63,6 +64,8 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 
 	scrollbar: boolean;
 	order = RecentActivityOrder;
+	dmpText: string;
+	datasetText: string;
 
 	constructor(
 		private dmpService: DmpService,
@@ -73,14 +76,19 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 		private language: TranslateService,
 		private grantService: GrantService,
 		private uiNotificationService: UiNotificationService,
-		private authService: AuthService
+		private authService: AuthService,
+		private guidedTourService: GuidedTourService
 	) {
 		super();
 	}
 
 	ngOnInit() {
 		this.isPublic = this.router.url.startsWith('/explore-plans');
+		if (this.isPublic) {
+			this.formGroup.get('order').setValue(this.order.PUBLISHED);
+		} else {
 			this.formGroup.get('order').setValue(this.order.MODIFIED);
+		}
 		if (!this.isPublic && isNullOrUndefined(this.authService.current())) {
 			this.router.navigateByUrl("/explore-plans");
 		}
@@ -173,6 +181,29 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 			.subscribe(x => this.refresh());
 	}
 
+	public dashboardTour: GuidedTour = {
+		tourId: 'dmp-dataset-tour',
+		useOrb: true,
+		steps: [
+			{
+				selector: '.dmp-tour',
+				content: 'Step 1',
+				orientation: Orientation.Right,
+				isStepUnique: false
+			},
+			{
+				selector: '.dataset-tour',
+				content: 'Step 2',
+				orientation: Orientation.Right,
+				isStepUnique: false
+			}
+		]
+	};
+
+	public isAuthenticated(): boolean {
+		return !(!this.authService.current());
+	}
+
 	ngAfterContentChecked(): void {
 		this.scrollbar = this.hasScrollbar();
 	}
@@ -185,7 +216,8 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 		// let fields: Array<string> = new Array();
 		// if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
 		// fields.push('-modified');
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
+		this.startIndex = 0;
 
 		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
 		this.setPublicCriteria();
@@ -209,7 +241,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 	public loadMore() {
 		this.startIndex = this.startIndex + this.pageSize;
 		// const fields: Array<string> = ["-modified"];
-		const fields: Array<string> = [(this.formGroup.get('order').value === 'status' ? '+' : "-") + this.formGroup.get('order').value];
+		const fields: Array<string> = [((this.formGroup.get('order').value === 'status') || (this.formGroup.get('order').value === 'label') ? '+' : "-") + this.formGroup.get('order').value];
 		const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
 		this.setPublicCriteria();
 		request.criteria = this.criteria;
@@ -362,16 +394,22 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 	}
 
 	setPublicCriteria(formGroup?: FormGroup): void {
-		if (formGroup && formGroup.get('status').value == 2) {
+		if (!isNullOrUndefined(formGroup)) {
+			if (formGroup.get('status').value == 2) {
+				this.criteria.status = 1;
 				this.criteria.isPublic = true;
+			} else {
+				this.criteria.isPublic = false;
+			}
 		}
 
 		this.criteria.onlyPublic = this.isPublic;
 		if (this.isPublic) {
 			this.criteria.isPublic = true;
-		} else {
-			this.criteria.isPublic = false;
 		}
+		// } else {
+		// 	this.criteria.isPublic = false;
+		// }
 	}
 
 	hasScrollbar(): boolean {
@@ -406,7 +444,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 					index2++;
 				}
 			} else if (order === 'label') {
-				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label < arr2[index2].label))) {
+				if (!isArr1Depleted && (isArr2Depleted || (arr1[index1].label.localeCompare(arr2[index2].label)))) {
 					merged[current] = arr1[index1];
 					index1++;
 				} else {
@@ -421,11 +459,41 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
 					merged[current] = arr2[index2];
 					index2++;
 				}
+			} else if (order === "publishedAt") {
+				if (!isArr1Depleted && (isArr2Depleted || (new Date(arr1[index1].publishedAt) > new Date(arr2[index2].publishedAt)))) {
+					merged[current] = arr1[index1];
+					index1++;
+				} else {
+					merged[current] = arr2[index2];
+					index2++;
+				}
 			}
 			current++;
 		}
 		return merged;
 	}
+
+	public setDashboardTourDmpText(): void {
+		this.dmpText = this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
+			this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
+			this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
+			this.language.instant('DMP-LISTING.GET-IDEA');
+		this.dashboardTour.steps[0].title = this.dmpText;
+	}
+
+	public setDashboardTourDatasetText(): void {
+		this.datasetText = this.language.instant('DATASET-LISTING.TEXT-INFO') +
+			this.language.instant('DATASET-LISTING.LINK-PUBLIC-DATASETS') + ' ' +
+			this.language.instant('DATASET-LISTING.TEXT-INFO-REST') + '\n\n' +
+			this.language.instant('DATASET-LISTING.TEXT-INFO-PAR');
+		this.dashboardTour.steps[1].title = this.datasetText;
+	}
+
+	public restartTour(): void {
+		this.setDashboardTourDmpText();
+		this.setDashboardTourDatasetText();
+		this.guidedTourService.startTour(this.dashboardTour);
+	}
 }
 
 // export class DmpDataSource extends DataSource<DmpListingModel> {

dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html

@@ -2,7 +2,8 @@
 	<a [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.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 }}: {{ dmp.modifiedTime | date: "longDate" }}</div>
+			<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ dmp.modifiedTime | date: "longDate" }}</div>
+			<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ dmp.publishedAt | date: "longDate" }}</div>
 		</div>
 		<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{dmp.label}}</div>
 		<div class="dmp-subtitle">

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

@@ -119,8 +119,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 						.pipe(takeUntil(this._destroyed))
 						.subscribe(data => {
 							this.dmp = data;
-							this.checkLockStatus(this.dmp.id);
+							// this.checkLockStatus(this.dmp.id);
-							this.setIsUserOwner();
 							this.getAllVersions(this.dmp);
 							const breadCrumbs = [];
 							breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC-DMPS'), url: "/explore-plans" });
@@ -156,8 +155,10 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	}
 
 	isUserAuthor(userId: string): boolean {
+		if (this.isAuthenticated()) {
 			const principal: Principal = this.authentication.current();
 			return userId === principal.id;
+		} else return false;
 	}
 
 	editClicked(dmp: DmpOverviewModel) {

dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss

@@ -31,7 +31,8 @@
 
 .filters-title {
   width: 90px;
-  color: #089dbb;
+  //   color: #089dbb;
+  color: #23bcba;
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;

dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss

@@ -31,7 +31,8 @@
 
 .filters-title {
   width: 93px;
-  color: #089dbb;
+  //   color: #089dbb;
+  color: #23bcba;
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;

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

@@ -45,7 +45,8 @@
 
 .filters-title {
   width: 90px;
-	color: #089dbb;
+  //   color: #089dbb;
+  color: #23bcba;
   background-color: white;
   padding: 0px 20px;
   margin-top: -10px;
@@ -118,3 +119,12 @@
 .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
   background-color: #2e74b649;
 }
+
+::ng-deep .search-form .mat-form-field-wrapper {
+  background-color: white !important;
+  padding-bottom: 0 !important;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 0.3rem 0rem 0.6rem 0rem !important;
+}

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

@@ -7,21 +7,19 @@
 				<div class="icon-bar2"></div>
 				<div class="icon-bar3"></div>
 			</div>
-			<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
+			<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
 			<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
 				<mat-icon class="toggle-icon">view_headline</mat-icon>
 			</button>
 			<div class="collapse navbar-collapse justify-content-end" id="navigation">
 
 				<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
-					<button type="button" class="normal-btn ml-auto"
+					<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
-						(click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
 					<!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> -->
 					<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
 					<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->
 					<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang">
-						<mat-icon class="mr-2">language</mat-icon><span
+						<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
-							class="text-uppercase">{{selectedLanguage}}</span>
 						<mat-icon>arrow_drop_down</mat-icon>
 					</button>
 					<mat-menu #languageMenu="matMenu" class="lang-parent">
@@ -34,9 +32,7 @@
 				<ul class="navbar-nav">
 					<!-- Login -->
 					<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
-						<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()"
+						<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
-							(error)="this.applyFallbackAvatar($event)" (click)="openProfile()"
-							[matTooltip]="this.getPrincipalName()">
 						<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
 					</li>
 					<ng-template #loginoption>
@@ -51,9 +47,7 @@
 				<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
 					<ul class="list m-2">
 						<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
-							<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()"
+							<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
-								(error)="this.applyFallbackAvatar($event)" (click)="openProfile()"
-								[matTooltip]="this.getPrincipalName()">
 							<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
 						</li>
 						<ng-template #loginoption>
@@ -66,8 +60,7 @@
 						<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
 							<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
 							<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang">
-								<mat-icon class="mr-2">language</mat-icon><span
+								<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
-									class="text-uppercase">{{selectedLanguage}}</span>
 								<mat-icon>arrow_drop_down</mat-icon>
 							</button>
 							<mat-menu #languageMenu="matMenu" class="lang-parent">

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

@@ -30,8 +30,8 @@ $mat-card-header-size: 40px !default;
 }
 
 .logo {
-	width: 98px;
+	// width: 98px;
-	height: 37px;
+	// height: 37px;
 	margin-top: 15px;
 	margin-left: 5px;
 }

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

@@ -248,8 +248,9 @@ export class NavbarComponent extends BaseComponent implements OnInit {
 	openNewDmpDialog() {
 		if (this.dialog.openDialogs.length > 0) {
 			this.dialog.closeAll();
-		}
+		} else if (!this.isAuthenticated()) {
-		else {
+			this.router.navigate(['/login']);
+		} else {
 			const dialogRef = this.dialog.open(StartNewDmpDialogComponent, {
 				disableClose: false,
 				data: {

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

@@ -5,7 +5,7 @@
 			<hr *ngIf="!firstGroup">
 			<mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" *ngFor="let groupMenuRoute of groupMenuItem.routes; let first = first" class="nav-item"
 				[ngClass]="{'mt-4': first && firstGroup}">
-				<a class="nav-link nav-row" [routerLink]="[groupMenuRoute.path]">
+				<a class="nav-link nav-row" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans', 'dataset-tour' : groupMenuRoute.path == '/datasets'}">
 					<i class="material-icons icon">{{ groupMenuRoute.icon }}</i>
 					<i *ngIf="groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'" class="material-icons icon-mask">person</i>
 					<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans' || groupMenuRoute.path == '/datasets'}">{{groupMenuRoute.title | translate}}</span>

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

@@ -79,7 +79,8 @@
 			"VIEW-ALL": "Alles anzeigen",
 			"SHOW-MORE": "Mehr anzeigen",
 			"SHOW-LESS": "Weniger anzeigen",
-			"LOG-IN": "Einloggen"
+			"LOG-IN": "Einloggen",
+			"TAKE-A-TOUR": "Do you need help? Take a tour.."
 		},
 		"PREPOSITIONS": {
 			"OF": "von"
@@ -380,6 +381,9 @@
 		"TITLE": "Datenmanagementpläne",
 		"OWNER": "Besitzer",
 		"MEMBER": "Mitglied",
+		"EDITED": "Edited",
+		"FINALIZED": "Finalized",
+		"PUBLISHED": "Published",
 		"CREATOR": "Ersteller",
 		"COLUMNS": {
 			"NAME": "Name",
@@ -557,6 +561,12 @@
 			"NEW": "Neue Datensatzbeschreibung",
 			"CREATE-NEW": "Neue Datensatzbeschreibung erstellen"
 		},
+		"STATES": {
+			"EDITED": "Edited",
+			"PUBLIC": "Public",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published"
+		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
 				"DRAFT": "Privater Zugriff - Datensatzbeschreibung bearbeitbar",
@@ -679,7 +689,9 @@
 		"TITLE": {
 			"NEW": "Neuer Datenmanagementplan",
 			"EDIT": "Bearbeiten",
-			"SUBTITLE": "DOI"
+			"SUBTITLE": "DOI",
+			"EDIT-DATASET": "Editing Dataset",
+			"CREATE-DATASET": "Creating Dataset Description"
 		},
 		"FIELDS": {
 			"NAME": "Titel",
@@ -691,6 +703,7 @@
 			"TEMPLATES": "Vorlagen",
 			"TEMPLATE": "DMP Vorlage",
 			"DATASET-TEMPLATES": "Zugehörige Vorlagen für Datensatzbeschreibungen",
+			"SELECT-TEMPLATE": "Select a template to describe your dataset",
 			"PROFILE": "DMP Vorlage",
 			"PROJECT": "Projekt",
 			"GRANT": "Förderung",
@@ -812,6 +825,7 @@
 			"PROFILE": "Vorlage",
 			"URI": "URI",
 			"DMP": "DMP",
+			"SELECT-DMP": "Select DMP",
 			"DATAREPOSITORIES": "Datenrepositorien",
 			"REGISTRIES": "Verzeichnisse",
 			"SERVICES": "Dienste",
@@ -938,6 +952,14 @@
 			"DMPS": "DMPs",
 			"DATASETS": "Datensatzbeschreibungen",
 			"EXTERNAL-SOURCE-HINT": "Liste jener Werte, die von externer(n) Quelle(n) stammen"
+		},
+		"RECENT-ACTIVITY-ORDER": {
+			"CREATED": "Created",
+			"LABEL": "Label",
+			"MODIFIED": "Modified",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published",
+			"STATUS": "Status"
 		}
 	},
 	"ADDRESEARCHERS-EDITOR": {

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

@@ -81,7 +81,8 @@
 			"SHOW-MORE": "Show more",
 			"LOAD-MORE": "Load more",
 			"SHOW-LESS": "Show less",
-			"LOG-IN": "Log in"
+			"LOG-IN": "Log in",
+			"TAKE-A-TOUR": "Do you need help? Take a tour.."
 		},
 		"PREPOSITIONS": {
 			"OF": "of"
@@ -404,6 +405,8 @@
 		"MEMBER": "Member",
 		"CREATOR": "Creator",
 		"EDITED": "Edited",
+		"FINALIZED": "Finalized",
+		"PUBLISHED": "Published",
 		"VERSION": "Version",
 		"CONTAINED-DATASETS": "Contained Dataset Descriptions",
 		"TEXT-INFO": "Information in a DMP show how datasets have been collected and/or generated, how they have been processed and analysed, i.e. using which tools, standards, methodologies etc, but also where and how datasets are backed up, published and preserved, including any costs associated with personnel dedicated for data curation/ stewardship activities or costs for acquiring or building data management services.",
@@ -625,7 +628,9 @@
 		},
 		"STATES": {
 			"EDITED": "Edited",
-			"PUBLIC": "Public"
+			"PUBLIC": "Public",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published"
 		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
@@ -755,6 +760,7 @@
 			"EDIT": "Edit",
 			"EDIT-DMP": "Editing DMP",
 			"EDIT-DATASET": "Editing Dataset",
+			"CREATE-DATASET": "Creating Dataset Description",
 			"SUBTITLE": "DOI"
 		},
 		"FIELDS": {
@@ -768,6 +774,7 @@
 			"TEMPLATES": "Templates",
 			"TEMPLATE": "DMP Template",
 			"DATASET-TEMPLATES": "Related Dataset Description Templates",
+			"SELECT-TEMPLATE": "Select a template to describe your dataset",
 			"PROFILE": "DMP Template",
 			"PROJECT": "Project",
 			"GRANT": "Grant",
@@ -939,6 +946,7 @@
 			"PROFILE": "Template",
 			"URI": "Uri",
 			"DMP": "DMP",
+			"SELECT-DMP": "Select DMP",
 			"DATAREPOSITORIES": "Data Repositories",
 			"REGISTRIES": "Registries",
 			"SERVICES": "Services",
@@ -1091,6 +1099,8 @@
 			"CREATED": "Created",
 			"LABEL": "Label",
 			"MODIFIED": "Modified",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published",
 			"STATUS": "Status"
 		}
 	},
@@ -1259,9 +1269,9 @@
 		"SEARCH": "SEARCH...",
 		"DATA-MANAGEMENT-PLANS": "DATA MANAGEMENT PLANS",
 		"PERSONAL-USAGE": "Personal Usage",
-		"DMPS": "DMPs",
 		"DATASET-DESCRIPTIONS": "Dataset Descriptions",
-		"GRANTS": "Grants",
+		"PUBLIC-DMPS": "Public DMPs",
+		"PUBLIC-DATASETS": "Public Dataset Descriptions",
 		"RELATED-ORGANISATIONS": "Related Organisations",
 		"DRAFTS": "Drafts",
 		"ALL": "All",

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

@@ -81,7 +81,8 @@
 			"SHOW-MORE": "Mostrar más",
 			"LOAD-MORE": "Cargar más",
 			"SHOW-LESS": "Mostrar menos",
-			"LOG-IN": "Iniciar sesión"
+			"LOG-IN": "Iniciar sesión",
+			"TAKE-A-TOUR": "Do you need help? Take a tour.."
 		},
 		"PREPOSITIONS": {
 			"OF": "de"
@@ -404,6 +405,8 @@
 		"MEMBER": "Miembro",
 		"CREATOR": "Autor",
 		"EDITED": "Editado",
+		"FINALIZED": "Finalized",
+		"PUBLISHED": "Published",
 		"VERSION": "Versión",
 		"CONTAINED-DATASETS": "Descripciones de los datasets incluídos",
 		"TEXT-INFO": "La información en un PGD muestra cómo los datasets han sido creados y/o generados, cómo han sido procesados y analizados (e.j: con qué herramientas, stándares, metodologías, etc.) y también dónde y cómo se hacen las copias de seguridad, son publicados y preservados, incluyendo los costes asociados con el personal dedicado a la curación de datos, actividades de administración o los costes para adquirir o crear servicios de administración de datos.",
@@ -624,8 +627,10 @@
 			"INVITE-COLLABORATORS": "Invitar colaboradores"
 		},
 		"STATES": {
-			"EDITED": "Editado",
+			"EDITED": "Edited",
-			"PUBLIC": "Publicado"
+			"PUBLIC": "Public",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published"
 		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
@@ -754,6 +759,8 @@
 			"NEW": "Nuevo Plan de Gestión de Datos",
 			"EDIT": "Editar",
 			"EDIT-DMP": "Editando PGD",
+			"EDIT-DATASET": "Editing Dataset",
+			"CREATE-DATASET": "Creating Dataset Description",
 			"SUBTITLE": "DOI"
 		},
 		"FIELDS": {
@@ -767,6 +774,7 @@
 			"TEMPLATES": "Plantillas",
 			"TEMPLATE": "Plantilla del PGD",
 			"DATASET-TEMPLATES": "Plantillas para la descripción de dataset relacionados",
+			"SELECT-TEMPLATE": "Select a template to describe your dataset",
 			"PROFILE": "Plantilla del PGD",
 			"PROJECT": "Proyecto",
 			"GRANT": "Subvención",
@@ -935,6 +943,7 @@
 			"PROFILE": "Plantilla",
 			"URI": "Uri",
 			"DMP": "PGD",
+			"SELECT-DMP": "Select DMP",
 			"DATAREPOSITORIES": "Repositorios de Datos",
 			"REGISTRIES": "Registros",
 			"SERVICES": "Servicios",
@@ -1080,7 +1089,9 @@
 			"CREATED": "Creado",
 			"LABEL": "Etiqueta",
 			"MODIFIED": "Modificado",
-			"STATUS": "Estado"
+			"STATUS": "Estado",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published"
 		}
 	},
 	"ADDRESEARCHERS-EDITOR": {
@@ -1248,10 +1259,10 @@
 		"SEARCH": "BUSCAR...",
 		"DATA-MANAGEMENT-PLANS": "PLANES DE GESTIÓN DE DATOS",
 		"PERSONAL-USAGE": "Uso personal",
-		"DMPS": "PGDs",
 		"DATASET-DESCRIPTIONS": "Descripciones de los datasets",
-		"GRANTS": "Grants",
 		"RELATED-ORGANISATIONS": "Organizaciones relacionadas",
+		"PUBLIC-DMPS": "Public DMPs",
+		"PUBLIC-DATASETS": "Public Dataset Descriptions",
 		"DRAFTS": "Borradores",
 		"ALL": "Todo",
 		"EMPTY-LIST": "Nada aquí todavía.",

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

@@ -80,7 +80,8 @@
 			"VIEW-ALL": "Προβολή όλων",
 			"SHOW-MORE": "Δείτε περισσότερα",
 			"SHOW-LESS": "Δείτε λιγότερα",
-			"LOG-IN": "Σύνδεση"
+			"LOG-IN": "Σύνδεση",
+			"TAKE-A-TOUR": "Do you need help? Take a tour.."
 		},
 		"PREPOSITIONS": {
 			"OF": "of"
@@ -401,6 +402,8 @@
 		"MEMBER": "Μέλος",
 		"CREATOR": "Συντάκτης",
 		"EDITED": "Επεξεργάστηκε",
+		"FINALIZED": "Finalized",
+		"PUBLISHED": "Published",
 		"VERSION": "Έκδοση",
 		"CONTAINED-DATASETS": "Δεδομένα που συμπεριλαμβάνει",
 		"TEXT-INFO": "Information in a DMP show how datasets have been collected and/or generated, how they have been processed and analysed, i.e. using which tools, standards, methodologies etc, but also where and how datasets are backed up, published and preserved, including any costs associated with personnel dedicated for data curation/ stewardship activities or costs for acquiring or building data management services. Not sure how a DMP looks in practice? Browse Public DMPs and LIBER community in Zenodo to get an idea!",
@@ -621,8 +624,10 @@
 			"INVITE-COLLABORATORS": "Προσκάλεσε συνεργάτες"
 		},
 		"STATES": {
-			"EDITED": "Επεξεργάστηκε",
+			"EDITED": "Edited",
-			"PUBLIC": "Δημοσιευμένο"
+			"PUBLIC": "Public",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published"
 		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
@@ -763,6 +768,7 @@
 			"TEMPLATES": "Templates",
 			"TEMPLATE": "Template Σχεδίου Διαχείρισης Δεδομένων",
 			"DATASET-TEMPLATES": "Σχετικά Templates Περιγραφής Συνόλου Δεδομένων",
+			"SELECT-TEMPLATE": "Select a template to describe your dataset",
 			"PROFILE": "Template Σχεδίου Διαχείρισης Δεδομένων",
 			"PROJECT": "Έργο",
 			"GRANT": "Επιχορήγηση",
@@ -923,6 +929,8 @@
 		"TITLE": {
 			"NEW": "Νέο Σχέδιο Διαχείρισης Δεδομένων",
 			"EDIT": "Επεξεργασία",
+			"EDIT-DATASET": "Editing Dataset",
+			"CREATE-DATASET": "Creating Dataset Description",
 			"INTRO": "A Data Management Plan (DMP) consist of your Data Management Plans closer to where they are generated, analysed and stored. argos is an open, extensible, collaborative tool supporting Open and FAIR Data Management Plans."
 		},
 		"FIELDS": {
@@ -932,6 +940,7 @@
 			"PROFILE": "Template",
 			"URI": "Uri",
 			"DMP": "Σχέδιο Διαχείρισης Δεδομένων",
+			"SELECT-DMP": "Select DMP",
 			"DATAREPOSITORIES": "Αποθετήρια Δεδομένων",
 			"REGISTRIES": "Κατάλογοι",
 			"SERVICES": "Υπηρεσίες",
@@ -1083,6 +1092,8 @@
 			"CREATED": "Created",
 			"LABEL": "Label",
 			"MODIFIED": "Modified",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published",
 			"STATUS": "Status"
 		}
 	},
@@ -1239,9 +1250,9 @@
 		"SEARCH": "ΑΝΑΖΗΤΗΣΗ...",
 		"DATA-MANAGEMENT-PLANS": "ΣΧΕΔΙΑ ΔΙΑΧΕΙΡΙΣΗΣ ΔΕΔΟΜΕΝΩΝ",
 		"PERSONAL-USAGE": "Προσωπική Χρήση",
-		"DMPS": "DMPs",
 		"DATASET-DESCRIPTIONS": "Περιγραφές Dataset",
-		"GRANTS": "Grants",
+		"PUBLIC-DMPS": "Public DMPs",
+		"PUBLIC-DATASETS": "Public Dataset Descriptions",
 		"RELATED-ORGANISATIONS": "Σχετικοί Οργανισμοί",
 		"DRAFTS": "Προσχέδια",
 		"ALL": "Όλα",

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

@@ -79,7 +79,8 @@
 			"VIEW-ALL": "Tümüne Gör",
 			"SHOW-MORE": "Daha fazla göster",
 			"SHOW-LESS": "Daha az göster",
-			"LOG-IN": "Oturum aç"
+			"LOG-IN": "Oturum aç",
+			"TAKE-A-TOUR": "Do you need help? Take a tour.."
 		},
 		"PREPOSITIONS": {
 			"OF": "nın"
@@ -379,6 +380,8 @@
 	"DMP-LISTING": {
 		"TITLE": "Veri Yönetim Planları",
 		"OWNER": "Sahibi",
+		"FINALIZED": "Finalized",
+		"PUBLISHED": "Published",
 		"MEMBER": "Üye",
 		"CREATOR": "Oluşturan",
 		"COLUMNS": {
@@ -557,6 +560,12 @@
 			"NEW": "Yeni Veriseti Tanımı",
 			"CREATE-NEW": "Yeni Veriseti Tanımı Oluştur"
 		},
+		"STATES": {
+			"EDITED": "Edited",
+			"PUBLIC": "Public",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published"
+		},
 		"TOOLTIP": {
 			"DATASET-STATUS": {
 				"DRAFT": "Özel erişim - Düzenlenebilir Veriseti Tanımı",
@@ -691,6 +700,7 @@
 			"TEMPLATES": "Şablonlar",
 			"TEMPLATE": "VYP Şablonu",
 			"DATASET-TEMPLATES": "İlgili Veriseti Tanım Şablonları",
+			"SELECT-TEMPLATE": "Select a template to describe your dataset",
 			"PROFILE": "VYP Şablonu",
 			"PROJECT": "Proje",
 			"GRANT": "Hibe",
@@ -804,7 +814,9 @@
 	"DATASET-EDITOR": {
 		"TITLE": {
 			"NEW": "Yeni Veri Yönetim Planı",
-			"EDIT": "Düzenle"
+			"EDIT": "Düzenle",
+			"EDIT-DATASET": "Editing Dataset",
+			"CREATE-DATASET": "Creating Dataset Description"
 		},
 		"FIELDS": {
 			"NAME": "Veriseti Tanımının Adı",
@@ -812,6 +824,7 @@
 			"PROFILE": "Şablon",
 			"URI": "Uri",
 			"DMP": "VYP",
+			"SELECT-DMP": "Select DMP",
 			"DATAREPOSITORIES": "Veri Deposu",
 			"REGISTRIES": "Kayıtçılar",
 			"SERVICES": "Hizmetler",
@@ -938,6 +951,14 @@
 			"DMPS": "VYP'ları",
 			"DATASETS": "Veriseti Tanımları",
 			"EXTERNAL-SOURCE-HINT": "Dış kaynak(lar) tarafından sağlanan değerlerin listesi"
+		},
+		"RECENT-ACTIVITY-ORDER": {
+			"CREATED": "Created",
+			"LABEL": "Label",
+			"MODIFIED": "Modified",
+			"FINALIZED": "Finalized",
+			"PUBLISHED": "Published",
+			"STATUS": "Status"
 		}
 	},
 	"ADDRESEARCHERS-EDITOR": {

dmp-frontend/src/assets/splash/about/contributors.html

@@ -86,7 +86,7 @@
 				</div>
 			</div>
 			<div class="card flex-row">
-				<img class="col-4 flag" alt="Flag of Austria" src="../assets/img/flag-of-germany.png">
+				<img class="col-4 flag" alt="Flag of Austria" src="../assets/img/flag-of-austria.png">
 				<div class="col-8 card-body pl-0" class="flex-column align-items-center">
 					<p class="card-text-1">UNIVERSITY OF VIENNA</p>
 					<p class="card-text-2">Gerda McNeill, Raman Ganguly, Mihaela Hubert</p>

dmp-frontend/src/styles.scss

@@ -5,6 +5,9 @@
 // Material-Bootstrap configuration
 @import "~bootstrap/scss/bootstrap";
 
+// Guided Tour style
+@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
+
 // Custom Theme
 // @import "./assets/scss/blue-theme.scss";
 
@@ -171,13 +174,11 @@
 	flex-grow: 1;
 }
 
+::ng-deep .mat-form-field-wrapper {
+	background-color: white !important;
+	padding-bottom: 0 !important;
+}
 
-// ::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important; }
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
-// ::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }
+	padding: 0.3rem 0rem 0.6rem 0rem !important;
-
+}
-// ::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
-//     transform: translateY(-1.1em) scale(.75);
-//     width: 133.33333%;
-// }
-
-// ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {background: #fafafa !important;}