ui

frontends/dnet-is-application/src/app/contexts/context-params-dialog.html

@@ -4,7 +4,7 @@
     <p *ngIf="!data || data.length == 0">No parameters</p>
             
     <div *ngFor="let p of data">
-        <mat-form-field appearance="fill" style="width: 100%; font-size: 0.8em;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%; font-size: 0.8em;">
             <mat-label>{{p.name}}</mat-label>
             <input matInput required readonly value="{{p.value}}" />
         </mat-form-field>

frontends/dnet-is-application/src/app/contexts/contexts.component.html

@@ -1,6 +1,6 @@
 <h2>Contexts</h2>
 
-<mat-form-field style="width: 100%; margin-top: 10px;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
 </mat-form-field>

frontends/dnet-is-application/src/app/dsm/dsm-add-api.dialog.html

@@ -2,45 +2,7 @@
     <h1 mat-dialog-title>Add a new API</h1>
 
     <div mat-dialog-content>
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>Datasource ID</mat-label>
-            <input matInput readonly value="{{data.dsId}}" />
-        </mat-form-field>
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>Datasource Name</mat-label>
-            <input matInput readonly value="{{data.dsName}}" />
-        </mat-form-field>
-
-
-        <mat-form-field appearance="fill" style="width: 30%;">
-            <mat-label>Api ID (prefix)</mat-label>
-            <input matInput readonly value="{{apiPrefix}}" />
-        </mat-form-field>
-
-        <mat-form-field appearance="fill" style="width: 70%;">
-            <mat-label>Api ID (suffix)</mat-label>
-            <input matInput formControlName="apiId" required />
-            <mat-error *ngIf="addApiForm.get('apiId')?.invalid">This field is <strong>required</strong></mat-error>
-        </mat-form-field>
-
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>Compatibility level</mat-label>
-            <mat-select matInput formControlName="compatibility" required>
-                <mat-option *ngFor="let i of compatibilityLevels" [value]="i">{{i}}</mat-option>
-            </mat-select>
-            <mat-error *ngIf="addApiForm.get('compatibility')?.invalid">This field is <strong>required</strong></mat-error>
-        </mat-form-field>
-
-        <mat-form-field appearance="fill" style="width: 100%;">
-            <mat-label>Content description</mat-label>
-            <mat-select matInput formControlName="contentdescription" required>
-                <mat-option *ngFor="let i of contentDescTypes" [value]="i">{{i}}</mat-option>
-            </mat-select>
-            <mat-error *ngIf="addApiForm.get('contentdescription')?.invalid">This field is
-                <strong>required</strong></mat-error>
-        </mat-form-field>
-
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>Protocol</mat-label>
             <mat-select matInput formControlName="protocol" required (selectionChange)="onChangeProtocol($event)">
                 <mat-option *ngFor="let i of protocols" [value]="i">{{i}}</mat-option>
@@ -48,26 +10,70 @@
             <mat-error *ngIf="addApiForm.get('protocol')?.invalid">This field is <strong>required</strong></mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-card style="margin-top: 10px;" *ngIf="addApiForm.get('protocol')?.value">
+            <mat-card-header>
+              <mat-card-title>API Description</mat-card-title>
+            </mat-card-header>
+            <mat-card-content style="padding-top: 1em;">
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
+                    <mat-label>Datasource (ID: {{data.dsId}})</mat-label>
+                    <input matInput readonly value="{{data.dsName}}" />
+                </mat-form-field>
+
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 30%;">
+                    <mat-label>Api ID (prefix)</mat-label>
+                    <input matInput readonly value="{{apiPrefix}}" />
+                </mat-form-field>
+        
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 70%;">
+                    <mat-label>Api ID (suffix)</mat-label>
+                    <input matInput formControlName="apiId" required placeholder="example: {{addApiForm.get('protocol')?.value}}_01" />
+                    <mat-error *ngIf="addApiForm.get('apiId')?.invalid">This field is <strong>required</strong></mat-error>
+                </mat-form-field>
+
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
+                    <mat-label>Compatibility level</mat-label>
+                    <mat-select matInput formControlName="compatibility" required>
+                        <mat-option *ngFor="let i of compatibilityLevels" [value]="i">{{i}}</mat-option>
+                    </mat-select>
+                    <mat-error *ngIf="addApiForm.get('compatibility')?.invalid">This field is <strong>required</strong></mat-error>
+                </mat-form-field>
+
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 50%;">
+                    <mat-label>Content description</mat-label>
+                    <mat-select matInput formControlName="contentdescription" required>
+                        <mat-option *ngFor="let i of contentDescTypes" [value]="i">{{i}}</mat-option>
+                    </mat-select>
+                    <mat-error *ngIf="addApiForm.get('contentdescription')?.invalid">This field is <strong>required</strong></mat-error>
+                </mat-form-field>
+            </mat-card-content>
+        </mat-card>
+
+        <mat-card style="margin-top: 10px;" *ngIf="addApiForm.get('protocol')?.value">
+            <mat-card-header>
+              <mat-card-title>Configuration Parameters</mat-card-title>
+            </mat-card-header>
+            <mat-card-content style="padding-top: 1em;">
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
                     <mat-label>Base URL</mat-label>
                     <input matInput formControlName="baseurl" required  />
                     <mat-error *ngIf="addApiForm.get('baseurl')?.invalid">This field is <strong>required</strong></mat-error>
                 </mat-form-field>
         
-        <ng-container *ngIf="addApiForm.get('protocol')?.value">
-            <mat-form-field appearance="fill" style="width: 100%;" *ngFor="let p of selProtParams">
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;" *ngFor="let p of selProtParams">
                     <mat-label>Protocol: {{addApiForm.get('protocol')?.value}} - Parameter: {{p.name}}</mat-label>
                     <input matInput required  />
                 </mat-form-field>
-        </ng-container>
 
-        <mat-form-field appearance="fill" style="width: 100%;">
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
                     <mat-label>XPath for Metatadata Identifier</mat-label>
                     <input matInput formControlName="metadataIdentifierPath" required />
                     <mat-error *ngIf="addApiForm.get('metadataIdentifierPath')?.invalid">This field is <strong>required</strong></mat-error>
                 </mat-form-field>
-
+            </mat-card-content>
+        </mat-card>
     </div>
+
     <div mat-dialog-actions>
         <button mat-stroked-button color="primary" type="submit" [disabled]="!addApiForm.valid">Submit</button>
         <button mat-stroked-button color="primary" mat-dialog-close>Close</button>

frontends/dnet-is-application/src/app/dsm/dsm-browse-dialog.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>{{data.label}}</h1>
 
 <div mat-dialog-content>
-    <mat-form-field style="width: 100%; margin-top: 10px;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
         <mat-label>Filter</mat-label>
         <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
       </mat-form-field>

frontends/dnet-is-application/src/app/dsm/dsm-results.component.html

@@ -6,7 +6,7 @@
     <span *ngIf="!field && !value">Returning all the datasources</span>
 </p>
 
-<mat-form-field style="width: 100%; margin-top: 10px;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
     <mat-label><b>Filter in current page</b> (Total: {{(results | searchFilter: filterText).length}})</mat-label>
     <input matInput [(ngModel)]="filterText"  placeholder="Filter..."  autofocus />
 </mat-form-field>
@@ -20,7 +20,7 @@
     aria-label="Select page">
 </mat-paginator>
 
-<mat-card class="example-card" *ngFor="let r of results | searchFilter: filterText" style="margin-top: 10px;">
+<mat-card *ngFor="let r of results | searchFilter: filterText" style="margin-top: 10px;">
     <mat-card-header>
       <mat-card-title>{{r.name}}</mat-card-title>
         <mat-card-subtitle *ngIf="r.otherName && r.name != r.otherName">{{r.otherName}}</mat-card-subtitle>

frontends/dnet-is-application/src/app/dsm/dsm-search.component.html

@@ -1,7 +1,7 @@
 <h2>Datasource Manager: Search</h2>
 
 <form (ngSubmit)="search()">
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
         <mat-label>Search...</mat-label>
         <input matInput [(ngModel)]="searchText" name="searchText" autofocus />
     </mat-form-field>

frontends/dnet-is-application/src/app/info/info.component.html

@@ -1,6 +1,6 @@
 <h2>Container Info</h2>
 
-<mat-form-field style="width: 100%;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
 </mat-form-field>

frontends/dnet-is-application/src/app/resources/content-dialog.html

@@ -4,12 +4,12 @@
 
   <div mat-dialog-content>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>ID</mat-label>
       <input matInput readonly value="{{data.id}}"/>
     </mat-form-field>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Content ({{data.contentType}})</mat-label>
       <textarea matInput formControlName="content" required rows="16" style="font-size: 0.8em;"></textarea>
       <mat-error *ngIf="contentForm.get('content')?.invalid">This field is <strong>required</strong></mat-error>

frontends/dnet-is-application/src/app/resources/metadata-dialog.html

@@ -3,23 +3,23 @@
 
   <div mat-dialog-content>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>ID</mat-label>
       <input matInput readonly value="{{data.id}}"/>
     </mat-form-field>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Type</mat-label>
       <input matInput readonly value="{{data.type}}" />
     </mat-form-field>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Name</mat-label>
       <input matInput formControlName="name" required />
       <mat-error *ngIf="metadataForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
     </mat-form-field>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Description</mat-label>
       <textarea matInput formControlName="description" rows="8"></textarea>
     </mat-form-field>

frontends/dnet-is-application/src/app/resources/new-dialog.html

@@ -3,18 +3,18 @@
 
   <div mat-dialog-content>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Name</mat-label>
       <input matInput formControlName="name" required />
       <mat-error *ngIf="newResourceForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
     </mat-form-field>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Description</mat-label>
       <textarea matInput formControlName="description" rows="2"></textarea>
     </mat-form-field>
 
-    <mat-form-field appearance="fill" style="width: 100%;">
+    <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
       <mat-label>Content ({{data.contentType}})</mat-label>
       <textarea matInput formControlName="content" required rows="10" style="font-size: 0.8em;"></textarea>
       <mat-error *ngIf="newResourceForm.get('content')?.invalid">This field is <strong>required</strong></mat-error>

frontends/dnet-is-application/src/app/resources/resources.component.html

@@ -2,13 +2,12 @@
 
 <button mat-stroked-button color="primary" (click)="openNewDialog()">create a new resource</button>
 
-<mat-form-field style="width: 100%; margin-top: 10px;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
     <mat-label><b>Filter</b> (Total: {{(resources | searchFilter: searchText).length}})</mat-label>
     <input matInput [(ngModel)]="searchText"  placeholder="Filter..."  autofocus />
 </mat-form-field>
 
-
-<mat-card class="example-card" *ngFor="let r of resources | searchFilter: searchText" style="margin-top: 10px;">
+<mat-card *ngFor="let r of resources | searchFilter: searchText" style="margin-top: 10px;">
     <mat-card-header>
       <mat-card-title title="{{r.id}}">{{r.name}} <span class="badge-label badge-info" style="font-size: 0.7em;">{{type.contentType}}</span></mat-card-title>
     </mat-card-header>

frontends/dnet-is-application/src/app/vocabularies/voc-dialog.html

@@ -3,19 +3,19 @@
     <h1 mat-dialog-title *ngIf="!data.id">New vocabulary</h1>
 
     <div mat-dialog-content>
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>ID</mat-label>
             <input matInput required formControlName="id" [readonly]="data.id.length > 0" />
             <mat-error *ngIf="vocForm.get('id')?.invalid">This field is <strong>required</strong></mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>Name</mat-label>
             <input matInput formControlName="name" required />
             <mat-error *ngIf="vocForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>Description</mat-label>
             <textarea matInput formControlName="description" rows="4"></textarea>
         </mat-form-field>

frontends/dnet-is-application/src/app/vocabularies/voc-term-dialog.html

@@ -3,19 +3,19 @@
     <h1 mat-dialog-title *ngIf="!data.code">New term</h1>
 
     <div mat-dialog-content>
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>Code</mat-label>
             <input matInput formControlName="code" required />
             <mat-error *ngIf="termForm.get('id')?.invalid">This field is <strong>required</strong></mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>Name</mat-label>
             <input matInput formControlName="name" required />
             <mat-error *ngIf="termForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill" style="width: 100%;">
+        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
             <mat-label>Encoding</mat-label>
             <input matInput formControlName="encoding" />
         </mat-form-field>
@@ -26,7 +26,7 @@
               <th mat-header-cell *matHeaderCellDef>Term</th>
               <td mat-cell *matCellDef="let element">{{element.term}}</td>
               <td mat-footer-cell *matFooterCellDef>
-                <mat-form-field appearance="fill" style="width: 100%;">
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
                     <mat-label>New term</mat-label>
                     <input matInput formControlName="tmpSynonymTerm" />
                 </mat-form-field>
@@ -37,7 +37,7 @@
               <th mat-header-cell *matHeaderCellDef style="width: 20%;">Encoding</th>
               <td mat-cell *matCellDef="let element">{{element.encoding}}</td>
               <td mat-footer-cell *matFooterCellDef>
-                <mat-form-field appearance="fill" style="width: 100%;">
+                <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
                     <mat-label>New encoding</mat-label>
                     <input matInput formControlName="tmpSynonymEncoding" />
                 </mat-form-field>
@@ -100,13 +100,13 @@
             <tfoot>
                 <tr>
                     <td>
-                        <mat-form-field appearance="fill" style="width: 100%;">
+                        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
                             <mat-label>New term</mat-label>
                             <input matInput formControlName="tmpSynonymTerm" />
                         </mat-form-field>
                     </td>
                     <td>
-                        <mat-form-field appearance="fill" style="width: 100%;">
+                        <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
                             <mat-label>New encoding</mat-label>
                             <input matInput formControlName="tmpSynonymEncoding" />
                         </mat-form-field>

frontends/dnet-is-application/src/app/vocabularies/vocabularies.component.html

@@ -2,7 +2,7 @@
 
 <button mat-stroked-button color="primary" (click)="newVocabularyDialog()">create a new vocabulary</button>
 
-<mat-form-field style="width: 100%; margin-top: 10px;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
 </mat-form-field>

frontends/dnet-is-application/src/app/vocabularies/vocabulary-editor.component.html

@@ -12,7 +12,7 @@
   <a mat-stroked-button color="primary" href="/api/vocs/{{voc?.id}}/terms" target="_blank">Download</a>
 </p>
 
-<mat-form-field style="width: 100%; margin-top: 10px;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%; margin-top: 10px;">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
 </mat-form-field>

frontends/dnet-is-application/src/app/wf-history/wf-dialog.html

@@ -7,7 +7,7 @@
     <b>Duration: </b>{{duration}}<br />
   </p>
 
-  <mat-form-field style="width: 100%;">
+  <mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
     <mat-label>Filter</mat-label>
     <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #filterParams />
   </mat-form-field>

frontends/dnet-is-application/src/app/wf-history/wf-history.component.html

@@ -1,6 +1,6 @@
 <h2>Workflow History</h2>
 
-<mat-form-field style="width: 100%;">
+<mat-form-field appearance="fill" floatLabel="always" style="width: 100%;">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
 </mat-form-field>