mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-05 05:25:26 +02:00
feat: ✨ (WIP) base-shoppinglist infra (#911)
* feat: ✨ base-shoppinglist infra (WIP) * add type checker * implement controllers * apply router fixes * add checked section hide/animation * add label support * formatting * fix overflow images * add experimental banner * fix #912 word break issue * remove any type errors * bump dependencies * remove templates * fix build errors * bump node version * fix template literal
This commit is contained in:
Hayden
GitHub
parent
86c99b10a2
commit
6db1357064
66 changed files with 3455 additions and 1311 deletions
|
|
@ -58,7 +58,6 @@
|
|||
show-print
|
||||
:menu-top="false"
|
||||
:slug="slug"
|
||||
:name="name"
|
||||
:menu-icon="$globals.icons.mdiDotsHorizontal"
|
||||
fab
|
||||
color="info"
|
||||
|
|
@ -69,6 +68,7 @@
|
|||
edit: false,
|
||||
download: true,
|
||||
mealplanner: true,
|
||||
shoppingList: true,
|
||||
print: true,
|
||||
share: true,
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
edit: true,
|
||||
download: true,
|
||||
mealplanner: true,
|
||||
shoppingList: true,
|
||||
print: false,
|
||||
share: true,
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
edit: true,
|
||||
download: true,
|
||||
mealplanner: true,
|
||||
shoppingList: true,
|
||||
print: false,
|
||||
share: true,
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<BaseCardSectionTitle :title="key"> </BaseCardSectionTitle>
|
||||
<v-row>
|
||||
<v-col v-for="(item, index) in itms" :key="'cat' + index" cols="12" :sm="12" :md="6" :lg="4" :xl="3">
|
||||
<v-card hover :to="`/recipes/${itemType}/${item.slug}`">
|
||||
<v-card class="left-border" hover :to="`/recipes/${itemType}/${item.slug}`">
|
||||
<v-card-actions>
|
||||
<v-icon>
|
||||
{{ icon }}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,21 @@
|
|||
<v-select v-model="newMealType" :return-object="false" :items="planTypeOptions" label="Entry Type"></v-select>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<BaseDialog v-model="shoppingListDialog" title="Add to List" :icon="$globals.icons.cartCheck">
|
||||
<v-card-text>
|
||||
<v-card
|
||||
v-for="list in shoppingLists"
|
||||
:key="list.id"
|
||||
hover
|
||||
class="my-2 left-border"
|
||||
@click="addRecipeToList(list.id)"
|
||||
>
|
||||
<v-card-title class="py-2">
|
||||
{{ list.name }}
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-card-text>
|
||||
</BaseDialog>
|
||||
<v-menu
|
||||
offset-y
|
||||
left
|
||||
|
|
@ -76,17 +91,19 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, reactive, toRefs, useContext, useRouter, ref } from "@nuxtjs/composition-api";
|
||||
import RecipeDialogShare from "./RecipeDialogShare.vue";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { MealType, planTypeOptions } from "~/composables/use-group-mealplan";
|
||||
import { ShoppingListSummary } from "~/api/class-interfaces/group-shopping-lists";
|
||||
|
||||
export interface ContextMenuIncludes {
|
||||
delete: boolean;
|
||||
edit: boolean;
|
||||
download: boolean;
|
||||
mealplanner: boolean;
|
||||
shoppingList: boolean;
|
||||
print: boolean;
|
||||
share: boolean;
|
||||
}
|
||||
|
|
@ -110,6 +127,7 @@ export default defineComponent({
|
|||
edit: true,
|
||||
download: true,
|
||||
mealplanner: true,
|
||||
shoppingList: true,
|
||||
print: true,
|
||||
share: true,
|
||||
}),
|
||||
|
|
@ -160,6 +178,7 @@ export default defineComponent({
|
|||
shareDialog: false,
|
||||
recipeDeleteDialog: false,
|
||||
mealplannerDialog: false,
|
||||
shoppingListDialog: false,
|
||||
loading: false,
|
||||
menuItems: [] as ContextMenuItem[],
|
||||
newMealdate: "",
|
||||
|
|
@ -197,6 +216,12 @@ export default defineComponent({
|
|||
color: undefined,
|
||||
event: "mealplanner",
|
||||
},
|
||||
shoppingList: {
|
||||
title: "Add to List",
|
||||
icon: $globals.icons.cartCheck,
|
||||
color: undefined,
|
||||
event: "shoppingList",
|
||||
},
|
||||
print: {
|
||||
title: i18n.t("general.print") as string,
|
||||
icon: $globals.icons.printer,
|
||||
|
|
@ -229,6 +254,23 @@ export default defineComponent({
|
|||
// ===========================================================================
|
||||
// Context Menu Event Handler
|
||||
|
||||
const shoppingLists = ref<ShoppingListSummary[]>();
|
||||
|
||||
async function getShoppingLists() {
|
||||
const { data } = await api.shopping.lists.getAll();
|
||||
if (data) {
|
||||
shoppingLists.value = data;
|
||||
}
|
||||
}
|
||||
|
||||
async function addRecipeToList(listId: string) {
|
||||
const { data } = await api.shopping.lists.addRecipe(listId, props.recipeId);
|
||||
if (data) {
|
||||
alert.success("Recipe added to list");
|
||||
state.shoppingListDialog = false;
|
||||
}
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
async function deleteRecipe() {
|
||||
|
|
@ -270,6 +312,10 @@ export default defineComponent({
|
|||
mealplanner: () => {
|
||||
state.mealplannerDialog = true;
|
||||
},
|
||||
shoppingList: () => {
|
||||
getShoppingLists();
|
||||
state.shoppingListDialog = true;
|
||||
},
|
||||
share: () => {
|
||||
state.shareDialog = true;
|
||||
},
|
||||
|
|
@ -289,6 +335,8 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
return {
|
||||
shoppingLists,
|
||||
addRecipeToList,
|
||||
...toRefs(state),
|
||||
contextMenuEventHandler,
|
||||
deleteRecipe,
|
||||
|
|
|
|||
141
frontend/components/Domain/ShoppingList/ShoppingListItem.vue
Normal file
141
frontend/components/Domain/ShoppingList/ShoppingListItem.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div v-if="!edit" class="small-checkboxes d-flex justify-space-between align-center">
|
||||
<v-checkbox v-model="listItem.checked" hide-details dense :label="listItem.note" @change="$emit('checked')">
|
||||
<template #label>
|
||||
<div>
|
||||
{{ listItem.quantity }} <v-icon size="16" class="mx-1"> {{ $globals.icons.close }} </v-icon>
|
||||
{{ listItem.note }}
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
<v-chip v-if="listItem.label" class="ml-auto mt-2" small label>
|
||||
{{ listItem.label.name }}
|
||||
</v-chip>
|
||||
<v-menu offset-x left>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn small class="ml-2 mt-2 handle" icon v-bind="attrs" v-on="on">
|
||||
<v-icon>
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
|
||||
<v-list-item-title>{{ action.text }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
<div v-else class="my-1">
|
||||
<v-card outlined>
|
||||
<v-card-text>
|
||||
<v-textarea v-model="listItem.note" hide-details label="Note" rows="1" auto-grow></v-textarea>
|
||||
<div style="max-width: 300px" class="mt-3">
|
||||
<v-autocomplete
|
||||
v-model="listItem.labelId"
|
||||
name=""
|
||||
:items="labels"
|
||||
item-value="id"
|
||||
hide-details
|
||||
item-text="name"
|
||||
clearable
|
||||
:prepend-inner-icon="$globals.icons.tags"
|
||||
>
|
||||
</v-autocomplete>
|
||||
<v-checkbox v-model="listItem.isFood" hide-details label="Treat list item as a recipe ingredient" />
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions class="ma-0 pt-0 pb-1 justify-end">
|
||||
<v-btn icon @click="save">
|
||||
<v-icon>
|
||||
{{ $globals.icons.save }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from "@nuxtjs/composition-api";
|
||||
import { Label } from "~/api/class-interfaces/group-multiple-purpose-labels";
|
||||
import { ShoppingListItemCreate } from "~/api/class-interfaces/group-shopping-lists";
|
||||
|
||||
interface actions {
|
||||
text: string;
|
||||
event: string;
|
||||
}
|
||||
|
||||
const contextMenu: actions[] = [
|
||||
{
|
||||
text: "Edit",
|
||||
event: "edit",
|
||||
},
|
||||
// {
|
||||
// text: "Delete",
|
||||
// event: "delete",
|
||||
// },
|
||||
// {
|
||||
// text: "Move",
|
||||
// event: "move",
|
||||
// },
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: Object as () => ShoppingListItemCreate,
|
||||
required: true,
|
||||
},
|
||||
labels: {
|
||||
type: Array as () => Label[],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
const listItem = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
const edit = ref(false);
|
||||
function contextHandler(event: string) {
|
||||
if (event === "edit") {
|
||||
edit.value = true;
|
||||
} else {
|
||||
context.emit(event);
|
||||
}
|
||||
}
|
||||
function save() {
|
||||
context.emit("save");
|
||||
edit.value = false;
|
||||
}
|
||||
|
||||
function handle(event: string) {
|
||||
console.log(event);
|
||||
}
|
||||
|
||||
const updatedLabels = computed(() => {
|
||||
return props.labels.map((label) => {
|
||||
return {
|
||||
id: label.id,
|
||||
text: label.name,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
updatedLabels,
|
||||
handle,
|
||||
save,
|
||||
contextHandler,
|
||||
edit,
|
||||
contextMenu,
|
||||
listItem,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -60,7 +60,9 @@
|
|||
|
||||
<!-- Secondary Links -->
|
||||
<template v-if="secondaryLinks">
|
||||
<v-subheader v-if="secondaryHeader" class="pb-0">{{ secondaryHeader }}</v-subheader>
|
||||
<v-subheader v-if="secondaryHeader" :to="secondaryHeaderLink" class="pb-0">
|
||||
{{ secondaryHeader }}
|
||||
</v-subheader>
|
||||
<v-divider></v-divider>
|
||||
<v-list nav dense exact>
|
||||
<template v-for="nav in secondaryLinks">
|
||||
|
|
@ -161,6 +163,10 @@ export default defineComponent({
|
|||
type: String,
|
||||
default: null,
|
||||
},
|
||||
secondaryHeaderLink: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
// V-Model Support
|
||||
|
|
|
|||
6
frontend/components/global/BannerExperimental.vue
Normal file
6
frontend/components/global/BannerExperimental.vue
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<v-alert border="left" colored-border type="warning" elevation="2" :icon="$globals.icons.alert">
|
||||
<b>Experimental Feature</b>
|
||||
<div>This page contains experimental or still-baking features. Please excuse the mess.</div>
|
||||
</v-alert>
|
||||
</template>
|
||||
56
frontend/components/global/BaseButtonGroup.vue
Normal file
56
frontend/components/global/BaseButtonGroup.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<v-item-group>
|
||||
<template v-for="btn in buttons">
|
||||
<v-menu v-if="btn.children" :key="'menu-' + btn.event" active-class="pa-0" offset-x left>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn tile large icon v-bind="attrs" v-on="on">
|
||||
<v-icon>
|
||||
{{ btn.icon }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="(child, idx) in btn.children" :key="idx" dense @click="$emit(child.event)">
|
||||
<v-list-item-title>{{ child.text }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-tooltip
|
||||
v-else
|
||||
:key="'btn-' + btn.event"
|
||||
open-delay="200"
|
||||
transition="slide-y-reverse-transition"
|
||||
dense
|
||||
bottom
|
||||
content-class="text-caption"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn tile large icon v-bind="attrs" @click="$emit(btn.event)" v-on="on">
|
||||
<v-icon> {{ btn.icon }} </v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>{{ btn.text }}</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-item-group>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
|
||||
export interface ButtonOption {
|
||||
icon: string;
|
||||
text: string;
|
||||
event: string;
|
||||
children: ButtonOption[];
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
buttons: {
|
||||
type: Array as () => ButtonOption[],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
<!-- Event -->
|
||||
<!-- Links -->
|
||||
<v-list v-else-if="mode === MODES.link" dense>
|
||||
<v-list-item-group v-model="itemGroup">
|
||||
<v-list-item v-for="(item, index) in items" :key="index" :to="item.to">
|
||||
|
|
@ -58,6 +58,13 @@ const MODES = {
|
|||
event: "event",
|
||||
};
|
||||
|
||||
export interface MenuItem {
|
||||
text: string;
|
||||
icon: string;
|
||||
to?: string;
|
||||
event: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
mode: {
|
||||
|
|
@ -65,7 +72,7 @@ export default defineComponent({
|
|||
default: "model",
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
type: Array as () => MenuItem[],
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
|
|
@ -92,6 +99,8 @@ export default defineComponent({
|
|||
const activeObj = ref({
|
||||
text: "DEFAULT",
|
||||
value: "",
|
||||
icon: undefined,
|
||||
event: undefined,
|
||||
});
|
||||
|
||||
let startIndex = 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue