@nativescript/template-master-detail/app/cars/car-detail-edit-page/car-detail-edit-page.xml

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

<Page navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd">

    <ActionBar>
        <!-- HACK - we should remove the navigation button -->
        <NavigationButton visibility="collapsed" />
        <Label text="Edit Car Details" horizontalAlignment="center" />
        <ActionItem tap="onCancelButtonTap" ios.position="left">
            <Label text="Cancel" verticalAlignment="center" />
        </ActionItem>
        <ActionItem ios.position="right">
            <Label
        text="Done"
        verticalAlignment="center"
        tap="onDoneButtonTap"
        isEnabled="{{ car.isModelValid }}"
        isUserInteractionEnabled="{{ car.isModelValid }}"
      />
        </ActionItem>
    </ActionBar>

    <GridLayout>
        <ScrollView>
            <StackLayout class="car-list">
                <Label text="CAR MAKE" class="car-list-odd" />
                <TextField
          text="{{ car.name }}"
          hint="Car make field is required"
          class="{{ car.name, car.name ? 'car-list-even' : 'car-list-even placeholder-error' }}"
        />

                <GridLayout rows="*, 55, *" columns="*, auto" class="car-list-odd">
                    <Label text="PRICE PER DAY" />
                    <Label col="1" horizontalAlignment="right" class="car-list__value">
                        <FormattedString>
                            <Span text="€" />
                            <Span text="{{ car.price }}" />
                        </FormattedString>
                    </Label>

                    <StackLayout row="1" colSpan="2" verticalAlignment="center">
                        <Slider value="{{ car.price, car.price | roundingValueConverter }}" />
                    </StackLayout>

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

                <StackLayout class="car-list-even">
                    <GridLayout
            height="80"
            width="80"
            class="thumb"
            horizontalAlignment="left"
            backgroundImage="{{ car.imageUrl }}"
            tap="onImageAddRemoveTap"
          >
                        <GridLayout
              class="thumb__add"
              visibility="{{ car.imageUrl, car.imageUrl | visibilityValueConverter }}"
            >
                            <Label
                text="&#xf030;"
                class="fas"
                horizontalAlignment="center"
                verticalAlignment="center"
              />
                        </GridLayout>
                        <GridLayout
              class="thumb__remove"
              visibility="{{ car.imageUrl, !car.imageUrl | visibilityValueConverter }}"
            >
                            <Label
                text="&#xf2ed;"
                class="far"
                horizontalAlignment="center"
                verticalAlignment="center"
              />
                        </GridLayout>
                    </GridLayout>
                    <Label
            visibility="{{ car.imageUrl, car.imageUrl | visibilityValueConverter }}"
            class="c-error"
            text="Image field is required"
          />
                </StackLayout>

                <Label text="CLASS" class="car-list-odd" />
                <GridLayout columns="*, auto" tap="onSelectorTap" tag="class" class="car-list-even">
                    <Label text="{{ car.class }}" />
                    <Label
            text="&#xf054;"
            class="fas"
            col="1"
            horizontalAlignment="center"
            verticalAlignment="center"
          />
                </GridLayout>

                <Label text="DOORS" class="car-list-odd" />
                <GridLayout columns="*, auto" tap="onSelectorTap" tag="doors" class="car-list-even">
                    <Label text="{{ car.doors }}" />
                    <Label
            text="&#xf054;"
            class="fas"
            col="1"
            horizontalAlignment="center"
            verticalAlignment="center"
          />
                </GridLayout>

                <Label text="SEATS" class="car-list-odd" />
                <GridLayout columns="*, auto" tap="onSelectorTap" tag="seats" class="car-list-even">
                    <Label text="{{ car.seats }}" />
                    <Label
            text="&#xf054;"
            class="fas"
            col="1"
            horizontalAlignment="center"
            verticalAlignment="center"
          />
                </GridLayout>

                <Label text="TRANSMISSION" class="car-list-odd" />
                <GridLayout
          columns="*, auto"
          tap="onSelectorTap"
          tag="transmission"
          class="car-list-even"
        >
                    <Label text="{{ car.transmission }}" />
                    <Label
            text="&#xf054;"
            class="fas"
            col="1"
            horizontalAlignment="center"
            verticalAlignment="center"
          />
                </GridLayout>

                <GridLayout rows="*, 55" columns="*, auto" class="car-list-odd">
                    <Label text="LUGGAGE" />
                    <Label col="1" horizontalAlignment="right" class="car-list__value">
                        <FormattedString>
                            <Span text="{{ car.luggage }}" />
                            <Span text=" Bag(s)" />
                        </FormattedString>
                    </Label>

                    <Slider
            row="1"
            colSpan="2"
            minValue="0"
            maxValue="5"
            value="{{ car.luggage, car.luggage | roundingValueConverter }}"
          />
                </GridLayout>

            </StackLayout>
        </ScrollView>

        <ActivityIndicator busy="{{ isUpdating }}" />
    </GridLayout>
</Page>