added recipe count
This commit is contained in:
parent
f53e61d136
commit
6e506137f9
1 changed files with 52 additions and 72 deletions
|
@ -1,22 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<Page @loaded="onPageLoad" actionBarHidden="true" :androidStatusBarBackground="appTheme == 'Light' ? '#f1f3f5' : '#212529'">
|
<Page @loaded="onPageLoad" actionBarHidden="true" :androidStatusBarBackground="appTheme == 'Light' ? '#f1f3f5' : '#212529'">
|
||||||
|
|
||||||
<RadSideDrawer allowEdgeSwipe="true" showOverNavigation="true" ref="drawer" id="sideDrawer" drawerContentSize="270" gesturesEnabled="true" drawerTransition="SlideInOnTopTransition">
|
<RadSideDrawer allowEdgeSwipe="true" showOverNavigation="true" ref="drawer" id="sideDrawer" drawerContentSize="270" gesturesEnabled="true" drawerTransition="SlideInOnTopTransition">
|
||||||
<GridLayout rows="*, auto" columns="*" ~drawerContent class="sd">
|
<GridLayout rows="*, auto" columns="*" ~drawerContent class="sd">
|
||||||
<StackLayout row="0">
|
<StackLayout row="0">
|
||||||
<GridLayout rows="48" columns="auto, 24, *" v-for="(item, index) in topmenu" :key="index" class="sd-item orkm" :class="{
|
<GridLayout rows="48" columns="auto, *, auto" v-for="(item, index) in topmenu" :key="index" class="sd-item orkm" :class="{
|
||||||
'selected-sd-item': currentComponent === item.component,
|
'selected-sd-item': currentComponent === item.component,
|
||||||
}">
|
}">
|
||||||
<MDRipple row="0" colSpan="3" @tap="navigateTo(item.component, item.component, false, false)" />
|
<MDRipple row="0" colSpan="3" @tap="navigateTo(item.component, item.component, false, false)" />
|
||||||
<Label col="0" row="0" class="bx" :text="icon[item.icon]" />
|
<Label col="0" row="0" class="bx" :text="icon[item.icon]" />
|
||||||
<Label col="2" row="0" :text="`${item.title}` | L" />
|
<Label col="1" row="0" :text="`${item.title}` | L" />
|
||||||
|
<Label class="recipeCount" v-if="getRecipeCount(item.title)" :text="getRecipeCount(item.title)" col="2" />
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
<StackLayout class="hr" margin="8"></StackLayout>
|
<StackLayout class="hr" margin="8"></StackLayout>
|
||||||
<GridLayout rows="48" columns="auto, 24, *" class="sd-item orkm" :class="{
|
<GridLayout rows="48" columns="auto, *" class="sd-item orkm" :class="{
|
||||||
'selected-sd-item': currentComponent === 'MealPlanner',
|
'selected-sd-item': currentComponent === 'MealPlanner',
|
||||||
}">
|
}">
|
||||||
<MDRipple row="0" colSpan="3" @tap="navigateTo(MealPlanner, 'MealPlanner', true, false)" />
|
<MDRipple row="0" colSpan="3" @tap="navigateTo(MealPlanner, 'MealPlanner', true, false)" />
|
||||||
|
|
||||||
<Label col="0" row="0" class="bx" :text="icon.calendar" />
|
<Label col="0" row="0" class="bx" :text="icon.calendar" />
|
||||||
<Label col="2" row="0" :text="'Meal Planner' | L" />
|
<Label col="2" row="0" :text="'Meal Planner' | L" />
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
|
@ -31,9 +30,10 @@
|
||||||
'selected-sd-item': currentComponent == item,
|
'selected-sd-item': currentComponent == item,
|
||||||
}" columns="auto, *, auto">
|
}" columns="auto, *, auto">
|
||||||
<MDRipple row="0" colSpan="3" @tap="navigateTo(item, item, false, true)" />
|
<MDRipple row="0" colSpan="3" @tap="navigateTo(item, item, false, true)" />
|
||||||
<Label col="0" class="bx" :text="icon.label" margin="0 24 0 0" />
|
<Label col="0" class="bx" :text="icon.label" />
|
||||||
<Label col="1" :text="`${item}` | L" />
|
<Label col="1" :text="`${item}` | L" />
|
||||||
<MDButton variant="text" v-if="editCategory" @tap="renameCategory(item)" col="2" class="bx" :text="icon.edit" />
|
<MDButton variant="text" v-if="editCategory" @tap="renameCategory(item)" col="2" class="bx" :text="icon.edit" />
|
||||||
|
<Label class="recipeCount" v-else :text="getRecipeCount(item)" col="2" />
|
||||||
</GridLayout>
|
</GridLayout>
|
||||||
</StackLayout>
|
</StackLayout>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
<StackLayout class="hr" margin="0 8 8"></StackLayout>
|
<StackLayout class="hr" margin="0 8 8"></StackLayout>
|
||||||
<GridLayout class="sd-item orkm" :class="{
|
<GridLayout class="sd-item orkm" :class="{
|
||||||
'selected-sd-item': currentComponent == item.title,
|
'selected-sd-item': currentComponent == item.title,
|
||||||
}" v-for="(item, index) in bottommenu" :key="index" rows="48" columns="auto, 24, *">
|
}" v-for="(item, index) in bottommenu" :key="index" rows="48" columns="auto, *">
|
||||||
<MDRipple colSpan="3" @tap="navigateTo(item.component, 'item.title', true, false)" />
|
<MDRipple colSpan="3" @tap="navigateTo(item.component, 'item.title', true, false)" />
|
||||||
<Label class="bx" col="0" :text="icon[item.icon]" />
|
<Label class="bx" col="0" :text="icon[item.icon]" />
|
||||||
<Label col="2" :text="`${item.title}` | L" />
|
<Label col="2" :text="`${item.title}` | L" />
|
||||||
|
@ -73,14 +73,11 @@ import {
|
||||||
mapState
|
mapState
|
||||||
}
|
}
|
||||||
from "vuex"
|
from "vuex"
|
||||||
|
|
||||||
import EnRecipes from "./EnRecipes"
|
import EnRecipes from "./EnRecipes"
|
||||||
import MealPlanner from "./MealPlanner"
|
import MealPlanner from "./MealPlanner"
|
||||||
import Settings from "./Settings"
|
import Settings from "./Settings"
|
||||||
import About from "./About"
|
import About from "./About"
|
||||||
|
|
||||||
import PromptDialog from "./modal/PromptDialog"
|
import PromptDialog from "./modal/PromptDialog"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -92,29 +89,24 @@ export default {
|
||||||
title: "EnRecipes",
|
title: "EnRecipes",
|
||||||
component: "EnRecipes",
|
component: "EnRecipes",
|
||||||
icon: "home",
|
icon: "home",
|
||||||
},
|
}, {
|
||||||
{
|
|
||||||
title: "Try Later",
|
title: "Try Later",
|
||||||
component: "Try Later",
|
component: "Try Later",
|
||||||
icon: "trylater",
|
icon: "trylater",
|
||||||
},
|
}, {
|
||||||
{
|
|
||||||
title: "Favourites",
|
title: "Favourites",
|
||||||
component: "Favourites",
|
component: "Favourites",
|
||||||
icon: "heart",
|
icon: "heart",
|
||||||
},
|
}, ],
|
||||||
],
|
|
||||||
bottommenu: [ {
|
bottommenu: [ {
|
||||||
title: "Settings",
|
title: "Settings",
|
||||||
component: Settings,
|
component: Settings,
|
||||||
icon: "cog",
|
icon: "cog",
|
||||||
},
|
}, {
|
||||||
{
|
|
||||||
title: "About",
|
title: "About",
|
||||||
component: About,
|
component: About,
|
||||||
icon: "info",
|
icon: "info",
|
||||||
},
|
}, ],
|
||||||
],
|
|
||||||
editCategory: false,
|
editCategory: false,
|
||||||
appTheme: "Light",
|
appTheme: "Light",
|
||||||
}
|
}
|
||||||
|
@ -124,14 +116,7 @@ export default {
|
||||||
MealPlanner,
|
MealPlanner,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState( [
|
...mapState( [ "icon", "recipes", "categories", "yieldUnits", "mealPlans", "currentComponent", ] ),
|
||||||
"icon",
|
|
||||||
"recipes",
|
|
||||||
"categories",
|
|
||||||
"yieldUnits",
|
|
||||||
"mealPlans",
|
|
||||||
"currentComponent",
|
|
||||||
] ),
|
|
||||||
categoriesWithRecipes() {
|
categoriesWithRecipes() {
|
||||||
let arr = this.recipes.map( ( e ) => {
|
let arr = this.recipes.map( ( e ) => {
|
||||||
return e.category
|
return e.category
|
||||||
|
@ -140,14 +125,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions( [
|
...mapActions( [ "setCurrentComponentAction", "initializeRecipes", "initializeCategories", "initializeYieldUnits", "initializeMealPlans", "renameCategoryAction", ] ),
|
||||||
"setCurrentComponentAction",
|
|
||||||
"initializeRecipes",
|
|
||||||
"initializeCategories",
|
|
||||||
"initializeYieldUnits",
|
|
||||||
"initializeMealPlans",
|
|
||||||
"renameCategoryAction",
|
|
||||||
] ),
|
|
||||||
onPageLoad() {
|
onPageLoad() {
|
||||||
if ( this.appTheme === "Light" ) {
|
if ( this.appTheme === "Light" ) {
|
||||||
const View = android.view.View
|
const View = android.view.View
|
||||||
|
@ -156,7 +134,6 @@ export default {
|
||||||
decorView.setSystemUiVisibility( View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR )
|
decorView.setSystemUiVisibility( View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR )
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// HELPERS
|
// HELPERS
|
||||||
toggleCatEdit() {
|
toggleCatEdit() {
|
||||||
this.editCategory = !this.editCategory
|
this.editCategory = !this.editCategory
|
||||||
|
@ -189,23 +166,32 @@ export default {
|
||||||
this.selectedCategory = e.item
|
this.selectedCategory = e.item
|
||||||
this.closeDrawer()
|
this.closeDrawer()
|
||||||
},
|
},
|
||||||
|
|
||||||
closeDrawer() {
|
closeDrawer() {
|
||||||
this.$refs.drawer.nativeView.closeDrawer()
|
this.$refs.drawer.nativeView.closeDrawer()
|
||||||
},
|
},
|
||||||
|
getRecipeCount( category ) {
|
||||||
|
let count = ''
|
||||||
|
switch ( category ) {
|
||||||
|
case 'EnRecipes':
|
||||||
|
count = this.recipes.length
|
||||||
|
break;
|
||||||
|
case 'Try Later':
|
||||||
|
count = this.recipes.filter( e => !e.tried ).length
|
||||||
|
break;
|
||||||
|
case 'Favourites':
|
||||||
|
count = this.recipes.filter( e => e.isFavorite ).length
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
count = this.recipes.filter( e => e.category === category ).length
|
||||||
|
}
|
||||||
|
return count
|
||||||
|
},
|
||||||
// NAVIGATION HANDLERS
|
// NAVIGATION HANDLERS
|
||||||
hijackGlobalBackEvent() {
|
hijackGlobalBackEvent() {
|
||||||
AndroidApplication.on(
|
AndroidApplication.on( AndroidApplication.activityBackPressedEvent, this.globalBackEvent )
|
||||||
AndroidApplication.activityBackPressedEvent,
|
|
||||||
this.globalBackEvent
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
releaseGlobalBackEvent() {
|
releaseGlobalBackEvent() {
|
||||||
AndroidApplication.off(
|
AndroidApplication.off( AndroidApplication.activityBackPressedEvent, this.globalBackEvent )
|
||||||
AndroidApplication.activityBackPressedEvent,
|
|
||||||
this.globalBackEvent
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
globalBackEvent( args ) {
|
globalBackEvent( args ) {
|
||||||
function preventDefault() {
|
function preventDefault() {
|
||||||
|
@ -215,12 +201,8 @@ export default {
|
||||||
preventDefault()
|
preventDefault()
|
||||||
this.closeDrawer()
|
this.closeDrawer()
|
||||||
this.editCategory = false
|
this.editCategory = false
|
||||||
}
|
} else if (
|
||||||
else if (
|
[ "Favourites", "Try Later", this.selectedCategory ].includes( this.currentComponent ) ) {
|
||||||
[ "Favourites", "Try Later", this.selectedCategory ].includes(
|
|
||||||
this.currentComponent
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
preventDefault()
|
preventDefault()
|
||||||
this.setCurrentComponentAction( "EnRecipes" )
|
this.setCurrentComponentAction( "EnRecipes" )
|
||||||
this.filterFavourites = this.filterTrylater = false
|
this.filterFavourites = this.filterTrylater = false
|
||||||
|
@ -237,8 +219,7 @@ export default {
|
||||||
backstackVisible: false
|
backstackVisible: false
|
||||||
} )
|
} )
|
||||||
this.closeDrawer()
|
this.closeDrawer()
|
||||||
}
|
} else if ( !this.editCategory || !isCategory ) {
|
||||||
else if ( !this.editCategory || !isCategory ) {
|
|
||||||
this.releaseGlobalBackEvent()
|
this.releaseGlobalBackEvent()
|
||||||
this.hijackGlobalBackEvent()
|
this.hijackGlobalBackEvent()
|
||||||
this.setCurrentComponentAction( to )
|
this.setCurrentComponentAction( to )
|
||||||
|
@ -253,8 +234,7 @@ export default {
|
||||||
this.closeDrawer()
|
this.closeDrawer()
|
||||||
}
|
}
|
||||||
this.editCategory = false
|
this.editCategory = false
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
this.closeDrawer()
|
this.closeDrawer()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue