argos/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html

<div class="dynamic-form-section row" [id]="this.form.get('id').value">
	<mat-accordion class="col-12">
		<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="pathName" [(expanded)]="panelExpanded">
			<mat-expansion-panel-header>
				<mat-panel-title>
					<h6 class='panel-title'>{{tocentry? tocentry.numbering :form.get('numbering').value}}. {{form.get('title').value}}</h6>
				</mat-panel-title>
			</mat-expansion-panel-header>
			<mat-panel-description class="col-12">
				<h6 class='panel-desc' *ngIf="form.get('description').value">{{form.get('description').value}}</h6>
			</mat-panel-description>
			<ng-container *ngIf="!tocentry else tocentryCase">
			<div *ngFor="let compositeFieldFormGroup of form.get('compositeFields')['controls']; let i = index;" class="col-12">
				<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
				<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">

					<div class="col-12">
						<div class="row">
							<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
								[isChild]="false" [showDelete]="(compositeFieldFormGroup.get('multiplicityItems').length) > 0"></app-form-composite-field>
						</div>
					</div>

					<div *ngIf="compositeFieldFormGroup" class="col-12">
						<div class="row">
							<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
								<div class="row">
									<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
									 [isChild]="true" [showDelete]="true"></app-form-composite-field>
								</div>
							</div>
							<div *ngIf="(compositeFieldFormGroup.get('multiplicity').value.max - 1) > (compositeFieldFormGroup.get('multiplicityItems').length)"
							 class="col-12 addOneFieldButton">
								<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="compositeFieldFormGroup.disabled" matTooltip="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}">
									<mat-icon>add_circle</mat-icon>
								</button>
							</div>
							<mat-form-field *ngIf="compositeFieldFormGroup.get('hasCommentField').value" class="col-12 mb-2" [formGroup]="compositeFieldFormGroup">
								<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">
								<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>
							</mat-form-field>
							<!-- <div class="col"></div>
							<button class="col-auto" mat-icon-button type="button" (click)="next(compositeField)">
								<mat-icon>expand_more</mat-icon>
							</button> -->
						</div>
					</div>

				</div>
			</div>
			<div *ngIf="form.get('sections')" class="col-12">
				<div *ngFor="let subSectionFormGroup of form.get('sections')['controls']; let j = index;" class="row">
					<app-form-section class="col-12" [form]="subSectionFormGroup" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
					 [datasetProfileId]="datasetProfileId"></app-form-section>
				</div>
			</div>
			</ng-container>
		</mat-expansion-panel>
	</mat-accordion>
</div>








<!-- WORKING WITH TOCENTRIES -->

<ng-template #tocentryCase>

	<ng-container [ngSwitch]="tocentry.subEntriesType">
		<ng-container *ngSwitchCase="tocentriesType.FieldSet">

			<!-- FIELDSET CASE -->
			<div *ngFor="let fieldsetEntry of tocentry.subEntries; let i = index;" class="col-12" [id]="TOCENTRY_ID_PREFIX+fieldsetEntry.id" (click)="onAskedToScroll(fieldsetEntry.id)">
				<!-- <div *ngIf="isElementVisible(compositeField)" class="row"> -->
				<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
				<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(fieldsetEntry.form.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)">
		
					<div class="col-12">
						<div class="row">
							<app-form-composite-field [tocentry]="fieldsetEntry" class="align-self-center col" [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId"
								[isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-composite-field>
						</div>
					</div>
		
					<div *ngIf="fieldsetEntry.form" class="col-12">
						<div class="row">
							<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index">
								<div class="row">
									<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
									 [isChild]="true" [showDelete]="true"></app-form-composite-field>
								</div>
							</div>
							<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)"
							 class="col-12 addOneFieldButton">
								<button mat-icon-button color="primary" (click)="addMultipleField(i)" [disabled]="fieldsetEntry.form.disabled" matTooltip="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' | translate}}">
									<mat-icon>add_circle</mat-icon>
								</button>
							</div>
							<mat-form-field *ngIf="fieldsetEntry.form.get('hasCommentField').value" class="col-12 mb-2" [formGroup]="fieldsetEntry.form">
								<input matInput formControlName="commentFieldValue" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate}}">
								<mat-hint>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-HINT' | translate}}</mat-hint>
							</mat-form-field>
							<!-- <div class="col"></div>
							<button class="col-auto" mat-icon-button type="button" (click)="next(compositeField)">
								<mat-icon>expand_more</mat-icon>
							</button> -->
						</div>
					</div>
		
				</div>
			</div>

		</ng-container>
		
		<ng-container *ngSwitchCase="tocentriesType.Section">
			<!-- SECTION CASE -->

			<div *ngIf="form.get('sections')" class="col-12"><!-- MAYBEE NOT NEEDED-->
				<div *ngFor="let sectionEntry of tocentry.subEntries; let j = index;" class="row">
					<app-form-section [TOCENTRY_ID_PREFIX]="TOCENTRY_ID_PREFIX" class="col-12" [tocentry]="sectionEntry" [form]="sectionEntry.form" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" [linkToScroll]="subsectionLinkToScroll"
					 [datasetProfileId]="datasetProfileId"
					 (askedToScroll)="onAskedToScroll($event)"
					 ></app-form-section>
				</div>
			</div>
		</ng-container>
		
	</ng-container>

</ng-template>