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

<div class="col-md-8 col-sm-9">


	<div class="panel-body">
		
		<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>

			<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> -->

			<div>
				<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid">Save</button>
				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" data-toggle="modal" data-target="#confirmModal">Finalize</button>
			</div>

			<div *ngIf="payLoad" class="form-row">
				<strong>Saved the following values</strong><br>{{payLoad}}
			</div>

		</form>
		<p>Form value: {{ form.value | json }}</p>

			
				<!--
				<div class="col-md-4">
						<h4>On this page:</h4>
						<div *ngIf="dataModel.groups.length">
								<toc [dataModel]="dataModel"></toc>
						</div>
					</div>
				-->
	</div>



	<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 class="panel-footer">
		<div class="progress">
			<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
				{{dirtyValues}}%
			</div>
		</div>
	</div>

</div>	


<div class="col-md-4  col-sm-3"  >  <!-- style="overflow:scroll; height: 100%;"        *ngIf="dataModel.groups.length" -->
	<div  > <!--  ngDraggable  style="top:60; position:fixed;" to ekana sxolio gia na ginetai responsive-->
		<div class="panel panel-default" >
			<div class="panel-heading" data-toggle="collapse" href="#collapse-panel">
				<h4>Table of contents:</h4>
			</div>
			<div class="panel-body" id="collapse-panel" class="panel-collapse">
				<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
			</div>
		</div>
	</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)="SaveFinalize();">Save and Finalize</button>
				</div>
			</div>
		</div>
	</div>