diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html')
| -rw-r--r-- | ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html | 340 |
1 files changed, 340 insertions, 0 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html new file mode 100644 index 00000000..aea6c768 --- /dev/null +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/report-run/run/run-report-form-fields/run-report-form-fields.component.html @@ -0,0 +1,340 @@ +<span *ngIf="showSpinner" class="ecomp-spinner"></span> + +<div *ngIf="!showSpinner" class="stdForm"> + + <div class="tab-content"> + <table> + <tr> + <td> + <h6 class="reportTitle">{{reportName}}</h6> + <h6 class="subtitle">{{reportSubTitle}}</h6> + </td> + <td> + <mat-icon (click)="editReport(reportId)" *ngIf="allowEdit" + aria-hidden="false" aria-label="edit">edit + </mat-icon> + </td> + </tr> + </table> + <span *ngIf="showformFiledSpinner" class="ecomp-spinner"></span> + <br> + <div *ngIf="!showformFiledSpinner" class="stdForm"> + <div *ngIf="formFieldList" class="wrapper"> + <div *ngFor="let item of formFieldList; let i = index;"> + <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'" + class="fieldWidth"> + <label class="labelWidth">{{item.fieldDisplayName}} :</label> <textarea matInput placement="right" ngbTooltip="comma seperated" + [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event.toString().trim())" class="defaultFontSizeTextArea" id="item.fieldId"></textarea> + </div> + <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth"> + <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label> + <select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" + class="browser-default custom-select defaultFontSize" required="required" + > + <option *ngFor="let listItem of item.formFieldValues" + class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option> + </select> + </div> + <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth"> + <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label> + <mat-form-field> + <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" multiple> + <mat-option *ngFor="let listItem of item.formFieldValues" + value="{{listItem.id}}">{{listItem.name}}</mat-option> + </mat-select> + </mat-form-field> + </div> + <div *ngIf="item.validationType == 'DATE'" class="fieldWidth"> + <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label> + <mat-form-field><input [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" + [matDatepicker]="picker" + class="defaultFontSize" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + </div> + + <div *ngIf="item.validationType == 'TIMESTAMP_SEC'" class="finalWidth"> + <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label> + <div class="finalWidth"> + <mat-form-field class="timeStamp-HMS-matFormField"><input class="timeStamp-HMS-input" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + <div class="timeStamp-HMS-inner-div"> + <span class="timeStamp-HMS-sec-span">Sec:</span> + <div class="timeStamp-HMS-sec-div"> + <select name="Seconds" id="Seconds" class="browser-default custom-select timeStamp-sec-select " + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[3]"> + <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}"> + {{listItem}}</option> + </select> + </div> + </div> + <div class="timeStamp-HMS-inner-div"> + <span class="timeStamp-HMS-Min-span">Min:</span> + <div class="timeStamp-HMS-Min-div"> + <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-sec-select" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]"> + <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}"> + {{listItem}}</option> + </select> + </div> + </div> + <div class="timeStamp-HMS-inner-div"> + <span class="timeStamp-HMS-Hrs-span">Hrs:</span> + <div class="timeStamp-HMS-Hrs-div"> + <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-sec-select" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]"> + <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}} + </option> + + </select> + </div> + </div> + </div> + </div> + + <div *ngIf="item.validationType == 'TIMESTAMP_MIN'" class="finalWidth"> + <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label> + <div class="finalTimeDivWidth"> + <mat-form-field class="timeStamp-HM-matFormField"><input class="timeStamp-HMS-input" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + + <div class="timeStamp-HM-Min-div"> + <span class="timeStamp-HM-Min-span">Min:</span> + <div class="timeStamp-HM-Min-inner-div"> + <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-min-select " + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]"> + <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}"> + {{listItem}}</option> + </select> + </div> + </div> + <div class="timeStamp-HM-Hrs-div"> + <span class="timeStamp-HM-Hrs-inner-span">Hrs:</span> + <div class="timeStamp-HM-Hrs-inner-div"> + <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-min-select " + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]"> + <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}} + </option> + + </select> + </div> + </div> + </div> + </div> + + <div *ngIf="item.validationType == 'TIMESTAMP_HOUR'" class="finalWidth"> + <label class="labelWidth defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label> + <div class="finalTimeDivWidth"> + <mat-form-field class="finalTimeDivWidth"><input class="timeStamp-HMS-input" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + + <div class="timeStamp-H-Hrs-div"> + <span class="timeStamp-H-Hrs-inner-span">Hrs:</span> + <div class="timeStamp-H-Hrs-inner-div"> + <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-H-Hrs-inner-div-select" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]"> + <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}} + </option> + </select> + </div> + </div> + </div> + </div> + + + + </div> + </div> + <div *ngIf="formFieldList" style="padding: 0.3em" > + <div *ngIf="unCommonGropusList.length > 0"> + <label style="padding-top: 3px;">Select :</label><br/> + <br/> + <mat-radio-group ngmodel [(ngModel)]="groupSelectValue" + aria-label="Select an option" (ngModelChange) ="toggleChangeWhenCalledWithFromFields()"> + <div *ngFor="let group of formFieldGroupObjList; let i=index;" style="display: table-cell"> + <mat-radio-button value="{{group.name}}">{{group.name}}</mat-radio-button> + </div> + </mat-radio-group> + + </div> + </div> + + <div *ngIf="formFieldList" class="wrapper"> + <div *ngFor="let item of toggleFormFieldRenderArr; let i = index;"> + <div *ngIf="item.fieldType == 'TEXT' && item.validationType !== 'DATE'" class="fieldWidth"> + <label class="labelWidth">{{item.fieldDisplayName}} :</label><textarea matInput placement="right" ngbTooltip="comma seperated" appRemoveSpace + [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event.toString().trim())" class="defaultFontSizeTextArea" id="item.fieldId"></textarea> + </div> + <div *ngIf="item.fieldType == 'LIST_BOX'" class="fieldWidth"> + <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label> + <select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" + class="browser-default custom-select defaultFontSize" required="required" + > + <option *ngFor="let listItem of item.formFieldValues" + class="defaultFontSize" value="{{listItem.id}}">{{listItem.name}}</option> + </select> + + </div> + <div *ngIf="item.fieldType == 'LIST_MULTI_SELECT'" class="fieldWidth"> + <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label> + <mat-form-field> + <mat-select [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" + multiple> + <mat-option *ngFor="let listItem of item.formFieldValues" + value="{{listItem.id}}">{{listItem.name}}</mat-option> + </mat-select> + </mat-form-field> + + <br/> + </div> + <div *ngIf="item.validationType == 'DATE'" class="fieldWidth"> + <label class="labelWidth" for="reportType">{{item.fieldDisplayName}} :</label> + <mat-form-field><input [ngModel]="formFieldListValueMap.get(item.fieldId)" (ngModelChange)="formFieldListValueMap.set(item.fieldId, $event)" [matDatepicker]="picker" + class="defaultFontSize" + matInput + value="{{item.formFieldValues[0][name]}}"> + <mat-datepicker-toggle + [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker + #picker></mat-datepicker> + </mat-form-field> + </div> + + <div *ngIf="item.validationType == 'TIMESTAMP_SEC'" class="finalWidth"> + <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label> + <div class="finalWidth"> + <mat-form-field class="timeStamp-HMS-matFormField"><input class="timeStamp-HMS-input" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + <div class="timeStamp-HMS-inner-div"> + <span class="timeStamp-HMS-sec-span">Sec:</span> + <div class="timeStamp-HMS-sec-div"> + <select name="Seconds" id="Seconds" class="browser-default custom-select timeStamp-sec-select " + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[3]"> + <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}"> + {{listItem}}</option> + </select> + </div> + </div> + <div class="timeStamp-HMS-inner-div"> + <span class="timeStamp-HMS-Min-span">Min:</span> + <div class="timeStamp-HMS-Min-div"> + <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-sec-select" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]"> + <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}"> + {{listItem}}</option> + </select> + </div> + </div> + <div class="timeStamp-HMS-inner-div"> + <span class="timeStamp-HMS-Hrs-span">Hrs:</span> + <div class="timeStamp-HMS-Hrs-div"> + <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-sec-select" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]"> + <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}} + </option> + + </select> + </div> + </div> + </div> + </div> + + <div *ngIf="item.validationType == 'TIMESTAMP_MIN'" class="finalWidth"> + <label class="labelWidth" class="defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label> + <div class="finalTimeDivWidth"> + <mat-form-field class="timeStamp-HM-matFormField"><input class="timeStamp-HMS-input" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + + <div class="timeStamp-HM-Min-div"> + <span class="timeStamp-HM-Min-span">Min:</span> + <div class="timeStamp-HM-Min-inner-div"> + <select name="Minutes" id="Minutes" class="browser-default custom-select timeStamp-min-select " + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[2]"> + <option *ngFor="let listItem of timeStampArray" class="defaultFontSize" value="{{listItem}}"> + {{listItem}}</option> + </select> + </div> + </div> + <div class="timeStamp-HM-Hrs-div"> + <span class="timeStamp-HM-Hrs-inner-span">Hrs:</span> + <div class="timeStamp-HM-Hrs-inner-div"> + <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-min-select " + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]"> + <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}} + </option> + + </select> + </div> + </div> + </div> + </div> + + <div *ngIf="item.validationType == 'TIMESTAMP_HOUR'" class="finalWidth"> + <label class="labelWidth defaultFontSize" for="reportType">{{item.fieldDisplayName}} :</label> + <div class="finalTimeDivWidth"> + <mat-form-field class="finalTimeDivWidth"><input class="timeStamp-HMS-input" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[0]" [matDatepicker]="picker" matInput> + <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> + <mat-datepicker #picker></mat-datepicker> + </mat-form-field> + + <div class="timeStamp-H-Hrs-div"> + <span class="timeStamp-H-Hrs-inner-span">Hrs:</span> + <div class="timeStamp-H-Hrs-inner-div"> + <select name="Hours" id="Hours" class="browser-default custom-select timeStamp-H-Hrs-inner-div-select" + [(ngModel)]="formFieldListValueMap.get(item.fieldId)[1]"> + <option *ngFor="let listItem of hoursArray" class="defaultFontSize" value="{{listItem}}">{{listItem}} + </option> + </select> + </div> + </div> + </div> + </div> + + <br/> + </div> + </div> + <div *ngIf="showRunButton" style="float: left;"> + <button (click)="runReport()" class="btn btn-alt btn-run" >Run Report</button> + <button (click)="resetFormFieldValues()" class="btn btn-alt btn-run" >Reset</button> + </div> + <button *ngIf="showBackButton" (click)="goBack()" class="btn btn-alt btn-run" >Back</button> + </div> + </div> +</div> +<div></div> + +<br><br><br> + +<div *ngIf="navigateToRun"> + <!-- <app-run-dashboard-report [reportId]="reportId" [reportMode]="reportMode" [queryString]="getQueryString()" [DashboardReportObj]="DashboardReportObj"></app-run-dashboard-report> --> + <app-run-report [DashboardReportObj]="DashboardReportObj" [TriggerFFArr]="triggerFormFieldArr" + [hitCnt]="hitCnt" + [queryString]="getQueryString()" + [reportId]="reportId" [reportMode]="reportMode" [runAgain]="runReportAgain" [groupSelectValue]="groupSelectValue" [chartType]="chartType" [isGoBack]="downloadPrevReport" ></app-run-report> +</div> + +<div *ngIf="error == true"> + <h1>Error Message:</h1> + <p>{{errorMessage}}</p> + <br/> + <h1>Stack Trace:</h1> + <p>{{stackTrace}}</p> + +</div> |