enrecipes/app/components/EditRecipe.vue

1123 lines
34 KiB
Vue
Raw Normal View History

2020-10-14 19:32:32 +00:00
<template>
2021-04-01 10:55:35 +00:00
<Page @loaded="onPageLoad" @unloaded="onPageUnload" actionBarHidden="true">
<GridLayout rows="*, auto" columns="auto, *">
<ScrollView
rowSpan="2"
colSpan="2"
@scroll="!showUndo && onScroll($event)"
>
<StackLayout padding="0 16 72">
<Label class="pageTitle" padding="16 0" :text="`${title}` | L" />
<Image
margin="8 0 32"
v-if="recipeContent.imageSrc"
:src="recipeContent.imageSrc"
stretch="aspectFit"
class="imgHolder"
:width="screenWidth - 32"
:height="screenWidth - 32"
@tap="imageHandler"
/>
<Button
v-else
margin="8 0 32"
class="ico imgHolder"
fontSize="128"
:width="screenWidth - 32"
:height="screenWidth - 32"
:text="icon.img"
@tap="imageHandler"
/>
<!-- OVERVIEW -->
2021-03-21 17:02:04 +00:00
<StackLayout class="inputField">
<Label class="fieldLabel" :text="'title' | L" />
<TextField
:hint="'recTitle' | L"
v-model="recipeContent.title"
@loaded="setInputTypeText($event, 'words')"
/>
</StackLayout>
2021-04-01 10:55:35 +00:00
<GridLayout columns="*, 8, *">
<StackLayout class="inputField">
2021-03-21 17:02:04 +00:00
<Label class="fieldLabel" :text="'cui' | L" />
<TextField
2021-04-01 10:55:35 +00:00
:text="recipeContent.cuisine | L"
2021-03-21 17:02:04 +00:00
editable="false"
@focus="modalOpen === false && showCuisine(true)"
@tap="showCuisine(false)"
/>
</StackLayout>
<StackLayout class="inputField" col="2">
<Label class="fieldLabel" :text="'cat' | L" />
<TextField
ref="category"
2021-04-01 10:55:35 +00:00
:text="recipeContent.category | L"
2021-03-21 17:02:04 +00:00
editable="false"
@focus="modalOpen === false && showCategories(true)"
@tap="showCategories(false)"
/>
</StackLayout>
</GridLayout>
<StackLayout class="inputField">
2021-04-01 10:55:35 +00:00
<Label class="fieldLabel" :text="'ts' | L" />
2021-03-21 17:02:04 +00:00
<TextField
2021-04-01 10:55:35 +00:00
:hint="'tsInfo' | L"
2021-03-21 17:02:04 +00:00
autocapitalizationType="words"
ref="tags"
v-model="tags"
@textChange="splitTags"
returnKeyType="next"
/>
</StackLayout>
2021-04-01 10:55:35 +00:00
<GridLayout columns="*, 8, *">
<StackLayout class="inputField">
2021-03-21 17:02:04 +00:00
<Label class="fieldLabel" :text="'prepT' | L" />
<TextField
:text="timeRequired('prepTime')"
editable="false"
@focus="
modalOpen === false && setTimeRequired(true, 'prepTime')
2021-03-21 17:02:04 +00:00
"
@tap="setTimeRequired(false, 'prepTime')"
/>
</StackLayout>
<StackLayout class="inputField" col="2">
<Label class="fieldLabel" :text="'cookT' | L" />
<TextField
ref="cookTime"
:text="timeRequired('cookTime')"
editable="false"
@focus="
modalOpen === false && setTimeRequired(true, 'cookTime')
2021-03-21 17:02:04 +00:00
"
@tap="setTimeRequired(false, 'cookTime')"
/>
</StackLayout>
</GridLayout>
2021-04-01 10:55:35 +00:00
<GridLayout columns="*, 8, *">
<StackLayout class="inputField">
2021-03-21 17:02:04 +00:00
<Label class="fieldLabel" :text="'yieldQ' | L" />
<TextField
ref="yieldQuantity"
v-model="recipeContent.yield.quantity"
hint="1"
keyboardType="number"
returnKeyType="next"
/>
</StackLayout>
<StackLayout class="inputField" col="2">
<Label class="fieldLabel" :text="'yieldU' | L" />
<TextField
:text="`${recipeContent.yield.unit}` | L"
editable="false"
@focus="modalOpen === false && showYieldUnits(true)"
@tap="showYieldUnits(false)"
/>
</StackLayout>
</GridLayout>
2021-04-01 10:55:35 +00:00
<GridLayout columns="*, 8, *">
<StackLayout class="inputField">
2021-03-21 17:02:04 +00:00
<Label class="fieldLabel" :text="'Difficulty level' | L" />
<TextField
ref="difficultyLevel"
:text="`${recipeContent.difficulty}` | L"
editable="false"
@focus="modalOpen === false && showDifficultyLevel(true)"
@tap="showDifficultyLevel(false)"
/>
</StackLayout>
</GridLayout>
2021-04-01 10:55:35 +00:00
<!-- INGREDIENTS -->
2021-03-21 17:02:04 +00:00
<Label
2021-04-01 10:55:35 +00:00
:text="getTitleCount('ings', 'ingredients')"
2021-03-21 17:02:04 +00:00
class="sectionTitle"
/>
<GridLayout
2021-04-01 10:55:35 +00:00
columns="auto,8,auto,8,*,8,auto"
2021-03-21 17:02:04 +00:00
v-for="(ingredient, index) in recipeContent.ingredients"
2021-04-01 10:55:35 +00:00
:key="'ing' + index"
2021-03-21 17:02:04 +00:00
>
<TextField
width="60"
@loaded="
!recipeContent.ingredients[index].item && focusField($event)
"
v-model="recipeContent.ingredients[index].quantity"
hint="1.00"
keyboardType="number"
returnKeyType="next"
/>
2020-12-29 10:35:19 +00:00
2021-03-21 17:02:04 +00:00
<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)"
/>
2020-12-29 10:35:19 +00:00
2021-03-21 17:02:04 +00:00
<TextField
ref="ingredient"
@loaded="setInputTypeText($event, 'sentence')"
col="4"
v-model="recipeContent.ingredients[index].item"
:hint="`${$options.filters.L('it')} ${index + 1}`"
@returnPress="
index + 1 == recipeContent.ingredients.length && addIngredient()
"
/>
2020-12-29 10:35:19 +00:00
2021-04-01 10:55:35 +00:00
<Button
2021-03-21 17:02:04 +00:00
col="6"
2021-04-01 10:55:35 +00:00
class="ico x"
2021-03-21 17:02:04 +00:00
:text="icon.x"
@tap="removeIngredient(index)"
/>
</GridLayout>
2021-04-01 10:55:35 +00:00
<Button
class="text big"
:text="'aIngBtn' | L"
2021-03-21 17:02:04 +00:00
@tap="addIngredient()"
/>
2021-04-01 10:55:35 +00:00
<!-- INSTRUCTIONS -->
<Label
:text="getTitleCount('inss', 'instructions')"
class="sectionTitle"
/>
2021-03-21 17:02:04 +00:00
<GridLayout
columns="*,8,auto"
v-for="(instruction, index) in recipeContent.instructions"
2021-04-01 10:55:35 +00:00
:key="'ins' + index"
2021-03-21 17:02:04 +00:00
>
<TextView
@loaded="focusField($event, 'multiLine')"
:hint="`${$options.filters.L('stp')} ${index + 1}`"
v-model="recipeContent.instructions[index]"
/>
2021-04-01 10:55:35 +00:00
<Button
2021-03-21 17:02:04 +00:00
col="2"
2021-04-01 10:55:35 +00:00
class="ico x"
2021-03-21 17:02:04 +00:00
:text="icon.x"
@tap="removeInstruction(index)"
/>
</GridLayout>
2021-04-01 10:55:35 +00:00
<Button
class="text big"
:text="'aStpBtn' | L"
2021-03-21 17:02:04 +00:00
@tap="addInstruction"
/>
2021-04-01 10:55:35 +00:00
<!-- COMBINATIONS -->
<Label
:text="getTitleCount('cmbs', 'combinations')"
class="sectionTitle"
/>
2021-03-21 17:02:04 +00:00
<GridLayout
columns="*,8,auto"
2021-04-01 10:55:35 +00:00
v-for="(combination, index) in recipeContent.combinations"
:key="'cmbs' + index"
2021-03-21 17:02:04 +00:00
>
2021-04-01 10:55:35 +00:00
<TextField
class="combField"
:text="getCombinationTitle(combination)"
editable="false"
2021-03-21 17:02:04 +00:00
/>
2021-04-01 10:55:35 +00:00
<Button
2021-03-21 17:02:04 +00:00
col="2"
2021-04-01 10:55:35 +00:00
class="ico x"
2021-03-21 17:02:04 +00:00
:text="icon.x"
2021-04-01 10:55:35 +00:00
@tap="removeCombination(combination)"
2021-03-21 17:02:04 +00:00
/>
</GridLayout>
2021-04-01 10:55:35 +00:00
<Button
class="text big"
:text="'addCmbBtn' | L"
@tap="showCombinations"
2021-03-21 17:02:04 +00:00
/>
2021-04-01 10:55:35 +00:00
<!-- NOTES -->
<Label :text="getTitleCount('nos', 'notes')" class="sectionTitle" />
2021-03-21 17:02:04 +00:00
<GridLayout
columns="*,8,auto"
2021-04-01 10:55:35 +00:00
v-for="(note, index) in recipeContent.notes"
:key="'nos' + index"
2021-03-21 17:02:04 +00:00
>
2021-04-01 10:55:35 +00:00
<TextView
@loaded="focusField($event, 'multiLine')"
:hint="`${$options.filters.L('no')} ${index + 1}`"
v-model="recipeContent.notes[index]"
2021-03-21 17:02:04 +00:00
/>
2021-04-01 10:55:35 +00:00
<Button
2021-03-21 17:02:04 +00:00
col="2"
2021-04-01 10:55:35 +00:00
class="ico x"
2021-03-21 17:02:04 +00:00
:text="icon.x"
2021-04-01 10:55:35 +00:00
@tap="removeNote(index)"
2021-03-21 17:02:04 +00:00
/>
</GridLayout>
2021-04-01 10:55:35 +00:00
<Button class="text big" :text="'aNoBtn' | L" @tap="addNote" />
2021-03-21 17:02:04 +00:00
</StackLayout>
2021-04-01 10:55:35 +00:00
</ScrollView>
<GridLayout
row="1"
@loaded="onAppBarLoad"
:colSpan="hasChanges || showUndo ? '2' : '1'"
class="appbar"
:class="{ snackBar: showUndo }"
columns="auto, *, auto"
>
<Button v-if="showUndo" :text="countdown" class="countdown tb" />
<Button v-else class="ico" :text="icon.back" @tap="navigateBack" />
<Label
class="title"
verticalAlignment="center"
col="1"
v-if="showUndo"
:text="snackMsg | L"
/>
<Button
v-if="(hasChanges && !saving) || showUndo"
class="ico fab"
:text="showUndo ? icon.alert : icon.save"
col="2"
@tap="showUndo ? undoDel() : saveOperation()"
/>
<ActivityIndicator margin="16" col="2" v-if="saving" :busy="saving" />
</GridLayout>
</GridLayout>
2021-03-21 17:02:04 +00:00
</Page>
2020-10-14 19:32:32 +00:00
</template>
<script>
import {
AndroidApplication,
2020-11-10 18:28:48 +00:00
Application,
ApplicationSettings,
File,
getFileAccess,
2020-11-10 18:28:48 +00:00
ImageSource,
knownFolders,
2020-11-10 18:28:48 +00:00
path,
Screen,
2020-11-02 11:36:53 +00:00
Utils,
2021-03-21 17:02:04 +00:00
Observable,
} from "@nativescript/core";
import * as Permissions from "@nativescript-community/perms";
2021-04-01 13:29:26 +00:00
// import * as Filepicker from "nativescript-plugin-filepicker";
2021-03-21 17:02:04 +00:00
import { ImageCropper } from "nativescript-imagecropper";
import { localize } from "@nativescript/localize";
import { mapState, mapActions } from "vuex";
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";
2021-04-01 10:55:35 +00:00
import ViewRecipe from "./ViewRecipe";
2021-03-21 17:02:04 +00:00
import * as utils from "~/shared/utils";
2021-04-01 10:55:35 +00:00
let undoTimer;
2020-10-14 19:32:32 +00:00
export default {
2021-03-21 17:02:04 +00:00
props: [
"recipeID",
"filterFavourites",
"filterTrylater",
"navigationFromView",
],
2020-10-14 19:32:32 +00:00
data() {
return {
2021-01-13 05:02:48 +00:00
title: "newRec",
2020-10-14 19:32:32 +00:00
recipeContent: {
imageSrc: null,
title: undefined,
2020-12-29 10:35:19 +00:00
cuisine: "Undefined",
category: "Undefined",
2020-12-29 10:35:19 +00:00
tags: [],
prepTime: "00:00",
cookTime: "00:00",
2020-11-02 11:36:53 +00:00
yield: {
quantity: undefined,
unit: "Serving",
2020-11-02 11:36:53 +00:00
},
2020-12-29 10:35:19 +00:00
difficulty: "Easy",
rating: 0,
2020-11-02 11:36:53 +00:00
ingredients: [],
instructions: [],
2020-11-15 10:51:10 +00:00
combinations: [],
2020-11-28 19:21:57 +00:00
notes: [],
2020-10-26 20:49:54 +00:00
isFavorite: false,
2020-11-23 09:49:58 +00:00
tried: true,
2020-11-02 11:36:53 +00:00
lastTried: null,
2020-10-26 20:49:54 +00:00
lastModified: null,
2020-12-29 10:35:19 +00:00
created: null,
2021-01-23 17:20:15 +00:00
inBag: false,
2020-10-26 20:49:54 +00:00
},
tempRecipeContent: {},
2020-12-29 10:35:19 +00:00
tags: undefined,
2020-10-21 17:54:45 +00:00
blockModal: false,
2020-11-11 13:50:33 +00:00
modalOpen: false,
newRecipeID: null,
showFab: false,
2020-11-23 09:49:58 +00:00
saving: false,
2020-11-10 18:28:48 +00:00
cacheImagePath: null,
2020-11-15 10:51:10 +00:00
unSyncCombinations: [],
2021-03-21 17:02:04 +00:00
difficultyLevels: ["Easy", "Moderate", "Challenging"],
2021-04-01 10:55:35 +00:00
appbar: null,
scrollPos: 1,
countdown: 5,
snackMsg: null,
showUndo: false,
undo: false,
2021-03-21 17:02:04 +00:00
};
2020-10-14 19:32:32 +00:00
},
computed: {
2021-03-21 17:02:04 +00:00
...mapState([
"icon",
"units",
"yieldUnits",
"recipes",
"cuisines",
"categories",
"currentComponent",
2021-04-01 10:55:35 +00:00
"selectedCuisine",
"selectedCategory",
"selectedTag",
2021-03-21 17:02:04 +00:00
]),
2020-10-14 19:32:32 +00:00
screenWidth() {
2021-03-21 17:02:04 +00:00
return Screen.mainScreen.widthDIPs;
2020-10-14 19:32:32 +00:00
},
2020-11-10 18:28:48 +00:00
appTheme() {
2021-03-21 17:02:04 +00:00
return Application.systemAppearance();
2020-11-10 18:28:48 +00:00
},
hasChanges() {
2021-03-21 17:02:04 +00:00
return (
JSON.stringify(this.recipeContent) !==
JSON.stringify(this.tempRecipeContent)
);
2020-10-14 19:32:32 +00:00
},
},
methods: {
2021-03-21 17:02:04 +00:00
...mapActions([
2021-04-01 10:55:35 +00:00
"setComponent",
2021-03-21 17:02:04 +00:00
"addRecipeAction",
"overwriteRecipeAction",
"addListItemAction",
"unSyncCombinationsAction",
]),
onPageLoad(args) {
const page = args.object;
page.bindingContext = new Observable();
2021-03-21 17:02:04 +00:00
this.showFab = true;
},
2021-01-13 05:02:48 +00:00
onPageUnload() {
2021-03-21 17:02:04 +00:00
this.releaseBackEvent();
2021-04-01 10:55:35 +00:00
},
onAppBarLoad({ object }) {
this.appbar = object;
},
onScroll(args) {
let scrollUp;
let y = args.scrollY;
if (y) {
scrollUp = y < this.scrollPos;
this.scrollPos = Math.abs(y);
let ab = this.appbar.translateY;
if (!scrollUp && ab == 0) {
this.animateInOut(
250,
false,
(val) => (this.appbar.translateY = val * 64)
);
} else if (scrollUp && ab == 64) {
Utils.ad.dismissSoftInput();
this.animateInOut(
250,
true,
(val) => (this.appbar.translateY = val * 64)
);
}
}
2021-01-13 05:02:48 +00:00
},
2021-03-21 17:02:04 +00:00
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}`;
},
2020-11-02 11:36:53 +00:00
// HELPERS
2021-03-21 17:02:04 +00:00
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);
2020-11-02 11:36:53 +00:00
}
},
2021-03-21 17:02:04 +00:00
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) {
2020-11-11 13:50:33 +00:00
case "words":
2021-03-21 17:02:04 +00:00
field.android.setInputType(
android.text.InputType.TYPE_TEXT_FLAG_CAP_WORDS | common
);
break;
2020-11-11 13:50:33 +00:00
case "sentence":
2021-03-21 17:02:04 +00:00
field.android.setInputType(
android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES | common
);
break;
2020-11-11 13:50:33 +00:00
case "multiLine":
2021-03-21 17:02:04 +00:00
field.android.setInputType(
android.text.InputType.TYPE_TEXT_FLAG_MULTI_LINE |
android.text.InputType.TYPE_TEXT_FLAG_CAP_SENTENCES |
common
);
break;
2020-11-11 13:50:33 +00:00
default:
2021-03-21 17:02:04 +00:00
break;
2020-11-11 13:50:33 +00:00
}
},
getRandomID() {
2021-03-21 17:02:04 +00:00
let res = "";
let chars = "abcdefghijklmnopqrstuvwxyz0123456789";
for (let i = 0; i < 20; i++) {
res += chars.charAt(Math.floor(Math.random() * chars.length));
}
2021-03-21 17:02:04 +00:00
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, {
2020-11-02 11:36:53 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: `${time == "prepTime" ? "prepT" : "cookT"}`,
2020-11-02 11:36:53 +00:00
action: "SET",
selectedHr: hr,
selectedMin: min,
},
2021-03-21 17:02:04 +00:00
}).then((result) => {
if (result) {
this.recipeContent[time] = result;
this.modalOpen = false;
if (focus) {
switch (time) {
case "prepTime":
2021-03-21 17:02:04 +00:00
this.autoFocusField("cookTime", false);
break;
case "cookTime":
2021-03-21 17:02:04 +00:00
this.autoFocusField("yieldQuantity", true);
break;
default:
2021-03-21 17:02:04 +00:00
break;
}
}
2020-10-21 17:54:45 +00:00
}
2021-03-21 17:02:04 +00:00
});
2020-10-14 19:32:32 +00:00
},
2021-04-01 10:55:35 +00:00
getTitleCount(title, type) {
let count = this.recipeContent[type].length;
let text = count ? ` (${count})` : "";
return localize(title) + text;
},
2020-11-02 11:36:53 +00:00
// DATA LIST
2021-03-21 17:02:04 +00:00
showCuisine(focus) {
this.modalOpen = true;
this.releaseBackEvent();
this.$showModal(ActionDialog, {
2020-12-29 10:35:19 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "cui",
2020-12-29 10:35:19 +00:00
list: this.cuisines,
2021-01-13 05:02:48 +00:00
action: "aNBtn",
2020-12-29 10:35:19 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
if (action == "aNBtn") {
this.$showModal(PromptDialog, {
2020-12-29 10:35:19 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "newCui",
action: "aBtn",
2020-12-29 10:35:19 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((item) => {
this.hijackBackEvent();
if (item.length) {
this.recipeContent.cuisine = item;
this.addListItemAction({
2020-12-29 10:35:19 +00:00
item,
2021-03-21 17:02:04 +00:00
listName: "cuisines",
});
this.modalOpen = false;
if (focus) this.autoFocusField("category", false);
2020-12-29 10:35:19 +00:00
}
2021-03-21 17:02:04 +00:00
});
} else if (action) {
this.recipeContent.cuisine = action;
this.hijackBackEvent();
this.modalOpen = false;
if (focus) this.autoFocusField("category", false);
2020-12-29 10:35:19 +00:00
} else {
2021-03-21 17:02:04 +00:00
this.cuisines.includes(this.recipeContent.cuisine)
? mull
: (this.recipeContent.cuisine = "Undefined");
this.hijackBackEvent();
2020-12-29 10:35:19 +00:00
}
2021-03-21 17:02:04 +00:00
});
2020-12-29 10:35:19 +00:00
},
2021-03-21 17:02:04 +00:00
showCategories(focus) {
this.modalOpen = true;
this.releaseBackEvent();
this.$showModal(ActionDialog, {
2020-10-21 17:54:45 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "cat",
2020-12-29 10:35:19 +00:00
list: this.categories,
2021-01-13 05:02:48 +00:00
action: "aNBtn",
2020-10-21 17:54:45 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
if (action == "aNBtn") {
this.$showModal(PromptDialog, {
2020-10-21 17:54:45 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "nwCat",
action: "aBtn",
2020-10-21 17:54:45 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((item) => {
this.hijackBackEvent();
if (item.length) {
this.recipeContent.category = item;
this.addListItemAction({
2020-12-29 10:35:19 +00:00
item,
2021-03-21 17:02:04 +00:00
listName: "categories",
});
this.modalOpen = false;
if (focus) this.autoFocusField("tags", true);
2020-10-21 17:54:45 +00:00
}
2021-03-21 17:02:04 +00:00
});
} else if (action) {
this.recipeContent.category = action;
this.hijackBackEvent();
this.modalOpen = false;
if (focus) this.autoFocusField("tags", true);
} else {
2021-03-21 17:02:04 +00:00
this.categories.includes(this.recipeContent.category)
? mull
: (this.recipeContent.category = "Undefined");
this.hijackBackEvent();
2020-10-14 19:32:32 +00:00
}
2021-03-21 17:02:04 +00:00
});
},
2021-03-21 17:02:04 +00:00
showYieldUnits(focus) {
this.modalOpen = true;
this.releaseBackEvent();
this.$showModal(ActionDialog, {
2020-11-02 11:36:53 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "yieldU",
2020-12-29 10:35:19 +00:00
list: this.yieldUnits,
2021-01-13 05:02:48 +00:00
action: "aNBtn",
2020-11-02 11:36:53 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
if (action == "aNBtn") {
this.$showModal(PromptDialog, {
2020-11-02 11:36:53 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "nwYiU",
action: "aBtn",
2020-11-02 11:36:53 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((item) => {
this.hijackBackEvent();
if (item.length) {
this.recipeContent.yield.unit = item;
this.addListItemAction({
2020-12-29 10:35:19 +00:00
item,
2021-03-21 17:02:04 +00:00
listName: "yieldUnits",
});
this.modalOpen = false;
if (focus) this.autoFocusField("difficultyLevel", false);
2020-11-02 11:36:53 +00:00
}
2021-03-21 17:02:04 +00:00
});
} else if (action) {
this.recipeContent.yield.unit = action;
this.hijackBackEvent();
this.modalOpen = false;
if (focus) this.autoFocusField("difficultyLevel", false);
2020-12-29 10:35:19 +00:00
} else {
2021-03-21 17:02:04 +00:00
this.yieldUnits.includes(this.recipeContent.yield.unit)
? mull
: (this.recipeContent.yield.unit = "Serving");
this.hijackBackEvent();
2020-12-29 10:35:19 +00:00
}
2021-03-21 17:02:04 +00:00
});
2020-12-29 10:35:19 +00:00
},
2021-03-21 17:02:04 +00:00
showDifficultyLevel(focus) {
this.modalOpen = true;
this.releaseBackEvent();
this.$showModal(ActionDialog, {
2020-12-29 10:35:19 +00:00
props: {
title: "Difficulty level",
list: this.difficultyLevels,
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
if (action) {
this.recipeContent.difficulty = action;
this.hijackBackEvent();
this.modalOpen = false;
if (focus) this.addIngredient();
} else {
2021-03-21 17:02:04 +00:00
this.difficultyLevels.includes(this.recipeContent.difficulty)
? mull
: (this.recipeContent.difficulty = "Easy");
this.hijackBackEvent();
2020-11-02 11:36:53 +00:00
}
2021-03-21 17:02:04 +00:00
});
2020-11-02 11:36:53 +00:00
},
2021-03-21 17:02:04 +00:00
showUnits(e, focus, index) {
this.modalOpen = true;
this.releaseBackEvent();
this.$showModal(ActionDialog, {
2020-11-02 11:36:53 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "Unit",
2020-12-29 10:35:19 +00:00
list: this.units,
2021-01-13 05:02:48 +00:00
action: "aNBtn",
2020-11-02 11:36:53 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
if (action == "aNBtn") {
this.$showModal(PromptDialog, {
2020-12-29 10:35:19 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "newUnit",
action: "aBtn",
2020-12-29 10:35:19 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((item) => {
this.hijackBackEvent();
if (item.length) {
this.recipeContent.ingredients[index].unit = item;
this.addListItemAction({
2020-12-29 10:35:19 +00:00
item,
2021-03-21 17:02:04 +00:00
listName: "units",
});
this.modalOpen = false;
if (focus && this.recipeContent.ingredients.length - 1 === index)
this.autoFocusRefField("ingredient", index);
2020-11-15 21:13:06 +00:00
}
2021-03-21 17:02:04 +00:00
});
} else if (action) {
this.recipeContent.ingredients[index].unit = action;
this.hijackBackEvent();
this.modalOpen = false;
if (focus && this.recipeContent.ingredients.length - 1 === index)
this.autoFocusRefField("ingredient", index);
2020-11-11 13:50:33 +00:00
}
2021-03-21 17:02:04 +00:00
});
},
autoFocusField(ref, showSoftInput) {
this.$refs[ref].nativeView.focus();
if (showSoftInput) {
setTimeout(() => {
Utils.ad.showSoftInput(this.$refs[ref].nativeView.android);
}, 100);
2020-12-29 10:35:19 +00:00
}
},
2021-03-21 17:02:04 +00:00
autoFocusRefField(ref, index) {
this.$refs[ref][index].nativeView.focus();
setTimeout(() => {
Utils.ad.showSoftInput(this.$refs[ref][index].nativeView.android);
}, 100);
2020-12-29 10:35:19 +00:00
},
2020-11-02 11:36:53 +00:00
// NAVIGATION HANDLERS
2020-10-14 19:32:32 +00:00
navigateBack() {
2021-03-21 17:02:04 +00:00
if (this.hasChanges) {
this.blockModal = true;
this.$showModal(ConfirmDialog, {
2020-10-21 17:54:45 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "unsaved",
2021-03-21 17:02:04 +00:00
description: localize("disc"),
2021-01-13 05:02:48 +00:00
cancelButtonText: "disBtn",
okButtonText: "kEdit",
2020-10-21 17:54:45 +00:00
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
this.blockModal = false;
if (action != null && !action) {
2021-04-01 10:55:35 +00:00
this.$navigateBack();
2021-03-21 17:02:04 +00:00
this.releaseBackEvent();
2020-10-21 17:54:45 +00:00
}
2021-03-21 17:02:04 +00:00
});
} else {
2021-04-01 10:55:35 +00:00
this.$navigateBack();
2021-03-21 17:02:04 +00:00
this.releaseBackEvent();
2020-10-21 17:54:45 +00:00
}
},
hijackBackEvent() {
2021-03-21 17:02:04 +00:00
AndroidApplication.on(
AndroidApplication.activityBackPressedEvent,
this.backEvent
);
2020-10-21 17:54:45 +00:00
},
releaseBackEvent() {
2021-03-21 17:02:04 +00:00
AndroidApplication.off(
AndroidApplication.activityBackPressedEvent,
this.backEvent
);
2020-10-21 17:54:45 +00:00
},
2021-03-21 17:02:04 +00:00
backEvent(args) {
if (this.hasChanges && !this.blockModal) {
args.cancel = true;
this.navigateBack();
2020-10-21 17:54:45 +00:00
}
2020-10-14 19:32:32 +00:00
},
2020-11-02 11:36:53 +00:00
// DATA HANDLERS
imageHandler() {
2021-04-01 10:55:35 +00:00
this.clearEmptyFields(true);
2021-03-21 17:02:04 +00:00
if (this.recipeContent.imageSrc) {
this.blockModal = true;
this.$showModal(ConfirmDialog, {
props: {
2021-01-13 05:02:48 +00:00
title: "recPic",
2021-04-01 10:55:35 +00:00
secondButtonText: "rBtn",
cancelButtonText: "cBtn",
2021-01-13 05:02:48 +00:00
okButtonText: "repBtn",
},
2021-03-21 17:02:04 +00:00
}).then((action) => {
this.blockModal = false;
2021-04-01 10:55:35 +00:00
if (action > 0) {
2021-03-21 17:02:04 +00:00
this.permissionCheck(this.permissionConfirmation, this.imagePicker);
2021-04-01 10:55:35 +00:00
} else if (action < 0) {
2021-03-21 17:02:04 +00:00
this.recipeContent.imageSrc = null;
this.releaseBackEvent();
2021-04-01 10:55:35 +00:00
} else if (action != null) {
this.releaseBackEvent();
}
2021-03-21 17:02:04 +00:00
});
} else {
2021-03-21 17:02:04 +00:00
this.permissionCheck(this.permissionConfirmation, this.imagePicker);
2020-11-06 09:07:41 +00:00
}
},
2020-11-10 18:28:48 +00:00
permissionConfirmation() {
2021-03-21 17:02:04 +00:00
return this.$showModal(ConfirmDialog, {
2020-11-06 09:07:41 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "grant",
2021-03-21 17:02:04 +00:00
description: localize("reqAcc"),
2021-01-13 05:02:48 +00:00
cancelButtonText: "nNBtn",
okButtonText: "conBtn",
2020-11-06 09:07:41 +00:00
},
2021-03-21 17:02:04 +00:00
});
},
permissionCheck(confirmation, action) {
if (!ApplicationSettings.getBoolean("storagePermissionAsked", false)) {
confirmation().then((e) => {
if (e) {
Permissions.request("photo").then((status) => {
switch (status[0]) {
2020-11-10 18:28:48 +00:00
case "authorized":
2021-03-21 17:02:04 +00:00
action();
break;
2020-11-10 18:28:48 +00:00
case "never_ask_again":
2021-03-21 17:02:04 +00:00
ApplicationSettings.setBoolean(
"storagePermissionAsked",
true
);
break;
2020-11-10 18:28:48 +00:00
case "denied":
2021-04-01 12:23:44 +00:00
// Toast.makeText(localize("dend")).show();
2021-03-21 17:02:04 +00:00
break;
2020-11-10 18:28:48 +00:00
default:
2021-03-21 17:02:04 +00:00
break;
2020-11-10 18:28:48 +00:00
}
2021-03-21 17:02:04 +00:00
});
2020-11-06 09:07:41 +00:00
}
2021-03-21 17:02:04 +00:00
});
} else {
2021-03-21 17:02:04 +00:00
Permissions.check("photo").then((res) => {
res[0] !== "authorized"
? confirmation().then((e) => e && utils.openAppSettingsPage())
: action();
});
}
},
2020-11-02 11:36:53 +00:00
imagePicker() {
2021-03-21 17:02:04 +00:00
ApplicationSettings.setBoolean("storagePermissionAsked", true);
2021-04-01 13:29:26 +00:00
// Filepicker.create({
// mode: "single",
// extensions: ["png", "jpeg", "jpg"],
// })
// .present()
// .then((selection) => {
// this.cacheImagePath = path.join(
// knownFolders.temp().path,
// `${this.getRandomID()}.jpg`
// );
// let imgPath = selection[0];
// ImageSource.fromFile(imgPath).then((image) => {
// ImageCropper.prototype
// .show(
// image,
// {
// width: 1080,
// height: 1080,
// },
// {
// hideBottomControls: true,
// toolbarTitle: localize("cPic"),
// statusBarColor: "#ff5200",
// toolbarTextColor:
// this.appTheme == "light" ? "#1A1A1A" : "#e9ecef",
// toolbarColor:
// this.appTheme == "light" ? "#e9ecef" : "#1A1A1A",
// cropFrameColor: "#ff5200",
// }
// )
// .then((cropped) => {
// cropped.image.saveToFile(this.cacheImagePath, "jpg", 75);
// this.recipeContent.imageSrc = this.cacheImagePath;
// });
// });
// });
2020-10-14 19:32:32 +00:00
},
2020-11-10 18:28:48 +00:00
// INPUT FIELD HANDLERS
2020-12-29 10:35:19 +00:00
splitTags() {
2021-04-01 10:55:35 +00:00
let tags = [];
2021-03-21 17:02:04 +00:00
let string;
if (this.tags) {
2021-04-01 10:55:35 +00:00
tags = this.tags
2021-03-21 17:02:04 +00:00
.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);
2020-12-29 10:35:19 +00:00
}
2021-04-01 10:55:35 +00:00
this.recipeContent.tags = tags;
2020-12-29 10:35:19 +00:00
},
joinTags() {
2021-03-21 17:02:04 +00:00
this.tags = this.recipeContent.tags.join(" ");
},
2021-04-01 10:55:35 +00:00
showUndoBar(message) {
return new Promise((resolve, reject) => {
this.showUndo = true;
this.appbar.translateY = 0;
this.snackMsg = message;
this.countdown = 5;
let a = 5;
clearTimeout(undoTimer);
undoTimer = setInterval(() => {
if (this.undo) {
this.showUndo = this.undo = false;
clearTimeout(undoTimer);
resolve(true);
}
this.countdown = Math.round((a -= 0.1));
if (this.countdown < 1) {
this.showUndo = false;
clearTimeout(undoTimer);
reject(true);
}
}, 100);
2021-03-21 17:02:04 +00:00
});
2020-11-10 18:28:48 +00:00
},
2021-04-01 10:55:35 +00:00
undoDel() {
this.undo = true;
},
2020-10-14 19:32:32 +00:00
addIngredient() {
2021-03-21 17:02:04 +00:00
let ingredients = this.recipeContent.ingredients;
let unit = ingredients.length
? ingredients[ingredients.length - 1].unit
: "unit";
this.recipeContent.ingredients.push({
2020-10-21 17:54:45 +00:00
item: "",
2020-10-14 19:32:32 +00:00
quantity: null,
2020-12-29 10:35:19 +00:00
unit,
2021-03-21 17:02:04 +00:00
});
},
removeIngredient(index) {
this.modalOpen = true;
if (this.recipeContent.ingredients[index].item.length) {
let item = this.recipeContent.ingredients[index];
this.recipeContent.ingredients.splice(index, 1);
2021-04-01 10:55:35 +00:00
this.showUndoBar("rmIng").then(
(res) => res && this.recipeContent.ingredients.splice(index, 0, item)
);
2020-12-29 10:35:19 +00:00
} else {
2021-03-21 17:02:04 +00:00
this.recipeContent.ingredients.splice(index, 1);
2020-12-29 10:35:19 +00:00
}
2021-03-21 17:02:04 +00:00
setTimeout((e) => (this.modalOpen = false), 200);
2020-10-14 19:32:32 +00:00
},
addInstruction() {
2021-03-21 17:02:04 +00:00
this.recipeContent.instructions.push("");
},
removeInstruction(index) {
if (this.recipeContent.instructions[index].length) {
let item = this.recipeContent.instructions[index];
this.recipeContent.instructions.splice(index, 1);
2021-04-01 10:55:35 +00:00
this.showUndoBar("rmIns").then(
(res) => res && this.recipeContent.instructions.splice(index, 0, item)
);
2021-03-21 17:02:04 +00:00
} else this.recipeContent.instructions.splice(index, 1);
2020-10-14 19:32:32 +00:00
},
2021-01-13 05:02:48 +00:00
addNote() {
2021-03-21 17:02:04 +00:00
this.recipeContent.notes.push("");
},
removeNote(index) {
if (this.recipeContent.notes[index].length) {
let item = this.recipeContent.notes[index];
this.recipeContent.notes.splice(index, 1);
2021-04-01 10:55:35 +00:00
this.showUndoBar("rmN").then((res) =>
this.recipeContent.notes.splice(index, 0, item)
);
2021-03-21 17:02:04 +00:00
} else this.recipeContent.notes.splice(index, 1);
2021-01-13 05:02:48 +00:00
},
2021-03-21 17:02:04 +00:00
getCombinationTitle(id) {
return this.recipes.filter((e) => e.id === id)[0].title;
2020-11-15 10:51:10 +00:00
},
showCombinations() {
2021-04-01 10:55:35 +00:00
Utils.ad.dismissSoftInput();
2021-03-21 17:02:04 +00:00
this.modalOpen = true;
this.releaseBackEvent();
let existingCombinations = [
...this.recipeContent.combinations,
2020-11-15 10:51:10 +00:00
this.recipeContent.id,
2021-03-21 17:02:04 +00:00
];
2020-11-15 10:51:10 +00:00
let filteredRecipes = this.recipes.filter(
2021-03-21 17:02:04 +00:00
(e) => !existingCombinations.includes(e.id)
);
this.$showModal(ActionDialogWithSearch, {
2020-11-15 10:51:10 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "selRec",
2020-11-15 10:51:10 +00:00
recipes: filteredRecipes,
},
2021-03-21 17:02:04 +00:00
}).then((res) => {
this.hijackBackEvent();
if (res) {
this.recipeContent.combinations.push(res);
2020-11-15 10:51:10 +00:00
}
2021-03-21 17:02:04 +00:00
});
},
removeCombination(id) {
let index = this.recipeContent.combinations.indexOf(id);
this.recipeContent.combinations.splice(index, 1);
this.unSyncCombinations.push(id);
2021-04-01 10:55:35 +00:00
this.showUndoBar("rmCmb").then((res) =>
this.recipeContent.combinations.splice(index, 0, id)
);
2020-11-15 10:51:10 +00:00
},
2020-11-10 18:28:48 +00:00
// SAVE OPERATION
2021-04-01 10:55:35 +00:00
clearEmptyFields(bool) {
if (!this.recipeContent.title && !bool)
2021-03-21 17:02:04 +00:00
this.recipeContent.title = localize("untRec");
if (!this.recipeContent.yield.quantity)
this.recipeContent.yield.quantity = 1;
2020-11-02 11:36:53 +00:00
this.recipeContent.ingredients = this.recipeContent.ingredients.filter(
2021-03-21 17:02:04 +00:00
(e) => e.item
);
let vm = this;
2021-03-21 17:02:04 +00:00
function clearEmpty(arr) {
vm.recipeContent[arr] = vm.recipeContent[arr].filter((e) => e);
2020-11-02 11:36:53 +00:00
}
2021-03-21 17:02:04 +00:00
clearEmpty("instructions");
clearEmpty("notes");
2020-11-02 11:36:53 +00:00
},
saveOperation() {
2021-03-21 17:02:04 +00:00
this.saving = this.modalOpen = true;
this.clearEmptyFields();
this.recipeContent.lastModified = new Date();
ApplicationSettings.setString(
"previousCuisine",
this.recipeContent.cuisine
);
ApplicationSettings.setString(
"previousCategory",
this.recipeContent.category
);
ApplicationSettings.setString(
"previousYieldUnit",
this.recipeContent.yield.unit
);
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();
2020-11-10 18:28:48 +00:00
}
2021-03-21 17:02:04 +00:00
if (this.recipeContent.imageSrc) {
if (
this.tempRecipeContent.imageSrc &&
this.tempRecipeContent.imageSrc !== this.recipeContent.imageSrc
) {
getFileAccess().deleteFile(this.tempRecipeContent.imageSrc);
2020-11-10 18:28:48 +00:00
}
2021-03-21 17:02:04 +00:00
} else if (this.tempRecipeContent.imageSrc) {
getFileAccess().deleteFile(this.tempRecipeContent.imageSrc);
}
2021-03-21 17:02:04 +00:00
this.unSyncCombinationsAction({
2020-11-15 10:51:10 +00:00
id: this.recipeID,
combinations: this.unSyncCombinations,
2021-03-21 17:02:04 +00:00
});
this.saveRecipe();
2020-11-02 11:36:53 +00:00
},
saveRecipe() {
2021-03-21 17:02:04 +00:00
if (this.recipeID) {
this.overwriteRecipeAction({
2020-11-02 11:36:53 +00:00
id: this.recipeID,
recipe: this.recipeContent,
2021-03-21 17:02:04 +00:00
});
} else {
2021-03-21 17:02:04 +00:00
this.recipeContent.id = this.newRecipeID;
this.addRecipeAction({
2020-11-02 11:36:53 +00:00
id: this.newRecipeID,
recipe: this.recipeContent,
2021-03-21 17:02:04 +00:00
});
2020-11-02 11:36:53 +00:00
}
2021-03-21 17:02:04 +00:00
setTimeout(() => {
this.saving = false;
}, 100);
2021-04-01 10:55:35 +00:00
this.$navigateBack();
2020-10-14 19:32:32 +00:00
},
},
2020-10-26 20:49:54 +00:00
created() {
2021-03-21 17:02:04 +00:00
setTimeout((e) => {
2021-04-01 10:55:35 +00:00
this.setComponent("EditRecipe");
2021-03-21 17:02:04 +00:00
}, 500);
this.title = this.recipeID ? "editRec" : "newRec";
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 {
2021-03-21 17:02:04 +00:00
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();
2020-12-29 10:35:19 +00:00
}
2021-03-21 17:02:04 +00:00
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();
2020-10-26 20:49:54 +00:00
}
2021-03-21 17:02:04 +00:00
this.hijackBackEvent();
2020-10-26 20:49:54 +00:00
},
2021-03-21 17:02:04 +00:00
};
2020-10-14 19:32:32 +00:00
</script>