nakedobjects.spa/lib/app/edit-property/edit-property.component.html

Single Page Application client for a Naked Objects application.

<div [formGroup]="form">
    <div class="name">{{title}}:</div>
    <div class="field">
    <ng-container *ngIf="propertyType === 'ref'">

        <div *ngIf="!isEditable" class="value" [ngClass]="classes()">
            {{formattedValue}}
        </div>

        <div *ngIf="isEditable" class="input-control text" [ngSwitch]="propertyEntryType">
            <!--"EntryType.AutoComplete"-->
            <ng-container *ngSwitchCase="5">
                <nof-auto-complete #focus [form]="form" [model]="property"></nof-auto-complete>
            </ng-container>

            <!--"EntryType.ConditionalChoices"-->
            <ng-container *ngSwitchCase="3">
                <select #focus [id]="propertyPaneId"  [formControlName]="propertyId">                 
                    <option *ngFor="let choice of propertyChoices" [ngValue]="choice">{{choiceName(choice)}}</option>
                </select>
            </ng-container>

            <!--"EntryType.Choices"-->
            <ng-container *ngSwitchCase="1">
                <select #focus [id]="propertyPaneId"  [formControlName]="propertyId">
                    <option *ngFor="let choice of propertyChoices" [ngValue]="choice">{{choiceName(choice)}}</option>
                </select>
            </ng-container>

            <!--"EntryType.FreeForm"-->
            <ng-container *ngSwitchCase="0">
                <input #focus [id]="propertyPaneId" class="value droppable" dnd-droppable [allowDrop]="accept(property)" (onDropSuccess)="drop($event.dragData)"
                    [ngClass]="classes()" placeholder="{{propertyDescription}}" type="text" [formControlName]="propertyId"
                    [nofClear]="subject" (clear)="clear()" />
            </ng-container>

        </div>
    </ng-container>

    <ng-container *ngIf="propertyType === 'scalar'">

        <ng-container *ngIf="!isEditable">
            <ng-container [ngSwitch]="propertyReturnType">
                <ng-container *ngSwitchCase="'string'">
                    <nof-attachment-property *ngIf="isBlob" [attachment]="attachment"></nof-attachment-property>                    
                    <ng-container *ngIf="!isBlob">
                        <div *ngIf="!isMultiline" class="value">
                            {{formattedValue}}
                        </div>
                        <div *ngIf="isMultiline" class="value multiline" [ngStyle]="{height : multilineHeight}">
                            <pre>{{formattedValue}}</pre>
                        </div>
                    </ng-container>
                </ng-container>

                <ng-container *ngSwitchCase="'boolean'">
                    <input type="checkbox"  [checked]="value" disabled="disabled" />
                </ng-container>

                <ng-container *ngSwitchDefault>
                    <div class="value">
                        {{formattedValue}}
                    </div>
                </ng-container>

            </ng-container>
        </ng-container>

        <div *ngIf="isEditable" class="input-control text">
            <ng-container [ngSwitch]="propertyEntryType">
                <!--"EntryType.AutoComplete"-->
                <ng-container *ngSwitchCase="5">
                    <nof-auto-complete #focus [form]="form" [model]="property"></nof-auto-complete>
                </ng-container>

                <!--"EntryType.ConditionalChoices"-->
                <ng-container *ngSwitchCase="3">
                    <select #focus [id]="propertyPaneId"  [formControlName]="propertyId">
                        <option *ngFor="let choice of propertyChoices" [ngValue]="choice">{{choiceName(choice)}}</option>
                    </select>
                </ng-container>

                <!--"EntryType.Choices"-->
                <ng-container *ngSwitchCase="1">
                    <select #focus [id]="propertyPaneId"  [formControlName]="propertyId">
                        <option *ngFor="let choice of propertyChoices" [ngValue]="choice">{{choiceName(choice)}}</option>
                    </select>
                </ng-container>

                <!--"EntryType.FreeForm"-->
                <ng-container *ngSwitchCase="0">
                    <ng-container [ngSwitch]="propertyReturnType">
                        <ng-container *ngSwitchCase="'string'" [ngSwitch]="format">
                            <ng-container *ngSwitchCase="'date'">
                                <nof-date-picker-facade #focus [control]="control" [form]="form" [model]="property"></nof-date-picker-facade>
                            </ng-container>
                            <ng-container *ngSwitchCase="'time'">
                                <nof-time-picker-facade #focus [control]="control" [form]="form" [model]="property"></nof-time-picker-facade>
                            </ng-container>
                            <ng-container *ngSwitchDefault>
                                <input #focus *ngIf="!isMultiline" [id]="propertyPaneId"  placeholder="{{propertyDescription}}" type="{{isPassword ? 'password' : 'text'}}"
                                     [formControlName]="propertyId" [nofClear]="subject" (clear)="clear()" />
                                <textarea #focus *ngIf="isMultiline" rows="{{rows}}" [id]="propertyPaneId" [formControlName]="propertyId"
                                    placeholder="{{propertyDescription}}"></textarea>
                            </ng-container>
                        </ng-container>
                        <ng-container *ngSwitchCase="'boolean'">
                            <input #focus #checkbox [id]="propertyPaneId" type="checkbox" [formControlName]="propertyId"/>{{propertyDescription}}
                        </ng-container>
                        <ng-container *ngSwitchDefault>
                            <input #focus [id]="propertyPaneId"  type="text" placeholder="{{propertyDescription}}" [formControlName]="propertyId"
                                   [nofClear]="subject" (clear)="clear()" />
                        </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>
        </div>
    </ng-container>
    <div class="validation">{{message}}</div>
    </div>
</div>