gerrit.onap Code Review - portal/sdk.git/blob

   1 <app-sql-validate-changes-dialog-component [(visible)]="showDialog1">
   2     <span *ngIf="showVerifySpinner" class="ecomp-spinner"></span>
   3     <div *ngIf="!showVerifySpinner">
   4         <div class="card">
   5             <div class="card-body" style="width: 800px; height: 615px; ">
   6                 <div style="height:600px; overflow: scroll;">
   7                     <div class="modalTitle">{{Validatestatus}}</div>
   8                     <button (click)="closeValidateModal()" *ngIf="Validateclosable" aria-label="Close"
   9                             class="dialog__close-btn">X
  10                     </button>
  11                     <br/>
  12                     <app-sql-validate-success-dialog-component
  13                         [tableObj]="validateResponseString"></app-sql-validate-success-dialog-component>
  14                     <!-- <app-sql-validate-error-dialog-component *ngIf="!ValidatePostResponse.query" [tableObj] = "GetValidateResponseString()"></app-sql-validate-error-dialog-component> -->
  15                 </div>
  16             </div>
  17             <div class="card-footer" style="width: 800px;">
  18                 <button (click)="closeValidateModal()" class="btn btn-alt btn-small" style="font-size: 17px;">Close
  19                 </button>
  20             </div>
  21         </div>
  22     </div>
  23 </app-sql-validate-changes-dialog-component>
  24
  25 <app-form-fields-add-edit [(visible)]="showDialog">
  26     <div class="card">
  27         <div class="card-header">
  28             <div class="modalTitle">Report Form Field - Edit</div>
  29             <button (click)="close()" *ngIf="closable" aria-label="Close" class="dialog__close-btn">X</button>
  30             <br/>
  31         </div>
  32
  33
  34         <div class="card-body" style="width: 100px; height: 760px; ">
  35             <div style="height:737px; overflow: scroll; overflow-x: hidden;">
  36                 <br/>
  37                 <br/>
  38
  39
  40                 <label class="defaultLabelFontSize">Field Name:</label><label><input [(ngModel)]="fieldName"
  41                                                                                      class="defaultFontSize"
  42                                                                                      id="fieldName"
  43                                                                                      type="text"
  44                                                                                      value="{{fieldName}}"/></label>
  45
  46
  47                 <br/>
  48                 <br/>
  49                 <br/>
  50                 <div class="field-group">
  51                     <label>Field Type:</label>
  52                     <select [(ngModel)]="fieldType" class="browser-default custom-select defaultFontSize" id="fieldType"
  53                             required="required" value="{{fieldType}}">
  54                         <option class="defaultFontSize" selected>Select Field Type</option>
  55                         <option class="defaultFontSize" value="TEXT">Text Box</option>
  56                         <option class="defaultFontSize" value="TEXTAREA">TEXTAREA</option>
  57                         <option class="defaultFontSize" value="LIST_BOX">List Box</option>
  58                         <option class="defaultFontSize" value="LIST_MULTI_SELECT">Multi-select List Box</option>
  59                         <option class="defaultFontSize" value="HIDDEN">Hidden</option>
  60                     </select>
  61                 </div>
  62                 <br/>
  63                 <br/>
  64
  65                 <div class="field-group">
  66                     <label>Visible:</label>
  67                     <select [(ngModel)]="visible" class="browser-default custom-select defaultFontSize" id="visible"
  68                             required="required" value="{{visible}}">
  69                         <option class="defaultFontSize" selected value="YES">YES</option>
  70                         <option class="defaultFontSize" value="NO">NO</option>
  71                     </select>
  72                 </div>
  73
  74                 <br/>
  75                 <br/>
  76                 <div>
  77                     <label class="defaultLabelFontSize">Is used in Group By Clause?:</label>
  78                     <label class="defaultLabelFontSize" class="checkbox" for="groupFormField">
  79                         <input [(ngModel)]="groupFormField" class="ng-valid ng-dirty ng-valid-parse ng-touched"
  80                                id="groupFormField"
  81                                type="checkbox" value="{{groupFormField}}"><i class="skin"></i><span></span>
  82                     </label>
  83                 </div>
  84
  85                 <br/>
  86                 <br/>
  87                 <div>
  88                     <label class="defaultLabelFontSize">SQL as Default Value:</label>
  89                     <label class="defaultLabelFontSize" class="checkbox" for="isDefaultSql">
  90                         <input [(ngModel)]="isDefaultSql" class="ng-valid ng-dirty ng-valid-parse ng-touched"
  91                                id="isDefaultSql"
  92                                type="checkbox" value="{{isDefaultSql}}"><i class="skin"></i><span></span>
  93                     </label>
  94                 </div>
  95
  96                 <div *ngIf="isDefaultSql">
  97                     <br/>
  98                     <br/>
  99                     <div class="field-group">
 100                         <label>Default SQL:</label>
 101                         <textarea [(ngModel)]="fieldDefaultSQL" class="defaultFontSize" id="fieldDefaultSQL"
 102                                   type="textarea" value="{{fieldDefaultSQL}}"></textarea>
 103                         <div class="center">
 104                             <button (click)="verify('Default')" class="btn btn-alt btn-small verify-button">
 105                                 Verify
 106                             </button>
 107                         </div>
 108                     </div>
 109                 </div>
 110                 <br/>
 111                 <div *ngIf="(fieldDefaultSQL == null || fieldDefaultSQL == '') && isDefaultSql == false">
 112                     <label class="defaultLabelFontSize">Default Value:</label>
 113                     <label><input [(ngModel)]="defaultValue" class="defaultFontSize" id="defaultValue" type="text"
 114                                   value="{{defaultValue}}"/></label>
 115
 116
 117                 </div>
 118                 <br/>
 119                 <br/>
 120                 <br/>
 121                 <div class="field-group">
 122                     <label>Verify Field Value As:</label>
 123                     <select [(ngModel)]="validationType" class="browser-default custom-select defaultFontSize"
 124                             id="validationType" required="required" value="{{validationType}}">
 125                         <option class="defaultFontSize" selected value="">Select Visibility</option>
 126                         <option class="defaultFontSize" value="">Do Not Perform Validation</option>
 127                         <option class="defaultFontSize" value="INTEGER">Integer</option>
 128                         <option class="defaultFontSize" value="POSITIVE_INTEGER">Positive Integer</option>
 129                         <option class="defaultFontSize" value="DATE">Date</option>
 130                         <option class="defaultFontSize" value="TIMESTAMP_SEC">Timestamp(Hour, Min, Sec)</option>
 131                         <option class="defaultFontSize" value="TIMESTAMP_MIN">Timestamp(Hour, Min)</option>
 132                         <option class="defaultFontSize" value="TIMESTAMP_HOUR">Timestamp(Hour)</option>
 133                         <option class="defaultFontSize" value="NON_NEGATIVE_INTEGER">Positive Integer Can not Be Zero
 134                         </option>
 135                         <option class="defaultFontSize" value="FLOAT">Any Number</option>
 136                         <option class="defaultFontSize" value="NON_NEGATIVE_FLOAT">Positive Number</option>
 137                         <option class="defaultFontSize" value="POSITIVE_FLOAT">Positive Number Can Not Be Zero</option>
 138                     </select>
 139                 </div>
 140                 <br/>
 141                 <br/>
 142                <div *ngIf='showDateRange || this.validationType === "DATE"'>
 143                 <div>
 144                     <label class="defaultLabelFontSize">SQL as Default Range Value:</label>
 145                     <label class="defaultLabelFontSize" class="checkbox" for="isDefaultSqlRange">
 146                         <input [(ngModel)]="isDefaultSqlRange" class="ng-valid ng-dirty ng-valid-parse ng-touched"
 147                                id="isDefaultSqlRange"
 148                                type="checkbox" value="{{isDefaultSqlRange}}"><i class="skin"></i><span></span>
 149                     </label>
 150                 </div>
 151
 152
 153                 <div *ngIf="!isDefaultSqlRange" class="field-group">
 154                     <label class="defaultLabelFontSize">rangeStartDate:</label>
 155
 156                     <mat-form-field style="float: left;"><input  [(ngModel)]="rangeStartDate"
 157                                             [matDatepicker]="picker"
 158                                             class="defaultFontSize" matInput>
 159                         <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 160                         <mat-datepicker #picker></mat-datepicker>
 161                     </mat-form-field>
 162
 163
 164                 </div>
 165                 <br />
 166                 <br />
 167
 168                 <div *ngIf="!isDefaultSqlRange" class="field-group">
 169                     <label class="defaultLabelFontSize">rangeEndDate:</label>
 170
 171                     <mat-form-field style="float: left;"><input [(ngModel)]="rangeEndDate"  [matDatepicker]="picker"
 172                         class="defaultFontSize" matInput>
 173                     <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 174                     <mat-datepicker #picker></mat-datepicker>
 175                 </mat-form-field>
 176                 </div>
 177                 <br />
 178                 <br />
 179
 180
 181
 182
 183                 <div class="field-group" *ngIf="isDefaultSqlRange">
 184                     <label>RangeStartDate Sql:</label>
 185                     <textarea [(ngModel)]="rangeStartDateSQL" class="defaultFontSize" id="rangeStartDateSQL" type="textarea"
 186                               value="{{rangeStartDateSQL}}"></textarea>
 187                     <div class="center">
 188                         <button (click)="verify('startDateRange')" class="btn btn-alt btn-small verify-button">Verify
 189                         </button>
 190                     </div>
 191                 </div>
 192                 <br/>
 193                 <br/>
 194
 195
 196                 <div class="field-group" *ngIf="isDefaultSqlRange">
 197                     <label>RangeEndDate Sql:</label>
 198                     <textarea [(ngModel)]="rangeEndDateSQL" class="defaultFontSize" id="rangeEndDateSQL" type="textarea"
 199                               value="{{rangeEndDateSQL}}"></textarea>
 200                     <div class="center">
 201                         <button (click)="verify('endDateRange')" class="btn btn-alt btn-small verify-button">Verify
 202                         </button>
 203                     </div>
 204                 </div>
 205                 <br/>
 206                 <br/>
 207             </div>
 208
 209                 <div class="field-group">
 210                     <label>SQL Generating Custom List of Values:</label>
 211                     <textarea [(ngModel)]="fieldSQL" class="defaultFontSize" id="fieldSQL" type="textarea"
 212                               value="{{fieldSQL}}"></textarea>
 213                     <div class="center">
 214                         <button (click)="verify('Regular')" class="btn btn-alt btn-small"
 215                                 style="font-size: 17px;">Verify
 216                         </button>
 217                     </div>
 218                 </div>
 219                 <br/>
 220                 <br/>
 221                 <div>
 222                     <label class="defaultLabelFontSize">Provide Predefined List of Values: Do not use Predefined list -
 223                         Generate list from database:</label><label><input [(ngModel)]="predefinedValue"
 224                                                                           class="defaultFontSize"
 225                                                                           id="predefinedValue" type="text"
 226                                                                           value="{{predefinedValue}}"/></label>
 227                     <button (click)="addToList(predefinedValue)" class="btn btn-alt btn-small" style="font-size: 17px;">
 228                         Add to List
 229                     </button>
 230                 </div>
 231                 <br/>
 232                 <br/>
 233
 234                 <div>
 235                     <div *ngFor="let value of predefinedValueList">
 236                         <div style="margin-left: 5px;">
 237                             <label>{{value.name}}</label>
 238                             <mat-icon (click)="deleteFromList(value.id)" aria-hidden="false" aria-label="delete">
 239                                 delete
 240                             </mat-icon>
 241                         </div>
 242                     </div>
 243                 </div>
 244             </div>
 245         </div>
 246
 247         <div class="card-footer" style="width: 1000px; padding-left: 770px;">
 248             <button (click)="save();" *ngIf="!showConfirmButton" class="btn btn-alt btn-small" style="font-size: 17px;">
 249                 Save
 250             </button>&nbsp;
 251             <button (click)="complete();" *ngIf="showConfirmButton" class="btn btn-alt btn-small"
 252                     style="font-size: 17px;">Confirm
 253             </button>&nbsp;&nbsp;
 254             <button (click)="close()" class="btn btn-alt btn-small" style="font-size: 17px;">Cancel</button>
 255         </div>
 256
 257
 258     </div>
 259 </app-form-fields-add-edit>
 260
 261
 262 <div class="stdForm">
 263     <br/>
 264     <div class="tab-content">
 265         <h3>Step 4 - Report Form Fields</h3>
 266
 267     </div>
 268     <span *ngIf="showSpinner" class="ecomp-spinner"></span>
 269     <br/>
 270     <br/>
 271
 272     <h4>Form Field Groups</h4>
 273     <br/>
 274     <div *ngFor="let group of Groups">
 275         <button class="formFieldGroupButton" mat-button>{{group.name}}</button>
 276         <mat-icon (click)="deleteGroup(group.name)" aria-hidden="false" aria-label="delete" style="margin-left: 21%;">
 277             delete
 278         </mat-icon>
 279         <mat-icon (click)="editGroup(group)" aria-hidden="false" aria-label="edit" class="edit-group">edit</mat-icon>
 280         <table class="app-data-table" style="margin-top: 10px;">
 281
 282             <th class="defaultFontSize">Order Number</th>
 283             <th class="defaultFontSize">Field Name</th>
 284             <th class="defaultFontSize">Delete From Group</th>
 285
 286             <tr *ngFor="let item of group.formFieldList; let i = index;">
 287                 <td>
 288                     {{item.orderSeq}}
 289                 </td>
 290                 <td>
 291                     {{item.name}}
 292                 </td>
 293                 <td>
 294                     <mat-icon (click)="deleteFromGroup(item.id)" aria-hidden="false" aria-label="delete">delete
 295                     </mat-icon>
 296                 </td>
 297             </tr>
 298
 299         </table>
 300         <br/>
 301     </div>
 302     <br/>
 303     <div class="field-group">
 304         <table style="width: auto; margin-left: 70%;">
 305             <tr>
 306                 <td>
 307                     <button (click)="createGroup()" class="btn btn-alt btn-small" style="font-size: 17px;">Create
 308                         Group
 309                     </button>
 310                 </td>
 311                 <td>
 312                     <button (click)="saveFormFieldGroups()" class="btn btn-alt btn-small" style="font-size: 17px;">Save
 313                         Group
 314                     </button>
 315                 </td>
 316             </tr>
 317         </table>
 318     </div>
 319     <br/>
 320     <br/>
 321     <h4>Form Field List</h4>
 322     <div *ngIf="!showSpinner">
 323
 324         <table class="app-data-table" style="margin-top: 10px;">
 325
 326             <th class="defaultFontSize">Order Number</th>
 327             <th class="defaultFontSize">Field Name</th>
 328             <th class="defaultFontSize">Edit</th>
 329             <th class="defaultFontSize">Order</th>
 330             <th class="defaultFontSize">Delete</th>
 331
 332             <tr *ngFor="let item of formFieldsListObj; let i = index;">
 333                 <td>
 334                     {{item.orderSeq}}
 335                 </td>
 336                 <td>
 337                     {{item.name}}
 338                 </td>
 339                 <td>
 340                     <mat-icon (click)="edit(item.id); setDisplayMode('Edit');" aria-hidden="false" aria-label="edit">
 341                         edit
 342                     </mat-icon>
 343                 </td>
 344                 <td>
 345                     <mat-icon (click)="moveUpward(i)" *ngIf="!isFirst(i)" aria-hidden="false" aria-label="expand_less">
 346                         expand_less
 347                     </mat-icon>
 348                     <mat-icon (click)="moveDownward(i)" *ngIf="!isLast(i)" aria-hidden="false" aria-label="expand_more">
 349                         expand_more
 350                     </mat-icon>
 351                 </td>
 352                 <td>
 353                     <mat-icon (click)="delete(item.id)" aria-hidden="false" aria-label="delete">delete</mat-icon>
 354                 </td>
 355             </tr>
 356
 357         </table>
 358         <br/>
 359         <table class="showbuttons">
 360             <tr>
 361                 <td>
 362                     <button (click)="add(); setDisplayMode('Add');" class="btn btn-alt btn-small add-reOrder-button">
 363                         Add
 364                     </button>
 365                 </td>
 366                 <td>
 367                     <button (click)="reOrder()" *ngIf="showReOrderButton"
 368                             class="btn btn-alt btn-small add-reOrder-button">ReOrder
 369                     </button>
 370                 </td>
 371             </tr>
 372         </table>
 373
 374         <br/>
 375     </div>
 376 </div>