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

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