property-form.component.html

<!-- content: Step 1 = define resource class -->
<!-- <form [formGroup]="propertyForm"
-->
<form [formGroup]="propertyForm" class="form-content">

    <p *ngIf="resClassIri && propertyInfo.propDef" class="note warning mat-caption center">
        You're adding an already existing property to this class.
        The property can't modified here. If you want to modify it,
        go to the "properties" view.
        <!-- Be careful when editing it, it could have an effect in other resource classes if it is used there. -->
    </p>

    <div class="center">

        <!-- property type -->
        <mat-form-field *ngIf="propertyInfo.propType" class="large-field ontology-form-field">
            <span matPrefix class="ontology-prefix-icon">
                <mat-icon>{{propertyForm.controls['propType'].value.icon}}</mat-icon>&nbsp;
            </span>
            <mat-label>Property type</mat-label>
            <!-- in case of edit property, the user can change the property type within the same group -->
            <mat-select formControlName="propType">
                <mat-select-trigger>
                    {{propertyForm.controls['propType'].value.group}}:&nbsp;
                    {{propertyForm.controls['propType'].value.label}}
                </mat-select-trigger>

                <mat-optgroup *ngFor="let type of restrictedPropertyTypes" [label]="type.group" [disabled]="propertyForm.controls['propType'].value.group !== type.group">
                    <mat-option *ngFor="let ele of type.elements" [value]="ele">
                        <mat-icon>{{ele.icon}}</mat-icon> {{ele.label}}
                    </mat-option>
                </mat-optgroup>
            </mat-select>
        </mat-form-field>

        <!-- name -->
        <mat-form-field class="large-field ontology-form-field">
            <span matPrefix class="ontology-prefix-icon">
                <mat-icon>fingerprint</mat-icon>&nbsp;
            </span>
            <mat-label>Property name *</mat-label>
            <input matInput formControlName="name" >
            <mat-hint class="ontology-error-with-prefix" *ngIf="formErrors.name">
                {{formErrors.name}}
            </mat-hint>
        </mat-form-field>

        <!-- label -->
        <div class="large-field string-literal-container">
            <app-string-literal-input
                [placeholder]="'Property label *'"
                [value]="labels"
                [disabled]="(resClassIri && propertyInfo.propDef)"
                (touched)="labelsTouched = $event"
                (dataChanged)="handleData($event, 'label')">
            </app-string-literal-input>
            <mat-hint class="string-literal-error" *ngIf="formErrors.label">
                {{ formErrors.label }}
            </mat-hint>
        </div>

        <!-- comment/description -->
        <div class="large-field string-literal-container">
            <app-string-literal-input
                [placeholder]="'Comment'"
                [value]="comments"
                [disabled]="(resClassIri && propertyInfo.propDef)"
                [textarea]="true"
                (dataChanged)="handleData($event, 'comment')">
            </app-string-literal-input>
        </div>

        <!-- depending on type: display gui attribute -->
        <div *ngIf="showGuiAttr" [ngSwitch]="propertyInfo.propType.objectType">
            <mat-form-field class="large-field property-type" *ngSwitchCase="dspConstants.ListValue">
                <span matPrefix class="property-type-icon">
                    <mat-icon>{{guiAttrIcon}}</mat-icon>&nbsp;
                </span>
                <mat-label>Select list</mat-label>
                <mat-select formControlName="guiAttr">
                    <mat-option *ngFor="let item of lists" [value]="item.id">
                        {{item.labels[0].value}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field class="large-field property-type" *ngSwitchCase="dspConstants.LinkValue">
                <span matPrefix class="property-type-icon">
                    <mat-icon>{{guiAttrIcon}}</mat-icon>&nbsp;
                </span>
                <mat-label>Select resource class</mat-label>
                <mat-select formControlName="guiAttr">
                    <mat-option *ngFor="let item of resourceClasses" [value]="item.id">
                        {{item.label}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <!-- the gui-attribute for integer and decimal are not yet supported in the app -->
            <mat-form-field class="large-field property-type"
                *ngSwitchCase="propertyInfo.propType.objectType === dspConstants.IntValue || propertyInfo.propType.objectType === dspConstants.DecimalValue">
                <span matPrefix class="property-type-icon">
                    <mat-icon>{{guiAttrIcon}}</mat-icon>&nbsp;
                </span>
                <mat-label>Define range</mat-label>
                <input matInput placeholder="min">
                <input matInput placeholder="max">
                <!-- <mat-select formControlName="guiAttr">
                            <mat-option *ngFor="let item of resourceClasses" [value]="item.id">
                                {{item.label}}
                            </mat-option>
                        </mat-select> -->
            </mat-form-field>
            <mat-hint *ngIf="formErrors.guiAttr">
                {{formErrors.guiAttr}}
            </mat-hint>
            <!-- <div *ngSwitchDefault>{{propertyInfo.propType.subPropOf}} not yet implemented</div> -->
        </div>

        <!-- TODO: in case of cardinality: diplay required and multiple checkboxes -->
        <div class="large-field cardinality" *ngIf="resClassIri">
            <mat-slide-toggle formControlName="multiple"
                [matTooltip]="'The property in this class can have multiple values'" [matTooltipPosition]="'above'">
                Multiple values?
            </mat-slide-toggle>

            <mat-slide-toggle formControlName="required" [matTooltip]="'The property in this class must have one value'"
                [matTooltipPosition]="'above'">
                Required field?
            </mat-slide-toggle>
        </div>

    </div>

    <!-- action buttons -->
    <div class="form-panel form-action">
        <button mat-button type="button" (click)="closeDialog.emit()">
            {{ 'appLabels.form.action.cancel' | translate }}
        </button>
        <span class="fill-remaining-space"></span>
        <button mat-raised-button type="button" color="primary"
            [disabled]="!labels.length || (propertyForm.enabled && !propertyForm.valid)" (click)="submitData()"
            class="submit">
            <app-progress-indicator [color]="'white'" [status]="0" *ngIf="loading" class="submit-progress">
            </app-progress-indicator>
            <mat-icon *ngIf="error && !loading">close</mat-icon>
            {{error ? 'Failed' : (resClassIri ? 'Add to class' : (propertyInfo.propDef ? 'Update' : 'Save'))}}
        </button>
    </div>
</form>
<!-- </form> -->