argos/dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html

<div id="topofcontainer"></div>
<div class="row" [id]="idprefix+form.get('id').value" *ngIf="form" [@fade-in-fast]>
	<div class="col-12">
		<div class="row fieldset">
			<!-- SECTION INFO -->
			<div class="col-9 p-0" style="margin-bottom:2em;">
				<mat-card style="padding: 2em;">
					<mat-card-content>
						<app-description-template-editor-section-component [form]="form" [viewOnly]="viewOnly">
						</app-description-template-editor-section-component>
					</mat-card-content>
				</mat-card>
				<div class="row justify-content-center mt-4 mb-2">
					<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
						<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
							alt="Add Question icon">
						<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
					</div>
				</div>
			</div>
			<div class="col-2 col-xl-auto ml-4" *ngIf="!selectedFieldSetId && !viewOnly">

				<div class="row bg-white actions-list">
					<nav>
						<label class="action-list-label">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' |
							translate}}</label>
						<ul class="list-unstyled">
							<li class="mli">
								<div class="action-list-item" (click)="onAddFieldSet()">
									<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
									<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
										alt="Add Question icon">
									<span
										class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
										| translate}}</span>
								</div>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>

	</div>

	<!-- FIELDSET INFO -->
	<div class="col-12" dragula="FIELDSETS" [(dragulaModel)]="form.get('fieldSets').controls">

		<div style="margin-bottom: 2em; position: relative;" class="row fieldset"
			*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index"
			[id]="dragula_prefix+fieldset.get('id').value">
			<div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -7em; visibility: hidden;">
			</div>
			<div class="col-9 p-0">
				<mat-card (click)="selectedFieldSetId = fieldset.get('id').value"
					[ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
					<mat-card-content>

						<mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly">
							<mat-icon class="handle"
								style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon>
						</mat-card-header>
						<app-description-template-editor-composite-field-component [form]="fieldset"
							[viewOnly]="viewOnly" [numbering]="numbering + '.'+ (i+1)"
							[hasFocus]="fieldset.get('id').value === selectedFieldSetId"
							[datasetProfileId]="datasetProfileId"
							[validationErrorModel]="validationErrorModel"
							[validationRootPath]="validationRootPath + '.fieldSets[' + i + ']'"
							>
						</app-description-template-editor-composite-field-component>
					</mat-card-content>
				</mat-card>
			</div>

			<div class="col-2 col-xl-auto ml-4" *ngIf="selectedFieldSetId === fieldset.get('id').value &&(!viewOnly)">
				<div class="row bg-white actions-list stick-list">
					<nav *ngIf="!viewOnly">
						<label class="action-list-label">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.GENERAL-TOOLS' |
							translate}}</label>
						<ul class="list-unstyled">
							<li class="mli">
								<div class="action-list-item" (click)="onAddFieldSet()">
									<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
									<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
										alt="Add Question icon">
									<span
										class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
										| translate}}</span>
								</div>
							</li>


							<li class="mli">
								<div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
									<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
									<img src="/assets/images/editor/icons/clone.svg" class="input_icon"
										alt="Clone icon">
									<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' |
										translate}}</span>
								</div>
							</li>

							<li class="mli">
								<div class="action-list-item" (click)="onRemoveFieldSet(selectedFieldSetId)">
									<mat-icon class="action-list-icon">delete</mat-icon>
									<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.DELETE' |
										translate}}</span>
								</div>
							</li>
						</ul>
					</nav>
				</div>
			</div>
			<div class="col-9">
				<div class="row justify-content-center mt-4 mb-2">
					<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)"
						*ngIf="!viewOnly">
						<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
							alt="Add Question icon">
						<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>