mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-11-03 19:18:22 -05:00
86c99b10a2
* Activate more linting rules from eslint and typescript * Properly add VForm as type information * Fix usage of native types * Fix more linting issues * Rename vuetify types file, add VTooltip * Fix some more typing problems * Use composition API for more components * Convert RecipeRating * Convert RecipeNutrition * Convert more components to composition API * Fix globals plugin for type checking * Add missing icon types * Fix vuetify types in Nuxt context * Use composition API for RecipeActionMenu * Convert error.vue to composition API * Convert RecipeContextMenu to composition API * Use more composition API and type checking in recipe/create * Convert AppButtonUpload to composition API * Fix some type checking in RecipeContextMenu * Remove unused components BaseAutoForm and BaseColorPicker * Convert RecipeCategoryTagDialog to composition API * Convert RecipeCardSection to composition API * Convert RecipeCategoryTagSelector to composition API * Properly import vuetify type definitions * Convert BaseButton to composition API * Convert AutoForm to composition API * Remove unused requests API file * Remove static routes from recipe API * Fix more type errors * Convert AppHeader to composition API, fixing some search bar focus problems * Convert RecipeDialogSearch to composition API * Update API types from pydantic models, handle undefined values * Improve more typing problems * Add types to other plugins * Properly type the CRUD API access * Fix typing of static image routes * Fix more typing stuff * Fix some more typing problems * Turn off more rules
92 lines
2.4 KiB
Vue
92 lines
2.4 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<v-menu v-model="menu" offset-y top nudge-top="6" :close-on-content-click="false">
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn color="accent" dark v-bind="attrs" v-on="on">
|
|
<v-icon left>
|
|
{{ $globals.icons.fileImage }}
|
|
</v-icon>
|
|
{{ $t("general.image") }}
|
|
</v-btn>
|
|
</template>
|
|
<v-card width="400">
|
|
<v-card-title class="headline flex mb-0">
|
|
<div>
|
|
{{ $t("recipe.recipe-image") }}
|
|
</div>
|
|
<AppButtonUpload
|
|
class="ml-auto"
|
|
url="none"
|
|
file-name="image"
|
|
:text-btn="false"
|
|
:post="false"
|
|
@uploaded="uploadImage"
|
|
/>
|
|
</v-card-title>
|
|
<v-card-text class="mt-n5">
|
|
<div>
|
|
<v-text-field v-model="url" :label="$t('general.url')" class="pt-5" clearable :messages="messages">
|
|
<template #append-outer>
|
|
<v-btn class="ml-2" color="primary" :loading="loading" :disabled="!slug" @click="getImageFromURL">
|
|
{{ $t("general.get") }}
|
|
</v-btn>
|
|
</template>
|
|
</v-text-field>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
|
|
import { useUserApi } from "~/composables/api";
|
|
|
|
const REFRESH_EVENT = "refresh";
|
|
const UPLOAD_EVENT = "upload";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
slug: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const state = reactive({
|
|
url: "",
|
|
loading: false,
|
|
menu: false,
|
|
})
|
|
|
|
function uploadImage(fileObject: File) {
|
|
context.emit(UPLOAD_EVENT, fileObject);
|
|
state.menu = false;
|
|
}
|
|
|
|
const api = useUserApi();
|
|
async function getImageFromURL() {
|
|
state.loading = true;
|
|
if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
|
|
context.emit(REFRESH_EVENT);
|
|
}
|
|
state.loading = false;
|
|
state.menu = false;
|
|
}
|
|
|
|
const { i18n } = useContext();
|
|
const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
|
|
|
|
return {
|
|
...toRefs(state),
|
|
uploadImage,
|
|
getImageFromURL,
|
|
messages,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|