2020-11-15 10:51:10 +00:00
< template >
2020-12-07 14:45:00 +00:00
< Page >
2020-12-29 10:35:19 +00:00
< GridLayout columns = "*" rows = "auto, auto, *, auto" class = "dialogContainer" :class ="appTheme" >
< Label row = "0" class = "dialogTitle orkm" : text = "`${title}` | L" textWrap = 'true' / >
< StackLayout row = "1" v-if ="filteredRecipes.length || searchQuery" padding="0 24 24" >
< TextField : hint = "'Search' | L" v -model = " searchQuery " / >
2020-11-15 10:51:10 +00:00
< / StackLayout >
2020-12-29 10:35:19 +00:00
< ScrollView row = "2" width = "100%" : height = "height ? height : ''" >
2020-12-07 14:45:00 +00:00
< StackLayout >
< MDButton v -for = " ( recipe , index ) in filteredRecipes " :key ="index" class = "actionItem" variant = "text" :rippleColor ="rippleColor" :text ="recipe.title" @loaded ="onLabelLoaded" @tap ="tapAction(recipe)" / >
< Label padding = "24" lineHeight = "6" v -if = " ! filteredRecipes.length " : text = "'Nothing here! Add some recipes and try again.' | L" textAlignment = "center" textWrap = "true" / >
< / StackLayout >
< / ScrollView >
2020-12-29 10:35:19 +00:00
< GridLayout row = "3" rows = "auto" columns = "auto, *, auto" class = "actionsContainer" >
2020-12-07 14:45:00 +00:00
< MDButton :rippleColor ="rippleColor" variant = "text" v -if = " action " col = "0" class = "action orkm pull-left" : text = "`${action}` | L" @tap ="$modal.close(action)" / >
< MDButton :rippleColor ="rippleColor" variant = "text" col = "2" class = "action orkm pull-right" : text = "'CANCEL' | L" @tap ="$modal.close(false)" / >
< / GridLayout >
2020-12-29 10:35:19 +00:00
< / GridLayout >
2020-12-07 14:45:00 +00:00
< / Page >
2020-11-15 10:51:10 +00:00
< / template >
< script >
2020-12-07 14:45:00 +00:00
import {
Application ,
Screen
}
from "@nativescript/core"
2020-11-15 10:51:10 +00:00
export default {
2020-12-07 14:45:00 +00:00
props : [ "title" , "recipes" , "height" , "action" ] ,
2020-11-15 10:51:10 +00:00
data ( ) {
return {
2020-12-29 10:35:19 +00:00
searchQuery : "" ,
2020-11-15 10:51:10 +00:00
}
} ,
computed : {
appTheme ( ) {
return Application . systemAppearance ( )
} ,
rippleColor ( ) {
2020-12-07 14:45:00 +00:00
return this . appTheme == "light" ? "rgba(134,142,150,0.2)" : "rgba(206,212,218,0.1)"
2020-11-15 10:51:10 +00:00
} ,
screenHeight ( ) {
2020-12-07 14:45:00 +00:00
return Math . round ( Screen . mainScreen . heightDIPs )
2020-11-15 10:51:10 +00:00
} ,
filteredRecipes ( ) {
2020-12-07 14:45:00 +00:00
return this . recipes . map ( ( e , i ) => {
return {
id : e . id ,
title : e . title ,
2020-12-29 10:35:19 +00:00
cuisine : e . cuisine ,
category : e . category ,
tags : e . tags . map ( e => e . toLowerCase ( ) ) . join ( ) ,
ingredients : e . ingredients . map ( e => e . item . toLowerCase ( ) ) . join ( ) ,
2020-12-07 14:45:00 +00:00
}
2020-12-29 10:35:19 +00:00
} ) . filter ( ( e ) => this . recipeFilter ( e ) )
2020-11-15 10:51:10 +00:00
} ,
2020-12-29 10:35:19 +00:00
2020-11-15 10:51:10 +00:00
} ,
methods : {
2020-12-07 14:45:00 +00:00
tapAction ( recipe ) {
this . $modal . close ( recipe . id )
2020-11-15 10:51:10 +00:00
} ,
2020-12-07 14:45:00 +00:00
onLabelLoaded ( args ) {
args . object . android . setGravity ( 16 )
2020-11-15 10:51:10 +00:00
} ,
2020-12-29 10:35:19 +00:00
recipeFilter ( e ) {
let searchQuery = this . searchQuery . toLowerCase ( )
return e . title . includes ( searchQuery ) || e . cuisine . includes ( searchQuery ) || e . category . includes ( searchQuery ) || e . tags . includes ( searchQuery ) || e . ingredients . includes ( searchQuery )
} ,
2020-11-15 10:51:10 +00:00
} ,
}
< / script >