mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-16 18:05:35 -04:00
chore: migrate remaining pages to script setup (#7310)
This commit is contained in:
Kuchenpirat
GitHub
@@ -72,7 +72,7 @@
|
||||
rounded
|
||||
block
|
||||
type="submit"
|
||||
:loading="loading"
|
||||
:loading="state.loading"
|
||||
/>
|
||||
</div>
|
||||
<v-card-text class="py-2">
|
||||
@@ -85,7 +85,7 @@
|
||||
</v-form>
|
||||
<v-expand-transition>
|
||||
<v-alert
|
||||
v-if="error"
|
||||
v-if="state.error"
|
||||
color="error"
|
||||
class="mt-6 white--text"
|
||||
>
|
||||
@@ -140,7 +140,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import type { AxiosResponse } from "axios";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { useTagStore } from "~/composables/store/use-tag-store";
|
||||
@@ -148,135 +148,116 @@ import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
|
||||
import { validators } from "~/composables/use-validators";
|
||||
import type { VForm } from "~/types/auto-forms";
|
||||
|
||||
export default defineNuxtComponent({
|
||||
setup() {
|
||||
definePageMeta({
|
||||
key: route => route.path,
|
||||
});
|
||||
const state = reactive({
|
||||
error: false,
|
||||
loading: false,
|
||||
});
|
||||
definePageMeta({
|
||||
key: route => route.path,
|
||||
});
|
||||
const state = reactive({
|
||||
error: false,
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const auth = useMealieAuth();
|
||||
const api = useUserApi();
|
||||
const route = useRoute();
|
||||
const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
|
||||
const auth = useMealieAuth();
|
||||
const api = useUserApi();
|
||||
const route = useRoute();
|
||||
const groupSlug = computed(() => route.params.groupSlug as string || auth.user.value?.groupSlug || "");
|
||||
|
||||
const router = useRouter();
|
||||
const tags = useTagStore();
|
||||
const router = useRouter();
|
||||
const tags = useTagStore();
|
||||
|
||||
const {
|
||||
importKeywordsAsTags,
|
||||
importCategories,
|
||||
stayInEditMode,
|
||||
parseRecipe,
|
||||
navigateToRecipe,
|
||||
} = useNewRecipeOptions();
|
||||
const {
|
||||
importKeywordsAsTags,
|
||||
importCategories,
|
||||
stayInEditMode,
|
||||
parseRecipe,
|
||||
navigateToRecipe,
|
||||
} = useNewRecipeOptions();
|
||||
|
||||
const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
|
||||
const htmlOrJsonImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/html`);
|
||||
const bulkImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/bulk`);
|
||||
const htmlOrJsonImporterTarget = computed(() => `/g/${groupSlug.value}/r/create/html`);
|
||||
|
||||
function handleResponse(response: AxiosResponse<string> | null, refreshTags = false) {
|
||||
if (response?.status !== 201) {
|
||||
state.error = true;
|
||||
state.loading = false;
|
||||
return;
|
||||
}
|
||||
if (refreshTags) {
|
||||
tags.actions.refresh();
|
||||
}
|
||||
function handleResponse(response: AxiosResponse<string> | null, refreshTags = false) {
|
||||
if (response?.status !== 201) {
|
||||
state.error = true;
|
||||
state.loading = false;
|
||||
return;
|
||||
}
|
||||
if (refreshTags) {
|
||||
tags.actions.refresh();
|
||||
}
|
||||
|
||||
navigateToRecipe(response.data, groupSlug.value, `/g/${groupSlug.value}/r/create/url`);
|
||||
navigateToRecipe(response.data, groupSlug.value, `/g/${groupSlug.value}/r/create/url`);
|
||||
}
|
||||
|
||||
const recipeUrl = computed({
|
||||
set(recipe_import_url: string | null) {
|
||||
if (recipe_import_url !== null) {
|
||||
recipe_import_url = recipe_import_url.trim();
|
||||
router.replace({ query: { ...route.query, recipe_import_url } });
|
||||
}
|
||||
|
||||
const recipeUrl = computed({
|
||||
set(recipe_import_url: string | null) {
|
||||
if (recipe_import_url !== null) {
|
||||
recipe_import_url = recipe_import_url.trim();
|
||||
router.replace({ query: { ...route.query, recipe_import_url } });
|
||||
}
|
||||
},
|
||||
get() {
|
||||
return route.query.recipe_import_url as string | null;
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (recipeUrl.value && recipeUrl.value.includes("https")) {
|
||||
// Check if we have a query params for using keywords as tags or staying in edit mode.
|
||||
// We don't use these in the app anymore, but older automations such as Bookmarklet might still use them,
|
||||
// and they're easy enough to support.
|
||||
const importKeywordsAsTagsParam = route.query.use_keywords;
|
||||
if (importKeywordsAsTagsParam === "1") {
|
||||
importKeywordsAsTags.value = true;
|
||||
}
|
||||
else if (importKeywordsAsTagsParam === "0") {
|
||||
importKeywordsAsTags.value = false;
|
||||
}
|
||||
|
||||
const stayInEditModeParam = route.query.edit;
|
||||
if (stayInEditModeParam === "1") {
|
||||
stayInEditMode.value = true;
|
||||
}
|
||||
else if (stayInEditModeParam === "0") {
|
||||
stayInEditMode.value = false;
|
||||
}
|
||||
|
||||
createByUrl(recipeUrl.value, importKeywordsAsTags.value, false);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const domUrlForm = ref<VForm | null>(null);
|
||||
|
||||
// Remove import URL from query params when leaving the page
|
||||
const isLeaving = ref(false);
|
||||
onBeforeRouteLeave((to) => {
|
||||
if (isLeaving.value) {
|
||||
return;
|
||||
}
|
||||
isLeaving.value = true;
|
||||
router.replace({ query: undefined }).then(() => router.push(to));
|
||||
});
|
||||
|
||||
const createStatus = ref<string | null>(null);
|
||||
async function createByUrl(url: string | null, importKeywordsAsTags: boolean, importCategories: boolean) {
|
||||
if (url === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!domUrlForm.value?.validate() || url === "") {
|
||||
console.log("Invalid URL", url);
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const { response } = await api.recipes.createOneByUrl(
|
||||
url,
|
||||
importKeywordsAsTags,
|
||||
importCategories,
|
||||
(message: string) => createStatus.value = message,
|
||||
);
|
||||
createStatus.value = null;
|
||||
handleResponse(response, importKeywordsAsTags);
|
||||
}
|
||||
|
||||
return {
|
||||
bulkImporterTarget,
|
||||
htmlOrJsonImporterTarget,
|
||||
recipeUrl,
|
||||
importKeywordsAsTags,
|
||||
importCategories: importCategories,
|
||||
stayInEditMode,
|
||||
parseRecipe,
|
||||
domUrlForm,
|
||||
createStatus,
|
||||
createByUrl,
|
||||
...toRefs(state),
|
||||
validators,
|
||||
};
|
||||
},
|
||||
get() {
|
||||
return route.query.recipe_import_url as string | null;
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (recipeUrl.value && recipeUrl.value.includes("https")) {
|
||||
// Check if we have a query params for using keywords as tags or staying in edit mode.
|
||||
// We don't use these in the app anymore, but older automations such as Bookmarklet might still use them,
|
||||
// and they're easy enough to support.
|
||||
const importKeywordsAsTagsParam = route.query.use_keywords;
|
||||
if (importKeywordsAsTagsParam === "1") {
|
||||
importKeywordsAsTags.value = true;
|
||||
}
|
||||
else if (importKeywordsAsTagsParam === "0") {
|
||||
importKeywordsAsTags.value = false;
|
||||
}
|
||||
|
||||
const stayInEditModeParam = route.query.edit;
|
||||
if (stayInEditModeParam === "1") {
|
||||
stayInEditMode.value = true;
|
||||
}
|
||||
else if (stayInEditModeParam === "0") {
|
||||
stayInEditMode.value = false;
|
||||
}
|
||||
|
||||
createByUrl(recipeUrl.value, importKeywordsAsTags.value, false);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const domUrlForm = ref<VForm | null>(null);
|
||||
|
||||
// Remove import URL from query params when leaving the page
|
||||
const isLeaving = ref(false);
|
||||
onBeforeRouteLeave((to) => {
|
||||
if (isLeaving.value) {
|
||||
return;
|
||||
}
|
||||
isLeaving.value = true;
|
||||
router.replace({ query: undefined }).then(() => router.push(to));
|
||||
});
|
||||
|
||||
const createStatus = ref<string | null>(null);
|
||||
async function createByUrl(url: string | null, importKeywordsAsTags: boolean, importCategories: boolean) {
|
||||
if (url === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!domUrlForm.value?.validate() || url === "") {
|
||||
console.log("Invalid URL", url);
|
||||
return;
|
||||
}
|
||||
state.loading = true;
|
||||
const { response } = await api.recipes.createOneByUrl(
|
||||
url,
|
||||
importKeywordsAsTags,
|
||||
importCategories,
|
||||
(message: string) => createStatus.value = message,
|
||||
);
|
||||
createStatus.value = null;
|
||||
handleResponse(response, importKeywordsAsTags);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user