tns-template-master-detail-kinvey-ng/src/app/cars/car-detail-edit/car-detail-edit.component.html

Master-detail interface to display collection of items from Kinvey and inspect and edit selected item properties.

<ActionBar>
    <!--HACK - we should remove the navigation button-->
    <NavigationButton visibility="collapsed"></NavigationButton>
    <ActionItem ios.position="left" (tap)="onCancelButtonTap()">
        <Label text="Cancel"></Label>
    </ActionItem>
    <Label text="Edit Car Details" horizontalAlignment="center"></Label>
    <ActionItem ios.position="right">
        <Label text="Done" class="action-item" verticalAlignment="center" (tap)="onDoneButtonTap()" 
            [isEnabled]="makeModel.valid && imageModel.valid"
            [isUserInteractionEnabled]="makeModel.valid && imageModel.valid"></Label>
    </ActionItem>
</ActionBar>

<GridLayout>
    <ScrollView>
        <StackLayout class="car-list">

            <Label text="CAR MAKE" class="car-list-odd"></Label>
            <TextField #makeModel="ngModel" hint="Car make field is required" [(ngModel)]="car.name" class="car-list-even" required></TextField>
            
            <GridLayout rows="*, 55, *" columns="*, auto" class="car-list-odd">
                <Label text="PRICE PER DAY"></Label>
                <Label col="1" horizontalAlignment="right" class="car-list__value">
                    <FormattedString>
                        <Span text="€"></Span>
                        <Span [text]="pricePerDay"></Span>
                    </FormattedString>
                </Label>

                <StackLayout row="1" colSpan="2" verticalAlignment="center">
                    <Slider [(ngModel)]="pricePerDay"></Slider>
                </StackLayout>

                <Label text="ADD OR REMOVE IMAGE" row="2" colSpan="2"></Label>
            </GridLayout>

            <StackLayout class="car-list-even">
                <!--
                MyImageAddRemove is a custom component, that wraps an imagepicker plugin and provides custom design and logic
                on top of it. Check out the custom component at /cars/car-detail-edit/my-image-add-remove.
                -->
                <MyImageAddRemove #imageModel="ngModel" [(ngModel)]="carImageUrl" required></MyImageAddRemove>
                <Label *ngIf="!imageModel.valid" class="c-error" text="Image field is required"></Label>
            </StackLayout>

            <Label class="car-list-odd" text="CLASS"></Label>

            <StackLayout class="car-list-even">
                <!--
                MyListSelector is a custom component, that provides custom design and logic for picking an option from a list.
                Check out the custom component at /cars/car-detail-edit/my-list-selector.
                -->
                <MyListSelector [(selectedValue)]="car.class" [items]="carClassOptions" tag="class"></MyListSelector>
            </StackLayout>

            <Label class="car-list-odd" text="DOORS"></Label>

            <StackLayout class="car-list-even">
                <MyListSelector [(selectedValue)]="car.doors" [items]="carDoorOptions" tag="doors"></MyListSelector>
            </StackLayout>

            <Label class="car-list-odd" text="SEATS"></Label>

            <StackLayout class="car-list-even">
                <MyListSelector [(selectedValue)]="car.seats" [items]="carSeatOptions" tag="seats"></MyListSelector>
            </StackLayout>

            <Label class="car-list-odd" text="TRANSMISSION"></Label>

            <StackLayout class="car-list-even">
                <MyListSelector [(selectedValue)]="car.transmission" [items]="carTransmissionOptions" tag="transmission"></MyListSelector>
            </StackLayout>

            <GridLayout rows="*, 55" columns="*, auto" class="car-list-odd">
                <Label text="LUGGAGE"></Label>
                <Label col="1" horizontalAlignment="right" class="car-list__value">
                    <FormattedString>
                        <Span [text]="luggageValue"></Span>
                        <Span text=" Bag(s)"></Span>
                    </FormattedString>
                </Label>
                <Slider row="1" colSpan="2" minValue="0" maxValue="5" [(ngModel)]="luggageValue"></Slider>
            </GridLayout>

        </StackLayout>

    </ScrollView>

    <ActivityIndicator [busy]="isUpdating"></ActivityIndicator>
</GridLayout>