2020-11-15 10:51:10 +00:00
< template >
2020-12-07 14:45:00 +00:00
< Page >
< StackLayout class = "dialogContainer" :class ="appTheme" >
< Label class = "dialogTitle orkm" : text = "`${title}` | L" textWrap = 'true' / >
< StackLayout v-if ="filteredRecipes.length || searchTerm" padding="0 24 24" >
< TextField : hint = "'Search' | L" v -model = " searchTerm " / >
2020-11-15 10:51:10 +00:00
< / StackLayout >
2020-12-07 14:45:00 +00:00
< ScrollView width = "100%" : height = "height ? height : screenHeight - 320" >
< 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 >
< GridLayout rows = "auto" columns = "auto, *, auto" class = "actionsContainer" >
< 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 >
< / StackLayout >
< / 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 {
searchTerm : "" ,
}
} ,
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 ,
}
} ) . filter ( ( e ) => e . title . includes ( this . searchTerm ) )
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
} ,
} ,
}
< / script >