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

83 lines
4.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- Το αφηνω σχόλιο για τεστινγ για να βλεπω αν μου ξεφευγει κάτι -->
<!-- <div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
<div class="btn-group pull-right">
<a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="margin-left:5px;padding-top: 7.5px;">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</div>
<div id="{{section.id}}" class="panel-collapse collapse in">
<div class="panel-body">
<div [id]="section.id" [formGroup]="form">
<h3 *ngIf="section.description">{{section.description}}</h3>
<h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
<div *ngIf="section.fieldGroups">
<div *ngFor="let group of section.fieldGroups; let j = index;">
<df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
</div>
</div>
<div *ngIf="section.sections">
<div *ngFor="let itemsection of section.sections; let j = index;">
<df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></df-section>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a> -->
<div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
<mat-accordion>
<mat-expansion-panel expanded=true>
<mat-expansion-panel-header>
<mat-panel-title>
{{path}} {{section.title}}
</mat-panel-title>
<mat-panel-description>
<h3 *ngIf="section.description">{{section.description}}</h3>
<h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
</mat-panel-description>
</mat-expansion-panel-header>
<!-- <div *ngIf="section.fieldGroups">
<div *ngFor="let group of section.fieldGroups; let j = index;">
<df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
</div>
</div> -->
<div *ngFor="let compositeField of section.compositeFields; let i = index;">
<div *ngIf="isVisible(pathName+'.compositeFields.'+i, compositeField)">
<div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)">
<a (click)="addMultipleField(i)" style="cursor: pointer">
Add one more fieldset +
</a>
</div>
<df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
<div *ngFor="let multipleCompositeField of compositeField.multiplicityItems; let j = index;">
<df-composite-field [compositeField]="multipleCompositeField" [form]="form.get('compositeFields').get(''+i).get('multiplicityItems').get(''+j)"
[pathName]="pathName+'.compositeFields.'+i+'.multiplicityItems.'+j"></df-composite-field>
</div>
</div>
<div *ngIf="compositeField.hasCommentField" [formGroup]="form.get('compositeFields').get(''+i)">
<mat-form-field>
<input matInput formControlName="commentFieldValue" placeholder="comment">
</mat-form-field>
</div>
</div>
<div *ngIf="section.sections">
<div *ngFor="let itemsection of section.sections; let j = index;">
<df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></df-section>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>