feat: add option to stay in edit mode after loading from URL. (#1524)

* Add option to stay in edit mode after loading from URL.

* Stay in Edit mode now default behaviour after scraping recipe from URL.

* Fix missing param error.

* Fix incorrect read of boolean variable.

* Fix stupid error due to not understanding Vue.

* minor style and bug fixes

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Mirko Jeličić 2022-09-10 20:21:57 +02:00 committed by GitHub
parent c65c00f3a8
commit 2df791b80b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<v-form ref="domUrlForm" @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags)"> <v-form ref="domUrlForm" @submit.prevent="createByUrl(recipeUrl, importKeywordsAsTags, stayInEditMode)">
<div> <div>
<v-card-title class="headline"> Scrape Recipe </v-card-title> <v-card-title class="headline"> Scrape Recipe </v-card-title>
<v-card-text> <v-card-text>
@ -20,7 +20,8 @@
:hint="$t('new-recipe.url-form-hint')" :hint="$t('new-recipe.url-form-hint')"
persistent-hint persistent-hint
></v-text-field> ></v-text-field>
<v-checkbox v-model="importKeywordsAsTags" label="Import original keywords as tags"> </v-checkbox> <v-checkbox v-model="importKeywordsAsTags" hide-details label="Import original keywords as tags" />
<v-checkbox v-model="stayInEditMode" hide-details label="Stay in Edit mode" />
</v-card-text> </v-card-text>
<v-card-actions class="justify-center"> <v-card-actions class="justify-center">
<div style="width: 250px"> <div style="width: 250px">
@ -103,14 +104,19 @@ export default defineComponent({
const importKeywordsAsTags = computed({ const importKeywordsAsTags = computed({
get() { get() {
return route.value.query.import_keywords_as_tags === "1"; return route.value.query.use_keywords === "1";
}, },
set(keywordsAsTags: boolean) { set(v: boolean) {
let import_keywords_as_tags = "0"; router.replace({ query: { ...route.value.query, use_keywords: v ? "1" : "0" } });
if (keywordsAsTags) { },
import_keywords_as_tags = "1"; });
}
router.replace({ query: { ...route.value.query, import_keywords_as_tags } }); const stayInEditMode = computed({
get() {
return route.value.query.edit === "1";
},
set(v: boolean) {
router.replace({ query: { ...route.value.query, edit: v ? "1" : "0" } });
}, },
}); });
@ -120,13 +126,13 @@ export default defineComponent({
} }
if (recipeUrl.value.includes("https")) { if (recipeUrl.value.includes("https")) {
createByUrl(recipeUrl.value, importKeywordsAsTags.value); createByUrl(recipeUrl.value, importKeywordsAsTags.value, stayInEditMode.value);
} }
}); });
const domUrlForm = ref<VForm | null>(null); const domUrlForm = ref<VForm | null>(null);
async function createByUrl(url: string, importKeywordsAsTags: boolean) { async function createByUrl(url: string | null, importKeywordsAsTags: boolean, stayInEditMode: boolean) {
if (url === null) { if (url === null) {
return; return;
} }
@ -137,12 +143,13 @@ export default defineComponent({
} }
state.loading = true; state.loading = true;
const { response } = await api.recipes.createOneByUrl(url, importKeywordsAsTags); const { response } = await api.recipes.createOneByUrl(url, importKeywordsAsTags);
handleResponse(response); handleResponse(response, stayInEditMode);
} }
return { return {
recipeUrl, recipeUrl,
importKeywordsAsTags, importKeywordsAsTags,
stayInEditMode,
domUrlForm, domUrlForm,
createByUrl, createByUrl,
...toRefs(state), ...toRefs(state),