From 61e9ec19be029d32705e8fb38531afa44bdb94a9 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Tue, 1 Dec 2020 16:02:50 +0000
Subject: [PATCH] [Monitor Dashboard | Trunk]: Add placeholders on indicators
 form

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@60006 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/topic/indicators.component.html | 36 +++++++++++++++++--------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 76cf167..127ba08 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -225,23 +225,25 @@
              [okDisabled]="numberIndicatorFb && (numberIndicatorFb.invalid || numberIndicatorFb.pristine)">
   <div *ngIf="numberIndicatorFb" class="uk-padding-small" [formGroup]="numberIndicatorFb">
     <div class="uk-grid" uk-grid>
-      <div dashboard-input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" label="Title"></div>
+      <div dashboard-input class="uk-width-1-1" [formInput]="numberIndicatorFb.get('name')" placeholder="Write a title" label="Title"></div>
       <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description &&
       indicator.description.length > 0) || !stakeholder.defaultId)"
            [formInput]="numberIndicatorFb.get('description')"
+           placeholder="Write a description"
            label="Profile description" type="textarea">
       </div>
       <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId"
            [formInput]="numberIndicatorFb.get('additionalDescription')"
+           placeholder="Write a description"
            label="Description" type="textarea">
       </div>
-
       <div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('visibility')"
+           placeholder="Select a status"
            label="Visibility" [options]="stakeholderUtils.visibility" type="select">
       </div>
       <div dashboard-input class="uk-width-1-2@m" [formInput]="numberIndicatorFb.get('width')"
            type="select" [options]="indicatorUtils.indicatorSizes"
-           label="Number Size">
+           placeholder="Select a size" label="Number Size">
       </div>
       <div *ngIf="numberIndicatorPaths" formArrayName="indicatorPaths">
         <div *ngFor="let indicatorPath of numberIndicatorPaths.controls; let i=index"
@@ -251,11 +253,12 @@
               <div class="uk-grid" uk-grid>
                 <div class="uk-width-1-1">
                   <div dashboard-input [formInput]="indicatorPath.get('url')" label="Number URL"
+                       placeholder="Write a URL"
                        [warning]="urlParameterizedMessage"></div>
                 </div>
                 <div class="uk-width-1-1">
                   <div dashboard-input [formInput]="indicatorPath.get('source')" label="Source"
-                       type="select"
+                       type="select" placeholder="Select a source"
                        [options]="isAdministrator?indicatorUtils.allSourceTypes:indicatorUtils.sourceTypes">
                   </div>
                 </div>
@@ -278,6 +281,7 @@
                   <div dashboard-input class="uk-width-1-1"
                        [extraLeft]="false"
                        [formInput]="jsonPath"
+                       placeholder="Write a field name"
                        [label]="'Level ' + +(j + 1)">
                     <div class="uk-flex uk-flex-middle">
                     <span *ngIf="getJsonPath(i).length !== 1"
@@ -332,25 +336,26 @@
              [okDisabled]="chartIndicatorFb && (chartIndicatorFb.invalid || chartIndicatorFb.pristine)">
   <div *ngIf="chartIndicatorFb" class="uk-padding-small" [formGroup]="chartIndicatorFb">
     <div class="uk-grid" uk-grid>
-      <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" label="Title"></div>
+      <div dashboard-input class="uk-width-1-1" [formInput]="chartIndicatorFb.get('name')" placeholder="Write a title" label="Title"></div>
       <div dashboard-input class="uk-width-1-1" *ngIf="stakeholder.defaultId !=-1 && (  (indicator.description &&
       indicator.description.length > 0) || !stakeholder.defaultId)"
-           [formInput]="chartIndicatorFb.get('description')"
+           [formInput]="chartIndicatorFb.get('description')" placeholder="Write a description"
            label="Default Description" type="textarea">
       </div>
       <div dashboard-input *ngIf="stakeholder.defaultId" class="uk-width-1-1"
-           [formInput]="chartIndicatorFb.get('additionalDescription')"
+           [formInput]="chartIndicatorFb.get('additionalDescription')" placeholder="Write a default description"
            label="Description" type="textarea">
       </div>
       <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('visibility')"
+           placeholder="Select a status"
            label="Status" [options]="stakeholderUtils.visibility" type="select">
       </div>
       <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('width')"
-           type="select" [options]="indicatorUtils.indicatorSizes"
+           type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size"
            label="Chart width">
       </div>
       <div dashboard-input class="uk-width-1-2@m" [formInput]="chartIndicatorFb.get('height')"
-           type="select" [options]="indicatorUtils.indicatorSizes"
+           type="select" [options]="indicatorUtils.indicatorSizes" placeholder="Select a size"
            label="Chart height">
       </div>
       <div *ngIf="chartIndicatorPaths" formArrayName="indicatorPaths" class="uk-width-1-1">
@@ -359,52 +364,61 @@
           <div dashboard-input class="uk-width-1-1"
                [title]="indicatorPath.get('url').disabled?'Default chart URLs cannot change':''"
                [formInput]="indicatorPath.get('url')" [warning]="urlParameterizedMessage"
+               placeholder="Write a URL"
                label="Chart URL"></div>
           <div class="uk-width-1-1" formArrayName="parameters">
             <div class="uk-grid" uk-grid>
               <div *ngIf="getParameter(i, 'title')" class="uk-width-1-1">
                 <div dashboard-input
                      [formInput]="getParameter(i, 'title').get('value')"
+                     placeholder="Write a title"
                      label="Chart Title"></div>
               </div>
               <div *ngIf="getParameter(i, 'subtitle')" class="uk-width-1-1">
-                <div dashboard-input
+                <div dashboard-input placeholder="Write a subtitle"
                      [formInput]="getParameter(i, 'subtitle').get('value')"
                      label="Chart Subtitle"></div>
               </div>
               <div *ngIf="!getParameter(i, 'type')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="indicatorPath.get('type')"
-                     type="select"
+                     type="select" placeholder="Select a type"
                      [options]="(indicatorPath.get('type').value == 'table' && getParameter(i, 'data_title_0'))?indicatorUtils.getChartTypes(indicatorPath.get('type').value):indicatorUtils.allChartTypes"
                      label="Chart Type"></div>
               </div>
               <div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
+                     placeholder="Select a type"
                      type="select" [options]="indicatorUtils.getChartTypes(getParameter(i, 'type').get('value').value)"
                      label="Chart Type"></div>
               </div>
               <div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'xAxisTitle').get('value')"
+                     placeholder="Write a title for X-Axis"
                      label="X-Axis Title"></div>
               </div>
               <div *ngIf="getParameter(i, 'yAxisTitle')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'yAxisTitle').get('value')"
+                     placeholder="Write a title"
                      label="Y-Axis Title"></div>
               </div>
               <div *ngIf="getParameter(i, 'data_title_0')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'data_title_0').get('value')"
+                     placeholder="Write a title"
                      label="Data title"></div>
               </div>
               <div *ngIf="getParameter(i, 'data_title_1')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'data_title_1').get('value')"
+                     placeholder="Write a title"
                      label="Data title"></div>
               </div>
               <div *ngIf="getParameter(i, 'start_year')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'start_year').get('value')"
+                     placeholder="Write a year"
                      label="Year (From)"></div>
               </div>
               <div *ngIf="getParameter(i, 'end_year')" class="uk-width-1-3@s">
                 <div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
+                     placeholder="Write a year"
                      label="Year (To)"></div>
               </div>
             </div>