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

<div class="dynamic-form-section row" [id]="section.id">
	<mat-accordion class="col-12">
		<mat-expansion-panel class="row expansion-panel toc-section-header" [id]="path" [(expanded)]="panelExpanded">
			<mat-expansion-panel-header>
				<mat-panel-title>
					<h6 class='panel-title' *ngIf="section?.sections?.length > 0">{{path}}.section {{section.title}}</h6>
					<h6 class='panel-title' *ngIf="section?.fieldSets?.length > 0">{{path}} {{section.title}}</h6>
				</mat-panel-title>
			</mat-expansion-panel-header>
			<mat-panel-description class="col-12">
				<h6 class='panel-desc' *ngIf="section.description" [innerHTML]="section.description"></h6>
			</mat-panel-description>
			<div *ngFor="let fieldSet of section.fieldSets; let i = index;" class="col-12" [id]="fieldSet.id" (click)="onAskedToScroll(fieldSet.id)">
				<!-- <div class="row" *ngIf="((this.visibilityRulesService.isVisibleMap[fieldsetEntry.form.get('id').value] ?? true) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(fieldsetEntry.form)) && !hiddenEntriesIds.includes(fieldsetEntry.id)"> -->
				<div class="row">
					<div class="col-12">
						<div *ngIf="!fieldSet?.multiplicity?.tableView" class="row">
							<!-- <app-form-field-set class="align-self-center col" [propertiesFormGroup]="propertiesFormGroup" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0"></app-form-field-set> -->
							<app-form-field-set *ngFor="let fieldSetPropertiesControl of propertiesFormGroup.get('fieldSets')?.get(fieldSet.id)?.get('items')?.controls" class="align-self-center col" [propertiesFormGroup]="fieldSetPropertiesControl.get('fields')" [fieldSet]="fieldSet" [path]="path + '.' + (i+1)" [visibilityRulesService]="visibilityRulesService" [isChild]="false"></app-form-field-set>
						</div>
						<ng-container *ngIf="fieldSet?.multiplicity?.tableView">
							<div class="row">
								<div class="col-12">
									<app-form-composite-title class="row" [fieldSet]="fieldSet"></app-form-composite-title>
								</div>
							</div>
							<!-- <table class="table table-bordered" style="table-layout: fixed">
								<tr>
									<ng-container *ngFor="let fieldFormGroup of fieldsetEntry.form.get('fields')['controls']; let i = index;">
										<th *ngIf="this.visibilityRulesService.isVisibleMap[fieldFormGroup.get('id').value] ?? true" class="text-wrap">{{fieldFormGroup.get('data').value.label}}</th>
									</ng-container>
									<th class="actions"></th>
								</tr>
								<tr app-form-field-set [form]="fieldsetEntry.form" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService" [isChild]="false" [showDelete]="(fieldsetEntry.form.get('multiplicityItems').length) > 0" [tableRow]="true"></tr>
								<ng-container *ngIf="fieldsetEntry.form && fieldsetEntry.form.get('multiplicity').value.tableView">
									<tr app-form-field-set *ngFor="let multipleCompositeFieldFormGroup of fieldsetEntry.form.get('multiplicityItems')['controls']; let j = index" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId" [visibilityRulesService]="visibilityRulesService" [isChild]="true" [showDelete]="true" [tableRow]="true"></tr>
								</ng-container>
								<tr *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)">
									<td [colSpan]="visibleControls(fieldsetEntry.form.get('fields')['controls']).length + 1" class="text-center">
										<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
											<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
												<mat-icon>add_circle</mat-icon>
											</button>
											<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>
											<span class="mt-1" *ngIf="!fieldsetEntry.form.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldsetEntry.form.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
										</span>
									</td>
								</tr>
							</table> -->
						</ng-container>
					</div>

					<!-- <div *ngIf="fieldsetEntry.form && !fieldsetEntry.form.get('multiplicity').value.tableView" 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-field-set class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true" [showDelete]="true"></app-form-field-set>
								</div>
							</div>
							<div *ngIf="(fieldsetEntry.form.get('multiplicity').value.max - 1) > (fieldsetEntry.form.get('multiplicityItems').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
								<span class="d-inline-flex align-items-center" [ngClass]="fieldsetEntry.form.disabled ? '' : 'pointer'" (click)="addMultipleField(i)">
									<button mat-icon-button color="primary" [disabled]="fieldsetEntry.form.disabled">
										<mat-icon>add_circle</mat-icon>
									</button>
									<span class="mt-1" *ngIf="fieldsetEntry.form.get('multiplicity').value.placeholder">{{fieldsetEntry.form.get('multiplicity').value.placeholder}}</span>
									<span class="mt-1" *ngIf="!fieldsetEntry.form.get('multiplicity').value.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldsetEntry.form.get('multiplicity').value.tableView?'-TABLEVIEW':'')) | translate}}</span>
								</span>
							</div>
							<div *ngIf="fieldsetEntry.form.get('hasCommentField').value" class="col-12">
								<rich-text-editor-component [parentFormGroup]="fieldsetEntry.form" [controlName]="'commentFieldValue'" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="' mb-2'" [editable]="!fieldsetEntry.form.get('commentFieldValue').disabled">
								</rich-text-editor-component>
							</div>
						</div>
					</div> -->
				</div>
			</div>

			<div *ngIf="section?.sections?.length > 0" class="col-12">
				<ng-container *ngFor="let innerSection of section.sections; let j = index;">
					<!-- <div class="row" *ngIf="!hiddenEntriesIds.includes(sectionEntry.id)"> -->
					<div class="row">
						<app-form-section class="col-12" [section]="innerSection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j" (askedToScroll)="onAskedToScroll($event)" [propertiesFormGroup]="propertiesFormGroup" [visibilityRulesService]="visibilityRulesService" [linkToScroll]="subsectionLinkToScroll"></app-form-section>
					</div>
				</ng-container>
			</div>
		</mat-expansion-panel>
	</mat-accordion>
</div>