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