Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-04-16 18:05:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore: migrate remaining pages to script setup (#7310)

Browse Source
This commit is contained in:
Kuchenpirat
2026-03-24 16:07:08 +01:00
committed by GitHub
parent 27cb585c80
commit 18b3c4beab
57 changed files with 4160 additions and 4971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
frontend/pages/g/[groupSlug]/r/create/image.vue
View File

@@ -37,7 +37,7 @@
:img="imageUrl"
cropper-height="100%"
cropper-width="100%"
:submitted="loading"
:submitted="state.loading"
class="mt-4 mb-2"
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
@delete="clearImage(index)"
@@ -45,7 +45,7 @@
<v-btn
v-if="uploadedImages.length > 1"
:disabled="loading || index === 0"
:disabled="state.loading || index === 0"
color="primary"
@click="() => setCoverImage(index)"
>
@@ -66,7 +66,7 @@
color="primary"
hide-details
:label="$t('recipe.should-translate-description')"
:disabled="loading"
:disabled="state.loading"
/>
<v-checkbox
v-if="uploadedImages.length"
@@ -74,15 +74,15 @@
color="primary"
hide-details
:label="$t('recipe.parse-recipe-ingredients-after-import')"
:disabled="loading"
:disabled="state.loading"
/>
</v-card-text>
<v-card-actions v-if="uploadedImages.length">
<div class="w-100 d-flex flex-column align-center">
<p style="width: 250px">
<BaseButton rounded block type="submit" :loading="loading" />
<BaseButton rounded block type="submit" :loading="state.loading" />
</p>
<p v-if="loading" class="mb-0">
<p v-if="state.loading" class="mb-0">
{{
uploadedImages.length > 1
? $t("recipe.please-wait-images-processing")
@@ -96,111 +96,93 @@
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { useUserApi } from "~/composables/api";
import { alert } from "~/composables/use-toast";
import { useNewRecipeOptions } from "~/composables/use-new-recipe-options";
import type { VForm } from "~/types/auto-forms";
export default defineNuxtComponent({
setup() {
const state = reactive({
loading: false,
});
const i18n = useI18n();
const api = useUserApi();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || "");
const domUrlForm = ref<VForm | null>(null);
const uploadedImages = ref<(Blob | File)[]>([]);
const uploadedImageNames = ref<string[]>([]);
const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true);
const { parseRecipe, navigateToRecipe } = useNewRecipeOptions();
function uploadImages(files: File[]) {
uploadedImages.value = [...uploadedImages.value, ...files];
uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
uploadedImagesPreviewUrls.value = [
...uploadedImagesPreviewUrls.value,
...files.map(file => URL.createObjectURL(file)),
];
}
function clearImage(index: number) {
// Revoke _before_ splicing
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
uploadedImages.value.splice(index, 1);
uploadedImageNames.value.splice(index, 1);
uploadedImagesPreviewUrls.value.splice(index, 1);
}
async function createRecipe() {
if (uploadedImages.value.length === 0) {
return;
}
state.loading = true;
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) {
alert.error(i18n.t("events.something-went-wrong"));
state.loading = false;
}
else {
navigateToRecipe(data, groupSlug.value, `/g/${groupSlug.value}/r/create/image`);
}
}
function updateUploadedImage(index: number, croppedImage: Blob) {
uploadedImages.value[index] = croppedImage;
uploadedImagesPreviewUrls.value[index] = URL.createObjectURL(croppedImage);
}
function swapItem(array: any[], i: number, j: number) {
if (i < 0 || j < 0 || i >= array.length || j >= array.length) {
return;
}
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
function swapImages(i: number, j: number) {
swapItem(uploadedImages.value, i, j);
swapItem(uploadedImageNames.value, i, j);
swapItem(uploadedImagesPreviewUrls.value, i, j);
}
// Put the intended cover image at the start of the array
// The backend currently sets the first image as the cover image
function setCoverImage(index: number) {
if (index < 0 || index >= uploadedImages.value.length || index === 0) {
return;
}
swapImages(0, index);
}
return {
...toRefs(state),
domUrlForm,
uploadedImages,
uploadedImagesPreviewUrls,
shouldTranslate,
parseRecipe,
uploadImages,
clearImage,
createRecipe,
updateUploadedImage,
setCoverImage,
};
},
const state = reactive({
loading: false,
});
const i18n = useI18n();
const api = useUserApi();
const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug || "");
const domUrlForm = ref<VForm | null>(null);
const uploadedImages = ref<(Blob | File)[]>([]);
const uploadedImageNames = ref<string[]>([]);
const uploadedImagesPreviewUrls = ref<string[]>([]);
const shouldTranslate = ref(true);
const { parseRecipe, navigateToRecipe } = useNewRecipeOptions();
function uploadImages(files: File[]) {
uploadedImages.value = [...uploadedImages.value, ...files];
uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
uploadedImagesPreviewUrls.value = [
...uploadedImagesPreviewUrls.value,
...files.map(file => URL.createObjectURL(file)),
];
}
function clearImage(index: number) {
// Revoke _before_ splicing
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
uploadedImages.value.splice(index, 1);
uploadedImageNames.value.splice(index, 1);
uploadedImagesPreviewUrls.value.splice(index, 1);
}
async function createRecipe() {
if (uploadedImages.value.length === 0) {
return;
}
state.loading = true;
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
if (error || !data) {
alert.error(i18n.t("events.something-went-wrong"));
state.loading = false;
}
else {
navigateToRecipe(data, groupSlug.value, `/g/${groupSlug.value}/r/create/image`);
}
}
function updateUploadedImage(index: number, croppedImage: Blob) {
uploadedImages.value[index] = croppedImage;
uploadedImagesPreviewUrls.value[index] = URL.createObjectURL(croppedImage);
}
function swapItem(array: any[], i: number, j: number) {
if (i < 0 || j < 0 || i >= array.length || j >= array.length) {
return;
}
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
function swapImages(i: number, j: number) {
swapItem(uploadedImages.value, i, j);
swapItem(uploadedImageNames.value, i, j);
swapItem(uploadedImagesPreviewUrls.value, i, j);
}
// Put the intended cover image at the start of the array
// The backend currently sets the first image as the cover image
function setCoverImage(index: number) {
if (index < 0 || index >= uploadedImages.value.length || index === 0) {
return;
}
swapImages(0, index);
}
</script>