814 lines
31 KiB
Vue
814 lines
31 KiB
Vue
<template>
|
|
<Page @loaded="onPageLoad" @unloaded="releaseBackEvent">
|
|
<ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
|
|
<GridLayout rows="*" columns="auto, *, auto">
|
|
<MDButton variant="text" class="bx" :text="icon.back" automationText="Back" col="0" @tap="navigateBack" />
|
|
<Label class="title orkm" :text="`${title}` | L" col="1" />
|
|
<MDButton variant="text" v-if="hasChanges && !saving" class="bx" :text="icon.save" col="2" @tap="saveOperation" />
|
|
<MDActivityIndicator col="2" v-if="saving" :busy="saving" />
|
|
</GridLayout>
|
|
</ActionBar>
|
|
<ScrollView width="100%" height="100%" @scroll="onScroll">
|
|
<StackLayout width="100%" padding="0 0 88">
|
|
<AbsoluteLayout>
|
|
<StackLayout width="100%" :height="screenWidth" class="imageHolder" verticalAlignment="center">
|
|
<Image v-if="recipeContent.imageSrc" :src="recipeContent.imageSrc" stretch="aspectFill" width="100%" :height="screenWidth" />
|
|
<Label v-else horizontalAlignment="center" class="bx" fontSize="160" :text="icon.image" />
|
|
</StackLayout>
|
|
<transition :name="recipeContent.imageSrc ? 'null' : 'bounce'">
|
|
<MDFloatingActionButton v-if="showFab" :top="screenWidth - 44" :left="screenWidth - 88" class="bx" src="res://camera" @tap="imageHandler" />
|
|
</transition>
|
|
</AbsoluteLayout>
|
|
<StackLayout margin="0 16">
|
|
<AbsoluteLayout class="inputField">
|
|
<TextField :hint="'My Healthy Recipe' | L" v-model="recipeContent.title" @loaded="setInputTypeText($event, 'words')" />
|
|
<Label top="0" class="fieldLabel" :text="'Title' | L" />
|
|
</AbsoluteLayout>
|
|
<GridLayout columns="*, 8, *">
|
|
<AbsoluteLayout class="inputField" col="0">
|
|
<TextField :text="`${recipeContent.cuisine}` | L" editable="false" @focus="modalOpen === false && showCuisine(true)" @tap="showCuisine(false)" />
|
|
<Label top="0" class="fieldLabel" :text="'Cuisine' | L" />
|
|
</AbsoluteLayout>
|
|
<AbsoluteLayout class="inputField" col="2">
|
|
<TextField ref='category' :text="`${recipeContent.category}` | L" editable="false" @focus="modalOpen === false && showCategories(true)" @tap="showCategories(false)" />
|
|
<Label top="0" class="fieldLabel" :text="'Category' | L" />
|
|
</AbsoluteLayout>
|
|
</GridLayout>
|
|
<AbsoluteLayout class="inputField">
|
|
<TextField autocapitalizationType="words" ref='tags' :hint="`${$options.filters.L('separate with spaces')}`" v-model="tags" @textChange="splitTags" returnKeyType="next" />
|
|
<Label top="0" class="fieldLabel" :text="`${$options.filters.L('Tags')} (${$options.filters.L('separate with spaces')})`" />
|
|
</AbsoluteLayout>
|
|
<GridLayout columns="*, 8, *">
|
|
<AbsoluteLayout class="inputField" col="0">
|
|
<TextField :text="timeRequired('prepTime')" editable="false" @focus="
|
|
modalOpen === false && setTimeRequired(true, 'prepTime')
|
|
" @tap="setTimeRequired(false, 'prepTime')" />
|
|
<Label top="0" class="fieldLabel" :text="'Preparation time' | L" />
|
|
</AbsoluteLayout>
|
|
<AbsoluteLayout class="inputField" col="2">
|
|
<TextField ref="cookTime" :text="timeRequired('cookTime')" editable="false" @focus="
|
|
modalOpen === false && setTimeRequired(true, 'cookTime')
|
|
" @tap="setTimeRequired(false, 'cookTime')" />
|
|
<Label top="0" class="fieldLabel" :text="'Cooking time' | L" />
|
|
</AbsoluteLayout>
|
|
</GridLayout>
|
|
<GridLayout columns="*, 8, *">
|
|
<AbsoluteLayout class="inputField" col="0">
|
|
<TextField ref="yieldQuantity" v-model="recipeContent.yield.quantity" hint="1" keyboardType="number" returnKeyType="next" />
|
|
<Label top="0" class="fieldLabel" :text="'Yield quantity' | L" />
|
|
</AbsoluteLayout>
|
|
<AbsoluteLayout class="inputField" col="2">
|
|
<TextField :text="`${recipeContent.yield.unit}` | L" editable="false" @focus="modalOpen === false && showYieldUnits(true)" @tap="showYieldUnits(false)" />
|
|
<Label top="0" class="fieldLabel" :text="'Yield measured in' | L" />
|
|
</AbsoluteLayout>
|
|
</GridLayout>
|
|
<GridLayout columns="*, 8, *">
|
|
<AbsoluteLayout class="inputField" col="0">
|
|
<TextField ref="difficultyLevel" :text="`${recipeContent.difficulty}` | L" editable="false" @focus="modalOpen === false && showDifficultyLevel(true)" @tap="showDifficultyLevel(false)" />
|
|
<Label top="0" class="fieldLabel" :text="'Difficulty level' | L" />
|
|
</AbsoluteLayout>
|
|
</GridLayout>
|
|
<StackLayout class="hr" margin="24 16"></StackLayout>
|
|
</StackLayout>
|
|
<StackLayout margin="0 16">
|
|
<Label :text="'Ingredients' | L" class="sectionTitle" />
|
|
<GridLayout columns="auto,8,auto,8,*,8,auto" v-for="(ingredient, index) in recipeContent.ingredients" :key="index">
|
|
|
|
<TextField width="60" col="0" @loaded="!recipeContent.ingredients[index].item && focusField($event)" v-model="recipeContent.ingredients[index].quantity" hint="1.00" keyboardType="number" returnKeyType="next" />
|
|
|
|
<TextField width="76" col="2" :text="`${recipeContent.ingredients[index].unit}` | L" editable="false" @focus="modalOpen === false && showUnits($event, true, index)" @tap="showUnits($event, false, index)" />
|
|
|
|
<TextField ref="ingredient" @loaded="setInputTypeText($event, 'sentence')" col="4" v-model="recipeContent.ingredients[index].item" :hint="`${$options.filters.L('Item')} ${index + 1}`"
|
|
@returnPress="index+1 == recipeContent.ingredients.length && addIngredient()" />
|
|
|
|
<MDButton variant="text" col="6" class="bx closeBtn" :text="icon.close" @tap="removeIngredient(index)" />
|
|
</GridLayout>
|
|
<MDButton variant="text" class="text-btn orkm" :text="`+ ${$options.filters.L('ADD INGREDIENT')}`" @tap="addIngredient()" />
|
|
<StackLayout class="hr" margin="24 16"></StackLayout>
|
|
</StackLayout>
|
|
<StackLayout margin="0 16">
|
|
<Label :text="'Instructions' | L" class="sectionTitle" />
|
|
<GridLayout columns="*,8,auto" v-for="(instruction, index) in recipeContent.instructions" :key="index">
|
|
<TextView @loaded="focusField($event, 'multiLine')" col="0" :hint="`${$options.filters.L('Step')} ${index + 1}`" v-model="recipeContent.instructions[index]" />
|
|
<MDButton variant="text" col="2" class="bx closeBtn" :text="icon.close" @tap="removeInstruction(index)" />
|
|
</GridLayout>
|
|
<MDButton variant="text" class="text-btn orkm" :text="`+ ${$options.filters.L('ADD STEP')}`" @tap="addInstruction" />
|
|
<StackLayout class="hr" margin="24 16"></StackLayout>
|
|
</StackLayout>
|
|
<StackLayout margin="0 16">
|
|
<Label :text="'Notes' | L" class="sectionTitle" />
|
|
<GridLayout columns="*,8,auto" v-for="(note, index) in recipeContent.notes" :key="index">
|
|
<TextView @loaded="focusField($event, 'multiLine')" col="0" :hint="`${$options.filters.L('Note')} ${index + 1}`" v-model="recipeContent.notes[index]" />
|
|
<MDButton variant="text" col="2" class="bx closeBtn" :text="icon.close" @tap="removeNote(index)" />
|
|
</GridLayout>
|
|
<MDButton variant="text" class="text-btn orkm" :text="`+ ${$options.filters.L('ADD NOTE')}`" @tap="addNote" />
|
|
<StackLayout class="hr" margin="24 16"></StackLayout>
|
|
</StackLayout>
|
|
<StackLayout margin="0 16">
|
|
<Label :text="'Combinations' | L" class="sectionTitle" />
|
|
<GridLayout columns="*,8,auto" v-for="(combination, index) in recipeContent.combinations" :key="index">
|
|
<TextField class="combinationToken" col="0" :text="getCombinationTitle(combination)" editable="false" />
|
|
<MDButton variant="text" col="2" class="bx closeBtn" :text="icon.close" @tap="removeCombination(combination)" />
|
|
</GridLayout>
|
|
<MDButton variant="text" class="text-btn orkm" :text="`+ ${$options.filters.L('ADD COMBINATION')}`" @tap="showCombinations" />
|
|
</StackLayout>
|
|
</StackLayout>
|
|
</ScrollView>
|
|
</Page>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
AndroidApplication,
|
|
Application,
|
|
ApplicationSettings,
|
|
File,
|
|
getFileAccess,
|
|
ImageSource,
|
|
knownFolders,
|
|
path,
|
|
Screen,
|
|
Utils,
|
|
Observable
|
|
}
|
|
from "@nativescript/core"
|
|
import * as Permissions from "@nativescript-community/perms"
|
|
import * as Toast from "nativescript-toast"
|
|
import * as Filepicker from "nativescript-plugin-filepicker"
|
|
import {
|
|
ImageCropper
|
|
}
|
|
from "nativescript-imagecropper"
|
|
import {
|
|
localize
|
|
}
|
|
from "@nativescript/localize"
|
|
import {
|
|
mapState,
|
|
mapActions
|
|
}
|
|
from "vuex"
|
|
import ViewRecipe from "./ViewRecipe.vue"
|
|
import ActionDialog from "./modal/ActionDialog.vue"
|
|
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
|
|
import ConfirmDialog from "./modal/ConfirmDialog.vue"
|
|
import PromptDialog from "./modal/PromptDialog.vue"
|
|
import ListPicker from "./modal/ListPicker.vue"
|
|
import * as utils from "~/shared/utils"
|
|
export default {
|
|
props: [ "recipeID", "selectedCuisine", "selectedCategory", "selectedTag", "filterFavourites", "filterTrylater", "navigationFromView", ],
|
|
data() {
|
|
return {
|
|
title: "New recipe",
|
|
viewIsScrolled: false,
|
|
recipeContent: {
|
|
imageSrc: null,
|
|
title: undefined,
|
|
cuisine: "Undefined",
|
|
category: "Undefined",
|
|
tags: [],
|
|
prepTime: "00:00",
|
|
cookTime: "00:00",
|
|
yield: {
|
|
quantity: undefined,
|
|
unit: "Serving",
|
|
},
|
|
difficulty: "Easy",
|
|
rating: 0,
|
|
ingredients: [],
|
|
instructions: [],
|
|
combinations: [],
|
|
notes: [],
|
|
isFavorite: false,
|
|
tried: true,
|
|
lastTried: null,
|
|
lastModified: null,
|
|
created: null,
|
|
},
|
|
tempRecipeContent: {},
|
|
tags: undefined,
|
|
blockModal: false,
|
|
modalOpen: false,
|
|
newRecipeID: null,
|
|
showFab: false,
|
|
saving: false,
|
|
cacheImagePath: null,
|
|
unSyncCombinations: [],
|
|
difficultyLevels: [
|
|
"Easy",
|
|
"Moderate",
|
|
"Challenging",
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState( [ "icon", "units", "yieldUnits", "recipes", "cuisines", "categories", "currentComponent", ] ),
|
|
screenWidth() {
|
|
return Screen.mainScreen.widthDIPs
|
|
},
|
|
appTheme() {
|
|
return Application.systemAppearance()
|
|
},
|
|
hasChanges() {
|
|
return ( JSON.stringify( this.recipeContent ) !== JSON.stringify( this.tempRecipeContent ) )
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions( [ "setCurrentComponentAction", "addRecipeAction", "overwriteRecipeAction", "addListItemAction", "unSyncCombinationsAction", ] ),
|
|
onPageLoad( args ) {
|
|
const page = args.object;
|
|
page.bindingContext = new Observable();
|
|
this.showFab = true
|
|
},
|
|
timeRequired( time ) {
|
|
let t = this.recipeContent[ time ].split( ":" )
|
|
let h = parseInt( t[ 0 ] )
|
|
let m = parseInt( t[ 1 ] )
|
|
let hr = localize( 'hr' )
|
|
let min = localize( 'min' )
|
|
return h ? ( m ? `${h} ${hr} ${m} ${min}` : `${h} ${hr}` ) : `${m} ${min}`
|
|
},
|
|
// HELPERS
|
|
focusField( args, type ) {
|
|
if ( type ) this.setInputTypeText( args, type )
|
|
if ( !args.object.text ) {
|
|
args.object.focus()
|
|
setTimeout( ( e ) => Utils.ad.showSoftInput( args.object.android ), 100 )
|
|
}
|
|
},
|
|
setInputTypeText( args, type ) {
|
|
let field = args.object
|
|
let common = android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_FLAG_AUTO_CORRECT
|
|
switch ( type ) {
|
|
case "words":
|
|
field.android.setInputType( android.text.InputType.TYPE_TEXT_FLAG_CAP_WORDS | common )
|
|
break
|
|
case "sentence":
|
|
field.android.setInputType( android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES | common )
|
|
break
|
|
case "multiLine":
|
|
field.android.setInputType( android.text.InputType.TYPE_TEXT_FLAG_MULTI_LINE | android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES | common )
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
},
|
|
getRandomID() {
|
|
let res = ""
|
|
let chars = "abcdefghijklmnopqrstuvwxyz0123456789"
|
|
for ( let i = 0; i < 20; i++ ) {
|
|
res += chars.charAt( Math.floor( Math.random() * chars.length ) )
|
|
}
|
|
return res
|
|
},
|
|
setTimeRequired( focus, time ) {
|
|
this.modalOpen = true
|
|
let t = this.recipeContent[ time ].split( ":" )
|
|
let hr = t[ 0 ]
|
|
let min = t[ 1 ]
|
|
this.$showModal( ListPicker, {
|
|
props: {
|
|
title: `${time == "prepTime" ? "Preparation" : "Cooking"} time`,
|
|
action: "SET",
|
|
selectedHr: hr,
|
|
selectedMin: min,
|
|
},
|
|
} ).then( ( result ) => {
|
|
if ( result ) {
|
|
this.recipeContent[ time ] = result
|
|
this.modalOpen = false
|
|
if ( focus ) {
|
|
switch ( time ) {
|
|
case "prepTime":
|
|
this.autoFocusField( "cookTime", false )
|
|
break
|
|
case "cookTime":
|
|
this.autoFocusField( "yieldQuantity", true )
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
}
|
|
} )
|
|
},
|
|
onScroll( args ) {
|
|
this.viewIsScrolled = args.scrollY ? true : false
|
|
},
|
|
// DATA LIST
|
|
showCuisine( focus ) {
|
|
this.modalOpen = true
|
|
this.releaseBackEvent()
|
|
this.$showModal( ActionDialog, {
|
|
props: {
|
|
title: "Cuisine",
|
|
list: this.cuisines,
|
|
stretch: true,
|
|
action: "ADD NEW",
|
|
},
|
|
} ).then( ( action ) => {
|
|
if ( action == "ADD NEW" ) {
|
|
this.$showModal( PromptDialog, {
|
|
props: {
|
|
title: "New cuisine",
|
|
action: "ADD",
|
|
},
|
|
} ).then( ( item ) => {
|
|
this.hijackBackEvent()
|
|
if ( item.length ) {
|
|
this.recipeContent.cuisine = item
|
|
ApplicationSettings.setString( "previousCuisine", item )
|
|
this.addListItemAction( {
|
|
item,
|
|
listName: 'cuisines'
|
|
} )
|
|
this.modalOpen = false
|
|
if ( focus ) this.autoFocusField( "category", false )
|
|
}
|
|
} )
|
|
} else if ( action ) {
|
|
this.recipeContent.cuisine = action
|
|
ApplicationSettings.setString( "previousCuisine", action )
|
|
this.hijackBackEvent()
|
|
this.modalOpen = false
|
|
if ( focus ) this.autoFocusField( "category", false )
|
|
} else {
|
|
this.cuisines.includes( this.recipeContent.cuisine ) ? mull : this.recipeContent.cuisine = 'Undefined'
|
|
this.hijackBackEvent()
|
|
}
|
|
} )
|
|
},
|
|
showCategories( focus ) {
|
|
this.modalOpen = true
|
|
this.releaseBackEvent()
|
|
this.$showModal( ActionDialog, {
|
|
props: {
|
|
title: "Category",
|
|
list: this.categories,
|
|
stretch: true,
|
|
action: "ADD NEW",
|
|
},
|
|
} ).then( ( action ) => {
|
|
if ( action == "ADD NEW" ) {
|
|
this.$showModal( PromptDialog, {
|
|
props: {
|
|
title: "New category",
|
|
action: "ADD",
|
|
},
|
|
} ).then( ( item ) => {
|
|
this.hijackBackEvent()
|
|
if ( item.length ) {
|
|
this.recipeContent.category = item
|
|
ApplicationSettings.setString( "previousCategory", item )
|
|
this.addListItemAction( {
|
|
item,
|
|
listName: 'categories'
|
|
} )
|
|
this.modalOpen = false
|
|
if ( focus ) this.autoFocusField( "tags", true )
|
|
}
|
|
} )
|
|
} else if ( action ) {
|
|
this.recipeContent.category = action
|
|
ApplicationSettings.setString( "previousCategory", action )
|
|
this.hijackBackEvent()
|
|
this.modalOpen = false
|
|
if ( focus ) this.autoFocusField( "tags", true )
|
|
} else {
|
|
this.categories.includes( this.recipeContent.category ) ? mull : this.recipeContent.category = 'Undefined'
|
|
this.hijackBackEvent()
|
|
}
|
|
} )
|
|
},
|
|
showYieldUnits( focus ) {
|
|
this.modalOpen = true
|
|
this.releaseBackEvent()
|
|
this.$showModal( ActionDialog, {
|
|
props: {
|
|
title: "Yield measured in",
|
|
list: this.yieldUnits,
|
|
stretch: true,
|
|
action: "ADD NEW",
|
|
},
|
|
} ).then( ( action ) => {
|
|
if ( action == "ADD NEW" ) {
|
|
this.$showModal( PromptDialog, {
|
|
props: {
|
|
title: "New yield unit",
|
|
action: "ADD",
|
|
},
|
|
} ).then( ( item ) => {
|
|
this.hijackBackEvent()
|
|
if ( item.length ) {
|
|
this.recipeContent.yield.unit = item
|
|
ApplicationSettings.setString( "previousYieldUnit", item )
|
|
this.addListItemAction( {
|
|
item,
|
|
listName: 'yieldUnits'
|
|
} )
|
|
this.modalOpen = false
|
|
if ( focus ) this.autoFocusField( "difficultyLevel", false )
|
|
}
|
|
} )
|
|
} else if ( action ) {
|
|
this.recipeContent.yield.unit = action
|
|
ApplicationSettings.setString( "previousYieldUnit", action )
|
|
this.hijackBackEvent()
|
|
this.modalOpen = false
|
|
if ( focus ) this.autoFocusField( "difficultyLevel", false )
|
|
} else {
|
|
this.yieldUnits.includes( this.recipeContent.yield.unit ) ? mull : this.recipeContent.yield.unit = 'Serving'
|
|
this.hijackBackEvent()
|
|
}
|
|
} )
|
|
},
|
|
showDifficultyLevel( focus ) {
|
|
this.modalOpen = true
|
|
this.releaseBackEvent()
|
|
this.$showModal( ActionDialog, {
|
|
props: {
|
|
title: "Difficulty level",
|
|
list: this.difficultyLevels,
|
|
stretch: false,
|
|
},
|
|
} ).then( ( action ) => {
|
|
if ( action ) {
|
|
this.recipeContent.difficulty = action
|
|
this.hijackBackEvent()
|
|
this.modalOpen = false
|
|
if ( focus ) this.addIngredient()
|
|
} else {
|
|
this.difficultyLevels.includes( this.recipeContent.difficulty ) ? mull : this.recipeContent.difficulty = 'Easy'
|
|
this.hijackBackEvent()
|
|
}
|
|
} )
|
|
},
|
|
showUnits( e, focus, index ) {
|
|
this.modalOpen = true
|
|
this.releaseBackEvent()
|
|
this.$showModal( ActionDialog, {
|
|
props: {
|
|
title: "Units",
|
|
list: this.units,
|
|
stretch: true,
|
|
action: "ADD NEW",
|
|
},
|
|
} ).then( ( action ) => {
|
|
this.hijackBackEvent()
|
|
if ( action == "ADD NEW" ) {
|
|
this.$showModal( PromptDialog, {
|
|
props: {
|
|
title: "New unit",
|
|
action: "ADD",
|
|
},
|
|
} ).then( ( item ) => {
|
|
this.hijackBackEvent()
|
|
if ( item.length ) {
|
|
this.recipeContent.ingredients[ index ].unit = item
|
|
this.addListItemAction( {
|
|
item,
|
|
listName: 'units'
|
|
} )
|
|
this.modalOpen = false
|
|
if ( focus && this.recipeContent.ingredients.length - 1 === index )
|
|
this.autoFocusRefField( 'ingredient', index )
|
|
|
|
|
|
}
|
|
} )
|
|
} else if ( action ) {
|
|
this.recipeContent.ingredients[ index ].unit = action
|
|
this.modalOpen = false
|
|
if ( focus && this.recipeContent.ingredients.length - 1 === index ) this.autoFocusRefField( 'ingredient', index )
|
|
}
|
|
} )
|
|
},
|
|
autoFocusField( ref, showSoftInput ) {
|
|
this.$refs[ ref ].nativeView.focus()
|
|
if ( showSoftInput ) {
|
|
setTimeout( () => {
|
|
Utils.ad.showSoftInput( this.$refs[ ref ].nativeView.android )
|
|
}, 100 )
|
|
}
|
|
},
|
|
autoFocusRefField( ref, index ) {
|
|
this.$refs[ ref ][ index ].nativeView.focus()
|
|
setTimeout( () => {
|
|
Utils.ad.showSoftInput( this.$refs[ ref ][ index ].nativeView.android )
|
|
}, 100 )
|
|
},
|
|
// NAVIGATION HANDLERS
|
|
navigateBackController() {
|
|
if ( this.navigationFromView ) {
|
|
this.$navigateTo( ViewRecipe, {
|
|
props: {
|
|
filterTrylater: this.filterTrylater,
|
|
recipeID: this.recipeID,
|
|
},
|
|
backstackVisible: false,
|
|
} )
|
|
} else this.$navigateBack()
|
|
},
|
|
navigateBack() {
|
|
if ( this.hasChanges ) {
|
|
this.blockModal = true
|
|
this.$showModal( ConfirmDialog, {
|
|
props: {
|
|
title: "Unsaved changes",
|
|
description: localize( "Are you sure you want to discard unsaved changes to this recipe?" ),
|
|
cancelButtonText: "DISCARD",
|
|
okButtonText: "KEEP EDITING",
|
|
},
|
|
} ).then( ( action ) => {
|
|
this.blockModal = false
|
|
if ( action != null && !action ) {
|
|
this.navigateBackController()
|
|
this.releaseBackEvent()
|
|
}
|
|
} )
|
|
} else {
|
|
this.navigateBackController()
|
|
this.releaseBackEvent()
|
|
}
|
|
},
|
|
hijackBackEvent() {
|
|
AndroidApplication.on( AndroidApplication.activityBackPressedEvent, this.backEvent )
|
|
},
|
|
releaseBackEvent() {
|
|
AndroidApplication.off( AndroidApplication.activityBackPressedEvent, this.backEvent )
|
|
},
|
|
backEvent( args ) {
|
|
if ( this.hasChanges && !this.blockModal ) {
|
|
args.cancel = true
|
|
this.navigateBack()
|
|
}
|
|
},
|
|
// DATA HANDLERS
|
|
imageHandler() {
|
|
this.clearEmptyFields()
|
|
if ( this.recipeContent.imageSrc ) {
|
|
this.blockModal = true
|
|
this.$showModal( ConfirmDialog, {
|
|
props: {
|
|
title: "Recipe photo",
|
|
cancelButtonText: "REMOVE",
|
|
okButtonText: "REPLACE PHOTO",
|
|
},
|
|
} ).then( ( action ) => {
|
|
this.blockModal = false
|
|
if ( action ) {
|
|
this.permissionCheck( this.permissionConfirmation, this.imagePicker )
|
|
} else if ( action != null ) {
|
|
this.recipeContent.imageSrc = null
|
|
this.releaseBackEvent()
|
|
}
|
|
} )
|
|
} else {
|
|
this.permissionCheck( this.permissionConfirmation, this.imagePicker )
|
|
}
|
|
},
|
|
permissionConfirmation() {
|
|
return this.$showModal( ConfirmDialog, {
|
|
props: {
|
|
title: "Grant permission",
|
|
description: localize( "EnRecipes requires storage permission in order to set recipe photo." ),
|
|
cancelButtonText: "NOT NOW",
|
|
okButtonText: "CONTINUE",
|
|
},
|
|
} )
|
|
},
|
|
permissionCheck( confirmation, action ) {
|
|
if ( !ApplicationSettings.getBoolean( "storagePermissionAsked", false ) ) {
|
|
confirmation().then( ( e ) => {
|
|
if ( e ) {
|
|
Permissions.request( "photo" ).then( ( status ) => {
|
|
switch ( status[ 0 ] ) {
|
|
case "authorized":
|
|
action()
|
|
break
|
|
case "never_ask_again":
|
|
ApplicationSettings.setBoolean( "storagePermissionAsked", true )
|
|
break
|
|
case "denied":
|
|
Toast.makeText( localize( "Permission denied" ) ).show()
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
} )
|
|
}
|
|
} )
|
|
} else {
|
|
Permissions.check( "photo" ).then( ( res ) => {
|
|
res[ 0 ] !== "authorized" ? confirmation().then( ( e ) => e && utils.openAppSettingsPage() ) : action()
|
|
} )
|
|
}
|
|
},
|
|
imagePicker() {
|
|
ApplicationSettings.setBoolean( "storagePermissionAsked", true )
|
|
this.cacheImagePath = path.join( knownFolders.temp().path, `${this.getRandomID()}.jpg` )
|
|
Filepicker.create( {
|
|
mode: "single",
|
|
extensions: [ "png", "jpeg", "jpg" ],
|
|
} ).present().then( ( selection ) => {
|
|
let imgPath = selection[ 0 ]
|
|
ImageSource.fromFile( imgPath ).then( ( image ) => {
|
|
ImageCropper.prototype.show( image, {
|
|
width: 1080,
|
|
height: 1080,
|
|
}, {
|
|
hideBottomControls: true,
|
|
toolbarTitle: localize( "Crop photo" ),
|
|
statusBarColor: "#ff5200",
|
|
toolbarTextColor: this.appTheme == "light" ? "#212529" : "#f1f3f5",
|
|
toolbarColor: this.appTheme == "light" ? "#f1f3f5" : "#212529",
|
|
cropFrameColor: "#ff5200",
|
|
} ).then( ( cropped ) => {
|
|
cropped.image.saveToFile( this.cacheImagePath, "jpg", 75 )
|
|
this.recipeContent.imageSrc = this.cacheImagePath
|
|
} )
|
|
} )
|
|
} )
|
|
},
|
|
// INPUT FIELD HANDLERS
|
|
splitTags() {
|
|
let string
|
|
if ( this.tags ) {
|
|
let tags = this.tags.split( " " ).map( e => {
|
|
string = e.replace( /^[^\w\s]+/, '' )
|
|
if ( /^[A-Za-z]+/.test( string ) ) {
|
|
return string.charAt( 0 ).toUpperCase() + string.slice( 1 )
|
|
}
|
|
} ).filter( e => e )
|
|
this.recipeContent.tags = tags
|
|
}
|
|
},
|
|
joinTags() {
|
|
this.tags = this.recipeContent.tags.join( " " )
|
|
},
|
|
fieldDeletionConfirm( title ) {
|
|
return this.$showModal( ConfirmDialog, {
|
|
props: {
|
|
title,
|
|
cancelButtonText: "CANCEL",
|
|
okButtonText: "REMOVE",
|
|
},
|
|
} )
|
|
},
|
|
addIngredient() {
|
|
let ingredients = this.recipeContent.ingredients
|
|
let unit = ingredients.length ? ingredients[ ingredients.length - 1 ].unit : "unit"
|
|
this.recipeContent.ingredients.push( {
|
|
item: "",
|
|
quantity: null,
|
|
unit,
|
|
} )
|
|
},
|
|
removeIngredient( index ) {
|
|
this.modalOpen = true
|
|
if ( this.recipeContent.ingredients[ index ].item.length ) {
|
|
this.fieldDeletionConfirm( "Remove ingredient?" ).then( ( res ) => {
|
|
if ( res ) {
|
|
this.recipeContent.ingredients.splice( index, 1 )
|
|
}
|
|
} )
|
|
} else {
|
|
this.recipeContent.ingredients.splice( index, 1 )
|
|
}
|
|
setTimeout( e => this.modalOpen = false, 200 )
|
|
},
|
|
addInstruction() {
|
|
this.recipeContent.instructions.push( "" )
|
|
},
|
|
removeInstruction( index ) {
|
|
if ( this.recipeContent.instructions[ index ].length ) {
|
|
this.fieldDeletionConfirm( "Remove instruction?" ).then( ( res ) => {
|
|
res && this.recipeContent.instructions.splice( index, 1 )
|
|
} )
|
|
} else this.recipeContent.instructions.splice( index, 1 )
|
|
},
|
|
getCombinationTitle( id ) {
|
|
return this.recipes.filter( ( e ) => e.id === id )[ 0 ].title
|
|
},
|
|
showCombinations() {
|
|
let existingCombinations = [ ...this.recipeContent.combinations,
|
|
this.recipeContent.id,
|
|
]
|
|
let filteredRecipes = this.recipes.filter(
|
|
( e ) => !existingCombinations.includes( e.id ) )
|
|
this.$showModal( ActionDialogWithSearch, {
|
|
props: {
|
|
title: "Select a recipe",
|
|
recipes: filteredRecipes,
|
|
},
|
|
} ).then( ( res ) => {
|
|
if ( res ) {
|
|
this.recipeContent.combinations.push( res )
|
|
}
|
|
} )
|
|
},
|
|
removeCombination( id ) {
|
|
let index = this.recipeContent.combinations.indexOf( id )
|
|
this.fieldDeletionConfirm( "Remove combination?" ).then( res => {
|
|
if ( res ) {
|
|
this.recipeContent.combinations.splice( index, 1 )
|
|
this.unSyncCombinations.push( id )
|
|
}
|
|
} )
|
|
},
|
|
addNote() {
|
|
this.recipeContent.notes.push( "" )
|
|
},
|
|
removeNote( index ) {
|
|
if ( this.recipeContent.notes[ index ].length ) {
|
|
this.fieldDeletionConfirm( "Remove note?" ).then( ( res ) => {
|
|
if ( res ) this.recipeContent.notes.splice( index, 1 )
|
|
} )
|
|
} else this.recipeContent.notes.splice( index, 1 )
|
|
},
|
|
// SAVE OPERATION
|
|
clearEmptyFields() {
|
|
if ( !this.recipeContent.title ) this.recipeContent.title = localize( "Untitled Recipe" )
|
|
if ( !this.recipeContent.yield.quantity ) this.recipeContent.yield.quantity = 1
|
|
this.recipeContent.ingredients = this.recipeContent.ingredients.filter(
|
|
( e ) => e.item )
|
|
let vm = this
|
|
|
|
function clearEmpty( arr ) {
|
|
vm.recipeContent[ arr ] = vm.recipeContent[ arr ].filter( ( e ) => e )
|
|
}
|
|
clearEmpty( "instructions" )
|
|
clearEmpty( "notes" )
|
|
},
|
|
saveOperation() {
|
|
this.saving = this.modalOpen = true
|
|
this.clearEmptyFields()
|
|
this.recipeContent.lastModified = new Date()
|
|
if ( this.cacheImagePath ) {
|
|
let recipeImage = path.join( knownFolders.documents().getFolder( "EnRecipes" ).getFolder( "Images" ).path, `${this.getRandomID()}.jpg` )
|
|
let binarySource = File.fromPath( this.cacheImagePath ).readSync()
|
|
File.fromPath( recipeImage ).writeSync( binarySource )
|
|
this.recipeContent.imageSrc = recipeImage
|
|
knownFolders.temp().clear()
|
|
}
|
|
if ( this.recipeContent.imageSrc ) {
|
|
if ( this.tempRecipeContent.imageSrc && this.tempRecipeContent.imageSrc !== this.recipeContent.imageSrc ) {
|
|
getFileAccess().deleteFile( this.tempRecipeContent.imageSrc )
|
|
}
|
|
} else if ( this.tempRecipeContent.imageSrc ) {
|
|
getFileAccess().deleteFile( this.tempRecipeContent.imageSrc )
|
|
}
|
|
this.unSyncCombinationsAction( {
|
|
id: this.recipeID,
|
|
combinations: this.unSyncCombinations,
|
|
} )
|
|
this.saveRecipe()
|
|
},
|
|
saveRecipe() {
|
|
if ( this.recipeID ) {
|
|
this.overwriteRecipeAction( {
|
|
id: this.recipeID,
|
|
recipe: this.recipeContent,
|
|
} )
|
|
} else {
|
|
this.recipeContent.id = this.newRecipeID
|
|
this.addRecipeAction( {
|
|
id: this.newRecipeID,
|
|
recipe: this.recipeContent,
|
|
} )
|
|
}
|
|
setTimeout( () => {
|
|
this.saving = false
|
|
}, 100 )
|
|
this.navigateBackController()
|
|
},
|
|
},
|
|
created() {
|
|
setTimeout( ( e ) => {
|
|
this.setCurrentComponentAction( "EditRecipe" )
|
|
}, 500 )
|
|
this.title = this.recipeID ? "Edit recipe" : "New recipe"
|
|
if ( this.recipeID ) {
|
|
let recipe = this.recipes.filter( ( e ) => e.id === this.recipeID )[ 0 ]
|
|
Object.assign( this.recipeContent, JSON.parse( JSON.stringify( recipe ) ) )
|
|
Object.assign( this.tempRecipeContent, JSON.parse( JSON.stringify( this.recipeContent ) ) )
|
|
if ( this.recipeContent.tags.length ) this.joinTags()
|
|
} else {
|
|
this.recipeContent.cuisine = this.selectedCuisine ? /All/.test( this.selectedCuisine ) ? "Undefined" : this.selectedCuisine : ApplicationSettings.getString( "previousCuisine", "Undefined" )
|
|
this.recipeContent.category = this.selectedCategory ? /All/.test( this.selectedCategory ) ? "Undefined" : this.selectedCategory : ApplicationSettings.getString( "previousCategory", "Undefined" )
|
|
if ( this.selectedTag && !/All/.test( this.selectedTag ) ) {
|
|
this.tags = this.selectedTag
|
|
this.splitTags()
|
|
}
|
|
this.recipeContent.yield.unit = ApplicationSettings.getString( "previousYieldUnit", "Serving" )
|
|
if ( this.filterFavourites ) this.recipeContent.isFavorite = true
|
|
if ( this.filterTrylater ) this.recipeContent.tried = false
|
|
this.recipeContent.created = new Date()
|
|
Object.assign( this.tempRecipeContent, JSON.parse( JSON.stringify( this.recipeContent ) ) )
|
|
this.newRecipeID = this.getRandomID()
|
|
}
|
|
this.hijackBackEvent()
|
|
},
|
|
}
|
|
</script>
|