mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-19 13:19:41 +02:00
feat(frontend): ✨ Rewrite context menu in TS and add 'add to mealplan' context menu action (#786)
* make entry for NLP model `setup-model`
* add comments
* feat(frontend): ✨ Rewrite context menu in TS and add 'add to mealplan' options
* add note to changelog
Co-authored-by: Hayden K <hay-kot@pm.me>
This commit is contained in:
Hayden
GitHub
parent
5cb4a1ade0
commit
095d3bda3f
10 changed files with 314 additions and 156 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="text-center">
|
||||
<BaseDialog
|
||||
ref="confirmDelete"
|
||||
ref="domConfirmDelete"
|
||||
:title="$t('recipe.delete-recipe')"
|
||||
color="error"
|
||||
:icon="$globals.icons.alertCircle"
|
||||
|
|
@ -11,6 +11,38 @@
|
|||
{{ $t("recipe.delete-confirmation") }}
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseDialog
|
||||
ref="domMealplanDialog"
|
||||
title="Add Recipe to Mealplan"
|
||||
color="primary"
|
||||
:icon="$globals.icons.calendar"
|
||||
@confirm="addRecipeToPlan()"
|
||||
>
|
||||
<v-card-text>
|
||||
<v-menu
|
||||
v-model="pickerMenu"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
max-width="290px"
|
||||
min-width="auto"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-text-field
|
||||
v-model="newMealdate"
|
||||
label="Date"
|
||||
hint="MM/DD/YYYY format"
|
||||
persistent-hint
|
||||
:prepend-icon="$globals.icons.calendar"
|
||||
v-bind="attrs"
|
||||
readonly
|
||||
v-on="on"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="newMealdate" no-title @input="pickerMenu = false"></v-date-picker>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-menu
|
||||
offset-y
|
||||
left
|
||||
|
|
@ -25,11 +57,11 @@
|
|||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
|
||||
<v-icon>{{ effMenuIcon }}</v-icon>
|
||||
<v-icon>{{ icon }}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="(item, index) in displayedMenu" :key="index" @click="menuAction(item.action)">
|
||||
<v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
|
||||
<v-list-item-icon>
|
||||
<v-icon :color="item.color" v-text="item.icon"></v-icon>
|
||||
</v-list-item-icon>
|
||||
|
|
@ -40,20 +72,55 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
|
||||
import { useClipboard, useShare } from "@vueuse/core";
|
||||
import { useApiSingleton } from "~/composables/use-api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
|
||||
export interface ContextMenuIncludes {
|
||||
delete: boolean;
|
||||
edit: boolean;
|
||||
download: boolean;
|
||||
mealplanner: boolean;
|
||||
print: boolean;
|
||||
share: boolean;
|
||||
}
|
||||
|
||||
export interface ContextMenuItem {
|
||||
title: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
event: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
useItems: {
|
||||
type: Object as () => ContextMenuIncludes,
|
||||
default: () => ({
|
||||
delete: true,
|
||||
edit: true,
|
||||
download: true,
|
||||
mealplanner: true,
|
||||
print: true,
|
||||
share: true,
|
||||
}),
|
||||
},
|
||||
// Append items are added at the end of the useItems list
|
||||
appendItems: {
|
||||
type: Array as () => ContextMenuItem[],
|
||||
default: () => [],
|
||||
},
|
||||
// Append items are added at the beginning of the useItems list
|
||||
leadingItems: {
|
||||
type: Array as () => ContextMenuItem[],
|
||||
default: () => [],
|
||||
},
|
||||
menuTop: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showPrint: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
fab: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
|
|
@ -74,146 +141,177 @@ export default defineComponent({
|
|||
required: true,
|
||||
type: String,
|
||||
},
|
||||
cardMenu: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
recipeId: {
|
||||
required: true,
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
setup(props, context) {
|
||||
const api = useApiSingleton();
|
||||
const confirmDelete = ref(null);
|
||||
return { api, confirmDelete };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
menuItems: [] as ContextMenuItem[],
|
||||
newMealdate: "",
|
||||
pickerMenu: false,
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
const { i18n, $globals } = useContext();
|
||||
|
||||
// ===========================================================================
|
||||
// Context Menu Setup
|
||||
|
||||
const defaultItems: { [key: string]: ContextMenuItem } = {
|
||||
edit: {
|
||||
title: i18n.t("general.edit") as string,
|
||||
icon: $globals.icons.edit,
|
||||
color: "primary",
|
||||
event: "edit",
|
||||
},
|
||||
delete: {
|
||||
title: i18n.t("general.delete") as string,
|
||||
icon: $globals.icons.delete,
|
||||
color: "error",
|
||||
event: "delete",
|
||||
},
|
||||
download: {
|
||||
title: i18n.t("general.download") as string,
|
||||
icon: $globals.icons.download,
|
||||
color: "primary",
|
||||
event: "download",
|
||||
},
|
||||
mealplanner: {
|
||||
title: "Add to Plan",
|
||||
icon: $globals.icons.calendar,
|
||||
color: "primary",
|
||||
event: "mealplanner",
|
||||
},
|
||||
print: {
|
||||
title: i18n.t("general.print") as string,
|
||||
icon: $globals.icons.printer,
|
||||
color: "primary",
|
||||
event: "print",
|
||||
},
|
||||
share: {
|
||||
title: i18n.t("general.share") as string,
|
||||
icon: $globals.icons.shareVariant,
|
||||
color: "primary",
|
||||
event: "share",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
effMenuIcon() {
|
||||
return this.menuIcon ? this.menuIcon : this.$globals.icons.dotsVertical;
|
||||
},
|
||||
loggedIn() {
|
||||
return this.$auth.loggedIn;
|
||||
},
|
||||
baseURL() {
|
||||
return window.location.origin;
|
||||
},
|
||||
recipeURL() {
|
||||
return `${this.baseURL}/recipe/${this.slug}`;
|
||||
},
|
||||
printerMenu() {
|
||||
return {
|
||||
title: this.$t("general.print"),
|
||||
icon: this.$globals.icons.printer,
|
||||
color: "accent",
|
||||
action: "print",
|
||||
};
|
||||
},
|
||||
defaultMenu() {
|
||||
return [
|
||||
{
|
||||
title: this.$t("general.share"),
|
||||
icon: this.$globals.icons.shareVariant,
|
||||
color: "accent",
|
||||
action: "share",
|
||||
},
|
||||
{
|
||||
title: this.$t("general.download"),
|
||||
icon: this.$globals.icons.download,
|
||||
color: "accent",
|
||||
action: "download",
|
||||
},
|
||||
];
|
||||
},
|
||||
userMenu() {
|
||||
return [
|
||||
{
|
||||
title: this.$t("general.delete"),
|
||||
icon: this.$globals.icons.delete,
|
||||
color: "error",
|
||||
action: "delete",
|
||||
},
|
||||
{
|
||||
title: this.$t("general.edit"),
|
||||
icon: this.$globals.icons.edit,
|
||||
color: "accent",
|
||||
action: "edit",
|
||||
},
|
||||
];
|
||||
},
|
||||
displayedMenu() {
|
||||
let menu = this.defaultMenu;
|
||||
if (this.loggedIn && this.cardMenu) {
|
||||
menu = [...this.userMenu, ...menu];
|
||||
}
|
||||
if (this.showPrint) {
|
||||
menu = [this.printerMenu, ...menu];
|
||||
}
|
||||
return menu;
|
||||
},
|
||||
recipeText() {
|
||||
return this.$t("recipe.share-recipe-message", [this.name]);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async menuAction(action) {
|
||||
this.loading = true;
|
||||
|
||||
switch (action) {
|
||||
case "delete":
|
||||
this.confirmDelete.open();
|
||||
break;
|
||||
case "share":
|
||||
if (navigator.share) {
|
||||
navigator
|
||||
.share({
|
||||
title: this.name,
|
||||
text: this.recipeText,
|
||||
url: this.recipeURL,
|
||||
})
|
||||
.then(() => console.log("Successful share"))
|
||||
.catch((error) => {
|
||||
console.log("WebShareAPI not supported", error);
|
||||
this.updateClipboard();
|
||||
});
|
||||
} else this.updateClipboard();
|
||||
break;
|
||||
case "edit":
|
||||
this.$router.push(`/recipe/${this.slug}` + "?edit=true");
|
||||
break;
|
||||
case "print":
|
||||
this.$emit("print");
|
||||
break;
|
||||
case "download":
|
||||
// TODO: Refacor this entire component to not suck so much
|
||||
// eslint-disable-next-line
|
||||
const { data } = await this.api.recipes.getZipToken(this.slug);
|
||||
window.open(this.api.recipes.getZipRedirectUrl(this.slug, data.token));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
async deleteRecipe() {
|
||||
await this.api.recipes.deleteOne(this.slug);
|
||||
this.$emit("deleted");
|
||||
},
|
||||
updateClipboard() {
|
||||
const copyText = this.recipeURL;
|
||||
navigator.clipboard.writeText(copyText).then(
|
||||
() => {
|
||||
console.log("Copied to Clipboard", copyText);
|
||||
alert.success("Recipe link copied to clipboard");
|
||||
},
|
||||
() => {
|
||||
console.log("Copied Failed", copyText);
|
||||
alert.error("Copied Failed");
|
||||
// Get Default Menu Items Specified in Props
|
||||
for (const [key, value] of Object.entries(props.useItems)) {
|
||||
if (value) {
|
||||
const item = defaultItems[key];
|
||||
if (item) {
|
||||
state.menuItems.push(item);
|
||||
}
|
||||
);
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// Add leading and Apppending Items
|
||||
state.menuItems = [...state.menuItems, ...props.leadingItems, ...props.appendItems];
|
||||
|
||||
const icon = props.menuIcon || $globals.icons.dotsVertical;
|
||||
|
||||
function getRecipeUrl() {
|
||||
return `${window.location.origin}/recipe/${props.slug}`;
|
||||
}
|
||||
|
||||
function getRecipeText() {
|
||||
return i18n.t("recipe.share-recipe-message", [props.name]);
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
// Context Menu Event Handler
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const domConfirmDelete = ref(null);
|
||||
|
||||
async function deleteRecipe() {
|
||||
await api.recipes.deleteOne(props.slug);
|
||||
context.emit("delete", props.slug);
|
||||
}
|
||||
|
||||
async function handleDownloadEvent() {
|
||||
const { data } = await api.recipes.getZipToken(props.slug);
|
||||
|
||||
if (data) {
|
||||
window.open(api.recipes.getZipRedirectUrl(props.slug, data.token));
|
||||
}
|
||||
}
|
||||
|
||||
const { share, isSupported: shareIsSupported } = useShare();
|
||||
|
||||
const source = ref("");
|
||||
const { copy } = useClipboard({ source });
|
||||
|
||||
async function handleShareEvent() {
|
||||
if (shareIsSupported) {
|
||||
share({
|
||||
title: props.name,
|
||||
url: getRecipeUrl(),
|
||||
text: getRecipeText() as string,
|
||||
});
|
||||
} else {
|
||||
await copy(getRecipeUrl());
|
||||
alert.success("Recipe link copied to clipboard");
|
||||
}
|
||||
}
|
||||
|
||||
const domMealplanDialog = ref(null);
|
||||
async function addRecipeToPlan() {
|
||||
const { response } = await api.mealplans.createOne({
|
||||
date: state.newMealdate,
|
||||
entryType: "dinner",
|
||||
title: "",
|
||||
text: "",
|
||||
recipeId: props.recipeId,
|
||||
});
|
||||
|
||||
if (response?.status === 201) {
|
||||
alert.success("Recipe added to mealplan");
|
||||
} else {
|
||||
alert.error("Failed to add recipe to mealplan");
|
||||
}
|
||||
}
|
||||
|
||||
// Note: Print is handled as an event in the parent component
|
||||
const eventHandlers: { [key: string]: Function } = {
|
||||
// @ts-ignore - Doens't know about open()
|
||||
delete: () => domConfirmDelete?.value?.open(),
|
||||
edit: () => router.push(`/recipe/${props.slug}` + "?edit=true"),
|
||||
download: handleDownloadEvent,
|
||||
// @ts-ignore - Doens't know about open()
|
||||
mealplanner: () => domMealplanDialog?.value?.open(),
|
||||
share: handleShareEvent,
|
||||
};
|
||||
|
||||
function contextMenuEventHandler(eventKey: string) {
|
||||
const handler = eventHandlers[eventKey];
|
||||
|
||||
if (handler && typeof handler === "function") {
|
||||
handler();
|
||||
state.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
context.emit(eventKey);
|
||||
state.loading = false;
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
contextMenuEventHandler,
|
||||
deleteRecipe,
|
||||
addRecipeToPlan,
|
||||
domConfirmDelete,
|
||||
domMealplanDialog,
|
||||
icon,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue