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

   1
   2 <app-definition-save-dialog-component [(visible)]="showDialog">
   3
   4         <div class="card">
   5             <div class="card-body">
   6                 <div class="modalTitle">{{status}}</div>
   7                 <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
   8                 <br/>
   9                 <label>{{message}}</label>
  10             </div>
  11             <div class="card-footer">
  12                 <button style="font-size: 17px;" (click)="showDialog = !showDialog" class="btn btn-alt btn-small">Close</button>
  13             </div>
  14         </div>
  15         </app-definition-save-dialog-component>
  16
  17     <div class="stdForm">
  18             <br/>
  19     <div class="tab-content">
  20         <h1>Step 1 - Report Definition</h1>
  21     </div>
  22     <br/>
  23     <br/>
  24     <div *ngIf="showSpinner">
  25             <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  26     </div>
  27     <div *ngIf="!showSpinner">
  28     <div class="forms-group">
  29     <div class="tab-pane">
  30     <div class="field-group">
  31         <label>Report ID</label> <br/>
  32         <input class="defaultFontSize" id="textinputID-2a" type="text"  ng-disabled="true" disabled="disabled" [(ngModel)]="reportId" value="{{finalGetObj.reportId}}" />
  33     </div>
  34     <br/>
  35     <div class="field-group">
  36         <label>Report Name</label> <br/>
  37         <input  class="defaultFontSize" id="reportName" type="text"  [(ngModel)]="reportName" value="{{finalGetObj.reportName}}"/>
  38     </div>
  39     <br/>
  40     <div class="field-group">
  41         <label>Report Description</label> <br/>
  42         <textarea  class="defaultFontSize" id="reportDescription" type="textarea" [(ngModel)]="reportDescription"  value="{{finalGetObj.reportDescr}}"></textarea>
  43     </div>
  44     <br/>
  45     <div class="field-group">
  46         <label for="reportType">*Report Type</label> <br/>
  47                 <select class="browser-default custom-select defaultFontSize"  required="required" placeholder="Select Report Type" [(ngModel)]="reportType"  value="{{finalGetObj.reportType}}">
  48                     <option  class="defaultFontSize" selected>Select Report Type  </option>
  49                     <option  class="defaultFontSize" value="Linear" >Linear</option>
  50                     <option  class="defaultFontSize" value="Dashboard" >Dashboard</option>
  51                   </select>
  52
  53
  54     </div>
  55     <br/>
  56     <div *ngIf="reportType === 'Linear'">
  57     <div class="field-group">
  58         <label for="dataSrc">*Data Source</label> <br/>
  59         <select class="browser-default custom-select defaultFontSize" id="dataSrc" required="required" value="Select Report Type" [(ngModel)]="dataSrc" value="{{dataSrc}}" >
  60             <option  class="defaultFontSize" selected>Select Data Source  </option>
  61             <option  class="defaultFontSize" value="local">local</option>
  62             <option  class="defaultFontSize" value="e911_prod">e911_prod</option>
  63             <option  class="defaultFontSize" value="e911_dev">e911_dev</option>
  64           </select>
  65     </div>
  66     <br/>
  67     <div class="field-group">
  68         <label>Form Help Text</label> <br/>
  69         <textarea  class="defaultFontSize" id="helpText" type="textarea" [(ngModel)]="helpText" value="{{finalGetObj.formHelpText}}"></textarea>
  70     </div>
  71     <br/>
  72     <div class="field-group">
  73             <label>Report Definition</label> <br/>
  74             <input  class="defaultFontSize" id="reportDefinition" type="text" ng-disabled="true" disabled="disabled" value="SQL-Based" placeholder="SQL-Based" [(ngModel)]="reportDefinition" value="{{finalGetObj.repDefType}}"/>
  75     </div>
  76     <br/>
  77     <div class="field-group">
  78             <label>Page Size</label> <br/>
  79             <select  class="browser-default custom-select defaultFontSize" id="pageSize" required="required" value="Select Report Type" [(ngModel)]="pageSize" value="{{finalGetObj.pageSize}}">
  80                     <option  class="defaultFontSize" selected>Select Page Size  </option>
  81                     <option  class="defaultFontSize" value="100">100</option>
  82                     <option class="defaultFontSize"  value="200">200</option>
  83                     <option  class="defaultFontSize" value="300">300</option>
  84                     <option  class="defaultFontSize" value="400">400</option>
  85                     <option  class="defaultFontSize" value="500">500</option>
  86                   </select>
  87     </div>
  88     <br/>
  89     <div class="field-group">
  90             <label>Display Area </label>
  91     </div>
  92     <mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical [(ngModel)]="displayArea" value="{{finalGetObj.reportId}}">
  93             <mat-button-toggle class="defaultFontSize" value="HOME">HOME</mat-button-toggle>
  94             <mat-button-toggle class="defaultFontSize" value="CUSTOMER">CUSTOMER</mat-button-toggle>
  95             <mat-button-toggle class="defaultFontSize" value="REPORTS">REPORTS</mat-button-toggle>
  96     </mat-button-toggle-group>
  97     <br/>
  98     <br/>
  99     <div class="field-group">
 100             <label for="hideFormFields1" class="checkbox">
 101                     <input  id="hideFormFields1" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hideFormFields1">
 102                     <i class="skin"></i><span class="defaultFontSize">Hide Form fields after run?</span>
 103                 </label>
 104     </div>
 105     <br/>
 106     <div class="field-group">
 107             <label>Max Rows in Excel/CSV Download</label> <br/>
 108             <select class="browser-default custom-select defaultFontSize" id="maxRows" required="required" [(ngModel)]="maxRows">
 109                     <option  class="defaultFontSize" selected>Select Max Rows  </option>
 110                     <option  class="defaultFontSize" value="100">100</option>
 111                     <option  class="defaultFontSize" value="200">200</option>
 112                     <option  class="defaultFontSize" value="300">300</option>
 113                     <option  class="defaultFontSize" value="400">400</option>
 114                     <option  class="defaultFontSize" value="500">500</option>
 115                   </select>
 116     </div>
 117     <br/>
 118     <div class="field-group">
 119             <label>Columns to be Frozen</label> <br/>
 120             <select class="browser-default custom-select defaultFontSize" id="colsFrozen" required="required" [(ngModel)]="colsFrozen">
 121                     <option  class="defaultFontSize" selected>Select Columns To Be Frozen  </option>
 122                     <option  class="defaultFontSize" value="100">100</option>
 123                     <option  class="defaultFontSize" value="200">200</option>
 124                     <option  class="defaultFontSize" value="300">300</option>
 125                     <option  class="defaultFontSize" value="400">400</option>
 126                     <option  class="defaultFontSize" value="500">500</option>
 127                   </select>
 128     </div>
 129     <br/>
 130     <div class="field-group">
 131             <label>Data Grid Align</label> <br/>
 132             <select class="browser-default custom-select defaultFontSize" id="gridAlign" required="required" [(ngModel)]="gridAlign">
 133                     <option  class="defaultFontSize" selected>Select Grid Align  </option>
 134                     <option  class="defaultFontSize" value="100">100</option>
 135                     <option  class="defaultFontSize" value="200">200</option>
 136                     <option  class="defaultFontSize" value="300">300</option>
 137                     <option  class="defaultFontSize" value="400">400</option>
 138                     <option  class="defaultFontSize" value="500">500</option>
 139                   </select>
 140     </div>
 141     <br/>
 142     <div class="field-group">
 143             <label>Empty message</label> <br/>
 144             <input  class="defaultFontSize" id="emptyMessage" type="text" [(ngModel)]="emptyMessage"/>
 145     </div>
 146     <br/>
 147
 148     <div class="field-group">
 149             <label>Height of the Data Container(%)</label> <br/>
 150             <select class="browser-default custom-select defaultFontSize" id="heightContainer" required="required" [(ngModel)]="heightContainer">
 151                     <option  class="defaultFontSize" selected>Select height of Data Container(%)  </option>
 152                     <option  class="defaultFontSize" value="100">100</option>
 153                     <option  class="defaultFontSize" value="200">200</option>
 154                     <option  class="defaultFontSize" value="300">300</option>
 155                     <option  class="defaultFontSize" value="400">400</option>
 156                     <option  class="defaultFontSize" value="500">500</option>
 157                   </select>
 158     </div>
 159     <br/>
 160     <div class="field-group">
 161             <label>Width of the Data Container(%)</label> <br/>
 162             <select class="browser-default custom-select defaultFontSize" id="widthContainer" required="required" [(ngModel)]="widthContainer">
 163                     <option  selected>Select Width of the Data Container(%)  </option>
 164                     <option  class="defaultFontSize" value="100">100</option>
 165                     <option  class="defaultFontSize" value="200">200</option>
 166                     <option  class="defaultFontSize" value="300">300</option>
 167                     <option  class="defaultFontSize" value="400">400</option>
 168                     <option  class="defaultFontSize" value="500">500</option>
 169                   </select>
 170     </div>
 171     <br/>
 172     <div class="field-group">
 173             <label for="allowScheduler" class="checkbox">
 174                     <input   id="allowScheduler" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="allowScheduler">
 175                     <i class="skin"></i><span>Allow Scheduler</span>
 176                 </label>
 177     </div>
 178     <br/>
 179     <div class="field-group">
 180             <label for="sizedByContent" class="checkbox">
 181                     <input   id="sizedByContent" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="sizedByContent">
 182                     <i class="skin"></i><span>Sized By Content</span>
 183                 </label>
 184     </div>
 185     <br/>
 186     <div class="field-group">
 187      <label>Options:</label>
 188     </div>
 189
 190     <div class="field-group">
 191             <label for="hideFormFields" class="checkbox">
 192                     <input   id="hideFormFields" type="checkbox" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hideFormFields">
 193                     <i class="skin"></i><span>Hide Form Fields</span>
 194                 </label>
 195     </div>
 196     <br/>
 197     <div class="field-group">
 198             <label for="hideChart" class="checkbox">
 199                     <input   id="hideChart" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hideChart">
 200                     <i class="skin"></i><span>Hide Chart</span>
 201                 </label>
 202     </div>
 203     <br/>
 204     <div class="field-group">
 205             <label for="hideReportData" class="checkbox">
 206                     <input   id="hideReportData" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hideReportData" value="{{hideReportData}}">
 207                     <i class="skin"></i><span>Hide Report Data</span>
 208                 </label>
 209     </div>
 210     <br/>
 211     <div class="field-group">
 212             <label for="hideExcel" class="checkbox">
 213                     <input  id="hideExcel" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hideExcel" value="{{hideExcel}}">
 214                     <i class="skin"></i><span>Hide Excel</span>
 215                 </label>
 216     </div>
 217     <br/>
 218     <div class="field-group">
 219             <label for="hidePDF" class="checkbox">
 220                     <input   id="hidePDF" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="hidePDF" value="{{hidePDF}}">
 221                     <i class="skin"></i><span>Hide PDF</span>
 222                 </label>
 223     </div>
 224     <br/>
 225     <div class="field-group">
 226             <label for="disableColumnSort" class="checkbox">
 227                     <input    id="disableColumnSort" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="disableColumnSort" value="{{finalGetObj.runtimeColSortDisabled}}">
 228                     <i class="skin"></i><span>Disable column sort at runtime?</span>
 229                 </label>
 230     </div>
 231     <br/>
 232     <div class="field-group">
 233             <label>Run-time Form Number Columns</label> <br/>
 234             <select class="browser-default custom-select defaultFontSize" id="runTimeFormNum" required="required" [(ngModel)]="runTimeFormNum" value="{{runTimeFormNum}}">
 235                     <option  class="defaultFontSize" selected>Select Run-time Form Number Columns  </option>
 236                     <option class="defaultFontSize" value="100">100</option>
 237                     <option class="defaultFontSize" value="200">200</option>
 238                     <option class="defaultFontSize" value="300">300</option>
 239                     <option class="defaultFontSize" value="400">400</option>
 240                     <option class="defaultFontSize" value="500">500</option>
 241                   </select>
 242     </div>
 243     <br/>
 244     <div class="field-group">
 245             <label>Report Title (if blank, the Report Name will be displayed)</label> <br/>
 246             <textarea  class="defaultFontSize" id="reportTitle" type="textarea" [(ngModel)]="reportTitle" value="{{finalGetObj.reportTitle}}"></textarea>
 247     </div>
 248     <br/>
 249     <div class="field-group">
 250             <label>Report Sub-Title</label> <br/>
 251             <textarea  class="defaultFontSize" id="reportSubTitle" type="textarea" [(ngModel)]="reportSubTitle" value="{{finalGetObj.reportSubTitle}}"></textarea>
 252     </div>
 253     <br/>
 254     <div class="field-group">
 255             <label for="oneTime" class="checkbox">
 256                     <input  id="oneTime" type="checkbox"  [(ngModel)]="oneTime" value="{{finalGetObj.oneTimeRec}}">
 257                     <i class="skin"></i><span>One Time</span>
 258                 </label>
 259     </div>
 260     <br/>
 261     <div class="field-group">
 262             <label for="hourly" class="checkbox">
 263                     <input  id="hourly" type="checkbox"  [(ngModel)]="hourly" value="{{finalGetObj.hourlyRec}}">
 264                     <i class="skin"></i><span>Hourly</span>
 265                 </label>
 266     </div>
 267     <br/>
 268     <div class="field-group">
 269             <label for="daily" class="checkbox">
 270                     <input  id="daily" type="checkbox"  [(ngModel)]="daily" value="{{finalGetObj.dailyRec}}">
 271                     <i class="skin"></i><span>Daily</span>
 272                 </label>
 273     </div>
 274     <br/>
 275     <div class="field-group">
 276             <label for="monFri" class="checkbox">
 277                     <input  class="defaultFontSize" id="monFri" type="checkbox"  [(ngModel)]="MonFri" value="{{finalGetObj.dailyMFRec}}">
 278                     <i class="skin"></i><span>Daily Monday - Friday</span>
 279                 </label>
 280     </div>
 281     <br/>
 282     <div class="field-group">
 283             <label for="weekly" class="checkbox">
 284                     <input  class="defaultFontSize" id="weekly" type="checkbox" [(ngModel)]="Weekly" value="{{finalGetObj.weeklyRec}}">
 285                     <i class="skin"></i><span>Weekly</span>
 286                 </label>
 287     </div>
 288     <br/>
 289     <div class="field-group">
 290             <label for="monthly" class="checkbox">
 291                     <input  class="defaultFontSize" id="monthly" type="checkbox" [(ngModel)]="Monthly" value="{{Monthly}}">
 292                     <i class="skin"></i><span>Monthly</span>
 293                 </label>
 294     </div>
 295     <br/>
 296     </div>
 297     <div *ngIf="reportType === 'Dashboard'">
 298
 299                     <div class="field-group">
 300                             <label>Customize Dashboard:</label>
 301                             <br/>
 302
 303                             <div cdkDropListGroup>
 304
 305                         <app-dashboard-report-grid [fetchedDashboardObj]="dashboardObj" (transferDashboardObj)="onTransferDashboardObj($event)"></app-dashboard-report-grid>
 306                               </div>
 307
 308                     </div>
 309     </div>
 310     </div>
 311     <br/>
 312     <div class="field-group">
 313             <button style="font-size: 17px;" class="btn btn-alt btn-small" (click)="saveDefinitionInfo()" >Save</button>
 314     </div>
 315     <br/>
 316     </div>
 317     </div>
 318     </div>
 319