dnet-applications/frontends/dnet-is-application/src/app/vocabularies/voc-term-dialog.html

<form [formGroup]="termForm" (ngSubmit)="onSubmit()">
    <h1 mat-dialog-title *ngIf="data.code">Edit term</h1>
    <h1 mat-dialog-title *ngIf="!data.code">New term</h1>

    <div mat-dialog-content>
        <mat-form-field appearance="fill" style="width: 100%;">
            <mat-label>Code</mat-label>
            <input matInput formControlName="code" required />
            <mat-error *ngIf="termForm.get('id')?.invalid">This field is <strong>required</strong></mat-error>
        </mat-form-field>

        <mat-form-field appearance="fill" style="width: 100%;">
            <mat-label>Name</mat-label>
            <input matInput formControlName="name" required />
            <mat-error *ngIf="termForm.get('name')?.invalid">This field is <strong>required</strong></mat-error>
        </mat-form-field>

        <mat-form-field appearance="fill" style="width: 100%;">
            <mat-label>Encoding</mat-label>
            <input matInput formControlName="encoding" />
        </mat-form-field>

        <table mat-table [dataSource]="synonymsDatasource" class="mat-elevation-z8">

            <ng-container matColumnDef="term">
              <th mat-header-cell *matHeaderCellDef>Term</th>
              <td mat-cell *matCellDef="let element">{{element.term}}</td>
              <td mat-footer-cell *matFooterCellDef>
                <mat-form-field appearance="fill" style="width: 100%;">
                    <mat-label>New term</mat-label>
                    <input matInput formControlName="tmpSynonymTerm" />
                </mat-form-field>
              </td>
            </ng-container>
          
            <ng-container matColumnDef="encoding">
              <th mat-header-cell *matHeaderCellDef style="width: 20%;">Encoding</th>
              <td mat-cell *matCellDef="let element">{{element.encoding}}</td>
              <td mat-footer-cell *matFooterCellDef>
                <mat-form-field appearance="fill" style="width: 100%;">
                    <mat-label>New encoding</mat-label>
                    <input matInput formControlName="tmpSynonymEncoding" />
                </mat-form-field>
              </td>
            </ng-container>

            <ng-container matColumnDef="buttons">
                <th mat-header-cell *matHeaderCellDef style="text-align: right; width: 8em;"></th>
                <td mat-cell *matCellDef="let index = index" class="table-buttons">
                    <button mat-stroked-button 
                        color="warn"
                        type="button" 
                        (click)="removeSynonym(index)">
                        delete
                    </button>
                </td>
                <td mat-footer-cell *matFooterCellDef class="table-buttons">
                    <button mat-stroked-button 
                        color="primary"
                        type="button" 
                        (click)="addSynonym()" 
                        [disabled]="!isNewSynonymValid()">
                        add
                    </button>
                </td>
            </ng-container>
            
            <tr mat-header-row *matHeaderRowDef="synonymColums"></tr>
            <tr mat-row *matRowDef="let row; columns: synonymColums;"></tr>
          
            <!-- Row shown when there is no matching data. -->
            <tr class="mat-row" *matNoDataRow>
              <td class="mat-cell" colspan="3" style="padding: 0 16px;">No synonyms</td>
            </tr>

            <tr mat-footer-row *matFooterRowDef="synonymColums"></tr>
        </table>

        <!--
        <table style="border: 1px solid gray; font-size: 0.9em;">
            <thead>
                <tr>
                    <th style="text-align: left;">Synonym</th>
                    <th style="width: 20%; text-align: left;">Encoding</th>
                    <th style="width: 8em"></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngIf="synonyms.length == 0">
                    <td colspan="3">0 synonym(s)</td>
                </tr>
                <tr *ngFor="let s of synonyms; index as i">
                    <td>{{s.term}}</td>
                    <td>{{s.encoding}}</td>
                    <td class="table-buttons">
                        
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <mat-form-field appearance="fill" style="width: 100%;">
                            <mat-label>New term</mat-label>
                            <input matInput formControlName="tmpSynonymTerm" />
                        </mat-form-field>
                    </td>
                    <td>
                        <mat-form-field appearance="fill" style="width: 100%;">
                            <mat-label>New encoding</mat-label>
                            <input matInput formControlName="tmpSynonymEncoding" />
                        </mat-form-field>
                    </td>
                    <td class="table-buttons">
                        <button mat-stroked-button 
                            color="primary"
                            type="button" 
                            (click)="addSynonym()" 
                            [disabled]="!isNewSynonymValid()">
                            add
                        </button>
                    </td>
                </tr>
            </tfoot>
        </table>
        -->
    </div>

    <div mat-dialog-actions>
        <button mat-stroked-button color="primary" type="submit" [disabled]="!termForm.valid">Submit</button>
        <button mat-stroked-button color="primary" mat-dialog-close>Close</button>
        <mat-error *ngIf="termForm.errors?.['serverError']">
            {{ termForm.errors?.['serverError'] }}
        </mat-error>
    </div>

</form>