mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-10 23:15:34 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
267
frontend/app/components/Domain/Recipe/RecipeAssets.vue
Normal file
267
frontend/app/components/Domain/Recipe/RecipeAssets.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div v-if="model.length > 0 || edit">
|
||||
<v-card class="mt-4">
|
||||
<v-list-item class="pr-2 pl-0">
|
||||
<v-card-title>
|
||||
{{ $t("asset.assets") }}
|
||||
</v-card-title>
|
||||
<template #append>
|
||||
<v-btn
|
||||
v-if="edit"
|
||||
variant="plain"
|
||||
:icon="$globals.icons.create"
|
||||
@click="state.newAssetDialog = true"
|
||||
/>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider class="mx-2" />
|
||||
<v-list
|
||||
v-if="model.length > 0"
|
||||
lines="two"
|
||||
:flat="!edit"
|
||||
>
|
||||
<v-list-item
|
||||
v-for="(item, i) in model"
|
||||
:key="i"
|
||||
:href="!edit ? assetURL(item.fileName ?? '') : ''"
|
||||
target="_blank"
|
||||
class="pr-2"
|
||||
>
|
||||
<template #prepend>
|
||||
<v-avatar size="48" rounded="lg" class="elevation-1">
|
||||
<v-img
|
||||
v-if="isImage(item.fileName)"
|
||||
:src="assetURL(item.fileName ?? '')"
|
||||
:alt="item.name"
|
||||
loading="lazy"
|
||||
cover
|
||||
/>
|
||||
<v-icon v-else size="large">
|
||||
{{ getIconDefinition(item.icon).icon }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<v-list-item-title>
|
||||
{{ item.name }}
|
||||
</v-list-item-title>
|
||||
<template #append>
|
||||
<v-menu v-if="edit" location="bottom end">
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-btn
|
||||
v-bind="menuProps"
|
||||
icon
|
||||
variant="plain"
|
||||
>
|
||||
<v-icon :icon="$globals.icons.dotsVertical" />
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list density="compact" min-width="220">
|
||||
<v-list-item
|
||||
:href="assetURL(item.fileName ?? '')"
|
||||
:prepend-icon="$globals.icons.eye"
|
||||
:title="$t('general.view')"
|
||||
target="_blank"
|
||||
/>
|
||||
<v-list-item
|
||||
:href="assetURL(item.fileName ?? '')"
|
||||
:prepend-icon="$globals.icons.download"
|
||||
:title="$t('general.download')"
|
||||
download
|
||||
/>
|
||||
<v-list-item
|
||||
v-if="edit"
|
||||
:prepend-icon="$globals.icons.contentCopy"
|
||||
:title="$t('general.copy')"
|
||||
@click="copyText(assetEmbed(item.fileName ?? ''))"
|
||||
/>
|
||||
<v-list-item
|
||||
v-if="edit"
|
||||
:prepend-icon="$globals.icons.delete"
|
||||
:title="$t('general.delete')"
|
||||
@click="model.splice(i, 1)"
|
||||
/>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-btn
|
||||
v-if="!edit"
|
||||
icon
|
||||
variant="plain"
|
||||
:href="assetURL(item.fileName ?? '')"
|
||||
download
|
||||
>
|
||||
<v-icon> {{ $globals.icons.download }} </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
<div class="d-flex ml-auto mt-2">
|
||||
<v-spacer />
|
||||
<BaseDialog
|
||||
v-model="state.newAssetDialog"
|
||||
:title="$t('asset.new-asset')"
|
||||
:icon="getIconDefinition(state.newAsset.icon).icon"
|
||||
can-submit
|
||||
@submit="addAsset"
|
||||
>
|
||||
<v-card-text class="pt-4">
|
||||
<v-text-field
|
||||
v-model="state.newAsset.name"
|
||||
:label="$t('general.name')"
|
||||
/>
|
||||
<div class="d-flex justify-space-between">
|
||||
<v-select
|
||||
v-model="state.newAsset.icon"
|
||||
density="compact"
|
||||
:prepend-icon="getIconDefinition(state.newAsset.icon).icon"
|
||||
:items="iconOptions"
|
||||
item-title="title"
|
||||
item-value="name"
|
||||
class="mr-2"
|
||||
>
|
||||
<template #item="{ props: itemProps, item }">
|
||||
<v-list-item v-bind="itemProps">
|
||||
<template #prepend>
|
||||
<v-avatar>
|
||||
<v-icon>
|
||||
{{ item.raw.icon }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-select>
|
||||
<AppButtonUpload
|
||||
:post="false"
|
||||
file-name="file"
|
||||
:text-btn="false"
|
||||
@uploaded="setFileObject"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useStaticRoutes, useUserApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import type { RecipeAsset } from "~/lib/api/types/recipe";
|
||||
import { useCopy } from "~/composables/use-copy";
|
||||
|
||||
const props = defineProps({
|
||||
slug: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
recipeId: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const model = defineModel<RecipeAsset[]>({ required: true });
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const state = reactive({
|
||||
newAssetDialog: false,
|
||||
fileObject: {} as File,
|
||||
newAsset: {
|
||||
name: "",
|
||||
icon: "mdi-file",
|
||||
},
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
const { $globals } = useNuxtApp();
|
||||
const { copyText } = useCopy();
|
||||
|
||||
const iconOptions = [
|
||||
{
|
||||
name: "mdi-file",
|
||||
title: i18n.t("asset.file"),
|
||||
icon: $globals.icons.file,
|
||||
},
|
||||
{
|
||||
name: "mdi-file-pdf-box",
|
||||
title: i18n.t("asset.pdf"),
|
||||
icon: $globals.icons.filePDF,
|
||||
},
|
||||
{
|
||||
name: "mdi-file-image",
|
||||
title: i18n.t("asset.image"),
|
||||
icon: $globals.icons.fileImage,
|
||||
},
|
||||
{
|
||||
name: "mdi-code-json",
|
||||
title: i18n.t("asset.code"),
|
||||
icon: $globals.icons.codeJson,
|
||||
},
|
||||
{
|
||||
name: "mdi-silverware-fork-knife",
|
||||
title: i18n.t("asset.recipe"),
|
||||
icon: $globals.icons.primary,
|
||||
},
|
||||
];
|
||||
|
||||
const serverBase = useRequestURL().origin;
|
||||
|
||||
function getIconDefinition(icon: string) {
|
||||
return iconOptions.find(item => item.name === icon) || iconOptions[0];
|
||||
}
|
||||
|
||||
function isImage(fileName?: string | null) {
|
||||
if (!fileName) return false;
|
||||
return /\.(png|jpe?g|gif|webp|bmp|avif)$/i.test(fileName);
|
||||
}
|
||||
|
||||
const { recipeAssetPath } = useStaticRoutes();
|
||||
function assetURL(assetName: string) {
|
||||
return recipeAssetPath(props.recipeId, assetName);
|
||||
}
|
||||
|
||||
function assetEmbed(name: string) {
|
||||
return `<img src="${serverBase}${assetURL(name)}" height="100%" width="100%" />`;
|
||||
}
|
||||
|
||||
function setFileObject(fileObject: File) {
|
||||
state.fileObject = fileObject;
|
||||
// If the user didn't provide a name, default to the file base name
|
||||
if (!state.newAsset.name?.trim()) {
|
||||
state.newAsset.name = fileObject.name.substring(0, fileObject.name.lastIndexOf("."));
|
||||
}
|
||||
}
|
||||
|
||||
function validFields() {
|
||||
// Only require a file; name will fall back to the file name if empty
|
||||
return Boolean(state.fileObject?.name);
|
||||
}
|
||||
|
||||
async function addAsset() {
|
||||
if (!validFields()) {
|
||||
alert.error(i18n.t("asset.error-submitting-form") as string);
|
||||
return;
|
||||
}
|
||||
|
||||
const nameToUse = state.newAsset.name?.trim() || state.fileObject.name;
|
||||
|
||||
const { data } = await api.recipes.createAsset(props.slug, {
|
||||
name: nameToUse,
|
||||
icon: state.newAsset.icon,
|
||||
file: state.fileObject,
|
||||
extension: state.fileObject.name.split(".").pop() || "",
|
||||
});
|
||||
if (data) {
|
||||
model.value = [...model.value, data];
|
||||
}
|
||||
state.newAsset = { name: "", icon: "mdi-file" };
|
||||
state.fileObject = {} as File;
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user