argos/dmp-frontend/src/app/form/dynamic-form.component.html

<div class="parent-div">
		
	<div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
		
		<div class="col-md-12 form-body-container" id="form-container">

			<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
					
				<div *ngFor = "let section of dataModel.sections; let i = index;">							
						<div *ngIf="section.groupFields.length>0 else sectionHeader">												
								<div  *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
								<div *ngFor="let group of section.groupFields">
										<div *ngIf="shouldIShow(group);"	>	
									<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
										</div>
								</div>					
							
					</div>
					<ng-template *ngIf="shouldIShow(section);" #sectionHeader>     
						<h2>{{section.title}}</h2>
					</ng-template>			
				</div>		
	
				<div *ngFor="let field of dataModel.fields">
					<div [formGroup]="form" class="form-group">
						<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
					</div>
				</div>
	
				<!-- <div *ngFor="let group of dataModel.groups">
					<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
				</div> -->
	
	
			</form>
		</div>
	

		<div class="col-md-12 form-footer-seperator" >
		</div>

	
		<div class="col-md-12 form-footer-container" >
			
				<div >
					<div class="progress">
						<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
						<!-- {{dirtyValues}}% -->
						</div>
					</div>
				</div>

			<div>
				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
			</div>
	
			<div *ngIf="payLoad" class="form-row">
				<strong>Saved the following values</strong><br>{{payLoad}}
			</div>
	
			<!--
			<p>Form value: {{ form.value | json }}</p>
			-->
	
			
			<div class="text-center">
				<!-- pagination -->
				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
					<li [ngClass]="{disabled:pagination.currentPage === 1}">
						<a (click)="setPage(1)" class="cursor-link" >First</a>
					</li>
					<li [ngClass]="{disabled:pagination.currentPage === 1}">
						<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
					</li>
					<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
						<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
					</li>
					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
						<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
					</li>
					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
						<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
					</li>
				</ul>
			</div>


		</div>


	</div>	


	<div class="child-div-caret" (click)="toggleTOC()">
		<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ></i>
	</div>


	<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'shrink-width' }[expandedToc]" id="toc-container">
		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
	</div>
				
		
			
</div>


<!--Modal for Confirmation -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
					</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to save and finalize?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
			</div>
		</div>
	</div>
</div>