argos/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html

<div class="data-management-plan-editor">
    <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
        <mat-card>
            <mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
            <mat-card-title *ngIf="!isNew">{{formGroup.get('label').value}}</mat-card-title>
            <mat-card-content>

                <mat-form-field class="full-width">
                    <input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
                    <mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
                    <mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                </mat-form-field>

                <mat-form-field class="full-width">
                    <textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
                        required></textarea>
                    <mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
                    <mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                </mat-form-field>

                <auto-complete class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration"
                    titleKey="label" [control]="formGroup.get('project')" [required]="true">
                </auto-complete>

                <td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
                    (inputChange)="filterProfiles($event)" requireMatch required>
                    <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="filteredProfilesAsync" mode="indeterminate"></mat-progress-bar>
                    <span *ngIf="formGroup.get('profiles').touched || !formGroup.get('profiles').pristine">
                        <mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                    </span>
                </td-chips>


                <td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
                    (inputChange)="filterOrganisations($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="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
                </td-chips>

                <div layout="row"  layout-align="start center">
                    <td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
                        (inputChange)="filterResearchers($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="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
                    </td-chips>

                    <button style="display:inline-block;" mat-icon-button (click) ="addResearcher()">
                        <mat-icon aria-label="Example icon-button with a heart icon">add_circle</mat-icon>
                    </button>
                </div>


                <mat-list *ngIf="associatedUsers?.length" role="list">
                    <h3 mat-subheader>Associated Users</h3>
                    <mat-list-item role="listitem" *ngFor="let user of associatedUsers">
                        <mat-icon mat-list-icon>person</mat-icon>
                        <div>{{user.name}}</div>
                    </mat-list-item>
                </mat-list>


                <div layout="row" class="full-width text-right" align="end">
                    <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>
                    <!-- <button *ngIf="!isNew" mat-raised-button color="primary" (click)="invite()" type="button">{{'DMP-EDITOR.ACTIONS.INVITE' | translate}}</button> -->
                    <button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
                    <button *ngIf="!isNew" mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button>
                </div>

            </mat-card-content>
        </mat-card>
    </form>
    <!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</div>