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

<div class="project-editor">
	<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>
	<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
		<mat-card>
			<mat-card-header>
				<div class="col-12 row">
					<table class="logo-table col-auto">
						<tr>
							<td>
								<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
								<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [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>
								<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*" />
								<!-- <app-fileuploader-component [form]="formGroup.get('files')" [label]="'FILE-UPLOADER.PROJECT'" [fileUploader]="uploaderService"></app-fileuploader-component> -->
							</td>
						</tr>
					</table>
					<div class="col"></div>
					<div *ngIf="!isNew" class="project-editor-header-actions col-auto">
						<div class="row actions-row">
							<div class="col-auto" *ngIf="!editMode && !isExternalProject()">
								<button mat-icon-button (click)="enableForm()">
									<mat-icon class="mat-24">edit</mat-icon>
								</button>
							</div>
							<div class="col-auto" *ngIf="editMode && !isExternalProject()">
								<button mat-icon-button (click)="disableForm()">
									<mat-icon class="mat-24">lock</mat-icon>
								</button>
							</div>
							<div class="col-auto">
								<button mat-button (click)="goToProjectDmps()">
									<mat-icon class="mat-24">arrow_forward</mat-icon>
									<span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span>
								</button>
							</div>
						</div>
					</div>
				</div>
			</mat-card-header>
			<mat-card-content>
				<div class="row">
					<mat-form-field class="col-md-12">
						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label" required>
						<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
						<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>

					<mat-form-field class="col-md-6">
						<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation">
						<mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{baseErrorModel.abbreviation}}</mat-error>
					</mat-form-field>

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

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

					<mat-form-field class="col-md-6">
						<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}" class="table-input" [matDatepicker]="endDate" formControlName="endDate">
						<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
						<mat-datepicker #endDate></mat-datepicker>
						<mat-error *ngIf="formGroup.get('endDate').hasError('backendError')">{{baseErrorModel.endDate}}</mat-error>
						<mat-error *ngIf="formGroup.get('endDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>

					<mat-form-field class="col-md-12">
						<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea>
						<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
						<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
					</mat-form-field>

					<div class="col-md-12">
						<div class="row">
							<div class="col-auto right-button">
								<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' |
									translate}}</button>
							</div>
							<div class="col"></div>
							<div class="col-auto right-button" *ngIf="!isNew && editMode">
								<button mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE'
									| translate}}</button>
							</div>
							<div class="col-auto right-button" *ngIf="isNew || editMode">
								<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE'
									| translate}}</button>
							</div>
						</div>
					</div>
				</div>
			</mat-card-content>
		</mat-card>
	</form>
</div>