project-form.component.html

<div class="no-shadow">

    <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

    <!-- success message after updating -->
    <dsp-message *ngIf="success" [message]="successMessage" [short]="true"></dsp-message>

    <!-- content -->
    <form *ngIf="!loading && project.status" [formGroup]="form" class="form-content project-data"
        (ngSubmit)="submitData()">

        <!-- short and long name -->
        <mat-form-field class="small-field">
            <input matInput placeholder="{{'appLabels.form.project.general.shortcode' | translate}} * "
                [maxlength]="shortcodeMaxLength" [formControl]="form.controls['shortcode']">
            <mat-hint *ngIf="formErrors.shortcode">
                {{ formErrors.shortcode }}
            </mat-hint>
        </mat-form-field>

        <!-- short name -->
        <mat-form-field class="medium-field">
            <input matInput [maxlength]="shortnameMaxLength"
                placeholder="{{'appLabels.form.project.general.shortname' | translate}} * "
                [formControl]="form.controls['shortname']">
            <mat-hint *ngIf="formErrors.shortname">
                {{ formErrors.shortname }}
            </mat-hint>
        </mat-form-field>

        <!-- long name -->
        <mat-form-field class="large-field">
            <input matInput placeholder="{{'appLabels.form.project.general.longname' | translate}} *"
                [formControl]="form.controls['longname']">
            <mat-hint *ngIf="formErrors.longname">
                {{ formErrors.longname }}
            </mat-hint>
        </mat-form-field>

        <!-- description -->
        <dsp-string-literal-input placeholder="{{'appLabels.form.project.general.description' | translate}} *"
            [disabled]="!project.status" [textarea]="true" [value]="project.description"
            (dataChanged)="getStringLiteral($event)">
        </dsp-string-literal-input>
        <mat-hint class="string-literal-error" *ngIf="formErrors.description">
            {{ formErrors.description }}
        </mat-hint>

        <!-- <mat-form-field class="large-field">
            <textarea matInput matTextareaAutosize [matAutosizeMinRows]="6" [matAutosizeMaxRows]="12"
                      [placeholder]=" 'appLabels.form.project.general.description' | translate "
                      [formControl]="form.controls['description']">
            </textarea>
            <mat-hint *ngIf="formErrors.description">
                {{ formErrors.description }}
            </mat-hint>
        </mat-form-field> -->

        <!-- institution -->
        <!--
        <mat-form-field class="large">
            <input matInput
                   placeholder="{{'appLabels.form.project.general.institution' | translate}}"
                   [formControl]="projectDataForm.controls['institution']">
            <mat-hint *ngIf="formErrors.institution">
                {{ formErrors.institution }}
            </mat-hint>
        </mat-form-field>
        -->
        <!-- keywords -->
        <mat-form-field class="large-field">
            <mat-chip-list #chipList>
                <mat-chip *ngFor="let tag of keywords" [selectable]="selectable" [removable]="project.status"
                    (removed)="removeKeyword(tag)">
                    {{tag}}
                    <mat-icon matChipRemove *ngIf="project.status">cancel</mat-icon>
                </mat-chip>
                <input placeholder="{{'appLabels.form.project.general.keywords' | translate}} *"
                    [formControl]="form.controls['keywords']" [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeyCodes" [matChipInputAddOnBlur]="addOnBlur"
                    (matChipInputTokenEnd)="addKeyword($event)" />
            </mat-chip-list>
            <mat-hint *ngIf="formErrors.keywords">
                {{ formErrors.keywords }}
            </mat-hint>
        </mat-form-field>

        <!-- upload logo -->
        <!--
        <app-file-uploader (uploadStatus)="sipiUpload($event)"></app-file-uploader>
        <!- the form needs an input field for the logo name
            the following input will be hidden and it gets the file name from the app-file-uploader -->
        <!-- dev control for image uploader
        <input matInput [hidden]="false"
            [placeholder]=" 'appLabels.form.project.general.logo.name' | translate "
            [formControl]="projectDataForm.controls['logo']"
            formControlName="logo">
        -->

        <div class="form-panel form-action">
            <span>
                <button mat-button type="reset" (click)="closeDialog.emit()">
                    {{ 'appLabels.form.action.cancel' | translate }}
                </button>
            </span>
            <span class="fill-remaining-space"></span>
            <span>
                <!-- TODO: description is required! Disable submit button, if description is empty -->
                <button mat-raised-button type="submit" color="primary"
                    [disabled]="!form.valid || !this.description.length || (projectCode && !project.status)">
                    <span *ngIf="projectCode">{{ 'appLabels.form.action.update' | translate }}</span>
                    <span *ngIf="!projectCode">{{ 'appLabels.form.action.submit' | translate }}</span>
                </button>
            </span>
        </div>
    </form>

</div>