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

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

import { Frame, Dialogs } from '@nativescript/core'

import { CarDetailEditViewModel } from './car-detail-edit-view-model'

/* ***********************************************************
 * This is the item detail edit code behind.
 * This code behind gets the selected data item, provides options to edit the item and saves the changes.
 *************************************************************/

/* ***********************************************************
 * Use the "onNavigatingTo" handler to get the data item id parameter passed through navigation.
 * Use it to initialize the view model and assign it to the view.
 *************************************************************/
export function onNavigatingTo(args) {
  /* ***********************************************************
   * The "onNavigatingTo" event handler lets you detect if the user navigated with a back button.
   * Skipping the re-initialization on back navigation means the user will see the
   * page in the same data state that he left it in before navigating.
   *************************************************************/
  if (args.isBackNavigation) {
    return
  }

  const page = args.object

  page.bindingContext = new CarDetailEditViewModel(page.navigationContext)
}

/* ***********************************************************
 * The edit cancel button navigates back to the item details page.
 *************************************************************/
export function onCancelButtonTap(args) {
  Frame.topmost().goBack()
}

/* ***********************************************************
 * The edit done button calls the view model save changes logic.
 *************************************************************/
export function onDoneButtonTap(args) {
  /* ***********************************************************
   * By design this app is set up to work with read-only sample data.
   * Follow the steps in the "Firebase database setup" section in app/readme.md file
   * and uncomment the code block below to make it editable.
   *************************************************************/

  /* ***********************************************************
    const actionItem = args.object;
    const bindingContext = actionItem.bindingContext;

    bindingContext.saveChanges()
        .then(() => Frame.topmost().navigate({
            moduleName: "cars/cars-list-page",
            animated: true,
            clearHistory: true,
            transition: {
                name: "slideBottom",
                duration: 200,
                curve: "ease"
            }
        }))
        .catch(() =>
            Dialogs.alert({
                title: "Oops!",
                message: "Something went wrong. Please try again.",
                okButtonText: "Ok"
            }));
    *************************************************************/

  /* ***********************************************************
   * Comment out the code block below if you made the app editable.
   *************************************************************/
  const readOnlyMessage =
    'Check out the "Firebase database setup" section in the readme file to make it editable.'
  const queue = Promise.resolve()
  queue
    .then(() =>
      Dialogs.alert({
        title: 'Read-Only Template!',
        message: readOnlyMessage,
        okButtonText: 'Ok',
      })
    )
    .then(() =>
      Frame.topmost().navigate({
        moduleName: 'cars/cars-list-page',
        animated: true,
        clearHistory: true,
        transition: {
          name: 'slideBottom',
          duration: 200,
          curve: 'ease',
        },
      })
    )
}

export function onSelectorTap(args) {
  const gridLayout = args.object
  const tag = gridLayout.tag
  const bindingContext = gridLayout.bindingContext
  const selectedValue = bindingContext.car[tag]
  const context = {
    tag,
    selectedValue,
  }
  const modalPagePath = 'cars/list-selector-modal-page/list-selector-modal-page'
  const page = gridLayout.page

  page.showModal(modalPagePath, {
    context: context,
    closeCallback: (value) => {
      if (value) {
        bindingContext.car.set(tag, value)
      }
    },
    fullscreen: false,
  })
}

export function onImageAddRemoveTap(args) {
  const gridLayout = args.object
  const bindingContext = gridLayout.bindingContext

  bindingContext.onImageAddRemove()
}