#449972 - Finished redesign

Author: ppelgmv

package-lock.json

@@ -1,14 +1,14 @@
-<mat-card class="creation-card">
+<div class="creation-card">
   <mat-card-header>
     <mat-card-title>Create an asset</mat-card-title>
   </mat-card-header>
 
-  <mat-tab-group>
+  <mat-tab-group animationDuration="0ms" mat-stretch-tabs="false" mat-align-tabs="start" class="main-tab-group">
     <mat-tab label="Asset information">
       <div class="asset-creation-tab">
         <div>
           <mat-form-field class="form-field" color="accent">
-            <mat-label>Id</mat-label>
+            <mat-label>ID</mat-label>
             <input required [(ngModel)]="id" matInput>
           </mat-form-field>
           <mat-form-field class="form-field" color="accent">
@@ -35,7 +35,7 @@
           </mat-form-field>
         </div>
         <div>
-          <ckeditor [(ngModel)]="description" [config]="config" [editor]="editor"></ckeditor>
+          <ckeditor [(ngModel)]="description" #descriptionModel="ngModel" [config]="config" [editor]="editor" [ngClass]="{'ckeditor-error': descriptionModel.invalid && descriptionModel.touched}" required></ckeditor>
         </div>
         <div>
           <mat-form-field class="form-field" color="accent">
@@ -65,9 +65,9 @@
     </mat-tab>
 
     <mat-tab label="Detailed information" *ngIf="vocabularies?.length > 0">
-      <mat-tab-group>
+      <mat-tab-group animationDuration="0ms" mat-stretch-tabs="false" mat-align-tabs="start">
         <mat-tab label="Default information" *ngIf="defaultVocabularies?.length>0 && defaultForms?.length>0">
-          <div class="asset-creation-tab">
+          <div class="asset-creation-vocabularies">
             <div *ngFor="let defaultForm of defaultForms">
               <mat-expansion-panel class="custom-expansion">
                 <mat-expansion-panel-header>
@@ -82,7 +82,7 @@
           </div>
         </mat-tab>
         <mat-tab [label]="getAssetTypeText()+' information'" *ngIf="selectedVocabularies?.length>0">
-          <div>
+          <div class="asset-creation-tab">
             <mat-form-field class="form-field-full" color="accent">
               <mat-label>Vocabularies</mat-label>
               <mat-select [(ngModel)]="selectedAssetTypeVocabularies" multiple
@@ -93,7 +93,7 @@
               </mat-select>
             </mat-form-field>
           </div>
-          <div class="asset-creation-tab">
+          <div class="asset-creation-vocabularies">
             <div *ngFor="let selectedForm of selectedForms">
               <mat-expansion-panel class="custom-expansion">
                 <mat-expansion-panel-header>
@@ -118,7 +118,7 @@
         <div>
           <mat-form-field class="form-field" color="accent">
             <mat-label>Destination</mat-label>
-            <mat-select [(ngModel)]="storageTypeId">
+            <mat-select [(ngModel)]="storageTypeId" required>
               <mat-option *ngFor="let storageType of storageTypes " [value]="storageType.id">
                 {{storageType.name}}
               </mat-option>
@@ -237,13 +237,13 @@
     </mat-tab>
   </mat-tab-group>
 
-  <div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="end">
-    <button (click)="navigateToAsset()" color="accent" mat-stroked-button>
+  <div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="end" class="form-actions">
+    <button (click)="navigateToAsset()" color="warn" mat-stroked-button>
       <mat-icon>cancel</mat-icon> Cancel
     </button>
 
     <button (click)="onSave()" color="accent" mat-stroked-button>
       <mat-icon>add_circle_outline</mat-icon> Create
     </button>
   </div>
-</mat-card>
+</div>

src/app/pages/assets/asset-create/asset-create.component.html

@@ -20,6 +20,8 @@
   box-sizing: border-box;
   width: 100%;
   margin-bottom: 1.5em;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .short-description {
@@ -39,10 +41,6 @@
   background-color: white;
 }
 
-.mat-mdc-tab-group .mat-mdc-tab-group {
-  background-color: var(--grey-400);
-}
-
 :host ::ng-deep .mat-mdc-tab-group .mat-mdc-tab-group mat-form-field .mat-mdc-text-field-wrapper{
   background-color: white;
 }
@@ -52,6 +50,10 @@ mat-panel-title,
   color: var(--secondary-600);
 }
 
+mat-panel-title mat-icon {
+  margin-right: 10px;
+}
+
 :host ::ng-deep .mat-column-action {
   text-align: center;
 }
@@ -62,5 +64,67 @@ mat-panel-title,
 
 :host ::ng-deep .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
   border-color: var(--secondary-500);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.toggle {
+  margin-bottom: 22px;
+  --mat-mdc-form-field-floating-label-scale: 0.75;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+  text-align: left;
+}
+
+mat-slide-toggle {
+  margin-left: 15px;
+}
+
+:host ::ng-deep mat-slide-toggle .mdc-form-field>label {
+  padding-left: 10px;
+  color: var(--secondary-600);
+}
+
+:host ::ng-deep .ckeditor-error .ck-editor__editable_inline,
+:host ::ng-deep .ckeditor-error .ck-placeholder:before {
+  border-color: var(--secondary-red-500) !important;
+  color: var(--secondary-red-500) !important;
+}
+
+:host ::ng-deep .ck-placeholder {
+  font-style: italic;
+}
+
+:host ::ng-deep  .mat-mdc-table .mdc-data-table__row {
+  height: 100px;
+}
+:host ::ng-deep  .mat-mdc-table {
+  table-layout: fixed;
+}
+
+.asset-creation-tab {
+  padding: 0 20px;
+}
+
+mat-expansion-panel {
+  box-shadow: 0px 0px 10px 0px #0000001F;
+}
+
+.form-actions {
+  margin-top: 30px;
+}
+
+mat-tab-group:not(.main-tab-group) .mat-mdc-tab-header {
+  border-bottom: 1px solid var(--grey-400);
+  padding-left: 15px;
+}
+
+.asset-creation-vocabularies {
+  margin: 0 20px;
+  min-height: 150px;
 }
 
+.asset-creation-vocabularies mat-expansion-panel{
+  margin: 20px 0;
+}

src/app/pages/assets/asset-create/asset-create.component.scss

@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { HttpDataAddress, DataAddress } from '@think-it-labs/edc-connector-client';
 import { JsonDoc } from "../../../shared/models/json-doc";
 import { StorageType } from "../../../shared/models/storage-type";
@@ -19,6 +19,7 @@ import { AssetService } from 'src/app/shared/services/asset.service';
 import { BehaviorSubject } from 'rxjs';
 import { Router } from '@angular/router';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { NgModel } from '@angular/forms';
 
 
 @Component({
@@ -91,8 +92,9 @@ export class AssetCreateComponent implements OnInit {
 
   assetType: any;
   assetTypes = Object.entries(ASSET_TYPES);
-  defaultForms: JsonFormData[]
-  selectedForms: JsonFormData[]
+  defaultForms: JsonFormData[];
+  selectedForms: JsonFormData[];
+  @ViewChildren(NgModel) formControls: QueryList<NgModel>;
 
   inesDataStoreFiles: File[]
 
@@ -156,6 +158,9 @@ export class AssetCreateComponent implements OnInit {
 
   async onSave() {
     this.loadingService.showLoading();
+    this.formControls.toArray().forEach(control => {
+      control.control.markAsTouched();
+    });
     // Check whether the asset is valid
     if (!this.checkVocabularyData() || !this.checkRequiredFields()) {
       this.notificationService.showError("Review the form fields");

src/app/pages/assets/asset-create/asset-create.component.ts

@@ -3,14 +3,14 @@
     <mat-icon>arrow_back</mat-icon> Go back
   </button>
 
-  <mat-tab-group>
+  <mat-tab-group animationDuration="0ms" mat-stretch-tabs="false" mat-align-tabs="start" class="main-tab-group">
     <mat-tab label="Asset information">
-      <mat-tab-group>
+      <mat-tab-group animationDuration="0ms" mat-stretch-tabs="false" mat-align-tabs="start">
         <mat-tab label="General information">
           <mat-card class="dialog-card">
             <div fxLayout="row" fxLayoutGap="15px">
               <mat-list-item class="property" fxFlex="50">
-                <div class="property-title" matListItemTitle>Id</div>
+                <div class="property-title" matListItemTitle>ID</div>
                 <div class="property-value" matListItemLine><p>{{data.properties.id}}</p></div>
               </mat-list-item>
               <mat-list-item class="property" fxFlex="50">

src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.html

@@ -116,7 +116,7 @@ mat-expansion-panel-header {
 }
 
 .contract-offer {
-  margin-bottom: 20px;
+  margin: 20px;
   background-color: white;
 }
 

src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.scss

@@ -8,7 +8,7 @@
   </mat-card-header>
 
   <mat-form-field class="form-field" color="accent" id="form-field-id">
-    <mat-label>Id</mat-label>
+    <mat-label>ID</mat-label>
     <input [(ngModel)]="contractDefinition['@id']" [disabled]="editMode" matInput required>
   </mat-form-field>
 
@@ -42,7 +42,7 @@
   </div>
 
   <div fxLayout="row" fxLayoutGap="15px" fxLayoutAlign="end">
-    <button (click)="navigateToContractDefinitions()" color="accent" mat-stroked-button>
+    <button (click)="navigateToContractDefinitions()" color="warn" mat-stroked-button>
       <mat-icon>cancel</mat-icon> Cancel
     </button>
 

src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.html

@@ -1,11 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { AssetService } from "../../../shared/services/asset.service";
 import { PolicyService } from "../../../shared/services/policy.service";
 import { Asset, PolicyDefinition, ContractDefinitionInput } from "../../../shared/models/edc-connector-entities";
 import { NotificationService } from 'src/app/shared/services/notification.service';
 import { ContractDefinitionService } from 'src/app/shared/services/contractDefinition.service';
 import { BehaviorSubject } from 'rxjs';
 import { Router } from '@angular/router';
+import { NgModel } from '@angular/forms';
 
 
 @Component({
@@ -29,6 +30,7 @@ export class ContractDefinitionNewComponent implements OnInit {
     contractPolicyId: undefined!
   };
   private fetch$ = new BehaviorSubject(null);
+  @ViewChildren(NgModel) formControls: QueryList<NgModel>;
 
   constructor(private policyService: PolicyService,
     private assetService: AssetService,
@@ -54,6 +56,10 @@ export class ContractDefinitionNewComponent implements OnInit {
   }
 
   onSave() {
+    this.formControls.toArray().forEach(control => {
+      control.control.markAsTouched();
+    });
+
     if (!this.checkRequiredFields()) {
       this.notificationService.showError("Review required fields");
       return;

src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.ts

@@ -15,7 +15,7 @@
 
   <mat-form-field class="form-field" color="accent" id="form-field-destination">
     <mat-label>Destination</mat-label>
-    <mat-select [(ngModel)]="storageTypeId">
+    <mat-select [(ngModel)]="storageTypeId" required>
       <mat-option *ngFor="let trasnferType of transferTypes" [value]="trasnferType.id">
         {{trasnferType.name}}
       </mat-option>

src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.html

@@ -1,4 +1,5 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, QueryList, ViewChildren } from '@angular/core';
+import { NgModel } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { DataAddress, HttpDataAddress } from '@think-it-labs/edc-connector-client';
 import { AmazonS3DataAddress } from 'src/app/shared/models/amazon-s3-data-address';
@@ -32,6 +33,8 @@ export class ContractTransferDialog {
     type: 'HttpData'
   };
 
+  @ViewChildren(NgModel) formControls: QueryList<NgModel>;
+
   constructor(@Inject('TRANSFER_TYPES') public transferTypes: StorageType[],
     private dialogRef: MatDialogRef<ContractTransferDialog>,
     private notificationService: NotificationService) {
@@ -40,6 +43,10 @@ export class ContractTransferDialog {
   }
 
   onTransfer() {
+    this.formControls.toArray().forEach(control => {
+      control.control.markAsTouched();
+    });
+
     let dataAddress: DataAddress;
 
     if (this.storageTypeId === DATA_ADDRESS_TYPES.amazonS3) {