Post
Ask Question
Karn Singh

Karn Singh

  • NA
  • 206
  • 13.8k

error : cannot find control path in FormArray

Nov 11 2020 4:11 AM
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body class="sarRequestForm">  
  5. <form [formGroup]="sarRequestForm">  
  6. <div formArrayName="sarDetail">  
  7. <div class="header">  
  8. <div style="padding-top:3px; " [innerHTML]="headerStr"></div>  
  9. </div>  
  10. <div class="a-modal-footer">  
  11. <button aria-label="Close" class="a-btn a-btn-primary a-btn-lg" type="button" (click)="copySARDetails(sarRequestForm.value)">Copy</button>  
  12. </div>  
  13. <br />  
  14. <div class="sarWrapper">  
  15. <div class="loading-indicator" *ngIf="showSpinner">  
  16. <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>  
  17. </div>  
  18. <table id="sarReqTable" class="table table-bordered">  
  19. <thead>  
  20. <tr>  
  21. <td> </td>  
  22. <td>Select</td>  
  23. <td>Request No</td>  
  24. <td>Company</td>  
  25. <td>Email Address</td>  
  26. <td>First Name</td>  
  27. <td>Last Name</td>  
  28. <td>User ID</td>  
  29. <td>Start Date</td>  
  30. <td>End Date</td>  
  31. <td>User Type</td>  
  32. <td>Request Type</td>  
  33. <td>Resource Access</td>  
  34. <td>Comments</td>  
  35. <td>Update</td>  
  36. <td>Approver Details</td>  
  37. </tr>  
  38. </thead>  
  39. <tbody>  
  40. <tr [formGroupName]="sarIndex" *ngFor="let details of getSarDetail().controls; let sarIndex = index">  
  41. <td style="text-align:center">  
  42. <i class="fa fa-plus" style="cursor:pointer;" (click)="addSARRow()"></i><br />  
  43. <i class="fa fa-trash" style="cursor:pointer;" (click)=" deleteSARRow(j)"></i>  
  44. </td>  
  45. <td style="text-align:center">  
  46. <input class="form-control" formControlName="selected" type="checkbox" />  
  47. </td>  
  48. <td>  
  49. <input class="form-control-label" style="text-align:center !important; font-weight:bold; font-size:13px;" formControlName="requestNum" type="text" disabled />  
  50. </td>  
  51. <td>  
  52. <div class="input-field">  
  53. <ng-autocomplete formControlName="company" [data]="companyList" [debounceTime]="800" (selected)='selectEventCompany($event)'  
  54. [searchKeyword]="keyword" (inputChanged)="enteredCompanyValue($event)" (closed)="closedCompanyAuto()"  
  55. [itemTemplate]="itemTemplate1" required>  
  56. </ng-autocomplete>  
  57. <span class="appkiticon icon-search-outline a-font-16 a-text-grey sar" type='button' data-target="#SarCompanyModalWindow" data-toggle="modal"></span>  
  58. <ng-template #itemTemplate1 let-item>  
  59. <a [innerHTML]="item.name"></a>  
  60. </ng-template>  
  61. </div>  
  62. </td>  
  63. <td>  
  64. <input class="form-control" formControlName="userEmail" type="text" value="{{loggedInUserEmail}}" />  
  65. </td>  
  66. <td>  
  67. <input class="form-control" formControlName="userFirstName" type="text" />  
  68. </td>  
  69. <td>  
  70. <input class="form-control" formControlName="userLastName" type="text" />  
  71. </td>  
  72. <td>  
  73. <input class="form-control" formControlName="userId" type="text" />  
  74. </td>  
  75. <td>  
  76. <mat-form-field appearance="fill">  
  77. <input formControlName="startDate" matInput [matDatepicker]="pickerStartDate">  
  78. <mat-datepicker-toggle matSuffix [for]="pickerStartDate"></mat-datepicker-toggle>  
  79. <mat-datepicker #pickerStartDate></mat-datepicker>  
  80. </mat-form-field>  
  81. </td>  
  82. <td>  
  83. <mat-form-field appearance="fill">  
  84. <input formControlName="endDate" matInput [matDatepicker]="pickerEndDate">  
  85. <mat-datepicker-toggle matSuffix [for]="pickerEndDate"></mat-datepicker-toggle>  
  86. <mat-datepicker #pickerEndDate></mat-datepicker>  
  87. </mat-form-field>  
  88. </td>  
  89. <td>  
  90. <div class="input-field">  
  91. <select class="a-selector a-select" formControlName="userType">  
  92. <option value="" selected disabled hidden>  
  93. Select  
  94. </option>  
  95. <option *ngFor="let user of UsertypeDetails">{{user.name}}</option>  
  96. </select>  
  97. </div>  
  98. </td>  
  99. <td>  
  100. <div class="input-field">  
  101. <select class="a-selector a-select" formControlName="requestType">  
  102. <option value="" selected disabled hidden>  
  103. Select  
  104. </option>  
  105. <option *ngFor="let req of RequestTypeDetails">{{req.name}}</option>  
  106. </select>  
  107. </div>  
  108. </td>  
  109. <td style="text-align:center;">  
  110. <a href="" (click)="selectedSarRow(sarIndex)" id="resource" data-target="#SARSecurityModal" data-toggle="modal">Resource</a>  
  111. </td>  
  112. <td style="text-align:center">  
  113. <a href="" (click)="selectedSarRow(sarIndex)" id="comment" data-target="#SARCommentModal" data-toggle="modal">Comments</a>  
  114. <!--<input class="form-control" formControlName="comment" type="text" />-->  
  115. <div aria-hidden="true" class="modal a-modal fade" id="SARCommentModal" role="dialog" tabindex="-1">  
  116. <div class="modal-dialog a-modal-lg" role="document">  
  117. <div class="modal-content" role="document">  
  118. <div class="modal-content bt-active-wrapper">  
  119. <div class="a-modal-header">  
  120. <div class="flex-fill">  
  121. <span class="a-h4">Comment Section</span>  
  122. </div>  
  123. <button aria-label="Close" class="icon-wrapper" data-dismiss="modal">  
  124. <span class="appkiticon icon-close-fill a-close-btn"></span>  
  125. </button>  
  126. </div>  
  127. <div class="a-modal-body">  
  128. <div class="d-flex flex-column ">  
  129. <textarea rows="5" aria-label="Textarea in modal" class="a-text-field txt-input text-input-level4"  
  130. (change)=commentChange($event.target.value)></textarea>  
  131. </div>  
  132. </div>  
  133. <div class="a-modal-footer">  
  134. <div class="button-operation">  
  135. <button aria-label="Close" class="a-btn a-btn-transparent a-btn-lg a-btn-gray comment-cancel" data-dismiss="modal">CANCEL</button>  
  136. <button class="a-btn a-btn-transparent a-btn-lg comments-add bt-control" (click)="saveComment()" data-dismiss="modal">ADD</button>  
  137. </div>  
  138. </div>  
  139. </div>  
  140. </div>  
  141. </div>  
  142. </div>  
  143. </td>  
  144. <td style="text-align:center">  
  145. <span type="button" class="appkiticon icon-save-outline" (click)="UpdateSarSingleRequest(details,j)"> </span>      
  146. <span type="button" class="appkiticon icon-refresh-outline" (click)="resetRequest()"></span>  
  147. </td>  
  148. <td>  
  149. <button *ngIf="enableApproverDetail" type="button" class="a-btn a-btn-transparent a-btn-lg" data-target="#ApproverDetailModal" data-toggle="modal" (click)="approvarDetail()">List</button>  
  150. </td>  
  151. <div aria-hidden="true" class="modal a-modal fade" id="ApproverDetailModal" role="dialog" tabindex="-1">  
  152. <div class="modal-dialog a-modal-xl" id="approvalModal" role="document">  
  153. <div class="modal-content">  
  154. <div class="a-modal-header">  
  155. <div class="flex-fill">  
  156. <span class="a-h4">Approver Detail</span>  
  157. </div>  
  158. <button aria-label="Close" class="icon-wrapper" data-dismiss="modal">  
  159. <span class="appkiticon icon-close-fill a-close-btn"></span>  
  160. </button>  
  161. </div>  
  162. <table id="approverTable" *ngIf="showDetailsTable" class="center table table-striped table-bordered table-hover approverTable">  
  163. <thead style="background-color: #7D7D7D;">  
  164. <tr>  
  165. <td>Level</td>  
  166. <td>Approver Detail</td>  
  167. </tr>  
  168. </thead>  
  169. <tbody>  
  170. <tr *ngFor="let item of sarApproverDetailsArray;" style="font-size:12px;text-align:center;">  
  171. <td>  
  172. {{item.approvalTier}}  
  173. </td>  
  174. <td>  
  175. {{item.userid}}  
  176. </td>  
  177. </tr>  
  178. </tbody>  
  179. </table>  
  180. <div class="norecords" *ngIf="!showDetailsTable"><h4>No records to display</h4></div>  
  181. </div>  
  182. </div>  
  183. </div>  
  184. <div aria-hidden="true" class="modal a-modal fade" id="SARSecurityModal" role="dialog" tabindex="-1">  
  185. <div class="modal-dialog a-modal-lg" role="document">  
  186. <div class="modal-content">  
  187. <div class="a-modal-header">  
  188. <div class="flex-fill">  
  189. <span class="a-h4">Resource Access</span>  
  190. </div>  
  191. <button aria-label="Close" class="icon-wrapper" data-dismiss="modal">  
  192. <span class="appkiticon icon-close-fill a-close-btn"></span>  
  193. </button>  
  194. </div>  
  195. <div class="a-modal-body">  
  196. <table id="sarSecTable" class="table table-bordered" formArrayName="sarSecDetails">  
  197. <thead>  
  198. <tr>  
  199. <td> </td>  
  200. <td>Environment</td>  
  201. <td>Resource Type</td>  
  202. <td>Resource</td>  
  203. <td>Entitlement</td>  
  204. </tr>  
  205. </thead>  
  206. <tbody>  
  207. <tr [formGroupName]="sarSecIndex" *ngFor="let details of getSarSecAccessDetail(sarIndex).controls; let sarSecIndex = index">  
  208. <td style="text-align:center">  
  209. <i class="fa fa-plus" style="cursor:pointer;" (click)="addSecResourceRow(sarIndex,sarSecIndex)"></i><br />  
  210. <i class="fa fa-trash" style="cursor:pointer;" (click)="deleteSecResourceRow(s,j)"></i>  
  211. </td>  
  212. <td style="text-align:center">  
  213. <div class="input-field">  
  214. <select class="a-selector a-select" formControlName="enviorement" (change)="onEnvSelect($event.target.value)">  
  215. <option value="" selected disabled hidden>  
  216. Select  
  217. </option>  
  218. <option *ngFor="let env of environmentList">{{env.name}}</option>  
  219. </select>  
  220. </div>  
  221. </td>  
  222. <td style="text-align:center">  
  223. <div class="input-field">  
  224. <select class="a-selector a-select" formControlName="resourceType" (change)="onUserTypeSelect($event.target.value)">  
  225. <option value="" selected disabled hidden>  
  226. Select  
  227. </option>  
  228. <option *ngFor="let res of resourceType">{{res}}</option>  
  229. </select>  
  230. </div>  
  231. </td>  
  232. <td style="text-align:center">  
  233. <div class="input-field">  
  234. <select class="a-selector a-select" formControlName="resource" (change)="onResourceSelect($event.target.value)">  
  235. <option value="" selected disabled hidden>  
  236. Select  
  237. </option>  
  238. <option value="{{res.resourceId}}" *ngFor="let res of resourceList">{{res.name}}</option>  
  239. </select>  
  240. </div>  
  241. </td>  
  242. <td style="text-align:center">  
  243. <div class="input-field">  
  244. <select class="a-selector a-select" formControlName="entitlement" (change)="onEntitiledSelect($event.target.value)">  
  245. <option value="" selected disabled hidden>  
  246. Select  
  247. </option>  
  248. <option value="{{ent.entitlementId}}" *ngFor="let ent of resourceEntitlementsList">{{ent.entitlementName}}</option>  
  249. </select>  
  250. </div>  
  251. </td>  
  252. </tr>  
  253. </tbody>  
  254. </table>  
  255. <!--<div aria-hidden="true" class="modal a-modal fade" id="SarCompanyModalWindow" role="dialog" tabindex="-1">  
  256. <div class="modal-dialog a-modal-xl" id="sarCompanyModal" role="document">  
  257. <div class="modal-content">  
  258. <div class="a-modal-header">  
  259. <div class="flex-fill">  
  260. <span class="a-h4">Company Details</span>  
  261. </div>  
  262. <button aria-label="Close" class="icon-wrapper" data-dismiss="modal">  
  263. <span class="appkiticon icon-close-fill a-close-btn"></span>  
  264. </button>  
  265. </div>  
  266. <div class="a-modal-body">  
  267. <div class="d-flex flex-wrap">  
  268. <div class="flex-fill a-modal-mt-20">  
  269. <mat-form-field>  
  270. <input matInput (keyup)="applyCompanyFilter($event.target.value)" placeholder="Search Company">  
  271. </mat-form-field>  
  272. <table mat-table matSort [dataSource]="dataSourceCompany" matSortActive="name" matSortDirection="asc" matSortDisableClear>  
  273. <ng-container matColumnDef="name">  
  274. <th mat-header-cell *matHeaderCellDef mat-sort-header>Company</th>  
  275. <td mat-cell *matCellDef="let element" (click)="companyModelSelected(element)" data-dismiss="modal"> {{element.name}} </td>  
  276. </ng-container>  
  277. <ng-container matColumnDef="status">  
  278. <th mat-header-cell *matHeaderCellDef>Status</th>  
  279. <td mat-cell *matCellDef="let element" (click)="companyModelSelected(element.name)" data-dismiss="modal">Active</td>  
  280. </ng-container>  
  281. <tr mat-header-row *matHeaderRowDef="displayedCompanyColumns"></tr>  
  282. <tr mat-row *matRowDef="let row; columns: displayedCompanyColumns;"></tr>  
  283. </table>  
  284. <mat-paginator [pageSizeOptions]="[5, 10, 15]" #CompanyPaginator="matPaginator" showFirstLastButtons></mat-paginator>  
  285. </div>  
  286. </div>  
  287. </div>  
  288. </div>  
  289. </div>  
  290. </div>-->  
  291. </div>  
  292. <div class="a-modal-footer">  
  293. <button aria-label="Close" class="a-btn a-btn-secondary a-btn-lg a-btn-negative" data-dismiss="modal" style="margin-right: 20px;">CANCEL</button>  
  294. <button aria-label="Close" class="a-btn a-btn-primary a-btn-lg" data-dismiss="modal" (click)="entitledIdSaveSARForm()">SAVE</button>  
  295. </div>  
  296. </div>  
  297. </div>  
  298. </div>  
  299. </tr>  
  300. </tbody>  
  301. </table>  
  302. <button aria-label="Close" class="a-btn a-btn-primary a-btn-lg" type="submit" (click)="submitSARForm(sarRequestForm.value)">Save All</button>  
  303. </div>  
  304. </div>  
  305. </form>  
  306. </body>  
  307. </html> 
  1. import { Component, OnInit } from '@angular/core';  
  2. import { date } from '@rxweb/reactive-form-validators';  
  3. import { CompanyDetails } from '../Model/CompanyDetails';  
  4. import { PortalService } from '../Service/portal.service';  
  5. import { MatTableDataSource } from '@angular/material';  
  6. import { ToastrService } from 'ngx-toastr';  
  7. import { StatusMessage } from '../Model/StatusMessages';  
  8. import { ResourceGrid } from '../Model/ResourceGrid';  
  9. import { Environment } from '../Model/Environment';  
  10. import { Resource } from '../Model/Resource';  
  11. import { ResourceEntitlement } from '../Model/ResourceEntitlement';  
  12. import { AuthService } from '../auth.service';  
  13. import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';  
  14. import { UserType } from '../Model/UserType';  
  15. import { RequestType } from '../Model/RequestType';  
  16. import { FormattedError } from '@angular/compiler';  
  17. import { SARDetails } from '../Model/SARDetails';  
  18. import { SARApproverDetails } from '../Model/SARApproverDetails';  
  19. import { parse } from 'url';  
  20. @Component({  
  21. selector: 'app-security-access-form',  
  22. templateUrl: './security-access-form.component.html',  
  23. styleUrls: ['./security-access-form.component.css']  
  24. })  
  25. export class SecurityAccessFormComponent implements OnInit {  
  26. serviceUnavilableMsg: string;  
  27. showSpinner = false;  
  28. submitSucessMsg: string;  
  29. submitFailedMsg: string;  
  30. headerStr: string;  
  31. keyword = 'name';  
  32. latestRequestNumber: string;  
  33. constructor(private service: PortalService, private toastr: ToastrService, private formBuilder: FormBuilder, public auth: AuthService) {  
  34. }  
  35. resourceArray: Array<ResourceGrid> = [];  
  36. sarDetailsArray: SARDetails[] = [];  
  37. inputDetails: SARDetails[] = [];  
  38. sarApproverDetailsArray: SARApproverDetails[] = [];  
  39. newSARApproverDetail: SARApproverDetails[] = [];  
  40. sarRequest: SARDetails[] = [];  
  41. singleSARRequest: SARDetails[] = [];  
  42. selectedSARrowIndex: string;  
  43. textComment: string;  
  44. generatedInidentList: string[] = [];  
  45. companyList: CompanyDetails[] = [];  
  46. filterArray: SARDetails[] = [];  
  47. dataSourceCompany: MatTableDataSource<CompanyDetails>;  
  48. displayedCompanyColumns: string[] = ['name'];  
  49. environmentList: Environment[] = [];  
  50. selectedCompany: string;  
  51. commentStr: string;  
  52. environmentCompanyList: Environment[] = [];  
  53. resourceList: Resource[] = [];  
  54. resourceType: string[] = [];  
  55. resourceEntitlementsList: ResourceEntitlement[] = [];  
  56. statusMessages: StatusMessage[] = [];  
  57. UsertypeDetails: UserType[] = [];  
  58. RequestTypeDetails: RequestType[] = [];  
  59. loggedInUserEmail: string;  
  60. selectedSARrequest: string;  
  61. hideAfterSave: boolean;  
  62. entitiledStr: string[] = [];  
  63. sarRequestForm: FormGroup;  
  64. sarDetail: FormArray;  
  65. sarSecDetails: FormArray;  
  66. showDetailsTable: boolean;  
  67. enableApproverDetail: boolean;  
  68. sarSecAccessForm: FormGroup;  
  69. sarSecAccessDetail: FormArray;  
  70. ngOnInit(): void {  
  71. this.headerStr = '';  
  72. this.commentStr = '';  
  73. this.selectedSARrowIndex = '';  
  74. this.textComment = '';  
  75. this.dataSourceCompany = new MatTableDataSource();  
  76. this.selectedSARrequest = '';  
  77. this.selectedCompany = '';  
  78. this.hideAfterSave = true;  
  79. this.enableApproverDetail = false;  
  80. this.showDetailsTable = true;  
  81. this.entitiledStr = [];  
  82. this.loggedInUserEmail = this.auth.getUserDetails('email');  
  83. this.getCompanies();  
  84. this.getFormHeader();  
  85. this.getUserType();  
  86. this.getRequestType();  
  87. this.getEnvironments();  
  88. this.getResourceEntitlements();  
  89. this.getResources();  
  90. this.latestRequestNumber = '';  
  91. this.createSARSubmitForm();  
  92. }  
  93. createSARSubmitForm() {  
  94. this.sarRequestForm = this.formBuilder.group({  
  95. sarDetail: this.formBuilder.array([this.createSARFormArray()])  
  96. });  
  97. }  
  98. createSARFormArray(): FormGroup {  
  99. return this.formBuilder.group({  
  100. selected: [false],  
  101. requestNum: [''],  
  102. company: [''],  
  103. userEmail: [''],  
  104. userFirstName: [''],  
  105. userLastName: [''],  
  106. userId: [''],  
  107. startDate: [''],  
  108. endDate: [''],  
  109. userType: [''],  
  110. requestType: [''],  
  111. comment: [''],  
  112. entitledId: [''],  
  113. submitted: [false],  
  114. sarSecDetails: new FormArray([this.createSARSecDetailArray()])  
  115. });  
  116. }  
  117. createNewSARFormArray(): FormGroup {  
  118. return this.formBuilder.group({  
  119. selected: [false],  
  120. requestNum: [''],  
  121. company: [''],  
  122. userEmail: [''],  
  123. userFirstName: [''],  
  124. userLastName: [''],  
  125. userId: [''],  
  126. startDate: [''],  
  127. endDate: [''],  
  128. userType: [''],  
  129. requestType: [''],  
  130. comment: [''],  
  131. entitledId: [''],  
  132. submitted: [false],  
  133. sarSecDetails: new FormArray([this.createSARSecDetailArray()])  
  134. });  
  135. }  
  136. createSARSecDetailArray(): FormGroup {  
  137. return this.formBuilder.group({  
  138. secRequestNum: [''],  
  139. enviorement: [''],  
  140. resource: [''],  
  141. resourceType: [''],  
  142. entitlement: [''],  
  143. });  
  144. }  
  145. createNewSARSecDetailArray(): FormGroup {  
  146. return this.formBuilder.group({  
  147. secRequestNum: [''],  
  148. enviorement: [''],  
  149. resource: [''],  
  150. resourceType: [''],  
  151. entitlement: [''],  
  152. });  
  153. }  
  154. getSarDetail(): FormArray {  
  155. return this.sarRequestForm.get('sarDetail') as FormArray  
  156. }  
  157. getSarSecAccessDetail(sarIndex: number): FormArray {  
  158. const index = parseInt(this.selectedSARrowIndex);  
  159. if (index) {  
  160. return this.getSarDetail().at(index).get('sarSecDetails') as FormArray;  
  161. }  
  162. else {  
  163. return this.getSarDetail().at(0).get('sarSecDetails') as FormArray;  
  164. }  
  165. }  
  166. addSARRow() {  
  167. this.getSarDetail().push(this.createNewSARFormArray());  
  168. }  
  169. addSecResourceRow(i) {  
  170. const index = parseInt(this.selectedSARrowIndex);  
  171. const control = <FormArray>this.sarRequestForm.get('sarDetail');  
  172. const sarFormArray = control.at(index).get('sarSecDetails')['controls'];  
  173. sarFormArray.push(this.createSARSecDetailArray());  
  174. }  
  175. getFormHeader() {  
  176. this.headerStr = '';  
  177. this.service.getmenu().subscribe((res) => {  
  178. if (res) {  
  179. const header = res.find(i => i.name == 'SecurityAccessRequest');  
  180. this.headerStr = header['title'] == null ? '' : header['title'];  
  181. }  
  182. else {  
  183. this.headerStr = '';  
  184. }  
  185. }, (error) => {  
  186. this.headerStr = '';  
  187. setTimeout(() => {  
  188. this.serviceUnavilable();  
  189. }, 500);  
  190. }  
  191. );  
  192. }  
  193. getRequestType() {  
  194. this.service.getRequestType().subscribe((res) => {  
  195. if (res.length > 0) {  
  196. this.RequestTypeDetails = res;  
  197. }  
  198. else {  
  199. setTimeout(() => {  
  200. this.serviceUnavilable();  
  201. }, 500);  
  202. }  
  203. },  
  204. (error) => {  
  205. setTimeout(() => {  
  206. this.serviceUnavilable();  
  207. }, 500);  
  208. }  
  209. );  
  210. }  
  211. getUserType() {  
  212. this.service.getUserTpe().subscribe((res) => {  
  213. if (res.length > 0) {  
  214. this.UsertypeDetails = res;  
  215. }  
  216. else {  
  217. setTimeout(() => {  
  218. this.serviceUnavilable();  
  219. }, 500);  
  220. }  
  221. },  
  222. (error) => {  
  223. setTimeout(() => {  
  224. this.serviceUnavilable();  
  225. }, 500);  
  226. }  
  227. );  
  228. }  
  229. deleteSecResourceRow(secindex, sarindex) {  
  230. if (secindex > 0 && sarindex >= 0) {  
  231. const sarArray = <FormArray>this.sarRequestForm.get('sarDetail');  
  232. const sarArrayIndex = sarArray.at(sarindex)['controls'];  
  233. const sarSecArray = sarArrayIndex['sarSecDetails'];  
  234. sarSecArray.removeAt(secindex);  
  235. }  
  236. }  
  237. selectEventCompany(Companydata) {  
  238. this.selectedCompany = '';  
  239. const compId = Companydata['companyID'];  
  240. this.selectedCompany = compId;  
  241. this.enableApproverDetail = true;  
  242. }  
  243. enteredCompanyValue(any) {  
  244. }  
  245. closedCompanyAuto() {  
  246. }  
  247. deleteRow(index) {  
  248. if (this.resourceArray.length == 1) {  
  249. return false;  
  250. } else {  
  251. this.resourceArray.splice(index, 1);  
  252. return true;  
  253. }  
  254. }  
  255. selectedSarRow(index) {  
  256. this.selectedSARrowIndex = index;  
  257. //const sarSecAccessForm = this.sarSecAccessForm.get('sarSecAccessDetail') as FormArray;  
  258. //const sarSecResourceArray = sarSecAccessForm['controls'];  
  259. //for (var i = 0; i < sarSecResourceArray.length; i++)  
  260. //{  
  261. // sarSecResourceArray[i]['controls']['entitlement'].setValue('');  
  262. // sarSecResourceArray[i]['controls']['enviorement'].setValue('');  
  263. // sarSecResourceArray[i]['controls']['resource'].setValue('');  
  264. // sarSecResourceArray[i]['controls']['resourceType'].setValue('');  
  265. //}  
  266. }  
  267. commentChange(comment) {  
  268. this.commentStr = '';  
  269. this.commentStr = comment;  
  270. }  
  271. saveComment() {  
  272. this.textComment = '';  
  273. this.textComment = this.commentStr;  
  274. const index = parseInt(this.selectedSARrowIndex);  
  275. const sarArray = <FormArray>this.sarRequestForm.get('sarDetail');  
  276. const sarArrayIndex = sarArray.at(index)['controls'];  
  277. if (sarArrayIndex) {  
  278. sarArrayIndex['comment'].setValue(this.textComment);  
  279. }  
  280. }  
  281. approvarDetail() {  
  282. this.getSARApproverDetails();  
  283. }  
  284. submitSARForm(sarFormData) {  
  285. this.showSpinner = true;  
  286. this.sarRequest = [];  
  287. this.sarDetailsArray = [];  
  288. if (sarFormData.sarDetail != null && sarFormData != null) {  
  289. this.sarDetailsArray = sarFormData.sarDetail;  
  290. this.sarDetailsArray = this.sarDetailsArray.filter(x => x.submitted == false);  
  291. if (this.sarDetailsArray.length > 0) {  
  292. for (var i = 0; i < this.sarDetailsArray.length; i++) {  
  293. var inputDetails = new SARDetails();  
  294. const companyDetails = this.sarDetailsArray[i]['company'];  
  295. inputDetails.companyId = companyDetails['companyID'];  
  296. if (this.sarDetailsArray[i]['userEmail']) {  
  297. inputDetails.emailAddress = this.sarDetailsArray[i]['userEmail'];  
  298. }  
  299. else {  
  300. inputDetails.emailAddress = this.loggedInUserEmail;  
  301. }  
  302. inputDetails.firstName = this.sarDetailsArray[i]['userFirstName'];  
  303. inputDetails.lastName = this.sarDetailsArray[i]['userLastName'];  
  304. inputDetails.requestType = this.sarDetailsArray[i]['requestType'];  
  305. inputDetails.userId = this.sarDetailsArray[i]['userId'];  
  306. inputDetails.userType = this.sarDetailsArray[i]['userType'];  
  307. inputDetails.comments = this.sarDetailsArray[i]['comment'];  
  308. inputDetails.startDate = this.sarDetailsArray[i]['startDate'];  
  309. inputDetails.endDate = this.sarDetailsArray[i]['endDate'];  
  310. inputDetails.submittedBy = this.loggedInUserEmail;  
  311. inputDetails.entitledId = this.sarDetailsArray[i].entitledId;  
  312. this.sarRequest.push(inputDetails);  
  313. }  
  314. }  
  315. }  
  316. this.service.postNewSARRequest(this.sarRequest).subscribe((res) => {  
  317. if (res) {  
  318. this.generatedInidentList = res['generatedIncidentList'];  
  319. const sarDetailRows = this.sarRequestForm.get('sarDetail') as FormArray;  
  320. const sarRows = sarDetailRows['controls'];  
  321. for (var i = 0; i < sarRows.length; i++) {  
  322. const alreadySubmitted = sarRows[i]['controls']['submitted'].value;  
  323. if (alreadySubmitted == false) {  
  324. const rowSubmitted = sarRows[i]['controls'];  
  325. for (var j = 0; j < this.generatedInidentList.length; j++) {  
  326. rowSubmitted['requestNum'].setValue(this.generatedInidentList[j]);  
  327. rowSubmitted['submitted'].setValue(true);  
  328. break;  
  329. }  
  330. }  
  331. }  
  332. this.showSpinner = false;  
  333. }  
  334. else {  
  335. this.showSpinner = false;  
  336. }  
  337. },  
  338. (error) => {  
  339. setTimeout(() => {  
  340. this.serviceUnavilable();  
  341. }, 500);  
  342. }  
  343. );  
  344. this.showSpinner = false;  
  345. }  
  346. UpdateSarSingleRequest(singleSARData, index) {  
  347. const arrayData = singleSARData['controls'];  
  348. const reqNum = arrayData['requestNum'].value;  
  349. var inputDetails = new SARDetails();  
  350. inputDetails.requestNumber = reqNum;  
  351. const companyDetails = arrayData['company'].value;  
  352. inputDetails.companyId = companyDetails['companyID'];  
  353. if (arrayData['userEmail'].value) {  
  354. inputDetails.emailAddress = arrayData['userEmail'].value;  
  355. }  
  356. else {  
  357. inputDetails.emailAddress = this.loggedInUserEmail;  
  358. }  
  359. inputDetails.firstName = arrayData['userFirstName'].value;  
  360. inputDetails.lastName = arrayData['userLastName'].value;  
  361. inputDetails.requestType = arrayData['requestType'].value;  
  362. inputDetails.userId = arrayData['userId'].value;  
  363. inputDetails.userType = arrayData['userType'].value;  
  364. inputDetails.comments = arrayData['comment'].value;  
  365. inputDetails.startDate = arrayData['startDate'].value;  
  366. inputDetails.endDate = arrayData['endDate'].value;  
  367. inputDetails.submittedBy = this.loggedInUserEmail;  
  368. inputDetails.entitledId = arrayData['entitledId'].value;  
  369. this.service.updateSARRequestDetail(inputDetails).subscribe((res) => {  
  370. if (res) {  
  371. }  
  372. else {  
  373. }  
  374. });  
  375. }  
  376. resetRequest() {  
  377. this.sarRequestForm.enable();  
  378. this.hideAfterSave = true;  
  379. }  
  380. copySARDetails(sarDetails) {  
  381. this.filterArray = sarDetails['sarDetail'];  
  382. this.filterArray = this.filterArray.filter(x => x.selected == true);  
  383. const control = this.sarRequestForm.get('sarDetail') as FormArray;  
  384. for (var i = 0; i < this.filterArray.length; i++) {  
  385. control.push(this.createCopyRow(this.filterArray[i]));  
  386. }  
  387. this.resetCopySelector();  
  388. }  
  389. resetCopySelector() {  
  390. const rows = this.sarRequestForm.get('sarDetail') as FormArray;  
  391. const controllsArray = rows['controls'];  
  392. for (var i = 1; i < controllsArray.length; i++) {  
  393. //controllsArray['selected'] = false;  
  394. }  
  395. }  
  396. createCopyRow(copyArrayValue): FormGroup {  
  397. return this.formBuilder.group({  
  398. selected: false,  
  399. requestNum: '',  
  400. company: copyArrayValue['company']['name'],  
  401. userEmail: copyArrayValue['userEmail'],  
  402. userFirstName: copyArrayValue['userFirstName'],  
  403. userLastName: copyArrayValue['userLastName'],  
  404. userId: copyArrayValue['userId'],  
  405. startDate: copyArrayValue['startDate'],  
  406. endDate: copyArrayValue['endDate'],  
  407. userType: copyArrayValue['userType'],  
  408. requestType: copyArrayValue['requestType'],  
  409. comment: copyArrayValue['comment'],  
  410. entitledId: copyArrayValue['entitledId'],  
  411. });  
  412. }  
  413. entitledIdSaveSARForm() {  
  414. const index = parseInt(this.selectedSARrowIndex);  
  415. this.entitiledStr = [];  
  416. const sarArray = <FormArray>this.sarRequestForm.get('sarDetail');  
  417. const sarArrayIndex = sarArray.at(index)['controls'];  
  418. const sarSecArray = sarArrayIndex['sarSecDetails'];  
  419. for (var i = 0; i < sarSecArray.length; i++) {  
  420. const controlArray = sarSecArray.at(i)['controls'];  
  421. const entitleId = controlArray['entitlement'].value;  
  422. this.entitiledStr.push(entitleId);  
  423. }  
  424. if (sarArrayIndex) {  
  425. const entitledStr = this.entitiledStr.join(',');  
  426. sarArrayIndex['entitledId'].setValue(entitledStr);  
  427. }  
  428. }  
  429. deleteSARRow(index) {  
  430. if (index > 0) {  
  431. const control = this.sarRequestForm.get('sarDetail') as FormArray;  
  432. control.removeAt(index);  
  433. }  
  434. }  
  435. getStatusMessage() {  
  436. this.service.getStatusMessages().subscribe((res) => {  
  437. if (res.length > 0) {  
  438. this.statusMessages = res;  
  439. const sucessArray = this.statusMessages.find(i => i.messageType == 'createincidentsuccess');  
  440. this.submitSucessMsg = sucessArray['messageText'];  
  441. const errorArray = this.statusMessages.find(i => i.messageType == 'createincidentfailure');  
  442. this.submitFailedMsg = errorArray['messageText'];  
  443. const serviceArray = this.statusMessages.find(i => i.messageType == 'serviceUnavilable');  
  444. this.serviceUnavilableMsg = serviceArray['messageText'];  
  445. }  
  446. else {  
  447. this.statusMessages = [];  
  448. setTimeout(() => {  
  449. this.serviceUnavilable();  
  450. }, 500);  
  451. }  
  452. }, (error) => {  
  453. this.statusMessages = [];  
  454. setTimeout(() => {  
  455. this.serviceUnavilable();  
  456. }, 500);  
  457. });  
  458. }  
  459. getCompanies() {  
  460. this.service.getcompanies().subscribe((res) => {  
  461. if (res.length > 0) {  
  462. this.companyList = res;  
  463. this.dataSourceCompany.data = this.companyList;  
  464. }  
  465. else {  
  466. this.companyList = [];  
  467. setTimeout(() => {  
  468. this.serviceUnavilable();  
  469. }, 500);  
  470. }  
  471. },  
  472. (error) => {  
  473. this.companyList = [];  
  474. setTimeout(() => {  
  475. this.serviceUnavilable();  
  476. }, 500);  
  477. }  
  478. );  
  479. }  
  480. getEnvironments() {  
  481. this.service.getEnvironments().subscribe((res) => {  
  482. if (res.length > 0) {  
  483. this.environmentList = res;  
  484. }  
  485. else {  
  486. this.environmentList = [];  
  487. setTimeout(() => {  
  488. this.serviceUnavilable();  
  489. }, 500);  
  490. }  
  491. },  
  492. (error) => {  
  493. this.environmentList = [];  
  494. setTimeout(() => {  
  495. this.serviceUnavilable();  
  496. }, 500);  
  497. }  
  498. );  
  499. }  
  500. getResources() {  
  501. this.service.getResources().subscribe((res) => {  
  502. if (res.length > 0) {  
  503. this.resourceList = res;  
  504. if (this.resourceList) {  
  505. for (var i = 0; i < this.resourceList.length; i++) {  
  506. const resType = this.resourceList[i].resourceType;  
  507. this.resourceType.push(resType)  
  508. }  
  509. }  
  510. }  
  511. else {  
  512. this.resourceList = [];  
  513. setTimeout(() => {  
  514. this.serviceUnavilable();  
  515. }, 500);  
  516. }  
  517. },  
  518. (error) => {  
  519. this.resourceList = [];  
  520. setTimeout(() => {  
  521. this.serviceUnavilable();  
  522. }, 500);  
  523. }  
  524. );  
  525. }  
  526. getResourceEntitlements() {  
  527. this.service.getResourceEntitlements().subscribe((res) => {  
  528. if (res.length > 0) {  
  529. this.resourceEntitlementsList = res;  
  530. }  
  531. else {  
  532. this.resourceEntitlementsList = [];  
  533. setTimeout(() => {  
  534. this.serviceUnavilable();  
  535. }, 500);  
  536. }  
  537. },  
  538. (error) => {  
  539. this.resourceEntitlementsList = [];  
  540. setTimeout(() => {  
  541. this.serviceUnavilable();  
  542. }, 500);  
  543. }  
  544. );  
  545. }  
  546. onEnvSelect(EnvSelected) {  
  547. }  
  548. onUserTypeSelect(UserTypeSelected) {  
  549. }  
  550. onResourceSelect(ResourceSelected) {  
  551. }  
  552. onEntitiledSelect(EntitiledSelected) {  
  553. }  
  554. serviceUnavilable() {  
  555. this.toastr.error(this.serviceUnavilableMsg, '', {  
  556. timeOut: 1000  
  557. });  
  558. }  
  559. getSARApproverDetails() {  
  560. this.sarApproverDetailsArray = [];  
  561. this.newSARApproverDetail = [];  
  562. this.service.getSARApproverDetails(this.selectedCompany).subscribe((res) => {  
  563. if (res.length > 0) {  
  564. for (var i = 0; i < res.length; i++) {  
  565. const tier = res[i].approvalTier;  
  566. const user = res[i].userid;  
  567. this.newSARApproverDetail.push({ approvalTier: tier, userid: user });  
  568. }  
  569. this.sarApproverDetailsArray = [];  
  570. this.sarApproverDetailsArray = this.newSARApproverDetail;  
  571. this.showDetailsTable = true;  
  572. }  
  573. else {  
  574. this.showDetailsTable = false;  
  575. }  
  576. },  
  577. (error) => {  
  578. setTimeout(() => {  
  579. this.serviceUnavilable();  
  580. }, 500);  
  581. }  
  582. );  
  583. }  
  584. }