path: root/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/form-fields/form-fields.component.html

<app-sql-validate-changes-dialog-component [(visible)]="showDialog1">
          <span class="ecomp-spinner" *ngIf="showVerifySpinner"></span>   
        <div *ngIf="!showVerifySpinner">
        <div class="card">
            <div class="card-body" style="width: 800px; height: 615px; ">
                <div style="height:600px; overflow: scroll;">
                <div class="modalTitle">{{Validatestatus}}</div>
                <button *ngIf="Validateclosable" (click)="closeValidateModal()" aria-label="Close" class="dialog__close-btn">X</button>
                <br/>
                <app-sql-validate-success-dialog-component  [tableObj] = "validateResponseString"></app-sql-validate-success-dialog-component>
                <!-- <app-sql-validate-error-dialog-component *ngIf="!ValidatePostResponse.query" [tableObj] = "GetValidateResponseString()"></app-sql-validate-error-dialog-component> -->
                </div>
            </div>
            <div class="card-footer" style="width: 800px;">
                <button style="font-size: 17px;" (click)="closeValidateModal()" class="btn btn-alt btn-small">Close</button>
            </div>
        </div>
        </div>
</app-sql-validate-changes-dialog-component>

<app-form-fields-add-edit [(visible)]="showDialog" >
                <div class="card">
                        <div class="card-header">
                                <div class="modalTitle">Report Form Field - Edit</div> 
                                    <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
                                <br/>
                        </div>
                      
                      
                        <div class="card-body" style="width: 1000px; height: 760px; ">
                                        <div style="height:737px; overflow: scroll; overflow-x: hidden;">
                                                <br/>
                                                <br/>
                                       
                                              
                                                                <label class="defaultLabelFontSize">Field Name:</label><label><input class="defaultFontSize" id="fieldName" type="text"  [(ngModel)]="fieldName" value="{{fieldName}}"/></label>
                                                       
                                                
                                           
                                            <br/>
                                            <br/>
                                            <br/>
                                            <div class="field-group">
                                                        <label>Field Type:</label>
                                                        <select class="browser-default custom-select defaultFontSize" id="fieldType" required="required" [(ngModel)]="fieldType" value="{{fieldType}}">
                                                                <option  class="defaultFontSize" selected>Select Field Type  </option>
                                                                <option class="defaultFontSize" value="TEXT">Text Box</option>
                                                                <option class="defaultFontSize" value="TEXTAREA">TEXTAREA</option>
                                                                <option class="defaultFontSize" value="LIST_BOX">List Box</option>
                                                                <option class="defaultFontSize" value="LIST_MULTI_SELECT">Multi-select List Box</option>
                                                                <option class="defaultFontSize" value="HIDDEN">Hidden</option>
                                                              </select>
                                                </div>
                                            <br/>
                                            <br/>
                                            
                                            <div class="field-group">
                                                        <label>Visible:</label>
                                                        <select class="browser-default custom-select defaultFontSize" id="visible" required="required" [(ngModel)]="visible" value="{{visible}}">
                                                                <option class="defaultFontSize" value="YES" selected>YES</option>
                                                                <option class="defaultFontSize" value="NO">NO</option>
                                                              </select>
                                                </div>

                                                <br/>
                                                <br/>
                                                <div>
                                                        <label class="defaultLabelFontSize">Is used in Group By Clause?:</label>
                                                        <label class="defaultLabelFontSize" for="groupFormField" class="checkbox">
                                                        <input id="groupFormField" type="checkbox"  class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="groupFormField" value="{{groupFormField}}"><i class="skin"></i><span></span>
                                                        </label>
                                                </div>
                                                
                                                <br/>
                                                <br/>
                                                <div>
                                                        <label class="defaultLabelFontSize">SQL as Default Value:</label>	
                                                        <label class="defaultLabelFontSize" for="isDefaultSql" class="checkbox">	
                                                        <input id="isDefaultSql" type="checkbox"  class="ng-valid ng-dirty ng-valid-parse ng-touched" [(ngModel)]="isDefaultSql" value="{{isDefaultSql}}"><i class="skin"></i><span></span>	
                                                        </label>	
                                                </div>
                                                
                                                <div *ngIf="isDefaultSql">
                                                <br/>
                                                <br/>
                                                <div class="field-group">
                                                        <label>Default SQL:</label>
                                                        <textarea  class="defaultFontSize" id="fieldDefaultSQL" type="textarea" [(ngModel)]="fieldDefaultSQL" value="{{fieldDefaultSQL}}"></textarea>
                                                        <button style="font-size: 17px;" (click)="verify('Default')" class="btn btn-alt btn-small">Verify</button>
                                                        
                                                </div>
                                             </div>
                                             <br/>
                                                 <div *ngIf="(fieldDefaultSQL == null || fieldDefaultSQL == '') && isDefaultSql == false">	
                                                        <label class="defaultLabelFontSize" >Default Value:</label>	
                                                        <label><input class="defaultFontSize" id="defaultValue" type="text"  [(ngModel)]="defaultValue" value="{{defaultValue}}"/></label>
                                                   
                                                  
                                                </div>
                                                <br/>
                                                <br/>
                                                <br/>
                                                <div class="field-group">
                                                                <label>Verify Field Value As:</label>
                                                                <select class="browser-default custom-select defaultFontSize" id="validationType" required="required" [(ngModel)]="validationType" value="{{validationType}}">
                                                                        <option  class="defaultFontSize" value="" selected>Select Visibility  </option>
                                                                        <option class="defaultFontSize" value="">Do Not Perform Validation</option>
                                                                        <option class="defaultFontSize" value="INTEGER">Integer</option>
                                                                        <option class="defaultFontSize" value="POSITIVE_INTEGER">Positive Integer</option>
                                                                        <option class="defaultFontSize" value="DATE">Date</option>
                                                                        <option class="defaultFontSize" value="TIMESTAMP_SEC">Timestamp(Hour, Min, Sec)</option>
                                                                        <option class="defaultFontSize" value="TIMESTAMP_MIN">Timestamp(Hour, Min)</option>
                                                                        <option class="defaultFontSize" value="TIMESTAMP_HOUR">Timestamp(Hour)</option>
                                                                        <option class="defaultFontSize" value="NON_NEGATIVE_INTEGER">Positive Integer Can not Be Zero</option>
                                                                        <option class="defaultFontSize" value="FLOAT">Any Number</option>
                                                                        <option class="defaultFontSize" value="NON_NEGATIVE_FLOAT">Positive Number</option>
                                                                        <option class="defaultFontSize" value="POSITIVE_FLOAT">Positive Number Can Not Be Zero</option>
                                                                </select>
                                                </div>
                                                <br/>
                                                <br/>
                                                <div class="field-group">
                                                        <label>SQL Generating Custom List of Values:</label>
                                                        <textarea  class="defaultFontSize" id="fieldSQL" type="textarea" [(ngModel)]="fieldSQL" value="{{fieldSQL}}"></textarea>
                                                        <button style="font-size: 17px;" (click)="verify('Regular')" class="btn btn-alt btn-small">Verify</button>
                                                </div>
                                                <br/>
                                                <br/>
                                                <div>
                                                        <label class="defaultLabelFontSize">Provide Predefined List of Values:	Do not use Predefined list - Generate list from database:</label><label><input class="defaultFontSize" id="predefinedValue" type="text"  [(ngModel)]="predefinedValue" value="{{predefinedValue}}"/></label>
                                                        <button style="font-size: 17px;" (click)="addToList(predefinedValue)" class="btn btn-alt btn-small">Add to List</button>
                                                </div>
                                                <br/>
                                                <br/>
                                      
                                                <div>
                                                        <div *ngFor="let value of predefinedValueList">
                                                        <div style="margin-left: 5px;">
                                                        <label >{{value.name}}</label>
                                                        <mat-icon aria-hidden="false" aria-label="delete" (click)="deleteFromList(value.id)">delete</mat-icon>
                                                        </div>
                                                        </div>
                                                </div>
                                        </div>
                                        </div>
                                   
                                    <div class="card-footer" style="width: 1000px; height: 65px; padding-left: 770px;">
                                        <button style="font-size: 17px;"  *ngIf="!showConfirmButton" (click)="save();" class="btn btn-alt btn-small">Save</button>&nbsp;
                                        <button style="font-size: 17px;" *ngIf="showConfirmButton" (click)="complete();" class="btn btn-alt btn-small">Confirm</button>&nbsp;&nbsp;
                                        <button style="font-size: 17px;" (click)="close()" class="btn btn-alt btn-small">Cancel</button>
                                    </div>
                                    
                                  
                </div>
</app-form-fields-add-edit>


<div class="stdForm">
        <br/>
        <div class="tab-content">
                <h3>Step 4 - Report Form Fields</h3>
                
        </div>
             <span class="ecomp-spinner" *ngIf="showSpinner"></span>   
        <br/>
        <br/>

        <h4>Form Field Groups</h4>
        <br/>
        <div *ngFor="let group of Groups">
                <button class="formFieldGroupButton" mat-button >{{group.name}}</button><mat-icon style="margin-left: 21%;" aria-hidden="false" aria-label="delete" (click)="deleteGroup(group.name)">delete</mat-icon>
                        <table style="margin-top: 10px;" class="app-data-table">
                                        
                                <th class="defaultFontSize">Order Number</th>
                                <th class="defaultFontSize">Field Name</th>
                                <th class="defaultFontSize">Delete From Group</th>
                              
                              <tr  *ngFor="let item of group.formFieldList; let i = index;">
                                 <td>
                                      {{item.orderSeq}}
                                 </td>
                                 <td>
                                      {{item.name}}
                                  </td>
                                   <td>
                                      <mat-icon aria-hidden="false" aria-label="delete" (click)="deleteFromGroup(item.id)">delete</mat-icon>
                                   </td>
                              </tr>
                              
                            </table>
                <br/>
        </div>
        <br/>
        <div class="field-group">
        <table style="width: auto; margin-left: 70%;">
        <tr>
                <td><button style="font-size: 17px;" class="btn btn-alt btn-small" (click)="createGroup()" >Create Group</button></td>
                <td><button style="font-size: 17px;" class="btn btn-alt btn-small" (click)="saveFormFieldGroups()" >Save Group</button></td>
        </tr>
        </table>
        </div>
        <br/>
        <h4>Form Field List</h4>
                <div *ngIf="!showSpinner">
        
                        <table style="margin-top: 10px;" class="app-data-table">
                                        
                                          <th class="defaultFontSize">Order Number</th>
                                          <th class="defaultFontSize">Field Name</th>
                                          <th class="defaultFontSize">Edit</th>
                                          <th class="defaultFontSize">Order</th>
                                          <th class="defaultFontSize">Delete</th>
                                        
                                        <tr *ngFor="let item of formFieldsListObj; let i = index;">
                                           <td>
                                                {{item.orderSeq}}
                                           </td>
                                           <td>
                                                {{item.name}}
                                            </td>
                                            <td>
                                                <mat-icon aria-hidden="false" aria-label="edit" (click)="edit(item.id); setDisplayMode('Edit');">edit</mat-icon>
                                             </td>
                                             <td>
                                                <mat-icon *ngIf="!isFirst(i)" aria-hidden="false" aria-label="expand_less" (click)="moveUpward(i)">expand_less</mat-icon>
                                                <mat-icon *ngIf="!isLast(i)" aria-hidden="false" aria-label="expand_more" (click)="moveDownward(i)">expand_more</mat-icon>
                                             </td>
                                             <td>
                                                <mat-icon aria-hidden="false" aria-label="delete" (click)="delete(item.id)">delete</mat-icon>
                                             </td>
                                        </tr>
                                        
                                      </table>
                                      <br/>
                                      
                                      <div class="field-group">
                                                <button style="font-size: 17px; margin-left: 80%;" class="btn btn-alt btn-small" (click)="add(); setDisplayMode('Add');" >Add</button>
                                        </div>
                                      <br/>
                                      <hr/>
                </div>
    </div>