enrecipes/app/components/GroceryList.vue

<template>
<Page @loaded="onPageLoad">
  <ActionBar flat="true">
    <GridLayout rows="*" columns="auto, *, auto">
      <MDButton class="er left" variant="text" :text="icon.back" automationText="Back" @tap="$navigateBack()" col="0" />
      <Label class="title orkm" :text="'grocery' | L" col="1" />
      <MDButton class="er left" variant="text" :text="icon.today" automationText="today" col="2" />
    </GridLayout>
  </ActionBar>
  <GridLayout columns="" rows="">

  </GridLayout>
</Page>
</template>

<script>
import {
  ApplicationSettings,
  Observable,
}
from "@nativescript/core"
import {
  SnackBar
} from '@nativescript-community/ui-material-snackbar';
const snackbar = new SnackBar();
import {
  mapState,
  mapActions
}
from "vuex"
export default {
  data() {
    return {
      appTheme: "Light",
    }
  },
  computed: {
    ...mapState( [ "icon", "recipes", "mealPlans" ] ),
    isLightMode() {
      return this.appTheme === "Light"
    },

  },
  methods: {
    ...mapActions( [ "setCurrentComponentAction" ] ),
    onPageLoad( args ) {
      const page = args.object;
      page.bindingContext = new Observable();
      this.setCurrentComponentAction( "GroceryList" )
    },
    // HELPERS

    // NAVIGATION HANDLERS
    viewRecipe( recipeID ) {
      let recipe = this.recipes.filter( ( e ) => e.id === recipeID )[ 0 ]
      if ( recipe ) {
        this.$navigateTo( ViewRecipe, {
          props: {
            filterTrylater: true,
            recipeID,
          },
          backstackVisible: false,
        } )
      }
    },
    // DATA HANDLERS
    undoRemove( message ) {
      return snackbar
        .action( {
          message,
          textColor: this.appTheme == "Light" ? "#fff" : "#292929",
          actionTextColor: '#ff5200',
          backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
          actionText: 'Undo',
          hideDelay: 5000
        } )
    },
  },
  created() {
    this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
  },
}
</script>