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

   1 <span *ngIf="showSpinner" class="ecomp-spinner"></span>
   2
   3 <div *ngIf="!showSpinner" class="stdForm">
   4
   5     <div class="tab-content">
   6         <table>
   7             <tr>
   8                 <td>
   9                     <h6 class="reportTitle">{{reportName}}</h6>
  10                     <h6 class="subtitle">{{reportSubTitle}}</h6>
  11                 </td>
  12                 <td>
  13                     <mat-icon (click)="editReport(reportId)" *ngIf="allowEdit"
  14                               aria-hidden="false" aria-label="edit">edit
  15                     </mat-icon>
  16                 </td>
  17             </tr>
  18         </table>
  19         <span *ngIf="showformFiledSpinner" class="ecomp-spinner"></span>
  20         <br>
  21         <div *ngIf="!showformFiledSpinner" class="stdForm">
  22             <div *ngIf="formFieldList" class="wrapper">
  23                 <div *ngFor="let item of formFieldList; let i = index;">
  24                     <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'"
  25                          class="fieldWidth">
  26                         <label class="labelWidth">{{item.fieldDisplayName}} :</label> <textarea matInput placement="right" ngbTooltip="comma seperated"
  27                                                                                                 [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event.toString().trim())"  class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
  28                     </div>
  29                     <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
  30                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
  31                         <select  [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
  32                                  class="browser-default custom-select defaultFontSize" required="required"
  33                         >
  34                             <option *ngFor="let listItem of item.formFieldValues"
  35                                     class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option>
  36                         </select>
  37                     </div>
  38                     <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
  39                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
  40                         <mat-form-field>
  41                             <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" multiple>
  42                                 <mat-option *ngFor="let listItem of item.formFieldValues"
  43                                             value="{{listItem.id}}">{{listItem.name}}</mat-option>
  44                             </mat-select>
  45                         </mat-form-field>
  46                     </div>
  47                     <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
  48                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
  49                         <mat-form-field><input  [ngModel]="formFieldListValueMap.get(item.fieldId)" [min]="formFieldListValueMap.get(item.fieldId+'_minDate')" [max]="formFieldListValueMap.get(item.fieldId+'_maxDate')" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
  50                                                 [matDatepicker]="picker"
  51                                                 class="defaultFontSize" matInput>
  52                             <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
  53                             <mat-datepicker #picker></mat-datepicker>
  54                         </mat-form-field>
  55                     </div>
  56
  57                     <div *ngIf="item.validationType == 'TIMESTAMP_SEC'" class="finalWidth">
  58                         <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
  59                         <div class="finalWidth">
  60                             <mat-form-field class="timeStamp-HMS-matFormField"><input class="timeStamp-HMS-input"
  61                                                                        [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
  62                                 <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
  63                                 <mat-datepicker #picker></mat-datepicker>
  64                             </mat-form-field>
  65                             <div class="timeStamp-HMS-inner-div">
  66                                 <span class="timeStamp-HMS-sec-span">Sec:</span>
  67                                 <div class="timeStamp-HMS-sec-div">
  68                                     <select name="Seconds" id="Seconds" class="browser-default custom-select timeStamp-sec-select "
  69                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[3]">
  70                                         <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
  71                                             {{listItem}}</option>
  72                                     </select>
  73                                 </div>
  74                             </div>
  75                             <div class="timeStamp-HMS-inner-div">
  76                                 <span class="timeStamp-HMS-Min-span">Min:</span>
  77                                 <div class="timeStamp-HMS-Min-div">
  78                                     <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-sec-select"
  79                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
  80                                         <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
  81                                             {{listItem}}</option>
  82                                     </select>
  83                                 </div>
  84                             </div>
  85                             <div class="timeStamp-HMS-inner-div">
  86                                 <span class="timeStamp-HMS-Hrs-span">Hrs:</span>
  87                                 <div class="timeStamp-HMS-Hrs-div">
  88                                     <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-sec-select"
  89                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
  90                                         <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
  91                                         </option>
  92
  93                                     </select>
  94                                 </div>
  95                             </div>
  96                         </div>
  97                     </div>
  98
  99                     <div *ngIf="item.validationType == 'TIMESTAMP_MIN'" class="finalWidth">
 100                         <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
 101                         <div class="finalTimeDivWidth">
 102                             <mat-form-field class="timeStamp-HM-matFormField"><input class="timeStamp-HMS-input"
 103                                                                        [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
 104                                 <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 105                                 <mat-datepicker #picker></mat-datepicker>
 106                             </mat-form-field>
 107
 108                             <div class="timeStamp-HM-Min-div">
 109                                 <span class="timeStamp-HM-Min-span">Min:</span>
 110                                 <div class="timeStamp-HM-Min-inner-div">
 111                                     <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-min-select "
 112                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
 113                                         <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
 114                                             {{listItem}}</option>
 115                                     </select>
 116                                 </div>
 117                             </div>
 118                             <div class="timeStamp-HM-Hrs-div">
 119                                 <span class="timeStamp-HM-Hrs-inner-span">Hrs:</span>
 120                                 <div class="timeStamp-HM-Hrs-inner-div">
 121                                     <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-min-select "
 122                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
 123                                         <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
 124                                         </option>
 125
 126                                     </select>
 127                                 </div>
 128                             </div>
 129                         </div>
 130                     </div>
 131
 132                     <div *ngIf="item.validationType == 'TIMESTAMP_HOUR'" class="finalWidth">
 133                         <label class="labelWidth defaultFontSize"  for="reportType">{{item.fieldDisplayName}} :</label>
 134                         <div class="finalTimeDivWidth">
 135                             <mat-form-field class="finalTimeDivWidth"><input class="timeStamp-HMS-input"
 136                                                                        [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
 137                                 <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 138                                 <mat-datepicker #picker></mat-datepicker>
 139                             </mat-form-field>
 140
 141                             <div class="timeStamp-H-Hrs-div">
 142                                 <span class="timeStamp-H-Hrs-inner-span">Hrs:</span>
 143                                 <div class="timeStamp-H-Hrs-inner-div">
 144                                     <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-H-Hrs-inner-div-select"
 145                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
 146                                         <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
 147                                         </option>
 148                                     </select>
 149                                 </div>
 150                             </div>
 151                         </div>
 152                     </div>
 153
 154
 155
 156                 </div>
 157             </div>
 158             <div *ngIf="formFieldList" style="padding: 0.3em" >
 159                 <div *ngIf="unCommonGropusList.length > 0">
 160                     <label style="padding-top: 3px;">Select :</label><br/>
 161                     <br/>
 162                     <mat-radio-group ngmodel [(ngModel)]="groupSelectValue"
 163                                      aria-label="Select an option" (ngModelChange) ="toggleChangeWhenCalledWithFromFields()">
 164                         <div *ngFor="let group of formFieldGroupObjList; let i=index;" style="display: table-cell">
 165                             <mat-radio-button value="{{group.name}}">{{group.name}}</mat-radio-button>&nbsp;&nbsp;&nbsp;
 166                         </div>
 167                     </mat-radio-group>
 168
 169                 </div>
 170             </div>
 171
 172             <div *ngIf="formFieldList" class="wrapper">
 173                 <div *ngFor="let item of toggleFormFieldRenderArr; let i = index;">
 174                     <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'" class="fieldWidth">
 175                         <label class="labelWidth">{{item.fieldDisplayName}} :</label><textarea matInput placement="right" ngbTooltip="comma seperated" appRemoveSpace
 176                                                                                                [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event.toString().trim())" class="defaultFontSizeTextArea" id="item.fieldId"></textarea>
 177                     </div>
 178                     <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth">
 179                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
 180                         <select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
 181                                 class="browser-default custom-select defaultFontSize" required="required"
 182                         >
 183                             <option *ngFor="let listItem of item.formFieldValues"
 184                                     class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option>
 185                         </select>
 186
 187                     </div>
 188                     <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth">
 189                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
 190                         <mat-form-field>
 191                             <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)"
 192                                         multiple>
 193                                 <mat-option *ngFor="let listItem of item.formFieldValues"
 194                                             value="{{listItem.id}}">{{listItem.name}}</mat-option>
 195                             </mat-select>
 196                         </mat-form-field>
 197
 198                         <br/>
 199                     </div>
 200                     <div *ngIf="item.validationType == 'DATE'" class="fieldWidth">
 201                         <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label>
 202                         <mat-form-field><input [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" [matDatepicker]="picker"
 203                                                class="defaultFontSize"
 204                                                matInput
 205                                                value="{{item.formFieldValues[0][name]}}">
 206                             <mat-datepicker-toggle
 207                                 [for]="picker" matSuffix></mat-datepicker-toggle>
 208                             <mat-datepicker
 209                                 #picker></mat-datepicker>
 210                         </mat-form-field>
 211                     </div>
 212
 213                     <div *ngIf="item.validationType == 'TIMESTAMP_SEC'" class="finalWidth">
 214                         <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
 215                         <div class="finalWidth">
 216                             <mat-form-field class="timeStamp-HMS-matFormField"><input class="timeStamp-HMS-input"
 217                                                                        [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
 218                                 <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 219                                 <mat-datepicker #picker></mat-datepicker>
 220                             </mat-form-field>
 221                             <div class="timeStamp-HMS-inner-div">
 222                                 <span class="timeStamp-HMS-sec-span">Sec:</span>
 223                                 <div class="timeStamp-HMS-sec-div">
 224                                     <select name="Seconds" id="Seconds" class="browser-default custom-select timeStamp-sec-select "
 225                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[3]">
 226                                         <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
 227                                             {{listItem}}</option>
 228                                     </select>
 229                                 </div>
 230                             </div>
 231                             <div class="timeStamp-HMS-inner-div">
 232                                 <span class="timeStamp-HMS-Min-span">Min:</span>
 233                                 <div class="timeStamp-HMS-Min-div">
 234                                     <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-sec-select"
 235                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
 236                                         <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
 237                                             {{listItem}}</option>
 238                                     </select>
 239                                 </div>
 240                             </div>
 241                             <div class="timeStamp-HMS-inner-div">
 242                                 <span class="timeStamp-HMS-Hrs-span">Hrs:</span>
 243                                 <div class="timeStamp-HMS-Hrs-div">
 244                                     <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-sec-select"
 245                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
 246                                         <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
 247                                         </option>
 248
 249                                     </select>
 250                                 </div>
 251                             </div>
 252                         </div>
 253                     </div>
 254
 255                     <div *ngIf="item.validationType == 'TIMESTAMP_MIN'" class="finalWidth">
 256                         <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label>
 257                         <div class="finalTimeDivWidth">
 258                             <mat-form-field class="timeStamp-HM-matFormField"><input class="timeStamp-HMS-input"
 259                                                                        [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
 260                                 <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 261                                 <mat-datepicker #picker></mat-datepicker>
 262                             </mat-form-field>
 263
 264                             <div class="timeStamp-HM-Min-div">
 265                                 <span class="timeStamp-HM-Min-span">Min:</span>
 266                                 <div class="timeStamp-HM-Min-inner-div">
 267                                     <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-min-select "
 268                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]">
 269                                         <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}">
 270                                             {{listItem}}</option>
 271                                     </select>
 272                                 </div>
 273                             </div>
 274                             <div class="timeStamp-HM-Hrs-div">
 275                                 <span class="timeStamp-HM-Hrs-inner-span">Hrs:</span>
 276                                 <div class="timeStamp-HM-Hrs-inner-div">
 277                                     <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-min-select "
 278                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
 279                                         <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
 280                                         </option>
 281
 282                                     </select>
 283                                 </div>
 284                             </div>
 285                         </div>
 286                     </div>
 287
 288                     <div *ngIf="item.validationType == 'TIMESTAMP_HOUR'" class="finalWidth">
 289                         <label class="labelWidth defaultFontSize"  for="reportType">{{item.fieldDisplayName}} :</label>
 290                         <div class="finalTimeDivWidth">
 291                             <mat-form-field class="finalTimeDivWidth"><input class="timeStamp-HMS-input"
 292                                                                        [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput>
 293                                 <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
 294                                 <mat-datepicker #picker></mat-datepicker>
 295                             </mat-form-field>
 296
 297                             <div class="timeStamp-H-Hrs-div">
 298                                 <span class="timeStamp-H-Hrs-inner-span">Hrs:</span>
 299                                 <div class="timeStamp-H-Hrs-inner-div">
 300                                     <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-H-Hrs-inner-div-select"
 301                                             [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]">
 302                                         <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}}
 303                                         </option>
 304                                     </select>
 305                                 </div>
 306                             </div>
 307                         </div>
 308                     </div>
 309
 310                     <br/>
 311                 </div>
 312             </div>
 313             <div *ngIf="showRunButton" style="float: left;">
 314                 <button (click)="runReport()" class="btn btn-alt btn-run" >Run Report</button>
 315                 <button (click)="resetFormFieldValues()" class="btn btn-alt btn-run" >Reset</button>
 316             </div>&nbsp;
 317             <button *ngIf="showBackButton" (click)="goBack()" class="btn btn-alt btn-run" >Back</button>
 318         </div>
 319     </div>
 320 </div>
 321 <div></div>
 322
 323 <br><br><br>
 324
 325 <div *ngIf="navigateToRun">
 326     <!-- <app-run-dashboard-report [reportId]="reportId" [reportMode]="reportMode" [queryString]="getQueryString()" [DashboardReportObj]="DashboardReportObj"></app-run-dashboard-report> -->
 327     <div *ngIf="reportType !== 'Cross-Tab'">
 328         <div *ngIf="reportHeader !== ''">
 329             <div [innerHtml]="reportHeader" style="width: 60%; padding-left: 20%;">
 330             </div>
 331             <br/>
 332             <br/>
 333         </div>
 334     <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr"
 335                         [chartType]="chartType"
 336                         [groupSelectValue]="groupSelectValue"
 337                         [hitCnt]="hitCnt" [isGoBack]="downloadPrevReport" [queryString]="getQueryString()"
 338                         [reportId]="reportId" [reportMode]="reportMode" [reportType]="reportType"
 339                         [runAgain]="runReportAgain"></app-run-report>
 340             <div [innerHtml]="reportFooter" style="width: 60%; padding-left: 20%;"></div>
 341
 342     </div>
 343     <div *ngIf="reportType === 'Cross-Tab'">
 344         <div *ngIf="reportHeader !== ''">
 345             <div [innerHtml]="reportHeader" style="width: 60%; padding-left: 20%;">
 346             </div>
 347             <br/>
 348             <br/>
 349         </div>
 350         <app-run-cross-tab-report [groupSelectValue]="groupSelectValue" [hitCnt]="hitCnt"
 351                                   [parentId]="reportId"
 352                                   [queryString]="queryString"
 353                                   [reportId]="reportId"
 354                                   [reportMode]="reportMode"
 355                                   [reportType]="reportType"
 356                                   [isGoBack]="downloadPrevReport"></app-run-cross-tab-report>
 357         <div [innerHtml]="reportFooter" style="width: 60%; padding-left: 20%;">
 358         </div>
 359     </div>
 360 </div>
 361
 362 <div *ngIf="error == true">
 363     <h1>Error Message:</h1>
 364     <p>{{errorMessage}}</p>
 365     <br/>
 366     <h1>Stack Trace:</h1>
 367     <p>{{stackTrace}}</p>
 368
 369 </div>