Merge branch 'feature/442307_download_metadata' into 'develop'

feature/442307_download_metadata See merge request upm-inesdata/inesdata-public-portal-frontend!12
oeg-upm · Sep 12, 2024 · 4475a78 · 4475a78
2 parents 919c117 + 949621b
commit 4475a78
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 79 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/pages/catalog/asset-details/asset-details.component.html b/src/app/pages/catalog/asset-details/asset-details.component.html
@@ -5,10 +5,21 @@
 
 <div class="item-detail">
 	<div class="header">
-		<i [ngClass]="getAssetTypeIconClass()" class="pi icon"></i>
-		<h1 class="title">{{ dataset.properties.name }}</h1>
-		<span class="version">Versión {{ dataset.properties.version }}</span>
-		<span class="item-id">{{ dataset.assetId }}</span>
+		<div class="title-version">
+			<i [ngClass]="getAssetTypeIconClass()" class="pi icon"></i>
+			<div>
+				<h1 class="title">{{ dataset.properties.name }}</h1>
+				<span class="version">Versión {{ dataset.properties.version }}</span>
+			</div>
+		</div>
+
+		<div class="item-id">
+			{{ dataset.assetId }}
+			<div class="clickable download" (click)="dynamicDownloadAssetJson()">
+				<i class="pi pi-download"></i>
+				Descargar metadatos
+			</div>
+		</div>
 	</div>
 
 	<p class="short-description">

diff --git a/src/app/pages/catalog/asset-details/asset-details.component.scss b/src/app/pages/catalog/asset-details/asset-details.component.scss
@@ -9,18 +9,22 @@
 		align-items: center;
 		margin-bottom: 20px;
 
+		.title-version {
+			display: flex;
+		}
+
 		.icon {
-			width: 40px;
-			height: 40px;
-			align-content: center;
+			width: 50px;
+			height: 50px;
+			align-self: center;
 			font-size: 2.5rem;
 			margin-right: 15px;
 
 			&.pi-machinelearning {
 				&::before {
 					filter: saturate(0) brightness(0.6);
-					width: 40px;
-					height: 40px;
+					width: 50px;
+					height: 50px;
 				}
 			}
 		}
@@ -116,6 +120,14 @@
 	}
 }
 
+.clickable.download{
+	font-size: 18px;
+	font-weight: 500;
+	 i {
+			margin-right: 8px;
+	 }
+}
+
 :host ::ng-deep .grey .p-accordion-tab {
 	.p-accordion-header-link {
 		border: 0px;