argos/dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-dialog.component.html

<form *ngIf="formGroup" (ngSubmit)="onSubmit()">
	<div class="row d-flex flex-row">
		<div mat-dialog-title class="col-auto">{{ data.message }}</div>
		<div class="col-auto close-btn ml-auto" (click)="close()">
			<mat-icon>close</mat-icon>
		</div>
	</div>
	<div mat-dialog-content *ngIf="datasetsFinalized && datasetsDraft" class="pt-2 pb-2">
		<mat-accordion [multi]="true">
			<mat-expansion-panel>
				<mat-expansion-panel-header>
					<mat-panel-title>
						{{ 'DMP-FINALISE-DIALOG.DMP' | translate }}
					</mat-panel-title>
					<mat-panel-description class="dmp-title">
						{{ formGroup.get('label').value }}
					</mat-panel-description>
				</mat-expansion-panel-header>
				{{ formGroup.get('description').value }}
			</mat-expansion-panel>
			<mat-expansion-panel [expanded]="true">
				<mat-expansion-panel-header>
					<mat-panel-title>
						{{ 'DMP-FINALISE-DIALOG.DATASETS' | translate }}
					</mat-panel-title>
					<mat-panel-description></mat-panel-description>
				</mat-expansion-panel-header>
				<div *ngIf="allDatasets.length > 0">
					<div *ngFor="let dataset of allDatasets" class="row pl-3 datasets">
						<mat-icon *ngIf="isDraft(dataset)" class="col-1 draft-bookmark">bookmark</mat-icon>
						<mat-icon *ngIf="!isDraft(dataset)" class="col-1 finalized-bookmark">bookmark</mat-icon>
						<h4 *ngIf="isDraft(dataset)" class="col-11 ml-auto mt-1 mb-4">
							<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span>
							{{ dataset.label }}</h4>
						<h4 *ngIf="!isDraft(dataset)" class="col-11 ml-auto mt-1 mb-4">{{ dataset.label }}</h4>
					</div>
				</div>
				<div *ngIf="allDatasets.length === 0" class="emptyList">{{ 'DMP-FINALISE-DIALOG.EMPTY' | translate }} </div>
			</mat-expansion-panel>
		</mat-accordion>

		<div *ngIf="datasetsDraft.length > 0" class="pt-4 pb-2">
			<h4 class="pl-2">{{'DMP-FINALISE-DIALOG.FINALISE-TITLE' | translate}}</h4>
			<mat-selection-list #datasetsDraftSelectionList [formControl]="this.formGroup.get('datasetsToBeFinalized')">
				<div class="styleBorder" *ngFor="let dataset of datasetsDraft">
					<mat-list-option [value]='dataset.id'>
						{{ dataset.label }}
					</mat-list-option>
				</div>
			</mat-selection-list>
		</div>
		<mat-error *ngIf="datasetsFinalized.length == 0">{{'DMP-FINALISE-DIALOG.VALIDATION.AT-LEAST-ONE-DATASET-FINALISED'
				| translate}}</mat-error>
	</div>

	<div mat-dialog-content *ngIf="isWizard" class="pt-2 pb-2">
		<mat-accordion [multi]="true">
			<mat-expansion-panel>
				<mat-expansion-panel-header>
					<mat-panel-title>
						{{ 'DMP-FINALISE-DIALOG.DMP' | translate }}
					</mat-panel-title>
					<mat-panel-description class="dmp-title">
						{{ formGroup.get('dmp')?.get('label')?.value }}
					</mat-panel-description>
				</mat-expansion-panel-header>
				{{ formGroup.get('dmp')?.get('description')?.value }}
			</mat-expansion-panel>
			<mat-expansion-panel [expanded]="true">
				<mat-expansion-panel-header>
					<mat-panel-title>
						{{ 'DMP-FINALISE-DIALOG.DATASETS' | translate }}
					</mat-panel-title>
					<mat-panel-description></mat-panel-description>
				</mat-expansion-panel-header>
				<div *ngIf="allDatasetLabels.length > 0">
					<div *ngFor="let label of allDatasetLabels" class="row pl-3 datasets">
						<mat-icon class="col-1 finalized-bookmark">bookmark</mat-icon>
						<h4 class="col-11 ml-auto mt-1 mb-4">{{ label }}</h4>
					</div>
				</div>
				<div *ngIf="allDatasetLabels.length === 0" class="emptyList"> {{ 'DMP-FINALISE-DIALOG.EMPTY' | translate }} </div>
			</mat-expansion-panel>
		</mat-accordion>
	</div>

	<div *ngIf="datasetsFinalized && datasetsFinalized.length != 0">
		<div class="row pt-2 pb-2 pl-4 pr-4">
			{{ 'DMP-FINALISE-DIALOG.IMPACT' | translate }}
		</div>
		<div class="row pl-4 pr-4">
			{{ 'DMP-FINALISE-DIALOG.AFTER-FINALIZATION' | translate }}
		</div>
	</div>

	<div mat-dialog-actions class="d-flex justify-content-end">
		<div class="col-auto">
			<button mat-raised-button type="submit" class="confirm">{{ data.confirmButton }}</button>
		</div>
		<div class="col-auto">
			<button mat-raised-button cdkFocusInitial type="button" (click)="cancel()"
				class="cancel">{{ data.cancelButton }}</button>
		</div>
	</div>
</form>