argos/dmp-frontend/src/app/projects/editor/project-editor.component.html

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

            </mat-card-header>
            <mat-card-content>

                <mat-form-field>
                    <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.LABEL' | 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>
                    <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
                        required>
                    <mat-error *ngIf="formGroup.get('abbreviation').errors?.backendError">{{baseErrorModel.abbreviation}}</mat-error>
                    <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                </mat-form-field>

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

                <table class="input-table full-width">
                    <tr>
                        <td>
                            <mat-form-field>
                                <input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}"
                                    class="table-input" [matDatepicker]="startDate" formControlName="startDate" required>
                                <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
                                <mat-datepicker #startDate></mat-datepicker>
                                <mat-error *ngIf="formGroup.get('startDate').errors?.backendError">{{this.project.errorModel.startDate}}</mat-error>
                                <mat-error *ngIf="formGroup.get('startDate').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                            </mat-form-field>
                        </td>
                        <td>
                            <mat-form-field>
                                <input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}"
                                    class="table-input" [matDatepicker]="endDate" formControlName="endDate" required>
                                <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
                                <mat-datepicker #endDate></mat-datepicker>
                                <mat-error *ngIf="formGroup.get('endDate').errors?.backendError">{{baseErrorModel.endDate}}</mat-error>
                                <mat-error *ngIf="formGroup.get('endDate').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
                            </mat-form-field>
                        </td>
                    </tr>
                </table>

                <mat-form-field class="full-width">
                    <textarea matInput class="description-area" placeholder="{{'PROJECT-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>
                <p>{{this.languageResolverService.getBy('editorLogo') | translate}}</p>

                <table class="logo-table full-width">
                    <tr>
                        <td>
                            <img mat-card-avatar [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
                        </td>
                        <td>
                            <app-fileuploader-component [form]="formGroup.get('files')" [label]="'FILE-UPLOADER.PROJECT'" [fileUploader]="uploaderService"></app-fileuploader-component>
                        </td>
                    </tr>
                </table>
                <div layout="row" class="full-width text-right" align="end">
                    <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
                    <button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE' | translate}}</button>
                    <button *ngIf="!isNew" mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE' | translate}}</button>
                </div>

            </mat-card-content>
        </mat-card>
    </form>
</div>