sitebuilder
This commit is contained in:
		
							parent
							
								
									0801abe596
								
							
						
					
					
						commit
						6b70902d46
					
				@ -0,0 +1,52 @@
 | 
				
			|||||||
 | 
					.horizontal {
 | 
				
			||||||
 | 
					  width: 25%;
 | 
				
			||||||
 | 
					  padding: 5px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.horizontal1 {
 | 
				
			||||||
 | 
					  width: 50%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.middle {
 | 
				
			||||||
 | 
					  width: 33%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.middle1 {
 | 
				
			||||||
 | 
					  width: 75%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.full {
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					input[type=text], [type=date], select {
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					  padding: 12px 20px;
 | 
				
			||||||
 | 
					  margin: 8px 0;
 | 
				
			||||||
 | 
					  display: inline-block;
 | 
				
			||||||
 | 
					  border: 1px solid #ccc;
 | 
				
			||||||
 | 
					  border-radius: 4px;
 | 
				
			||||||
 | 
					  box-sizing: border-box;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.required-field {
 | 
				
			||||||
 | 
					  color: red;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.center {
 | 
				
			||||||
 | 
					  text-align: center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.center {
 | 
				
			||||||
 | 
					  color: blue;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media (max-width: 600px) {
 | 
				
			||||||
 | 
					  .horizontal, .middle, .horizontal1, .middle1 {
 | 
				
			||||||
 | 
					    width: 100%;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}/*# sourceMappingURL=editstepper.component.css.map */
 | 
				
			||||||
@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					{"version":3,"sources":["editstepper.component.scss","editstepper.component.css"],"names":[],"mappings":"AAAA;EACE,UAAA;EACA,YAAA;ACCF;;ADCA;EACE,UAAA;EACA,aAAA;ACEF;;ADAA;EACE,UAAA;EACA,aAAA;ACGF;;ADDA;EACE,UAAA;EACA,aAAA;ACIF;;ADDA;EACE,WAAA;EACA,aAAA;ACIF;;ADDA;EACE,WAAA;EACA,kBAAA;EACA,aAAA;EACA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACIF;;ADFA;EACE,UAAA;ACKF;;ADHA;EACE,kBAAA;ACMF;;ADHA;EACE,WAAA;ACMF;;ADJA;EACA;IACA,WAAA;ECOE;AACF","file":"editstepper.component.css"}
 | 
				
			||||||
@ -0,0 +1,399 @@
 | 
				
			|||||||
 | 
					<ol class="breadcrumb breadcrumb-arrow font-trirong">
 | 
				
			||||||
 | 
					  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
 | 
				
			||||||
 | 
					  <li><a href="javascript://">stepper</a></li>
 | 
				
			||||||
 | 
					</ol>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div class="button-bar">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  <span class="spacer"></span>
 | 
				
			||||||
 | 
					  <button class="btn btn-sm btn-primary" (click)="reset()">Reset</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  <button class="btn btn-sm btn-primary" (click)="changeToHorizonTal()"
 | 
				
			||||||
 | 
					    *ngIf="layout.direction === 'vertical'">HorizonTal Layout</button>
 | 
				
			||||||
 | 
					  <button class="btn btn-sm btn-primary" (click)="changeToVertical()" *ngIf="layout.direction === 'horizontal'">Vertical
 | 
				
			||||||
 | 
					    Layout</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div class="clr-row">
 | 
				
			||||||
 | 
					  <div [class]="layout.block1">
 | 
				
			||||||
 | 
					    <div class="card">
 | 
				
			||||||
 | 
					      <div class="card-header">
 | 
				
			||||||
 | 
					        <h3 style="text-align: center;"> Customer Information</h3>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      <div class=" card-block container">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <clr-timeline [clrLayout]="layout.direction">
 | 
				
			||||||
 | 
					          <clr-timeline-step [clrState]="timelineStyle.step0.state">
 | 
				
			||||||
 | 
					            <clr-timeline-step-header>Step 0</clr-timeline-step-header>
 | 
				
			||||||
 | 
					            <clr-timeline-step-title> <span *ngIf="!appToUpdate">Application</span><span *ngIf="appToUpdate"> Update
 | 
				
			||||||
 | 
					                Datagrid</span> </clr-timeline-step-title>
 | 
				
			||||||
 | 
					            <clr-timeline-step-description> <span>Create/Add Customer Information<br> Information Of
 | 
				
			||||||
 | 
					                Customer</span></clr-timeline-step-description>
 | 
				
			||||||
 | 
					          </clr-timeline-step>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <clr-timeline-step [clrState]="timelineStyle.step1.state">
 | 
				
			||||||
 | 
					            <clr-timeline-step-header>Step 1</clr-timeline-step-header>
 | 
				
			||||||
 | 
					            <clr-timeline-step-title>Document Upload</clr-timeline-step-title>
 | 
				
			||||||
 | 
					            <clr-timeline-step-description> <span>Upload Your <br>
 | 
				
			||||||
 | 
					                Document.</span></clr-timeline-step-description>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          </clr-timeline-step>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <clr-timeline-step [clrState]="timelineStyle.step2.state">
 | 
				
			||||||
 | 
					            <clr-timeline-step-header>Step 2</clr-timeline-step-header>
 | 
				
			||||||
 | 
					            <clr-timeline-step-title>Review And <br>Confirmation</clr-timeline-step-title>
 | 
				
			||||||
 | 
					            <clr-timeline-step-description>
 | 
				
			||||||
 | 
					              Finish .
 | 
				
			||||||
 | 
					            </clr-timeline-step-description>
 | 
				
			||||||
 | 
					          </clr-timeline-step>
 | 
				
			||||||
 | 
					        </clr-timeline>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
 | 
					  <div [class]="layout.block2">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!--STEP 0-->
 | 
				
			||||||
 | 
					    <div class="card" *ngIf="timelineStyle.step0.open">
 | 
				
			||||||
 | 
					      <div class="card-header">
 | 
				
			||||||
 | 
					        <h3 style="text-align: center;" *ngIf="!appToUpdate">Customer Information Form</h3>
 | 
				
			||||||
 | 
					        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{entryForm.name}}</h3>
 | 
				
			||||||
 | 
					        <div class="container">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <br />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <!-- entry form-->
 | 
				
			||||||
 | 
					          <!-- <form #contactForm="ngForm" (ngSubmit)="onSave()"> -->
 | 
				
			||||||
 | 
					          <form [formGroup]="entryForm">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="container">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              <div class="clr-row">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Name</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="text" formControlName="name" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Description</label>
 | 
				
			||||||
 | 
					                  <textarea cols="10" rows="2" formControlName="description" placeholder="Textarea">  </textarea>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Active</label>
 | 
				
			||||||
 | 
					                  <input type="checkbox" formControlName="active" clrToggle />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Visa Entry Type</label>
 | 
				
			||||||
 | 
					                  <select formControlName="visa_entry_type">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Visa Entry Type</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectvisa_entry_type" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Visa Duration</label>
 | 
				
			||||||
 | 
					                  <select formControlName="visa_duration">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Visa Duration</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectvisa_duration" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Visa Processing</label>
 | 
				
			||||||
 | 
					                  <select formControlName="visa_processing">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Visa Processing</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectvisa_processing" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Travel start date</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="date" formControlName="travel_start_date" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Travel end date</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="date" formControlName="travel_end_date" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> passport Number</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="number" formControlName="passport_number" />
 | 
				
			||||||
 | 
					                  <div *ngIf="submitted && entryForm.controls.passport_number.errors" class="error_mess">
 | 
				
			||||||
 | 
					                    <div *ngIf="submitted && entryForm.controls.passport_number.errors.required" class="error_mess">
 | 
				
			||||||
 | 
					                      *This field
 | 
				
			||||||
 | 
					                      is Required</div>
 | 
				
			||||||
 | 
					                  </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Passport issue date</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="date" formControlName="passport_issue_date" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Passport expiry date</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="date" formControlName="passport_expiry_date" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Email</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="email" formControlName="email"
 | 
				
			||||||
 | 
					                    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
 | 
				
			||||||
 | 
					                  <div *ngIf="entryForm.controls['email'].errors" class="error_mess">
 | 
				
			||||||
 | 
					                    <div *ngIf="entryForm.controls['email'].hasError('pattern')" class="error_mess">* Email must be a
 | 
				
			||||||
 | 
					                      valid
 | 
				
			||||||
 | 
					                      email address
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                  </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Phone Number</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="text" formControlName="phone_number"
 | 
				
			||||||
 | 
					                    pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$" />
 | 
				
			||||||
 | 
					                  <div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="error_mess">
 | 
				
			||||||
 | 
					                    <div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')" class="error_mess">
 | 
				
			||||||
 | 
					                      * Please
 | 
				
			||||||
 | 
					                      Follow your pattern,+91 Enter 10 digit Mobile Number.
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                  </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Birth Place</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="text" formControlName="birth_place" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Date of Birth</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="date" formControlName="date_of_birth" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Gender</label>
 | 
				
			||||||
 | 
					                  <select formControlName="gender">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Gender</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectgender" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Profession</label>
 | 
				
			||||||
 | 
					                  <input class="clr-input" type="text" formControlName="profession" />
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <!-- currency field start -->
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Visa cost</label>
 | 
				
			||||||
 | 
					                  <input type="number" class="clr-input" formControlName="visa_cost"
 | 
				
			||||||
 | 
					                    [value]="entryForm.value.visa_cost | number:'1.2-2' | removeCommas">
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <!-- currency field end -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Referrer</label>
 | 
				
			||||||
 | 
					                  <select formControlName="referrer">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Referrer</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectreferrer" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Nationality</label>
 | 
				
			||||||
 | 
					                  <select formControlName="nationality">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Nationality</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectnationality" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Supplier</label>
 | 
				
			||||||
 | 
					                  <select formControlName="supplier">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Supplier</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectsupplier" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <div class="clr-col-sm-12">
 | 
				
			||||||
 | 
					                  <label> Agent</label>
 | 
				
			||||||
 | 
					                  <select formControlName="agent">
 | 
				
			||||||
 | 
					                    <option [value]="null">Choose Agent</option>
 | 
				
			||||||
 | 
					                    <option *ngFor="let item of selectagent" [value]="item.id">{{item.name}}</option>
 | 
				
			||||||
 | 
					                  </select>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              <div class="clr-row">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              </div>
 | 
				
			||||||
 | 
					              <!-- end row -->
 | 
				
			||||||
 | 
					              <br>
 | 
				
			||||||
 | 
					              <div class="button">
 | 
				
			||||||
 | 
					                <button type="submit" class="btn btn-primary" (click)="onSave()">Submit</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <button type="button" class="btn  btn-primary"
 | 
				
			||||||
 | 
					                  (click)="this.timelineStyle.step0 ={ state: 'success', open: false };this.timelineStyle.step1 ={ state: 'current', open: true };  this.current()">Complete</button>
 | 
				
			||||||
 | 
					                <button type="button" class="btn btn-primary"
 | 
				
			||||||
 | 
					                  (click)=" this.timelineStyle.step0 ={state:'current',open:false};this.timelineStyle.step1 ={state:'not-started',open:true}">Next</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					          </form>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!--STEP 1-->
 | 
				
			||||||
 | 
					    <div class="card" *ngIf="timelineStyle.step1.open">
 | 
				
			||||||
 | 
					      <div class="card-header">
 | 
				
			||||||
 | 
					        <h3 style="text-align: center;" *ngIf="!appToUpdate">File Upload</h3>
 | 
				
			||||||
 | 
					        <div class="container">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <!-- File upload form -->
 | 
				
			||||||
 | 
					          <form (ngSubmit)="onFileUpload()" #uploadForm="ngForm" enctype="multipart/form-data">
 | 
				
			||||||
 | 
					            <!-- <div class="clr-row">
 | 
				
			||||||
 | 
					              <div class="clr-col-12">
 | 
				
			||||||
 | 
					                <label for="fileInput">Choose File<span class="required-field">*</span></label>
 | 
				
			||||||
 | 
					                <input type="file" id="fileInput" (change)="onFileSelected($event)" required class="form-control">
 | 
				
			||||||
 | 
					              </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="clr-row" *ngIf="selectedFile">
 | 
				
			||||||
 | 
					              <div class="clr-col-12 mt-2">
 | 
				
			||||||
 | 
					                <strong>Selected File:</strong> {{ selectedFile.name }}
 | 
				
			||||||
 | 
					              </div>
 | 
				
			||||||
 | 
					            </div> -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <h6> List of Uploaded file</h6>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="clr-row" style="margin-top: 10px;">
 | 
				
			||||||
 | 
					              <table class="table">
 | 
				
			||||||
 | 
					                <thead>
 | 
				
			||||||
 | 
					                  <tr>
 | 
				
			||||||
 | 
					                    <th>No</th>
 | 
				
			||||||
 | 
					                    <th> File</th>
 | 
				
			||||||
 | 
					                    <th>File Name</th>
 | 
				
			||||||
 | 
					                    <th>Preview</th>
 | 
				
			||||||
 | 
					                    <th>Cancel</th>
 | 
				
			||||||
 | 
					                  </tr>
 | 
				
			||||||
 | 
					                </thead>
 | 
				
			||||||
 | 
					                <tbody>
 | 
				
			||||||
 | 
					                  <tr *ngFor="let attach of FileDatafileupload_field; let i=index">
 | 
				
			||||||
 | 
					                    <td style="width: 70px;"><input type="text" class="clr-input" value={{i+1}} [readonly]="true"> </td>
 | 
				
			||||||
 | 
					                    <td><input type="file" (change)="onFileChangedfileupload_field($event, i)"
 | 
				
			||||||
 | 
					                        accept="application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /><!--accept=".pdf,.doc,.docx,.jpg,.msg"-->
 | 
				
			||||||
 | 
					                    </td>
 | 
				
			||||||
 | 
					                    <td>{{attach.uploadedfile_name}}</td>
 | 
				
			||||||
 | 
					                    <td> <img [src]="attach.filePreview" alt="File Preview" [ngModelOptions]="{standalone: true}"
 | 
				
			||||||
 | 
					                        name="filePreview" width="100px" height="100px"></td>
 | 
				
			||||||
 | 
					                    <td>
 | 
				
			||||||
 | 
					                      <a (click)="deleteRowfileupload_field(i)">
 | 
				
			||||||
 | 
					                        <clr-icon shape="trash" class="is-error"></clr-icon>
 | 
				
			||||||
 | 
					                      </a>
 | 
				
			||||||
 | 
					                    </td>
 | 
				
			||||||
 | 
					                  </tr>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                </tbody>
 | 
				
			||||||
 | 
					                <button type="button" class="btn btn-primary button1" style="margin-left: 20px;"
 | 
				
			||||||
 | 
					                  (click)="onAddLinesfileupload_field()">
 | 
				
			||||||
 | 
					                  <clr-icon shape="plus"></clr-icon>
 | 
				
			||||||
 | 
					                </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              </table>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <br>
 | 
				
			||||||
 | 
					            <div class="button">
 | 
				
			||||||
 | 
					              <button type="submit" class="btn btn-success" [disabled]="!selectedfileupload_field">Upload</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              <button type="button" class="btn btn-primary"
 | 
				
			||||||
 | 
					                (click)="timelineStyle.step1 = { state: 'success', open: false }; timelineStyle.step2 = { state: 'current', open: true }">Complete</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					              <button class="btn btn-primary-outline"
 | 
				
			||||||
 | 
					                (click)="timelineStyle.step0 = { state: 'current', open: true }; timelineStyle.step1 = { state: 'not-started', open: false }">Back</button>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					          </form>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!--STEP 2-->
 | 
				
			||||||
 | 
					    <div class="card" *ngIf="timelineStyle.step2.open">
 | 
				
			||||||
 | 
					      <div class="card-header">
 | 
				
			||||||
 | 
					        <h3 style="text-align: center;" *ngIf="!appToUpdate">Customer Information Review And Confirmation</h3>
 | 
				
			||||||
 | 
					        <div class="container">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <!-- Customer Info -->
 | 
				
			||||||
 | 
					          <div class="clr-row mb-3">
 | 
				
			||||||
 | 
					            <div class="clr-col-12">
 | 
				
			||||||
 | 
					              <h5>Customer Details:</h5>
 | 
				
			||||||
 | 
					              <p><strong>Name:</strong> {{ rowSelected.name }}</p>
 | 
				
			||||||
 | 
					              <p><strong>Phone:</strong> {{ rowSelected.phone }}</p>
 | 
				
			||||||
 | 
					              <p><strong>Email:</strong> {{ rowSelected.email }}</p>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <!-- Uploaded File -->
 | 
				
			||||||
 | 
					          <div class="clr-row mb-3" *ngIf="uploadedFileName">
 | 
				
			||||||
 | 
					            <div class="clr-col-12">
 | 
				
			||||||
 | 
					              <h5>Uploaded Document:</h5>
 | 
				
			||||||
 | 
					              <p>{{ uploadedFileName }}</p>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          <div class="button">
 | 
				
			||||||
 | 
					            <button class="btn btn-primary-outline"
 | 
				
			||||||
 | 
					              (click)="timelineStyle.step1 = { state: 'current', open: true }; timelineStyle.step2 = { state: 'not-started', open: false }">Back</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <button class="btn btn-primary"
 | 
				
			||||||
 | 
					              (click)="timelineStyle.step2 = { state: 'success', open: false }; current(); alert('Process Finished Successfully!')">Finish</button>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
@ -0,0 +1,46 @@
 | 
				
			|||||||
 | 
					.horizontal{
 | 
				
			||||||
 | 
					  width: 25%;
 | 
				
			||||||
 | 
					  padding: 5px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.horizontal1{
 | 
				
			||||||
 | 
					  width: 50%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.middle{
 | 
				
			||||||
 | 
					  width: 33%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.middle1{
 | 
				
			||||||
 | 
					  width: 75%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.full{
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					  padding: 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					input[type=text],[type=date], select {
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					  padding: 12px 20px;
 | 
				
			||||||
 | 
					  margin: 8px 0;
 | 
				
			||||||
 | 
					  display: inline-block;
 | 
				
			||||||
 | 
					  border: 1px solid #ccc;
 | 
				
			||||||
 | 
					  border-radius: 4px;
 | 
				
			||||||
 | 
					  box-sizing: border-box;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.required-field{
 | 
				
			||||||
 | 
					  color: red;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.center {
 | 
				
			||||||
 | 
					  text-align: center;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.center{
 | 
				
			||||||
 | 
					  color: blue;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					@media (max-width: 600px){
 | 
				
			||||||
 | 
					.horizontal,.middle,.horizontal1,.middle1 {
 | 
				
			||||||
 | 
					width: 100%;
 | 
				
			||||||
 | 
					}}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -0,0 +1,25 @@
 | 
				
			|||||||
 | 
					import { ComponentFixture, TestBed } from '@angular/core/testing';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import { EditstepperComponent } from './editstepper.component';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					describe('EditstepperComponent', () => {
 | 
				
			||||||
 | 
					  let component: EditstepperComponent;
 | 
				
			||||||
 | 
					  let fixture: ComponentFixture<EditstepperComponent>;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  beforeEach(async () => {
 | 
				
			||||||
 | 
					    await TestBed.configureTestingModule({
 | 
				
			||||||
 | 
					      declarations: [ EditstepperComponent ]
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					    .compileComponents();
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  beforeEach(() => {
 | 
				
			||||||
 | 
					    fixture = TestBed.createComponent(EditstepperComponent);
 | 
				
			||||||
 | 
					    component = fixture.componentInstance;
 | 
				
			||||||
 | 
					    fixture.detectChanges();
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  it('should create', () => {
 | 
				
			||||||
 | 
					    expect(component).toBeTruthy();
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
@ -0,0 +1,369 @@
 | 
				
			|||||||
 | 
					import { Component, OnInit } from '@angular/core';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import { ToastrService } from 'ngx-toastr';
 | 
				
			||||||
 | 
					import { ActivatedRoute, Router } from '@angular/router';
 | 
				
			||||||
 | 
					import { College } from 'src/app/models/fnd/play';
 | 
				
			||||||
 | 
					import { student } from 'src/app/models/fnd/Studentadd';
 | 
				
			||||||
 | 
					import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 | 
				
			||||||
 | 
					import { ValidationError } from 'src/app/models/fnd/ValidationError';
 | 
				
			||||||
 | 
					import { Visa_applicationservice } from '../Visa_application.service';
 | 
				
			||||||
 | 
					@Component({
 | 
				
			||||||
 | 
					  selector: 'app-editstepper',
 | 
				
			||||||
 | 
					  templateUrl: './editstepper.component.html',
 | 
				
			||||||
 | 
					  styleUrls: ['./editstepper.component.scss']
 | 
				
			||||||
 | 
					})
 | 
				
			||||||
 | 
					export class EditstepperComponent implements OnInit {
 | 
				
			||||||
 | 
					  updated = false;
 | 
				
			||||||
 | 
					  // college: College;
 | 
				
			||||||
 | 
					  stringJson: any;
 | 
				
			||||||
 | 
					  customerId: string = '';
 | 
				
			||||||
 | 
					  selectedFile!: File;
 | 
				
			||||||
 | 
					  fileName = '';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  id: number;
 | 
				
			||||||
 | 
					  errorFields: ValidationError[] = [];
 | 
				
			||||||
 | 
					  appToUpdate: College = null;
 | 
				
			||||||
 | 
					  trained = false;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  json: string = "";
 | 
				
			||||||
 | 
					  luisApp =
 | 
				
			||||||
 | 
					    {
 | 
				
			||||||
 | 
					      name: '',
 | 
				
			||||||
 | 
					      created: 1,
 | 
				
			||||||
 | 
					      trained: 1,
 | 
				
			||||||
 | 
					      tested: 1,
 | 
				
			||||||
 | 
					      updated: 1,
 | 
				
			||||||
 | 
					      published: 1,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  // Layout direction changing
 | 
				
			||||||
 | 
					  layout = {
 | 
				
			||||||
 | 
					    direction: "vertical",
 | 
				
			||||||
 | 
					    block1: "clr-col-lg-3 clr-col-12 ",
 | 
				
			||||||
 | 
					    block2: "clr-col-lg-9 clr-col-12 ",
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  timelineStyle = {
 | 
				
			||||||
 | 
					    step0: { state: "current", open: true, failed: false },
 | 
				
			||||||
 | 
					    step1: { state: "not-started", open: false, failed: false },
 | 
				
			||||||
 | 
					    step2: { state: "not-started", open: false, failed: false },
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  public entryForm: FormGroup;
 | 
				
			||||||
 | 
					  submitted = false;
 | 
				
			||||||
 | 
					  rowSelected: any = {};
 | 
				
			||||||
 | 
					  modalcomplete = false;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  constructor(private mainService: Visa_applicationservice,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    private _fb: FormBuilder,
 | 
				
			||||||
 | 
					    private router: Router,
 | 
				
			||||||
 | 
					    private route: ActivatedRoute,
 | 
				
			||||||
 | 
					    private toastr: ToastrService,) { }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  ngOnInit(): void {
 | 
				
			||||||
 | 
					    // this.college = new College();
 | 
				
			||||||
 | 
					    this.id = this.route.snapshot.params["id"];
 | 
				
			||||||
 | 
					    console.log("update with id = ", this.id);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    this.entryForm = this._fb.group({
 | 
				
			||||||
 | 
					      name: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      description: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      active: [false],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      visa_entry_type: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      visa_duration: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      visa_processing: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      travel_start_date: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      travel_end_date: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      passport_number: [null, [Validators.required]],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      passport_issue_date: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      passport_expiry_date: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      email: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      phone_number: ['+91'],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      birth_place: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      date_of_birth: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      gender: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      profession: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      visa_cost: [null, { updateOn: 'blur' }],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      referrer: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      nationality: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      supplier: [null],
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      agent: [null],
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  // Change to Horizontal Layout
 | 
				
			||||||
 | 
					  changeToHorizonTal() {
 | 
				
			||||||
 | 
					    this.layout = {
 | 
				
			||||||
 | 
					      direction: "horizontal",
 | 
				
			||||||
 | 
					      block1: "clr-col-lg-12 clr-col-12 height container",
 | 
				
			||||||
 | 
					      block2: "clr-col-lg-12 clr-col-12 container",
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  // Change to Vertical Layout
 | 
				
			||||||
 | 
					  changeToVertical() {
 | 
				
			||||||
 | 
					    this.layout = {
 | 
				
			||||||
 | 
					      direction: "vertical",
 | 
				
			||||||
 | 
					      block1: "clr-col-lg-3 clr-col-12 ",
 | 
				
			||||||
 | 
					      block2: "clr-col-lg-9 clr-col-12 ",
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  getById(id: number) {
 | 
				
			||||||
 | 
					    // this.mainService.getBywfId(id).subscribe(
 | 
				
			||||||
 | 
					    //   (data) => {
 | 
				
			||||||
 | 
					    //     this.college = data;
 | 
				
			||||||
 | 
					    //   },
 | 
				
			||||||
 | 
					    //   (err) => {
 | 
				
			||||||
 | 
					    //     console.log(err);
 | 
				
			||||||
 | 
					    //   }
 | 
				
			||||||
 | 
					    // );
 | 
				
			||||||
 | 
					    // this.currentservice.getById(id).subscribe(
 | 
				
			||||||
 | 
					    //   (data) => {
 | 
				
			||||||
 | 
					    //     this.student = data;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    //     var current = JSON.parse(data.current_json);
 | 
				
			||||||
 | 
					    //     this.timelineStyle = current;
 | 
				
			||||||
 | 
					    //     console.log("data", data);
 | 
				
			||||||
 | 
					    //   },
 | 
				
			||||||
 | 
					    //   (err) => {
 | 
				
			||||||
 | 
					    //     console.log(err);
 | 
				
			||||||
 | 
					    //   }
 | 
				
			||||||
 | 
					    // );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  onSave() {
 | 
				
			||||||
 | 
					    console.log('Form Submitted:', this.entryForm.value);
 | 
				
			||||||
 | 
					    this.submitted = true;
 | 
				
			||||||
 | 
					    if (this.entryForm.invalid) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      console.log('invalid form ..');
 | 
				
			||||||
 | 
					      // Log all form errors
 | 
				
			||||||
 | 
					      Object.keys(this.entryForm.controls).forEach(field => {
 | 
				
			||||||
 | 
					        const control = this.entryForm.get(field);
 | 
				
			||||||
 | 
					        if (control && control.invalid) {
 | 
				
			||||||
 | 
					          console.log(`Error in field: ${field}`, control.errors);
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      return;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    this.onCreate();
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  onCreate() {
 | 
				
			||||||
 | 
					    this.mainService.create(this.entryForm.value).subscribe(
 | 
				
			||||||
 | 
					      (data) => {
 | 
				
			||||||
 | 
					        console.log('adding data ', data);
 | 
				
			||||||
 | 
					        this.customerId = data.id;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        console.log('id is  ', this.customerId);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        if (data || data.status >= 200 && data.status <= 299) {
 | 
				
			||||||
 | 
					          this.toastr.success("Added Successfully");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        setTimeout(() => {
 | 
				
			||||||
 | 
					          this.ngOnInit();
 | 
				
			||||||
 | 
					        }, 500);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      }, (error) => {
 | 
				
			||||||
 | 
					        console.log(error);
 | 
				
			||||||
 | 
					        if (error.status >= 200 && error.status <= 299) {
 | 
				
			||||||
 | 
					          // this.toastr.success("Added Succesfully");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        if (error.status >= 400 && error.status <= 499) {
 | 
				
			||||||
 | 
					          this.toastr.error("Not Added");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        if (error.status >= 500 && error.status <= 599) {
 | 
				
			||||||
 | 
					          this.toastr.error("Not Added");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      });
 | 
				
			||||||
 | 
					    setTimeout(() => {
 | 
				
			||||||
 | 
					      this.ngOnInit();
 | 
				
			||||||
 | 
					    }, 500);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  onnext() {
 | 
				
			||||||
 | 
					    this.router.navigate(["../../main/workflow"], { relativeTo: this.route });
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  reset() {
 | 
				
			||||||
 | 
					    this.json = "";
 | 
				
			||||||
 | 
					    this.luisApp =
 | 
				
			||||||
 | 
					    {
 | 
				
			||||||
 | 
					      name: '',
 | 
				
			||||||
 | 
					      trained: 1,
 | 
				
			||||||
 | 
					      tested: 1,
 | 
				
			||||||
 | 
					      updated: 1,
 | 
				
			||||||
 | 
					      published: 1,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      created: 1,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    this.timelineStyle = {
 | 
				
			||||||
 | 
					      step0: { state: "current", open: true, failed: false },
 | 
				
			||||||
 | 
					      step1: { state: "not-started", open: false, failed: false },
 | 
				
			||||||
 | 
					      step2: { state: "not-started", open: false, failed: false },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  current() {
 | 
				
			||||||
 | 
					    console.log(this.timelineStyle)
 | 
				
			||||||
 | 
					    this.stringJson = JSON.stringify(this.timelineStyle);
 | 
				
			||||||
 | 
					    console.log("String json object :", this.stringJson);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // this.mainService.update(this.id, this.college, this.stringJson).subscribe(
 | 
				
			||||||
 | 
					    //   (data) => {
 | 
				
			||||||
 | 
					    //     console.log(data);
 | 
				
			||||||
 | 
					    //   },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // );
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  onFileUpload(): void {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    for (let i = 0; i < this.selectedfileupload_field.length; i++) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      this.mainService.uploadDocument(this.customerId, 'visa order', this.selectedfileupload_field[i]).subscribe(uploaddata => {
 | 
				
			||||||
 | 
					        console.log(uploaddata);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        console.log('id is  ', this.customerId);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        if (uploaddata || uploaddata.status >= 200 && uploaddata.status <= 299) {
 | 
				
			||||||
 | 
					          // alert('File uploaded successfully!');
 | 
				
			||||||
 | 
					          this.toastr.success("File uploaded successfully!");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        setTimeout(() => {
 | 
				
			||||||
 | 
					          this.ngOnInit();
 | 
				
			||||||
 | 
					        }, 500);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      }, (error) => {
 | 
				
			||||||
 | 
					        console.log(error);
 | 
				
			||||||
 | 
					        if (error.status >= 200 && error.status <= 299) {
 | 
				
			||||||
 | 
					          // this.toastr.success("Added Succesfully");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        if (error.status >= 400 && error.status <= 499) {
 | 
				
			||||||
 | 
					          this.toastr.error("Not Added");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        if (error.status >= 500 && error.status <= 599) {
 | 
				
			||||||
 | 
					          this.toastr.error("Not Added");
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      )
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    this.selectedFile = null;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  filePreviewfileupload_field: string | ArrayBuffer | null = null;
 | 
				
			||||||
 | 
					  FileDatafileupload_field: { uploadedfile_name?: any, filePreview: string | ArrayBuffer | null }[] = []; // Initialize the array
 | 
				
			||||||
 | 
					  selectedfileupload_field: File[] = [];
 | 
				
			||||||
 | 
					  public onFileChangedfileupload_field(event, index) {
 | 
				
			||||||
 | 
					    const files = event.target.files;
 | 
				
			||||||
 | 
					    for (let i = 0; i < files.length; i++) {
 | 
				
			||||||
 | 
					      const file = files[i];
 | 
				
			||||||
 | 
					      this.FileDatafileupload_field[index].uploadedfile_name = files[i].name;
 | 
				
			||||||
 | 
					      this.selectedfileupload_field.push(files[i]);
 | 
				
			||||||
 | 
					      if (file.type.startsWith('file/')) {
 | 
				
			||||||
 | 
					        const reader = new FileReader();
 | 
				
			||||||
 | 
					        reader.onload = (e) => {
 | 
				
			||||||
 | 
					          // Set the file preview source
 | 
				
			||||||
 | 
					          const filePreview = e.target?.result as string;
 | 
				
			||||||
 | 
					          this.FileDatafileupload_field[index] = {
 | 
				
			||||||
 | 
					            ...this.FileDatafileupload_field[index], // Preserve existing properties
 | 
				
			||||||
 | 
					            filePreview: filePreview // Update only the filePreview property
 | 
				
			||||||
 | 
					          };
 | 
				
			||||||
 | 
					        };
 | 
				
			||||||
 | 
					        reader.readAsDataURL(file);
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  onAddLinesfileupload_field() {
 | 
				
			||||||
 | 
					    this.FileDatafileupload_field.push({
 | 
				
			||||||
 | 
					      uploadedfile_name: "",
 | 
				
			||||||
 | 
					      filePreview: "",
 | 
				
			||||||
 | 
					      // f3: "",
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  deleteRowfileupload_field(index, id) {
 | 
				
			||||||
 | 
					    this.FileDatafileupload_field.splice(index, 1);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    if (id) {
 | 
				
			||||||
 | 
					      this.mainService.uploadfiledeletefileupload_field(id).subscribe(data => {
 | 
				
			||||||
 | 
					        console.log(data);
 | 
				
			||||||
 | 
					      })
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  isValidemail(email: string): boolean {
 | 
				
			||||||
 | 
					    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 | 
				
			||||||
 | 
					    return emailPattern.test(email);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  isValidPhone_number(phone: string): boolean {
 | 
				
			||||||
 | 
					    const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
 | 
				
			||||||
 | 
					    return phonePattern.test(phone);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  updategender(gender: string): void {
 | 
				
			||||||
 | 
					    this.entryForm.get('gender').setValue(gender);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  updategenderEdit(gender: string): void { this.rowSelected.gender = gender }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  //currency  field start
 | 
				
			||||||
 | 
					  formatCurrencyvisa_cost() {
 | 
				
			||||||
 | 
					    // Format the currency with two decimal places    
 | 
				
			||||||
 | 
					    this.rowSelected.visa_cost = Number(this.rowSelected.visa_cost).toFixed(2);
 | 
				
			||||||
 | 
					    // Remove commas from the formatted currency   
 | 
				
			||||||
 | 
					    this.rowSelected.visa_cost = this.rowSelected.visa_cost?.replace(/,/g, '');
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  //currency  field end
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -0,0 +1,9 @@
 | 
				
			|||||||
 | 
					export class College {
 | 
				
			||||||
 | 
					  public studentid: number;
 | 
				
			||||||
 | 
					  public wf_instance_id:number;
 | 
				
			||||||
 | 
					  public studentname: string;
 | 
				
			||||||
 | 
					  public department: string;
 | 
				
			||||||
 | 
					  public joiningDate: string;
 | 
				
			||||||
 | 
					  public phone: number;
 | 
				
			||||||
 | 
					 public emailId:string;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -12,7 +12,10 @@
 | 
				
			|||||||
          shape="bars"></clr-icon>
 | 
					          shape="bars"></clr-icon>
 | 
				
			||||||
      </button>
 | 
					      </button>
 | 
				
			||||||
      <!-- button -->
 | 
					      <!-- button -->
 | 
				
			||||||
      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
 | 
					      <!-- <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
 | 
				
			||||||
 | 
					        <clr-icon shape="plus"></clr-icon>ADD
 | 
				
			||||||
 | 
					      </button> -->
 | 
				
			||||||
 | 
					      <button id="add" class="btn btn-primary" (click)="goToAdd()">
 | 
				
			||||||
        <clr-icon shape="plus"></clr-icon>ADD
 | 
					        <clr-icon shape="plus"></clr-icon>ADD
 | 
				
			||||||
      </button>
 | 
					      </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -349,7 +352,8 @@
 | 
				
			|||||||
                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
 | 
					                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
 | 
				
			||||||
                      <img id="filePreview" [src]="item.imageURL" alt="File Preview"
 | 
					                      <img id="filePreview" [src]="item.imageURL" alt="File Preview"
 | 
				
			||||||
                        [style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
 | 
					                        [style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
 | 
				
			||||||
                        [style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"></div>
 | 
					                        [style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'">
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
                  </div>
 | 
					                  </div>
 | 
				
			||||||
                </ng-container>
 | 
					                </ng-container>
 | 
				
			||||||
              </div>
 | 
					              </div>
 | 
				
			||||||
@ -371,90 +375,10 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<!-- //		EDIT DATA......... -->
 | 
					<!-- //		EDIT DATA......... -->
 | 
				
			||||||
<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 | 
					<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 | 
				
			||||||
  <h3 class="modal-title">Update Visa Application <!--update button -->
 | 
					  <h3 class="modal-title">Update Visa Application <!--update button -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  </h3>
 | 
					  </h3>
 | 
				
			||||||
  <div class="modal-body" *ngIf="rowSelected.id">
 | 
					  <div class="modal-body" *ngIf="rowSelected.id">
 | 
				
			||||||
    <h2 class="heading">{{rowSelected.id}}</h2>
 | 
					    <h2 class="heading">{{rowSelected.id}}</h2>
 | 
				
			||||||
@ -698,49 +622,6 @@
 | 
				
			|||||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 | 
					<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
 | 
				
			||||||
  <h3 class="modal-title">Add Visa Application
 | 
					  <h3 class="modal-title">Add Visa Application
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- aeroplane icon -->
 | 
					    <!-- aeroplane icon -->
 | 
				
			||||||
           
 | 
					           
 | 
				
			||||||
    <a *ngIf="userrole.includes('ROLE_ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
 | 
					    <a *ngIf="userrole.includes('ROLE_ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
 | 
				
			||||||
@ -944,51 +825,6 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <!-- form code start -->
 | 
					      <!-- form code start -->
 | 
				
			||||||
      <div *ngIf="checkFormCode">
 | 
					      <div *ngIf="checkFormCode">
 | 
				
			||||||
        <h4 style="font-weight: 300;display: inline;">Extension</h4>
 | 
					        <h4 style="font-weight: 300;display: inline;">Extension</h4>
 | 
				
			||||||
 | 
				
			|||||||
@ -7,7 +7,7 @@ import { ExtensionService } from 'src/app/services/fnd/extension.service';
 | 
				
			|||||||
import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
 | 
					import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
 | 
				
			||||||
import { Visa_applicationcardvariable } from './Visa_application_cardvariable';
 | 
					import { Visa_applicationcardvariable } from './Visa_application_cardvariable';
 | 
				
			||||||
import { UserInfoService } from 'src/app/services/user-info.service';
 | 
					import { UserInfoService } from 'src/app/services/user-info.service';
 | 
				
			||||||
import { Router } from '@angular/router';
 | 
					import { ActivatedRoute, Router } from '@angular/router';
 | 
				
			||||||
declare var JsBarcode: any;
 | 
					declare var JsBarcode: any;
 | 
				
			||||||
@Component({
 | 
					@Component({
 | 
				
			||||||
  selector: 'app-Visa_application',
 | 
					  selector: 'app-Visa_application',
 | 
				
			||||||
@ -56,6 +56,8 @@ export class Visa_applicationComponent implements OnInit {
 | 
				
			|||||||
    private toastr: ToastrService,
 | 
					    private toastr: ToastrService,
 | 
				
			||||||
    private _fb: FormBuilder,
 | 
					    private _fb: FormBuilder,
 | 
				
			||||||
    private router: Router,
 | 
					    private router: Router,
 | 
				
			||||||
 | 
					    private route: ActivatedRoute,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  ) { }
 | 
					  ) { }
 | 
				
			||||||
  // component button 
 | 
					  // component button 
 | 
				
			||||||
@ -157,49 +159,6 @@ export class Visa_applicationComponent implements OnInit {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  error;
 | 
					  error;
 | 
				
			||||||
  getData() {
 | 
					  getData() {
 | 
				
			||||||
    this.mainService.getAll().subscribe((data) => {
 | 
					    this.mainService.getAll().subscribe((data) => {
 | 
				
			||||||
@ -387,8 +346,12 @@ export class Visa_applicationComponent implements OnInit {
 | 
				
			|||||||
      this.ngOnInit();
 | 
					      this.ngOnInit();
 | 
				
			||||||
    }, 500);
 | 
					    }, 500);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  goToAdd(row) {
 | 
					  // goToAdd(row) {
 | 
				
			||||||
    this.modalAdd = true; this.submitted = false;
 | 
					  //   this.modalAdd = true; this.submitted = false;
 | 
				
			||||||
 | 
					  // }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  goToAdd() {
 | 
				
			||||||
 | 
					    this.router.navigate(["../stepper"], { relativeTo: this.route });
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  submitted = false;
 | 
					  submitted = false;
 | 
				
			||||||
  onSubmit() {
 | 
					  onSubmit() {
 | 
				
			||||||
 | 
				
			|||||||
@ -1,13 +1,13 @@
 | 
				
			|||||||
import { Injectable } from '@angular/core';
 | 
					import { Injectable } from '@angular/core';
 | 
				
			||||||
import { Observable } from "rxjs";
 | 
					import { delay, Observable, of } from "rxjs";
 | 
				
			||||||
import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
 | 
					import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
 | 
				
			||||||
import { ApiRequestService } from "src/app/services/api/api-request.service";
 | 
					import { ApiRequestService } from "src/app/services/api/api-request.service";
 | 
				
			||||||
import { environment } from 'src/environments/environment';
 | 
					import { environment } from 'src/environments/environment';
 | 
				
			||||||
@Injectable({
 | 
					@Injectable({
 | 
				
			||||||
  providedIn: 'root'
 | 
					  providedIn: 'root'
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
export class Visa_applicationservice{
 | 
					export class Visa_applicationservice {
 | 
				
			||||||
  private baseURL = "Visa_application/Visa_application" ;  constructor(
 | 
					  private baseURL = "Visa_application/Visa_application"; constructor(
 | 
				
			||||||
    private http: HttpClient,
 | 
					    private http: HttpClient,
 | 
				
			||||||
    private apiRequest: ApiRequestService,
 | 
					    private apiRequest: ApiRequestService,
 | 
				
			||||||
  ) { }
 | 
					  ) { }
 | 
				
			||||||
@ -31,55 +31,60 @@ export class Visa_applicationservice{
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  getAllvisa_entry_type(): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.get("Visa_entry_ListFilter1/Visa_entry_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  getAllvisa_duration(): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.get("Visa_duration_ListFilter1/Visa_duration_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  getAllvisa_processing(): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.get("Visa_processing_ListFilter1/Visa_processing_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
getAllvisa_entry_type(): Observable<any> {   
 | 
					  getAllgender(): Observable<any> {
 | 
				
			||||||
return this.apiRequest.get("Visa_entry_ListFilter1/Visa_entry_ListFilter1");  }
 | 
					    return this.apiRequest.get("Gender_ListFilter1/Gender_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
getAllvisa_duration(): Observable<any> {   
 | 
					  getAllreferrer(): Observable<any> {
 | 
				
			||||||
return this.apiRequest.get("Visa_duration_ListFilter1/Visa_duration_ListFilter1");  }
 | 
					    return this.apiRequest.get("Referrer_ListFilter1/Referrer_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
getAllvisa_processing(): Observable<any> {   
 | 
					  getAllnationality(): Observable<any> {
 | 
				
			||||||
return this.apiRequest.get("Visa_processing_ListFilter1/Visa_processing_ListFilter1");  }
 | 
					    return this.apiRequest.get("Nationality_ListFilter1/Nationality_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  getAllsupplier(): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.get("Supplier_ListFilter1/Supplier_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  getAllagent(): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.get("Agent_ListFilter1/Agent_ListFilter1");
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  uploadDocument(ref: any, Forma: any, file: any): Observable<any> {
 | 
				
			||||||
 | 
					    const formData = new FormData();
 | 
				
			||||||
 | 
					    formData.append('file', file);
 | 
				
			||||||
 | 
					    return this.apiRequest.postFormData(`FileUpload/Uploadeddocs/${ref}/${Forma}`, formData);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  uploadfilegetByIdfileupload_field(ref: any, Forma: any,): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.get(`FileUpload/Uploadeddocs/${ref}/${Forma}`);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  uploadfiledeletefileupload_field(id: number): Observable<any> {
 | 
				
			||||||
 | 
					    return this.apiRequest.delete(`FileUpload/Uploadeddocs/${id}`);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  finalizeOrder(id: string) {
 | 
				
			||||||
 | 
					    // return this.http.post(`/api/customer/${id}/finalize`, {});
 | 
				
			||||||
 | 
					    return of({ success: true }).pipe(delay(1000));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  // updateaction
 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
getAllgender(): Observable<any> {   
 | 
					 | 
				
			||||||
return this.apiRequest.get("Gender_ListFilter1/Gender_ListFilter1");  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
getAllreferrer(): Observable<any> {   
 | 
					 | 
				
			||||||
return this.apiRequest.get("Referrer_ListFilter1/Referrer_ListFilter1");  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
getAllnationality(): Observable<any> {   
 | 
					 | 
				
			||||||
return this.apiRequest.get("Nationality_ListFilter1/Nationality_ListFilter1");  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
getAllsupplier(): Observable<any> {   
 | 
					 | 
				
			||||||
return this.apiRequest.get("Supplier_ListFilter1/Supplier_ListFilter1");  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
getAllagent(): Observable<any> {   
 | 
					 | 
				
			||||||
return this.apiRequest.get("Agent_ListFilter1/Agent_ListFilter1");  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// updateaction
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@ -15,6 +15,9 @@
 | 
				
			|||||||
      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
 | 
					      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
 | 
				
			||||||
        <clr-icon shape="plus"></clr-icon>ADD
 | 
					        <clr-icon shape="plus"></clr-icon>ADD
 | 
				
			||||||
      </button>
 | 
					      </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					     
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
  <ng-container *ngIf="!isCardview"> <!-- GET ALL --> <clr-datagrid [clrDgLoading]="loading"
 | 
					  <ng-container *ngIf="!isCardview"> <!-- GET ALL --> <clr-datagrid [clrDgLoading]="loading"
 | 
				
			||||||
 | 
				
			|||||||
@ -197,8 +197,9 @@ export class SiteTreeComponent implements OnInit {
 | 
				
			|||||||
  goToAdd(row) {
 | 
					  goToAdd(row) {
 | 
				
			||||||
    this.modalAdd = true; this.submitted = false;
 | 
					    this.modalAdd = true; this.submitted = false;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  submitted = false;
 | 
					  submitted = false;
 | 
				
			||||||
  onSubmit() {
 | 
					  onSubmit() {
 | 
				
			||||||
    console.log(this.entryForm.value);
 | 
					    console.log(this.entryForm.value);
 | 
				
			||||||
 | 
				
			|||||||
@ -1,5 +1,5 @@
 | 
				
			|||||||
import { Injectable } from '@angular/core';
 | 
					import { Injectable } from '@angular/core';
 | 
				
			||||||
import { Observable } from "rxjs";
 | 
					import { delay, Observable, of } from "rxjs";
 | 
				
			||||||
import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
 | 
					import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
 | 
				
			||||||
import { ApiRequestService } from "src/app/services/api/api-request.service";
 | 
					import { ApiRequestService } from "src/app/services/api/api-request.service";
 | 
				
			||||||
import { environment } from 'src/environments/environment';
 | 
					import { environment } from 'src/environments/environment';
 | 
				
			||||||
@ -42,7 +42,7 @@ export class SiteTreeservice {
 | 
				
			|||||||
    return this.http.get(_http);
 | 
					    return this.http.get(_http);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  generateJson(data: any): Observable<any> {
 | 
					  callLlm(data: any): Observable<any> {
 | 
				
			||||||
    return this.http.post(`${this.nodeURL}/chatMemory`, data);
 | 
					    return this.http.post(`${this.nodeURL}/chatMemory`, data);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -57,6 +57,5 @@ export class SiteTreeservice {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
  // updateaction
 | 
					  // updateaction
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
										
											Binary file not shown.
										
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							@ -1,199 +1,174 @@
 | 
				
			|||||||
<!-- <div class="node-card">
 | 
					<div class="visual-editor-container">
 | 
				
			||||||
  <h3>{{ node.title }}</h3>
 | 
					  <div class="fixed-grid-container">
 | 
				
			||||||
  <div class="section" *ngFor="let sec of getSections(node.data)">
 | 
					    <div class="editor-content">
 | 
				
			||||||
    <h4>{{ sec.title }}</h4>
 | 
					      <div #canvasContainer class="canvas-container">
 | 
				
			||||||
    <p>{{ sec.description }}</p>
 | 
					        <div class="canvas-boundary">
 | 
				
			||||||
  </div>
 | 
					          <div class="sitemap-grid" [style.transform]="getTotalTransform()">
 | 
				
			||||||
</div>
 | 
					            <div class="grid-background"></div>
 | 
				
			||||||
 | 
					            <div class="tree-grid">
 | 
				
			||||||
<div class="children-container" *ngIf="getChildren(node.data).length">
 | 
					              <div class="tree-row" *ngIf="rootPage">
 | 
				
			||||||
  <svg class="connector-line">
 | 
					                <div class="node-grid">
 | 
				
			||||||
    <path d="M 100 0 C 150 50, 150 50, 200 100" stroke="gray" fill="transparent"/>
 | 
					                  <div class="node-card home-node" *ngIf="rootPage.children && rootPage.children.length > 0">
 | 
				
			||||||
  </svg>
 | 
					 | 
				
			||||||
  <div class="children">
 | 
					 | 
				
			||||||
    <app-tree-node *ngFor="let child of getChildren(node.data)" [node]="child"></app-tree-node>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</div>
 | 
					 | 
				
			||||||
 -->
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 <div class="visual-editor-container">
 | 
					 | 
				
			||||||
  <!-- Header Toolbar -->
 | 
					 | 
				
			||||||
  <!-- <div class="editor-header">
 | 
					 | 
				
			||||||
    <h2>Visual Site Structure Editor</h2>
 | 
					 | 
				
			||||||
    <div class="actions">
 | 
					 | 
				
			||||||
      <button class="btn secondary" (click)="resetEditor()">Reset</button>
 | 
					 | 
				
			||||||
      <button class="btn primary" *ngIf="rootPage" (click)="downloadJson()">Export JSON</button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </div> -->
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  <!-- JSON Input Form -->
 | 
					 | 
				
			||||||
  <!-- <div class="json-input-container" *ngIf="showJsonInput">
 | 
					 | 
				
			||||||
    <div class="card">
 | 
					 | 
				
			||||||
      <h3>Import Site Structure</h3>
 | 
					 | 
				
			||||||
      <textarea class="json-textarea" [(ngModel)]="jsonInput" placeholder="Paste your JSON here..."></textarea>
 | 
					 | 
				
			||||||
      <div class="error-message" *ngIf="errorMessage">{{ errorMessage }}</div>
 | 
					 | 
				
			||||||
      <button class="btn primary" (click)="parseJsonInput()">Load Structure</button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </div> -->
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  <!-- Visual Editor -->
 | 
					 | 
				
			||||||
  <div class="visual-editor" *ngIf="rootPage">
 | 
					 | 
				
			||||||
    <div class="sitemap-container">
 | 
					 | 
				
			||||||
      <!-- Root Page -->
 | 
					 | 
				
			||||||
      <div class="sitemap-row">
 | 
					 | 
				
			||||||
        <div class="sitemap-node root-node">
 | 
					 | 
				
			||||||
          <div class="node-header" [class.selected]="selectedPage === rootPage" (click)="selectPage(rootPage)">
 | 
					 | 
				
			||||||
            <i class="fas fa-sitemap"></i> Primary Sitemap
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <!-- First Level - Home -->
 | 
					 | 
				
			||||||
      <div class="sitemap-row" *ngIf="rootPage.children && rootPage.children.length > 0">
 | 
					 | 
				
			||||||
        <div class="connector-vertical"></div>
 | 
					 | 
				
			||||||
        <div class="sitemap-node" *ngFor="let homePage of rootPage.children" 
 | 
					 | 
				
			||||||
             [class.selected]="selectedPage === homePage" 
 | 
					 | 
				
			||||||
             (click)="selectPage(homePage)">
 | 
					 | 
				
			||||||
                    <div class="node-header">
 | 
					                    <div class="node-header">
 | 
				
			||||||
            <i class="fas fa-home"></i> {{ homePage.name }}
 | 
					                      <i class="node-icon fas fa-sitemap"></i>
 | 
				
			||||||
 | 
					                      <span class="node-title">{{ rootPage.name }}</span>
 | 
				
			||||||
                    </div>
 | 
					                    </div>
 | 
				
			||||||
          <div class="node-content">
 | 
					                    <div class="node-actions">
 | 
				
			||||||
            <div class="section-item" *ngFor="let section of homePage.sections" 
 | 
					                      <button class="node-action-btn" title="Add Page" (click)="showAddChildPageModal(rootPage)">
 | 
				
			||||||
                 [class.selected]="selectedSection === section" 
 | 
					                        <i class="fas fa-plus"></i>
 | 
				
			||||||
                 (click)="selectSection(section); $event.stopPropagation()">
 | 
					                      </button>
 | 
				
			||||||
              <div class="section-title">{{ section.type }}</div>
 | 
					 | 
				
			||||||
              <div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
 | 
					 | 
				
			||||||
                    </div>
 | 
					                    </div>
 | 
				
			||||||
                  </div>
 | 
					                  </div>
 | 
				
			||||||
        </div>
 | 
					                  <div class="children-container" *ngIf="rootPage.children && rootPage.children.length > 0">
 | 
				
			||||||
      </div> 
 | 
					                    <ng-container *ngFor="let page of rootPage.children">
 | 
				
			||||||
 | 
					                      <ng-container *ngTemplateOutlet="pageTemplate; context: { $implicit: page }"></ng-container>
 | 
				
			||||||
      <!-- Second Level - Children Pages -->
 | 
					 | 
				
			||||||
      <ng-container *ngIf="getHomePageFromRoot() as homePage">
 | 
					 | 
				
			||||||
        <div class="sitemap-row multi-node-row" *ngIf="homePage?.children?.length">
 | 
					 | 
				
			||||||
          <div class="connector-horizontal"></div>
 | 
					 | 
				
			||||||
          <div class="sitemap-node child-node" *ngFor="let childPage of homePage.children" 
 | 
					 | 
				
			||||||
               [class.selected]="selectedPage === childPage" 
 | 
					 | 
				
			||||||
               (click)="selectPage(childPage)">
 | 
					 | 
				
			||||||
            <div class="connector-vertical"></div>
 | 
					 | 
				
			||||||
            <div class="node-header">
 | 
					 | 
				
			||||||
              <i class="fas fa-file"></i> {{ childPage.name }}
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <div class="node-content">
 | 
					 | 
				
			||||||
              <div class="section-item" *ngFor="let section of childPage.sections" 
 | 
					 | 
				
			||||||
                   [class.selected]="selectedSection === section" 
 | 
					 | 
				
			||||||
                   (click)="selectSection(section); $event.stopPropagation()">
 | 
					 | 
				
			||||||
                <div class="section-title">{{ section.type }}</div>
 | 
					 | 
				
			||||||
                <div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div> <!-- closing .sitemap-node -->
 | 
					 | 
				
			||||||
        </div> <!-- closing .sitemap-row -->
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <!-- Third Level - Grandchildren Pages -->
 | 
					 | 
				
			||||||
        <ng-container *ngFor="let childPage of homePage.children">
 | 
					 | 
				
			||||||
          <div class="sitemap-row multi-node-row" *ngIf="childPage.children && childPage.children.length > 0">
 | 
					 | 
				
			||||||
            <div class="connector-sub"></div>
 | 
					 | 
				
			||||||
            <div class="sitemap-node grandchild-node" *ngFor="let grandchildPage of childPage.children" 
 | 
					 | 
				
			||||||
                 [class.selected]="selectedPage === grandchildPage" 
 | 
					 | 
				
			||||||
                 (click)="selectPage(grandchildPage)">
 | 
					 | 
				
			||||||
              <div class="connector-vertical"></div>
 | 
					 | 
				
			||||||
              <div class="node-header">
 | 
					 | 
				
			||||||
                <i class="fas fa-file-alt"></i> {{ grandchildPage.name }}
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
              <div class="node-content">
 | 
					 | 
				
			||||||
                <div class="section-item" *ngFor="let section of grandchildPage.sections" 
 | 
					 | 
				
			||||||
                     [class.selected]="selectedSection === section" 
 | 
					 | 
				
			||||||
                     (click)="selectSection(section); $event.stopPropagation()">
 | 
					 | 
				
			||||||
                  <div class="section-title">{{ section.type }}</div>
 | 
					 | 
				
			||||||
                  <div class="section-content">{{ getSectionContentPreview(section.content) }}</div>
 | 
					 | 
				
			||||||
                </div>
 | 
					 | 
				
			||||||
              </div>
 | 
					 | 
				
			||||||
            </div> <!-- closing .sitemap-node -->
 | 
					 | 
				
			||||||
          </div> <!-- closing .sitemap-row -->
 | 
					 | 
				
			||||||
        </ng-container>
 | 
					 | 
				
			||||||
                    </ng-container>
 | 
					                    </ng-container>
 | 
				
			||||||
                  </div>
 | 
					                  </div>
 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- Property Editor Panel -->
 | 
					 | 
				
			||||||
    <div class="properties-panel" *ngIf="editMode">
 | 
					 | 
				
			||||||
      <div class="panel-header">
 | 
					 | 
				
			||||||
        <h3>{{ editMode === 'page' ? 'Page Properties' : 'Section Properties' }}</h3>
 | 
					 | 
				
			||||||
                </div>
 | 
					                </div>
 | 
				
			||||||
 | 
					              </div>
 | 
				
			||||||
      <div class="panel-content">
 | 
					            </div>
 | 
				
			||||||
        <!-- Page Properties -->
 | 
					          </div>
 | 
				
			||||||
        <div class="property-form" *ngIf="editMode === 'page' && selectedPage">
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="controls">
 | 
				
			||||||
 | 
					        <button class="control-btn" (click)="zoomIn()" title="Zoom In">
 | 
				
			||||||
 | 
					          <i class="fas fa-plus"></i>
 | 
				
			||||||
 | 
					        </button>
 | 
				
			||||||
 | 
					        <button class="control-btn" (click)="zoomOut()" title="Zoom Out">
 | 
				
			||||||
 | 
					          <i class="fas fa-minus"></i>
 | 
				
			||||||
 | 
					        </button>
 | 
				
			||||||
 | 
					        <button class="control-btn" (click)="resetZoom()" title="Reset Zoom">
 | 
				
			||||||
 | 
					          <i class="fas fa-expand"></i>
 | 
				
			||||||
 | 
					        </button>
 | 
				
			||||||
 | 
					        <button class="control-btn" (click)="saveTreeData()" title="Save">
 | 
				
			||||||
 | 
					          <i class="fas fa-save"></i>
 | 
				
			||||||
 | 
					        </button>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
 | 
					  <div class="editor-form" *ngIf="editMode">
 | 
				
			||||||
 | 
					    <div *ngIf="editMode === 'section' && selectedSection && selectedPage">
 | 
				
			||||||
 | 
					      <div class="editor-title">Edit Section: {{ selectedSection.type }}</div>
 | 
				
			||||||
      <div class="form-group">
 | 
					      <div class="form-group">
 | 
				
			||||||
            <label>Page Name</label>
 | 
					        <label class="form-label">Content</label>
 | 
				
			||||||
            <input type="text" [(ngModel)]="selectedPage.name" (change)="updatePage()">
 | 
					        <textarea 
 | 
				
			||||||
 | 
					          class="form-textarea" 
 | 
				
			||||||
 | 
					          [(ngModel)]="selectedSection.content"></textarea>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
 | 
					 | 
				
			||||||
      <div class="form-actions">
 | 
					      <div class="form-actions">
 | 
				
			||||||
            <button class="btn primary" (click)="updatePage()">Update</button>
 | 
					        <button class="btn btn-secondary" (click)="cancelEdit()">Cancel</button>
 | 
				
			||||||
            <button class="btn secondary" *ngIf="selectedPage !== rootPage && getParentPage(selectedPage)" 
 | 
					        <button class="btn btn-primary" (click)="saveEdit()">Save Changes</button>
 | 
				
			||||||
                    (click)="deletePage(selectedPage, getParentPage(selectedPage))">Delete</button>
 | 
					 | 
				
			||||||
            <button class="btn secondary" *ngIf="canAddChildPage(selectedPage)" 
 | 
					 | 
				
			||||||
                    (click)="showAddChildForm = true">Add Child Page</button>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div class="form-group" *ngIf="showAddChildForm">
 | 
					 | 
				
			||||||
            <label>New Child Page Name</label>
 | 
					 | 
				
			||||||
            <input type="text" [(ngModel)]="newPageName">
 | 
					 | 
				
			||||||
            <div class="form-actions">
 | 
					 | 
				
			||||||
              <button class="btn primary" [disabled]="!newPageName" 
 | 
					 | 
				
			||||||
                      (click)="addChildPage(selectedPage); showAddChildForm = false">Add</button>
 | 
					 | 
				
			||||||
              <button class="btn secondary" (click)="showAddChildForm = false">Cancel</button>
 | 
					 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
 | 
					  <div class="offcanvas" [class.show]="showOffcanvas">
 | 
				
			||||||
 | 
					    <div class="offcanvas-header">
 | 
				
			||||||
 | 
					      <div class="offcanvas-title">Add Section</div>
 | 
				
			||||||
 | 
					      <button class="close-btn" (click)="closeOffcanvas()">×</button>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <div class="offcanvas-body">
 | 
				
			||||||
 | 
					      <div class="section-template" *ngFor="let template of sectionTemplates" (click)="addSectionFromTemplate(template)">
 | 
				
			||||||
 | 
					        <div class="section-template-title">{{ template.type }}</div>
 | 
				
			||||||
 | 
					        <div class="section-template-desc">{{ template.description }}</div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="form-group" style="margin-top: 20px;">
 | 
				
			||||||
 | 
					        <h4>Custom Section</h4>
 | 
				
			||||||
 | 
					        <div class="mb-3">
 | 
				
			||||||
 | 
					          <label class="form-label">Section Type</label>
 | 
				
			||||||
 | 
					          <input type="text" class="form-control" [(ngModel)]="customSectionType" placeholder="Enter section type">
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="mb-3">
 | 
				
			||||||
 | 
					          <label class="form-label">Content</label>
 | 
				
			||||||
 | 
					          <textarea class="form-control" [(ngModel)]="customSectionContent" rows="4" placeholder="Enter content"></textarea>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <button class="btn btn-primary" [disabled]="!customSectionType" (click)="addCustomSection()">
 | 
				
			||||||
 | 
					          Add Custom Section
 | 
				
			||||||
 | 
					        </button>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  </div>
 | 
				
			||||||
 | 
					  <div class="modal" [class.show]="showAddChildModal">
 | 
				
			||||||
 | 
					    <div class="modal-backdrop" *ngIf="showAddChildModal" (click)="closeAddChildModal()"></div>
 | 
				
			||||||
 | 
					    <div class="modal-dialog" *ngIf="showAddChildModal">
 | 
				
			||||||
 | 
					      <div class="modal-content">
 | 
				
			||||||
 | 
					        <div class="modal-header">
 | 
				
			||||||
 | 
					          <h5 class="modal-title">Add Child Page</h5>
 | 
				
			||||||
 | 
					          <button type="button" class="close-btn" (click)="closeAddChildModal()">×</button>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="modal-body">
 | 
				
			||||||
          <div class="form-group">
 | 
					          <div class="form-group">
 | 
				
			||||||
            <label>Add Section</label>
 | 
					            <label class="form-label">Page Name</label>
 | 
				
			||||||
            <div class="section-type-input">
 | 
					            <input type="text" class="form-control" [(ngModel)]="newPageName" placeholder="Enter page name">
 | 
				
			||||||
              <input type="text" [(ngModel)]="newSectionType" placeholder="Section type...">
 | 
					 | 
				
			||||||
              <button class="btn sm primary" (click)="addSectionType()">Add Type</button>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <select [(ngModel)]="newSectionType" *ngIf="availableSectionTypes.length > 0">
 | 
					 | 
				
			||||||
              <option value="">Select Section Type</option>
 | 
					 | 
				
			||||||
              <option *ngFor="let type of availableSectionTypes" [value]="type">{{ type }}</option>
 | 
					 | 
				
			||||||
            </select>
 | 
					 | 
				
			||||||
            <textarea *ngIf="newSectionType" [(ngModel)]="newSectionContent" placeholder="Section content..."></textarea>
 | 
					 | 
				
			||||||
            <button class="btn primary" [disabled]="!newSectionType" 
 | 
					 | 
				
			||||||
                    (click)="addSectionToPage(selectedPage)">Add Section</button>
 | 
					 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="modal-footer">
 | 
				
			||||||
        <!-- Section Properties -->
 | 
					          <button type="button" class="btn btn-secondary" (click)="closeAddChildModal()">Cancel</button>
 | 
				
			||||||
        <div class="property-form" *ngIf="editMode === 'section' && selectedSection && selectedPage">
 | 
					          <button type="button" class="btn btn-primary" [disabled]="!newPageName" (click)="addChildPage()">Add Page</button>
 | 
				
			||||||
          <div class="form-group">
 | 
					 | 
				
			||||||
            <label>Section Type</label>
 | 
					 | 
				
			||||||
            <div class="section-type-input">
 | 
					 | 
				
			||||||
              <input type="text" [(ngModel)]="selectedSection.type" (change)="updateSection()">
 | 
					 | 
				
			||||||
              <select [(ngModel)]="selectedSection.type" (change)="updateSection()" *ngIf="availableSectionTypes.length > 0">
 | 
					 | 
				
			||||||
                <option *ngFor="let type of availableSectionTypes" [value]="type">{{ type }}</option>
 | 
					 | 
				
			||||||
              </select>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div class="form-group">
 | 
					 | 
				
			||||||
            <label>Content</label>
 | 
					 | 
				
			||||||
            <textarea rows="8" [(ngModel)]="selectedSection.content" (change)="updateSection()"></textarea>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          <div class="form-actions">
 | 
					 | 
				
			||||||
            <button class="btn primary" (click)="updateSection()">Update</button>
 | 
					 | 
				
			||||||
            <button class="btn secondary" (click)="deleteSection(selectedSection, selectedPage)">Delete</button>
 | 
					 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
 | 
					  <div class="loading-overlay" *ngIf="loading">
 | 
				
			||||||
 | 
					    <div class="spinner"></div>
 | 
				
			||||||
 | 
					    <div class="loading-text">Processing...</div>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
 | 
					  <ng-template #pageTemplate let-page>
 | 
				
			||||||
  <!-- Live JSON Output -->
 | 
					    <div class="node-container" 
 | 
				
			||||||
  <!-- <div class="json-output-container" *ngIf="rootPage && currentOutputJson">
 | 
					         draggable="true"
 | 
				
			||||||
    <div class="card">
 | 
					         (dragstart)="onPageDragStart(page)"
 | 
				
			||||||
      <h3>Current JSON Structure</h3>
 | 
					         (dragend)="onPageDragEnd()"
 | 
				
			||||||
      <pre class="json-output">{{ currentOutputJson }}</pre>
 | 
					         (dragover)="$event.preventDefault()"
 | 
				
			||||||
 | 
					         (drop)="onPageDrop(page); $event.preventDefault()">
 | 
				
			||||||
 | 
					      <div class="connection-line" *ngIf="page.parent && page.parent !== rootPage"></div>
 | 
				
			||||||
 | 
					      <div class="node-card" 
 | 
				
			||||||
 | 
					           [class.selected]="selectedPage === page" 
 | 
				
			||||||
 | 
					           (click)="selectPage(page)">
 | 
				
			||||||
 | 
					        <div class="node-header">
 | 
				
			||||||
 | 
					          <i class="node-icon" [class]="getNodeIcon(page)"></i>
 | 
				
			||||||
 | 
					          <span class="node-title">{{ page.name }}</span>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
  </div> -->
 | 
					        <div class="sections-container" cdkDropList [cdkDropListData]="page.sections">
 | 
				
			||||||
 | 
					         <!-- Update the section card template within the #pageTemplate -->
 | 
				
			||||||
 | 
					         <!-- Section card with improved hover button placement -->
 | 
				
			||||||
 | 
					<div class="section-card" *ngFor="let section of page.sections; let i = index" 
 | 
				
			||||||
 | 
					cdkDrag
 | 
				
			||||||
 | 
					(click)="selectSection(section); $event.stopPropagation()">
 | 
				
			||||||
 | 
					<div class="section-title">{{ section.type }}</div>
 | 
				
			||||||
 | 
					<div class="section-content" [innerHTML]="getSectionContentHtml(section.content)"></div>
 | 
				
			||||||
 | 
					<div class="section-actions">
 | 
				
			||||||
 | 
					<button class="section-action-btn" title="Edit Section" (click)="editSection(section, $event)">
 | 
				
			||||||
 | 
					 <i class="fas fa-pencil-alt"></i>
 | 
				
			||||||
 | 
					</button>
 | 
				
			||||||
 | 
					<button class="section-action-btn" title="Delete Section" (click)="deleteSection(section, page, $event)">
 | 
				
			||||||
 | 
					 <i class="fas fa-trash"></i>
 | 
				
			||||||
 | 
					</button>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					<!-- Repositioned add button that appears on hover -->
 | 
				
			||||||
 | 
					<div class="add-section-hover-btn" (click)="openSectionOffcanvas(page, i, $event)" title="Add Section">
 | 
				
			||||||
 | 
					<i class="fas fa-plus"></i>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					          <!-- <div class="add-section-btn" (click)="openSectionOffcanvas(page); $event.stopPropagation()">
 | 
				
			||||||
 | 
					            <i class="fas fa-plus"></i> Add Section
 | 
				
			||||||
 | 
					          </div> -->
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="node-actions">
 | 
				
			||||||
 | 
					          <button class="node-action-btn" title="Add Child Page" (click)="showAddChildPageModal(page); $event.stopPropagation()">
 | 
				
			||||||
 | 
					            <i class="fas fa-plus"></i>
 | 
				
			||||||
 | 
					          </button>
 | 
				
			||||||
 | 
					          <button class="node-action-btn" title="Delete Page" (click)="deletePage(page, $event)">
 | 
				
			||||||
 | 
					            <i class="fas fa-trash"></i>
 | 
				
			||||||
 | 
					          </button>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="add-child-hover-btn" (click)="showAddChildPageModal(page); $event.stopPropagation()">
 | 
				
			||||||
 | 
					          <i class="fas fa-plus"></i>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="children-container" *ngIf="page.children && page.children.length > 0">
 | 
				
			||||||
 | 
					        <ng-container *ngFor="let childPage of page.children">
 | 
				
			||||||
 | 
					          <ng-container *ngTemplateOutlet="pageTemplate; context: { $implicit: childPage }"></ng-container>
 | 
				
			||||||
 | 
					        </ng-container>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					  </ng-template>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
 | 
				
			|||||||
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							
										
											Binary file not shown.
										
									
								
							
										
											
												File diff suppressed because it is too large
												Load Diff
											
										
									
								
							@ -20,6 +20,8 @@ export class WireframeRendererComponent implements OnInit {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    jsonInput = '';
 | 
					    jsonInput = '';
 | 
				
			||||||
 | 
					    initialPrompt = '';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    id: number;
 | 
					    id: number;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -45,7 +47,7 @@ export class WireframeRendererComponent implements OnInit {
 | 
				
			|||||||
        return Object.keys(obj || {});
 | 
					        return Object.keys(obj || {});
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // Step 1
 | 
					    // Step 1 get  data from that id
 | 
				
			||||||
    fetchTreeById(id: number) {
 | 
					    fetchTreeById(id: number) {
 | 
				
			||||||
        this.siteTreeService.getById(id).subscribe({
 | 
					        this.siteTreeService.getById(id).subscribe({
 | 
				
			||||||
            next: (res) => {
 | 
					            next: (res) => {
 | 
				
			||||||
@ -54,6 +56,9 @@ export class WireframeRendererComponent implements OnInit {
 | 
				
			|||||||
                // Check if model key exists and has some value
 | 
					                // Check if model key exists and has some value
 | 
				
			||||||
                if (res && res.model) {
 | 
					                if (res && res.model) {
 | 
				
			||||||
                    try {
 | 
					                    try {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        this.initialPrompt = res.prompt;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        // Optional: if model is already a stringified JSON
 | 
					                        // Optional: if model is already a stringified JSON
 | 
				
			||||||
                        const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
 | 
					                        const maybeParsed = typeof res.model === 'string' ? JSON.parse(res.model) : res.model;
 | 
				
			||||||
                        this.jsonInput = JSON.stringify(maybeParsed, null, 2);
 | 
					                        this.jsonInput = JSON.stringify(maybeParsed, null, 2);
 | 
				
			||||||
@ -114,11 +119,13 @@ export class WireframeRendererComponent implements OnInit {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
                if (sectionName === 'Children') continue; // already handled
 | 
					                if (sectionName === 'Children') continue; // already handled
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                console.log('✅ Generating prompt for:', pageName, sectionName);
 | 
					                console.log('✅ Generating prompt for : ', pageName, 'sectionc name and   sectionDescription : ', sectionName, ' ', sectionDescription);
 | 
				
			||||||
                console.log('sc name  sectionDescription : ', sectionName, ' ', sectionDescription)
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
                const prompt = await this.generatePromptFromSection(sectionName, sectionDescription); // ✅ await
 | 
					                const prompt = await this.generatePromptFromSection(sectionName, sectionDescription); // ✅ await
 | 
				
			||||||
                sectionPrompts[sectionName] = prompt;
 | 
					                sectionPrompts[sectionName] = prompt;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                // console.log( sectionName, ':  ', prompt)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            // 🧠 Store all prompts for that page
 | 
					            // 🧠 Store all prompts for that page
 | 
				
			||||||
@ -168,7 +175,7 @@ HTML Only. No CSS.
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // Step 4
 | 
					    // Step 4
 | 
				
			||||||
    generatePromptFromSection(
 | 
					    async generatePromptFromSection(
 | 
				
			||||||
        sectionName: string,
 | 
					        sectionName: string,
 | 
				
			||||||
        sectionDescription: string,
 | 
					        sectionDescription: string,
 | 
				
			||||||
        headerId: number = 35,
 | 
					        headerId: number = 35,
 | 
				
			||||||
@ -183,18 +190,42 @@ HTML Only. No CSS.
 | 
				
			|||||||
                .trim();                         // trim leading/trailing spaces
 | 
					                .trim();                         // trim leading/trailing spaces
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
 | 
					            this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
 | 
				
			||||||
                next: (res) => {
 | 
					                next: async (res) => {
 | 
				
			||||||
                    try {
 | 
					                    try {
 | 
				
			||||||
                        const jsonBlock = res?.javacode;
 | 
					                        const jsonBlock = res?.javacode;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        // console.log( fieldType , ' json is : ', jsonBlock)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        if (jsonBlock) {
 | 
					                        if (jsonBlock) {
 | 
				
			||||||
                            const parsedJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
 | 
					                            const parsedJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                            // const updatedJson = this.replaceContentRecursively(parsedJson, sectionDescription);
 | 
					                            // const updatedJson = this.replaceContentRecursively(parsedJson, sectionDescription);
 | 
				
			||||||
                            const finalJsonString = JSON.stringify(parsedJson, null, 2);
 | 
					                            const finalJsonString = JSON.stringify(parsedJson, null, 2);
 | 
				
			||||||
 | 
					                            // 🧠 Build prompt to LLM with section info + json + full page prompt
 | 
				
			||||||
 | 
					                            const enhancedPrompt = `
 | 
				
			||||||
 | 
					📘 You are an intelligent layout enhancer.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					Your task is to update and fill in the values of a given UI section JSON based on the following information:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					- Page-level prompt: "${this.initialPrompt || ''}"
 | 
				
			||||||
 | 
					- Section name: "${sectionName}"
 | 
				
			||||||
 | 
					- Section description: "${sectionDescription}"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					You must only update relevant values like "title", "text", "description", "label", "placeholder", etc.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					⚠️ DO NOT change the structure. Only update content values.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					JSON:
 | 
				
			||||||
 | 
					${finalJsonString}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					✅ Return only the updated JSON. Do not return any explanation.
 | 
				
			||||||
 | 
					`;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                            // console.log('enhanced query ', enhancedPrompt);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                            // const finalJson = await this.calLlm(enhancedPrompt);
 | 
				
			||||||
                            resolve(finalJsonString);
 | 
					                            resolve(finalJsonString);
 | 
				
			||||||
                        } else {
 | 
					                        } else {
 | 
				
			||||||
                            console.warn('⛔ No JSON found, skipping.');
 | 
					 | 
				
			||||||
                            resolve('{}');
 | 
					                            resolve('{}');
 | 
				
			||||||
                        }
 | 
					                        }
 | 
				
			||||||
                    } catch (err) {
 | 
					                    } catch (err) {
 | 
				
			||||||
@ -235,7 +266,7 @@ HTML Only. No CSS.
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    pageSections: Record<string, { FullPage: SafeHtml }> = {}; // final UI map
 | 
					    pageSections: Record<string, { FullPage: SafeHtml }> = {}; // final UI map
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // Step 5 - generate html code via llm through prompt
 | 
					    // Step 5 - generate html code via java Api through prompt
 | 
				
			||||||
    async processAllPagesLiveUpdate() {
 | 
					    async processAllPagesLiveUpdate() {
 | 
				
			||||||
        for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
 | 
					        for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) {
 | 
				
			||||||
            const sectionHtmls: string[] = [];
 | 
					            const sectionHtmls: string[] = [];
 | 
				
			||||||
@ -436,6 +467,32 @@ HTML Only. No CSS.
 | 
				
			|||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // // Step 6
 | 
				
			||||||
 | 
					    async calLlm(data): Promise<string> {
 | 
				
			||||||
 | 
					        return new Promise((resolve, reject) => {
 | 
				
			||||||
 | 
					            console.log('call Llm Start ')
 | 
				
			||||||
 | 
					            const payload = {
 | 
				
			||||||
 | 
					                query: data,
 | 
				
			||||||
 | 
					                conversationId: '677'
 | 
				
			||||||
 | 
					            };
 | 
				
			||||||
 | 
					            console.log(' query : ', payload.query)
 | 
				
			||||||
 | 
					            this.siteTreeService.callLlm(payload).subscribe({
 | 
				
			||||||
 | 
					                next: (res) => {
 | 
				
			||||||
 | 
					                    console.log('response ', res)
 | 
				
			||||||
 | 
					                    if (res && res.responseContent) {
 | 
				
			||||||
 | 
					                        resolve(res.responseContent);
 | 
				
			||||||
 | 
					                    } else {
 | 
				
			||||||
 | 
					                        resolve('⚠️ No response received.');
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                },
 | 
				
			||||||
 | 
					                error: () => resolve('⚠️ LLaMA API failed.')
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            });
 | 
				
			||||||
 | 
					        });
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // // Step 4
 | 
					    // // Step 4
 | 
				
			||||||
    // generatePromptFromSection(
 | 
					    // generatePromptFromSection(
 | 
				
			||||||
    //     sectionName: string,
 | 
					    //     sectionName: string,
 | 
				
			||||||
@ -485,29 +542,7 @@ HTML Only. No CSS.
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // // Step 6
 | 
					 | 
				
			||||||
    //     async generateJson(data): Promise<string> {
 | 
					 | 
				
			||||||
    //         return new Promise((resolve, reject) => {
 | 
					 | 
				
			||||||
    //             console.log('genearte json start  ')
 | 
					 | 
				
			||||||
    //             const payload = {
 | 
					 | 
				
			||||||
    //                 query: data.message,
 | 
					 | 
				
			||||||
    //                 conversationId: '677'
 | 
					 | 
				
			||||||
    //             };
 | 
					 | 
				
			||||||
    //             console.log(' query : ', payload.query)
 | 
					 | 
				
			||||||
    //             this.siteTreeService.generateJson(payload).subscribe({
 | 
					 | 
				
			||||||
    //                 next: (res) => {
 | 
					 | 
				
			||||||
    //                     console.log('response ', res)
 | 
					 | 
				
			||||||
    //                     if (res && res.responseContent) {
 | 
					 | 
				
			||||||
    //                         resolve(res.responseContent);
 | 
					 | 
				
			||||||
    //                     } else {
 | 
					 | 
				
			||||||
    //                         resolve('⚠️ No response received.');
 | 
					 | 
				
			||||||
    //                     }
 | 
					 | 
				
			||||||
    //                 },
 | 
					 | 
				
			||||||
    //                 error: () => resolve('⚠️ LLaMA API failed.')
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
    //             });
 | 
					 | 
				
			||||||
    //         });
 | 
					 | 
				
			||||||
    //     }
 | 
					 | 
				
			||||||
    // pageSections: Record<string, Record<string, string>> = {}; // { pageName: { sectionName: html } }
 | 
					    // pageSections: Record<string, Record<string, string>> = {}; // { pageName: { sectionName: html } }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    // async processAllPagesLiveUpdate() {
 | 
					    // async processAllPagesLiveUpdate() {
 | 
				
			||||||
 | 
				
			|||||||
@ -57,6 +57,8 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<!-- Floating Square Button -->
 | 
					<!-- Floating Square Button -->
 | 
				
			||||||
<!-- Tab Section Container -->
 | 
					<!-- Tab Section Container -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div style="margin-top: 10px; padding: 20px;">
 | 
					<div style="margin-top: 10px; padding: 20px;">
 | 
				
			||||||
  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
 | 
					  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -76,9 +78,16 @@
 | 
				
			|||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <!-- Right: Generate Wireframe Button -->
 | 
					    <!-- Right: Generate Wireframe Button -->
 | 
				
			||||||
    <button (click)="activeTab = 'wireframe'" style="background: #28a745; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
 | 
					    <!-- <button (click)="activeTab = 'wireframe'" style="background: #28a745; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
 | 
				
			||||||
 | 
					      Generate Wireframe
 | 
				
			||||||
 | 
					    </button> -->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!-- Right: Generate Wireframe Button -->
 | 
				
			||||||
 | 
					    <button (click)="generateWireframe()"
 | 
				
			||||||
 | 
					      style="background: #28a745; color: white; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer;">
 | 
				
			||||||
      Generate Wireframe
 | 
					      Generate Wireframe
 | 
				
			||||||
    </button>
 | 
					    </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -92,7 +101,9 @@
 | 
				
			|||||||
  <!-- Wireframe Content -->
 | 
					  <!-- Wireframe Content -->
 | 
				
			||||||
  <div *ngIf="activeTab === 'wireframe'" style="margin-top: 20px; max-width: 100%; overflow-x: auto;">
 | 
					  <div *ngIf="activeTab === 'wireframe'" style="margin-top: 20px; max-width: 100%; overflow-x: auto;">
 | 
				
			||||||
    <div style="min-width: 800px;">
 | 
					    <div style="min-width: 800px;">
 | 
				
			||||||
      <app-wireframe-renderer *ngIf="treeData"></app-wireframe-renderer>
 | 
					      <!-- <app-wireframe-renderer *ngIf="treeData"></app-wireframe-renderer> -->
 | 
				
			||||||
 | 
					      <app-wireframe-renderer *ngIf="isWireframeLoaded && treeData"></app-wireframe-renderer>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
  </div>
 | 
					  </div>
 | 
				
			||||||
</div>
 | 
					</div>
 | 
				
			||||||
 | 
				
			|||||||
@ -125,6 +125,13 @@ after click this icard inside we upload excel of student data, icard template, a
 | 
				
			|||||||
  //   }
 | 
					  //   }
 | 
				
			||||||
  // }
 | 
					  // }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  isWireframeLoaded = false;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  generateWireframe() {
 | 
				
			||||||
 | 
					    this.activeTab = 'wireframe';
 | 
				
			||||||
 | 
					    this.isWireframeLoaded = true;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  getSections(data: any): { title: string, description: string }[] {
 | 
					  getSections(data: any): { title: string, description: string }[] {
 | 
				
			||||||
    const sections: { title: string, description: string }[] = [];
 | 
					    const sections: { title: string, description: string }[] = [];
 | 
				
			||||||
    for (const key in data) {
 | 
					    for (const key in data) {
 | 
				
			||||||
@ -180,7 +187,7 @@ after click this icard inside we upload excel of student data, icard template, a
 | 
				
			|||||||
    }`;
 | 
					    }`;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    const suffix = `You are a JSON structure generator for website page hierarchies.
 | 
					    const suffix = ` You are a JSON structure generator for website page hierarchies.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
You are a JSON structure generator for website UI and sitemap hierarchy.
 | 
					You are a JSON structure generator for website UI and sitemap hierarchy.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -250,13 +257,13 @@ Analyze the flow implied in the prompt:
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    const payload = {
 | 
					    const payload = {
 | 
				
			||||||
      query: this.rawInputText + suffix,
 | 
					      query: this.rawInputText + ' ' + suffix,
 | 
				
			||||||
      conversationId: '677'
 | 
					      conversationId: '677'
 | 
				
			||||||
    };
 | 
					    };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    console.log(' query : ', payload.query)
 | 
					    console.log(' query : ', payload.query)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    this.siteTreeService.generateJson(payload).subscribe({
 | 
					    this.siteTreeService.callLlm(payload).subscribe({
 | 
				
			||||||
      next: (res) => {
 | 
					      next: (res) => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        console.log('response ', res)
 | 
					        console.log('response ', res)
 | 
				
			||||||
@ -268,6 +275,7 @@ Analyze the flow implied in the prompt:
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
          // 🔁 Now call update API
 | 
					          // 🔁 Now call update API
 | 
				
			||||||
          const updatePayload = {
 | 
					          const updatePayload = {
 | 
				
			||||||
 | 
					            prompt: this.rawInputText + ' ',
 | 
				
			||||||
            model: this.inputJson  // model format expected by backend
 | 
					            model: this.inputJson  // model format expected by backend
 | 
				
			||||||
          };
 | 
					          };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -97,6 +97,7 @@ import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingru
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
import { TreeVisualizerComponent } from './fnd/SiteTreeBuilder/tree-visualizer.component';
 | 
					import { TreeVisualizerComponent } from './fnd/SiteTreeBuilder/tree-visualizer.component';
 | 
				
			||||||
import { SiteTreeComponent } from './fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component';
 | 
					import { SiteTreeComponent } from './fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component';
 | 
				
			||||||
 | 
					import { EditstepperComponent } from './BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -271,6 +272,9 @@ const routes: Routes = [
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
      { path: 'sitetree', component: SiteTreeComponent, },
 | 
					      { path: 'sitetree', component: SiteTreeComponent, },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      { path: 'stepper', component: EditstepperComponent },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      { path: 'sitetree/SiteBuilder/:id', component: TreeVisualizerComponent },
 | 
					      { path: 'sitetree/SiteBuilder/:id', component: TreeVisualizerComponent },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -124,6 +124,7 @@ import { WireframeRendererComponent } from './fnd/SiteTreeBuilder/WireframesUi/w
 | 
				
			|||||||
import { HomepageEditorComponent } from './fnd/SiteTreeBuilder/HomePage/Templete1/homepage-editor.component';
 | 
					import { HomepageEditorComponent } from './fnd/SiteTreeBuilder/HomePage/Templete1/homepage-editor.component';
 | 
				
			||||||
import { SiteTreeComponent } from './fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component';
 | 
					import { SiteTreeComponent } from './fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.component';
 | 
				
			||||||
import { TreeNodeComponent } from './fnd/SiteTreeBuilder/TreeNode/tree-node.component';
 | 
					import { TreeNodeComponent } from './fnd/SiteTreeBuilder/TreeNode/tree-node.component';
 | 
				
			||||||
 | 
					import { EditstepperComponent } from './BuilderComponents/vpspack/Visa_application/VisaOrderWorkflow/editstepper.component';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@NgModule({
 | 
					@NgModule({
 | 
				
			||||||
@ -145,6 +146,7 @@ import { TreeNodeComponent } from './fnd/SiteTreeBuilder/TreeNode/tree-node.comp
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    // buildercomponents
 | 
					    // buildercomponents
 | 
				
			||||||
    SiteTreeComponent,
 | 
					    SiteTreeComponent,
 | 
				
			||||||
 | 
					    EditstepperComponent,
 | 
				
			||||||
    HomepageEditorComponent,
 | 
					    HomepageEditorComponent,
 | 
				
			||||||
    WireframeRendererComponent,
 | 
					    WireframeRendererComponent,
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -15,6 +15,7 @@ export const environment = {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 backendUrl:'http://157.66.191.31:30101/back',
 | 
					 backendUrl:'http://157.66.191.31:30101/back',
 | 
				
			||||||
 nodeUrl:'http://157.66.191.31:31170/llm',
 | 
					 nodeUrl:'http://157.66.191.31:31170/llm',
 | 
				
			||||||
 | 
					 builderUrl:'http://157.66.191.31:31170',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
					 
 | 
				
			||||||
 | 
				
			|||||||
@ -11,10 +11,12 @@ export const environment = {
 | 
				
			|||||||
  captchaSiteKey: '6LfrdSUpAAAAALkYDmnvdX3GLLCArgPWNHfXasjP',
 | 
					  captchaSiteKey: '6LfrdSUpAAAAALkYDmnvdX3GLLCArgPWNHfXasjP',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
//  backport:'31701/visaproject36808/back',
 | 
					//  backport:'31701/visaproject36808/back',
 | 
				
			||||||
 backendUrl:'http://localhost:9292/back',
 | 
					//  backendUrl:'http://localhost:9292/back',
 | 
				
			||||||
 nodeUrl:'http://localhost:3000/llm',
 | 
					 nodeUrl:'http://157.66.191.31:31170/llm',
 | 
				
			||||||
 | 
					 builderUrl:'http://157.66.191.31:31170',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
//  backendUrl:'http://157.66.191.31:30101/back',
 | 
					
 | 
				
			||||||
 | 
					 backendUrl:'http://157.66.191.31:30101/back',
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -12,6 +12,7 @@
 | 
				
			|||||||
  <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
 | 
					  <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
 | 
				
			||||||
  <script src="https://cdn.ckeditor.com/4.9.2/full-all/ckeditor.js"></script>
 | 
					  <script src="https://cdn.ckeditor.com/4.9.2/full-all/ckeditor.js"></script>
 | 
				
			||||||
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 | 
					  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 | 
				
			||||||
 | 
					  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<body>
 | 
					<body>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user