enrecipes/app/components/GroceryList.vue

84 lines
2 KiB
Vue
Raw Normal View History

2021-01-13 05:02:48 +00:00
<template>
<Page @loaded="onPageLoad">
<ActionBar flat="true">
<GridLayout rows="*" columns="auto, *, auto">
2021-01-23 17:20:15 +00:00
<MDButton class="er left" variant="text" :text="icon.back" automationText="Back" @tap="$navigateBack()" col="0" />
2021-01-13 05:02:48 +00:00
<Label class="title orkm" :text="'grocery' | L" col="1" />
2021-01-23 17:20:15 +00:00
<MDButton class="er left" variant="text" :text="icon.today" automationText="today" col="2" />
2021-01-13 05:02:48 +00:00
</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,
2021-01-23 17:20:15 +00:00
textColor: this.appTheme == "Light" ? "#fff" : "#292929",
2021-01-13 05:02:48 +00:00
actionTextColor: '#ff5200',
2021-01-23 17:20:15 +00:00
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
2021-01-13 05:02:48 +00:00
actionText: 'Undo',
hideDelay: 5000
} )
},
},
created() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
},
}
</script>