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

<div class="main-content">
	<div class="container-fluid">
		<div *ngIf="dmp" class="card pb-4">
			<div class="card-header card-header-plain d-flex">
				<div class="card-desc d-flex flex-column justify-content-center">
					<h4 class="card-title">{{ dmp.label }}</h4>
				</div>
				<div class="d-flex ml-auto p-2">
					<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon"
						(click)="$event.stopImmediatePropagation();">
						<mat-icon class="more-horiz">more_horiz</mat-icon>
					</button>
					<mat-menu #actionsMenu="matMenu">
						<button mat-menu-item (click)="editClicked(dmp)" class="menu-item">
							<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
						</button>
						<button mat-menu-item (click)="cloneClicked(dmp)" class="menu-item">
							<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
						</button>
						<button mat-menu-item (click)="deleteClicked()" class="menu-item">
							<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
						</button>
						<button mat-menu-item (click)="advancedClicked()" class="menu-item">
							<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.ADV-EXP' | translate }}
						</button>
					</mat-menu>
					<button mat-raised-button color="primary" (click)="downloadPDF(dmp.id)" class="lightblue-btn ml-2">
						<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
					</button>
				</div>
			</div>
			<div class="row ml-2">
				<div class="col-md-9 col-lg-9">
					<div class="row">
						<div class="col-6 dmp-info">
							<p class="card-subtitle">{{ dmp.label }}</p>
							<p>{{ dmp.description }}</p>
							<div class="row total-info">
								<div class="col-12 d-flex flex-row">
									<mat-icon class="gray-icon pt-2">settings</mat-icon>
									<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplay(dmp.users) }}</p>

									<div class="datasets-counter">
										<mat-icon class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
										</mat-icon>
										<p class="mt-2 ml-1 p-1" (click)="datasetsClicked(dmp.id)">
											{{ dmp.datasets.length }}</p>
										<p class="mt-2 mr-3 p-1" (click)="datasetsClicked(dmp.id)">
											{{'NAV-BAR.DATASETS' | translate}}</p>
									</div>

									<mat-icon class="gray-icon pt-2">assignment</mat-icon>
									<p class="mt-2 ml-1 p-1">{{ dmp.associatedProfiles.length }}</p>
									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.TEMPLATES' | translate }}</p>

									<mat-icon class="gray-icon pt-2">person</mat-icon>
									<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
									<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div *ngFor="let dataset of dmp.datasets" class="col-md-4">
							<div class="dataset-card" (click)="datasetClicked(dataset.id)">
								<mat-icon *ngIf="isDraft(dataset)" class="draft-bookmark">bookmark</mat-icon>
								<mat-icon *ngIf="!isDraft(dataset)" class="finalized-bookmark">bookmark</mat-icon>
								<h4 *ngIf="isDraft(dataset)"><span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
								<h4 *ngIf="!isDraft(dataset)">{{ dataset.label }}</h4>
								<div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
									{{ dataset.datasetTemplate.label }}</div>
							</div>
						</div>
					</div>
					<div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
						<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
							<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
						</button>
					</div>
				</div>
				<div class="col-md-3 col-lg-3">
					<div class="project-item">
						<div class="gray-container container-header">
							<span class="ml-2 pt-2"
								(click)="projectClicked(dmp.project.id)">{{ dmp.project.abbreviation }}</span>
						</div>
						<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.project.label }}</p>
						<p class="mb-1 ml-3 mr-3">{{ dmp.project.startDate | date: "shortDate" }} -
							{{ dmp.project.endDate | date: "shortDate" }}</p>


							<p class="ml-3 mr-3 desc">{{ dmp.project.description }}</p>
							<button mat-flat-button class="show-more" (click)="projectClicked(dmp.project.id)">
								<!-- <mat-icon class="mr-2">expand_more</mat-icon> -->
								{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
							</button>

						<a mat-raised-button class="visit-website" href="{{dmp.project.uri}}" target="_blank">
							<mat-icon class="mr-2">open_in_new</mat-icon>
							{{ 'PROJECT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
						</a>
					</div>
					<div class="researchers">
						<h6 class="researchers-title">Researchers</h6>
						<div *ngFor="let researcher of dmp.researchers">
							<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>