argos/dmp-frontend/src/app/datasets/dataset-wizard/dataset-wizard.component.html

<div class="dataset-wizard">
    <h3 *ngIf="isNew">New {{datasetWizardModel?.dmp?.project?.label}} Dataset</h3>
    <h3 *ngIf="!isNew">{{datasetWizardModel?.dmp?.project?.label}} Dataset</h3>
    <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
        (click)="save();" type="button">Save</button>
    <!-- .toString() -->
    <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
        (click)="saveFinalize();" type="button">Save and Finalize</button>
    <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
        (click)="downloadPDF();" type="button">Download PDF</button>
    <mat-horizontal-stepper [linear]="isLinear" #stepper>
        <mat-step [stepControl]="formGroup">
            <form *ngIf="formGroup" [formGroup]="formGroup">
                <ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
                <mat-form-field formGroupName="profile">
                    <mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" formControlName="id">
                        <mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
                            {{profile.label}}
                        </mat-option>
                    </mat-select>
                    <mat-error *ngIf="baseErrorModel?.status">{{baseErrorModel['Criteria.status']}}</mat-error>
                </mat-form-field>
                <app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component>
                <div class="navigation-buttons-container">
                    <button matStepperNext mat-raised-button style="float:right;" color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>

                </div>
            </form>
        </mat-step>
        <mat-step [stepControl]="formGroup">
            <form *ngIf="formGroup" [formGroup]="formGroup">
                <ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
                <td-chips color="accent" [items]="filtereddataRepositories" formControlName="dataRepositories" placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}"
                    (inputChange)="filterdataRepositories($event)" requireMatch>
                    <ng-template td-chip let-chip="chip">
                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
                        {{chip.name}}
                    </ng-template>
                    <ng-template td-autocomplete-option let-option="option">
                        <div layout="row" layout-align="start center">
                            {{option.name}}
                        </div>
                    </ng-template>
                    <mat-progress-bar [style.height.px]="2" *ngIf="filtereddataRepositoriesAsync" mode="indeterminate"></mat-progress-bar>
                </td-chips>

                <td-chips color="accent" [items]="filteredRegistries" formControlName="registries" placeholder="{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}"
                    (inputChange)="filterRegistries($event)" requireMatch>
                    <ng-template td-chip let-chip="chip">
                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
                        {{chip.name}}
                    </ng-template>
                    <ng-template td-autocomplete-option let-option="option">
                        <div layout="row" layout-align="start center">
                            {{option.name}}
                        </div>
                    </ng-template>
                    <mat-progress-bar [style.height.px]="2" *ngIf="filteredRegistriesAsync" mode="indeterminate"></mat-progress-bar>
                </td-chips>

                <td-chips color="accent" [items]="filteredServices" formControlName="services" placeholder="{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}"
                    (inputChange)="filterServices($event)" requireMatch>
                    <ng-template td-chip let-chip="chip">
                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
                        {{chip.name}}
                    </ng-template>
                    <ng-template td-autocomplete-option let-option="option">
                        <div layout="row" layout-align="start center">
                            {{option.name}}
                        </div>
                    </ng-template>
                    <mat-progress-bar [style.height.px]="2" *ngIf="filteredServicesAsync" mode="indeterminate"></mat-progress-bar>
                </td-chips>

                <td-chips color="accent" [items]="filteredExternalDatasets" formControlName="externalDatasets" placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}"
                    (inputChange)="filterExternalDatasets($event)" requireMatch>
                    <ng-template td-chip let-chip="chip">
                        <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
                        {{chip.label}}
                    </ng-template>
                    <ng-template td-autocomplete-option let-option="option">
                        <div layout="row" layout-align="start center">
                            {{option.label}}
                        </div>
                    </ng-template>
                    <mat-progress-bar [style.height.px]="2" *ngIf="filteredExternalDatasetsAsync" mode="indeterminate"></mat-progress-bar>
                </td-chips>

                <div class="navigation-buttons-container">
                    <button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
                    <button matStepperNext mat-raised-button color="primary" style="float:right;" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
                </div>
            </form>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
            <dynamic-form class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')"
                [dataModel]="datasetWizardModel"></dynamic-form>
            <div class="navigation-buttons-container">
                <button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
            </div>
        </mat-step>
    </mat-horizontal-stepper>
</div>